fix(styles): CSS logical properties cleanup fixes

packages/react/src/components/Slider/Slider-test.js

@@ -119,7 +119,9 @@ describe('Slider', () => {
 
     it('should accurately position slider on mount', () => {
       renderSlider({ value: 50, max: 100, min: 0 });
-      expect(screen.getByRole('slider')).toHaveStyle({ left: '50%' });
+      expect(screen.getByRole('slider')).toHaveStyle({
+        insetInlineStart: '50%',
+      });
     });
 
     it('marks input field as hidden if hidden via props', () => {

packages/react/src/components/Slider/Slider.tsx

@@ -362,6 +362,7 @@ export default class Slider extends PureComponent<SliderProps> {
     left: 0,
     needsOnRelease: false,
     isValid: true,
+    isRtl: false,
   };
 
   thumbRef: React.RefObject<HTMLDivElement>;
@@ -384,7 +385,7 @@ export default class Slider extends PureComponent<SliderProps> {
       const { value, left } = this.calcValue({
         useRawValue: true,
       });
-      this.setState({ value, left });
+      this.setState({ value, left, isRtl: document?.dir === 'rtl' });
     }
   }
 
@@ -400,13 +401,24 @@ export default class Slider extends PureComponent<SliderProps> {
     // Fire onChange event handler if present, if there's a usable value, and
     // if the value is different from the last one
 
+    // Set alternative positioning if direction is 'rtl'
     if (this.thumbRef.current) {
-      this.thumbRef.current.style.left = `${this.state.left}%`;
+      if (this.state.isRtl) {
+        this.thumbRef.current.style.insetInlineStart = `calc(${this.state.left}% - 14px)`;
+      } else {
+        this.thumbRef.current.style.insetInlineStart = `${this.state.left}%`;
+      }
     }
     if (this.filledTrackRef.current) {
-      this.filledTrackRef.current.style.transform = `translate(0%, -50%) scaleX(${
-        this.state.left / 100
-      })`;
+      if (this.state.isRtl) {
+        this.filledTrackRef.current.style.transform = `translate(100%, -50%) scaleX(-${
+          this.state.left / 100
+        })`;
+      } else {
+        this.filledTrackRef.current.style.transform = `translate(0%, -50%) scaleX(${
+          this.state.left / 100
+        })`;
+      }
     }
     if (
       prevState.value !== this.state.value &&
@@ -699,7 +711,9 @@ export default class Slider extends PureComponent<SliderProps> {
     // use the provided value or state's value to calculate it instead.
     let leftPercent;
     if (clientX != null) {
-      const leftOffset = clientX - (boundingRect?.left ?? 0);
+      const leftOffset = this.state.isRtl
+        ? (boundingRect?.right ?? 0) - clientX
+        : clientX - (boundingRect?.left ?? 0);
       leftPercent = leftOffset / width;
     } else {
       if (value == null) {

packages/styles/scss/components/checkbox/_checkbox.scss

@@ -333,10 +333,10 @@
     @include skeleton;
 
     // Add extra spacing when label is present
-    margin: convert.to-rem(1px) 0 0 convert.to-rem(6px);
     block-size: $spacing-05;
-
     inline-size: convert.to-rem(100px);
+    margin-block: convert.to-rem(1px) 0;
+    margin-inline: convert.to-rem(6px) 0;
   }
 
   //-----------------------------------------------

packages/styles/scss/components/code-snippet/_code-snippet.scss

@@ -255,6 +255,13 @@ $copy-btn-feedback: $background-inverse !default;
     inset-inline-end: 0;
   }
 
+  [dir='rtl']
+    .#{$prefix}--snippet--multi.#{$prefix}--snippet--has-right-overflow
+    .#{$prefix}--snippet-container
+    pre::after {
+    background-image: linear-gradient(to left, transparent, $layer);
+  }
+
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre code {
     overflow: hidden;
   }
@@ -470,6 +477,14 @@ $copy-btn-feedback: $background-inverse !default;
     margin-inline-start: -$spacing-05;
   }
 
+  [dir='rtl'] .#{$prefix}--snippet__overflow-indicator--left {
+    background-image: linear-gradient(to right, transparent, $layer);
+  }
+
+  [dir='rtl'] .#{$prefix}--snippet__overflow-indicator--right {
+    background-image: linear-gradient(to left, transparent, $layer);
+  }
+
   .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right,
   .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--left {
     position: absolute;

packages/styles/scss/components/pagination/_pagination.scss

@@ -226,6 +226,11 @@
     margin-block-start: 0;
   }
 
+  [dir='rtl'] .#{$prefix}--pagination__button > svg,
+  [dir='rtl'] .#{$prefix}--btn--ghost.#{$prefix}--pagination__button > svg {
+    transform: rotate(0.5turn);
+  }
+
   .#{$prefix}--pagination--sm .#{$prefix}--pagination__button,
   .#{$prefix}--pagination--sm
     .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {

packages/styles/scss/components/progress-bar/_progress-bar.scss

@@ -62,10 +62,14 @@
     color: $interactive;
     inline-size: 100%;
     transform: scaleX(0);
-    transform-origin: 0 center #{'/*rtl:100% center*/'};
+    transform-origin: 0 center;
     transition: transform $duration-fast-02 motion(standard, productive);
   }
 
+  [dir='rtl'] .#{$prefix}--progress-bar__bar {
+    transform-origin: 100% center;
+  }
+
   .#{$prefix}--progress-bar--indeterminate
     .#{$prefix}--progress-bar__track::after {
     position: absolute;
@@ -84,6 +88,12 @@
     inset: 0;
   }
 
+  [dir='rtl']
+    .#{$prefix}--progress-bar--indeterminate
+    .#{$prefix}--progress-bar__track::after {
+    animation-name: progress-bar-indeterminate-rtl;
+  }
+
   .#{$prefix}--progress-bar__helper-text {
     @include type-style('helper-text-01');
 
@@ -140,6 +150,17 @@
     }
   }
 
+  @keyframes progress-bar-indeterminate-rtl {
+    0% {
+      background-position-x: -105%;
+    }
+
+    80%,
+    100% {
+      background-position-x: 25%;
+    }
+  }
+
   .#{$prefix}--progress-bar--inline {
     display: flex;
     align-items: center;