diff --git a/core/js/src/bootstrap.js b/core/js/src/bootstrap.js
index 531c212dd..4bd9214b8 100644
--- a/core/js/src/bootstrap.js
+++ b/core/js/src/bootstrap.js
@@ -1,20 +1,7 @@
 export * as Popper from '@popperjs/core'
 
 // Export all Bootstrap components directly for consistent usage
-export {
-  Alert,
-  Button,
-  Carousel,
-  Collapse,
-  Dropdown,
-  Modal,
-  Offcanvas,
-  Popover,
-  ScrollSpy,
-  Tab,
-  Toast,
-  Tooltip
-} from 'bootstrap'
+export { Alert, Button, Carousel, Collapse, Dropdown, Modal, Offcanvas, Popover, ScrollSpy, Tab, Toast, Tooltip } from 'bootstrap'
 
 // Re-export everything as namespace for backward compatibility
 export * as bootstrap from 'bootstrap'
diff --git a/core/scss/_utilities.scss b/core/scss/_utilities.scss
index 55c09bfc3..71dfeff5f 100644
--- a/core/scss/_utilities.scss
+++ b/core/scss/_utilities.scss
@@ -16,367 +16,382 @@ $utilities-border-colors: map-loop(
   'border'
 ) !default;
 
-//Utilities
-$utilities: (
-  'align': (
-    property: vertical-align,
-    class: align,
-    values: baseline top middle bottom text-bottom text-top,
-  ),
-  'float': (
-    responsive: true,
-    property: float,
-    values: (
-      start: left,
-      end: right,
-      none: none,
+// Utilities
+
+$utilities: () !default;
+
+$utilities: map-merge(
+  (
+    'align': (
+      property: vertical-align,
+      class: align,
+      values: baseline top middle bottom text-bottom text-top,
     ),
-  ),
-  // Object Fit utilities
-  'object-fit': (
+    'float': (
       responsive: true,
+      property: float,
+      values: (
+        start: left,
+        end: right,
+        none: none,
+      ),
+    ),
+    // Object Fit utilities
+    'object-fit': (
+        responsive: true,
+        property: object-fit,
+        values: (
+          contain: contain,
+          cover: cover,
+          fill: fill,
+          scale: scale-down,
+          none: none,
+        ),
+      ),
+    // Opacity utilities
+    'opacity': (
+        property: opacity,
+        values: (
+          0: 0,
+          25: 0.25,
+          50: 0.5,
+          75: 0.75,
+          100: 1,
+        ),
+      ),
+    'overflow': (
+      property: overflow,
+      values: auto hidden visible scroll,
+    ),
+    'overflow-x': (
+      property: overflow-x,
+      values: auto hidden visible scroll,
+    ),
+    'overflow-y': (
+      property: overflow-y,
+      values: auto hidden visible scroll,
+    ),
+    'display': (
+      responsive: true,
+      print: true,
+      property: display,
+      class: d,
+      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none,
+    ),
+    'shadow': (
+      property: box-shadow,
+      class: shadow,
+      values: (
+        null: var(--#{$prefix}box-shadow),
+        sm: var(--#{$prefix}box-shadow-sm),
+        lg: var(--#{$prefix}box-shadow-lg),
+        none: none,
+      ),
+    ),
+    'focus-ring': (
+      css-var: true,
+      css-variable-name: focus-ring-color,
+      class: focus-ring,
+      values: map-loop($theme-colors-rgb, rgba-css-var, '$key', 'focus-ring'),
+    ),
+    'position': (
+      property: position,
+      values: static relative absolute fixed sticky,
+    ),
+    'top': (
+      property: top,
+      values: $position-values,
+    ),
+    'bottom': (
+      property: bottom,
+      values: $position-values,
+    ),
+    'start': (
+      property: left,
+      class: start,
+      values: $position-values,
+    ),
+    'end': (
+      property: right,
+      class: end,
+      values: $position-values,
+    ),
+    'translate-middle': (
+      property: transform,
+      class: translate-middle,
+      values: (
+        null: translate(-50%, -50%),
+        x: translateX(-50%),
+        y: translateY(-50%),
+      ),
+    ),
+    'object': (
       property: object-fit,
+      class: object,
       values: (
         contain: contain,
         cover: cover,
         fill: fill,
-        scale: scale-down,
+        scale-down: scale-down,
         none: none,
       ),
     ),
-  // Opacity utilities
-  'opacity': (
-      property: opacity,
+    'cursor': (
+      property: cursor,
+      class: cursor,
       values: (
-        0: 0,
+        auto: auto,
+        pointer: pointer,
+        move: move,
+        not-allowed: not-allowed,
+        zoom-in: zoom-in,
+        zoom-out: zoom-out,
+        default: default,
+        none: none,
+        help: help,
+        progress: progress,
+        wait: wait,
+        text: text,
+        v-text: vertical-text,
+        grab: grab,
+        grabbing: grabbing,
+        crosshair: crosshair,
+      ),
+    ),
+    'border': (
+      property: border,
+      values: $border-values,
+    ),
+    'border-top': (
+      property: border-top,
+      values: $border-values,
+    ),
+    'border-end': (
+      class: border-end,
+      property: border-inline-end,
+      values: $border-values,
+    ),
+    'border-bottom': (
+      property: border-bottom,
+      values: $border-values,
+    ),
+    'border-start': (
+      class: border-start,
+      property: border-inline-start,
+      values: $border-values,
+    ),
+    'border-x': (
+      class: border-x,
+      property: border-inline-start border-inline-end,
+      values: $border-values,
+    ),
+    'border-y': (
+      class: border-y,
+      property: border-top border-bottom,
+      values: $border-values,
+    ),
+    'border-color': (
+      property: border-color,
+      class: border,
+      local-vars: (
+        'border-opacity': 1,
+      ),
+      values: $utilities-border-colors,
+    ),
+    '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,
+      values: (
+        10: 0.1,
         25: 0.25,
         50: 0.5,
         75: 0.75,
         100: 1,
       ),
     ),
-  'overflow': (
-    property: overflow,
-    values: auto hidden visible scroll,
-  ),
-  'overflow-x': (
-    property: overflow-x,
-    values: auto hidden visible scroll,
-  ),
-  'overflow-y': (
-    property: overflow-y,
-    values: auto hidden visible scroll,
-  ),
-  'display': (
-    responsive: true,
-    print: true,
-    property: display,
-    class: d,
-    values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none,
-  ),
-  'shadow': (
-    property: box-shadow,
-    class: shadow,
-    values: (
-      null: var(--#{$prefix}box-shadow),
-      sm: var(--#{$prefix}box-shadow-sm),
-      lg: var(--#{$prefix}box-shadow-lg),
-      none: none,
+    'width': (
+      property: width,
+      class: w,
+      values: $size-values,
     ),
-  ),
-  'focus-ring': (
-    css-var: true,
-    css-variable-name: focus-ring-color,
-    class: focus-ring,
-    values: map-loop($theme-colors-rgb, rgba-css-var, '$key', 'focus-ring'),
-  ),
-  'position': (
-    property: position,
-    values: static relative absolute fixed sticky,
-  ),
-  'top': (
-    property: top,
-    values: $position-values,
-  ),
-  'bottom': (
-    property: bottom,
-    values: $position-values,
-  ),
-  'start': (
-    property: left,
-    class: start,
-    values: $position-values,
-  ),
-  'end': (
-    property: right,
-    class: end,
-    values: $position-values,
-  ),
-  'translate-middle': (
-    property: transform,
-    class: translate-middle,
-    values: (
-      null: translate(-50%, -50%),
-      x: translateX(-50%),
-      y: translateY(-50%),
-    ),
-  ),
-  'object': (
-    property: object-fit,
-    class: object,
-    values: (
-      contain: contain,
-      cover: cover,
-      fill: fill,
-      scale-down: scale-down,
-      none: none,
-    ),
-  ),
-  'cursor': (
-    property: cursor,
-    class: cursor,
-    values: (
-      auto: auto,
-      pointer: pointer,
-      move: move,
-      not-allowed: not-allowed,
-      zoom-in: zoom-in,
-      zoom-out: zoom-out,
-      default: default,
-      none: none,
-      help: help,
-      progress: progress,
-      wait: wait,
-      text: text,
-      v-text: vertical-text,
-      grab: grab,
-      grabbing: grabbing,
-      crosshair: crosshair,
-    ),
-  ),
-  'border': (
-    property: border,
-    values: $border-values,
-  ),
-  'border-top': (
-    property: border-top,
-    values: $border-values,
-  ),
-  'border-end': (
-    class: border-end,
-    property: border-inline-end,
-    values: $border-values,
-  ),
-  'border-bottom': (
-    property: border-bottom,
-    values: $border-values,
-  ),
-  'border-start': (
-    class: border-start,
-    property: border-inline-start,
-    values: $border-values,
-  ),
-  'border-x': (
-    class: border-x,
-    property: border-inline-start border-inline-end,
-    values: $border-values,
-  ),
-  'border-y': (
-    class: border-y,
-    property: border-top border-bottom,
-    values: $border-values,
-  ),
-  'border-color': (
-    property: border-color,
-    class: border,
-    local-vars: (
-      'border-opacity': 1,
-    ),
-    values: $utilities-border-colors,
-  ),
-  '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,
-    values: (
-      10: 0.1,
-      25: 0.25,
-      50: 0.5,
-      75: 0.75,
-      100: 1,
-    ),
-  ),
-  'width': (
-    property: width,
-    class: w,
-    values: $size-values,
-  ),
-  'max-width': (
-    property: max-width,
-    class: mw,
-    values: (
-      100: 100%,
-    ),
-  ),
-  'viewport-width': (
-    property: width,
-    class: vw,
-    values: (
-      100: 100vw,
-    ),
-  ),
-  'min-viewport-width': (
-    property: min-width,
-    class: min-vw,
-    values: (
-      100: 100vw,
-    ),
-  ),
-  'height': (
-    property: height,
-    class: h,
-    values: $size-values,
-  ),
-  'max-height': (
-    property: max-height,
-    class: mh,
-    values: (
-      100: 100%,
-    ),
-  ),
-  'viewport-height': (
-    property: height,
-    class: vh,
-    values: (
-      100: 100vh,
-    ),
-  ),
-  'min-viewport-height': (
-    property: min-height,
-    class: min-vh,
-    values: (
-      100: 100vh,
-    ),
-  ),
-  'columns': (
-    property: columns,
-    class: columns,
-    responsive: true,
-    values: 2 3 4,
-  ),
-  // Flex utilities
-  'flex': (
-      responsive: true,
-      property: flex,
+    'max-width': (
+      property: max-width,
+      class: mw,
       values: (
-        fill: 1 1 auto,
+        100: 100%,
       ),
     ),
-  'flex-direction': (
-    responsive: true,
-    property: flex-direction,
-    class: flex,
-    values: row column row-reverse column-reverse,
-  ),
-  'flex-grow': (
-    responsive: true,
-    property: flex-grow,
-    class: flex,
-    values: (
-      grow-0: 0,
-      grow-1: 1,
+    'viewport-width': (
+      property: width,
+      class: vw,
+      values: (
+        100: 100vw,
+      ),
     ),
-  ),
-  'flex-shrink': (
-    responsive: true,
-    property: flex-shrink,
-    class: flex,
-    values: (
-      shrink-0: 0,
-      shrink-1: 1,
+    'min-viewport-width': (
+      property: min-width,
+      class: min-vw,
+      values: (
+        100: 100vw,
+      ),
     ),
-  ),
-  'flex-wrap': (
-    responsive: true,
-    property: flex-wrap,
-    class: flex,
-    values: wrap nowrap wrap-reverse,
-  ),
-  'justify-content': (
-    responsive: true,
-    property: justify-content,
-    values: (
-      start: flex-start,
-      end: flex-end,
-      center: center,
-      between: space-between,
-      around: space-around,
-      evenly: space-evenly,
+    'height': (
+      property: height,
+      class: h,
+      values: $size-values,
     ),
-  ),
-  'align-items': (
-    responsive: true,
-    property: align-items,
-    values: (
-      start: flex-start,
-      end: flex-end,
-      center: center,
-      baseline: baseline,
-      stretch: stretch,
+    'max-height': (
+      property: max-height,
+      class: mh,
+      values: (
+        100: 100%,
+      ),
     ),
-  ),
-  'align-content': (
-    responsive: true,
-    property: align-content,
-    values: (
-      start: flex-start,
-      end: flex-end,
-      center: center,
-      between: space-between,
-      around: space-around,
-      stretch: stretch,
+    'viewport-height': (
+      property: height,
+      class: vh,
+      values: (
+        100: 100vh,
+      ),
     ),
-  ),
-  'align-self': (
-    responsive: true,
-    property: align-self,
-    values: (
-      auto: auto,
-      start: flex-start,
-      end: flex-end,
-      center: center,
-      baseline: baseline,
-      stretch: stretch,
+    'min-viewport-height': (
+      property: min-height,
+      class: min-vh,
+      values: (
+        100: 100vh,
+      ),
     ),
-  ),
-  'order': (
-    responsive: true,
-    property: order,
-    values: (
-      first: -1,
-      0: 0,
-      1: 1,
-      2: 2,
-      3: 3,
-      4: 4,
-      5: 5,
-      last: 6,
-    ),
-  ),
-  // Margin utilities
-  'margin': (
+    'columns': (
+      property: columns,
+      class: columns,
       responsive: true,
-      property: margin,
-      class: m,
+      values: 2 3 4,
+    ),
+    // Flex utilities
+    'flex': (
+        responsive: true,
+        property: flex,
+        values: (
+          fill: 1 1 auto,
+        ),
+      ),
+    'flex-direction': (
+      responsive: true,
+      property: flex-direction,
+      class: flex,
+      values: row column row-reverse column-reverse,
+    ),
+    'flex-grow': (
+      responsive: true,
+      property: flex-grow,
+      class: flex,
+      values: (
+        grow-0: 0,
+        grow-1: 1,
+      ),
+    ),
+    'flex-shrink': (
+      responsive: true,
+      property: flex-shrink,
+      class: flex,
+      values: (
+        shrink-0: 0,
+        shrink-1: 1,
+      ),
+    ),
+    'flex-wrap': (
+      responsive: true,
+      property: flex-wrap,
+      class: flex,
+      values: wrap nowrap wrap-reverse,
+    ),
+    'justify-content': (
+      responsive: true,
+      property: justify-content,
+      values: (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        between: space-between,
+        around: space-around,
+        evenly: space-evenly,
+      ),
+    ),
+    'align-items': (
+      responsive: true,
+      property: align-items,
+      values: (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        baseline: baseline,
+        stretch: stretch,
+      ),
+    ),
+    'align-content': (
+      responsive: true,
+      property: align-content,
+      values: (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        between: space-between,
+        around: space-around,
+        stretch: stretch,
+      ),
+    ),
+    'align-self': (
+      responsive: true,
+      property: align-self,
+      values: (
+        auto: auto,
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        baseline: baseline,
+        stretch: stretch,
+      ),
+    ),
+    'order': (
+      responsive: true,
+      property: order,
+      values: (
+        first: -1,
+        0: 0,
+        1: 1,
+        2: 2,
+        3: 3,
+        4: 4,
+        5: 5,
+        last: 6,
+      ),
+    ),
+    // Margin utilities
+    'margin': (
+        responsive: true,
+        property: margin,
+        class: m,
+        values: map.merge(
+            $spacers,
+            (
+              auto: auto,
+            )
+          ),
+      ),
+    'margin-x': (
+      responsive: true,
+      property: margin-right margin-left,
+      class: mx,
       values: map.merge(
           $spacers,
           (
@@ -384,514 +399,505 @@ $utilities: (
           )
         ),
     ),
-  'margin-x': (
-    responsive: true,
-    property: margin-right margin-left,
-    class: mx,
-    values: map.merge(
-        $spacers,
-        (
-          auto: auto,
-        )
-      ),
-  ),
-  'margin-y': (
-    responsive: true,
-    property: margin-top margin-bottom,
-    class: my,
-    values: map.merge(
-        $spacers,
-        (
-          auto: auto,
-        )
-      ),
-  ),
-  'margin-top': (
-    responsive: true,
-    property: margin-top,
-    class: mt,
-    values: map.merge(
-        $spacers,
-        (
-          auto: auto,
-        )
-      ),
-  ),
-  'margin-end': (
-    responsive: true,
-    property: margin-right,
-    class: me,
-    values: map.merge(
-        $spacers,
-        (
-          auto: auto,
-        )
-      ),
-  ),
-  'margin-bottom': (
-    responsive: true,
-    property: margin-bottom,
-    class: mb,
-    values: map.merge(
-        $spacers,
-        (
-          auto: auto,
-        )
-      ),
-  ),
-  'margin-start': (
-    responsive: true,
-    property: margin-left,
-    class: ms,
-    values: map.merge(
-        $spacers,
-        (
-          auto: auto,
-        )
-      ),
-  ),
-  // Negative margin utilities
-  'negative-margin': (
+    'margin-y': (
       responsive: true,
-      property: margin,
-      class: m,
+      property: margin-top margin-bottom,
+      class: my,
+      values: map.merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
+    ),
+    'margin-top': (
+      responsive: true,
+      property: margin-top,
+      class: mt,
+      values: map.merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
+    ),
+    'margin-end': (
+      responsive: true,
+      property: margin-right,
+      class: me,
+      values: map.merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
+    ),
+    'margin-bottom': (
+      responsive: true,
+      property: margin-bottom,
+      class: mb,
+      values: map.merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
+    ),
+    'margin-start': (
+      responsive: true,
+      property: margin-left,
+      class: ms,
+      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-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': (
+    'negative-margin-y': (
       responsive: true,
-      property: padding,
-      class: p,
+      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,
+        property: padding,
+        class: p,
+        values: $spacers,
+      ),
+    'padding-x': (
+      responsive: true,
+      property: padding-right padding-left,
+      class: px,
       values: $spacers,
     ),
-  'padding-x': (
-    responsive: true,
-    property: padding-right padding-left,
-    class: px,
-    values: $spacers,
-  ),
-  'padding-y': (
-    responsive: true,
-    property: padding-top padding-bottom,
-    class: py,
-    values: $spacers,
-  ),
-  'padding-top': (
-    responsive: true,
-    property: padding-top,
-    class: pt,
-    values: $spacers,
-  ),
-  'padding-end': (
-    responsive: true,
-    property: padding-right,
-    class: pe,
-    values: $spacers,
-  ),
-  'padding-bottom': (
-    responsive: true,
-    property: padding-bottom,
-    class: pb,
-    values: $spacers,
-  ),
-  'padding-start': (
-    responsive: true,
-    property: padding-left,
-    class: ps,
-    values: $spacers,
-  ),
-  // Gap utility
-  'gap': (
+    'padding-y': (
       responsive: true,
-      property: gap,
-      class: gap,
+      property: padding-top padding-bottom,
+      class: py,
       values: $spacers,
     ),
-  'row-gap': (
-    responsive: true,
-    property: row-gap,
-    class: row-gap,
-    values: $spacers,
-  ),
-  'column-gap': (
-    responsive: true,
-    property: column-gap,
-    class: column-gap,
-    values: $spacers,
-  ),
-  'bg-pattern': (
-    property: background,
-    class: bg-pattern,
-    values: (
-      transparent: #{url-svg('<svg width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="8" height="8" fill="rgba(130, 130, 130, .1)" /><rect x="8" y="8" width="8" height="8" fill="rgba(130, 130, 130, .1)" /></svg>')} repeat center/16px 16px,
+    'padding-top': (
+      responsive: true,
+      property: padding-top,
+      class: pt,
+      values: $spacers,
     ),
-  ),
-  'bg-gradient': (
-    property: background,
-    class: bg-gradient,
-    values: (
-      null: linear-gradient(var(--#{$prefix}gradient-direction, to right), var(--#{$prefix}gradient-stops, var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-to, transparent))) no-repeat,
+    'padding-end': (
+      responsive: true,
+      property: padding-right,
+      class: pe,
+      values: $spacers,
     ),
-  ),
-  'bg-blur': (
-    property: backdrop-filter,
-    class: bg-blur,
-    values: (
-      null: blur($backdrop-blur),
+    'padding-bottom': (
+      responsive: true,
+      property: padding-bottom,
+      class: pb,
+      values: $spacers,
     ),
-  ),
-  'bg-gradient-direction': (
-    property: --#{$prefix}gradient-direction,
-    class: bg-gradient,
-    values: (
-      to-t: to top,
-      to-te: to top right,
-      to-e: to right,
-      to-be: to bottom right,
-      to-b: to bottom,
-      to-bs: to bottom left,
-      to-s: to left,
-      to-ts: to top left,
+    'padding-start': (
+      responsive: true,
+      property: padding-left,
+      class: ps,
+      values: $spacers,
     ),
-  ),
-  'table-layout': (
-    property: table-layout,
-    class: table,
-    values: (
-      auto: auto,
-      fixed: fixed,
+    // Gap utility
+    'gap': (
+        responsive: true,
+        property: gap,
+        class: gap,
+        values: $spacers,
+      ),
+    'row-gap': (
+      responsive: true,
+      property: row-gap,
+      class: row-gap,
+      values: $spacers,
     ),
-  ),
-  // Text
-  'font-family': (
-      property: font-family,
-      class: font,
+    'column-gap': (
+      responsive: true,
+      property: column-gap,
+      class: column-gap,
+      values: $spacers,
+    ),
+    'bg-pattern': (
+      property: background,
+      class: bg-pattern,
       values: (
-        monospace: var(--#{$prefix}font-monospace),
+        transparent: #{url-svg('<svg width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="8" height="8" fill="rgba(130, 130, 130, .1)" /><rect x="8" y="8" width="8" height="8" fill="rgba(130, 130, 130, .1)" /></svg>')} repeat center/16px 16px,
       ),
     ),
-  'font-size': (
-    property: font-size,
-    class: fs,
-    values: $font-sizes,
-  ),
-  'font-style': (
-    property: font-style,
-    class: fst,
-    values: italic normal,
-  ),
-  'font-weight': (
-    property: font-weight,
-    class: fw,
-    values: (
-      lighter: $font-weight-lighter,
-      light: $font-weight-light,
-      normal: $font-weight-normal,
-      medium: $font-weight-medium,
-      semibold: $font-weight-semibold,
-      bold: $font-weight-bold,
-      bolder: $font-weight-bolder,
-    ),
-  ),
-  'line-height': (
-    property: line-height,
-    class: lh,
-    values: (
-      1: 1,
-      sm: $line-height-sm,
-      base: $line-height-base,
-      lg: $line-height-lg,
-    ),
-  ),
-  'text-align': (
-    responsive: true,
-    property: text-align,
-    class: text,
-    values: (
-      start: left,
-      end: right,
-      center: center,
-    ),
-  ),
-  'text-decoration': (
-    property: text-decoration,
-    values: none underline line-through,
-  ),
-  'text-transform': (
-    property: text-transform,
-    class: text,
-    values: lowercase uppercase capitalize,
-  ),
-  'white-space': (
-    property: white-space,
-    class: text,
-    values: (
-      wrap: normal,
-      nowrap: nowrap,
-    ),
-  ),
-  'word-wrap': (
-    property: word-wrap word-break,
-    class: text,
-    values: (
-      break: break-word,
-    ),
-    rtl: false,
-  ),
-  '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, 0.5),
-          // deprecated
-          'white-50': rgba($white, 0.5),
-          // deprecated
-          'body-secondary': var(--#{$prefix}secondary-color),
-          'body-tertiary': var(--#{$prefix}tertiary-color),
-          'body-emphasis': var(--#{$prefix}emphasis-color),
-          'reset': inherit,
-        )
+    'bg-gradient': (
+      property: background,
+      class: bg-gradient,
+      values: (
+        null: linear-gradient(var(--#{$prefix}gradient-direction, to right), var(--#{$prefix}gradient-stops, var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-to, transparent))) no-repeat,
       ),
-  ),
-  'text-opacity': (
-    css-var: true,
-    class: text-opacity,
-    values: (
-      25: 0.25,
-      50: 0.5,
-      75: 0.75,
-      100: 1,
     ),
-  ),
-  'text-color': (
-    property: color,
-    class: text,
-    values: $utilities-text-emphasis-colors,
-  ),
-  'link-opacity': (
-    css-var: true,
-    class: link-opacity,
-    state: hover,
-    values: (
-      10: 0.1,
-      25: 0.25,
-      50: 0.5,
-      75: 0.75,
-      100: 1,
-    ),
-  ),
-  'link-offset': (
-    property: text-underline-offset,
-    class: link-offset,
-    state: hover,
-    values: (
-      1: 0.125em,
-      2: 0.25em,
-      3: 0.375em,
-    ),
-  ),
-  'link-underline': (
-    property: text-decoration-color,
-    class: link-underline,
-    local-vars: (
-      'link-underline-opacity': 1,
-    ),
-    values: map.merge(
-        $utilities-links-underline,
-        (
-          null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
-        )
+    'bg-blur': (
+      property: backdrop-filter,
+      class: bg-blur,
+      values: (
+        null: blur($backdrop-blur),
       ),
-  ),
-  'link-underline-opacity': (
-    css-var: true,
-    class: link-underline-opacity,
-    state: hover,
-    values: (
-      0: 0,
-      10: 0.1,
-      25: 0.25,
-      50: 0.5,
-      75: 0.75,
-      100: 1,
     ),
-  ),
-  'background-color': (
-    property: background-color,
-    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)),
-        )
+    'bg-gradient-direction': (
+      property: --#{$prefix}gradient-direction,
+      class: bg-gradient,
+      values: (
+        to-t: to top,
+        to-te: to top right,
+        to-e: to right,
+        to-be: to bottom right,
+        to-b: to bottom,
+        to-bs: to bottom left,
+        to-s: to left,
+        to-ts: to top left,
       ),
-  ),
-  'bg-opacity': (
-    css-var: true,
-    class: bg-opacity,
-    values: (
-      10: 0.1,
-      25: 0.25,
-      50: 0.5,
-      75: 0.75,
-      100: 1,
+    ),
+    'table-layout': (
+      property: table-layout,
+      class: table,
+      values: (
+        auto: auto,
+        fixed: fixed,
+      ),
+    ),
+    // Text
+    'font-family': (
+        property: font-family,
+        class: font,
+        values: (
+          monospace: var(--#{$prefix}font-monospace),
+        ),
+      ),
+    'font-size': (
+      property: font-size,
+      class: fs,
+      values: $font-sizes,
+    ),
+    'font-style': (
+      property: font-style,
+      class: fst,
+      values: italic normal,
+    ),
+    'font-weight': (
+      property: font-weight,
+      class: fw,
+      values: (
+        lighter: $font-weight-lighter,
+        light: $font-weight-light,
+        normal: $font-weight-normal,
+        medium: $font-weight-medium,
+        semibold: $font-weight-semibold,
+        bold: $font-weight-bold,
+        bolder: $font-weight-bolder,
+      ),
+    ),
+    'line-height': (
+      property: line-height,
+      class: lh,
+      values: (
+        1: 1,
+        sm: $line-height-sm,
+        base: $line-height-base,
+        lg: $line-height-lg,
+      ),
+    ),
+    'text-align': (
+      responsive: true,
+      property: text-align,
+      class: text,
+      values: (
+        start: left,
+        end: right,
+        center: center,
+      ),
+    ),
+    'text-decoration': (
+      property: text-decoration,
+      values: none underline line-through,
+    ),
+    'text-transform': (
+      property: text-transform,
+      class: text,
+      values: lowercase uppercase capitalize,
+    ),
+    'white-space': (
+      property: white-space,
+      class: text,
+      values: (
+        wrap: normal,
+        nowrap: nowrap,
+      ),
+    ),
+    'word-wrap': (
+      property: word-wrap word-break,
+      class: text,
+      values: (
+        break: break-word,
+      ),
+      rtl: false,
+    ),
+    '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, 0.5),
+            // deprecated
+            'white-50': rgba($white, 0.5),
+            // deprecated
+            'body-secondary': var(--#{$prefix}secondary-color),
+            'body-tertiary': var(--#{$prefix}tertiary-color),
+            'body-emphasis': var(--#{$prefix}emphasis-color),
+            'reset': inherit,
+          )
+        ),
+    ),
+    'text-opacity': (
+      css-var: true,
+      class: text-opacity,
+      values: (
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
+    ),
+    'text-color': (
+      property: color,
+      class: text,
+      values: $utilities-text-emphasis-colors,
+    ),
+    'link-opacity': (
+      css-var: true,
+      class: link-opacity,
+      state: hover,
+      values: (
+        10: 0.1,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
+    ),
+    'link-offset': (
+      property: text-underline-offset,
+      class: link-offset,
+      state: hover,
+      values: (
+        1: 0.125em,
+        2: 0.25em,
+        3: 0.375em,
+      ),
+    ),
+    'link-underline': (
+      property: text-decoration-color,
+      class: link-underline,
+      local-vars: (
+        'link-underline-opacity': 1,
+      ),
+      values: map.merge(
+          $utilities-links-underline,
+          (
+            null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
+          )
+        ),
+    ),
+    'link-underline-opacity': (
+      css-var: true,
+      class: link-underline-opacity,
+      state: hover,
+      values: (
+        0: 0,
+        10: 0.1,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
+    ),
+    'background-color': (
+      property: background-color,
+      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)),
+          )
+        ),
+    ),
+    'bg-opacity': (
+      css-var: true,
+      class: bg-opacity,
+      values: (
+        10: 0.1,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
+    ),
+    'subtle-background-color': (
+      property: background-color,
+      class: bg,
+      values: $utilities-bg-subtle,
+    ),
+    'gradient': (
+      property: background-image,
+      class: bg,
+      values: (
+        gradient: var(--#{$prefix}gradient),
+      ),
+    ),
+    'user-select': (
+      property: user-select,
+      values: all auto none,
+    ),
+    'pointer-events': (
+      property: pointer-events,
+      class: pe,
+      values: none auto,
+    ),
+    'rounded': (
+      property: border-radius,
+      class: rounded,
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-xxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill),
+      ),
+    ),
+    'rounded-top': (
+      property: border-start-start-radius border-start-end-radius,
+      class: rounded-top,
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-xxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill),
+      ),
+    ),
+    'rounded-end': (
+      property: border-end-end-radius border-end-start-radius,
+      class: rounded-end,
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-xxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill),
+      ),
+    ),
+    'rounded-bottom': (
+      property: border-end-end-radius border-end-start-radius,
+      class: rounded-bottom,
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-xxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill),
+      ),
+    ),
+    'rounded-start': (
+      property: border-start-start-radius border-start-end-radius,
+      class: rounded-start,
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-xxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill),
+      ),
+    ),
+    'visibility': (
+      property: visibility,
+      class: null,
+      values: (
+        visible: visible,
+        invisible: hidden,
+      ),
+    ),
+    'z-index': (
+      property: z-index,
+      class: z,
+      values: $zindex-levels,
     ),
   ),
-  'subtle-background-color': (
-    property: background-color,
-    class: bg,
-    values: $utilities-bg-subtle,
-  ),
-  'gradient': (
-    property: background-image,
-    class: bg,
-    values: (
-      gradient: var(--#{$prefix}gradient),
-    ),
-  ),
-  'user-select': (
-    property: user-select,
-    values: all auto none,
-  ),
-  'pointer-events': (
-    property: pointer-events,
-    class: pe,
-    values: none auto,
-  ),
-  'rounded': (
-    property: border-radius,
-    class: rounded,
-    values: (
-      null: var(--#{$prefix}border-radius),
-      0: 0,
-      1: var(--#{$prefix}border-radius-sm),
-      2: var(--#{$prefix}border-radius),
-      3: var(--#{$prefix}border-radius-lg),
-      4: var(--#{$prefix}border-radius-xl),
-      5: var(--#{$prefix}border-radius-xxl),
-      circle: 50%,
-      pill: var(--#{$prefix}border-radius-pill),
-    ),
-  ),
-  'rounded-top': (
-    property: border-start-start-radius border-start-end-radius,
-    class: rounded-top,
-    values: (
-      null: var(--#{$prefix}border-radius),
-      0: 0,
-      1: var(--#{$prefix}border-radius-sm),
-      2: var(--#{$prefix}border-radius),
-      3: var(--#{$prefix}border-radius-lg),
-      4: var(--#{$prefix}border-radius-xl),
-      5: var(--#{$prefix}border-radius-xxl),
-      circle: 50%,
-      pill: var(--#{$prefix}border-radius-pill),
-    ),
-  ),
-  'rounded-end': (
-    property: border-end-end-radius border-end-start-radius,
-    class: rounded-end,
-    values: (
-      null: var(--#{$prefix}border-radius),
-      0: 0,
-      1: var(--#{$prefix}border-radius-sm),
-      2: var(--#{$prefix}border-radius),
-      3: var(--#{$prefix}border-radius-lg),
-      4: var(--#{$prefix}border-radius-xl),
-      5: var(--#{$prefix}border-radius-xxl),
-      circle: 50%,
-      pill: var(--#{$prefix}border-radius-pill),
-    ),
-  ),
-  'rounded-bottom': (
-    property: border-end-end-radius border-end-start-radius,
-    class: rounded-bottom,
-    values: (
-      null: var(--#{$prefix}border-radius),
-      0: 0,
-      1: var(--#{$prefix}border-radius-sm),
-      2: var(--#{$prefix}border-radius),
-      3: var(--#{$prefix}border-radius-lg),
-      4: var(--#{$prefix}border-radius-xl),
-      5: var(--#{$prefix}border-radius-xxl),
-      circle: 50%,
-      pill: var(--#{$prefix}border-radius-pill),
-    ),
-  ),
-  'rounded-start': (
-    property: border-start-start-radius border-start-end-radius,
-    class: rounded-start,
-    values: (
-      null: var(--#{$prefix}border-radius),
-      0: 0,
-      1: var(--#{$prefix}border-radius-sm),
-      2: var(--#{$prefix}border-radius),
-      3: var(--#{$prefix}border-radius-lg),
-      4: var(--#{$prefix}border-radius-xl),
-      5: var(--#{$prefix}border-radius-xxl),
-      circle: 50%,
-      pill: var(--#{$prefix}border-radius-pill),
-    ),
-  ),
-  'visibility': (
-    property: visibility,
-    class: null,
-    values: (
-      visible: visible,
-      invisible: hidden,
-    ),
-  ),
-  'z-index': (
-    property: z-index,
-    class: z,
-    values: $zindex-levels,
-  ),
-) !default;
+  $utilities
+);
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index 884e2a2d2..d9315c89e 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -33,12 +33,7 @@ $enable-deprecation-messages: true !default;
 $enable-important-utilities: true !default;
 
 // Escaped Characters
-$escaped-characters: (
-  ('<', '%3c'),
-  ('>', '%3e'),
-  ('#', '%23'),
-  ('(', '%28'),
-  (')', '%29')) !default;
+$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
 
 // Dark Mode
 $color-mode-type: data !default;
@@ -1876,7 +1871,7 @@ $form-switch-border-radius: $form-switch-width !default;
 $form-switch-transition: background-position 0.15s ease-in-out !default;
 $form-switch-focus-color: white !default;
 $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
-$form-switch-checked-color: white!default;
+$form-switch-checked-color: white !default;
 $form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
 $form-switch-checked-bg-position: right center !default;
 $form-switch-bg-size: auto !default;
diff --git a/core/scss/fonts/_geist.scss b/core/scss/fonts/_geist.scss
index 92333576e..9184f5b73 100644
--- a/core/scss/fonts/_geist.scss
+++ b/core/scss/fonts/_geist.scss
@@ -1,184 +1,203 @@
 // Geist Sans Font Family
 @font-face {
-	font-family: 'Geist';
-	src: url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype');
-	font-weight: 100;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist';
+  src:
+    url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist';
-	src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype');
-	font-weight: 200;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist';
+  src:
+    url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist';
-	src: url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype');
-	font-weight: 300;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist';
+  src:
+    url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist';
-	src: url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype');
-	font-weight: 400;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist';
+  src:
+    url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist';
-	src: url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype');
-	font-weight: 500;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist';
+  src:
+    url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist';
-	src: url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype');
-	font-weight: 600;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist';
+  src:
+    url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist';
-	src: url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype');
-	font-weight: 700;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist';
+  src:
+    url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist';
-	src: url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype');
-	font-weight: 800;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist';
+  src:
+    url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist';
-	src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype');
-	font-weight: 900;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist';
+  src:
+    url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
 }
 
 // Geist Sans Variable Font
 @font-face {
-	font-family: 'Geist';
-	src: url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype');
-	font-weight: 100 900;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist';
+  src:
+    url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
 }
 
 // Geist Mono Font Family
 @font-face {
-	font-family: 'Geist Mono';
-	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype');
-	font-weight: 100;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist Mono';
+  src:
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist Mono';
-	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype');
-	font-weight: 200;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist Mono';
+  src:
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist Mono';
-	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype');
-	font-weight: 300;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist Mono';
+  src:
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist Mono';
-	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
-	font-weight: 400;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist Mono';
+  src:
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist Mono';
-	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype');
-	font-weight: 500;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist Mono';
+  src:
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist Mono';
-	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype');
-	font-weight: 600;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist Mono';
+  src:
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist Mono';
-	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
-	font-weight: 700;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist Mono';
+  src:
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist Mono';
-	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
-	font-weight: 800;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist Mono';
+  src:
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-	font-family: 'Geist Mono';
-	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype');
-	font-weight: 900;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist Mono';
+  src:
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
 }
 
 // Geist Mono Variable Font
 @font-face {
-	font-family: 'Geist Mono';
-	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
-		url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
-	font-weight: 100 900;
-	font-style: normal;
-	font-display: swap;
+  font-family: 'Geist Mono';
+  src:
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
 }
-
diff --git a/core/scss/helpers/_index.scss b/core/scss/helpers/_index.scss
index b06296e5b..b03015818 100644
--- a/core/scss/helpers/_index.scss
+++ b/core/scss/helpers/_index.scss
@@ -119,7 +119,7 @@
     content: '';
   }
 
-  >* {
+  > * {
     position: absolute;
     top: 0;
     inset-inline-start: 0;
@@ -141,4 +141,4 @@
   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);
-}
\ No newline at end of file
+}
diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss
index 61fcb2eda..bb5bcccbb 100644
--- a/core/scss/layout/_navbar.scss
+++ b/core/scss/layout/_navbar.scss
@@ -69,7 +69,7 @@
     .nav-item.active:after {
       border-bottom-width: 0;
       border-inline-start-width: 3px;
-  inset-inline-end: auto;
+      inset-inline-end: auto;
       top: 0;
       bottom: 0;
     }
@@ -118,7 +118,7 @@ Navbar
       .badge {
         position: absolute;
         top: 0.5rem;
-  inset-inline-end: 0.5rem;
+        inset-inline-end: 0.5rem;
         transform: translate(50%, -50%);
       }
     }
@@ -151,8 +151,8 @@ Navbar
           &:after {
             content: '';
             position: absolute;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
+            inset-inline-start: 0;
+            inset-inline-end: 0;
             bottom: -0.25rem;
             border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
             border-bottom-width: 2px;
@@ -235,7 +235,7 @@ Navbar toggler
     border-radius: inherit;
     background: inherit;
     position: absolute;
-  inset-inline-start: 0;
+    inset-inline-start: 0;
     @include transition(inherit);
   }
 
@@ -313,7 +313,7 @@ Navbar vertical
             width: $sidebar-width;
             position: fixed;
             top: 0;
-  inset-inline-start: 0;
+            inset-inline-start: 0;
             bottom: 0;
             z-index: $zindex-fixed;
             align-items: start;
@@ -323,8 +323,8 @@ Navbar vertical
 
             &.navbar-right,
             &.navbar-end {
-  inset-inline-start: auto;
-  inset-inline-end: 0;
+              inset-inline-start: auto;
+              inset-inline-end: 0;
             }
 
             .navbar-brand {
@@ -384,8 +384,8 @@ Navbar vertical
     height: $navbar-overlap-height;
     position: absolute;
     top: 100%;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     background: inherit;
     z-index: -1;
     box-shadow: inherit;
diff --git a/core/scss/layout/_page.scss b/core/scss/layout/_page.scss
index 9590b61da..06eac431a 100644
--- a/core/scss/layout/_page.scss
+++ b/core/scss/layout/_page.scss
@@ -67,8 +67,8 @@
     content: '';
     position: absolute;
     top: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     bottom: 0;
     background-image: $overlay-gradient;
   }
diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss
index 7189d22b8..293547d69 100644
--- a/core/scss/ui/_alerts.scss
+++ b/core/scss/ui/_alerts.scss
@@ -1,12 +1,12 @@
 .alert {
   --#{$prefix}alert-variant-color: var(--#{$prefix}body-color);
-  --#{$prefix}alert-color: color-mix(in srgb, var(--#{$prefix}alert-variant-color) 50%, var(--#{$prefix}body-color));
+  --#{$prefix}alert-color: var(--#{$prefix}alert-variant-color);
   --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.16, var(--#{$prefix}bg-surface))};
   --#{$prefix}alert-padding-x: #{$alert-padding-x};
   --#{$prefix}alert-padding-y: #{$alert-padding-y};
   --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
-  --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.2,
-  var(--#{$prefix}bg-surface))};
+  --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.2, var(--#{$prefix}bg-surface))};
+  --#{$prefix}alert-border-color: var(--#{$prefix}border-color);
   --#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
   --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
   --#{$prefix}alert-link-color: inherit;
@@ -70,15 +70,14 @@
   .btn-close {
     position: absolute;
     top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
-  inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
+    inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
     z-index: 1;
     padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
   }
 }
 
 .alert-important {
-  border-color: var(--#{$prefix}alert-color);
-  background-color: var(--#{$prefix}alert-color);
+  background-color: var(--#{$prefix}alert-variant-color);
   color: var(--#{$prefix}white);
 
   .alert-description {
diff --git a/core/scss/ui/_avatars.scss b/core/scss/ui/_avatars.scss
index 3759606cd..6193d1bb7 100644
--- a/core/scss/ui/_avatars.scss
+++ b/core/scss/ui/_avatars.scss
@@ -101,8 +101,9 @@
   --#{$prefix}list-gap: 0;
 
   .avatar {
-    box-shadow: var(--#{$prefix}avatar-box-shadow),
-    0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+    box-shadow:
+      var(--#{$prefix}avatar-box-shadow),
+      0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
 
     &:not(:first-child) {
       margin-inline-start: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
@@ -160,4 +161,4 @@
   background: var(--#{$prefix}bg-surface);
   border-radius: var(--#{$prefix}border-radius);
   border: 1px solid var(--#{$prefix}border-color);
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss
index 88109204c..f88101171 100644
--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -250,7 +250,7 @@
     position: absolute;
     width: var(--#{$prefix}btn-icon-size);
     height: var(--#{$prefix}btn-icon-size);
-  inset-inline-start: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
+    inset-inline-start: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
     top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
     animation: spinner-border 0.75s linear infinite;
   }
diff --git a/core/scss/ui/_calendars.scss b/core/scss/ui/_calendars.scss
index 94787b5e1..b64c7a603 100644
--- a/core/scss/ui/_calendars.scss
+++ b/core/scss/ui/_calendars.scss
@@ -77,8 +77,8 @@
   &:before {
     position: absolute;
     top: 50%;
-  inset-inline-end: 0;
-  inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-inline-start: 0;
     height: 1.4rem;
     content: '';
     background: rgba(var(--#{$prefix}primary-rgb), 0.1);
@@ -95,10 +95,10 @@
   }
 
   &.range-start:before {
-  inset-inline-start: 50%;
+    inset-inline-start: 50%;
   }
 
   &.range-end:before {
-  inset-inline-end: 50%;
+    inset-inline-end: 50%;
   }
 }
diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss
index 0c4187343..d572c1ef2 100644
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -26,7 +26,7 @@
 
   @at-root a#{&} {
     color: inherit;
-    
+
     &:hover {
       text-decoration: none;
       box-shadow: $box-shadow-card-hover;
@@ -40,7 +40,6 @@
 
 // Card borderless
 .card-borderless {
-
   &,
   .card-header,
   .card-footer {
@@ -153,7 +152,7 @@
     background: $active-bg;
   }
 
-  &+& {
+  & + & {
     border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
@@ -352,17 +351,17 @@ Stacked card
     margin-bottom: 0;
   }
 
-  .card-sm>& {
+  .card-sm > & {
     padding: 1rem;
   }
 
-  .card-md>& {
+  .card-md > & {
     @include media-breakpoint-up(md) {
       padding: 2.5rem;
     }
   }
 
-  .card-lg>& {
+  .card-lg > & {
     @include media-breakpoint-up(md) {
       padding: 2rem;
     }
@@ -376,7 +375,7 @@ Stacked card
     padding: 0;
   }
 
-  &+& {
+  & + & {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
@@ -439,7 +438,6 @@ Card table
   margin-bottom: 0 !important;
 
   tr {
-
     td,
     th {
       &:first-child {
@@ -468,11 +466,11 @@ Card table
   tfoot {
     &:last-child {
       tr:last-child {
-        >*:last-child {
+        > *:last-child {
           border-end-end-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
         }
 
-        >*:first-child {
+        > *:first-child {
           border-end-start-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
         }
       }
@@ -508,7 +506,7 @@ Card table
     }
   }
 
-  .card-body+& {
+  .card-body + & {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
   }
 }
@@ -553,7 +551,7 @@ Card avatar
 Card list group
  */
 .card-list-group {
-  .card-body+& {
+  .card-body + & {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 
@@ -612,7 +610,7 @@ Card list group
         }
       }
 
-      +.nav-item {
+      + .nav-item {
         margin-inline-start: calc(-1 * #{$card-border-width});
       }
     }
@@ -652,7 +650,7 @@ Card list group
     border-end-start-radius: 0;
   }
 
-  .nav-tabs+.tab-content .card {
+  .nav-tabs + .tab-content .card {
     border-end-start-radius: var(--#{$prefix}card-border-radius);
     border-start-start-radius: 0;
   }
@@ -666,7 +664,6 @@ Card note
   --#{$prefix}card-border-color: #fff1c9;
 }
 
-
 /**
 Card gradient
 */
@@ -675,10 +672,10 @@ Card gradient
   --#{$prefix}card-gradient-opacity: 86%;
   --#{$prefix}card-gradient: var(--tblr-primary), var(--tblr-primary);
 
-  background: radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
-  linear-gradient(var(--#{$prefix}card-gradient-direction), color-mix(in srgb, var(--#{$prefix}card-bg) var(--#{$prefix}card-gradient-opacity), transparent) 0%, var(--#{$prefix}card-bg) 40%) border-box,
-  linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box;
-
+  background:
+    radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
+    linear-gradient(var(--#{$prefix}card-gradient-direction), color-mix(in srgb, var(--#{$prefix}card-bg) var(--#{$prefix}card-gradient-opacity), transparent) 0%, var(--#{$prefix}card-bg) 40%) border-box,
+    linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box;
 }
 
 @each $name, $color in map.merge($colors, $theme-colors) {
@@ -688,14 +685,7 @@ Card gradient
 }
 
 .card-gradient-rainbow {
-  --#{$prefix}card-gradient: #78C5D6,
-    #459BA8,
-    #79C267,
-    #C5D647,
-    #F5D63D,
-    #F08B33,
-    #E868A2,
-    #BE61A5;
+  --#{$prefix}card-gradient: #78c5d6, #459ba8, #79c267, #c5d647, #f5d63d, #f08b33, #e868a2, #be61a5;
 }
 
 .card-gradient-sun {
@@ -707,7 +697,7 @@ Card gradient
 }
 
 .card-gradient-ocean {
-  --#{$prefix}card-gradient: #1CB5E0, #000851;
+  --#{$prefix}card-gradient: #1cb5e0, #000851;
 }
 
 .card-gradient-mellow {
@@ -715,7 +705,7 @@ Card gradient
 }
 
 .card-gradient-disco {
-  --#{$prefix}card-gradient: #FC466B, #3F5EFB;
+  --#{$prefix}card-gradient: #fc466b, #3f5efb;
 }
 
 .card-gradient-psychedelic {
@@ -727,7 +717,7 @@ Card gradient
 }
 
 .card-gradient-gold {
-  --#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #FFD700;
+  --#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #ffd700;
 }
 
 .card-gradient-animated {
diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss
index 7de0de096..0533945c1 100644
--- a/core/scss/ui/_dropdowns.scss
+++ b/core/scss/ui/_dropdowns.scss
@@ -74,7 +74,7 @@
     content: '';
     position: absolute;
     top: -0.25rem;
-  inset-inline-start: 0.75rem;
+    inset-inline-start: 0.75rem;
     display: block;
     background: inherit;
     width: 14px;
@@ -90,8 +90,8 @@
 
   &.dropdown-menu-end {
     &:before {
-  inset-inline-end: 0.75rem;
-  inset-inline-start: auto;
+      inset-inline-end: 0.75rem;
+      inset-inline-start: auto;
     }
   }
 }
diff --git a/core/scss/ui/_loaders.scss b/core/scss/ui/_loaders.scss
index 4891ee517..c085be40a 100644
--- a/core/scss/ui/_loaders.scss
+++ b/core/scss/ui/_loaders.scss
@@ -9,7 +9,7 @@
   &:after {
     position: absolute;
     top: 0;
-  inset-inline-start: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
     content: '';
@@ -33,8 +33,8 @@ Dimmer
   .loader {
     position: absolute;
     top: 50%;
-  inset-inline-end: 0;
-  inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-inline-start: 0;
     display: none;
     margin: 0 auto;
     transform: translateY(-50%);
diff --git a/core/scss/ui/_modals.scss b/core/scss/ui/_modals.scss
index cc65034f8..6d50391d6 100644
--- a/core/scss/ui/_modals.scss
+++ b/core/scss/ui/_modals.scss
@@ -3,7 +3,7 @@
   > .btn-close {
     position: absolute;
     top: 0;
-  inset-inline-end: 0;
+    inset-inline-end: 0;
     width: $modal-header-height;
     height: $modal-header-height;
     margin: 0;
diff --git a/core/scss/ui/_progress.scss b/core/scss/ui/_progress.scss
index 510f64c2d..b1399479e 100644
--- a/core/scss/ui/_progress.scss
+++ b/core/scss/ui/_progress.scss
@@ -1,13 +1,13 @@
 @keyframes progress-indeterminate {
   0% {
-  inset-inline-end: 100%;
-  inset-inline-start: -35%;
+    inset-inline-end: 100%;
+    inset-inline-start: -35%;
   }
 
   100%,
   60% {
-  inset-inline-end: -90%;
-  inset-inline-start: 100%;
+    inset-inline-end: -90%;
+    inset-inline-start: 100%;
   }
 }
 
@@ -64,7 +64,7 @@ Progress bar
     position: absolute;
     top: 0;
     bottom: 0;
-  inset-inline-start: 0;
+    inset-inline-start: 0;
     content: '';
     background-color: inherit;
     will-change: left, right;
diff --git a/core/scss/ui/_ribbons.scss b/core/scss/ui/_ribbons.scss
index b175ae953..2faec31df 100644
--- a/core/scss/ui/_ribbons.scss
+++ b/core/scss/ui/_ribbons.scss
@@ -25,7 +25,7 @@
 
   &:before {
     position: absolute;
-  inset-inline-end: 0;
+    inset-inline-end: 0;
     bottom: 100%;
     width: 0;
     height: 0;
@@ -65,7 +65,7 @@
 
   &:before {
     top: 0;
-  inset-inline-end: 100%;
+    inset-inline-end: 100%;
     bottom: auto;
     border-color: inherit;
     border-top-color: transparent;
@@ -73,13 +73,13 @@
   }
 
   &.ribbon-start {
-  inset-inline-end: auto;
-  inset-inline-start: 0.75rem;
+    inset-inline-end: auto;
+    inset-inline-start: 0.75rem;
 
     &:before {
       top: 0;
-  inset-inline-end: 100%;
-  inset-inline-start: auto;
+      inset-inline-end: 100%;
+      inset-inline-start: auto;
     }
   }
 }
@@ -92,7 +92,7 @@
   &:before {
     top: auto;
     bottom: 100%;
-  inset-inline-start: 0;
+    inset-inline-start: 0;
     border-color: inherit;
     border-top-color: transparent;
     border-inline-start-color: transparent;
@@ -111,7 +111,7 @@
   &:after {
     position: absolute;
     top: 0;
-  inset-inline-end: 100%;
+    inset-inline-end: 100%;
     display: block;
     width: 0;
     height: 0;
@@ -127,8 +127,8 @@
     padding-inline-end: 0.5rem;
 
     &:after {
-  inset-inline-end: auto;
-  inset-inline-start: 100%;
+      inset-inline-end: auto;
+      inset-inline-start: 100%;
       border-inline-end-color: transparent;
 
       border-inline-end-width: 0.5rem;
@@ -144,8 +144,8 @@
 
     &:after {
       top: 100%;
-  inset-inline-end: 0;
-  inset-inline-start: 0;
+      inset-inline-end: 0;
+      inset-inline-start: 0;
       border-color: inherit;
       border-width: 1rem;
       border-top-width: 0;
diff --git a/core/scss/ui/_steps.scss b/core/scss/ui/_steps.scss
index 0ed1e7d91..954a3883e 100644
--- a/core/scss/ui/_steps.scss
+++ b/core/scss/ui/_steps.scss
@@ -52,7 +52,7 @@
 
   &:not(:last-child):after {
     position: absolute;
-  inset-inline-start: 50%;
+    inset-inline-start: 50%;
     width: 100%;
     content: '';
     transform: translateY(-50%);
@@ -67,7 +67,7 @@
     content: '';
     position: absolute;
     top: 0;
-  inset-inline-start: 50%;
+    inset-inline-start: 50%;
     z-index: 1;
     box-sizing: content-box;
     display: flex;
@@ -137,7 +137,7 @@
 
     &:before {
       top: var(--#{$prefix}steps-dot-offset);
-  inset-inline-start: 0;
+      inset-inline-start: 0;
       transform: translate(0, 0);
     }
 
@@ -147,7 +147,7 @@
         content: '';
         transform: translateX(-50%);
         top: var(--#{$prefix}steps-dot-offset);
-  inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5);
+        inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5);
         width: var(--#{$prefix}steps-border-width);
         height: calc(100% + 1rem);
       }
diff --git a/core/scss/ui/_switch-icon.scss b/core/scss/ui/_switch-icon.scss
index df0d512b9..6a42e252f 100644
--- a/core/scss/ui/_switch-icon.scss
+++ b/core/scss/ui/_switch-icon.scss
@@ -39,7 +39,7 @@
   .switch-icon-b {
     position: absolute;
     top: 0;
-  inset-inline-start: 0;
+    inset-inline-start: 0;
     opacity: 0;
   }
 
diff --git a/core/scss/ui/_timeline.scss b/core/scss/ui/_timeline.scss
index ad587f741..72c7c8c95 100644
--- a/core/scss/ui/_timeline.scss
+++ b/core/scss/ui/_timeline.scss
@@ -21,7 +21,7 @@
       content: '';
       position: absolute;
       top: var(--#{$prefix}timeline-icon-size);
-  inset-inline-start: calc(var(--#{$prefix}timeline-icon-size) / 2);
+      inset-inline-start: calc(var(--#{$prefix}timeline-icon-size) / 2);
       bottom: calc(-1 * var(--#{$prefix}page-padding));
       width: var(--#{$prefix}border-width);
       background-color: var(--#{$prefix}border-color);
diff --git a/core/scss/ui/forms/_form-check.scss b/core/scss/ui/forms/_form-check.scss
index f96d51c8e..2379ca1db 100644
--- a/core/scss/ui/forms/_form-check.scss
+++ b/core/scss/ui/forms/_form-check.scss
@@ -82,4 +82,4 @@ Form switch
   .form-check-label {
     padding-top: 0.125rem;
   }
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/forms/_form-colorinput.scss b/core/scss/ui/forms/_form-colorinput.scss
index 54c9bed90..229085fee 100644
--- a/core/scss/ui/forms/_form-colorinput.scss
+++ b/core/scss/ui/forms/_form-colorinput.scss
@@ -27,7 +27,7 @@ Color Input
   &:before {
     position: absolute;
     top: 0;
-  inset-inline-start: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
     content: '';
diff --git a/core/scss/ui/forms/_form-icon.scss b/core/scss/ui/forms/_form-icon.scss
index 17d699b78..0a5b87e86 100644
--- a/core/scss/ui/forms/_form-icon.scss
+++ b/core/scss/ui/forms/_form-icon.scss
@@ -31,7 +31,7 @@ Icon input
   font-size: 1.2em;
 
   &:last-child {
-  inset-inline-end: 0;
-  inset-inline-start: auto;
+    inset-inline-end: 0;
+    inset-inline-start: auto;
   }
 }
diff --git a/core/scss/ui/forms/_form-imagecheck.scss b/core/scss/ui/forms/_form-imagecheck.scss
index 2fffd8afc..4d4a4085a 100644
--- a/core/scss/ui/forms/_form-imagecheck.scss
+++ b/core/scss/ui/forms/_form-imagecheck.scss
@@ -34,7 +34,7 @@ Image check
   &:before {
     position: absolute;
     top: 0.25rem;
-  inset-inline-start: 0.25rem;
+    inset-inline-start: 0.25rem;
     z-index: 1;
     display: block;
     width: $form-check-input-width;
diff --git a/core/scss/vendor/_coloris.scss b/core/scss/vendor/_coloris.scss
index 749fb3ab0..4b045498c 100644
--- a/core/scss/vendor/_coloris.scss
+++ b/core/scss/vendor/_coloris.scss
@@ -53,8 +53,8 @@ input.clr-color {
   button {
     width: 1.5rem;
     height: 1.5rem;
-  inset-inline-start: 6px;
-  inset-inline-end: auto;
+    inset-inline-start: 6px;
+    inset-inline-end: auto;
     border-radius: var(--#{$prefix}border-radius);
 
     &:after {
diff --git a/preview/pages/colors.html b/preview/pages/colors.html
index bdb6145b4..b977fc86c 100644
--- a/preview/pages/colors.html
+++ b/preview/pages/colors.html
@@ -21,7 +21,7 @@ permalink: colors.html
 					<div class="col-12">
 						<div class="row align-items-center">
 							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
+								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
 									{{ color[1].abbr }}
 								</div>
 							</div>
@@ -44,7 +44,7 @@ permalink: colors.html
 					<div class="col-12">
 						<div class="row align-items-center">
 							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg">
+								<div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg avatar-square">
 									{{ color[1].abbr }}
 								</div>
 							</div>
@@ -67,7 +67,7 @@ permalink: colors.html
 					<div class="col-12">
 						<div class="row align-items-center">
 							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
+								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
 									{{ color[1].abbr }}
 								</div>
 							</div>
@@ -90,7 +90,7 @@ permalink: colors.html
 					<div class="col-12">
 						<div class="row align-items-center">
 							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
+								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
 									{% include "ui/icon.html" icon=color[1].icon %}
 								</div>
 							</div>
diff --git a/shared/includes/ui/avatar.html b/shared/includes/ui/avatar.html
index 773e1eee8..a76cf587e 100644
--- a/shared/includes/ui/avatar.html
+++ b/shared/includes/ui/avatar.html
@@ -20,7 +20,7 @@
 {%- endif -%}
 {%- assign el = 'span' -%}
 {%- if link -%}{%- assign el = 'a' -%}{%- endif -%}
-<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} avatar-{{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>
+<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} avatar-{{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}{% if include.square %} avatar-square{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>
 {%- if include.status -%}
 <span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include "ui/icon.html" icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>
 {%- endif -%}