@patternfly/patternfly 5.1.0-prerelease.8 → 5.1.0

package/components/Popover/popover.scss

@@ -88,74 +88,84 @@
     --#{$popover}--MaxWidth: none;
   }
 
-  &.pf-m-top,
-  &.pf-m-top-left,
-  &.pf-m-top-right {
-    .#{$popover}__arrow {
-     inset-block-end: 0;
-     inset-inline-start: 50%;
-      transform: translateX(var(--#{$popover}__arrow--m-top--TranslateX)) translateY(var(--#{$popover}__arrow--m-top--TranslateY)) rotate(var(--#{$popover}__arrow--m-top--Rotate));
-    }
-  }
-
-  &.pf-m-bottom,
-  &.pf-m-bottom-left,
-  &.pf-m-bottom-right {
-    .#{$popover}__arrow {
-     inset-block-start: 0;
-     inset-inline-start: 50%;
-      transform: translateX(var(--#{$popover}__arrow--m-bottom--TranslateX)) translateY(var(--#{$popover}__arrow--m-bottom--TranslateY)) rotate(var(--#{$popover}__arrow--m-bottom--Rotate));
-    }
-  }
-
-  &.pf-m-left,
-  &.pf-m-left-top,
-  &.pf-m-left-bottom {
-    .#{$popover}__arrow {
-     inset-block-start: 50%;
-     inset-inline-end: 0;
-      transform: translateX(var(--#{$popover}__arrow--m-left--TranslateX)) translateY(var(--#{$popover}__arrow--m-left--TranslateY)) rotate(var(--#{$popover}__arrow--m-left--Rotate));
-    }
-  }
-
-  &.pf-m-right,
-  &.pf-m-right-top,
-  &.pf-m-right-bottom {
-    .#{$popover}__arrow {
-     inset-block-start: 50%;
-     inset-inline-start: 0;
-      transform: translateX(var(--#{$popover}__arrow--m-right--TranslateX)) translateY(var(--#{$popover}__arrow--m-right--TranslateY)) rotate(var(--#{$popover}__arrow--m-right--Rotate));
-    }
-  }
-
-  &.pf-m-left-top,
-  &.pf-m-right-top {
-    .#{$popover}__arrow {
-     inset-block-start: var(--#{$popover}__arrow--Height);
-    }
-  }
-
-  &.pf-m-left-bottom,
-  &.pf-m-right-bottom {
-    .#{$popover}__arrow {
-     inset-block-start: auto;
-     inset-block-end: 0;
-    }
-  }
-
-  &.pf-m-top-left,
-  &.pf-m-bottom-left {
-    .#{$popover}__arrow {
-     inset-inline-start: var(--#{$popover}__arrow--Width);
-    }
-  }
-
-  &.pf-m-top-right,
-  &.pf-m-bottom-right {
-    .#{$popover}__arrow {
-     inset-inline-start: auto;
-     inset-inline-end: 0;
-    }
+  &:is(
+    .pf-m-top,
+    .pf-m-top-left,
+    .pf-m-top-right
+  ) {
+    --#{$popover}__arrow--Bottom: var(--#{$popover}--m-top--Bottom, 0);
+    --#{$popover}__arrow--Left: var(--#{$popover}--m-top--Left, 50%);
+    --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-top--TranslateX);
+    --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-top--TranslateY);
+    --#{$popover}__arrow--Rotate: var(--#{$popover}__arrow--m-top--Rotate);
+  }
+
+  &:is(
+    .pf-m-bottom,
+    .pf-m-bottom-left,
+    .pf-m-bottom-right
+   ) {
+    --#{$popover}__arrow--Top: var(--#{$popover}--m-bottom--Top, 0);
+    --#{$popover}__arrow--Left: var(--#{$popover}--m-bottom--Left, 50%);
+    --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-bottom--TranslateX);
+    --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-bottom--TranslateY);
+    --#{$popover}__arrow--Rotate: var(--#{$popover}__arrow--m-bottom--Rotate);
+  }
+
+  &:is(
+    .pf-m-left,
+    .pf-m-left-top,
+    .pf-m-left-bottom
+  ) {
+    --#{$popover}__arrow--Top: var(--#{$popover}--m-left--Top, 50%);
+    --#{$popover}__arrow--Right: var(--#{$popover}--m-left--Right, 0);
+    --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-left--TranslateX);
+    --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-left--TranslateY);
+    --#{$popover}__arrow--Rotate: var(--#{$popover}__arrow--m-left--Rotate);
+  }
+
+  &:is(
+    .pf-m-right,
+    .pf-m-right-top,
+    .pf-m-right-bottom
+  ) {
+    --#{$popover}__arrow--Top: var(--#{$popover}--m-right--Top, 50%);
+    --#{$popover}__arrow--Left: var(--#{$popover}--m-right--Left, 0);
+    --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-right--TranslateX);
+    --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-right--TranslateY);
+    --#{$popover}__arrow--Rotate: var(--#{$popover}__arrow--m-right--Rotate);
+  }
+
+  &:is(
+    .pf-m-left-top,
+    .pf-m-right-top
+  ) {
+    --#{$popover}__arrow--Top: 0;
+    --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-top--TranslateY);
+  }
+
+  &:is(
+    .pf-m-left-bottom,
+    .pf-m-right-bottom
+  ) {
+    --#{$popover}__arrow--Top: auto;
+    --#{$popover}__arrow--Bottom: 0;
+  }
+
+  &:is(
+    .pf-m-top-left,
+    .pf-m-bottom-left
+  ) {
+    --#{$popover}__arrow--Left: 0;
+    --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-left--TranslateX);
+  }
+
+  &:is(
+    .pf-m-top-right,
+    .pf-m-bottom-right
+  ) {
+    --#{$popover}__arrow--Right: 0;
+    --#{$popover}__arrow--Left: auto;
   }
 
   &.pf-m-danger {
@@ -188,7 +198,7 @@
   position: relative;
   padding-block-start: var(--#{$popover}__content--PaddingTop);
   padding-block-end: var(--#{$popover}__content--PaddingBottom);
-  padding-inline-start: var(--#{$popover}__content--PaddingLeft); 
+  padding-inline-start: var(--#{$popover}__content--PaddingLeft);
   padding-inline-end: var(--#{$popover}__content--PaddingRight);
   background-color: var(--#{$popover}__content--BackgroundColor);
 }
@@ -196,8 +206,8 @@
 // Close button
 .#{$popover}__close {
   position: absolute;
- inset-block-start: var(--#{$popover}__close--Top);
- inset-inline-end: var(--#{$popover}__close--Right);
+  inset-block-start: var(--#{$popover}__close--Top);
+  inset-inline-end: var(--#{$popover}__close--Right);
 
   // Create room for the close button
   + * {
@@ -207,11 +217,18 @@
 
 .#{$popover}__arrow {
   position: absolute;
+  /* stylelint-disable liberty/use-logical-spec */
+  top: var(--#{$popover}__arrow--Top, auto);
+  right: var(--#{$popover}__arrow--Right, auto);
+  bottom: var(--#{$popover}__arrow--Bottom, auto);
+  left: var(--#{$popover}__arrow--Left, auto);
+  /* stylelint-enable */
   width: var(--#{$popover}__arrow--Width);
   height: var(--#{$popover}__arrow--Height);
   pointer-events: none;
   background-color: var(--#{$popover}__arrow--BackgroundColor);
   box-shadow: var(--#{$popover}__arrow--BoxShadow);
+  transform: translateX(var(--#{$popover}__arrow--TranslateX, 0)) translateY(var(--#{$popover}__arrow--TranslateY, 0)) rotate(var(--#{$popover}__arrow--Rotate, 0));
 }
 
 .#{$popover}__header {

package/components/Progress/progress.css

@@ -132,6 +132,12 @@
   color: var(--pf-v5-c-progress__status-icon--Color);
 }
 
+.pf-v5-c-progress__bar::before,
+.pf-v5-c-progress__indicator {
+  top: 0;
+  left: 0;
+}
+
 .pf-v5-c-progress__bar {
   position: relative;
   grid-row: 2/3;
@@ -142,8 +148,6 @@
 }
 .pf-v5-c-progress__bar::before {
   position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   content: "";
@@ -153,8 +157,6 @@
 
 .pf-v5-c-progress__indicator {
   position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
   height: var(--pf-v5-c-progress__indicator--Height);
   background-color: var(--pf-v5-c-progress__indicator--BackgroundColor);
 }

package/components/Progress/progress.scss

@@ -175,6 +175,15 @@
   color: var(--#{$progress}__status-icon--Color);
 }
 
+.#{$progress}__bar::before,
+.#{$progress}__indicator {
+  // disable linter as the indicator element should always grow ltr
+  // stylelint-disable liberty/use-logical-spec
+  top: 0;
+  left: 0;
+  // stylelint-enable
+}
+
 // The progress__bar is a white underlay with a semi-transparent color on top, which matches the progress__indicator color
 .#{$progress}__bar {
   position: relative;
@@ -186,8 +195,6 @@
 
   &::before {
     position: absolute;
-   inset-block-start: 0;
-   inset-inline-start: 0;
     width: 100%;
     height: 100%;
     content: "";
@@ -200,8 +207,6 @@
 // It is assumed that the width of the progress__indicator is set inline or via Javascript
 .#{$progress}__indicator {
   position: absolute; // position absolute to bring above the semi-transparent bar overlay
- inset-block-start: 0;
- inset-inline-start: 0;
   height: var(--#{$progress}__indicator--Height);
   background-color: var(--#{$progress}__indicator--BackgroundColor);
 }

package/components/Skeleton/skeleton.css

@@ -66,6 +66,10 @@
   transform: translate3d(var(--pf-v5-c-skeleton--after--TranslateX), 0, 0);
   animation: var(--pf-v5-c-skeleton--after--AnimationName) var(--pf-v5-c-skeleton--after--AnimationDuration) var(--pf-v5-c-skeleton--after--AnimationTimingFunction) var(--pf-v5-c-skeleton--after--AnimationDelay) var(--pf-v5-c-skeleton--after--AnimationIterationCount);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-skeleton::after {
+  scale: -1 1;
+}
+
 .pf-v5-c-skeleton.pf-m-circle {
   --pf-v5-c-skeleton--BorderRadius: var(--pf-v5-c-skeleton--m-circle--BorderRadius);
 }

package/components/Skeleton/skeleton.scss

@@ -73,6 +73,8 @@
   }
 
   &::after {
+    @include pf-v5-mirror-inline-on-rtl;
+
     position: absolute;
     inset: 0;
     display: block;

package/components/Slider/slider.css

@@ -1,5 +1,6 @@
 .pf-v5-c-slider {
   --pf-v5-c-slider--value: 0;
+  --pf-v5-c-slider__step--Left: 0;
   --pf-v5-c-slider__rail--PaddingTop: var(--pf-v5-global--spacer--md);
   --pf-v5-c-slider__rail--PaddingBottom: var(--pf-v5-global--spacer--md);
   --pf-v5-c-slider__rail-track--Height: 0.25rem;
@@ -7,6 +8,7 @@
   --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--active-color--300);
   --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
   --pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v5-c-slider--value);
+  --pf-v5-c-slider__rail-track--before--fill--direction: right;
   --pf-v5-c-slider__steps--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-slider__steps--Height: var(--pf-v5-c-slider__steps--FontSize);
   --pf-v5-c-slider__step-tick--Top: var(--pf-v5-global--spacer--md);
@@ -58,6 +60,10 @@
   --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-v5-global--palette--black-700);
   display: flex;
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider {
+  --pf-v5-c-slider__rail-track--before--fill--direction: left;
+}
+
 .pf-v5-c-slider.pf-m-disabled {
   --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
   --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
@@ -89,7 +95,7 @@
   position: absolute;
   inset: 0;
   content: "";
-  background: linear-gradient(to right, var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v5-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
+  background: linear-gradient(to var(--pf-v5-c-slider__rail-track--before--fill--direction), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v5-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
   border-radius: var(--pf-v5-c-slider__rail-track--before--BorderRadius);
 }
 
@@ -118,6 +124,7 @@
 }
 
 .pf-v5-c-slider__step-tick {
+  transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
   position: absolute;
   inset-block-start: var(--pf-v5-c-slider__step-tick--Top);
   inset-inline-start: 0;
@@ -125,17 +132,23 @@
   height: var(--pf-v5-c-slider__step-tick--Height);
   background-color: var(--pf-v5-c-slider__step-tick--BackgroundColor);
   border-radius: var(--pf-v5-c-slider__step-tick--BorderRadius);
-  transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
+}
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-tick {
+  transform: translateX(calc(var(--pf-v5-c-slider__step-tick--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
 }
 
 .pf-v5-c-slider__step-label {
+  transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
   position: absolute;
   inset-block-start: var(--pf-v5-c-slider__step-label--Top);
   word-break: normal;
-  transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
+}
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-label {
+  transform: translateX(calc(var(--pf-v5-c-slider__step-label--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
 }
 
 .pf-v5-c-slider__thumb {
+  transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
   position: absolute;
   inset-block-start: var(--pf-v5-c-slider__thumb--Top);
   inset-inline-start: var(--pf-v5-c-slider__thumb--Left);
@@ -145,9 +158,13 @@
   background-color: var(--pf-v5-c-slider__thumb--BackgroundColor);
   border-radius: var(--pf-v5-c-slider__thumb--BorderRadius);
   box-shadow: var(--pf-v5-c-slider__thumb--BoxShadow);
-  transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb {
+  transform: translate(calc(var(--pf-v5-c-slider__thumb--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--TranslateY));
+}
+
 .pf-v5-c-slider__thumb::before {
+  transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
   position: absolute;
   inset-block-start: 50%;
   inset-inline-start: 50%;
@@ -155,8 +172,11 @@
   height: var(--pf-v5-c-slider__thumb--before--Height);
   content: "";
   border-radius: var(--pf-v5-c-slider__thumb--before--BorderRadius);
-  transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb::before {
+  transform: translate(calc(var(--pf-v5-c-slider__thumb--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--before--TranslateY));
+}
+
 .pf-v5-c-slider__thumb:hover {
   --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--hover--BoxShadow);
 }
@@ -172,13 +192,17 @@
   margin-inline-start: var(--pf-v5-c-slider__value--MarginLeft);
 }
 .pf-v5-c-slider__value.pf-m-floating {
+  transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
   --pf-v5-c-slider__value--MarginLeft: 0;
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: var(--pf-v5-c-slider__value--m-floating--Left);
   z-index: var(--pf-v5-c-slider__value--m-floating--ZIndex);
-  transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__value.pf-m-floating {
+  transform: translate(calc(var(--pf-v5-c-slider__value--m-floating--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__value--m-floating--TranslateY));
+}
+
 .pf-v5-c-slider__value .pf-v5-c-form-control {
   width: var(--pf-v5-c-slider__value--c-form-control--Width);
 }

package/components/Slider/slider.scss

@@ -1,8 +1,8 @@
 // @debug $slider; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
 .#{$slider} {
-  // should always be set inline
-  --#{$slider}--value: 0;
+  --#{$slider}--value: 0; // should always be set inline
+  --#{$slider}__step--Left: 0; // should always be set inline
 
   // rail
   --#{$slider}__rail--PaddingTop: var(--#{$pf-global}--spacer--md);
@@ -13,6 +13,12 @@
   --#{$slider}__rail-track--before--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
   --#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop: var(--#{$slider}--value);
 
+  @include pf-v5-bidirectional-style(
+    $prop: --#{$slider}__rail-track--before--fill--direction, 
+    $ltr-val: right,
+    $rtl-val: left
+  );
+
   // steps
   --#{$slider}__steps--FontSize: var(--#{$pf-global}--FontSize--sm);
   --#{$slider}__steps--Height: var(--#{$slider}__steps--FontSize);
@@ -114,7 +120,7 @@
     content: "";
     background:
       linear-gradient(
-        to right,
+        to var(--#{$slider}__rail-track--before--fill--direction),
         var(--#{$slider}__rail-track--before--fill--BackgroundColor),
         var(--#{$slider}__rail-track--before--fill--BackgroundColor) var(--#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop),
         var(--#{$slider}__rail-track--before--base--BackgroundColor) var(--#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop)
@@ -131,8 +137,8 @@
 
 .#{$slider}__step {
   position: absolute;
- inset-block-start: 0;
- inset-inline-start: var(--#{$slider}__step--Left); // set programmatically as an inline style
+  inset-block-start: 0;
+  inset-inline-start: var(--#{$slider}__step--Left); // set programmatically as an inline style
   content: "";
 
   &.pf-m-active {
@@ -151,44 +157,64 @@
 }
 
 .#{$slider}__step-tick {
+  @include pf-v5-bidirectional-style(
+    $prop: transform,
+    $ltr-val: translateX(var(--#{$slider}__step-tick--TranslateX)),
+    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$slider}__step-tick--TranslateX))})
+  );
+
   position: absolute;
- inset-block-start: var(--#{$slider}__step-tick--Top);
- inset-inline-start: 0;
+  inset-block-start: var(--#{$slider}__step-tick--Top);
+  inset-inline-start: 0;
   width: var(--#{$slider}__step-tick--Width);
   height: var(--#{$slider}__step-tick--Height);
   background-color: var(--#{$slider}__step-tick--BackgroundColor);
   border-radius: var(--#{$slider}__step-tick--BorderRadius);
-  transform: translateX(var(--#{$slider}__step-tick--TranslateX));
 }
 
 .#{$slider}__step-label {
+  @include pf-v5-bidirectional-style(
+    $prop: transform,
+    $ltr-val: translateX(var(--#{$slider}__step-label--TranslateX)),
+    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$slider}__step-label--TranslateX))})
+  );
+
   position: absolute;
- inset-block-start: var(--#{$slider}__step-label--Top);
+  inset-block-start: var(--#{$slider}__step-label--Top);
   word-break: normal;
-  transform: translateX(var(--#{$slider}__step-label--TranslateX));
 }
 
 .#{$slider}__thumb {
+  @include pf-v5-bidirectional-style(
+    $prop: transform,
+    $ltr-val: translate(var(--#{$slider}__thumb--TranslateX), var(--#{$slider}__thumb--TranslateY)),
+    $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$slider}__thumb--TranslateX))}, var(--#{$slider}__thumb--TranslateY))
+  );
+
   position: absolute;
- inset-block-start: var(--#{$slider}__thumb--Top);
- inset-inline-start: var(--#{$slider}__thumb--Left);
+  inset-block-start: var(--#{$slider}__thumb--Top);
+  inset-inline-start: var(--#{$slider}__thumb--Left);
   width: var(--#{$slider}__thumb--Width);
   height: var(--#{$slider}__thumb--Height);
   cursor: pointer;
   background-color: var(--#{$slider}__thumb--BackgroundColor);
   border-radius: var(--#{$slider}__thumb--BorderRadius);
   box-shadow: var(--#{$slider}__thumb--BoxShadow);
-  transform: translate(var(--#{$slider}__thumb--TranslateX), var(--#{$slider}__thumb--TranslateY));
 
   &::before {
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translate(var(--#{$slider}__thumb--before--TranslateX), var(--#{$slider}__thumb--before--TranslateY)),
+      $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$slider}__thumb--before--TranslateX))}, var(--#{$slider}__thumb--before--TranslateY))
+    );
+
     position: absolute;
-   inset-block-start: 50%;
-   inset-inline-start: 50%;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
     width: var(--#{$slider}__thumb--before--Width);
     height: var(--#{$slider}__thumb--before--Height);
     content: "";
     border-radius: var(--#{$slider}__thumb--before--BorderRadius);
-    transform: translate(var(--#{$slider}__thumb--before--TranslateX), var(--#{$slider}__thumb--before--TranslateY));
   }
 
   &:hover {
@@ -210,13 +236,18 @@
   margin-inline-start: var(--#{$slider}__value--MarginLeft);
 
   &.pf-m-floating {
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translate(var(--#{$slider}__value--m-floating--TranslateX), var(--#{$slider}__value--m-floating--TranslateY)),
+      $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$slider}__value--m-floating--TranslateX))}, var(--#{$slider}__value--m-floating--TranslateY)),
+    );
+
     --#{$slider}__value--MarginLeft: 0;
 
     position: absolute;
-   inset-block-start: 0;
-   inset-inline-start: var(--#{$slider}__value--m-floating--Left);
+    inset-block-start: 0;
+    inset-inline-start: var(--#{$slider}__value--m-floating--Left);
     z-index: var(--#{$slider}__value--m-floating--ZIndex);
-    transform: translate(var(--#{$slider}__value--m-floating--TranslateX), var(--#{$slider}__value--m-floating--TranslateY));
   }
 
   .#{$form-control} {

package/components/Switch/switch.css

@@ -69,6 +69,10 @@
 .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
   transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
+  transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-switch__input:checked ~ .pf-m-off {
   display: none;
 }

package/components/Switch/switch.scss

@@ -88,7 +88,11 @@
       background-color: var(--#{$switch}__input--checked__toggle--BackgroundColor);
 
       &::before {
-        transform: translateX(var(--#{$switch}__input--checked__toggle--before--TranslateX));
+        @include pf-v5-bidirectional-style(
+          $prop: transform,
+          $ltr-val: translateX(var(--#{$switch}__input--checked__toggle--before--TranslateX)),
+          $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$switch}__input--checked__toggle--before--TranslateX))})
+        );
       }
     }
 

package/components/Table/table-scrollable.css

@@ -32,10 +32,10 @@
   --pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
   --pf-v5-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
 }
-.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right {
+.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right, .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-inline-end {
   --pf-v5-c-table__sticky-cell--Right: var(--pf-v5-c-table__sticky-cell--m-right--Right);
 }
-.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left {
+.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left, .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-inline-start {
   --pf-v5-c-table__sticky-cell--Left: var(--pf-v5-c-table__sticky-cell--m-left--Left);
 }
 

package/components/Table/table-scrollable.scss

@@ -35,11 +35,13 @@
       --#{$table}--cell--m-border-left--before--BorderLeftColor: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftColor);
     }
 
-    &.pf-m-right {
+    &.pf-m-right, 
+    &.pf-m-inline-end {
       --#{$table}__sticky-cell--Right: var(--#{$table}__sticky-cell--m-right--Right);
     }
 
-    &.pf-m-left {
+    &.pf-m-left, 
+    &.pf-m-inline-start {
       --#{$table}__sticky-cell--Left: var(--#{$table}__sticky-cell--m-left--Left);
     }
 

package/components/Table/table-tree-view.css

@@ -65,10 +65,14 @@
   cursor: pointer;
 }
 .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
+  transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
   position: var(--pf-v5-c-table--m-tree-view__toggle--Position);
   inset-inline-start: var(--pf-v5-c-table--m-tree-view__toggle--Left);
-  transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
+  transform: translateX(calc(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
   min-width: var(--pf-v5-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
 }

package/components/Table/table-tree-view.scss

@@ -66,9 +66,14 @@ $pf-v5-c-tree-view--MaxDepth: 10;
   cursor: pointer;
 
   > .#{$table}__toggle {
+    @include pf-v5-bidirectional-style (
+      $prop: 'transform',
+      $ltr-val: translateX(var(--#{$table}--m-tree-view__toggle--TranslateX)),
+      $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$table}--m-tree-view__toggle--TranslateX))})
+    );
+
     position: var(--#{$table}--m-tree-view__toggle--Position);
-   inset-inline-start: var(--#{$table}--m-tree-view__toggle--Left);
-    transform: translateX(var(--#{$table}--m-tree-view__toggle--TranslateX));
+    inset-inline-start: var(--#{$table}--m-tree-view__toggle--Left);
 
     .#{$table}__toggle-icon {
       min-width: var(--#{$table}--m-tree-view__toggle__toggle-icon--MinWidth);

package/components/Table/table.css

@@ -734,6 +734,10 @@
   transition: var(--pf-v5-c-table__toggle--c-button__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-table__toggle--c-button__toggle-icon--Rotate));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-table__toggle svg {
   pointer-events: none;
 }

package/components/Table/table.scss

@@ -971,6 +971,8 @@
   }
 
   .#{$table}__toggle-icon {
+    @include pf-v5-mirror-inline-on-rtl;
+
     transition: var(--#{$table}__toggle--c-button__toggle-icon--Transition);
     transform: rotate(var(--#{$table}__toggle--c-button__toggle-icon--Rotate));
   }