migration wip

- Update ScssDocs tags where appropriate
- Removed a null Sass variable, $table-th-font-weight
- Removed $table-caption-color because we put table Sass vars in the _tables.scss file away from the _reboot.scss file
- Fix docs styles as needed

.browserslistrc

@@ -3,10 +3,10 @@
 >= 0.5%
 last 2 major versions
 not dead
-Chrome >= 60
-Firefox >= 60
-Firefox ESR
-iOS >= 12
-Safari >= 12
+Chrome >= 120
+Firefox >= 121
+iOS >= 15.6
+Safari >= 15.6
 not Explorer <= 11
+Samsung >= 23
 not kaios <= 2.5 # fix floating label issues in Firefox (see https://github.com/postcss/autoprefixer/issues/1533)

.bundlewatch.config.json

@@ -1,36 +1,12 @@
 {
   "files": [
-    {
-      "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "6.5 kB"
-    },
-    {
-      "path": "./dist/css/bootstrap-grid.min.css",
-      "maxSize": "6.0 kB"
-    },
-    {
-      "path": "./dist/css/bootstrap-reboot.css",
-      "maxSize": "3.5 kB"
-    },
-    {
-      "path": "./dist/css/bootstrap-reboot.min.css",
-      "maxSize": "3.25 kB"
-    },
-    {
-      "path": "./dist/css/bootstrap-utilities.css",
-      "maxSize": "11.75 kB"
-    },
-    {
-      "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "10.75 kB"
-    },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "32.5 kB"
+      "maxSize": "34 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "30.25 kB"
+      "maxSize": "32 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

.cspell.json

@@ -29,6 +29,7 @@
     "Crossfade",
     "crossfading",
     "cssgrid",
+    "csstricks",
     "Csvg",
     "Datalists",
     "Deque",

.github/workflows/node-sass.yml

@@ -1,49 +0,0 @@
-name: CSS (node-sass)
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-  workflow_dispatch:
-
-env:
-  FORCE_COLOR: 2
-  NODE: 22
-
-permissions:
-  contents: read
-
-jobs:
-  css:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Clone repository
-        uses: actions/checkout@v4
-        with:
-          persist-credentials: false
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "${{ env.NODE }}"
-
-      - name: Build CSS with node-sass
-        run: |
-          npx --package node-sass@latest node-sass --version
-          npx --package node-sass@latest node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/ -o dist-sass/css/
-          ls -Al dist-sass/css
-
-      - name: Check built CSS files for Sass variables
-        shell: bash
-        run: |
-          SASS_VARS_FOUND=$(find "dist-sass/css/" -type f -name "*.css" -print0 | xargs -0 --no-run-if-empty grep -F "\$" || true)
-          if [[ -z "$SASS_VARS_FOUND" ]]; then
-            echo "All good, no Sass variables found!"
-            exit 0
-          else
-            echo "Found $(echo "$SASS_VARS_FOUND" | wc -l | bc) Sass variables:"
-            echo "$SASS_VARS_FOUND"
-            exit 1
-          fi

.markdownlint.json

@@ -0,0 +1,17 @@
+{
+  "default": true,
+  "MD004": { "style": "dash" },
+  "MD013": false,
+  "MD024": false,
+  "MD025": false,
+  "MD026": false,
+  "MD031": false,
+  "MD033": false,
+  "MD034": false,
+  "MD037": false,
+  "MD038": false,
+  "MD041": false,
+  "MD046": false,
+  "line-length": false,
+  "no-inline-html": false
+}

.stylelintrc.json

@@ -13,7 +13,6 @@
           "outline": "none"
         },
         "function-disallowed-list": [
-          "calc",
           "lighten",
           "darken"
         ],

dist/css/bootstrap-grid.css

@@ -4081,5 +4081,4 @@
     display: none !important;
   }
 }
-
 /*# sourceMappingURL=bootstrap-grid.css.map */

dist/css/bootstrap-reboot.css

@@ -593,5 +593,4 @@ progress {
 [hidden] {
   display: none !important;
 }
-
 /*# sourceMappingURL=bootstrap-reboot.css.map */

dist/css/bootstrap-utilities.css

@@ -5402,5 +5402,4 @@
     display: none !important;
   }
 }
-
 /*# sourceMappingURL=bootstrap-utilities.css.map */

js/index.esm.js

@@ -16,4 +16,5 @@ export { default as Popover } from './src/popover.js'
 export { default as ScrollSpy } from './src/scrollspy.js'
 export { default as Tab } from './src/tab.js'
 export { default as Toast } from './src/toast.js'
+export { default as Toggler } from './src/toggler.js'
 export { default as Tooltip } from './src/tooltip.js'

js/index.umd.js

@@ -16,6 +16,7 @@ import Popover from './src/popover.js'
 import ScrollSpy from './src/scrollspy.js'
 import Tab from './src/tab.js'
 import Toast from './src/toast.js'
+import Toggler from './src/toggler.js'
 import Tooltip from './src/tooltip.js'
 
 export default {
@@ -30,5 +31,6 @@ export default {
   ScrollSpy,
   Tab,
   Toast,
+  Toggler,
   Tooltip
 }

js/src/alert.js

@@ -8,7 +8,6 @@
 import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import { enableDismissTrigger } from './util/component-functions.js'
-import { defineJQueryPlugin } from './util/index.js'
 
 /**
  * Constants
@@ -53,23 +52,6 @@ class Alert extends BaseComponent {
     EventHandler.trigger(this._element, EVENT_CLOSED)
     this.dispose()
   }
-
-  // Static
-  static jQueryInterface(config) {
-    return this.each(function () {
-      const data = Alert.getOrCreateInstance(this)
-
-      if (typeof config !== 'string') {
-        return
-      }
-
-      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
-        throw new TypeError(`No method named "${config}"`)
-      }
-
-      data[config](this)
-    })
-  }
 }
 
 /**
@@ -78,10 +60,4 @@ class Alert extends BaseComponent {
 
 enableDismissTrigger(Alert, 'close')
 
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Alert)
-
 export default Alert

js/src/button.js

@@ -7,7 +7,6 @@
 
 import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
-import { defineJQueryPlugin } from './util/index.js'
 
 /**
  * Constants
@@ -37,17 +36,6 @@ class Button extends BaseComponent {
     // Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method
     this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE))
   }
-
-  // Static
-  static jQueryInterface(config) {
-    return this.each(function () {
-      const data = Button.getOrCreateInstance(this)
-
-      if (config === 'toggle') {
-        data[config]()
-      }
-    })
-  }
 }
 
 /**
@@ -63,10 +51,4 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
   data.toggle()
 })
 
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Button)
-
 export default Button

js/src/carousel.js

@@ -10,7 +10,6 @@ import EventHandler from './dom/event-handler.js'
 import Manipulator from './dom/manipulator.js'
 import SelectorEngine from './dom/selector-engine.js'
 import {
-  defineJQueryPlugin,
   getNextActiveElement,
   isRTL,
   isVisible,
@@ -403,26 +402,6 @@ class Carousel extends BaseComponent {
 
     return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT
   }
-
-  // Static
-  static jQueryInterface(config) {
-    return this.each(function () {
-      const data = Carousel.getOrCreateInstance(this, config)
-
-      if (typeof config === 'number') {
-        data.to(config)
-        return
-      }
-
-      if (typeof config === 'string') {
-        if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
-          throw new TypeError(`No method named "${config}"`)
-        }
-
-        data[config]()
-      }
-    })
-  }
 }
 
 /**
@@ -465,10 +444,4 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
   }
 })
 
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Carousel)
-
 export default Carousel

js/src/collapse.js

@@ -9,7 +9,6 @@ import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import SelectorEngine from './dom/selector-engine.js'
 import {
-  defineJQueryPlugin,
   getElement,
   reflow
 } from './util/index.js'
@@ -251,26 +250,6 @@ class Collapse extends BaseComponent {
       element.setAttribute('aria-expanded', isOpen)
     }
   }
-
-  // Static
-  static jQueryInterface(config) {
-    const _config = {}
-    if (typeof config === 'string' && /show|hide/.test(config)) {
-      _config.toggle = false
-    }
-
-    return this.each(function () {
-      const data = Collapse.getOrCreateInstance(this, _config)
-
-      if (typeof config === 'string') {
-        if (typeof data[config] === 'undefined') {
-          throw new TypeError(`No method named "${config}"`)
-        }
-
-        data[config]()
-      }
-    })
-  }
 }
 
 /**
@@ -288,10 +267,4 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
   }
 })
 
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Collapse)
-
 export default Collapse

js/src/dom/event-handler.js

@@ -5,8 +5,6 @@
  * --------------------------------------------------------------------------
  */
 
-import { getjQuery } from '../util/index.js'
-
 /**
  * Constants
  */
@@ -261,38 +259,8 @@ const EventHandler = {
       return null
     }
 
-    const $ = getjQuery()
-    const typeEvent = getTypeEvent(event)
-    const inNamespace = event !== typeEvent
-
-    let jQueryEvent = null
-    let bubbles = true
-    let nativeDispatch = true
-    let defaultPrevented = false
-
-    if (inNamespace && $) {
-      jQueryEvent = $.Event(event, args)
-
-      $(element).trigger(jQueryEvent)
-      bubbles = !jQueryEvent.isPropagationStopped()
-      nativeDispatch = !jQueryEvent.isImmediatePropagationStopped()
-      defaultPrevented = jQueryEvent.isDefaultPrevented()
-    }
-
-    const evt = hydrateObj(new Event(event, { bubbles, cancelable: true }), args)
-
-    if (defaultPrevented) {
-      evt.preventDefault()
-    }
-
-    if (nativeDispatch) {
-      element.dispatchEvent(evt)
-    }
-
-    if (evt.defaultPrevented && jQueryEvent) {
-      jQueryEvent.preventDefault()
-    }
-
+    const evt = hydrateObj(new Event(event, { bubbles: true, cancelable: true }), args)
+    element.dispatchEvent(evt)
     return evt
   }
 }

js/src/dropdown.js

@@ -11,7 +11,6 @@ import EventHandler from './dom/event-handler.js'
 import Manipulator from './dom/manipulator.js'
 import SelectorEngine from './dom/selector-engine.js'
 import {
-  defineJQueryPlugin,
   execute,
   getElement,
   getNextActiveElement,
@@ -339,23 +338,6 @@ class Dropdown extends BaseComponent {
     getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target)).focus()
   }
 
-  // Static
-  static jQueryInterface(config) {
-    return this.each(function () {
-      const data = Dropdown.getOrCreateInstance(this, config)
-
-      if (typeof config !== 'string') {
-        return
-      }
-
-      if (typeof data[config] === 'undefined') {
-        throw new TypeError(`No method named "${config}"`)
-      }
-
-      data[config]()
-    })
-  }
-
   static clearMenus(event) {
     if (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY)) {
       return
@@ -449,10 +431,4 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
   Dropdown.getOrCreateInstance(this).toggle()
 })
 
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Dropdown)
-
 export default Dropdown

js/src/modal.js

@@ -12,7 +12,7 @@ import Backdrop from './util/backdrop.js'
 import { enableDismissTrigger } from './util/component-functions.js'
 import FocusTrap from './util/focustrap.js'
 import {
-  defineJQueryPlugin, isRTL, isVisible, reflow
+  isRTL, isVisible, reflow
 } from './util/index.js'
 import ScrollBarHelper from './util/scrollbar.js'
 
@@ -313,23 +313,6 @@ class Modal extends BaseComponent {
     this._element.style.paddingLeft = ''
     this._element.style.paddingRight = ''
   }
-
-  // Static
-  static jQueryInterface(config, relatedTarget) {
-    return this.each(function () {
-      const data = Modal.getOrCreateInstance(this, config)
-
-      if (typeof config !== 'string') {
-        return
-      }
-
-      if (typeof data[config] === 'undefined') {
-        throw new TypeError(`No method named "${config}"`)
-      }
-
-      data[config](relatedTarget)
-    })
-  }
 }
 
 /**
@@ -369,10 +352,4 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
 
 enableDismissTrigger(Modal)
 
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Modal)
-
 export default Modal

js/src/offcanvas.js

@@ -12,7 +12,6 @@ import Backdrop from './util/backdrop.js'
 import { enableDismissTrigger } from './util/component-functions.js'
 import FocusTrap from './util/focustrap.js'
 import {
-  defineJQueryPlugin,
   isDisabled,
   isVisible
 } from './util/index.js'
@@ -206,23 +205,6 @@ class Offcanvas extends BaseComponent {
       EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
     })
   }
-
-  // Static
-  static jQueryInterface(config) {
-    return this.each(function () {
-      const data = Offcanvas.getOrCreateInstance(this, config)
-
-      if (typeof config !== 'string') {
-        return
-      }
-
-      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
-        throw new TypeError(`No method named "${config}"`)
-      }
-
-      data[config](this)
-    })
-  }
 }
 
 /**
@@ -273,10 +255,4 @@ EventHandler.on(window, EVENT_RESIZE, () => {
 
 enableDismissTrigger(Offcanvas)
 
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Offcanvas)
-
 export default Offcanvas

js/src/popover.js

@@ -6,7 +6,6 @@
  */
 
 import Tooltip from './tooltip.js'
-import { defineJQueryPlugin } from './util/index.js'
 
 /**
  * Constants
@@ -69,29 +68,6 @@ class Popover extends Tooltip {
   _getContent() {
     return this._resolvePossibleFunction(this._config.content)
   }
-
-  // Static
-  static jQueryInterface(config) {
-    return this.each(function () {
-      const data = Popover.getOrCreateInstance(this, config)
-
-      if (typeof config !== 'string') {
-        return
-      }
-
-      if (typeof data[config] === 'undefined') {
-        throw new TypeError(`No method named "${config}"`)
-      }
-
-      data[config]()
-    })
-  }
 }
 
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Popover)
-
 export default Popover

js/src/scrollspy.js

@@ -9,7 +9,7 @@ import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import SelectorEngine from './dom/selector-engine.js'
 import {
-  defineJQueryPlugin, getElement, isDisabled, isVisible
+  getElement, isDisabled, isVisible
 } from './util/index.js'
 
 /**
@@ -258,23 +258,6 @@ class ScrollSpy extends BaseComponent {
       node.classList.remove(CLASS_NAME_ACTIVE)
     }
   }
-
-  // Static
-  static jQueryInterface(config) {
-    return this.each(function () {
-      const data = ScrollSpy.getOrCreateInstance(this, config)
-
-      if (typeof config !== 'string') {
-        return
-      }
-
-      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
-        throw new TypeError(`No method named "${config}"`)
-      }
-
-      data[config]()
-    })
-  }
 }
 
 /**
@@ -287,10 +270,4 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
   }
 })
 
-/**
- * jQuery
- */
-
-defineJQueryPlugin(ScrollSpy)
-
 export default ScrollSpy

js/src/tab.js

@@ -8,7 +8,7 @@
 import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import SelectorEngine from './dom/selector-engine.js'
-import { defineJQueryPlugin, getNextActiveElement, isDisabled } from './util/index.js'
+import { getNextActiveElement, isDisabled } from './util/index.js'
 
 /**
  * Constants
@@ -263,23 +263,6 @@ class Tab extends BaseComponent {
   _getOuterElement(elem) {
     return elem.closest(SELECTOR_OUTER) || elem
   }
-
-  // Static
-  static jQueryInterface(config) {
-    return this.each(function () {
-      const data = Tab.getOrCreateInstance(this)
-
-      if (typeof config !== 'string') {
-        return
-      }
-
-      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
-        throw new TypeError(`No method named "${config}"`)
-      }
-
-      data[config]()
-    })
-  }
 }
 
 /**
@@ -306,10 +289,5 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
     Tab.getOrCreateInstance(element)
   }
 })
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Tab)
 
 export default Tab

js/src/toast.js

@@ -8,7 +8,7 @@
 import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import { enableDismissTrigger } from './util/component-functions.js'
-import { defineJQueryPlugin, reflow } from './util/index.js'
+import { reflow } from './util/index.js'
 
 /**
  * Constants
@@ -192,21 +192,6 @@ class Toast extends BaseComponent {
     clearTimeout(this._timeout)
     this._timeout = null
   }
-
-  // Static
-  static jQueryInterface(config) {
-    return this.each(function () {
-      const data = Toast.getOrCreateInstance(this, config)
-
-      if (typeof config === 'string') {
-        if (typeof data[config] === 'undefined') {
-          throw new TypeError(`No method named "${config}"`)
-        }
-
-        data[config](this)
-      }
-    })
-  }
 }
 
 /**
@@ -215,10 +200,4 @@ class Toast extends BaseComponent {
 
 enableDismissTrigger(Toast)
 
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Toast)
-
 export default Toast

js/src/toggler.js

@@ -0,0 +1,98 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.1.3): toggler.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import BaseComponent from './base-component.js'
+import EventHandler from './dom/event-handler.js'
+import { eventActionOnPlugin } from './util/component-functions.js'
+
+/**
+ * Constants
+ */
+
+const NAME = 'toggler'
+const DATA_KEY = 'bs.toggle'
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_TOGGLE = `toggle${EVENT_KEY}`
+const EVENT_TOGGLED = `toggled${EVENT_KEY}`
+const EVENT_CLICK = 'click'
+
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="toggler"]'
+
+const DefaultType = {
+  attribute: 'string',
+  value: '(string|number|boolean)'
+}
+
+const Default = {
+  attribute: 'class',
+  value: null
+}
+
+/**
+ * Class definition
+ */
+
+class Toggler extends BaseComponent {
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  _configAfterMerge(config) {
+    return config
+  }
+
+  // Private
+  toggle() {
+    const toggleEvent = EventHandler.trigger(this._element, EVENT_TOGGLE)
+
+    if (toggleEvent.defaultPrevented) {
+      return
+    }
+
+    this._execute()
+
+    EventHandler.trigger(this._element, EVENT_TOGGLED)
+  }
+
+  _execute() {
+    const { attribute, value } = this._config
+
+    if (attribute === 'id') {
+      return // You have to be kidding
+    }
+
+    if (attribute === 'class') {
+      this._element.classList.toggle(value)
+      return
+    }
+
+    if (this._element.getAttribute(attribute) === value) {
+      this._element.removeAttribute(attribute)
+      return
+    }
+
+    this._element.setAttribute(attribute, value)
+  }
+}
+
+/**
+ * Data API implementation
+ */
+
+eventActionOnPlugin(Toggler, EVENT_CLICK, SELECTOR_DATA_TOGGLE, 'toggle')
+
+export default Toggler

js/src/tooltip.js

@@ -10,7 +10,7 @@ import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import Manipulator from './dom/manipulator.js'
 import {
-  defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop
+  execute, findShadowRoot, getElement, getUID, isRTL, noop
 } from './util/index.js'
 import { DefaultAllowlist } from './util/sanitizer.js'
 import TemplateFactory from './util/template-factory.js'
@@ -604,29 +604,5 @@ class Tooltip extends BaseComponent {
       this.tip = null
     }
   }
-
-  // Static
-  static jQueryInterface(config) {
-    return this.each(function () {
-      const data = Tooltip.getOrCreateInstance(this, config)
-
-      if (typeof config !== 'string') {
-        return
-      }
-
-      if (typeof data[config] === 'undefined') {
-        throw new TypeError(`No method named "${config}"`)
-      }
-
-      data[config]()
-    })
-  }
 }
-
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Tooltip)
-
 export default Tooltip

js/src/util/component-functions.js

@@ -30,6 +30,34 @@ const enableDismissTrigger = (component, method = 'hide') => {
   })
 }
 
