@patternfly/patternfly 5.1.0-prerelease.2 → 5.1.0-prerelease.21

package/components/Popover/popover.css

@@ -61,39 +61,87 @@
   --pf-v5-c-popover--MinWidth: auto;
   --pf-v5-c-popover--MaxWidth: none;
 }
-.pf-v5-c-popover.pf-m-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-top-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-top-right .pf-v5-c-popover__arrow {
-  bottom: 0;
-  left: 50%;
+.pf-v5-c-popover:is(.pf-m-top,
+.pf-m-top-left,
+.pf-m-top-right,
+.pf-m-block-start,
+.pf-m-block-start-inline-start,
+.pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
+  inset-block-end: 0;
+  inset-inline-start: 50%;
   transform: translateX(var(--pf-v5-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
 }
-.pf-v5-c-popover.pf-m-bottom .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-right .pf-v5-c-popover__arrow {
-  top: 0;
-  left: 50%;
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
+  transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
+}
+
+.pf-v5-c-popover:is(.pf-m-bottom,
+.pf-m-bottom-left,
+.pf-m-bottom-right,
+.pf-m-block-end,
+.pf-m-block-end-inline-start,
+.pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
+  inset-block-start: 0;
+  inset-inline-start: 50%;
   transform: translateX(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
 }
-.pf-v5-c-popover.pf-m-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-left-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-left-bottom .pf-v5-c-popover__arrow {
-  top: 50%;
-  right: 0;
-  transform: translateX(var(--pf-v5-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
+  transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
 }
-.pf-v5-c-popover.pf-m-right .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-bottom .pf-v5-c-popover__arrow {
-  top: 50%;
-  left: 0;
-  transform: translateX(var(--pf-v5-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
+
+.pf-v5-c-popover:is(.pf-m-left,
+.pf-m-left-top,
+.pf-m-left-bottom,
+.pf-m-inline-start,
+.pf-m-inline-start-block-start,
+.pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
+  inset-block-start: 50%;
+  inset-inline-end: 0;
+  transform: translateX(var(--pf-v5-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
 }
-.pf-v5-c-popover.pf-m-left-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-top .pf-v5-c-popover__arrow {
-  top: var(--pf-v5-c-popover__arrow--Height);
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
+  transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
 }
-.pf-v5-c-popover.pf-m-left-bottom .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-bottom .pf-v5-c-popover__arrow {
-  top: auto;
-  bottom: 0;
+
+.pf-v5-c-popover:is(.pf-m-right,
+.pf-m-right-top,
+.pf-m-right-bottom,
+.pf-m-inline-end,
+.pf-m-inline-end-block-start,
+.pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
+  inset-block-start: 50%;
+  inset-inline-start: 0;
+  transform: translateX(var(--pf-v5-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
 }
-.pf-v5-c-popover.pf-m-top-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-left .pf-v5-c-popover__arrow {
-  left: var(--pf-v5-c-popover__arrow--Width);
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
+  transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
 }
-.pf-v5-c-popover.pf-m-top-right .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-right .pf-v5-c-popover__arrow {
-  right: 0;
-  left: auto;
+
+.pf-v5-c-popover:is(.pf-m-left-top,
+.pf-m-right-top,
+.pf-m-inline-start-block-start,
+.pf-m-inline-end-block-start) .pf-v5-c-popover__arrow {
+  inset-block-start: var(--pf-v5-c-popover__arrow--Height);
+}
+.pf-v5-c-popover:is(.pf-m-left-bottom,
+.pf-m-right-bottom,
+.pf-m-inline-start-block-end,
+.pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
+  inset-block-start: auto;
+  inset-block-end: 0;
+}
+.pf-v5-c-popover:is(.pf-m-top-left,
+.pf-m-bottom-left,
+.pf-m-block-start-inline-start,
+.pf-m-block-end-inline-start) .pf-v5-c-popover__arrow {
+  inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
+}
+.pf-v5-c-popover:is(.pf-m-top-right,
+.pf-m-bottom-right,
+.pf-m-block-start-inline-end,
+.pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
 }
 .pf-v5-c-popover.pf-m-danger {
   --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
@@ -118,17 +166,20 @@
 
 .pf-v5-c-popover__content {
   position: relative;
-  padding: var(--pf-v5-c-popover__content--PaddingTop) var(--pf-v5-c-popover__content--PaddingRight) var(--pf-v5-c-popover__content--PaddingBottom) var(--pf-v5-c-popover__content--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-popover__content--PaddingTop);
+  padding-block-end: var(--pf-v5-c-popover__content--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-popover__content--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-popover__content--PaddingRight);
   background-color: var(--pf-v5-c-popover__content--BackgroundColor);
 }
 
 .pf-v5-c-popover__close {
   position: absolute;
-  top: var(--pf-v5-c-popover__close--Top);
-  right: var(--pf-v5-c-popover__close--Right);
+  inset-block-start: var(--pf-v5-c-popover__close--Top);
+  inset-inline-end: var(--pf-v5-c-popover__close--Right);
 }
 .pf-v5-c-popover__close + * {
-  padding-right: var(--pf-v5-c-popover__close--sibling--PaddingRight);
+  padding-inline-end: var(--pf-v5-c-popover__close--sibling--PaddingRight);
 }
 
 .pf-v5-c-popover__arrow {
@@ -141,7 +192,7 @@
 }
 
 .pf-v5-c-popover__header {
-  margin-bottom: var(--pf-v5-c-popover__header--MarginBottom);
+  margin-block-end: var(--pf-v5-c-popover__header--MarginBottom);
 }
 
 .pf-v5-c-popover__title {
@@ -150,7 +201,7 @@
 }
 
 .pf-v5-c-popover__title-icon {
-  margin-right: var(--pf-v5-c-popover__title-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-popover__title-icon--MarginRight);
   font-size: var(--pf-v5-c-popover__title-icon--FontSize);
   color: var(--pf-v5-c-popover__title-icon--Color);
 }
@@ -167,7 +218,7 @@
 }
 
 .pf-v5-c-popover__footer {
-  margin-top: var(--pf-v5-c-popover__footer--MarginTop);
+  margin-block-start: var(--pf-v5-c-popover__footer--MarginTop);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-popover {

package/components/Popover/popover.scss

@@ -88,73 +88,129 @@
     --#{$popover}--MaxWidth: none;
   }
 
-  &.pf-m-top,
-  &.pf-m-top-left,
-  &.pf-m-top-right {
+  &:is(
+    .pf-m-top,
+    .pf-m-top-left,
+    .pf-m-top-right,
+    .pf-m-block-start,
+    .pf-m-block-start-inline-start,
+    .pf-m-block-start-inline-end
+  ) {
     .#{$popover}__arrow {
-      bottom: 0;
-      left: 50%;
-      transform: translateX(var(--#{$popover}__arrow--m-top--TranslateX)) translateY(var(--#{$popover}__arrow--m-top--TranslateY)) rotate(var(--#{$popover}__arrow--m-top--Rotate));
+      inset-block-end: 0;
+      inset-inline-start: 50%;
+
+      @include pf-v5-bidirectional-style(
+        $prop: transform,
+        $ltr-val: translateX(var(--#{$popover}__arrow--m-top--TranslateX)) translateY(var(--#{$popover}__arrow--m-top--TranslateY)) rotate(var(--#{$popover}__arrow--m-top--Rotate)),
+        $rtl-val: translateX(#{pf-v5-calc-inverse(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 {
+  &:is(
+    .pf-m-bottom,
+    .pf-m-bottom-left,
+    .pf-m-bottom-right,
+    .pf-m-block-end,
+    .pf-m-block-end-inline-start,
+    .pf-m-block-end-inline-end
+  ) {
     .#{$popover}__arrow {
-      top: 0;
-      left: 50%;
-      transform: translateX(var(--#{$popover}__arrow--m-bottom--TranslateX)) translateY(var(--#{$popover}__arrow--m-bottom--TranslateY)) rotate(var(--#{$popover}__arrow--m-bottom--Rotate));
+      inset-block-start: 0;
+      inset-inline-start: 50%;
+
+      @include pf-v5-bidirectional-style(
+        $prop: transform,
+        $ltr-val: translateX(var(--#{$popover}__arrow--m-bottom--TranslateX)) translateY(var(--#{$popover}__arrow--m-bottom--TranslateY)) rotate(var(--#{$popover}__arrow--m-bottom--Rotate)),
+        $rtl-val: translateX(#{pf-v5-calc-inverse(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 {
+  &:is(
+    .pf-m-left,
+    .pf-m-left-top,
+    .pf-m-left-bottom,
+    .pf-m-inline-start,
+    .pf-m-inline-start-block-start,
+    .pf-m-inline-start-block-end
+  ) {
     .#{$popover}__arrow {
-      top: 50%;
-      right: 0;
-      transform: translateX(var(--#{$popover}__arrow--m-left--TranslateX)) translateY(var(--#{$popover}__arrow--m-left--TranslateY)) rotate(var(--#{$popover}__arrow--m-left--Rotate));
+      inset-block-start: 50%;
+      inset-inline-end: 0;
+
+      @include pf-v5-bidirectional-style(
+        $prop: transform,
+        $ltr-val: translateX(var(--#{$popover}__arrow--m-left--TranslateX)) translateY(var(--#{$popover}__arrow--m-left--TranslateY)) rotate(var(--#{$popover}__arrow--m-left--Rotate)),
+        $rtl-val: translateX(#{pf-v5-calc-inverse(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 {
+  &:is(
+    .pf-m-right,
+    .pf-m-right-top,
+    .pf-m-right-bottom,
+    .pf-m-inline-end,
+    .pf-m-inline-end-block-start,
+    .pf-m-inline-end-block-end
+  ) {
     .#{$popover}__arrow {
-      top: 50%;
-      left: 0;
-      transform: translateX(var(--#{$popover}__arrow--m-right--TranslateX)) translateY(var(--#{$popover}__arrow--m-right--TranslateY)) rotate(var(--#{$popover}__arrow--m-right--Rotate));
+      inset-block-start: 50%;
+      inset-inline-start: 0;
+
+      @include pf-v5-bidirectional-style(
+        $prop: transform,
+        $ltr-val: translateX(var(--#{$popover}__arrow--m-right--TranslateX)) translateY(var(--#{$popover}__arrow--m-right--TranslateY)) rotate(var(--#{$popover}__arrow--m-right--Rotate)),
+        $rtl-val: translateX(#{pf-v5-calc-inverse(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 {
+  &:is(
+    .pf-m-left-top,
+    .pf-m-right-top,
+    .pf-m-inline-start-block-start,
+    .pf-m-inline-end-block-start
+  ) {
     .#{$popover}__arrow {
-      top: var(--#{$popover}__arrow--Height);
+      inset-block-start: var(--#{$popover}__arrow--Height);
     }
   }
 
-  &.pf-m-left-bottom,
-  &.pf-m-right-bottom {
+  &:is(
+    .pf-m-left-bottom,
+    .pf-m-right-bottom,
+    .pf-m-inline-start-block-end,
+    .pf-m-inline-end-block-end
+  ) {
     .#{$popover}__arrow {
-      top: auto;
-      bottom: 0;
+      inset-block-start: auto;
+      inset-block-end: 0;
     }
   }
 
-  &.pf-m-top-left,
-  &.pf-m-bottom-left {
+  &:is(
+    .pf-m-top-left,
+    .pf-m-bottom-left,
+    .pf-m-block-start-inline-start,
+    .pf-m-block-end-inline-start
+  ) {
     .#{$popover}__arrow {
-      left: var(--#{$popover}__arrow--Width);
+      inset-inline-start: var(--#{$popover}__arrow--Width);
     }
   }
 
-  &.pf-m-top-right,
-  &.pf-m-bottom-right {
+  &:is(
+    .pf-m-top-right,
+    .pf-m-bottom-right,
+    .pf-m-block-start-inline-end,
+    .pf-m-block-end-inline-end
+  ) {
     .#{$popover}__arrow {
-      right: 0;
-      left: auto;
+      inset-inline-start: auto;
+      inset-inline-end: 0;
     }
   }
 
@@ -186,19 +242,22 @@
 
 .#{$popover}__content {
   position: relative;
-  padding: var(--#{$popover}__content--PaddingTop) var(--#{$popover}__content--PaddingRight) var(--#{$popover}__content--PaddingBottom) var(--#{$popover}__content--PaddingLeft);
+  padding-block-start: var(--#{$popover}__content--PaddingTop);
+  padding-block-end: var(--#{$popover}__content--PaddingBottom);
+  padding-inline-start: var(--#{$popover}__content--PaddingLeft); 
+  padding-inline-end: var(--#{$popover}__content--PaddingRight);
   background-color: var(--#{$popover}__content--BackgroundColor);
 }
 
 // Close button
 .#{$popover}__close {
   position: absolute;
-  top: var(--#{$popover}__close--Top);
-  right: var(--#{$popover}__close--Right);
+  inset-block-start: var(--#{$popover}__close--Top);
+  inset-inline-end: var(--#{$popover}__close--Right);
 
   // Create room for the close button
   + * {
-    padding-right: var(--#{$popover}__close--sibling--PaddingRight);
+    padding-inline-end: var(--#{$popover}__close--sibling--PaddingRight);
   }
 }
 
@@ -212,7 +271,7 @@
 }
 
 .#{$popover}__header {
-  margin-bottom: var(--#{$popover}__header--MarginBottom);
+  margin-block-end: var(--#{$popover}__header--MarginBottom);
 }
 
 .#{$popover}__title {
@@ -221,7 +280,7 @@
 }
 
 .#{$popover}__title-icon {
-  margin-right: var(--#{$popover}__title-icon--MarginRight);
+  margin-inline-end: var(--#{$popover}__title-icon--MarginRight);
   font-size: var(--#{$popover}__title-icon--FontSize);
   color: var(--#{$popover}__title-icon--Color);
 }
@@ -239,7 +298,7 @@
 }
 
 .#{$popover}__footer {
-  margin-top: var(--#{$popover}__footer--MarginTop);
+  margin-block-start: var(--#{$popover}__footer--MarginTop);
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/components/Progress/progress.css

@@ -69,7 +69,7 @@
 }
 .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__measure.pf-m-static-width {
   min-width: var(--pf-v5-c-progress__measure--m-static-width--MinWidth);
-  text-align: left;
+  text-align: start;
 }
 .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__bar,
 .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__indicator {
@@ -124,7 +124,7 @@
   gap: var(--pf-v5-c-progress__status--Gap);
   align-items: flex-start;
   justify-content: flex-end;
-  text-align: right;
+  text-align: end;
   word-break: break-word;
 }
 
@@ -142,8 +142,8 @@
 }
 .pf-v5-c-progress__bar::before {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   content: "";
@@ -153,8 +153,8 @@
 
 .pf-v5-c-progress__indicator {
   position: absolute;
-  top: 0;
-  left: 0;
+  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);
 }
@@ -162,7 +162,7 @@
 .pf-v5-c-progress__helper-text {
   grid-row: 3/4;
   grid-column: 1/3;
-  margin-top: var(--pf-v5-c-progress__helper-text--MarginTop);
+  margin-block-start: var(--pf-v5-c-progress__helper-text--MarginTop);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-progress {

package/components/Progress/progress.scss

@@ -93,7 +93,7 @@
 
       &.pf-m-static-width {
         min-width: var(--#{$progress}__measure--m-static-width--MinWidth);
-        text-align: left;
+        text-align: start;
       }
     }
 
@@ -166,7 +166,7 @@
   gap: var(--#{$progress}__status--Gap);
   align-items: flex-start;
   justify-content: flex-end;
-  text-align: right;
+  text-align: end;
   word-break: break-word;
 }
 
@@ -186,8 +186,8 @@
 
   &::before {
     position: absolute;
-    top: 0;
-    left: 0;
+   inset-block-start: 0;
+   inset-inline-start: 0;
     width: 100%;
     height: 100%;
     content: "";
@@ -200,8 +200,8 @@
 // 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
-  top: 0;
-  left: 0;
+ inset-block-start: 0;
+ inset-inline-start: 0;
   height: var(--#{$progress}__indicator--Height);
   background-color: var(--#{$progress}__indicator--BackgroundColor);
 }
@@ -209,7 +209,7 @@
 .#{$progress}__helper-text {
   grid-row: 3 / 4;
   grid-column: 1 / 3;
-  margin-top: var(--#{$progress}__helper-text--MarginTop);
+  margin-block-start: var(--#{$progress}__helper-text--MarginTop);
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/components/ProgressStepper/progress-stepper.css

@@ -17,7 +17,9 @@
   --pf-v5-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;
   --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;
+  --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginTop: 0;
   --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight: 0;
+  --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft: 0;
   --pf-v5-c-progress-stepper--m-vertical--m-center__step-main--MarginRight: 0;
   --pf-v5-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft: 0;
   --pf-v5-c-progress-stepper--m-horizontal--GridAutoFlow: column;
@@ -57,7 +59,7 @@
   --pf-v5-c-progress-stepper--m-center__step-description--MarginRight: 0;
   --pf-v5-c-progress-stepper--m-center__step-description--MarginLeft: 0;
   --pf-v5-c-progress-stepper--GridTemplateRows: auto 1fr;
-  --pf-v5-c-progress-stepper__step-connector--JustifyContent: start;
+  --pf-v5-c-progress-stepper__step-connector--JustifyContent: flex-start;
   --pf-v5-c-progress-stepper__step-icon--ZIndex: var(--pf-v5-global--ZIndex--xs);
   --pf-v5-c-progress-stepper__step-icon--Width: 1.75rem;
   --pf-v5-c-progress-stepper__step-icon--Height: var(--pf-v5-c-progress-stepper__step-icon--Width);
@@ -69,7 +71,7 @@
   --pf-v5-c-progress-stepper__pficon--MarginTop: 3px;
   --pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop: -5px;
   --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-progress-stepper__step-title--TextAlign: left;
+  --pf-v5-c-progress-stepper__step-title--TextAlign: start;
   --pf-v5-c-progress-stepper__step-title--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-progress-stepper__step-title--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-v5-global--FontWeight--bold);
@@ -91,7 +93,7 @@
   --pf-v5-c-progress-stepper__step-description--MarginTop: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-progress-stepper__step-description--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-progress-stepper__step-description--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-progress-stepper__step-description--TextAlign: left;
+  --pf-v5-c-progress-stepper__step-description--TextAlign: start;
   --pf-v5-c-progress-stepper--GridAutoFlow: var(--pf-v5-c-progress-stepper--m-vertical--GridAutoFlow);
   --pf-v5-c-progress-stepper--GridTemplateColumns: var(--pf-v5-c-progress-stepper--m-vertical--GridTemplateColumns);
   --pf-v5-c-progress-stepper__step-connector--before--Top: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--Top);
@@ -160,7 +162,7 @@
   position: relative;
 }
 .pf-v5-c-progress-stepper.pf-m-center .pf-v5-c-progress-stepper__step:not(:last-of-type) > .pf-v5-c-progress-stepper__step-connector::before {
-  left: var(--pf-v5-c-progress-stepper--m-center__step-connector--before--Left);
+  inset-inline-start: var(--pf-v5-c-progress-stepper--m-center__step-connector--before--Left);
 }
 .pf-v5-c-progress-stepper.pf-m-center:not(.pf-m-compact) .pf-v5-c-progress-stepper__step:not(:last-of-type) > .pf-v5-c-progress-stepper__step-main::before {
   content: var(--pf-v5-c-progress-stepper--m-center__step-main--before--Content);
@@ -177,8 +179,9 @@
   --pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-v5-c-progress-stepper--m-compact__step-title--FontWeight);
   --pf-v5-c-progress-stepper__pficon--MarginTop: var(--pf-v5-c-progress-stepper--m-compact__pficon--MarginTop);
   --pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop: var(--pf-v5-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop);
-  --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft);
+  --pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginTop);
   --pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight);
+  --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft);
   display: inline-grid;
   grid-template-columns: var(--pf-v5-c-progress-stepper--m-compact--GridTemplateColumns);
   grid-auto-flow: var(--pf-v5-c-progress-stepper--m-compact--GridAutoFlow);
@@ -186,15 +189,15 @@
 .pf-v5-c-progress-stepper.pf-m-compact .pf-v5-c-progress-stepper__step-connector {
   grid-row: var(--pf-v5-c-progress-stepper--m-compact__step-connector--GridRow);
   min-width: var(--pf-v5-c-progress-stepper--m-compact__step-connector--MinWidth);
-  padding-bottom: var(--pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom);
+  padding-block-end: var(--pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom);
 }
 .pf-v5-c-progress-stepper.pf-m-compact .pf-v5-c-progress-stepper__step-main {
-  margin-bottom: var(--pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom);
+  margin-block-end: var(--pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom);
 }
 .pf-v5-c-progress-stepper.pf-m-compact .pf-v5-c-progress-stepper__step:not(.pf-m-current) .pf-v5-c-progress-stepper__step-main {
   position: fixed;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -248,13 +251,13 @@
 }
 .pf-v5-c-progress-stepper__step:not(:last-of-type) > .pf-v5-c-progress-stepper__step-connector::before {
   position: absolute;
-  top: var(--pf-v5-c-progress-stepper__step-connector--before--Top);
-  left: var(--pf-v5-c-progress-stepper__step-connector--before--Left);
+  inset-block-start: var(--pf-v5-c-progress-stepper__step-connector--before--Top);
+  inset-inline-start: var(--pf-v5-c-progress-stepper__step-connector--before--Left);
   width: var(--pf-v5-c-progress-stepper__step-connector--before--Width);
   height: var(--pf-v5-c-progress-stepper__step-connector--before--Height);
   content: "";
-  border-right: var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightColor);
-  border-bottom: var(--pf-v5-c-progress-stepper__step-connector--before--BorderBottomWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-progress-stepper__step-connector--before--BorderBottomWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderBottomColor);
+  border-inline-end: var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightColor);
   transform: var(--pf-v5-c-progress-stepper__step-connector--before--Transform);
 }
 
@@ -272,25 +275,28 @@
   border-radius: 50%;
 }
 .pf-v5-c-progress-stepper__step-icon .pf-v5-pficon {
-  margin-top: var(--pf-v5-c-progress-stepper__pficon--MarginTop);
+  margin-block-start: var(--pf-v5-c-progress-stepper__pficon--MarginTop);
 }
 .pf-v5-c-progress-stepper__step-icon .fa-exclamation-triangle {
-  margin-top: var(--pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop);
+  margin-block-start: var(--pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop);
 }
 
 .pf-v5-c-progress-stepper__step-main {
   min-width: 0;
-  margin: var(--pf-v5-c-progress-stepper__step-main--MarginTop) var(--pf-v5-c-progress-stepper__step-main--MarginRight) var(--pf-v5-c-progress-stepper__step-main--MarginBottom) var(--pf-v5-c-progress-stepper__step-main--MarginLeft);
+  margin-block-start: var(--pf-v5-c-progress-stepper__step-main--MarginTop);
+  margin-block-end: var(--pf-v5-c-progress-stepper__step-main--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-progress-stepper__step-main--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-progress-stepper__step-main--MarginRight);
   text-align: var(--pf-v5-c-progress-stepper--step-main--TextAlign, auto);
   overflow-wrap: anywhere;
 }
 .pf-v5-c-progress-stepper__step:not(:last-of-type) > .pf-v5-c-progress-stepper__step-main::before {
   position: absolute;
-  top: calc(100% + var(--pf-v5-c-progress-stepper__step-main--MarginTop));
-  left: calc(50% - var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) / 2);
+  inset-block-start: calc(100% + var(--pf-v5-c-progress-stepper__step-main--MarginTop));
+  inset-inline-start: calc(50% - var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) / 2);
   width: auto;
   height: calc(var(--pf-v5-c-progress-stepper__step-main--MarginTop) + var(--pf-v5-c-progress-stepper__step-main--MarginBottom));
-  border-right: var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightColor);
+  border-inline-end: var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightColor);
 }
 
 .pf-v5-c-progress-stepper__step-title {
@@ -319,7 +325,7 @@
 }
 
 .pf-v5-c-progress-stepper__step-description {
-  margin-top: var(--pf-v5-c-progress-stepper__step-description--MarginTop);
+  margin-block-start: var(--pf-v5-c-progress-stepper__step-description--MarginTop);
   font-size: var(--pf-v5-c-progress-stepper__step-description--FontSize);
   color: var(--pf-v5-c-progress-stepper__step-description--Color);
   text-align: var(--pf-v5-c-progress-stepper__step-description--TextAlign);