Migrate CSS direction properties to logical properties for improved RTL support (#2773)

Co-authored-by: codecalm <codecalm@gmail.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

.changeset/migrate-css-logical-properties.md

@@ -0,0 +1,7 @@
+---
+"@tabler/core": patch
+---
+
+Migrated all physical CSS direction properties to logical properties (`padding-inline`, `margin-inline`, `inset-inline`, `float: inline-start`/`inline-end`, `text-align: start/end`) for improved RTL support and reduced RTL stylesheet generation overhead.
+
+Directional transforms, which have no logical equivalent, now use a `--tblr-dir` direction multiplier (`1` in LTR, `-1` under `[dir="rtl"]`), e.g. `translateX(calc(var(--tblr-dir) * 4px))`. These declarations are identical in `tabler.css` and `tabler.rtl.css` — the flip happens at runtime via the `dir` attribute, so RTL transforms now also work when using plain `tabler.css` with `dir="rtl"`.

core/scss/_props.scss

@@ -3,6 +3,9 @@
 
 :root,
 :host {
+  /** Direction multiplier for physical transforms (1 = LTR, -1 = RTL) */
+  --#{$prefix}dir: 1;
+
   /** Fonts */
   --#{$prefix}font-monospace: #{$font-family-monospace};
   --#{$prefix}font-sans-serif: #{$font-family-sans-serif};
@@ -90,3 +93,11 @@
   --#{$prefix}backdrop-blur: #{$backdrop-blur};
   --#{$prefix}backdrop-filter: blur(var(--#{$prefix}backdrop-blur));
 }
+
+[dir='ltr'] {
+  --#{$prefix}dir: 1;
+}
+
+[dir='rtl'] {
+  --#{$prefix}dir: -1;
+}

core/scss/_utilities.scss

@@ -36,8 +36,8 @@ $utilities: map.merge(
       responsive: true,
       property: float,
       values: (
-        start: left,
-        end: right,
+        start: inline-start,
+        end: inline-end,
         none: none,
       ),
     ),
@@ -112,12 +112,12 @@ $utilities: map.merge(
       values: $position-values,
     ),
     'start': (
-      property: left,
+      property: inset-inline-start,
       class: start,
       values: $position-values,
     ),
     'end': (
-      property: right,
+      property: inset-inline-end,
       class: end,
       values: $position-values,
     ),
@@ -125,8 +125,8 @@ $utilities: map.merge(
       property: transform,
       class: translate-middle,
       values: (
-        null: translate(-50%, -50%),
-        x: translateX(-50%),
+        null: translate(calc(var(--#{$prefix}dir) * -50%), -50%) #{'/*rtl:ignore*/'},
+        x: translateX(calc(var(--#{$prefix}dir) * -50%)) #{'/*rtl:ignore*/'},
         y: translateY(-50%),
       ),
     ),
@@ -395,7 +395,7 @@ $utilities: map.merge(
       ),
     'margin-x': (
       responsive: true,
-      property: margin-right margin-left,
+      property: margin-inline-end margin-inline-start,
       class: mx,
       values: map.merge(
           $spacers,
@@ -428,7 +428,7 @@ $utilities: map.merge(
     ),
     'margin-end': (
       responsive: true,
-      property: margin-right,
+      property: margin-inline-end,
       class: me,
       values: map.merge(
           $spacers,
@@ -450,7 +450,7 @@ $utilities: map.merge(
     ),
     'margin-start': (
       responsive: true,
-      property: margin-left,
+      property: margin-inline-start,
       class: ms,
       values: map.merge(
           $spacers,
@@ -468,7 +468,7 @@ $utilities: map.merge(
       ),
     'negative-margin-x': (
       responsive: true,
-      property: margin-right margin-left,
+      property: margin-inline-end margin-inline-start,
       class: mx,
       values: $negative-spacers,
     ),
@@ -486,7 +486,7 @@ $utilities: map.merge(
     ),
     'negative-margin-end': (
       responsive: true,
-      property: margin-right,
+      property: margin-inline-end,
       class: me,
       values: $negative-spacers,
     ),
@@ -498,7 +498,7 @@ $utilities: map.merge(
     ),
     'negative-margin-start': (
       responsive: true,
-      property: margin-left,
+      property: margin-inline-start,
       class: ms,
       values: $negative-spacers,
     ),
@@ -511,7 +511,7 @@ $utilities: map.merge(
       ),
     'padding-x': (
       responsive: true,
-      property: padding-right padding-left,
+      property: padding-inline-end padding-inline-start,
       class: px,
       values: $spacers,
     ),
@@ -529,7 +529,7 @@ $utilities: map.merge(
     ),
     'padding-end': (
       responsive: true,
-      property: padding-right,
+      property: padding-inline-end,
       class: pe,
       values: $spacers,
     ),
@@ -541,7 +541,7 @@ $utilities: map.merge(
     ),
     'padding-start': (
       responsive: true,
-      property: padding-left,
+      property: padding-inline-start,
       class: ps,
       values: $spacers,
     ),

core/scss/_variables.scss

@@ -1957,7 +1957,7 @@ $form-floating-input-padding-t: 1.625rem !default;
 $form-floating-input-padding-b: 0.625rem !default;
 $form-floating-label-height: 1.5em !default;
 $form-floating-label-opacity: 0.65 !default;
-$form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !default;
+$form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(calc(var(--#{$prefix}dir) * 0.15rem)) #{'/*rtl:ignore*/'} !default;
 $form-floating-label-disabled-color: $gray-600 !default;
 $form-floating-transition:
   opacity 0.1s ease-in-out,

core/scss/bootstrap/_button-group.scss

@@ -43,7 +43,7 @@
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn,
   > .btn-group:not(:first-child) {
-    margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
+    margin-inline-start: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners
@@ -80,28 +80,28 @@
 //
 
 .dropdown-toggle-split {
-  padding-right: $btn-padding-x * 0.75;
-  padding-left: $btn-padding-x * 0.75;
+  padding-inline-end: $btn-padding-x * 0.75;
+  padding-inline-start: $btn-padding-x * 0.75;
 
   &::after,
   .dropup &::after,
   .dropend &::after {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 
   .dropstart &::before {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }
 
 .btn-sm + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-sm * 0.75;
-  padding-left: $btn-padding-x-sm * 0.75;
+  padding-inline-end: $btn-padding-x-sm * 0.75;
+  padding-inline-start: $btn-padding-x-sm * 0.75;
 }
 
 .btn-lg + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-lg * 0.75;
-  padding-left: $btn-padding-x-lg * 0.75;
+  padding-inline-end: $btn-padding-x-lg * 0.75;
+  padding-inline-start: $btn-padding-x-lg * 0.75;
 }
 
 // The clickable button for toggling the menu

core/scss/bootstrap/_card.scss

@@ -41,8 +41,8 @@
   @include box-shadow(var(--#{$prefix}card-box-shadow));
 
   > hr {
-    margin-right: 0;
-    margin-left: 0;
+    margin-inline-end: 0;
+    margin-inline-start: 0;
   }
 
   > .list-group {
@@ -97,7 +97,7 @@
   }
 
   + .card-link {
-    margin-left: var(--#{$prefix}card-spacer-x);
+    margin-inline-start: var(--#{$prefix}card-spacer-x);
   }
 }
 
@@ -133,9 +133,9 @@
 //
 
 .card-header-tabs {
-  margin-right: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  margin-inline-end: calc(-0.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(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  margin-inline-start: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
   border-bottom: 0;
 
   .nav-link.active {
@@ -145,17 +145,14 @@
 }
 
 .card-header-pills {
-  margin-right: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  margin-inline-end: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  margin-inline-start: calc(-0.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;
+  inset: 0;
   padding: var(--#{$prefix}card-img-overlay-padding);
   @include border-radius(var(--#{$prefix}card-inner-border-radius));
 }
@@ -197,8 +194,8 @@
       margin-bottom: 0;
 
       + .card {
-        margin-left: 0;
-        border-left: 0;
+        margin-inline-start: 0;
+        border-inline-start: 0;
       }
 
       // Handle rounded corners

core/scss/bootstrap/_carousel.scss

@@ -31,9 +31,9 @@
 .carousel-item {
   position: relative;
   display: none;
-  float: left;
+  float: inline-start;
   width: 100%;
-  margin-right: -100%;
+  margin-inline-end: -100%;
   backface-visibility: hidden;
   @include transition($carousel-transition);
 }
@@ -46,12 +46,14 @@
 
 .carousel-item-next:not(.carousel-item-start),
 .active.carousel-item-end {
-  transform: translateX(100%);
+  /*rtl:ignore*/
+  transform: translateX(calc(var(--#{$prefix}dir) * 100%));
 }
 
 .carousel-item-prev:not(.carousel-item-end),
 .active.carousel-item-start {
-  transform: translateX(-100%);
+  /*rtl:ignore*/
+  transform: translateX(calc(var(--#{$prefix}dir) * -100%));
 }
 
 //
@@ -114,11 +116,11 @@
   }
 }
 .carousel-control-prev {
-  left: 0;
+  inset-inline-start: 0;
   background-image: if(sass($enable-gradients): linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)); else: null);
 }
 .carousel-control-next {
-  right: 0;
+  inset-inline-end: 0;
   background-image: if(sass($enable-gradients): linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)); else: null);
 }
 
@@ -147,17 +149,16 @@
 
 .carousel-indicators {
   position: absolute;
-  right: 0;
+  inset-inline: 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-inline-end: $carousel-control-width;
   margin-bottom: 1rem;
-  margin-left: $carousel-control-width;
+  margin-inline-start: $carousel-control-width;
 
   [data-bs-target],
   [data-target] {
@@ -166,8 +167,8 @@
     width: $carousel-indicator-width;
     height: $carousel-indicator-height;
     padding: 0;
-    margin-right: $carousel-indicator-spacer;
-    margin-left: $carousel-indicator-spacer;
+    margin-inline-end: $carousel-indicator-spacer;
+    margin-inline-start: $carousel-indicator-spacer;
     text-indent: -999px;
     cursor: pointer;
     background-color: var(--#{$prefix}carousel-indicator-active-bg);
@@ -191,9 +192,8 @@
 
 .carousel-caption {
   position: absolute;
-  right: (100% - $carousel-caption-width) * 0.5;
+  inset-inline: (100% - $carousel-caption-width) * 0.5;
   bottom: $carousel-caption-spacer;
-  left: (100% - $carousel-caption-width) * 0.5;
   padding-top: $carousel-caption-padding-y;
   padding-bottom: $carousel-caption-padding-y;
   color: var(--#{$prefix}carousel-caption-color);

core/scss/bootstrap/_dropdown.scss

@@ -58,7 +58,7 @@
   margin: 0; // Override default margin of ul
   @include font-size(var(--#{$prefix}dropdown-font-size));
   color: var(--#{$prefix}dropdown-color);
-  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+  text-align: start; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   list-style: none;
   background-color: var(--#{$prefix}dropdown-bg);
   background-clip: padding-box;
@@ -69,7 +69,7 @@
   &[data-bs-popper],
   &[data-tblr-popper] {
     top: 100%;
-    left: 0;
+    inset-inline-start: 0;
     margin-top: var(--#{$prefix}dropdown-spacer);
   }
 
@@ -98,8 +98,8 @@
 
       &[data-bs-popper],
       &[data-tblr-popper] {
-        right: auto;
-        left: 0;
+        inset-inline-end: auto;
+        inset-inline-start: 0;
       }
     }
 
@@ -108,8 +108,8 @@
 
       &[data-bs-popper],
       &[data-tblr-popper] {
-        right: 0;
-        left: auto;
+        inset-inline-end: 0;
+        inset-inline-start: auto;
       }
     }
   }
@@ -136,10 +136,10 @@
   .dropdown-menu[data-bs-popper],
   .dropdown-menu[data-tblr-popper] {
     top: 0;
-    right: auto;
-    left: 100%;
+    inset-inline-end: auto;
+    inset-inline-start: 100%;
     margin-top: 0;
-    margin-left: var(--#{$prefix}dropdown-spacer);
+    margin-inline-start: var(--#{$prefix}dropdown-spacer);
   }
 
   .dropdown-toggle {
@@ -154,10 +154,10 @@
   .dropdown-menu[data-bs-popper],
   .dropdown-menu[data-tblr-popper] {
     top: 0;
-    right: 100%;
-    left: auto;
+    inset-inline-end: 100%;
+    inset-inline-start: auto;
     margin-top: 0;
-    margin-right: var(--#{$prefix}dropdown-spacer);
+    margin-inline-end: var(--#{$prefix}dropdown-spacer);
   }
 
   .dropdown-toggle {

core/scss/bootstrap/_list-group.scss

@@ -31,7 +31,7 @@
   flex-direction: column;
 
   // No need to set list-style: none; since .list-group-item is block level
-  padding-left: 0; // reset padding because ul and ol
+  padding-inline-start: 0; // reset padding because ul and ol
   margin-bottom: 0;
   @include border-radius(var(--#{$prefix}list-group-border-radius));
 }
@@ -149,11 +149,11 @@
 
         + .list-group-item {
           border-top-width: var(--#{$prefix}list-group-border-width);
-          border-left-width: 0;
+          border-inline-start-width: 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-inline-start: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
+            border-inline-start-width: var(--#{$prefix}list-group-border-width);
           }
         }
       }

core/scss/bootstrap/_modal.scss

@@ -36,8 +36,8 @@
   // scss-docs-end modal-css-vars
 
   position: fixed;
+  inset-inline-start: 0;
   top: 0;
-  left: 0;
   z-index: var(--#{$prefix}modal-zindex);
   display: none;
   width: 100%;
@@ -137,9 +137,9 @@
     padding: calc(var(--#{$prefix}modal-header-padding-y) * 0.5) calc(var(--#{$prefix}modal-header-padding-x) * 0.5);
     // Split properties to avoid invalid calc() function if value is 0
     margin-top: calc(-0.5 * var(--#{$prefix}modal-header-padding-y));
-    margin-right: calc(-0.5 * var(--#{$prefix}modal-header-padding-x));
+    margin-inline-end: calc(-0.5 * var(--#{$prefix}modal-header-padding-x));
     margin-bottom: calc(-0.5 * var(--#{$prefix}modal-header-padding-y));
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 }
 
@@ -189,8 +189,8 @@
   // Automatically set modal's width for larger viewports
   .modal-dialog {
     max-width: var(--#{$prefix}modal-width);
-    margin-right: auto;
-    margin-left: auto;
+    margin-inline-end: auto;
+    margin-inline-start: auto;
   }
 
   .modal-sm {

core/scss/bootstrap/_nav.scss

@@ -18,7 +18,7 @@
 
   display: flex;
   flex-wrap: wrap;
-  padding-left: 0;
+  padding-inline-start: 0;
   margin-bottom: 0;
   list-style: none;
 }
@@ -135,8 +135,8 @@
   gap: var(--#{$prefix}nav-underline-gap);
 
   .nav-link {
-    padding-right: 0;
-    padding-left: 0;
+    padding-inline-end: 0;
+    padding-inline-start: 0;
     border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
 
     &:hover,

core/scss/bootstrap/_navbar.scss

@@ -68,7 +68,7 @@
 .navbar-brand {
   padding-top: var(--#{$prefix}navbar-brand-padding-y);
   padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
-  margin-right: var(--#{$prefix}navbar-brand-margin-end);
+  margin-inline-end: var(--#{$prefix}navbar-brand-margin-end);
   @include font-size(var(--#{$prefix}navbar-brand-font-size));
   color: var(--#{$prefix}navbar-brand-color);
   text-decoration: if(sass($link-decoration == none): null; else: none);
@@ -98,7 +98,7 @@
 
   display: flex;
   flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
-  padding-left: 0;
+  padding-inline-start: 0;
   margin-bottom: 0;
   list-style: none;
 
@@ -208,8 +208,8 @@
           }
 
           .nav-link {
-            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
-            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
+            padding-inline-end: var(--#{$prefix}navbar-nav-link-padding-x);
+            padding-inline-start: var(--#{$prefix}navbar-nav-link-padding-x);
           }
         }
 

core/scss/bootstrap/_offcanvas.scss

@@ -52,24 +52,25 @@
 
       &.offcanvas-start {
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         width: var(--#{$prefix}offcanvas-width);
-        border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
-        transform: translateX(-100%);
+        border-inline-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+        /*rtl:ignore*/
+        transform: translateX(calc(var(--#{$prefix}dir) * -100%));
       }
 
       &.offcanvas-end {
         top: 0;
-        right: 0;
+        inset-inline-end: 0;
         width: var(--#{$prefix}offcanvas-width);
-        border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
-        transform: translateX(100%);
+        border-inline-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+        /*rtl:ignore*/
+        transform: translateX(calc(var(--#{$prefix}dir) * 100%));
       }
 
       &.offcanvas-top {
         top: 0;
-        right: 0;
-        left: 0;
+        inset-inline: 0;
         height: var(--#{$prefix}offcanvas-height);
         max-height: 100%;
         border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
@@ -77,8 +78,7 @@
       }
 
       &.offcanvas-bottom {
-        right: 0;
-        left: 0;
+        inset-inline: 0;
         height: var(--#{$prefix}offcanvas-height);
         max-height: 100%;
         border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
@@ -133,9 +133,9 @@
     padding: calc(var(--#{$prefix}offcanvas-padding-y) * 0.5) calc(var(--#{$prefix}offcanvas-padding-x) * 0.5);
     // Split properties to avoid invalid calc() function if value is 0
     margin-top: calc(-0.5 * var(--#{$prefix}offcanvas-padding-y));
-    margin-right: calc(-0.5 * var(--#{$prefix}offcanvas-padding-x));
+    margin-inline-end: calc(-0.5 * var(--#{$prefix}offcanvas-padding-x));
     margin-bottom: calc(-0.5 * var(--#{$prefix}offcanvas-padding-y));
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 }
 

core/scss/bootstrap/_pagination.scss

@@ -74,7 +74,7 @@
 
 .page-item {
   &:not(:first-child) .page-link {
-    margin-left: $pagination-margin-start;
+    margin-inline-start: $pagination-margin-start;
   }
 
   @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {

core/scss/bootstrap/_popover.scss

@@ -127,10 +127,10 @@
   .popover-header::before {
     position: absolute;
     top: 0;
-    left: 50%;
+    inset-inline-start: 50%;
     display: block;
     width: var(--#{$prefix}popover-arrow-width);
-    margin-left: calc(-0.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
+    margin-inline-start: calc(-0.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);
   }

core/scss/bootstrap/_reboot.scss

@@ -150,7 +150,7 @@ address {
 
 ol,
 ul {
-  padding-left: 2rem;
+  padding-inline-start: 2rem;
 }
 
 ol,
@@ -175,7 +175,7 @@ dt {
 
 dd {
   margin-bottom: 0.5rem;
-  margin-left: 0; // 1
+  margin-inline-start: 0; // 1
 }
 
 // Blockquote
@@ -337,7 +337,7 @@ caption {
   padding-top: $table-cell-padding-y;
   padding-bottom: $table-cell-padding-y;
   color: $table-caption-color;
-  text-align: left;
+  text-align: start;
 }
 
 // 1. Removes font-weight bold by inheriting
@@ -480,7 +480,7 @@ fieldset {
 //    See https://github.com/twbs/bootstrap/issues/29712
 
 legend {
-  float: left; // 1
+  float: inline-start; // 1
   width: 100%;
   padding: 0;
   margin-bottom: $legend-margin-bottom;

core/scss/bootstrap/_toasts.scss

@@ -64,8 +64,8 @@
   @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
 
   .btn-close {
-    margin-right: calc(-0.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
-    margin-left: var(--#{$prefix}toast-padding-x);
+    margin-inline-end: calc(-0.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
+    margin-inline-start: var(--#{$prefix}toast-padding-x);
   }
 }
 

core/scss/bootstrap/_type.scss

@@ -45,7 +45,7 @@
   display: inline-block;
 
   &:not(:last-child) {
-    margin-right: $list-inline-padding;
+    margin-inline-end: $list-inline-padding;
   }
 }
 

core/scss/bootstrap/forms/_floating-labels.scss

@@ -14,7 +14,7 @@
   > label {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     z-index: 2;
     max-width: 100%;
     height: 100%; // allow textareas
@@ -53,7 +53,7 @@
   > .form-select {
     padding-top: $form-floating-input-padding-t;
     padding-bottom: $form-floating-input-padding-b;
-    padding-left: $form-floating-padding-x;
+    padding-inline-start: $form-floating-padding-x;
   }
 
   > .form-control:focus,

core/scss/bootstrap/forms/_form-check.scss

@@ -7,24 +7,24 @@
 .form-check {
   display: block;
   min-height: $form-check-min-height;
-  padding-left: $form-check-padding-start;
+  padding-inline-start: $form-check-padding-start;
   margin-bottom: $form-check-margin-bottom;
 
   .form-check-input {
-    float: left;
-    margin-left: $form-check-padding-start * -1;
+    float: inline-start;
+    margin-inline-start: $form-check-padding-start * -1;
   }
 }
 
 .form-check-reverse {
-  padding-right: $form-check-padding-start;
-  padding-left: 0;
-  text-align: right;
+  padding-inline-end: $form-check-padding-start;
+  padding-inline-start: 0;
+  text-align: end;
 
   .form-check-input {
-    float: right;
-    margin-right: $form-check-padding-start * -1;
-    margin-left: 0;
+    float: inline-end;
+    margin-inline-end: $form-check-padding-start * -1;
+    margin-inline-start: 0;
   }
 }
 
@@ -124,13 +124,13 @@
 //
 
 .form-switch {
-  padding-left: $form-switch-padding-start;
+  padding-inline-start: $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;
+    margin-inline-start: $form-switch-padding-start * -1;
     background-image: var(--#{$prefix}form-switch-bg);
     background-position: left center;
     @include border-radius($form-switch-border-radius, 0);
@@ -152,19 +152,19 @@
   }
 
   &.form-check-reverse {
-    padding-right: $form-switch-padding-start;
-    padding-left: 0;
+    padding-inline-end: $form-switch-padding-start;
+    padding-inline-start: 0;
 
     .form-check-input {
-      margin-right: $form-switch-padding-start * -1;
-      margin-left: 0;
+      margin-inline-end: $form-switch-padding-start * -1;
+      margin-inline-start: 0;
     }
   }
 }
 
 .form-check-inline {
   display: inline-block;
-  margin-right: $form-check-inline-margin-end;
+  margin-inline-end: $form-check-inline-margin-end;
 }
 
 .btn-check {

core/scss/bootstrap/forms/_form-control.scss

@@ -139,8 +139,8 @@
 
   &.form-control-sm,
   &.form-control-lg {
-    padding-right: 0;
-    padding-left: 0;
+    padding-inline-end: 0;
+    padding-inline-start: 0;
   }
 }
 

core/scss/bootstrap/forms/_form-select.scss

@@ -40,7 +40,7 @@
 
   &[multiple],
   &[size]:not([size='1']) {
-    padding-right: $form-select-padding-x;
+    padding-inline-end: $form-select-padding-x;
     background-image: none;
   }
 
@@ -60,7 +60,7 @@
 .form-select-sm {
   padding-top: $form-select-padding-y-sm;
   padding-bottom: $form-select-padding-y-sm;
-  padding-left: $form-select-padding-x-sm;
+  padding-inline-start: $form-select-padding-x-sm;
   @include font-size($form-select-font-size-sm);
   @include border-radius($form-select-border-radius-sm);
 }
@@ -68,7 +68,7 @@
 .form-select-lg {
   padding-top: $form-select-padding-y-lg;
   padding-bottom: $form-select-padding-y-lg;
-  padding-left: $form-select-padding-x-lg;
+  padding-inline-start: $form-select-padding-x-lg;
   @include font-size($form-select-font-size-lg);
   @include border-radius($form-select-border-radius-lg);
 }

core/scss/bootstrap/forms/_input-group.scss

@@ -92,7 +92,7 @@
 
 .input-group-lg > .form-select,
 .input-group-sm > .form-select {
-  padding-right: $form-select-padding-x + $form-select-indicator-padding;
+  padding-inline-end: $form-select-padding-x + $form-select-indicator-padding;
 }
 
 // Rounded corners
@@ -127,7 +127,7 @@
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
+    margin-inline-start: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
     @include border-start-radius(0);
   }
 

core/scss/layout/_navbar.scss

@@ -122,7 +122,8 @@ Navbar
         position: absolute;
         top: 0.5rem;
         inset-inline-end: 0.5rem;
-        transform: translate(50%, -50%);
+        /*rtl:ignore*/
+        transform: translate(calc(var(--#{$prefix}dir) * 50%), -50%);
       }
     }
   }

core/scss/mixins/bootstrap/_backdrop.scss

@@ -5,8 +5,8 @@
 // Shared between modals and offcanvases
 @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
   position: fixed;
+  inset-inline-start: 0;
   top: 0;
-  left: 0;
   z-index: $zindex;
   width: 100vw;
   height: 100vh;

core/scss/mixins/bootstrap/_caret.scss

@@ -4,29 +4,30 @@
 @use 'breakpoints' as *;
 @mixin caret-down($width: $caret-width) {
   border-top: $width solid;
-  border-right: $width solid transparent;
+  border-inline-end: $width solid transparent;
   border-bottom: 0;
-  border-left: $width solid transparent;
+  border-inline-start: $width solid transparent;
 }
 
 @mixin caret-up($width: $caret-width) {
   border-top: 0;
-  border-right: $width solid transparent;
+  border-inline-end: $width solid transparent;
   border-bottom: $width solid;
-  border-left: $width solid transparent;
+  border-inline-start: $width solid transparent;
 }
 
 @mixin caret-end($width: $caret-width) {
   border-top: $width solid transparent;
-  border-right: 0;
+  border-inline-end: 0;
   border-bottom: $width solid transparent;
-  border-left: $width solid;
+  border-inline-start: $width solid;
 }
 
 @mixin caret-start($width: $caret-width) {
   border-top: $width solid transparent;
-  border-right: $width solid;
+  border-inline-end: $width solid;
   border-bottom: $width solid transparent;
+  border-inline-start: 0;
 }
 
 @mixin caret($direction: down, $width: $caret-width, $spacing: $caret-spacing, $vertical-align: $caret-vertical-align) {

core/scss/mixins/bootstrap/_container.scss

@@ -8,8 +8,8 @@
   --#{$prefix}gutter-x: #{$gutter};
   --#{$prefix}gutter-y: 0;
   width: 100%;
-  padding-right: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
-  margin-right: auto;
-  margin-left: auto;
+  padding-inline-end: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
+  padding-inline-start: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
+  margin-inline-end: auto;
+  margin-inline-start: auto;
 }

core/scss/mixins/bootstrap/_forms.scss

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

core/scss/mixins/bootstrap/_grid.scss

@@ -17,8 +17,8 @@
   display: flex;
   flex-wrap: wrap;
   margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
-  margin-right: calc(-0.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-0.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+  margin-inline-end: calc(-0.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+  margin-inline-start: calc(-0.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
 }
 
 @mixin make-col-ready() {
@@ -26,8 +26,8 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%;
-  padding-right: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
+  padding-inline-end: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
+  padding-inline-start: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
   margin-top: var(--#{$prefix}gutter-y);
 }
 
@@ -48,7 +48,7 @@
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: divide($size, $columns);
-  margin-left: if(sass($num == 0): 0; else: math.percentage($num));
+  margin-inline-start: if(sass($num == 0): 0; else: math.percentage($num));
 }
 
 @mixin row-cols($count) {

core/scss/mixins/bootstrap/_lists.scss

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

core/scss/mixins/bootstrap/_rfs.scss

@@ -314,16 +314,26 @@ $rfs-mq-property-height: if(sass($rfs-mode == max-media-query): max-height; else
   @include rfs($value, padding-top);
 }
 
+@mixin padding-inline-end($value) {
+  @include rfs($value, padding-inline-end);
+}
+
+// Deprecated: use padding-inline-end() instead
 @mixin padding-right($value) {
-  @include rfs($value, padding-right);
+  @include padding-inline-end($value);
 }
 
 @mixin padding-bottom($value) {
   @include rfs($value, padding-bottom);
 }
 
+@mixin padding-inline-start($value) {
+  @include rfs($value, padding-inline-start);
+}
+
+// Deprecated: use padding-inline-start() instead
 @mixin padding-left($value) {
-  @include rfs($value, padding-left);
+  @include padding-inline-start($value);
 }
 
 @mixin margin($value) {
@@ -334,14 +344,24 @@ $rfs-mq-property-height: if(sass($rfs-mode == max-media-query): max-height; else
   @include rfs($value, margin-top);
 }
 
+@mixin margin-inline-end($value) {
+  @include rfs($value, margin-inline-end);
+}
+
+// Deprecated: use margin-inline-end() instead
 @mixin margin-right($value) {
-  @include rfs($value, margin-right);
+  @include margin-inline-end($value);
 }
 
 @mixin margin-bottom($value) {
   @include rfs($value, margin-bottom);
 }
 
-@mixin margin-left($value) {
-  @include rfs($value, margin-left);
+@mixin margin-inline-start($value) {
+  @include rfs($value, margin-inline-start);
+}
+
+// Deprecated: use margin-inline-start() instead
+@mixin margin-left($value) {
+  @include margin-inline-start($value);
 }

core/scss/tests/_caret.test.scss

@@ -16,9 +16,9 @@
       @include expect() {
         .t {
           border-top: 0.3em solid;
-          border-right: 0.3em solid transparent;
+          border-inline-end: 0.3em solid transparent;
           border-bottom: 0;
-          border-left: 0.3em solid transparent;
+          border-inline-start: 0.3em solid transparent;
         }
       }
     }
@@ -34,9 +34,9 @@
       @include expect() {
         .t {
           border-top: 0;
-          border-right: 0.3em solid transparent;
+          border-inline-end: 0.3em solid transparent;
           border-bottom: 0.3em solid;
-          border-left: 0.3em solid transparent;
+          border-inline-start: 0.3em solid transparent;
         }
       }
     }
@@ -52,8 +52,9 @@
       @include expect() {
         .t {
           border-top: 0.3em solid transparent;
-          border-right: 0.3em solid;
+          border-inline-end: 0.3em solid;
           border-bottom: 0.3em solid transparent;
+          border-inline-start: 0;
         }
       }
     }

core/scss/tests/_generate-utility.test.scss

@@ -68,7 +68,7 @@
       @include output() {
         @include generate-utility(
           (
-            property: margin-right margin-left,
+            property: margin-inline-end margin-inline-start,
             class: mx,
             values: (
               0: 0,
@@ -79,12 +79,12 @@
       }
       @include expect() {
         .mx-0 {
-          margin-right: 0 !important;
-          margin-left: 0 !important;
+          margin-inline-end: 0 !important;
+          margin-inline-start: 0 !important;
         }
         .mx-auto {
-          margin-right: auto !important;
-          margin-left: auto !important;
+          margin-inline-end: auto !important;
+          margin-inline-start: auto !important;
         }
       }
     }
@@ -181,8 +181,9 @@
       property: float,
       class: float,
       values: (
-        left,
-        right,
+        start: inline-start,
+        end: inline-end,
+        none: none,
       ),
     ),
   );
@@ -209,11 +210,14 @@
         .d-flex {
           display: flex !important;
         }
-        .float-left {
-          float: left !important;
+        .float-start {
+          float: inline-start !important;
         }
-        .float-right {
-          float: right !important;
+        .float-end {
+          float: inline-end !important;
+        }
+        .float-none {
+          float: none !important;
         }
 
         // responsive breakpoints: only `d` (responsive: true) is repeated; `float` is not

core/scss/tests/_grid.test.scss

@@ -67,7 +67,7 @@
       }
       @include expect() {
         .t {
-          margin-left: 25%;
+          margin-inline-start: 25%;
         }
       }
     }
@@ -82,7 +82,7 @@
       }
       @include expect() {
         .t {
-          margin-left: 0;
+          margin-inline-start: 0;
         }
       }
     }
@@ -122,8 +122,8 @@
           display: flex;
           flex-wrap: wrap;
           margin-top: calc(-1 * var(--tblr-gutter-y));
-          margin-right: calc(-0.5 * var(--tblr-gutter-x));
-          margin-left: calc(-0.5 * var(--tblr-gutter-x));
+          margin-inline-end: calc(-0.5 * var(--tblr-gutter-x));
+          margin-inline-start: calc(-0.5 * var(--tblr-gutter-x));
         }
       }
     }
@@ -143,8 +143,8 @@
           flex-shrink: 0;
           width: 100%;
           max-width: 100%;
-          padding-right: calc(var(--tblr-gutter-x) * 0.5);
-          padding-left: calc(var(--tblr-gutter-x) * 0.5);
+          padding-inline-end: calc(var(--tblr-gutter-x) * 0.5);
+          padding-inline-start: calc(var(--tblr-gutter-x) * 0.5);
           margin-top: var(--tblr-gutter-y);
         }
       }

core/scss/ui/_badges.scss

@@ -83,7 +83,8 @@
   position: absolute !important;
   top: 0 !important;
   inset-inline-end: 0 !important;
-  transform: translate(50%, -50%);
+  /*rtl:ignore*/
+  transform: translate(calc(var(--#{$prefix}dir) * 50%), -50%);
   z-index: 1;
 }
 

core/scss/ui/_buttons.scss

@@ -315,7 +315,8 @@
   &:hover,
   &:focus-visible {
     .icon {
-      transform: translateX(4px);
+      /*rtl:ignore*/
+      transform: translateX(calc(var(--#{$prefix}dir) * 4px));
     }
   }
 
@@ -332,7 +333,8 @@
     &:hover,
     &:focus-visible {
       .icon {
-        transform: translateX(-4px);
+        /*rtl:ignore*/
+        transform: translateX(calc(var(--#{$prefix}dir) * -4px));
       }
     }
   }

core/scss/ui/_cards.scss

@@ -457,22 +457,15 @@ Card table
     td,
     th {
       &:first-child {
-        padding-left: $card-spacer-x;
-        border-left: 0;
-        border-top-left-radius: var(--#{$prefix}card-border-radius);
-      }
-
-      &:last-child {
-        padding-right: $card-spacer-x;
-        border-right: 0;
-        border-top-right-radius: var(--#{$prefix}card-border-radius);
         padding-inline-start: $card-spacer-x;
         border-inline-start: 0;
+        border-start-start-radius: var(--#{$prefix}card-border-radius);
       }
 
       &:last-child {
         padding-inline-end: $card-spacer-x;
         border-inline-end: 0;
+        border-start-end-radius: var(--#{$prefix}card-border-radius);
       }
     }
   }

core/scss/ui/_loaders.scss

@@ -56,7 +56,8 @@ Dimmer
 
 @keyframes animated-dots {
   0% {
-    transform: translateX(-100%);
+    /*rtl:ignore*/
+    transform: translateX(calc(var(--#{$prefix}dir) * -100%));
   }
 }
 

core/scss/ui/_steps.scss

@@ -83,7 +83,8 @@
     align-items: center;
     justify-content: center;
     @include border-radius(var(--#{$prefix}border-radius-pill));
-    transform: translateX(-50%);
+    /*rtl:ignore*/
+    transform: translateX(calc(var(--#{$prefix}dir) * -50%));
     color: var(--#{$prefix}white);
     width: var(--#{$prefix}steps-dot-size);
     height: var(--#{$prefix}steps-dot-size);
@@ -157,7 +158,8 @@
       &:after {
         position: absolute;
         content: '';
-        transform: translateX(-50%);
+        /*rtl:ignore*/
+        transform: translateX(calc(var(--#{$prefix}dir) * -50%));
         top: var(--#{$prefix}steps-dot-offset);
         inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5);
         width: var(--#{$prefix}steps-border-width);

core/scss/ui/_switch-icon.scss

@@ -161,12 +161,14 @@
   }
 
   .switch-icon-b {
-    transform: translateX(100%);
+    /*rtl:ignore*/
+    transform: translateX(calc(var(--#{$prefix}dir) * 100%));
   }
 
   &.active {
     .switch-icon-a {
-      transform: translateX(-100%);
+      /*rtl:ignore*/
+      transform: translateX(calc(var(--#{$prefix}dir) * -100%));
     }
 
     .switch-icon-b {
@@ -182,12 +184,14 @@
   }
 
   .switch-icon-b {
-    transform: translateX(-100%);
+    /*rtl:ignore*/
+    transform: translateX(calc(var(--#{$prefix}dir) * -100%));
   }
 
   &.active {
     .switch-icon-a {
-      transform: translateX(100%);
+      /*rtl:ignore*/
+      transform: translateX(calc(var(--#{$prefix}dir) * 100%));
     }
 
     .switch-icon-b {