-export {
-  enableDismissTrigger
+const eventActionOnPlugin = (Plugin, onEvent, stringSelector, method, callback = null) => {
+  eventAction(`${onEvent}.${Plugin.NAME}`, stringSelector, data => {
+    const instances = data.targets.filter(Boolean).map(element => Plugin.getOrCreateInstance(element))
+    if (typeof callback === 'function') {
+      callback({ ...data, instances })
+    }
+
+    for (const instance of instances) {
+      instance[method]()
+    }
+  })
+}
+
+const eventAction = (onEvent, stringSelector, callback) => {
+  const selector = `${stringSelector}:not(.disabled):not(:disabled)`
+  EventHandler.on(document, onEvent, selector, function (event) {
+    if (['A', 'AREA'].includes(this.tagName)) {
+      event.preventDefault()
+    }
+
+    const selector = SelectorEngine.getSelectorFromElement(this)
+    const targets = selector ? SelectorEngine.find(selector) : [this]
+
+    callback({ targets, event })
+  })
+}
+
+export {
+  enableDismissTrigger,
+  eventActionOnPlugin
 }

js/src/util/index.js

@@ -176,14 +176,6 @@ const reflow = element => {
   element.offsetHeight // eslint-disable-line no-unused-expressions
 }
 
-const getjQuery = () => {
-  if (window.jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
-    return window.jQuery
-  }
-
-  return null
-}
-
 const DOMContentLoadedCallbacks = []
 
 const onDOMContentLoaded = callback => {
@@ -205,23 +197,6 @@ const onDOMContentLoaded = callback => {
 
 const isRTL = () => document.documentElement.dir === 'rtl'
 
-const defineJQueryPlugin = plugin => {
-  onDOMContentLoaded(() => {
-    const $ = getjQuery()
-    /* istanbul ignore if */
-    if ($) {
-      const name = plugin.NAME
-      const JQUERY_NO_CONFLICT = $.fn[name]
-      $.fn[name] = plugin.jQueryInterface
-      $.fn[name].Constructor = plugin
-      $.fn[name].noConflict = () => {
-        $.fn[name] = JQUERY_NO_CONFLICT
-        return plugin.jQueryInterface
-      }
-    }
-  })
-}
-
 const execute = (possibleCallback, args = [], defaultValue = possibleCallback) => {
   return typeof possibleCallback === 'function' ? possibleCallback.call(...args) : defaultValue
 }
@@ -284,12 +259,10 @@ const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed
 }
 
 export {
-  defineJQueryPlugin,
   execute,
   executeAfterTransition,
   findShadowRoot,
   getElement,
-  getjQuery,
   getNextActiveElement,
   getTransitionDurationFromElement,
   getUID,

js/tests/unit/toggler.spec.js

@@ -0,0 +1,195 @@
+import Toggler from '../../src/toggler.js'
+import { clearFixture, getFixture } from '../helpers/fixture.js'
+
+describe('Toggler', () => {
+  let fixtureEl
+
+  beforeAll(() => {
+    fixtureEl = getFixture()
+  })
+
+  afterEach(() => {
+    clearFixture()
+  })
+
+  describe('VERSION', () => {
+    it('should return plugin version', () => {
+      expect(Toggler.VERSION).toEqual(jasmine.any(String))
+    })
+  })
+
+  describe('constructor', () => {
+    it('should take care of element either passed as a CSS selector or DOM element', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+      const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+      const togglerBySelector = new Toggler('[data-bs-toggle="toggler"]')
+      const togglerByElement = new Toggler(togglerEl)
+
+      expect(togglerBySelector._element).toEqual(togglerEl)
+      expect(togglerByElement._element).toEqual(togglerEl)
+    })
+  })
+
+  describe('toggle', () => {
+    it('should toggle class on the element', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+      const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+      const toggler = new Toggler(togglerEl)
+
+      toggler.toggle()
+      expect(togglerEl.classList.contains('bg-warning')).toBeTrue()
+
+      toggler.toggle()
+      expect(togglerEl.classList.contains('bg-warning')).toBeFalse()
+    })
+
+    it('should toggle attribute on the element', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="true" data-bs-attribute="hidden"></div>'
+
+      const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+      const toggler = new Toggler(togglerEl)
+
+      toggler.toggle()
+      expect(togglerEl.getAttribute('hidden')).toEqual('true')
+
+      toggler.toggle()
+      expect(togglerEl.hasAttribute('hidden')).toBeFalse()
+    })
+
+    it('should not toggle id attribute', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="new-id" data-bs-attribute="id"></div>'
+
+      const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+      const toggler = new Toggler(togglerEl)
+
+      toggler.toggle()
+      expect(togglerEl.getAttribute('id')).toBeNull()
+    })
+
+    it('should trigger events', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+      const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+      const toggler = new Toggler(togglerEl)
+
+      const toggleSpy = jasmine.createSpy()
+      const toggledSpy = jasmine.createSpy()
+
+      togglerEl.addEventListener('toggle.bs.toggler', toggleSpy)
+      togglerEl.addEventListener('toggled.bs.toggler', toggledSpy)
+
+      toggler.toggle()
+
+      expect(toggleSpy).toHaveBeenCalled()
+      expect(toggledSpy).toHaveBeenCalled()
+    })
+
+    it('should not trigger toggled event if toggle is prevented', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+      const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+      const toggler = new Toggler(togglerEl)
+
+      const toggledSpy = jasmine.createSpy()
+
+      togglerEl.addEventListener('toggle.bs.toggler', event => {
+        event.preventDefault()
+      })
+      togglerEl.addEventListener('toggled.bs.toggler', toggledSpy)
+
+      toggler.toggle()
+
+      expect(toggledSpy).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('dispose', () => {
+    it('should dispose a toggler', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+      const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+      const toggler = new Toggler(togglerEl)
+
+      expect(Toggler.getInstance(togglerEl)).not.toBeNull()
+
+      toggler.dispose()
+
+      expect(Toggler.getInstance(togglerEl)).toBeNull()
+    })
+  })
+
+  describe('getInstance', () => {
+    it('should return null if there is no instance', () => {
+      expect(Toggler.getInstance(fixtureEl)).toBeNull()
+    })
+
+    it('should return this instance', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+      const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+      const toggler = new Toggler(togglerEl)
+
+      expect(Toggler.getInstance(togglerEl)).toEqual(toggler)
+      expect(Toggler.getInstance(togglerEl)).toBeInstanceOf(Toggler)
+    })
+  })
+
+  describe('getOrCreateInstance', () => {
+    it('should return toggler instance', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+      const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+      const toggler = new Toggler(togglerEl)
+
+      expect(Toggler.getOrCreateInstance(togglerEl)).toEqual(toggler)
+      expect(Toggler.getInstance(togglerEl)).toEqual(Toggler.getOrCreateInstance(togglerEl, {}))
+      expect(Toggler.getOrCreateInstance(togglerEl)).toBeInstanceOf(Toggler)
+    })
+
+    it('should return new instance when there is no toggler instance', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+      const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+
+      expect(Toggler.getInstance(togglerEl)).toBeNull()
+      expect(Toggler.getOrCreateInstance(togglerEl)).toBeInstanceOf(Toggler)
+    })
+  })
+
+  describe('data-api', () => {
+    it('should toggle class on click', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+      const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+
+      togglerEl.click()
+      expect(togglerEl.classList.contains('bg-warning')).toBeTrue()
+
+      togglerEl.click()
+      expect(togglerEl.classList.contains('bg-warning')).toBeFalse()
+    })
+
+    it('should toggle attribute on click', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="true" data-bs-attribute="hidden"></div>'
+
+      const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+
+      togglerEl.click()
+      expect(togglerEl.getAttribute('hidden')).toEqual('true')
+
+      togglerEl.click()
+      expect(togglerEl.hasAttribute('hidden')).toBeFalse()
+    })
+
+    it('should not toggle id attribute on click', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="new-id" data-bs-attribute="id"></div>'
+
+      const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+
+      togglerEl.click()
+      expect(togglerEl.getAttribute('id')).toBeNull()
+    })
+  })
+})

js/tests/unit/util/index.spec.js

@@ -72,18 +72,6 @@ describe('Util', () => {
       expect(Util.isElement({})).toBeFalse()
       expect(Util.isElement(fixtureEl.querySelectorAll('.test'))).toBeFalse()
     })
-
-    it('should detect jQuery element', () => {
-      fixtureEl.innerHTML = '<div></div>'
-
-      const el = fixtureEl.querySelector('div')
-      const fakejQuery = {
-        0: el,
-        jquery: 'foo'
-      }
-
-      expect(Util.isElement(fakejQuery)).toBeTrue()
-    })
   })
 
   describe('getElement', () => {
@@ -103,13 +91,6 @@ describe('Util', () => {
       expect(Util.getElement()).toBeNull()
       expect(Util.getElement(null)).toBeNull()
       expect(Util.getElement(fixtureEl.querySelectorAll('.test'))).toBeNull()
-
-      const fakejQueryObject = {
-        0: el,
-        jquery: 'foo'
-      }
-
-      expect(Util.getElement(fakejQueryObject)).toEqual(el)
     })
   })
 
@@ -425,39 +406,6 @@ describe('Util', () => {
     })
   })
 
-  describe('getjQuery', () => {
-    const fakejQuery = { trigger() {} }
-
-    beforeEach(() => {
-      Object.defineProperty(window, 'jQuery', {
-        value: fakejQuery,
-        writable: true
-      })
-    })
-
-    afterEach(() => {
-      window.jQuery = undefined
-    })
-
-    it('should return jQuery object when present', () => {
-      expect(Util.getjQuery()).toEqual(fakejQuery)
-    })
-
-    it('should not return jQuery object when present if data-bs-no-jquery', () => {
-      document.body.setAttribute('data-bs-no-jquery', '')
-
-      expect(window.jQuery).toEqual(fakejQuery)
-      expect(Util.getjQuery()).toBeNull()
-
-      document.body.removeAttribute('data-bs-no-jquery')
-    })
-
-    it('should not return jQuery if not present', () => {
-      window.jQuery = undefined
-      expect(Util.getjQuery()).toBeNull()
-    })
-  })
-
   describe('onDOMContentLoaded', () => {
     it('should execute callbacks when DOMContentLoaded is fired and should not add more than one listener', () => {
       const spy = jasmine.createSpy()
@@ -486,32 +434,6 @@ describe('Util', () => {
     })
   })
 
-  describe('defineJQueryPlugin', () => {
-    const fakejQuery = { fn: {} }
-
-    beforeEach(() => {
-      Object.defineProperty(window, 'jQuery', {
-        value: fakejQuery,
-        writable: true
-      })
-    })
-
-    afterEach(() => {
-      window.jQuery = undefined
-    })
-
-    it('should define a plugin on the jQuery instance', () => {
-      const pluginMock = Util.noop
-      pluginMock.NAME = 'test'
-      pluginMock.jQueryInterface = Util.noop
-
-      Util.defineJQueryPlugin(pluginMock)
-      expect(fakejQuery.fn.test).toEqual(pluginMock.jQueryInterface)
-      expect(fakejQuery.fn.test.Constructor).toEqual(pluginMock)
-      expect(fakejQuery.fn.test.noConflict).toEqual(jasmine.any(Function))
-    })
-  })
-
   describe('execute', () => {
     it('should execute if arg is function', () => {
       const spy = jasmine.createSpy('spy')

package-lock.json

@@ -70,6 +70,7 @@
         "karma-jasmine-html-reporter": "^2.1.0",
         "karma-rollup-preprocessor": "7.0.7",
         "lockfile-lint": "^4.14.1",
+        "markdownlint-cli": "^0.45.0",
         "mime": "^4.0.7",
         "nodemon": "^3.1.10",
         "npm-run-all2": "^8.0.4",
@@ -82,7 +83,6 @@
         "remark-html": "^16.0.1",
         "rollup": "^4.41.1",
         "rollup-plugin-istanbul": "^5.0.0",
-        "rtlcss": "^4.3.0",
         "sass": "1.78.0",
         "sass-true": "^8.1.0",
         "shelljs": "^0.10.0",
@@ -2365,17 +2365,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.3.tgz",
-      "integrity": "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
@@ -2954,29 +2943,6 @@
         "@img/sharp-libvips-darwin-arm64": "1.0.4"
       }
     },
-    "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
-      "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.0.4"
-      }
-    },
     "node_modules/@img/sharp-libvips-darwin-arm64": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
@@ -2994,323 +2960,6 @@
         "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
-      "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
-      "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
-      "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
-      "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
-      "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
-      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
-      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-linux-arm": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
-      "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.0.5"
-      }
-    },
-    "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
-      "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.0.4"
-      }
-    },
-    "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
-      "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.0.4"
-      }
-    },
-    "node_modules/@img/sharp-linux-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
-      "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.0.4"
-      }
-    },
-    "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
-      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
-      }
-    },
-    "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
-      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
-      }
-    },
-    "node_modules/@img/sharp-wasm32": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
-      "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
-      "cpu": [
-        "wasm32"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/runtime": "^1.2.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
-      "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-win32-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
-      "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -4301,6 +3950,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/katex": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
+      "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==",
+      "dev": true
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -6511,6 +6166,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -10521,6 +10185,15 @@
       "integrity": "sha512-d2vwomK605ks7Q+uCpbwGyoIF5j+UZuJjlYcugISBt3CxM+eBo/W6y63yVPIyIvbYON+pvJYsYZjCYbzqJj/xQ==",
       "dev": true
     },
+    "node_modules/jsonpointer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
+      "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/karma": {
       "version": "6.4.4",
       "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.4.tgz",
@@ -10994,6 +10667,31 @@
         "node": ">=10"
       }
     },
+    "node_modules/katex": {
+      "version": "0.16.22",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.22.tgz",
+      "integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
+      "dev": true,
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -11065,6 +10763,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dev": true,
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/listenercount": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
@@ -11248,6 +10955,35 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -11259,6 +10995,199 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/markdownlint": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.38.0.tgz",
+      "integrity": "sha512-xaSxkaU7wY/0852zGApM8LdlIfGCW8ETZ0Rr62IQtAnUMlMuifsg09vWJcNYeL4f0anvr8Vo4ZQar8jGpV0btQ==",
+      "dev": true,
+      "dependencies": {
+        "micromark": "4.0.2",
+        "micromark-core-commonmark": "2.0.3",
+        "micromark-extension-directive": "4.0.0",
+        "micromark-extension-gfm-autolink-literal": "2.1.0",
+        "micromark-extension-gfm-footnote": "2.1.0",
+        "micromark-extension-gfm-table": "2.1.1",
+        "micromark-extension-math": "3.1.0",
+        "micromark-util-types": "2.0.2"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/DavidAnson"
+      }
+    },
+    "node_modules/markdownlint-cli": {
+      "version": "0.45.0",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli/-/markdownlint-cli-0.45.0.tgz",
+      "integrity": "sha512-GiWr7GfJLVfcopL3t3pLumXCYs8sgWppjIA1F/Cc3zIMgD3tmkpyZ1xkm1Tej8mw53B93JsDjgA3KOftuYcfOw==",
+      "dev": true,
+      "dependencies": {
+        "commander": "~13.1.0",
+        "glob": "~11.0.2",
+        "ignore": "~7.0.4",
+        "js-yaml": "~4.1.0",
+        "jsonc-parser": "~3.3.1",
+        "jsonpointer": "~5.0.1",
+        "markdown-it": "~14.1.0",
+        "markdownlint": "~0.38.0",
+        "minimatch": "~10.0.1",
+        "run-con": "~1.3.2",
+        "smol-toml": "~1.3.4"
+      },
+      "bin": {
+        "markdownlint": "markdownlint.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/markdownlint-cli/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/markdownlint-cli/node_modules/commander": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-13.1.0.tgz",
+      "integrity": "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/markdownlint-cli/node_modules/glob": {
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.2.tgz",
+      "integrity": "sha512-YT7U7Vye+t5fZ/QMkBFrTJ7ZQxInIUjwyAjVj84CYXqgBdv30MFUPGnBR6sQaVq6Is15wYJUsnzTuWaGRBhBAQ==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^4.0.1",
+        "minimatch": "^10.0.0",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^2.0.0"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/markdownlint-cli/node_modules/ignore": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.4.tgz",
+      "integrity": "sha512-gJzzk+PQNznz8ysRrC0aOkBNVRBDtE1n53IqyqEf3PXrYwomFs5q4pGMizBMJF+ykh03insJ27hB8gSrD2Hn8A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/markdownlint-cli/node_modules/jackspeak": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz",
+      "integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==",
+      "dev": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/markdownlint-cli/node_modules/jsonc-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz",
+      "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==",
+      "dev": true
+    },
+    "node_modules/markdownlint-cli/node_modules/lru-cache": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.1.0.tgz",
+      "integrity": "sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==",
+      "dev": true,
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/markdownlint-cli/node_modules/minimatch": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.1.tgz",
+      "integrity": "sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/markdownlint-cli/node_modules/path-scurry": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz",
+      "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/markdownlint/node_modules/micromark": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -12426,6 +12355,12 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "dev": true
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -12531,6 +12466,114 @@
         "micromark-util-types": "^2.0.0"
       }
     },
+    "node_modules/micromark-extension-directive": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-directive/-/micromark-extension-directive-4.0.0.tgz",
+      "integrity": "sha512-/C2nqVmXXmiseSSuCdItCMho7ybwwop6RrrRPk0KbOHW21JKoCldC+8rFOaundDoRBUWBnJJcxeA/Kvi34WQXg==",
+      "dev": true,
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "dev": true
+    },
+    "node_modules/micromark-extension-directive/node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "dev": true,
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/micromark-extension-gfm": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
@@ -12659,6 +12702,25 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/micromark-extension-math": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-3.1.0.tgz",
+      "integrity": "sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==",
+      "dev": true,
+      "dependencies": {
+        "@types/katex": "^0.16.0",
+        "devlop": "^1.0.0",
+        "katex": "^0.16.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-extension-mdx-expression": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.1.tgz",
@@ -14789,6 +14851,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -15863,23 +15934,28 @@
         }
       }
     },
-    "node_modules/rtlcss": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.3.0.tgz",
-      "integrity": "sha512-FI+pHEn7Wc4NqKXMXFM+VAYKEj/mRIcW4h24YVwVtyjI+EqGrLc2Hx/Ny0lrZ21cBWU2goLy36eqMcNj3AQJig==",
+    "node_modules/run-con": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/run-con/-/run-con-1.3.2.tgz",
+      "integrity": "sha512-CcfE+mYiTcKEzg0IqS08+efdnH0oJ3zV0wSUFBNrMHMuxCtXvBCLzCJHatwuXDcu/RlhjTziTo/a1ruQik6/Yg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "escalade": "^3.1.1",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.21",
-        "strip-json-comments": "^3.1.1"
+        "deep-extend": "^0.6.0",
+        "ini": "~4.1.0",
+        "minimist": "^1.2.8",
+        "strip-json-comments": "~3.1.1"
       },
       "bin": {
-        "rtlcss": "bin/rtlcss.js"
-      },
+        "run-con": "cli.js"
+      }
+    },
+    "node_modules/run-con/node_modules/ini": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz",
+      "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==",
+      "dev": true,
       "engines": {
-        "node": ">=12.0.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
     "node_modules/run-parallel": {
@@ -17974,6 +18050,12 @@
         "node": "*"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "dev": true
+    },
     "node_modules/ufo": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",

package.json

@@ -41,19 +41,14 @@
   "scripts": {
     "start": "npm-run-all --parallel watch docs-serve",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
-    "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
-    "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/",
-    "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
+    "css": "npm-run-all css-compile css-prefix css-minify",
+    "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/bootstrap.scss:dist/css/bootstrap.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-dontlint-vars": "fusv scss/ site/assets/scss/",
     "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
-    "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
-    "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
-    "css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*",
-    "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
-    "css-prefix-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-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\"",
+    "css-prefix": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.min.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-*",
@@ -73,7 +68,8 @@
     "js-test-integration-modularity": "rollup --config js/tests/integration/rollup.bundle-modularity.js",
     "js-test-cloud": "cross-env BROWSERSTACK=true npm run js-test-karma",
     "js-test-jquery": "cross-env JQUERY=true npm run js-test-karma",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint lint-mdx",
+    "lint-mdx": "markdownlint \"site/src/content/**/*.mdx\"",
     "docs": "npm-run-all docs-build docs-lint",
     "docs-build": "npm run astro-build",
     "docs-compile": "npm run docs-build",
@@ -95,12 +91,12 @@
     "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-dist": "nodemon --watch dist/css/ --ext css --exec \"npm run css-prefix\"",
     "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\"",
     "watch-js-docs": "nodemon --watch site/src/assets/ --ext js --exec \"npm run js-lint\"",
-    "astro-dev": "astro dev --root site",
+    "astro-dev": "astro dev --root site --port 9001",
     "astro-build": "astro build --root site && rm -rf _site && cp -r site/dist _site",
     "astro-preview": "astro preview --root site"
   },
@@ -159,6 +155,7 @@
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-rollup-preprocessor": "7.0.7",
     "lockfile-lint": "^4.14.1",
+    "markdownlint-cli": "^0.45.0",
     "mime": "^4.0.7",
     "nodemon": "^3.1.10",
     "npm-run-all2": "^8.0.4",
@@ -171,7 +168,6 @@
     "remark-html": "^16.0.1",
     "rollup": "^4.41.1",
     "rollup-plugin-istanbul": "^5.0.0",
-    "rtlcss": "^4.3.0",
     "sass": "1.78.0",
     "sass-true": "^8.1.0",
     "shelljs": "^0.10.0",

scss/_accordion.scss

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

scss/_alert.scss

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

scss/_badge.scss

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

scss/_breadcrumb.scss

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

scss/_button-group.scss

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

scss/_buttons.scss

@@ -1,96 +1,372 @@
+@use "config" as *;
+@use "colors" as *;
+@use "theme" as *;
+@use "variables" as *;
+@use "functions" as *;
+@use "vendor/rfs" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/transition" as *;
+@use "mixins/gradients" as *;
+
+// Full color palette
+// Semantic colors assigned globally, used for components
+// Semantic theme helpers—`.bs-theme-{color}`???
+// `${component}-variants()` maps for alternate component appearances
+//   - not to be confused with theme colors
+
+// Bootstrap 6 uses Sass modules, and is still heavily Sass-based, but is now more than ever CSS-first.
+// This includes leading with CSS variables whenever possible, including using them within Sass maps, loops, mixins, and variables.
+
+// Button variants
 //
-// Base styles
-//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
 
-.btn {
-  // scss-docs-start btn-css-vars
-  --#{$prefix}btn-padding-x: #{$btn-padding-x};
-  --#{$prefix}btn-padding-y: #{$btn-padding-y};
-  --#{$prefix}btn-font-family: #{$btn-font-family};
-  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
-  --#{$prefix}btn-font-weight: #{$btn-font-weight};
-  --#{$prefix}btn-line-height: #{$btn-line-height};
-  --#{$prefix}btn-color: #{$btn-color};
-  --#{$prefix}btn-bg: transparent;
-  --#{$prefix}btn-border-width: #{$btn-border-width};
-  --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-border-radius: #{$btn-border-radius};
-  --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
-  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
-  // scss-docs-end btn-css-vars
+$button-variants: (
+  "solid": (
+    "base": (
+      "bg": "bg",
+      "color": "contrast",
+      "border-color": "bg"
+    ),
+    "hover": (
+      "bg": "bg",
+      "border-color": "bg",
+      "color": "contrast"
+    ),
+    "active": (
+      "bg": "bg",
+      "border-color": "bg",
+      "color": "contrast"
+    )
+  ),
+  "outline": (
+    "base": (
+      "bg": "transparent",
+      "color": "text",
+      "border-color": "border"
+    ),
+    "hover": (
+      "bg": "bg",
+      "color": "contrast",
+      "border-color": "bg"
+    ),
+    "active": (
+      "bg": "bg",
+      "color": "contrast",
+      "border-color": "bg"
+    )
+  ),
+  "subtle": (
+    "base": (
+      "bg": "bg-subtle",
+      "color": "text",
+      "border-color": "transparent"
+    ),
+    "hover": (
+      "bg": ("bg-muted", "bg-subtle"),
+      "color": "text"
+    ),
+    "active": (
+      "bg": "bg-subtle",
+      "color": "text"
+    )
+  ),
+  "text": (
+    "base": (
+      "color": "text",
+      "bg": "transparent",
+      "border-color": "transparent"
+    ),
+    "hover": (
+      "color": "text",
+      "bg": "bg-subtle"
+    ),
+    "active": (
+      "color": "text",
+      "bg": "bg-subtle"
+    )
+  )
+) !default;
 
-  display: inline-block;
-  padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
-  font-family: var(--#{$prefix}btn-font-family);
-  @include font-size(var(--#{$prefix}btn-font-size));
-  font-weight: var(--#{$prefix}btn-font-weight);
-  line-height: var(--#{$prefix}btn-line-height);
-  color: var(--#{$prefix}btn-color);
-  text-align: center;
-  text-decoration: if($link-decoration == none, null, none);
-  white-space: $btn-white-space;
-  vertical-align: middle;
-  cursor: if($enable-button-pointers, pointer, null);
-  user-select: none;
-  border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
-  @include border-radius(var(--#{$prefix}btn-border-radius));
-  @include gradient-bg(var(--#{$prefix}btn-bg));
-  @include box-shadow(var(--#{$prefix}btn-box-shadow));
-  @include transition($btn-transition);
 
-  &:hover {
-    color: var(--#{$prefix}btn-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: var(--#{$prefix}btn-hover-bg);
-    border-color: var(--#{$prefix}btn-hover-border-color);
+// Helper function to get nested map values using dot notation
+@function get-nested-value($map, $keys) {
+  $value: $map;
+  @each $key in $keys {
+    @if type-of($value) == "map" {
+      $value: map-get($value, $key);
+    } @else {
+      @return null;
+    }
   }
+  @return $value;
+}
 
-  .btn-check + &:hover {
-    // override for the checkbox/radio buttons
+// Helper function to split dot notation string into list
+@function split-keys($key) {
+  $keys: ();
+  $parts: str-slice($key, 1);
+  @each $part in $parts {
+    $keys: append($keys, $part);
+  }
+  @return $keys;
+}
+
+// Main button style generator mixin
+@mixin button-variant($color, $variant) {
+  $variant-styles: map-get($button-variants, $variant);
+
+  @if $variant-styles {
+    // Base properties
+    @each $property, $value in map-get($variant-styles, "base") {
+      @if $value == "transparent" {
+        --#{$prefix}btn-#{$property}: transparent;
+        // #{$property}: transparent;
+      } @else {
+        --#{$prefix}btn-#{$property}: var(--#{$prefix}#{$color}-#{$value});
+        // #{$property}: var(#{$prefix}#{$color}-#{$value});
+      }
+    }
+
+    // Hover state
+    &:hover {
+      @each $property, $value in map-get($variant-styles, "hover") {
+        @if $value == "transparent" {
+          --#{$prefix}btn-hover-#{$property}: transparent;
+          // #{$property}: transparent;
+        } @else if type-of($value) == "list" {
+          // Handle two-value properties using color-mix
+          $first-value: nth($value, 1);
+          $second-value: nth($value, 2);
+          --#{$prefix}btn-hover-#{$property}: color-mix(in oklch, var(--#{$prefix}#{$color}-#{$first-value}) 50%, var(--#{$prefix}#{$color}-#{$second-value}));
+        } @else if $value == "bg-subtle" {
+          --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}#{$color}-#{$value});
+          // #{$property}: var(#{$prefix}#{$color}-#{$value});
+          // @if type-of($value) == "list" {
+          //   // Handle two-value properties using color-mix
+          //   $first-value: nth($value, 1);
+          //   $second-value: nth($value, 2);
+          //   --#{$prefix}btn-hover-#{$property}: color-mix(in oklch, var(--#{$prefix}#{$color}-#{$first-value}) 50%, var(--#{$prefix}#{$color}-#{$second-value}));
+          // } @else {
+          //   --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}#{$color}-#{$value});
+          // }
+        } @else {
+          --#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .95) calc(c * 1.1) h);
+          // #{$property}: oklch(
+          //   from var(#{$prefix}#{$color}-#{$value}) calc(l * .98) calc(c * 1.1) h
+          // );
+        }
+      }
+    }
+
+    // Active state
+    &:active,
+    &.active {
+      @each $property, $value in map-get($variant-styles, "active") {
+        @if $value == "transparent" {
+          --#{$prefix}btn-active-#{$property}: transparent;
+          // #{$property}: transparent;
+        } @else if $value == "bg-subtle" {
+          --#{$prefix}btn-active-#{$property}: var(--#{$prefix}#{$color}-#{$value});
+          // #{$property}: var(#{$prefix}#{$color}-#{$value});
+        } @else {
+          --#{$prefix}btn-active-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .9) calc(c * 1.15) h);
+          // #{$property}: oklch(
+          //   from var(#{$prefix}#{$color}-#{$value}) calc(l * .9) calc(c * 1.15) h
+          // );
+        }
+      }
+    }
+  }
+}
+
+// Generate all button variants
+@each $color, $_ in $new-theme-colors {
+  @each $variant, $_ in $button-variants {
+    .btn-#{$color}-#{$variant} {
+      @include button-variant($color, $variant);
+    }
+  }
+}
+
+@layer components {
+  // scss-docs-start btn-variant-mixin
+  // @mixin button-variant(
+  //   $background,
+  //   $border,
+  //   $color: color-contrast($background),
+  //   $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+  //   $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+  //   $hover-color: color-contrast($hover-background),
+  //   $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+  //   $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+  //   $active-color: color-contrast($active-background),
+  //   $disabled-background: $background,
+  //   $disabled-border: $border,
+  //   $disabled-color: color-contrast($disabled-background)
+  // ) {
+  //   --#{$prefix}btn-color: #{$color};
+  //   --#{$prefix}btn-bg: #{$background};
+  //   --#{$prefix}btn-border-color: #{$border};
+  //   --#{$prefix}btn-hover-color: #{$hover-color};
+  //   --#{$prefix}btn-hover-bg: #{$hover-background};
+  //   --#{$prefix}btn-hover-border-color: #{$hover-border};
+  //   --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+  //   --#{$prefix}btn-active-color: #{$active-color};
+  //   --#{$prefix}btn-active-bg: #{$active-background};
+  //   --#{$prefix}btn-active-border-color: #{$active-border};
+  //   --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  //   --#{$prefix}btn-disabled-color: #{$disabled-color};
+  //   --#{$prefix}btn-disabled-bg: #{$disabled-background};
+  //   --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+  // }
+  // scss-docs-end btn-variant-mixin
+
+  // scss-docs-start btn-outline-variant-mixin
+  // @mixin button-outline-variant(
+  //   $color,
+  //   $color-hover: color-contrast($color),
+  //   $active-background: $color,
+  //   $active-border: $color,
+  //   $active-color: color-contrast($active-background)
+  // ) {
+  //   --#{$prefix}btn-color: #{$color};
+  //   --#{$prefix}btn-border-color: #{$color};
+  //   --#{$prefix}btn-hover-color: #{$color-hover};
+  //   --#{$prefix}btn-hover-bg: #{$active-background};
+  //   --#{$prefix}btn-hover-border-color: #{$active-border};
+  //   --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+  //   --#{$prefix}btn-active-color: #{$active-color};
+  //   --#{$prefix}btn-active-bg: #{$active-background};
+  //   --#{$prefix}btn-active-border-color: #{$active-border};
+  //   --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  //   --#{$prefix}btn-disabled-color: #{$color};
+  //   --#{$prefix}btn-disabled-bg: transparent;
+  //   --#{$prefix}btn-disabled-border-color: #{$color};
+  //   --#{$prefix}gradient: none;
+  // }
+  // scss-docs-end btn-outline-variant-mixin
+
+  // scss-docs-start btn-size-mixin
+  @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
+    --#{$prefix}btn-padding-y: #{$padding-y};
+    --#{$prefix}btn-padding-x: #{$padding-x};
+    @include rfs($font-size, --#{$prefix}btn-font-size);
+    --#{$prefix}btn-border-radius: #{$border-radius};
+  }
+  // scss-docs-end btn-size-mixin
+
+
+  //
+  // Base styles
+  //
+
+  .btn {
+    // scss-docs-start btn-css-vars
+    --#{$prefix}btn-padding-x: #{$btn-padding-x};
+    --#{$prefix}btn-padding-y: #{$btn-padding-y};
+    --#{$prefix}btn-font-family: #{$btn-font-family};
+    @include rfs($btn-font-size, --#{$prefix}btn-font-size);
+    --#{$prefix}btn-font-weight: #{$btn-font-weight};
+    --#{$prefix}btn-line-height: #{$btn-line-height};
+    --#{$prefix}btn-color: #{$btn-color};
+    --#{$prefix}btn-gap: #{$btn-gap};
+    --#{$prefix}btn-bg: transparent;
+    --#{$prefix}btn-border-width: #{$btn-border-width};
+    --#{$prefix}btn-border-color: transparent;
+    --#{$prefix}btn-border-radius: #{$btn-border-radius};
+    --#{$prefix}btn-hover-color: var(--#{$prefix}btn-color);
+    --#{$prefix}btn-hover-border-color: transparent;
+    --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+    --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
+    --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
+    // scss-docs-end btn-css-vars
+
+    display: inline-flex;
+    gap: var(--#{$prefix}btn-gap);
+    align-items: center;
+    justify-content: center;
+    padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
+    font-family: var(--#{$prefix}btn-font-family);
+    font-weight: var(--#{$prefix}btn-font-weight);
+    line-height: var(--#{$prefix}btn-line-height);
     color: var(--#{$prefix}btn-color);
-    background-color: var(--#{$prefix}btn-bg);
-    border-color: var(--#{$prefix}btn-border-color);
-  }
+    text-align: center;
+    text-decoration: if($link-decoration == none, null, none);
+    white-space: $btn-white-space;
+    vertical-align: middle;
+    cursor: if($enable-button-pointers, pointer, null);
+    user-select: none;
+    border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
+    @include font-size(var(--#{$prefix}btn-font-size));
+    @include border-radius(var(--#{$prefix}btn-border-radius));
+    @include gradient-bg(var(--#{$prefix}btn-bg));
+    @include box-shadow(var(--#{$prefix}btn-box-shadow));
+    @include transition($btn-transition);
 
-  &:focus-visible {
-    color: var(--#{$prefix}btn-hover-color);
-    @include gradient-bg(var(--#{$prefix}btn-hover-bg));
-    border-color: var(--#{$prefix}btn-hover-border-color);
-    outline: 0;
-    // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows {
-      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
-    } @else {
-      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    &:hover {
+      color: var(--#{$prefix}btn-hover-color);
+      text-decoration: if($link-hover-decoration == underline, none, null);
+      background-color: var(--#{$prefix}btn-hover-bg);
+      border-color: var(--#{$prefix}btn-hover-border-color);
     }
-  }
 
-  .btn-check:focus-visible + & {
-    border-color: var(--#{$prefix}btn-hover-border-color);
-    outline: 0;
-    // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows {
-      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
-    } @else {
-      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    .btn-check + &:hover {
+      // override for the checkbox/radio buttons
+      color: var(--#{$prefix}btn-color);
+      background-color: var(--#{$prefix}btn-bg);
+      border-color: var(--#{$prefix}btn-border-color);
     }
-  }
-
-  .btn-check:checked + &,
-  :not(.btn-check) + &:active,
-  &:first-child:active,
-  &.active,
-  &.show {
-    color: var(--#{$prefix}btn-active-color);
-    background-color: var(--#{$prefix}btn-active-bg);
-    // Remove CSS gradients if they're enabled
-    background-image: if($enable-gradients, none, null);
-    border-color: var(--#{$prefix}btn-active-border-color);
-    @include box-shadow(var(--#{$prefix}btn-active-shadow));
 
     &:focus-visible {
+      color: var(--#{$prefix}btn-hover-color);
+      @include gradient-bg(var(--#{$prefix}btn-hover-bg));
+      border-color: var(--#{$prefix}btn-hover-border-color);
+      outline: 0;
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows {
+        box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+      } @else {
+        box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+      }
+    }
+
+    .btn-check:focus-visible + & {
+      border-color: var(--#{$prefix}btn-hover-border-color);
+      outline: 0;
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows {
+        box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+      } @else {
+        box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+      }
+    }
+
+    .btn-check:checked + &,
+    :not(.btn-check) + &:active,
+    &:first-child:active,
+    &.active,
+    &.show {
+      color: var(--#{$prefix}btn-active-color);
+      background-color: var(--#{$prefix}btn-active-bg);
+      // Remove CSS gradients if they"re enabled
+      background-image: if($enable-gradients, none, null);
+      border-color: var(--#{$prefix}btn-active-border-color);
+      @include box-shadow(var(--#{$prefix}btn-active-shadow));
+
+      &:focus-visible {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        @if $enable-shadows {
+          box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+        } @else {
+          box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+        }
+      }
+    }
+
+    .btn-check:checked:focus-visible + & {
       // Avoid using mixin so we can pass custom focus shadow properly
       @if $enable-shadows {
         box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
@@ -98,119 +374,111 @@
         box-shadow: var(--#{$prefix}btn-focus-box-shadow);
       }
     }
-  }
 
-  .btn-check:checked:focus-visible + & {
-    // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows {
-      box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
-    } @else {
-      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    &:disabled,
+    &.disabled,
+    fieldset:disabled & {
+      color: var(--#{$prefix}btn-disabled-color);
+      pointer-events: none;
+      background-color: var(--#{$prefix}btn-disabled-bg);
+      background-image: if($enable-gradients, none, null);
+      border-color: var(--#{$prefix}btn-disabled-border-color);
+      opacity: var(--#{$prefix}btn-disabled-opacity);
+      @include box-shadow(none);
     }
   }
 
-  &:disabled,
-  &.disabled,
-  fieldset:disabled & {
-    color: var(--#{$prefix}btn-disabled-color);
-    pointer-events: none;
-    background-color: var(--#{$prefix}btn-disabled-bg);
-    background-image: if($enable-gradients, none, null);
-    border-color: var(--#{$prefix}btn-disabled-border-color);
-    opacity: var(--#{$prefix}btn-disabled-opacity);
-    @include box-shadow(none);
-  }
-}
+
+  //
+  // Alternate buttons
+  //
+
+  // scss-docs-start btn-variant-loops
+  // @each $color, $value in $theme-colors {
+  //   .btn-#{$color} {
+  //     @if $color == "light" {
+  //       @include button-variant(
+  //         $value,
+  //         $value,
+  //         $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+  //         $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+  //         $active-background: shade-color($value, $btn-active-bg-shade-amount),
+  //         $active-border: shade-color($value, $btn-active-border-shade-amount)
+  //       );
+  //     } @else if $color == "dark" {
+  //       @include button-variant(
+  //         $value,
+  //         $value,
+  //         $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+  //         $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+  //         $active-background: tint-color($value, $btn-active-bg-tint-amount),
+  //         $active-border: tint-color($value, $btn-active-border-tint-amount)
+  //       );
+  //     } @else {
+  //       @include button-variant($value, $value);
+  //     }
+  //   }
+  // }
+
+  // @each $color, $value in $theme-colors {
+  //   .btn-outline-#{$color} {
+  //     @include button-outline-variant($value);
+  //   }
+  // }
+  // scss-docs-end btn-variant-loops
 
 
-//
-// Alternate buttons
-//
+  //
+  // Link 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);
+  // Make a button look and behave like a link
+  .btn-link {
+    --#{$prefix}btn-font-weight: #{$font-weight-normal};
+    --#{$prefix}btn-color: #{$btn-link-color};
+    --#{$prefix}btn-bg: transparent;
+    --#{$prefix}btn-border-color: transparent;
+    --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
+    --#{$prefix}btn-hover-border-color: transparent;
+    --#{$prefix}btn-active-color: #{$btn-link-hover-color};
+    --#{$prefix}btn-active-border-color: transparent;
+    --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
+    --#{$prefix}btn-disabled-border-color: transparent;
+    --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can"t use `none` as keyword negates all values when used with multiple shadows
+    // mdo-do
+    // --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
+
+    text-decoration: $link-decoration;
+    @if $enable-gradients {
+      background-image: none;
     }
+
+    &:hover,
+    &:focus-visible {
+      text-decoration: $link-hover-decoration;
+    }
+
+    &:focus-visible {
+      color: var(--#{$prefix}btn-color);
+    }
+
+    &:hover {
+      color: var(--#{$prefix}btn-hover-color);
+    }
+
+    // No need for an active state here
+  }
+
+
+  //
+  // Button Sizes
+  //
+
+  .btn-lg {
+    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
+  }
+
+  .btn-sm {
+    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
   }
 }
-
-@each $color, $value in $theme-colors {
-  .btn-outline-#{$color} {
-    @include button-outline-variant($value);
-  }
-}
-// scss-docs-end btn-variant-loops
-
-
-//
-// Link buttons
-//
-
-// Make a button look and behave like a link
-.btn-link {
-  --#{$prefix}btn-font-weight: #{$font-weight-normal};
-  --#{$prefix}btn-color: #{$btn-link-color};
-  --#{$prefix}btn-bg: transparent;
-  --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
-  --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-active-color: #{$btn-link-hover-color};
-  --#{$prefix}btn-active-border-color: transparent;
-  --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
-  --#{$prefix}btn-disabled-border-color: transparent;
-  --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
-  --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
-
-  text-decoration: $link-decoration;
-  @if $enable-gradients {
-    background-image: none;
-  }
-
-  &:hover,
-  &:focus-visible {
-    text-decoration: $link-hover-decoration;
-  }
-
-  &:focus-visible {
-    color: var(--#{$prefix}btn-color);
-  }
-
-  &:hover {
-    color: var(--#{$prefix}btn-hover-color);
-  }
-
-  // No need for an active state here
-}
-
-
-//
-// Button Sizes
-//
-
-.btn-lg {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
-}
-
-.btn-sm {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
-}

scss/_card.scss

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

scss/_carousel.scss

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

scss/_close.scss

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

scss/_colors.scss

@@ -0,0 +1,291 @@
+// scss-docs-start color-variables
+$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;
+
+$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;
+
+$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;
+
+$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;
+
+$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;
+$gray-900: #1c1c1e !default;
+
+$white: #fff !default;
+$black: #000 !default;
+// scss-docs-end color-variables
+
+// scss-docs-start color-maps
+$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,
+  "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,
+  "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;
+// scss-docs-end color-maps
+
+// scss-docs-start all-colors-maps
+$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,
+  "black": $black,
+  "white": $white
+) !default;
+// scss-docs-end all-colors-maps

scss/_config.scss

@@ -0,0 +1,80 @@
+// Configuration
+//
+// Variables and settings not related to theme, components, and more go here. It does include layout.
+
+$prefix: bs- !default;
+
+$enable-caret:                true !default;
+$enable-rounded:              true !default;
+$enable-shadows:              false !default;
+$enable-gradients:            false !default;
+$enable-transitions:          true !default;
+$enable-reduced-motion:       true !default;
+$enable-smooth-scroll:        true !default;
+$enable-container-classes:    true !default;
+$enable-button-pointers:      true !default;
+$enable-rfs:                  true !default;
+$enable-validation-icons:     true !default;
+$enable-negative-margins:     false !default;
+$enable-deprecation-messages: true !default;
+$enable-important-utilities:  true !default;
+
+$enable-dark-mode:            true !default;
+$color-mode-type:             data !default; // `data` or `media-query`
+
+// more to come here…
+
+$color-mode-type:          "media-query" !default;
+$color-contrast-dark:      #000 !default;
+$color-contrast-light:     #fff !default;
+$min-contrast-ratio:         4.5 !default;
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+// scss-docs-start breakpoints
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  2xl: 1600px
+) !default;
+// scss-docs-end breakpoints
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.25rem !default;
+$grid-row-columns: 6 !default;
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+// scss-docs-start container-max-widths
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  2xl: 1440px
+) !default;
+// scss-docs-end container-max-widths
+
+$container-padding-x: $grid-gutter-width !default;
+
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<", "%3c"),
+  (">", "%3e"),
+  ("#", "%23"),
+  ("(", "%28"),
+  (")", "%29"),
+) !default;

scss/_containers.scss

@@ -1,41 +0,0 @@
-// Container widths
-//
-// Set the container width, and override it for fixed navbars in media queries.
-
-@if $enable-container-classes {
-  // Single container class with breakpoint max-widths
-  .container,
-  // 100% wide container at all breakpoints
-  .container-fluid {
-    @include make-container();
-  }
-
-  // Responsive containers that are 100% wide until a breakpoint
-  @each $breakpoint, $container-max-width in $container-max-widths {
-    .container-#{$breakpoint} {
-      @extend .container-fluid;
-    }
-
-    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
-      %responsive-container-#{$breakpoint} {
-        max-width: $container-max-width;
-      }
-
-      // Extend each breakpoint which is smaller or equal to the current breakpoint
-      $extend-breakpoint: true;
-
-      @each $name, $width in $grid-breakpoints {
-        @if ($extend-breakpoint) {
-          .container#{breakpoint-infix($name, $grid-breakpoints)} {
-            @extend %responsive-container-#{$breakpoint};
-          }
-
-          // Once the current breakpoint is reached, stop extending
-          @if ($breakpoint == $name) {
-            $extend-breakpoint: false;
-          }
-        }
-      }
-    }
-  }
-}

scss/_dropdown.scss

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

scss/_forms.scss

@@ -1,9 +0,0 @@
-@import "forms/labels";
-@import "forms/form-text";
-@import "forms/form-control";
-@import "forms/form-select";
-@import "forms/form-check";
-@import "forms/form-range";
-@import "forms/floating-labels";
-@import "forms/input-group";
-@import "forms/validation";

scss/_functions.scss

@@ -1,3 +1,6 @@
+@use "sass:math";
+@use "config" as *;
+
 // Bootstrap functions
 //
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
@@ -22,7 +25,7 @@
 
 // Starts at zero
 // Used to ensure the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+@mixin _assert-starts-at-zero($map, $map-name: "$breakpoints") {
   @if length($map) > 0 {
     $values: map-values($map);
     $first-value: nth($values, 1);
@@ -143,160 +146,77 @@
   @return $string;
 }
 
-// Color contrast
-// See https://github.com/twbs/bootstrap/pull/30168
+// // Color contrast
+// // See https://github.com/twbs/bootstrap/pull/30168
 
-// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
-// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
-$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
+// // A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
+// // stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
+// $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
 
-@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
-  $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
-  $max-ratio: 0;
-  $max-ratio-color: null;
+// @function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
+//   $foregrounds: $color-contrast-light, $color-contrast-dark, #fff, #000;
+//   $max-ratio: 0;
+//   $max-ratio-color: null;
 
-  @each $color in $foregrounds {
-    $contrast-ratio: contrast-ratio($background, $color);
-    @if $contrast-ratio > $min-contrast-ratio {
-      @return $color;
-    } @else if $contrast-ratio > $max-ratio {
-      $max-ratio: $contrast-ratio;
-      $max-ratio-color: $color;
-    }
-  }
+//   @each $color in $foregrounds {
+//     $contrast-ratio: contrast-ratio($background, $color);
+//     @if $contrast-ratio > $min-contrast-ratio {
+//       @return $color;
+//     } @else if $contrast-ratio > $max-ratio {
+//       $max-ratio: $contrast-ratio;
+//       $max-ratio-color: $color;
+//     }
+//   }
 
-  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+//   @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
 
-  @return $max-ratio-color;
-}
+//   @return $max-ratio-color;
+// }
 
-@function contrast-ratio($background, $foreground: $color-contrast-light) {
-  $l1: luminance($background);
-  $l2: luminance(opaque($background, $foreground));
+// @function contrast-ratio($background, $foreground: $color-contrast-light) {
+//   $l1: luminance($background);
+//   $l2: luminance(opaque($background, $foreground));
 
-  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
-}
+//   @return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
+// }
 
 // Return WCAG2.2 relative luminance
 // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
-@function luminance($color) {
-  $rgb: (
-    "r": red($color),
-    "g": green($color),
-    "b": blue($color)
-  );
+// @function luminance($color) {
+//   $rgb: (
+//     "r": red($color),
+//     "g": green($color),
+//     "b": blue($color)
+//   );
 
-  @each $name, $value in $rgb {
-    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
-    $rgb: map-merge($rgb, ($name: $value));
-  }
+//   @each $name, $value in $rgb {
+//     $value: if(math.div($value, 255) < .04045, math.div(math.div($value, 255), 12.92), nth($_luminance-list, $value + 1));
+//     $rgb: map-merge($rgb, ($name: $value));
+//   }
 
-  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
-}
+//   @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+// }
 
 // Return opaque color
 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
-@function opaque($background, $foreground) {
-  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
-}
+// @function opaque($background, $foreground) {
+//   @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+// }
 
 // scss-docs-start color-functions
-// Tint a color: mix a color with white
-@function tint-color($color, $weight) {
-  @return mix(white, $color, $weight);
-}
+// // Tint a color: mix a color with white
+// @function tint-color($color, $weight) {
+//   @return mix(white, $color, $weight);
+// }
 
-// Shade a color: mix a color with black
-@function shade-color($color, $weight) {
-  @return mix(black, $color, $weight);
-}
+// // Shade a color: mix a color with black
+// @function shade-color($color, $weight) {
+//   @return mix(black, $color, $weight);
+// }
 
-// Shade the color if the weight is positive, else tint it
-@function shift-color($color, $weight) {
-  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
-}
+// // Shade the color if the weight is positive, else tint it
+// @function shift-color($color, $weight) {
+//   @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+// }
 // scss-docs-end color-functions
-
-// Return valid calc
-@function add($value1, $value2, $return-calc: true) {
-  @if $value1 == null {
-    @return $value2;
-  }
-
-  @if $value2 == null {
-    @return $value1;
-  }
-
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
-    @return $value1 + $value2;
-  }
-
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
-}
-
-@function subtract($value1, $value2, $return-calc: true) {
-  @if $value1 == null and $value2 == null {
-    @return null;
-  }
-
-  @if $value1 == null {
-    @return -$value2;
-  }
-
-  @if $value2 == null {
-    @return $value1;
-  }
-
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
-    @return $value1 - $value2;
-  }
-
-  @if type-of($value2) != number {
-    $value2: unquote("(") + $value2 + unquote(")");
-  }
-
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
-}
-
-@function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
-  @if $dividend == 0 {
-    @return 0;
-  }
-  @if $divisor == 0 {
-    @error "Cannot divide by 0";
-  }
-  $remainder: $dividend;
-  $result: 0;
-  $factor: 10;
-  @while ($remainder > 0 and $precision >= 0) {
-    $quotient: 0;
-    @while ($remainder >= $divisor) {
-      $remainder: $remainder - $divisor;
-      $quotient: $quotient + 1;
-    }
-    $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
-    $remainder: $remainder * 10;
-    $precision: $precision - 1;
-    @if ($precision < 0 and $remainder >= $divisor * 5) {
-      $result: $result + 1;
-    }
-  }
-  $result: $result * $factor * $sign;
-  $dividend-unit: unit($dividend);
-  $divisor-unit: unit($divisor);
-  $unit-map: (
-    "px": 1px,
-    "rem": 1rem,
-    "em": 1em,
-    "%": 1%
-  );
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
-    $result: $result * map-get($unit-map, $dividend-unit);
-  }
-  @return $result;
-}

scss/_grid.scss

@@ -1,39 +0,0 @@
-// Row
-//
-// Rows contain your columns.
-
-:root {
-  @each $name, $value in $grid-breakpoints {
-    --#{$prefix}breakpoint-#{$name}: #{$value};
-  }
-}
-
-@if $enable-grid-classes {
-  .row {
-    @include make-row();
-
-    > * {
-      @include make-col-ready();
-    }
-  }
-}
-
-@if $enable-cssgrid {
-  .grid {
-    display: grid;
-    grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
-    grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
-    gap: var(--#{$prefix}gap, #{$grid-gutter-width});
-
-    @include make-cssgrid();
-  }
-}
-
-
-// Columns
-//
-// Common styles for small and large grid columns
-
-@if $enable-grid-classes {
-  @include make-grid-columns();
-}

scss/_helpers.scss

@@ -1,12 +0,0 @@
-@import "helpers/clearfix";
-@import "helpers/color-bg";
-@import "helpers/colored-links";
-@import "helpers/focus-ring";
-@import "helpers/icon-link";
-@import "helpers/ratio";
-@import "helpers/position";
-@import "helpers/stacks";
-@import "helpers/visually-hidden";
-@import "helpers/stretched-link";
-@import "helpers/text-truncation";
-@import "helpers/vr";

scss/_images.scss

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

scss/_list-group.scss

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

scss/_maps.scss

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

@@ -1,42 +0,0 @@
-// Toggles
-//
-// Used in conjunction with global variables to enable certain theme features.
-
-// Vendor
-@import "vendor/rfs";
-
-// Deprecate
-@import "mixins/deprecate";
-
-// Helpers
-@import "mixins/breakpoints";
-@import "mixins/color-mode";
-@import "mixins/color-scheme";
-@import "mixins/image";
-@import "mixins/resize";
-@import "mixins/visually-hidden";
-@import "mixins/reset-text";
-@import "mixins/text-truncate";
-
-// Utilities
-@import "mixins/utilities";
-
-// Components
-@import "mixins/backdrop";
-@import "mixins/buttons";
-@import "mixins/caret";
-@import "mixins/pagination";
-@import "mixins/lists";
-@import "mixins/forms";
-@import "mixins/table-variants";
-
-// Skins
-@import "mixins/border-radius";
-@import "mixins/box-shadow";
-@import "mixins/gradients";
-@import "mixins/transition";
-
-// Layout
-@import "mixins/clearfix";
-@import "mixins/container";
-@import "mixins/grid";

scss/_modal.scss

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

scss/_nav.scss

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

scss/_navbar.scss

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

scss/_offcanvas.scss

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

scss/_pagination.scss

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

scss/_placeholders.scss

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

scss/_popover.scss

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

scss/_progress.scss

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

scss/_reboot.scss

@@ -1,611 +0,0 @@
-// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
-
-
-// Reboot
-//
-// Normalization of HTML elements, manually forked from Normalize.css to remove
-// styles targeting irrelevant browsers while applying new styles.
-//
-// Normalize is licensed MIT. https://github.com/necolas/normalize.css
-
-
-// Document
-//
-// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-
-// Root
-//
-// Ability to the value of the root font sizes, affecting the value of `rem`.
-// null by default, thus nothing is generated.
-
-:root {
-  @if $font-size-root != null {
-    @include font-size(var(--#{$prefix}root-font-size));
-  }
-
-  @if $enable-smooth-scroll {
-    @media (prefers-reduced-motion: no-preference) {
-      scroll-behavior: smooth;
-    }
-  }
-}
-
-
-// Body
-//
-// 1. Remove the margin in all browsers.
-// 2. As a best practice, apply a default `background-color`.
-// 3. Prevent adjustments of font size after orientation changes in iOS.
-// 4. Change the default tap highlight to be completely transparent in iOS.
-
-// scss-docs-start reboot-body-rules
-body {
-  margin: 0; // 1
-  font-family: var(--#{$prefix}body-font-family);
-  @include font-size(var(--#{$prefix}body-font-size));
-  font-weight: var(--#{$prefix}body-font-weight);
-  line-height: var(--#{$prefix}body-line-height);
-  color: var(--#{$prefix}body-color);
-  text-align: var(--#{$prefix}body-text-align);
-  background-color: var(--#{$prefix}body-bg); // 2
-  -webkit-text-size-adjust: 100%; // 3
-  -webkit-tap-highlight-color: rgba($black, 0); // 4
-}
-// scss-docs-end reboot-body-rules
-
-
-// Content grouping
-//
-// 1. Reset Firefox's gray color
-
-hr {
-  margin: $hr-margin-y 0;
-  color: $hr-color; // 1
-  border: 0;
-  border-top: $hr-border-width solid $hr-border-color;
-  opacity: $hr-opacity;
-}
-
-
-// Typography
-//
-// 1. Remove top margins from headings
-//    By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
-//    margin for easier control within type scales as it avoids margin collapsing.
-
-%heading {
-  margin-top: 0; // 1
-  margin-bottom: $headings-margin-bottom;
-  font-family: $headings-font-family;
-  font-style: $headings-font-style;
-  font-weight: $headings-font-weight;
-  line-height: $headings-line-height;
-  color: var(--#{$prefix}heading-color);
-}
-
-h1 {
-  @extend %heading;
-  @include font-size($h1-font-size);
-}
-
-h2 {
-  @extend %heading;
-  @include font-size($h2-font-size);
-}
-
-h3 {
-  @extend %heading;
-  @include font-size($h3-font-size);
-}
-
-h4 {
-  @extend %heading;
-  @include font-size($h4-font-size);
-}
-
-h5 {
-  @extend %heading;
-  @include font-size($h5-font-size);
-}
-
-h6 {
-  @extend %heading;
-  @include font-size($h6-font-size);
-}
-
-
-// Reset margins on paragraphs
-//
-// Similarly, the top margin on `<p>`s get reset. However, we also reset the
-// bottom margin to use `rem` units instead of `em`.
-
-p {
-  margin-top: 0;
-  margin-bottom: $paragraph-margin-bottom;
-}
-
-
-// Abbreviations
-//
-// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
-// 2. Add explicit cursor to indicate changed behavior.
-// 3. Prevent the text-decoration to be skipped.
-
-abbr[title] {
-  text-decoration: underline dotted; // 1
-  cursor: help; // 2
-  text-decoration-skip-ink: none; // 3
-}
-
-
-// Address
-
-address {
-  margin-bottom: 1rem;
-  font-style: normal;
-  line-height: inherit;
-}
-
-
-// Lists
-
-ol,
-ul {
-  padding-left: 2rem;
-}
-
-ol,
-ul,
-dl {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-  margin-bottom: 0;
-}
-
-dt {
-  font-weight: $dt-font-weight;
-}
-
-// 1. Undo browser default
-
-dd {
-  margin-bottom: .5rem;
-  margin-left: 0; // 1
-}
-
-
-// Blockquote
-
-blockquote {
-  margin: 0 0 1rem;
-}
-
-
-// Strong
-//
-// Add the correct font weight in Chrome, Edge, and Safari
-
-b,
-strong {
-  font-weight: $font-weight-bolder;
-}
-
-
-// Small
-//
-// Add the correct font size in all browsers
-
-small {
-  @include font-size($small-font-size);
-}
-
-
-// Mark
-
-mark {
-  padding: $mark-padding;
-  color: var(--#{$prefix}highlight-color);
-  background-color: var(--#{$prefix}highlight-bg);
-}
-
-
-// Sub and Sup
-//
-// Prevent `sub` and `sup` elements from affecting the line height in
-// all browsers.
-
-sub,
-sup {
-  position: relative;
-  @include font-size($sub-sup-font-size);
-  line-height: 0;
-  vertical-align: baseline;
-}
-
-sub { bottom: -.25em; }
-sup { top: -.5em; }
-
-
-// Links
-
-a {
-  color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
-  text-decoration: $link-decoration;
-
-  &:hover {
-    --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
-    text-decoration: $link-hover-decoration;
-  }
-}
-
-// And undo these styles for placeholder links/named anchors (without href).
-// It would be more straightforward to just use a[href] in previous block, but that
-// causes specificity issues in many other styles that are too complex to fix.
-// See https://github.com/twbs/bootstrap/issues/19402
-
-a:not([href]):not([class]) {
-  &,
-  &:hover {
-    color: inherit;
-    text-decoration: none;
-  }
-}
-
-
-// Code
-
-pre,
-code,
-kbd,
-samp {
-  font-family: $font-family-code;
-  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
-}
-
-// 1. Remove browser default top margin
-// 2. Reset browser default of `1em` to use `rem`s
-// 3. Don't allow content to break outside
-
-pre {
-  display: block;
-  margin-top: 0; // 1
-  margin-bottom: 1rem; // 2
-  overflow: auto; // 3
-  @include font-size($code-font-size);
-  color: $pre-color;
-
-  // Account for some code outputs that place code tags in pre tags
-  code {
-    @include font-size(inherit);
-    color: inherit;
-    word-break: normal;
-  }
-}
-
-code {
-  @include font-size($code-font-size);
-  color: var(--#{$prefix}code-color);
-  word-wrap: break-word;
-
-  // Streamline the style when inside anchors to avoid broken underline and more
-  a > & {
-    color: inherit;
-  }
-}
-
-kbd {
-  padding: $kbd-padding-y $kbd-padding-x;
-  @include font-size($kbd-font-size);
-  color: $kbd-color;
-  background-color: $kbd-bg;
-  @include border-radius($border-radius-sm);
-
-  kbd {
-    padding: 0;
-    @include font-size(1em);
-    font-weight: $nested-kbd-font-weight;
-  }
-}
-
-
-// Figures
-//
-// Apply a consistent margin strategy (matches our type styles).
-
-figure {
-  margin: 0 0 1rem;
-}
-
-
-// Images and content
-
-img,
-svg {
-  vertical-align: middle;
-}
-
-
-// Tables
-//
-// Prevent double borders
-
-table {
-  caption-side: bottom;
-  border-collapse: collapse;
-}
-
-caption {
-  padding-top: $table-cell-padding-y;
-  padding-bottom: $table-cell-padding-y;
-  color: $table-caption-color;
-  text-align: left;
-}
-
-// 1. Removes font-weight bold by inheriting
-// 2. Matches default `<td>` alignment by inheriting `text-align`.
-// 3. Fix alignment for Safari
-
-th {
-  font-weight: $table-th-font-weight; // 1
-  text-align: inherit; // 2
-  text-align: -webkit-match-parent; // 3
-}
-
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
-  border-color: inherit;
-  border-style: solid;
-  border-width: 0;
-}
-
-
-// Forms
-//
-// 1. Allow labels to use `margin` for spacing.
-
-label {
-  display: inline-block; // 1
-}
-
-// Remove the default `border-radius` that macOS Chrome adds.
-// See https://github.com/twbs/bootstrap/issues/24093
-
-button {
-  // stylelint-disable-next-line property-disallowed-list
-  border-radius: 0;
-}
-
-// Explicitly remove focus outline in Chromium when it shouldn't be
-// visible (e.g. as result of mouse click or touch tap). It already
-// should be doing this automatically, but seems to currently be
-// confused and applies its very visible two-tone outline anyway.
-
-button:focus:not(:focus-visible) {
-  outline: 0;
-}
-
-// 1. Remove the margin in Firefox and Safari
-
-input,
-button,
-select,
-optgroup,
-textarea {
-  margin: 0; // 1
-  font-family: inherit;
-  @include font-size(inherit);
-  line-height: inherit;
-}
-
-// Remove the inheritance of text transform in Firefox
-button,
-select {
-  text-transform: none;
-}
-// Set the cursor for non-`<button>` buttons
-//
-// Details at https://github.com/twbs/bootstrap/pull/30562
-[role="button"] {
-  cursor: pointer;
-}
-
-select {
-  // Remove the inheritance of word-wrap in Safari.
-  // See https://github.com/twbs/bootstrap/issues/24990
-  word-wrap: normal;
-
-  // Undo the opacity change from Chrome
-  &:disabled {
-    opacity: 1;
-  }
-}
-
-// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
-// See https://stackoverflow.com/a/54997118
-
-[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
-  display: none !important;
-}
-
-// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
-//    controls in Android 4.
-// 2. Correct the inability to style clickable types in iOS and Safari.
-// 3. Opinionated: add "hand" cursor to non-disabled button elements.
-
-button,
-[type="button"], // 1
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; // 2
-
-  @if $enable-button-pointers {
-    &:not(:disabled) {
-      cursor: pointer; // 3
-    }
-  }
-}
-
-// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
-
-::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
-
-textarea {
-  resize: vertical; // 1
-}
-
-// 1. Browsers set a default `min-width: min-content;` on fieldsets,
-//    unlike e.g. `<div>`s, which have `min-width: 0;` by default.
-//    So we reset that to ensure fieldsets behave more like a standard block element.
-//    See https://github.com/twbs/bootstrap/issues/12359
-//    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
-// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
-
-fieldset {
-  min-width: 0; // 1
-  padding: 0; // 2
-  margin: 0; // 2
-  border: 0; // 2
-}
-
-// 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: left; // 1
-  width: 100%;
-  padding: 0;
-  margin-bottom: $legend-margin-bottom;
-  font-weight: $legend-font-weight;
-  line-height: inherit;
-  @include font-size($legend-font-size);
-
-  + * {
-    clear: left; // 2
-  }
-}
-
-// Fix height of inputs with a type of datetime-local, date, month, week, or time
-// See https://github.com/twbs/bootstrap/issues/18842
-
-::-webkit-datetime-edit-fields-wrapper,
-::-webkit-datetime-edit-text,
-::-webkit-datetime-edit-minute,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-year-field {
-  padding: 0;
-}
-
-::-webkit-inner-spin-button {
-  height: auto;
-}
-
-// 1. This overrides the extra rounded corners on search inputs in iOS so that our
-//    `.form-control` class can properly style them. Note that this cannot simply
-//    be added to `.form-control` as it's not specific enough. For details, see
-//    https://github.com/twbs/bootstrap/issues/11586.
-// 2. Correct the outline style in Safari.
-
-[type="search"] {
-  -webkit-appearance: textfield; // 1
-  outline-offset: -2px; // 2
-}
-
-// 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.
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-// Remove padding around color pickers in webkit browsers
-
-::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-
-
-// 1. Inherit font family and line height for file input buttons
-// 2. Correct the inability to style clickable types in iOS and Safari.
-
-::file-selector-button {
-  font: inherit; // 1
-  -webkit-appearance: button; // 2
-}
-
-// Correct element displays
-
-output {
-  display: inline-block;
-}
-
-// Remove border from iframe
-
-iframe {
-  border: 0;
-}
-
-// Summary
-//
-// 1. Add the correct display in all browsers
-
-summary {
-  display: list-item; // 1
-  cursor: pointer;
-}
-
-
-// Progress
-//
-// Add the correct vertical alignment in Chrome, Firefox, and Opera.
-
-progress {
-  vertical-align: baseline;
-}
-
-
-// Hidden attribute
-//
-// Always hide an element with the `hidden` HTML attribute.
-
-[hidden] {
-  display: none !important;
-}

scss/_root.scss

@@ -1,42 +1,43 @@
-:root,
-[data-bs-theme="light"] {
+@use "config" as *;
+@use "colors" as *;
+@use "theme" as *;
+@use "variables" as *;
+// @use "maps" as *;
+@use "vendor/rfs" as *;
+@use "mixins/color-mode" as *;
+
+// mdo-do: do we need theme?
+@layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities;
+
+@layer colors {
+  :root {
+    color-scheme: light dark;
+
+    @each $color-group-name, $color-group in $all-colors {
+      @if 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};
+      }
+    }
+  }
+}
+
+:root {
   // 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)};
-
   // Fonts
 
   // Note: Use `inspect` for lists so that quoted items keep the quotes.
@@ -58,67 +59,68 @@
     --#{$prefix}body-text-align: #{$body-text-align};
   }
 
+  @each $key, $value in $theme-bgs {
+    $key: if($key == null, "", "-" + $key);
+    --#{$prefix}bg#{$key}: #{$value};
+  }
+
+  @each $key, $value in $theme-fgs {
+    $key: if($key == null, "", "-" + $key);
+    --#{$prefix}fg#{$key}: #{$value};
+  }
+
+  @each $key, $value in $theme-borders {
+    $key: if($key == null, "", "-" + $key);
+    --#{$prefix}border#{$key}: #{$value};
+  }
+
   --#{$prefix}body-color: #{$body-color};
-  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
   --#{$prefix}body-bg: #{$body-bg};
-  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
-
-  --#{$prefix}emphasis-color: #{$body-emphasis-color};
-  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
-
-  --#{$prefix}secondary-color: #{$body-secondary-color};
-  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
-  --#{$prefix}secondary-bg: #{$body-secondary-bg};
-  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
-
-  --#{$prefix}tertiary-color: #{$body-tertiary-color};
-  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
-  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
-  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
   // scss-docs-end root-body-variables
 
   --#{$prefix}heading-color: #{$headings-color};
 
-  --#{$prefix}link-color: #{$link-color};
-  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+  --#{$prefix}link-color: light-dark(var(--#{$prefix}primary-base), var(--#{$prefix}primary-text));
   --#{$prefix}link-decoration: #{$link-decoration};
-
-  --#{$prefix}link-hover-color: #{$link-hover-color};
-  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+  --#{$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}code-color: var(--#{$prefix}fg-0);
   --#{$prefix}highlight-color: #{$mark-color};
   --#{$prefix}highlight-bg: #{$mark-bg};
 
-  // scss-docs-start root-border-var
-  --#{$prefix}border-width: #{$border-width};
-  --#{$prefix}border-style: #{$border-style};
-  --#{$prefix}border-color: #{$border-color};
-  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+  // --#{$prefix}font-size-base: 1rem;
 
-  --#{$prefix}border-radius: #{$border-radius};
-  --#{$prefix}border-radius-sm: #{$border-radius-sm};
-  --#{$prefix}border-radius-lg: #{$border-radius-lg};
-  --#{$prefix}border-radius-xl: #{$border-radius-xl};
-  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
-  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
-  --#{$prefix}border-radius-pill: #{$border-radius-pill};
+  // scss-docs-start root-border-var
+  --#{$prefix}border-width: 1px;
+  --#{$prefix}border-style: solid;
+  --#{$prefix}border-color: light-dark(#{$gray-300}, #{$gray-700});
+  --#{$prefix}border-color-translucent: light-dark(rgba($black, .175), rgba($white, .15));
+
+  --#{$prefix}border-radius: .5rem;
+  --#{$prefix}border-radius-sm: .375rem;
+  --#{$prefix}border-radius-lg: .625rem;
+  --#{$prefix}border-radius-xl: 1rem;
+  --#{$prefix}border-radius-2xl: 2rem;
+  --#{$prefix}border-radius-pill: 50rem;
   // scss-docs-end root-border-var
 
-  --#{$prefix}box-shadow: #{$box-shadow};
-  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
-  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
-  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
+  // scss-docs-start root-shadow-vars
+  --#{$prefix}box-shadow: 0 .5rem 1rem rgb(0 0 0 / .15);
+  --#{$prefix}box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / .075);
+  --#{$prefix}box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / .175);
+  --#{$prefix}box-shadow-inset: inset 0 1px 2px rgb(0 0 0 / .075);
+  // scss-docs-end root-shadow-vars
 
   // Focus styles
   // scss-docs-start root-focus-variables
-  --#{$prefix}focus-ring-width: #{$focus-ring-width};
-  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
-  --#{$prefix}focus-ring-color: #{$focus-ring-color};
+  --#{$prefix}focus-ring-width: 3px;
+  --#{$prefix}focus-ring-offset: -1px;
+  --#{$prefix}focus-ring-color: var(--#{$prefix}primary-focus-ring);
+  --#{$prefix}focus-ring: var(--#{$prefix}focus-ring-width) solid var(--#{$prefix}focus-ring-color);
   // scss-docs-end root-focus-variables
 
   // scss-docs-start root-form-validation-variables
@@ -134,54 +136,34 @@
     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)};
+    // @each $color, $value in $theme-colors-text-dark {
+    //   --#{$prefix}#{$color}-text-emphasis: #{$value};
+    // }
 
-    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
-    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+    // @each $color, $value in $theme-colors-bg-subtle-dark {
+    //   --#{$prefix}#{$color}-bg-subtle: #{$value};
+    // }
 
-    --#{$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)};
-
-    @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};
-    }
+    // @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}code-color: #{$code-color-dark};
-    --#{$prefix}highlight-color: #{$mark-color-dark};
-    --#{$prefix}highlight-bg: #{$mark-bg-dark};
+    // --#{$prefix}code-color: #{$code-color-dark};
+    // --#{$prefix}highlight-color: #{$mark-color-dark};
+    // --#{$prefix}highlight-bg: #{$mark-bg-dark};
 
-    --#{$prefix}border-color: #{$border-color-dark};
-    --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+    // --#{$prefix}border-color: #{$border-color-dark};
+    // --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
 
-    --#{$prefix}form-valid-color: #{$form-valid-color-dark};
-    --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
-    --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
-    --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
+    // --#{$prefix}form-valid-color: #{$form-valid-color-dark};
+    // --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+    // --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
+    // --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
     // scss-docs-end root-dark-mode-vars
   }
 }

scss/_spinners.scss

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

scss/_tables.scss

@@ -1,171 +0,0 @@
-//
-// Basic Bootstrap table
-//
-
-.table {
-  // Reset needed for nesting tables
-  --#{$prefix}table-color-type: initial;
-  --#{$prefix}table-bg-type: initial;
-  --#{$prefix}table-color-state: initial;
-  --#{$prefix}table-bg-state: initial;
-  // End of reset
-  --#{$prefix}table-color: #{$table-color};
-  --#{$prefix}table-bg: #{$table-bg};
-  --#{$prefix}table-border-color: #{$table-border-color};
-  --#{$prefix}table-accent-bg: #{$table-accent-bg};
-  --#{$prefix}table-striped-color: #{$table-striped-color};
-  --#{$prefix}table-striped-bg: #{$table-striped-bg};
-  --#{$prefix}table-active-color: #{$table-active-color};
-  --#{$prefix}table-active-bg: #{$table-active-bg};
-  --#{$prefix}table-hover-color: #{$table-hover-color};
-  --#{$prefix}table-hover-bg: #{$table-hover-bg};
-
-  width: 100%;
-  margin-bottom: $spacer;
-  vertical-align: $table-cell-vertical-align;
-  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.
-  // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
-  // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
-  // stylelint-disable-next-line selector-max-universal
-  > :not(caption) > * > * {
-    padding: $table-cell-padding-y $table-cell-padding-x;
-    // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
-    color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
-    background-color: var(--#{$prefix}table-bg);
-    border-bottom-width: $table-border-width;
-    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
-  }
-
-  > tbody {
-    vertical-align: inherit;
-  }
-
-  > thead {
-    vertical-align: bottom;
-  }
-}
-
-.table-group-divider {
-  border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
-}
-
-//
-// Change placement of captions with a class
-//
-
-.caption-top {
-  caption-side: top;
-}
-
-
-//
-// Condensed table w/ half padding
-//
-
-.table-sm {
-  // stylelint-disable-next-line selector-max-universal
-  > :not(caption) > * > * {
-    padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
-  }
-}
-
-
-// Border versions
-//
-// Add or remove borders all around the table and between all the columns.
-//
-// When borders are added on all sides of the cells, the corners can render odd when
-// these borders do not have the same color or if they are semi-transparent.
-// Therefore we add top and border bottoms to the `tr`s and left and right borders
-// to the `td`s or `th`s
-
-.table-bordered {
-  > :not(caption) > * {
-    border-width: $table-border-width 0;
-
-    // stylelint-disable-next-line selector-max-universal
-    > * {
-      border-width: 0 $table-border-width;
-    }
-  }
-}
-
-.table-borderless {
-  // stylelint-disable-next-line selector-max-universal
-  > :not(caption) > * > * {
-    border-bottom-width: 0;
-  }
-
-  > :not(:first-child) {
-    border-top-width: 0;
-  }
-}
-
-// Zebra-striping
-//
-// Default zebra-stripe styles (alternating gray and transparent backgrounds)
-
-// For rows
-.table-striped {
-  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
-    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
-    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
-  }
-}
-
-// For columns
-.table-striped-columns {
-  > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
-    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
-    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
-  }
-}
-
-// Active table
-//
-// The `.table-active` class can be added to highlight rows or cells
-
-.table-active {
-  --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
-  --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
-}
-
-// Hover effect
-//
-// Placed here since it has to come after the potential zebra striping
-
-.table-hover {
-  > tbody > tr:hover > * {
-    --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
-    --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
-  }
-}
-
-
-// Table variants
-//
-// Table variants set the table cell backgrounds, border colors
-// and the colors of the striped, hovered & active tables
-
-@each $color, $value in $table-variants {
-  @include table-variant($color, $value);
-}
-
-// Responsive tables
-//
-// Generate series of `.table-responsive-*` classes for configuring the screen
-// size of where your table will overflow.
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-  @include media-breakpoint-down($breakpoint) {
-    .table-responsive#{$infix} {
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-  }
-}

scss/_theme.scss

@@ -0,0 +1,197 @@
+@use "config" as *;
+@use "colors" as *;
+
+@function theme-color-values($key) {
+  $result: ();
+
+  @each $color-name, $color-map in $new-theme-colors {
+    @if map-has-key($color-map, $key) {
+      $result: map-merge($result, ($color-name: map-get($color-map, $key)));
+    }
+  }
+
+  @return $result;
+}
+
+// Recursive mixin to handle nested maps
+@mixin create-css-vars($map, $parent-key: "") {
+  @each $key, $value in $map {
+    $current-key: if($parent-key == "", $key, "#{$parent-key}-#{$key}");
+
+    @if type-of($value) == "map" {
+      @include create-css-vars($value, $current-key);
+    } @else {
+      --#{$prefix}#{$current-key}: #{$value};
+    }
+  }
+}
+
+// scss-docs-start theme-colors
+$new-theme-colors: (
+  "primary": (
+    "base": var(--#{$prefix}blue-500),
+    "text": light-dark(var(--#{$prefix}blue-600), var(--#{$prefix}blue-300)),
+    "bg": light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-500)),
+    "bg-subtle": light-dark(var(--#{$prefix}blue-100), var(--#{$prefix}blue-900)),
+    "bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}blue-200), var(--#{$prefix}blue-300)), var(--#{$prefix}blue-700)),
+    "border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg)),
+    "contrast": var(--#{$prefix}white)
+  ),
+  "accent": (
+    "base": var(--#{$prefix}indigo-500),
+    "text": light-dark(var(--#{$prefix}indigo-600), var(--#{$prefix}indigo-300)),
+    "bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
+    "bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
+    "bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-300)), var(--#{$prefix}indigo-700)),
+    "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}indigo-500) 50%, var(--#{$prefix}bg)),
+    "contrast": var(--#{$prefix}white)
+  ),
+  "danger": (
+    "base": var(--#{$prefix}red-500),
+    "text": light-dark(var(--#{$prefix}red-600), var(--#{$prefix}red-300)),
+    "bg": light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-500)),
+    "bg-subtle": light-dark(var(--#{$prefix}red-100), var(--#{$prefix}red-900)),
+    "bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}red-200), var(--#{$prefix}red-300)), var(--#{$prefix}red-700)),
+    "border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, var(--#{$prefix}bg)),
+    "contrast": var(--#{$prefix}white)
+  ),
+  "warning": (
+    "base": var(--#{$prefix}yellow-500),
+    "text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-300)),
+    "bg": light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-500)),
+    "bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)),
+    "bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-300)), var(--#{$prefix}yellow-700)),
+    "border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, var(--#{$prefix}bg)),
+    "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-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, var(--#{$prefix}cyan-500) 50%, var(--#{$prefix}bg)),
+    "contrast": var(--#{$prefix}gray-900)
+  ),
+  "secondary": (
+    "base": var(--#{$prefix}gray-300),
+    "text": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
+    "bg": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
+    "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
+    "bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in oklch, var(--#{$prefix}gray-600), var(--#{$prefix}gray-700))),
+    "border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, var(--#{$prefix}bg)),
+    "contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
+  )
+) !default;
+// scss-docs-end theme-colors
+
+// "indigo": (
+//   "base": var(--#{$prefix}indigo-500),
+//   "text": light-dark(var(--#{$prefix}indigo-700), var(--#{$prefix}indigo-300)),
+//   "bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
+//   "bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
+//   "bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
+//   "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
+//   "contrast": var(--#{$prefix}white)
+// ),
+// "purple": (
+//   "base": var(--#{$prefix}purple-500),
+//   "text": light-dark(var(--#{$prefix}purple-700), var(--#{$prefix}purple-300)),
+//   "bg": light-dark(var(--#{$prefix}purple-500), var(--#{$prefix}purple-500)),
+//   "bg-subtle": light-dark(var(--#{$prefix}purple-100), var(--#{$prefix}purple-900)),
+//   "bg-muted": light-dark(var(--#{$prefix}purple-200), var(--#{$prefix}purple-800)),
+//   "border": light-dark(var(--#{$prefix}purple-300), var(--#{$prefix}purple-600)),
+//   "contrast": var(--#{$prefix}white)
+// ),
+// "pink": (
+//   "base": var(--#{$prefix}pink-500),
+//   "text": light-dark(var(--#{$prefix}pink-700), var(--#{$prefix}pink-300)),
+//   "bg": light-dark(var(--#{$prefix}pink-500), var(--#{$prefix}pink-500)),
+//   "bg-subtle": light-dark(var(--#{$prefix}pink-100), var(--#{$prefix}pink-900)),
+//   "bg-muted": light-dark(var(--#{$prefix}pink-200), var(--#{$prefix}pink-800)),
+//   "border": light-dark(var(--#{$prefix}pink-300), var(--#{$prefix}pink-600)),
+//   "contrast": var(--#{$prefix}white)
+// ),
+// "orange": (
+//   "base": var(--#{$prefix}orange-500),
+//   "text": light-dark(var(--#{$prefix}orange-700), var(--#{$prefix}orange-300)),
+//   "bg": light-dark(var(--#{$prefix}orange-500), var(--#{$prefix}orange-500)),
+//   "bg-subtle": light-dark(var(--#{$prefix}orange-100), var(--#{$prefix}orange-900)),
+//   "bg-muted": light-dark(var(--#{$prefix}orange-200), var(--#{$prefix}orange-800)),
+//   "border": light-dark(var(--#{$prefix}orange-300), var(--#{$prefix}orange-600)),
+//   "contrast": var(--#{$prefix}gray-900)
+// ),
+// "teal": (
+//   "base": var(--#{$prefix}teal-500),
+//   "text": light-dark(var(--#{$prefix}teal-700), var(--#{$prefix}teal-300)),
+//   "bg": light-dark(var(--#{$prefix}teal-500), var(--#{$prefix}teal-500)),
+//   "bg-subtle": light-dark(var(--#{$prefix}teal-100), var(--#{$prefix}teal-900)),
+//   "bg-muted": light-dark(var(--#{$prefix}teal-200), var(--#{$prefix}teal-800)),
+//   "border": light-dark(var(--#{$prefix}teal-300), var(--#{$prefix}teal-600)),
+//   "contrast": var(--#{$prefix}gray-900)
+// ),
+
+// mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
+$theme-bgs: (
+  null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)),
+  "1": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-900), var(--#{$prefix}gray-800))),
+  "2": light-dark(color-mix(in srgb, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-700))),
+  "3": light-dark(color-mix(in srgb, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in srgb, var(--#{$prefix}gray-700), var(--#{$prefix}gray-600))),
+  "white": var(--#{$prefix}white),
+  "black": var(--#{$prefix}black),
+  "transparent": transparent,
+  "inherit": inherit,
+) !default;
+
+$theme-fgs: (
+  null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
+  "1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
+  "2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
+  "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
+  "white": var(--#{$prefix}white),
+  "black": var(--#{$prefix}black),
+  "inherit": inherit,
+) !default;
+
+$theme-borders: (
+  null: light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-700)),
+  "muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-800)),
+  "subtle": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900))),
+  "emphasized": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-600)),
+) !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

@@ -1,73 +1,98 @@
-.toast {
-  // scss-docs-start toast-css-vars
-  --#{$prefix}toast-zindex: #{$zindex-toast};
-  --#{$prefix}toast-padding-x: #{$toast-padding-x};
-  --#{$prefix}toast-padding-y: #{$toast-padding-y};
-  --#{$prefix}toast-spacing: #{$toast-spacing};
-  --#{$prefix}toast-max-width: #{$toast-max-width};
-  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
-  --#{$prefix}toast-color: #{$toast-color};
-  --#{$prefix}toast-bg: #{$toast-background-color};
-  --#{$prefix}toast-border-width: #{$toast-border-width};
-  --#{$prefix}toast-border-color: #{$toast-border-color};
-  --#{$prefix}toast-border-radius: #{$toast-border-radius};
-  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
-  --#{$prefix}toast-header-color: #{$toast-header-color};
-  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
-  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
-  // scss-docs-end toast-css-vars
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "vendor/rfs" as *;
 
-  width: var(--#{$prefix}toast-max-width);
-  max-width: 100%;
-  @include font-size(var(--#{$prefix}toast-font-size));
-  color: var(--#{$prefix}toast-color);
-  pointer-events: auto;
-  background-color: var(--#{$prefix}toast-bg);
-  background-clip: padding-box;
-  border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
-  box-shadow: var(--#{$prefix}toast-box-shadow);
-  @include border-radius(var(--#{$prefix}toast-border-radius));
+// scss-docs-start toast-variables
+$toast-max-width:                   350px !default;
+$toast-padding-x:                   .75rem !default;
+$toast-padding-y:                   .5rem !default;
+$toast-font-size:                   .875rem !default;
+$toast-color:                       null !default;
+$toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-border-width:                var(--#{$prefix}border-width) !default;
+$toast-border-color:                var(--#{$prefix}border-color-translucent) !default;
+$toast-border-radius:               var(--#{$prefix}border-radius) !default;
+$toast-box-shadow:                  var(--#{$prefix}box-shadow) !default;
+$toast-spacing:                     $container-padding-x !default;
 
-  &.showing {
-    opacity: 0;
+$toast-header-color:                var(--#{$prefix}secondary-color) !default;
+$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-header-border-color:         $toast-border-color !default;
+// scss-docs-end toast-variables
+
+@layer components {
+  .toast {
+    // scss-docs-start toast-css-vars
+    --#{$prefix}toast-zindex: #{$zindex-toast};
+    --#{$prefix}toast-padding-x: #{$toast-padding-x};
+    --#{$prefix}toast-padding-y: #{$toast-padding-y};
+    --#{$prefix}toast-spacing: #{$toast-spacing};
+    --#{$prefix}toast-max-width: #{$toast-max-width};
+    @include rfs($toast-font-size, --#{$prefix}toast-font-size);
+    --#{$prefix}toast-color: #{$toast-color};
+    --#{$prefix}toast-bg: #{$toast-background-color};
+    --#{$prefix}toast-border-width: #{$toast-border-width};
+    --#{$prefix}toast-border-color: #{$toast-border-color};
+    --#{$prefix}toast-border-radius: #{$toast-border-radius};
+    --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
+    --#{$prefix}toast-header-color: #{$toast-header-color};
+    --#{$prefix}toast-header-bg: #{$toast-header-background-color};
+    --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
+    // scss-docs-end toast-css-vars
+
+    width: var(--#{$prefix}toast-max-width);
+    max-width: 100%;
+    @include font-size(var(--#{$prefix}toast-font-size));
+    color: var(--#{$prefix}toast-color);
+    pointer-events: auto;
+    background-color: var(--#{$prefix}toast-bg);
+    background-clip: padding-box;
+    border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
+    box-shadow: var(--#{$prefix}toast-box-shadow);
+    @include border-radius(var(--#{$prefix}toast-border-radius));
+
+    &.showing {
+      opacity: 0;
+    }
+
+    &:not(.show) {
+      display: none;
+    }
   }
 
-  &:not(.show) {
-    display: none;
+  .toast-container {
+    --#{$prefix}toast-zindex: #{$zindex-toast};
+
+    position: absolute;
+    z-index: var(--#{$prefix}toast-zindex);
+    width: max-content;
+    max-width: 100%;
+    pointer-events: none;
+
+    > :not(:last-child) {
+      margin-bottom: var(--#{$prefix}toast-spacing);
+    }
+  }
+
+  .toast-header {
+    display: flex;
+    align-items: center;
+    padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
+    color: var(--#{$prefix}toast-header-color);
+    background-color: var(--#{$prefix}toast-header-bg);
+    background-clip: padding-box;
+    border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
+    @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
+
+    .btn-close {
+      margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x));
+      margin-left: var(--#{$prefix}toast-padding-x);
+    }
+  }
+
+  .toast-body {
+    padding: var(--#{$prefix}toast-padding-x);
+    word-wrap: break-word;
   }
 }
-
-.toast-container {
-  --#{$prefix}toast-zindex: #{$zindex-toast};
-
-  position: absolute;
-  z-index: var(--#{$prefix}toast-zindex);
-  width: max-content;
-  max-width: 100%;
-  pointer-events: none;
-
-  > :not(:last-child) {
-    margin-bottom: var(--#{$prefix}toast-spacing);
-  }
-}
-
-.toast-header {
-  display: flex;
-  align-items: center;
-  padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
-  color: var(--#{$prefix}toast-header-color);
-  background-color: var(--#{$prefix}toast-header-bg);
-  background-clip: padding-box;
-  border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
-  @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
-
-  .btn-close {
-    margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
-    margin-left: var(--#{$prefix}toast-padding-x);
-  }
-}
-
-.toast-body {
-  padding: var(--#{$prefix}toast-padding-x);
-  word-wrap: break-word;
-}

scss/_tooltip.scss

@@ -1,119 +1,128 @@
-// Base class
-.tooltip {
-  // scss-docs-start tooltip-css-vars
-  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
-  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
-  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
-  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
-  --#{$prefix}tooltip-margin: #{$tooltip-margin};
-  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
-  --#{$prefix}tooltip-color: #{$tooltip-color};
-  --#{$prefix}tooltip-bg: #{$tooltip-bg};
-  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
-  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
-  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
-  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
-  // scss-docs-end tooltip-css-vars
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/deprecate" as *;
+@use "vendor/rfs" as *;
+@use "mixins/reset-text" as *;
 
-  z-index: var(--#{$prefix}tooltip-zindex);
-  display: block;
-  margin: var(--#{$prefix}tooltip-margin);
-  @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
-  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-  // So reset our font and text properties to avoid inheriting weird values.
-  @include reset-text();
-  @include font-size(var(--#{$prefix}tooltip-font-size));
-  // Allow breaking very long words so they don't overflow the tooltip's bounds
-  word-wrap: break-word;
-  opacity: 0;
+@layer components {
+  // Base class
+  .tooltip {
+    // scss-docs-start tooltip-css-vars
+    --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
+    --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
+    --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
+    --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
+    --#{$prefix}tooltip-margin: #{$tooltip-margin};
+    @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+    --#{$prefix}tooltip-color: var(--#{$prefix}bg);
+    --#{$prefix}tooltip-bg: var(--#{$prefix}fg);
+    --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+    --#{$prefix}tooltip-opacity: .95;
+    --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
+    --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
+    // scss-docs-end tooltip-css-vars
 
-  &.show { opacity: var(--#{$prefix}tooltip-opacity); }
-
-  .tooltip-arrow {
+    z-index: var(--#{$prefix}tooltip-zindex);
     display: block;
-    width: var(--#{$prefix}tooltip-arrow-width);
-    height: var(--#{$prefix}tooltip-arrow-height);
+    margin: var(--#{$prefix}tooltip-margin);
+    @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
+    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+    // So reset our font and text properties to avoid inheriting weird values.
+    @include reset-text();
+    @include font-size(var(--#{$prefix}tooltip-font-size));
+    // Allow breaking very long words so they don't overflow the tooltip's bounds
+    word-wrap: break-word;
+    opacity: 0;
 
-    &::before {
-      position: absolute;
-      content: "";
-      border-color: transparent;
-      border-style: solid;
+    &.show { opacity: var(--#{$prefix}tooltip-opacity); }
+
+    .tooltip-arrow {
+      display: block;
+      width: var(--#{$prefix}tooltip-arrow-width);
+      height: var(--#{$prefix}tooltip-arrow-height);
+
+      &::before {
+        position: absolute;
+        content: "";
+        border-color: transparent;
+        border-style: solid;
+      }
     }
   }
-}
 
-.bs-tooltip-top .tooltip-arrow {
-  bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+  .bs-tooltip-top .tooltip-arrow {
+    bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
 
-  &::before {
-    top: -1px;
-    border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
-    border-top-color: var(--#{$prefix}tooltip-bg);
+    &::before {
+      top: -1px;
+      border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
+      border-top-color: var(--#{$prefix}tooltip-bg);
+    }
+  }
+
+  /* rtl:begin:ignore */
+  .bs-tooltip-end .tooltip-arrow {
+    left: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
+    width: var(--#{$prefix}tooltip-arrow-height);
+    height: var(--#{$prefix}tooltip-arrow-width);
+
+    &::before {
+      right: -1px;
+      border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
+      border-right-color: var(--#{$prefix}tooltip-bg);
+    }
+  }
+
+  /* rtl:end:ignore */
+
+  .bs-tooltip-bottom .tooltip-arrow {
+    top: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
+
+    &::before {
+      bottom: -1px;
+      border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
+      border-bottom-color: var(--#{$prefix}tooltip-bg);
+    }
+  }
+
+  /* rtl:begin:ignore */
+  .bs-tooltip-start .tooltip-arrow {
+    right: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
+    width: var(--#{$prefix}tooltip-arrow-height);
+    height: var(--#{$prefix}tooltip-arrow-width);
+
+    &::before {
+      left: -1px;
+      border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
+      border-left-color: var(--#{$prefix}tooltip-bg);
+    }
+  }
+
+  /* rtl:end:ignore */
+
+  .bs-tooltip-auto {
+    &[data-popper-placement^="top"] {
+      @extend .bs-tooltip-top;
+    }
+    &[data-popper-placement^="right"] {
+      @extend .bs-tooltip-end;
+    }
+    &[data-popper-placement^="bottom"] {
+      @extend .bs-tooltip-bottom;
+    }
+    &[data-popper-placement^="left"] {
+      @extend .bs-tooltip-start;
+    }
+  }
+
+  // Wrapper for the tooltip content
+  .tooltip-inner {
+    max-width: var(--#{$prefix}tooltip-max-width);
+    padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
+    color: var(--#{$prefix}tooltip-color);
+    text-align: center;
+    background-color: var(--#{$prefix}tooltip-bg);
+    @include border-radius(var(--#{$prefix}tooltip-border-radius));
   }
 }
-
-/* rtl:begin:ignore */
-.bs-tooltip-end .tooltip-arrow {
-  left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
-  width: var(--#{$prefix}tooltip-arrow-height);
-  height: var(--#{$prefix}tooltip-arrow-width);
-
-  &::before {
-    right: -1px;
-    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
-    border-right-color: var(--#{$prefix}tooltip-bg);
-  }
-}
-
-/* rtl:end:ignore */
-
-.bs-tooltip-bottom .tooltip-arrow {
-  top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
-
-  &::before {
-    bottom: -1px;
-    border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
-    border-bottom-color: var(--#{$prefix}tooltip-bg);
-  }
-}
-
-/* rtl:begin:ignore */
-.bs-tooltip-start .tooltip-arrow {
-  right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
-  width: var(--#{$prefix}tooltip-arrow-height);
-  height: var(--#{$prefix}tooltip-arrow-width);
-
-  &::before {
-    left: -1px;
-    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
-    border-left-color: var(--#{$prefix}tooltip-bg);
-  }
-}
-
-/* rtl:end:ignore */
-
-.bs-tooltip-auto {
-  &[data-popper-placement^="top"] {
-    @extend .bs-tooltip-top;
-  }
-  &[data-popper-placement^="right"] {
-    @extend .bs-tooltip-end;
-  }
-  &[data-popper-placement^="bottom"] {
-    @extend .bs-tooltip-bottom;
-  }
-  &[data-popper-placement^="left"] {
-    @extend .bs-tooltip-start;
-  }
-}
-
-// Wrapper for the tooltip content
-.tooltip-inner {
-  max-width: var(--#{$prefix}tooltip-max-width);
-  padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
-  color: var(--#{$prefix}tooltip-color);
-  text-align: center;
-  background-color: var(--#{$prefix}tooltip-bg);
-  @include border-radius(var(--#{$prefix}tooltip-border-radius));
-}

scss/_transitions.scss

@@ -1,3 +1,7 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/transition" as *;
+
 .fade {
   @include transition($transition-fade);
 

scss/_type.scss

@@ -1,106 +0,0 @@
-//
-// Headings
-//
-.h1 {
-  @extend h1;
-}
-
-.h2 {
-  @extend h2;
-}
-
-.h3 {
-  @extend h3;
-}
-
-.h4 {
-  @extend h4;
-}
-
-.h5 {
-  @extend h5;
-}
-
-.h6 {
-  @extend h6;
-}
-
-
-.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);
-  }
-}
-
-//
-// Emphasis
-//
-.small {
-  @extend small;
-}
-
-.mark {
-  @extend mark;
-}
-
-//
-// Lists
-//
-
-.list-unstyled {
-  @include list-unstyled();
-}
-
-// Inline turns list items into inline-block
-.list-inline {
-  @include list-unstyled();
-}
-.list-inline-item {
-  display: inline-block;
-
-  &:not(:last-child) {
-    margin-right: $list-inline-padding;
-  }
-}
-
-
-//
-// Misc
-//
-
-// Builds on `abbr`
-.initialism {
-  @include font-size($initialism-font-size);
-  text-transform: uppercase;
-}
-
-// Blockquotes
-.blockquote {
-  margin-bottom: $blockquote-margin-y;
-  @include font-size($blockquote-font-size);
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-}
-
-.blockquote-footer {
-  margin-top: -$blockquote-margin-y;
-  margin-bottom: $blockquote-margin-y;
-  @include font-size($blockquote-footer-font-size);
-  color: $blockquote-footer-color;
-
-  &::before {
-    content: "\2014\00A0"; // em dash, nbsp
-  }
-}

scss/_utilities.scss

@@ -1,8 +1,13 @@
-// Utilities
+@use "sass:map";
+@use "config" as *;
+@use "colors" as *;
+@use "variables" as *;
+@use "functions" as *;
+@use "theme" as *;
 
 $utilities: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$utilities: map-merge(
+$utilities: map.merge(
   (
     // scss-docs-start utils-vertical-align
     "align": (
@@ -11,10 +16,24 @@ $utilities: map-merge(
       values: baseline top middle bottom text-bottom text-top
     ),
     // scss-docs-end utils-vertical-align
+    // scss-docs-start utils-aspect-ratio
+    "aspect-ratio-attr": (
+      selector: "attr-includes",
+      class: "ratio-",
+      property: aspect-ratio,
+      values: var(--#{$prefix}ratio),
+    ),
+    "aspect-ratio": (
+      // property: aspect-ratio,
+      property: --#{$prefix}ratio,
+      class: ratio,
+      values: $aspect-ratios
+    ),
+    // scss-docs-end utils-aspect-ratio
     // scss-docs-start utils-float
     "float": (
-      responsive: true,
       property: float,
+      responsive: true,
       values: (
         start: left,
         end: right,
@@ -69,7 +88,7 @@ $utilities: map-merge(
       print: true,
       property: display,
       class: d,
-      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
+      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none
     ),
     // scss-docs-end utils-display
     // scss-docs-start utils-shadow
@@ -86,10 +105,10 @@ $utilities: map-merge(
     // scss-docs-end utils-shadow
     // scss-docs-start utils-focus-ring
     "focus-ring": (
-      css-var: true,
-      css-variable-name: focus-ring-color,
+      // css-var: true,
+      property: --#{$prefix}focus-ring-color,
       class: focus-ring,
-      values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
+      values: theme-color-values("focus-ring"),
     ),
     // scss-docs-end utils-focus-ring
     // scss-docs-start utils-position
@@ -126,72 +145,99 @@ $utilities: map-merge(
     ),
     // scss-docs-end utils-position
     // scss-docs-start utils-borders
-    "border": (
+    // "border": (
+    //   // selector: "attr-includes",
+    //   class: border,
+    //   property: border,
+    //   values: (
+    //     null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+    //     // 0: 0,
+    //   )
+    // ),
+    "borders": (
       property: border,
-      values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-        0: 0,
-      )
+      class: border,
+      values: map.merge($borders, (0: 0))
     ),
-    "border-top": (
-      property: border-top,
-      values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-        0: 0,
-      )
+    // "borders": (
+    //   class: border,
+    //   property: '--#{$prefix}border-width',
+    //   values: map.merge($border-widths, (0: 0))
+    // ),
+    "border-t": (
+      class: border-t,
+      property: border-block-start,
+      values: map.merge($borders, (0: 0))
     ),
-    "border-end": (
-      property: border-right,
-      class: border-end,
-      values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-        0: 0,
-      )
+    "border-e": (
+      property: border-inline-end,
+      class: border-e,
+      values: map.merge($borders, (0: 0))
     ),
-    "border-bottom": (
-      property: border-bottom,
-      values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-        0: 0,
-      )
+    "border-b": (
+      property: border-block-end,
+      class: border-b,
+      values: map.merge($borders, (0: 0))
     ),
-    "border-start": (
-      property: border-left,
-      class: border-start,
-      values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-        0: 0,
-      )
+    "border-s": (
+      property: border-inline-start,
+      class: border-s,
+      values: map.merge($borders, (0: 0))
+    ),
+    "border-y": (
+      property: border-block,
+      values: map.merge($borders, (0: 0))
+    ),
+    "border-x": (
+      property: border-inline,
+      values: map.merge($borders, (0: 0))
     ),
     "border-color": (
-      property: border-color,
+      property: --#{$prefix}border-color,
       class: border,
-      local-vars: (
-        "border-opacity": 1
-      ),
-      values: $utilities-border-colors
+      values: theme-color-values("border")
     ),
-    "subtle-border-color": (
-      property: border-color,
-      class: border,
-      values: $utilities-border-subtle
-    ),
-    "border-width": (
-      property: border-width,
-      class: border,
-      values: $border-widths
-    ),
-    "border-opacity": (
-      css-var: true,
-      class: border-opacity,
+    "dividers-x": (
+      selector: ".dividers-x > :not(:first-child)",
+      property: border-inline-start,
       values: (
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
       )
     ),
+    "dividers-y": (
+      selector: ".dividers-y > :not(:first-child)",
+      property: border-block-start,
+      values: (
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+      )
+    ),
+    "border-opacity": (
+      class: border,
+      property: border-color,
+      values: (
+        10: color-mix(in oklch, var(--#{$prefix}border-color) 10%, transparent),
+        20: color-mix(in oklch, var(--#{$prefix}border-color) 20%, transparent),
+        30: color-mix(in oklch, var(--#{$prefix}border-color) 30%, transparent),
+        40: color-mix(in oklch, var(--#{$prefix}border-color) 40%, transparent),
+        50: color-mix(in oklch, var(--#{$prefix}border-color) 50%, transparent),
+        60: color-mix(in oklch, var(--#{$prefix}border-color) 60%, transparent),
+        70: color-mix(in oklch, var(--#{$prefix}border-color) 70%, transparent),
+        80: color-mix(in oklch, var(--#{$prefix}border-color) 80%, transparent),
+        90: color-mix(in oklch, var(--#{$prefix}border-color) 90%, transparent),
+        100: var(--#{$prefix}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-sizing
@@ -203,14 +249,25 @@ $utilities: map-merge(
         50: 50%,
         75: 75%,
         100: 100%,
-        auto: auto
+        auto: auto,
+        min: min-content,
+        max: max-content,
+        fit: fit-content,
       )
     ),
     "max-width": (
       property: max-width,
-      class: mw,
+      class: max-w,
       values: (100: 100%)
     ),
+    "min-width": (
+      property: min-width,
+      class: min-w,
+      values: (
+        0: 0,
+        100: 100%
+      )
+    ),
     "viewport-width": (
       property: width,
       class: vw,
@@ -229,14 +286,25 @@ $utilities: map-merge(
         50: 50%,
         75: 75%,
         100: 100%,
-        auto: auto
+        auto: auto,
+        min: min-content,
+        max: max-content,
+        fit: fit-content,
       )
     ),
     "max-height": (
       property: max-height,
-      class: mh,
+      class: max-h,
       values: (100: 100%)
     ),
+    "min-height": (
+      property: min-height,
+      class: min-h,
+      values: (
+        0: 0,
+        100: 100%,
+      ),
+    ),
     "viewport-height": (
       property: height,
       class: vh,
@@ -297,6 +365,15 @@ $utilities: map-merge(
         evenly: space-evenly,
       )
     ),
+    "justify-self": (
+      responsive: true,
+      property: justify-self,
+      values: (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+      )
+    ),
     "align-items": (
       responsive: true,
       property: align-items,
@@ -353,87 +430,87 @@ $utilities: map-merge(
       responsive: true,
       property: margin,
       class: m,
-      values: map-merge($spacers, (auto: auto))
+      values: map.merge($spacers, (auto: auto))
     ),
     "margin-x": (
       responsive: true,
       property: margin-right margin-left,
       class: mx,
-      values: map-merge($spacers, (auto: auto))
+      values: map.merge($spacers, (auto: auto))
     ),
     "margin-y": (
       responsive: true,
       property: margin-top margin-bottom,
       class: my,
-      values: map-merge($spacers, (auto: auto))
+      values: map.merge($spacers, (auto: auto))
     ),
     "margin-top": (
       responsive: true,
       property: margin-top,
       class: mt,
-      values: map-merge($spacers, (auto: auto))
+      values: map.merge($spacers, (auto: auto))
     ),
     "margin-end": (
       responsive: true,
       property: margin-right,
       class: me,
-      values: map-merge($spacers, (auto: auto))
+      values: map.merge($spacers, (auto: auto))
     ),
     "margin-bottom": (
       responsive: true,
       property: margin-bottom,
       class: mb,
-      values: map-merge($spacers, (auto: auto))
+      values: map.merge($spacers, (auto: auto))
     ),
     "margin-start": (
       responsive: true,
       property: margin-left,
       class: ms,
-      values: map-merge($spacers, (auto: auto))
+      values: map.merge($spacers, (auto: auto))
     ),
     // Negative margin utilities
-    "negative-margin": (
-      responsive: true,
-      property: margin,
-      class: m,
-      values: $negative-spacers
-    ),
-    "negative-margin-x": (
-      responsive: true,
-      property: margin-right margin-left,
-      class: mx,
-      values: $negative-spacers
-    ),
-    "negative-margin-y": (
-      responsive: true,
-      property: margin-top margin-bottom,
-      class: my,
-      values: $negative-spacers
-    ),
-    "negative-margin-top": (
-      responsive: true,
-      property: margin-top,
-      class: mt,
-      values: $negative-spacers
-    ),
-    "negative-margin-end": (
-      responsive: true,
-      property: margin-right,
-      class: me,
-      values: $negative-spacers
-    ),
-    "negative-margin-bottom": (
-      responsive: true,
-      property: margin-bottom,
-      class: mb,
-      values: $negative-spacers
-    ),
-    "negative-margin-start": (
-      responsive: true,
-      property: margin-left,
-      class: ms,
-      values: $negative-spacers
-    ),
+    // "negative-margin": (
+    //   responsive: true,
+    //   property: margin,
+    //   class: m,
+    //   values: $negative-spacers
+    // ),
+    // "negative-margin-x": (
+    //   responsive: true,
+    //   property: margin-right margin-left,
+    //   class: mx,
+    //   values: $negative-spacers
+    // ),
+    // "negative-margin-y": (
+    //   responsive: true,
+    //   property: margin-top margin-bottom,
+    //   class: my,
+    //   values: $negative-spacers
+    // ),
+    // "negative-margin-top": (
+    //   responsive: true,
+    //   property: margin-top,
+    //   class: mt,
+    //   values: $negative-spacers
+    // ),
+    // "negative-margin-end": (
+    //   responsive: true,
+    //   property: margin-right,
+    //   class: me,
+    //   values: $negative-spacers
+    // ),
+    // "negative-margin-bottom": (
+    //   responsive: true,
+    //   property: margin-bottom,
+    //   class: mb,
+    //   values: $negative-spacers
+    // ),
+    // "negative-margin-start": (
+    //   responsive: true,
+    //   property: margin-left,
+    //   class: ms,
+    //   values: $negative-spacers
+    // ),
     // Padding utilities
     "padding": (
       responsive: true,
@@ -573,52 +650,50 @@ $utilities: map-merge(
     ),
     // scss-docs-end utils-text
     // scss-docs-start utils-color
+    "color-attr": (
+      selector: "attr-includes",
+      class: "color-",
+      property: color,
+      values: var(--#{$prefix}color),
+    ),
     "color": (
-      property: color,
-      class: text,
-      local-vars: (
-        "text-opacity": 1
-      ),
-      values: map-merge(
-        $utilities-text-colors,
-        (
-          "muted": var(--#{$prefix}secondary-color), // deprecated
-          "black-50": rgba($black, .5), // deprecated
-          "white-50": rgba($white, .5), // deprecated
-          "body-secondary": var(--#{$prefix}secondary-color),
-          "body-tertiary": var(--#{$prefix}tertiary-color),
-          "body-emphasis": var(--#{$prefix}emphasis-color),
-          "reset": inherit,
-        )
-      )
+      property: --#{$prefix}color,
+      class: color,
+      values: map.merge(theme-color-values("text"), $theme-fgs),
     ),
-    "text-opacity": (
-      css-var: true,
-      class: text-opacity,
+    "color-opacity": (
+      class: color,
+      property: color,
       values: (
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
+        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),
       )
     ),
-    "text-color": (
-      property: color,
-      class: text,
-      values: $utilities-text-emphasis-colors
+    "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": (
-      css-var: true,
+      property: color,
       class: link-opacity,
       state: hover,
       values: (
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
+        10: color-mix(in oklch, var(--#{$prefix}link-color) 10%, transparent),
+        25: color-mix(in oklch, var(--#{$prefix}link-color) 25%, transparent),
+        50: color-mix(in oklch, var(--#{$prefix}link-color) 50%, transparent),
+        75: color-mix(in oklch, var(--#{$prefix}link-color) 75%, transparent),
+        100: var(--#{$prefix}link-color),
       )
     ),
     "link-offset": (
@@ -637,58 +712,67 @@ $utilities: map-merge(
       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)),
-        )
-      )
+      values: theme-color-values("text"),
+      // values: map.merge(
+      //   $utilities-links-underline,
+      //   (
+      //     // null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
+      //   )
+      // )
     ),
     "link-underline-opacity": (
-      css-var: true,
+      // css-var: true,
+      // property: --#{$prefix}link-underline-opacity,
+      property: text-decoration-color,
       class: link-underline-opacity,
       state: hover,
       values: (
-        0: 0,
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
+        0: color-mix(in oklch, var(--#{$prefix}link-color) 0%, transparent),
+        10: color-mix(in oklch, var(--#{$prefix}link-color) 10%, transparent),
+        25: color-mix(in oklch, var(--#{$prefix}link-color) 25%, transparent),
+        50: color-mix(in oklch, var(--#{$prefix}link-color) 50%, transparent),
+        75: color-mix(in oklch, var(--#{$prefix}link-color) 75%, transparent),
+        100: var(--#{$prefix}link-color),
       ),
     ),
     // scss-docs-end utils-links
     // scss-docs-start utils-bg-color
-    "background-color": (
+    "bg-attr": (
+      selector: "attr-includes",
+      class: "bg-",
       property: background-color,
+      values: var(--#{$prefix}bg),
+    ),
+    "bg-color": (
+      property: --#{$prefix}bg,
       class: bg,
-      local-vars: (
-        "bg-opacity": 1
-      ),
-      values: map-merge(
-        $utilities-bg-colors,
-        (
-          "transparent": transparent,
-          "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
-          "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
-        )
-      )
+      values: map.merge(theme-color-values("bg"), $theme-bgs),
+    ),
+    "bg-color-subtle": (
+      property: --#{$prefix}bg,
+      class: bg-subtle,
+      values: theme-color-values("bg-subtle"),
+    ),
+    "bg-color-muted": (
+      property: --#{$prefix}bg,
+      class: bg-muted,
+      values: theme-color-values("bg-muted"),
     ),
     "bg-opacity": (
-      css-var: true,
-      class: bg-opacity,
-      values: (
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
-      )
-    ),
-    "subtle-background-color": (
-      property: background-color,
       class: bg,
-      values: $utilities-bg-subtle
+      property: background-color,
+      values: (
+        10: color-mix(in oklch, var(--#{$prefix}bg) 10%, transparent),
+        20: color-mix(in oklch, var(--#{$prefix}bg) 20%, transparent),
+        30: color-mix(in oklch, var(--#{$prefix}bg) 30%, transparent),
+        40: color-mix(in oklch, var(--#{$prefix}bg) 40%, transparent),
+        50: color-mix(in oklch, var(--#{$prefix}bg) 50%, transparent),
+        60: color-mix(in oklch, var(--#{$prefix}bg) 60%, transparent),
+        70: color-mix(in oklch, var(--#{$prefix}bg) 70%, transparent),
+        80: color-mix(in oklch, var(--#{$prefix}bg) 80%, transparent),
+        90: color-mix(in oklch, var(--#{$prefix}bg) 90%, transparent),
+        100: var(--#{$prefix}bg),
+      )
     ),
     // scss-docs-end utils-bg-color
     "gradient": (
@@ -708,7 +792,7 @@ $utilities: map-merge(
     ),
     // scss-docs-end utils-interaction
     // scss-docs-start utils-border-radius
-    "rounded": (
+    "border-radius": (
       property: border-radius,
       class: rounded,
       values: (
@@ -718,7 +802,7 @@ $utilities: map-merge(
         2: var(--#{$prefix}border-radius),
         3: var(--#{$prefix}border-radius-lg),
         4: var(--#{$prefix}border-radius-xl),
-        5: var(--#{$prefix}border-radius-xxl),
+        5: var(--#{$prefix}border-radius-2xl),
         circle: 50%,
         pill: var(--#{$prefix}border-radius-pill)
       )
@@ -733,7 +817,7 @@ $utilities: map-merge(
         2: var(--#{$prefix}border-radius),
         3: var(--#{$prefix}border-radius-lg),
         4: var(--#{$prefix}border-radius-xl),
-        5: var(--#{$prefix}border-radius-xxl),
+        5: var(--#{$prefix}border-radius-2xl),
         circle: 50%,
         pill: var(--#{$prefix}border-radius-pill)
       )
@@ -748,7 +832,7 @@ $utilities: map-merge(
         2: var(--#{$prefix}border-radius),
         3: var(--#{$prefix}border-radius-lg),
         4: var(--#{$prefix}border-radius-xl),
-        5: var(--#{$prefix}border-radius-xxl),
+        5: var(--#{$prefix}border-radius-2xl),
         circle: 50%,
         pill: var(--#{$prefix}border-radius-pill)
       )
@@ -763,7 +847,7 @@ $utilities: map-merge(
         2: var(--#{$prefix}border-radius),
         3: var(--#{$prefix}border-radius-lg),
         4: var(--#{$prefix}border-radius-xl),
-        5: var(--#{$prefix}border-radius-xxl),
+        5: var(--#{$prefix}border-radius-2xl),
         circle: 50%,
         pill: var(--#{$prefix}border-radius-pill)
       )
@@ -778,7 +862,7 @@ $utilities: map-merge(
         2: var(--#{$prefix}border-radius),
         3: var(--#{$prefix}border-radius-lg),
         4: var(--#{$prefix}border-radius-xl),
-        5: var(--#{$prefix}border-radius-xxl),
+        5: var(--#{$prefix}border-radius-2xl),
         circle: 50%,
         pill: var(--#{$prefix}border-radius-pill)
       )

scss/_variables-dark.scss

@@ -7,64 +7,65 @@
 //
 
 // scss-docs-start sass-dark-mode-vars
-// scss-docs-start theme-text-dark-variables
-$primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
-$secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
-$success-text-emphasis-dark:        tint-color($success, 40%) !default;
-$info-text-emphasis-dark:           tint-color($info, 40%) !default;
-$warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
-$danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
-$light-text-emphasis-dark:          $gray-100 !default;
-$dark-text-emphasis-dark:           $gray-300 !default;
-// scss-docs-end theme-text-dark-variables
+// // scss-docs-start theme-text-dark-variables
+// $primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
+// $secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
+// $success-text-emphasis-dark:        tint-color($success, 40%) !default;
+// $info-text-emphasis-dark:           tint-color($info, 40%) !default;
+// $warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
+// $danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
+// $light-text-emphasis-dark:          $gray-100 !default;
+// $dark-text-emphasis-dark:           $gray-300 !default;
+// // scss-docs-end theme-text-dark-variables
 
-// scss-docs-start theme-bg-subtle-dark-variables
-$primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
-$secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
-$success-bg-subtle-dark:            shade-color($success, 80%) !default;
-$info-bg-subtle-dark:               shade-color($info, 80%) !default;
-$warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
-$danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
-$light-bg-subtle-dark:              $gray-800 !default;
-$dark-bg-subtle-dark:               mix($gray-800, $black) !default;
-// scss-docs-end theme-bg-subtle-dark-variables
+// // scss-docs-start theme-bg-subtle-dark-variables
+// $primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
+// $secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
+// $success-bg-subtle-dark:            shade-color($success, 80%) !default;
+// $info-bg-subtle-dark:               shade-color($info, 80%) !default;
+// $warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
+// $danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
+// $light-bg-subtle-dark:              $gray-800 !default;
+// $dark-bg-subtle-dark:               mix($gray-800, $black) !default;
+// // scss-docs-end theme-bg-subtle-dark-variables
 
-// scss-docs-start theme-border-subtle-dark-variables
-$primary-border-subtle-dark:        shade-color($primary, 40%) !default;
-$secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
-$success-border-subtle-dark:        shade-color($success, 40%) !default;
-$info-border-subtle-dark:           shade-color($info, 40%) !default;
-$warning-border-subtle-dark:        shade-color($warning, 40%) !default;
-$danger-border-subtle-dark:         shade-color($danger, 40%) !default;
-$light-border-subtle-dark:          $gray-700 !default;
-$dark-border-subtle-dark:           $gray-800 !default;
-// scss-docs-end theme-border-subtle-dark-variables
+// // scss-docs-start theme-border-subtle-dark-variables
+// $primary-border-subtle-dark:        shade-color($primary, 40%) !default;
+// $secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
+// $success-border-subtle-dark:        shade-color($success, 40%) !default;
+// $info-border-subtle-dark:           shade-color($info, 40%) !default;
+// $warning-border-subtle-dark:        shade-color($warning, 40%) !default;
+// $danger-border-subtle-dark:         shade-color($danger, 40%) !default;
+// $light-border-subtle-dark:          $gray-700 !default;
+// $dark-border-subtle-dark:           $gray-800 !default;
+// // scss-docs-end theme-border-subtle-dark-variables
 
-$body-color-dark:                   $gray-300 !default;
-$body-bg-dark:                      $gray-900 !default;
-$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
-$body-secondary-bg-dark:            $gray-800 !default;
-$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
-$body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
-$body-emphasis-color-dark:          $white !default;
-$border-color-dark:                 $gray-700 !default;
-$border-color-translucent-dark:     rgba($white, .15) !default;
+// $body-color-dark:                   $gray-300 !default;
+// $body-bg-dark:                      $gray-900 !default;
+// $body-secondary-color-dark:         rgb(var(--#{$prefix}body-color-dark) / .75) !default;
+// $body-secondary-bg-dark:            $gray-800 !default;
+// $body-tertiary-color-dark:          rgb(var(--#{$prefix}body-color-dark) / .5) !default;
+// $body-tertiary-bg-dark:             color-mix(in srgb, #{$gray-800}, #{$gray-900}, 50%) !default;
+// $body-emphasis-color-dark:          $white !default;
+// $border-color-dark:                 $gray-700 !default;
+$border-color-translucent-dark:     rgba(var(--#{$prefix}white), .15) !default;
 $headings-color-dark:               inherit !default;
-$link-color-dark:                   tint-color($primary, 40%) !default;
-$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
-$code-color-dark:                   tint-color($code-color, 40%) !default;
-$mark-color-dark:                   $body-color-dark !default;
-$mark-bg-dark:                      $yellow-800 !default;
+// $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 !default;
+// $mark-bg-dark:                      $yellow-800 !default;
 
 
 //
 // Forms
 //
 
-$form-select-indicator-color-dark:  $body-color-dark !default;
+// mdo-do: this was body-color-dark???
+$form-select-indicator-color-dark:  $body-color !default;
 $form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
 
-$form-switch-color-dark:            rgba($white, .25) !default;
+$form-switch-color-dark:            rgb(var(--#{$prefix}white), .25) !default;
 $form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
 
 // scss-docs-start form-validation-colors-dark
@@ -79,9 +80,10 @@ $form-invalid-border-color-dark:    $red-300 !default;
 // Accordion
 //
 
-$accordion-icon-color-dark:         $primary-text-emphasis-dark !default;
-$accordion-icon-active-color-dark:  $primary-text-emphasis-dark !default;
+$accordion-icon-color-dark:         var(--#{$prefix}primary-text) !default;
+$accordion-icon-active-color-dark:  var(--#{$prefix}primary-text) !default;
 
+// mdo-do: above css var values break the svg fills here
 $accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
 $accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
 // scss-docs-end sass-dark-mode-vars
@@ -91,12 +93,12 @@ $accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://
 // Carousel
 //
 
-$carousel-indicator-active-bg-dark:   $carousel-dark-indicator-active-bg !default;
-$carousel-caption-color-dark:         $carousel-dark-caption-color !default;
-$carousel-control-icon-filter-dark:   $carousel-dark-control-icon-filter !default;
+// $carousel-indicator-active-bg-dark:   $carousel-dark-indicator-active-bg !default;
+// $carousel-caption-color-dark:         $carousel-dark-caption-color !default;
+// $carousel-control-icon-filter-dark:   $carousel-dark-control-icon-filter !default;
 
 //
 // Close button
 //
 
-$btn-close-filter-dark:             $btn-close-white-filter !default;
+// $btn-close-filter-dark:             $btn-close-white-filter !default;

scss/bootstrap-grid.scss

@@ -1,62 +0,0 @@
-@import "mixins/banner";
-@include bsBanner(Grid);
-
-$include-column-box-sizing: true !default;
-
-@import "functions";
-@import "variables";
-@import "variables-dark";
-@import "maps";
-
-@import "mixins/breakpoints";
-@import "mixins/container";
-@import "mixins/grid";
-@import "mixins/utilities";
-
-@import "vendor/rfs";
-
-@import "containers";
-@import "grid";
-
-@import "utilities";
-// Only use the utilities we need
-// stylelint-disable-next-line scss/dollar-variable-default
-$utilities: map-get-multiple(
-  $utilities,
-  (
-    "display",
-    "order",
-    "flex",
-    "flex-direction",
-    "flex-grow",
-    "flex-shrink",
-    "flex-wrap",
-    "justify-content",
-    "align-items",
-    "align-content",
-    "align-self",
-    "margin",
-    "margin-x",
-    "margin-y",
-    "margin-top",
-    "margin-end",
-    "margin-bottom",
-    "margin-start",
-    "negative-margin",
-    "negative-margin-x",
-    "negative-margin-y",
-    "negative-margin-top",
-    "negative-margin-end",
-    "negative-margin-bottom",
-    "negative-margin-start",
-    "padding",
-    "padding-x",
-    "padding-y",
-    "padding-top",
-    "padding-end",
-    "padding-bottom",
-    "padding-start",
-  )
-);
-
-@import "utilities/api";

scss/bootstrap-reboot.scss

@@ -1,10 +0,0 @@
-@import "mixins/banner";
-@include bsBanner(Reboot);
-
-@import "functions";
-@import "variables";
-@import "variables-dark";
-@import "maps";
-@import "mixins";
-@import "root";
-@import "reboot";

scss/bootstrap-utilities.scss

@@ -1,19 +0,0 @@
-@import "mixins/banner";
-@include bsBanner(Utilities);
-
-// Configuration
-@import "functions";
-@import "variables";
-@import "variables-dark";
-@import "maps";
-@import "mixins";
-@import "utilities";
-
-// Layout & components
-@import "root";
-
-// Helpers
-@import "helpers";
-
-// Utilities
-@import "utilities/api";

scss/bootstrap.scss

@@ -1,52 +1,50 @@
-@import "mixins/banner";
-@include bsBanner("");
-
+/*!
+  * Bootstrap v6.0.0-dev (https://getbootstrap.com/)
+  * Copyright 2011-2025 The Bootstrap Authors
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
 
 // scss-docs-start import-stack
-// Configuration
-@import "functions";
-@import "variables";
-@import "variables-dark";
-@import "maps";
-@import "mixins";
-@import "utilities";
+// Global CSS variables, layer definitions, and configuration
+@use "root";
 
-// Layout & components
-@import "root";
-@import "reboot";
-@import "type";
-@import "images";
-@import "containers";
-@import "grid";
-@import "tables";
-@import "forms";
-@import "buttons";
-@import "transitions";
-@import "dropdown";
-@import "button-group";
-@import "nav";
-@import "navbar";
-@import "card";
-@import "accordion";
-@import "breadcrumb";
-@import "pagination";
-@import "badge";
-@import "alert";
-@import "progress";
-@import "list-group";
-@import "close";
-@import "toasts";
-@import "modal";
-@import "tooltip";
-@import "popover";
-@import "carousel";
-@import "spinners";
-@import "offcanvas";
-@import "placeholders";
+// Reboot & Content
+@use "content";
+
+// Layout
+@use "layout";
+
+// Forms
+@use "forms";
+
+// Components
+@use "accordion";
+@use "alert";
+@use "badge";
+@use "breadcrumb";
+@use "buttons";
+@use "button-group";
+@use "card";
+@use "carousel";
+@use "close";
+@use "dropdown";
+@use "list-group";
+@use "modal";
+@use "nav";
+@use "navbar";
+@use "offcanvas";
+@use "pagination";
+@use "placeholders";
+@use "popover";
+@use "progress";
+@use "spinners";
+@use "toasts";
+@use "tooltip";
+@use "transitions";
 
 // Helpers
-@import "helpers";
+@use "helpers";
 
 // Utilities
-@import "utilities/api";
+@use "utilities/api";
 // scss-docs-end import-stack

scss/content/_images.scss

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

scss/content/_prose.scss

@@ -0,0 +1,137 @@
+@use "../config" as *;
+@use "../mixins/transition" as *;
+
+@layer content {
+  .prose {
+    --#{$prefix}content-font-size: 16px;
+    --#{$prefix}content-gap: 24px;
+    --#{$prefix}heading-color: light-dark(var(--bs-gray-900), var(--bs-white));
+
+    position: relative;
+    max-width: 1000px;
+    margin-inline: auto;
+    font-size: var(--#{$prefix}content-font-size);
+    line-height: var(--#{$prefix}content-gap);
+
+    p,
+    ul,
+    ol,
+    dl,
+    pre,
+    table,
+    blockquote {
+      margin-bottom: var(--#{$prefix}content-gap);
+    }
+
+    li:not(:last-child) {
+      margin-bottom: calc(var(--#{$prefix}content-gap) / 4);
+    }
+
+    li ul,
+    li ol {
+      margin-top: calc(var(--#{$prefix}content-gap) / 4);
+    }
+
+    hr {
+      margin: calc(var(--#{$prefix}content-gap) * 1.5) 0;
+      border: 0;
+      border-top: 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-left: calc(var(--#{$prefix}content-gap) / 2);
+      margin: 0;
+      border-left: 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

@@ -0,0 +1,623 @@
+@use "../config" as *;
+@use "../colors" as *;
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "../mixins/border-radius" as *;
+
+// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+
+@layer reboot {
+  // Reboot
+  //
+  // Normalization of HTML elements, manually forked from Normalize.css to remove
+  // styles targeting irrelevant browsers while applying new styles.
+  //
+  // Normalize is licensed MIT. https://github.com/necolas/normalize.css
+
+
+  // Document
+  //
+  // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+
+  // Root
+  //
+  // Ability to the value of the root font sizes, affecting the value of `rem`.
+  // null by default, thus nothing is generated.
+
+  :root {
+    @if $font-size-root != null {
+      @include font-size(var(--#{$prefix}root-font-size));
+    }
+
+    @if $enable-smooth-scroll {
+      @media (prefers-reduced-motion: no-preference) {
+        scroll-behavior: smooth;
+      }
+    }
+  }
+
+
+  // Body
+  //
+  // 1. Remove the margin in all browsers.
+  // 2. As a best practice, apply a default `background-color`.
+  // 3. Prevent adjustments of font size after orientation changes in iOS.
+  // 4. Change the default tap highlight to be completely transparent in iOS.
+
+  // scss-docs-start reboot-body-rules
+  body {
+    margin: 0; // 1
+    font-family: var(--#{$prefix}body-font-family);
+    @include font-size(var(--#{$prefix}body-font-size));
+    font-weight: var(--#{$prefix}body-font-weight);
+    line-height: var(--#{$prefix}body-line-height);
+    color: var(--#{$prefix}body-color);
+    text-align: var(--#{$prefix}body-text-align);
+    background-color: var(--#{$prefix}body-bg); // 2
+    -webkit-text-size-adjust: 100%; // 3
+    -webkit-tap-highlight-color: rgba($black, 0); // 4
+  }
+  // scss-docs-end reboot-body-rules
+
+
+  // Content grouping
+  //
+  // 1. Reset Firefox's gray color
+
+  hr {
+    margin: $hr-margin-y 0;
+    color: $hr-color; // 1
+    border: 0;
+    border-top: $hr-border-width solid $hr-border-color;
+    opacity: $hr-opacity;
+  }
+
+
+  // Typography
+  //
+  // 1. Remove top margins from headings
+  //    By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
+  //    margin for easier control within type scales as it avoids margin collapsing.
+
+  %heading {
+    margin-top: 0; // 1
+    margin-bottom: $headings-margin-bottom;
+    font-family: $headings-font-family;
+    font-style: $headings-font-style;
+    font-weight: $headings-font-weight;
+    line-height: $headings-line-height;
+    color: var(--#{$prefix}heading-color);
+  }
+
+  h1,
+  .h1 {
+    @extend %heading;
+    @include font-size($h1-font-size);
+  }
+
+  h2,
+  .h2 {
+    @extend %heading;
+    @include font-size($h2-font-size);
+  }
+
+  h3,
+  .h3 {
+    @extend %heading;
+    @include font-size($h3-font-size);
+  }
+
+  h4,
+  .h4 {
+    @extend %heading;
+    @include font-size($h4-font-size);
+  }
+
+  h5,
+  .h5 {
+    @extend %heading;
+    @include font-size($h5-font-size);
+  }
+
+  h6,
+  .h6 {
+    @extend %heading;
+    @include font-size($h6-font-size);
+  }
+
+
+  // Reset margins on paragraphs
+  //
+  // Similarly, the top margin on `<p>`s get reset. However, we also reset the
+  // bottom margin to use `rem` units instead of `em`.
+
+  p {
+    margin-top: 0;
+    margin-bottom: $paragraph-margin-bottom;
+  }
+
+
+  // Abbreviations
+  //
+  // 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
+  // 2. Add explicit cursor to indicate changed behavior.
+  // 3. Prevent the text-decoration to be skipped.
+
+  abbr[title] {
+    text-decoration: underline dotted; // 1
+    cursor: help; // 2
+    text-decoration-skip-ink: none; // 3
+  }
+
+
+  // Address
+
+  address {
+    margin-bottom: 1rem;
+    font-style: normal;
+    line-height: inherit;
+  }
+
+
+  // Lists
+
+  ol,
+  ul {
+    padding-left: 2rem;
+  }
+
+  ol,
+  ul,
+  dl {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  ol ol,
+  ul ul,
+  ol ul,
+  ul ol {
+    margin-bottom: 0;
+  }
+
+  dt {
+    font-weight: $dt-font-weight;
+  }
+
+  // 1. Undo browser default
+
+  dd {
+    margin-bottom: .5rem;
+    margin-left: 0; // 1
+  }
+
+
+  // Blockquote
+
+  blockquote {
+    margin: 0 0 1rem;
+  }
+
+
+  // Strong
+  //
+  // Add the correct font weight in Chrome, Edge, and Safari
+
+  b,
+  strong {
+    font-weight: $font-weight-medium;
+  }
+
+
+  // Small
+  //
+  // Add the correct font size in all browsers
+
+  small,
+  .small {
+    @include font-size($small-font-size);
+  }
+
+
+  // Mark
+
+  mark,
+  .mark {
+    padding: $mark-padding;
+    color: var(--#{$prefix}highlight-color);
+    background-color: var(--#{$prefix}highlight-bg);
+  }
+
+
+  // Sub and Sup
+  //
+  // Prevent `sub` and `sup` elements from affecting the line height in
+  // all browsers.
+
+  sub,
+  sup {
+    position: relative;
+    @include font-size($sub-sup-font-size);
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  sub { bottom: -.25em; }
+  sup { top: -.5em; }
+
+
+  // Links
+
+  a {
+    color: var(--#{$prefix}link-color);
+    text-decoration: $link-decoration;
+
+    &:hover {
+      --#{$prefix}link-color: var(--#{$prefix}link-hover-color);
+      text-decoration: $link-hover-decoration;
+    }
+  }
+
+  // And undo these styles for placeholder links/named anchors (without href).
+  // It would be more straightforward to just use a[href] in previous block, but that
+  // causes specificity issues in many other styles that are too complex to fix.
+  // See https://github.com/twbs/bootstrap/issues/19402
+
+  a:not([href]):not([class]) {
+    &,
+    &:hover {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
+
+  // Code
+
+  pre,
+  code,
+  kbd,
+  samp {
+    font-family: $font-family-code;
+    @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
+  }
+
+  // 1. Remove browser default top margin
+  // 2. Reset browser default of `1em` to use `rem`s
+  // 3. Don't allow content to break outside
+
+  pre {
+    display: block;
+    margin-top: 0; // 1
+    margin-bottom: 1rem; // 2
+    overflow: auto; // 3
+    @include font-size($code-font-size);
+    color: $pre-color;
+
+    // Account for some code outputs that place code tags in pre tags
+    code {
+      @include font-size(inherit);
+      color: inherit;
+      word-break: normal;
+    }
+  }
+
+  code {
+    @include font-size($code-font-size);
+    color: var(--#{$prefix}code-color);
+    word-wrap: break-word;
+
+    // Streamline the style when inside anchors to avoid broken underline and more
+    a > & {
+      color: inherit;
+    }
+  }
+
+  kbd {
+    padding: $kbd-padding-y $kbd-padding-x;
+    @include font-size($kbd-font-size);
+    color: $kbd-color;
+    background-color: $kbd-bg;
+    @include border-radius($border-radius-sm);
+
+    kbd {
+      padding: 0;
+      @include font-size(1em);
+      font-weight: $nested-kbd-font-weight;
+    }
+  }
+
+
+  // Figures
+  //
+  // Apply a consistent margin strategy (matches our type styles).
+
+  figure {
+    margin: 0 0 1rem;
+  }
+
+
+  // Images and content
+
+  img,
+  svg {
+    vertical-align: middle;
+  }
+
+
+  // Tables
+  //
+  // Prevent double borders
+
+  table {
+    caption-side: bottom;
+    border-collapse: collapse;
+  }
+
+  caption {
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    color: var(--#{$prefix}secondary-color);
+    text-align: left;
+  }
+
+  // 1. Matches default `<td>` alignment by inheriting `text-align`.
+  // 2. Fix alignment for Safari
+
+  th {
+    text-align: inherit; // 1
+    text-align: -webkit-match-parent; // 2
+  }
+
+  thead,
+  tbody,
+  tfoot,
+  tr,
+  td,
+  th {
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+  }
+
+
+  // Forms
+  //
+  // 1. Allow labels to use `margin` for spacing.
+
+  label {
+    display: inline-block; // 1
+  }
+
+  // Remove the default `border-radius` that macOS Chrome adds.
+  // See https://github.com/twbs/bootstrap/issues/24093
+
+  button {
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: 0;
+  }
+
+  // Explicitly remove focus outline in Chromium when it shouldn't be
+  // visible (e.g. as result of mouse click or touch tap). It already
+  // should be doing this automatically, but seems to currently be
+  // confused and applies its very visible two-tone outline anyway.
+
+  button:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  // 1. Remove the margin in Firefox and Safari
+
+  input,
+  button,
+  select,
+  optgroup,
+  textarea {
+    margin: 0; // 1
+    font-family: inherit;
+    @include font-size(inherit);
+    line-height: inherit;
+  }
+
+  // Remove the inheritance of text transform in Firefox
+  button,
+  select {
+    text-transform: none;
+  }
+  // Set the cursor for non-`<button>` buttons
+  //
+  // Details at https://github.com/twbs/bootstrap/pull/30562
+  [role="button"] {
+    cursor: pointer;
+  }
+
+  select {
+    // Remove the inheritance of word-wrap in Safari.
+    // See https://github.com/twbs/bootstrap/issues/24990
+    word-wrap: normal;
+
+    // Undo the opacity change from Chrome
+    &:disabled {
+      opacity: 1;
+    }
+  }
+
+  // Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
+  // See https://stackoverflow.com/a/54997118
+
+  [list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
+    display: none !important;
+  }
+
+  // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`  //    controls in Android 4.
+  // 2. Correct the inability to style clickable types in iOS and Safari.
+  // 3. Opinionated: add "hand" cursor to non-disabled button elements.
+
+  button,
+  [type="button"], // 1
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button; // 2
+
+    @if $enable-button-pointers {
+      &:not(:disabled) {
+        cursor: pointer; // 3
+      }
+    }
+  }
+
+  // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+
+  ::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+
+  // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
+
+  textarea {
+    resize: vertical; // 1
+  }
+
+  // 1. Browsers set a default `min-width: min-content;` on fieldsets,
+  //    unlike e.g. `<div>`s, which have `min-width: 0;` by default.
+  //    So we reset that to ensure fieldsets behave more like a standard block element.
+  //    See https://github.com/twbs/bootstrap/issues/12359
+  //    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+  // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
+
+  fieldset {
+    min-width: 0; // 1
+    padding: 0; // 2
+    margin: 0; // 2
+    border: 0; // 2
+  }
+
+  // 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: left; // 1
+    width: 100%;
+    padding: 0;
+    margin-bottom: $legend-margin-bottom;
+    font-weight: $legend-font-weight;
+    line-height: inherit;
+    @include font-size($legend-font-size);
+
+    + * {
+      clear: left; // 2
+    }
+  }
+
+  // Fix height of inputs with a type of datetime-local, date, month, week, or time
+  // See https://github.com/twbs/bootstrap/issues/18842
+
+  ::-webkit-datetime-edit-fields-wrapper,
+  ::-webkit-datetime-edit-text,
+  ::-webkit-datetime-edit-minute,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-year-field {
+    padding: 0;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  // 1. This overrides the extra rounded corners on search inputs in iOS so that our
+  //    `.form-control` class can properly style them. Note that this cannot simply
+  //    be added to `.form-control` as it's not specific enough. For details, see
+  //    https://github.com/twbs/bootstrap/issues/11586.
+  // 2. Correct the outline style in Safari.
+
+  [type="search"] {
+    -webkit-appearance: textfield; // 1
+    outline-offset: -2px; // 2
+  }
+
+  // 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.
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  // Remove padding around color pickers in webkit browsers
+
+  ::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+
+  // 1. Inherit font family and line height for file input buttons
+  // 2. Correct the inability to style clickable types in iOS and Safari.
+
+  ::file-selector-button {
+    font: inherit; // 1
+    -webkit-appearance: button; // 2
+  }
+
+  // Correct element displays
+
+  output {
+    display: inline-block;
+  }
+
+  // Remove border from iframe
+
+  iframe {
+    border: 0;
+  }
+
+  // Summary
+  //
+  // 1. Add the correct display in all browsers
+
+  summary {
+    display: list-item; // 1
+    cursor: pointer;
+  }
+
+
+  // Progress
+  //
+  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+
+  progress {
+    vertical-align: baseline;
+  }
+
+
+  // Hidden attribute
+  //
+  // Always hide an element with the `hidden` HTML attribute.
+
+  [hidden] {
+    display: none !important;
+  }
+}

scss/content/_tables.scss

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

scss/content/_type.scss

@@ -0,0 +1,114 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../mixins/lists" as *;
+@use "../vendor/rfs" as *;
+
+@layer content {
+  //
+  // Headings
+  //
+  // mdo-do: remove extend
+  // .h1 {
+  //   @extend h1;
+  // }
+
+  // .h2 {
+  //   @extend h2;
+  // }
+
+  // .h3 {
+  //   @extend h3;
+  // }
+
+  // .h4 {
+  //   @extend h4;
+  // }
+
+  // .h5 {
+  //   @extend h5;
+  // }
+
+  // .h6 {
+  //   @extend h6;
+  // }
+
+
+  .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);
+    }
+  }
+
+  //
+  // Emphasis
+  //
+  // .small {
+  //   @extend small;
+  // }
+
+  // .mark {
+  //   @extend mark;
+  // }
+
+  //
+  // Lists
+  //
+
+  .list-unstyled {
+    @include list-unstyled();
+  }
+
+  // Inline turns list items into inline-block
+  .list-inline {
+    @include list-unstyled();
+  }
+  .list-inline-item {
+    display: inline-block;
+
+    &:not(:last-child) {
+      margin-right: $list-inline-padding;
+    }
+  }
+
+
+  //
+  // Misc
+  //
+
+  // Builds on `abbr`
+  .initialism {
+    @include font-size($initialism-font-size);
+    text-transform: uppercase;
+  }
+
+  // Blockquotes
+  .blockquote {
+    margin-bottom: $blockquote-margin-y;
+    @include font-size($blockquote-font-size);
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .blockquote-footer {
+    margin-top: -$blockquote-margin-y;
+    margin-bottom: $blockquote-margin-y;
+    @include font-size($blockquote-footer-font-size);
+    color: $blockquote-footer-color;
+
+    &::before {
+      content: "\2014\00A0"; // em dash, nbsp
+    }
+  }
+}

scss/content/index.scss

@@ -0,0 +1,5 @@
+@forward "reboot";
+@forward "type";
+@forward "tables";
+@forward "images";
+@forward "prose";

scss/forms/_floating-labels.scss

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

scss/forms/_form-check.scss

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

scss/forms/_form-control.scss

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

scss/forms/_form-range.scss

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

scss/forms/_form-select.scss

@@ -1,80 +1,85 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/color-mode" as *;
+@use "../mixins/focus-ring" as *;
+@use "../mixins/transition" as *;
+
 // Select
 //
 // Replaces the browser default select with a custom one, mostly pulled from
 // https://primer.github.io/.
 
-.form-select {
-  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+@layer forms {
+  .form-select {
+    --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
 
-  display: block;
-  width: 100%;
-  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
-  font-family: $form-select-font-family;
-  @include font-size($form-select-font-size);
-  font-weight: $form-select-font-weight;
-  line-height: $form-select-line-height;
-  color: $form-select-color;
-  appearance: none;
-  background-color: $form-select-bg;
-  background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
-  background-repeat: no-repeat;
-  background-position: $form-select-bg-position;
-  background-size: $form-select-bg-size;
-  border: $form-select-border-width solid $form-select-border-color;
-  @include border-radius($form-select-border-radius, 0);
-  @include box-shadow($form-select-box-shadow);
-  @include transition($form-select-transition);
+    display: block;
+    width: 100%;
+    padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
+    font-family: $form-select-font-family;
+    @include font-size($form-select-font-size);
+    font-weight: $form-select-font-weight;
+    line-height: $form-select-line-height;
+    color: $form-select-color;
+    appearance: none;
+    background-color: $form-select-bg;
+    background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
+    background-repeat: no-repeat;
+    background-position: $form-select-bg-position;
+    background-size: $form-select-bg-size;
+    border: $form-select-border-width solid $form-select-border-color;
+    @include border-radius(var(--#{$prefix}border-radius), 0);
+    @include box-shadow($form-select-box-shadow);
+    @include transition($form-select-transition);
 
-  &:focus {
-    border-color: $form-select-focus-border-color;
-    outline: 0;
-    @if $enable-shadows {
-      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $form-select-focus-box-shadow;
+    &:focus {
+      border-color: $form-select-focus-border-color;
+      @include focus-ring($offset: true);
+    }
+
+    &[multiple],
+    &[size]:not([size="1"]) {
+      padding-right: $form-select-padding-x;
+      background-image: none;
+    }
+
+    &:disabled {
+      color: $form-select-disabled-color;
+      background-color: $form-select-disabled-bg;
+      border-color: $form-select-disabled-border-color;
+    }
+
+    // Remove outline from select box in FF
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 $form-select-color;
     }
   }
 
-  &[multiple],
-  &[size]:not([size="1"]) {
-    padding-right: $form-select-padding-x;
-    background-image: none;
+  .form-select-sm {
+    padding-top: $form-select-padding-y-sm;
+    padding-bottom: $form-select-padding-y-sm;
+    padding-left: $form-select-padding-x-sm;
+    @include font-size($form-select-font-size-sm);
+    @include border-radius(var(--#{$prefix}border-radius-sm));
   }
 
-  &:disabled {
-    color: $form-select-disabled-color;
-    background-color: $form-select-disabled-bg;
-    border-color: $form-select-disabled-border-color;
+  .form-select-lg {
+    padding-top: $form-select-padding-y-lg;
+    padding-bottom: $form-select-padding-y-lg;
+    padding-left: $form-select-padding-x-lg;
+    @include font-size($form-select-font-size-lg);
+    @include border-radius(var(--#{$prefix}border-radius-lg));
   }
 
-  // Remove outline from select box in FF
-  &:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 $form-select-color;
-  }
-}
-
-.form-select-sm {
-  padding-top: $form-select-padding-y-sm;
-  padding-bottom: $form-select-padding-y-sm;
-  padding-left: $form-select-padding-x-sm;
-  @include font-size($form-select-font-size-sm);
-  @include border-radius($form-select-border-radius-sm);
-}
-
-.form-select-lg {
-  padding-top: $form-select-padding-y-lg;
-  padding-bottom: $form-select-padding-y-lg;
-  padding-left: $form-select-padding-x-lg;
-  @include font-size($form-select-font-size-lg);
-  @include border-radius($form-select-border-radius-lg);
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .form-select {
-      --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      .form-select {
+        --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+      }
     }
   }
 }

scss/forms/_form-text.scss

@@ -1,11 +1,16 @@
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+
 //
 // Form text
 //
 
-.form-text {
-  margin-top: $form-text-margin-top;
-  @include font-size($form-text-font-size);
-  font-style: $form-text-font-style;
-  font-weight: $form-text-font-weight;
-  color: $form-text-color;
+@layer forms {
+  .form-text {
+    margin-top: $form-text-margin-top;
+    @include font-size($form-text-font-size);
+    font-style: $form-text-font-style;
+    font-weight: $form-text-font-weight;
+    color: $form-text-color;
+  }
 }

scss/forms/_input-group.scss

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

scss/forms/_labels.scss

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

scss/forms/_validation.scss

@@ -1,3 +1,9 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+
 // Form validation
 //
 // Provide feedback to users when form field values are valid or invalid. Works
@@ -5,8 +11,175 @@
 // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
 // server-side validation.
 
-// scss-docs-start form-validation-states-loop
-@each $state, $data in $form-validation-states {
-  @include form-validation-state($state, $data...);
+// This mixin uses an `if()` technique to be compatible with Dart Sass
+// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
+
+@layer forms {
+  // scss-docs-start form-validation-mixins
+  @mixin form-validation-state-selector($state) {
+    @if ($state == "valid" or $state == "invalid") {
+      .was-validated #{if(&, "&", "")}:#{$state},
+      #{if(&, "&", "")}.is-#{$state} {
+        @content;
+      }
+    } @else {
+      #{if(&, "&", "")}.is-#{$state} {
+        @content;
+      }
+    }
+  }
+
+  @mixin form-validation-state(
+    $state,
+    $color,
+    $icon,
+    $tooltip-color: color-contrast($color),
+    $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
+    $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
+    $border-color: $color
+  ) {
+    .#{$state}-feedback {
+      display: none;
+      width: 100%;
+      margin-top: $form-feedback-margin-top;
+      @include font-size($form-feedback-font-size);
+      font-style: $form-feedback-font-style;
+      color: $color;
+    }
+
+    .#{$state}-tooltip {
+      position: absolute;
+      top: 100%;
+      z-index: 5;
+      display: none;
+      max-width: 100%; // Contain to parent when possible
+      padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+      margin-top: .1rem;
+      @include font-size($form-feedback-tooltip-font-size);
+      line-height: $form-feedback-tooltip-line-height;
+      color: $tooltip-color;
+      background-color: $tooltip-bg-color;
+      @include border-radius($form-feedback-tooltip-border-radius);
+    }
+
+    @include form-validation-state-selector($state) {
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+
+    .form-control {
+      @include form-validation-state-selector($state) {
+        border-color: $border-color;
+
+        @if $enable-validation-icons {
+          padding-right: $input-height-inner;
+          background-image: escape-svg($icon);
+          background-repeat: no-repeat;
+          background-position: right $input-height-inner-quarter center;
+          background-size: $input-height-inner-half $input-height-inner-half;
+        }
+
+        &:focus {
+          border-color: $border-color;
+          @if $enable-shadows {
+            @include box-shadow($input-box-shadow, $focus-box-shadow);
+          } @else {
+            // Avoid using mixin so we can pass custom focus shadow properly
+            box-shadow: $focus-box-shadow;
+          }
+        }
+      }
+    }
+
+    // stylelint-disable-next-line selector-no-qualifying-type
+    textarea.form-control {
+      @include form-validation-state-selector($state) {
+        @if $enable-validation-icons {
+          padding-right: $input-height-inner;
+          background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+        }
+      }
+    }
+
+    .form-select {
+      @include form-validation-state-selector($state) {
+        border-color: $border-color;
+
+        @if $enable-validation-icons {
+          &:not([multiple]):not([size]),
+          &:not([multiple])[size="1"] {
+            --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
+            padding-right: $form-select-feedback-icon-padding-end;
+            background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+            background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+          }
+        }
+
+        &:focus {
+          border-color: $border-color;
+          @if $enable-shadows {
+            @include box-shadow($form-select-box-shadow, $focus-box-shadow);
+          } @else {
+            // Avoid using mixin so we can pass custom focus shadow properly
+            box-shadow: $focus-box-shadow;
+          }
+        }
+      }
+    }
+
+    .form-control-color {
+      @include form-validation-state-selector($state) {
+        @if $enable-validation-icons {
+          width: calc($form-color-width + $input-height-inner);
+        }
+      }
+    }
+
+    .form-check-input {
+      @include form-validation-state-selector($state) {
+        border-color: $border-color;
+
+        &:checked {
+          background-color: $color;
+        }
+
+        &:focus {
+          box-shadow: $focus-box-shadow;
+        }
+
+        ~ .form-check-label {
+          color: $color;
+        }
+      }
+    }
+    .form-check-inline .form-check-input {
+      ~ .#{$state}-feedback {
+        margin-left: .5em;
+      }
+    }
+
+    .input-group {
+      > .form-control:not(:focus),
+      > .form-select:not(:focus),
+      > .form-floating:not(:focus-within) {
+        @include form-validation-state-selector($state) {
+          @if $state == "valid" {
+            z-index: 3;
+          } @else if $state == "invalid" {
+            z-index: 4;
+          }
+        }
+      }
+    }
+  }
+  // scss-docs-end form-validation-mixins
+
+
+  // scss-docs-start form-validation-states-loop
+  @each $state, $data in $form-validation-states {
+    @include form-validation-state($state, $data...);
+  }
+  // scss-docs-end form-validation-states-loop
 }
-// scss-docs-end form-validation-states-loop

scss/forms/index.scss

@@ -0,0 +1,9 @@
+@forward "labels";
+@forward "form-text";
+@forward "form-control";
+@forward "form-select";
+@forward "form-check";
+@forward "form-range";
+@forward "floating-labels";
+@forward "input-group";
+@forward "validation";

scss/helpers/_clearfix.scss

@@ -1,3 +0,0 @@
-.clearfix {
-  @include clearfix();
-}

scss/helpers/_color-bg.scss

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

scss/helpers/_colored-links.scss

@@ -1,30 +1,37 @@
+@use "../config" as *;
+@use "../colors" as *;
+@use "../variables" as *;
+
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
-@each $color, $value in $theme-colors {
-  .link-#{$color} {
-    color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-    text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+@layer helpers {
+  @each $color, $value in $theme-colors {
+    .link-#{$color} {
+      --#{$prefix}link-color: var(--#{$prefix}#{$color});
+      // color: var(--#{$prefix}#{$color});
+      text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity));
+
+      // @if $link-shade-percentage != 0 {
+      //   &:hover,
+      //   &:focus {
+      //     $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+      //     color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
+      //     text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
+      //   }
+      // }
+    }
+  }
+
+  // One-off special link helper as a bridge until v6
+  .link-body-emphasis {
+    color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity));
+    text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity));
 
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
-        $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
-        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+        color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity, .75));
+        text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity, .75));
       }
     }
   }
 }
-
-// One-off special link helper as a bridge until v6
-.link-body-emphasis {
-  color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-  text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
-
-  @if $link-shade-percentage != 0 {
-    &:hover,
-    &:focus {
-      color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
-      text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
-    }
-  }
-}

scss/helpers/_focus-ring.scss

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

scss/helpers/_icon-link.scss

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