@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.71

package/components/TreeView/tree-view.scss

@@ -173,8 +173,8 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
   --#{$tree-view}--m-compact--m-no-background__node--nested--PaddingBottom: 0;
   --#{$tree-view}--m-compact--m-no-background__node--before--Top: calc(var(--#{$tree-view}--m-compact__node-container--nested--PaddingTop) + var(--#{$tree-view}--m-compact__node--nested--PaddingTop) + #{pf-size-prem(4px)});
 
-  padding-top: var(--#{$tree-view}--PaddingTop);
-  padding-bottom: var(--#{$tree-view}--PaddingBottom);
+  padding-block-start: var(--#{$tree-view}--PaddingTop);
+  padding-block-end: var(--#{$tree-view}--PaddingBottom);
 
   &.pf-m-compact,
   &.pf-m-guides {
@@ -186,13 +186,13 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
         &::before,
         .#{$tree-view}__node::before {
           position: absolute;
-          left: var(--#{$tree-view}--m-guides--guide--Left);
+         inset-inline-start: var(--#{$tree-view}--m-guides--guide--Left);
           content: "";
         }
 
         // vertical border
         &::before {
-          top: var(--#{$tree-view}--m-guides__list-item--before--Top);
+         inset-block-start: var(--#{$tree-view}--m-guides__list-item--before--Top);
           z-index: var(--#{$tree-view}--m-guides__list-item--ZIndex);
           width: var(--#{$tree-view}--m-guides__list-item--before--Width);
           height: var(--#{$tree-view}--m-guides__list-item--before--Height);
@@ -201,7 +201,7 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 
         // horizontal border
         .#{$tree-view}__node::before {
-          top: var(--#{$tree-view}--m-guides__node--before--Top);
+         inset-block-start: var(--#{$tree-view}--m-guides__node--before--Top);
           width: var(--#{$tree-view}--m-guides__node--before--Width);
           height: var(--#{$tree-view}--m-guides__node--before--Height);
           background-color: var(--#{$tree-view}--m-guides__node--before--BackgroundColor);
@@ -233,7 +233,7 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 
     // Level 1
     .#{$tree-view}__list-item {
-      border-bottom: var(--#{$tree-view}--m-compact__list-item--BorderBottomWidth) solid var(--#{$tree-view}--m-compact__list-item--BorderBottomColor);
+      border-block-end: var(--#{$tree-view}--m-compact__list-item--BorderBottomWidth) solid var(--#{$tree-view}--m-compact__list-item--BorderBottomColor);
 
       &.pf-m-expanded {
         --#{$tree-view}--m-compact__node-container--PaddingBottom: var(--#{$tree-view}--m-compact__list-item--m-expanded__node-container--PaddingBottom);
@@ -252,15 +252,15 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
         // stylelint-disable max-nesting-depth, selector-max-class
         &::before,
         .#{$tree-view}__node::before {
-          left: var(--#{$tree-view}--m-compact--border--Left);
+         inset-inline-start: var(--#{$tree-view}--m-compact--border--Left);
         }
 
         &::before {
-          top: var(--#{$tree-view}--m-compact__list-item--before--Top);
+         inset-block-start: var(--#{$tree-view}--m-compact__list-item--before--Top);
         }
 
         .#{$tree-view}__node::before {
-          top: var(--#{$tree-view}--m-compact__node--before--Top);
+         inset-block-start: var(--#{$tree-view}--m-compact__node--before--Top);
         }
 
         &:last-child::before {
@@ -276,21 +276,27 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
         }
 
         .#{$tree-view}__node-container {
-          padding: var(--#{$tree-view}--m-compact__node-container--nested--PaddingTop) var(--#{$tree-view}--m-compact__node-container--nested--PaddingRight) var(--#{$tree-view}--m-compact__node-container--nested--PaddingBottom) var(--#{$tree-view}--m-compact__node-container--nested--PaddingLeft);
+          padding-block-start: var(--#{$tree-view}--m-compact__node-container--nested--PaddingTop);
+          padding-block-end: var(--#{$tree-view}--m-compact__node-container--nested--PaddingBottom);
+          padding-inline-start: var(--#{$tree-view}--m-compact__node-container--nested--PaddingLeft);
+          padding-inline-end: var(--#{$tree-view}--m-compact__node-container--nested--PaddingRight);
           background-color: var(--#{$tree-view}--m-compact__node-container--nested--BackgroundColor);
         }
 
         // add margins to align item text flush left and offset gap between toggle and text
         .#{$tree-view}__node-toggle {
-          margin-right: var(--#{$tree-view}--m-compact__node-toggle--nested--MarginRight);
-          margin-left: var(--#{$tree-view}--m-compact__node-toggle--nested--MarginLeft);
+          margin-inline-start: var(--#{$tree-view}--m-compact__node-toggle--nested--MarginLeft);
+          margin-inline-end: var(--#{$tree-view}--m-compact__node-toggle--nested--MarginRight);
         }
         // stylelint-enable
       }
     }
 
     .#{$tree-view}__node-container {
-      padding: var(--#{$tree-view}--m-compact__node-container--PaddingTop) var(--#{$tree-view}--m-compact__node-container--PaddingRight) var(--#{$tree-view}--m-compact__node-container--PaddingBottom) var(--#{$tree-view}--m-compact__node-container--PaddingLeft);
+      padding-block-start: var(--#{$tree-view}--m-compact__node-container--PaddingTop);
+      padding-block-end: var(--#{$tree-view}--m-compact__node-container--PaddingBottom);
+      padding-inline-start: var(--#{$tree-view}--m-compact__node-container--PaddingLeft);
+      padding-inline-end: var(--#{$tree-view}--m-compact__node-container--PaddingRight);
     }
 
     // stylelint-disable selector-max-class, selector-max-compound-selectors
@@ -326,6 +332,8 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 }
 
 .#{$tree-view}__node-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   display: inline-block;
   min-width: var(--#{$tree-view}__node-toggle-icon--MinWidth);
   text-align: center;
@@ -352,7 +360,7 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
   flex: 1 1;
   align-items: flex-start;
   min-width: 0;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   border: 0;
 }
@@ -360,7 +368,10 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 .#{$tree-view}__node {
   position: relative;
   display: flex;
-  padding: var(--#{$tree-view}__node--PaddingTop) var(--#{$tree-view}__node--PaddingRight) var(--#{$tree-view}__node--PaddingBottom) var(--#{$tree-view}__node--PaddingLeft);
+  padding-block-start: var(--#{$tree-view}__node--PaddingTop);
+  padding-block-end: var(--#{$tree-view}__node--PaddingBottom);
+  padding-inline-start: var(--#{$tree-view}__node--PaddingLeft);
+  padding-inline-end: var(--#{$tree-view}__node--PaddingRight);
   color: var(--#{$tree-view}__node--Color);
   background-color: var(--#{$tree-view}__node--BackgroundColor);
 
@@ -375,7 +386,7 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
   }
 
   .#{$tree-view}__node-count {
-    margin-left: var(--#{$tree-view}__node-count--MarginLeft);
+    margin-inline-start: var(--#{$tree-view}__node-count--MarginLeft);
 
     .#{$badge}.pf-m-read {
       --#{$badge}--m-read--BackgroundColor: var(--#{$tree-view}__node-count--c-badge--m-read--BackgroundColor);
@@ -410,28 +421,36 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 
   // row-gap: var(--#{$tree-view}__node-content--RowGap); update when gap for flex is supported
   > * + * {
-    margin-top: var(--#{$tree-view}__node-content--RowGap);
+    margin-block-start: var(--#{$tree-view}__node-content--RowGap);
   }
 }
 
 .#{$tree-view}__node-check {
-  margin-right: var(--#{$tree-view}__node-check--MarginRight);
+  margin-inline-end: var(--#{$tree-view}__node-check--MarginRight);
 }
 
 .#{$tree-view}__node-toggle {
   position: var(--#{$tree-view}__node-toggle--Position);
-  top: var(--#{$tree-view}__list-item__list-item__node-toggle--Top);
-  left: var(--#{$tree-view}__list-item__list-item__node-toggle--Left);
+  inset-block-start: var(--#{$tree-view}__list-item__list-item__node-toggle--Top);
+  inset-inline-start: var(--#{$tree-view}__list-item__list-item__node-toggle--Left);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--#{$tree-view}__node-toggle-button--PaddingTop) var(--#{$tree-view}__node-toggle-button--PaddingRight) var(--#{$tree-view}__node-toggle-button--PaddingBottom) var(--#{$tree-view}__node-toggle-button--PaddingLeft);
-  margin-top: var(--#{$tree-view}__node-toggle-button--MarginTop);
-  margin-bottom: var(--#{$tree-view}__node-toggle-button--MarginBottom);
+  padding-block-start: var(--#{$tree-view}__node-toggle-button--PaddingTop);
+  padding-block-end: var(--#{$tree-view}__node-toggle-button--PaddingBottom);
+  padding-inline-start: var(--#{$tree-view}__node-toggle-button--PaddingLeft);
+  padding-inline-end: var(--#{$tree-view}__node-toggle-button--PaddingRight);
+  margin-block-start: var(--#{$tree-view}__node-toggle-button--MarginTop);
+  margin-block-end: var(--#{$tree-view}__node-toggle-button--MarginBottom);
   color: var(--#{$tree-view}__node-toggle--Color);
   background-color: var(--#{$tree-view}__node-toggle--BackgroundColor);
   border: 0;
-  transform: translateX(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX));
+
+  @include pf-v5-bidirectional-style(
+    $prop: transform,
+    $ltr-val: translateX(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX)),
+    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX))})
+  );
 }
 
 .#{$tree-view}__node-title,
@@ -456,7 +475,7 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 
   font-weight: inherit;
   color: inherit;
-  text-align: left;
+  text-align: start;
   background-color: transparent;
   border: 0;
 }
@@ -466,11 +485,14 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 }
 
 .#{$tree-view}__search {
-  padding: var(--#{$tree-view}__search--PaddingTop) var(--#{$tree-view}__search--PaddingRight) var(--#{$tree-view}__search--PaddingBottom) var(--#{$tree-view}__search--PaddingLeft);
+  padding-block-start: var(--#{$tree-view}__search--PaddingTop);
+  padding-block-end: var(--#{$tree-view}__search--PaddingBottom);
+  padding-inline-start: var(--#{$tree-view}__search--PaddingLeft);
+  padding-inline-end: var(--#{$tree-view}__search--PaddingRight);
 }
 
 .#{$tree-view}__node-icon {
-  padding-right: var(--#{$tree-view}__node-icon--PaddingRight);
+  padding-inline-end: var(--#{$tree-view}__node-icon--PaddingRight);
   color: var(--#{$tree-view}__node-icon--Color);
 }
 
@@ -485,7 +507,7 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 }
 
 .#{$tree-view}__action {
-  margin-left: var(--#{$tree-view}__action--MarginLeft);
+  margin-inline-start: var(--#{$tree-view}__action--MarginLeft);
 }
 
 // stylelint-disable no-duplicate-selectors

package/components/Truncate/truncate.css

@@ -1,6 +1,10 @@
+:root,
 .pf-v5-c-truncate {
   --pf-v5-c-truncate--MinWidth: 12ch;
   --pf-v5-c-truncate__start--MinWidth: 6ch;
+}
+
+.pf-v5-c-truncate {
   display: inline-grid;
   grid-auto-flow: column;
   align-items: baseline;
@@ -21,14 +25,23 @@
 .pf-v5-c-truncate__end {
   direction: rtl;
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
+  direction: ltr;
+}
 
 .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
   overflow: visible;
   direction: ltr;
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
+  direction: rtl;
+}
 
 @supports (-webkit-hyphens: none) {
   .pf-v5-c-truncate__end {
     direction: ltr;
   }
+  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
+    direction: rtl;
+  }
 }

package/components/Truncate/truncate.scss

@@ -1,9 +1,12 @@
 // @debug $truncate; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$truncate} {
   --#{$truncate}--MinWidth: 12ch;
   --#{$truncate}__start--MinWidth: 6ch;
+}
 
+.#{$truncate} {
   display: inline-grid;
   grid-auto-flow: column;
   align-items: baseline;
@@ -23,17 +26,30 @@
 
 // End
 .#{$truncate}__end {
-  direction: rtl;
+  @include pf-v5-bidirectional-style (
+    $prop: direction,
+    $ltr-val: rtl,
+    $rtl-val: ltr
+  )
 }
 
 .#{$truncate}__start + .#{$truncate}__end {
   overflow: visible;
-  direction: ltr;
+
+  @include pf-v5-bidirectional-style (
+    $prop: direction,
+    $ltr-val: ltr,
+    $rtl-val: rtl
+  )
 }
 
 // safari not supported
 @supports (-webkit-hyphens: none) {
   .#{$truncate}__end {
-    direction: ltr;
+    @include pf-v5-bidirectional-style (
+      $prop: direction,
+      $ltr-val: ltr,
+      $rtl-val: rtl
+    )
   }
 }

package/components/Wizard/wizard.css

@@ -211,20 +211,23 @@
   color: var(--pf-v5-global--Color--100);
   position: relative;
   z-index: var(--pf-v5-c-wizard__header--ZIndex);
-  padding: var(--pf-v5-c-wizard__header--PaddingTop) var(--pf-v5-c-wizard__header--PaddingRight) var(--pf-v5-c-wizard__header--PaddingBottom) var(--pf-v5-c-wizard__header--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-wizard__header--PaddingTop);
+  padding-block-end: var(--pf-v5-c-wizard__header--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-wizard__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-wizard__header--PaddingRight);
   background-color: var(--pf-v5-c-wizard__header--BackgroundColor);
 }
 .pf-v5-c-wizard__header .pf-v5-c-wizard__close {
   position: absolute;
-  top: var(--pf-v5-c-wizard__close--Top);
-  right: var(--pf-v5-c-wizard__close--Right);
+  inset-block-start: var(--pf-v5-c-wizard__close--Top);
+  inset-inline-end: var(--pf-v5-c-wizard__close--Right);
 }
 .pf-v5-c-wizard__header .pf-v5-c-wizard__close button {
   font-size: var(--pf-v5-c-wizard__close--FontSize);
 }
 
 .pf-v5-c-wizard__title {
-  padding-right: var(--pf-v5-c-wizard__title--PaddingRight);
+  padding-inline-end: var(--pf-v5-c-wizard__title--PaddingRight);
   word-wrap: break-word;
 }
 
@@ -237,7 +240,7 @@
 
 .pf-v5-c-wizard__description {
   display: none;
-  padding-top: var(--pf-v5-c-wizard__description--PaddingTop);
+  padding-block-start: var(--pf-v5-c-wizard__description--PaddingTop);
   color: var(--pf-v5-c-wizard__description--Color);
 }
 @media screen and (min-width: 992px) {
@@ -252,7 +255,10 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-  padding: var(--pf-v5-c-wizard__toggle--PaddingTop) var(--pf-v5-c-wizard__toggle--PaddingRight) var(--pf-v5-c-wizard__toggle--PaddingBottom) var(--pf-v5-c-wizard__toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-wizard__toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-wizard__toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-wizard__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-wizard__toggle--PaddingRight);
   background-color: var(--pf-v5-c-wizard__toggle--BackgroundColor);
   border: 0;
   box-shadow: var(--pf-v5-c-wizard__toggle--BoxShadow);
@@ -264,7 +270,7 @@
 }
 .pf-v5-c-wizard__toggle.pf-m-expanded {
   --pf-v5-c-wizard__toggle--BoxShadow: none;
-  border-bottom: var(--pf-v5-c-wizard__toggle--m-expanded--BorderBottomWidth) solid var(--pf-v5-c-wizard__toggle--m-expanded--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-wizard__toggle--m-expanded--BorderBottomWidth) solid var(--pf-v5-c-wizard__toggle--m-expanded--BorderBottomColor);
 }
 .pf-v5-c-wizard__toggle.pf-m-expanded .pf-v5-c-wizard__toggle-icon {
   transform: rotate(var(--pf-v5-c-wizard__toggle--m-expanded__toggle-icon--Rotate));
@@ -275,18 +281,18 @@
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
-  margin-right: var(--pf-v5-c-wizard__toggle-list--MarginRight);
-  margin-bottom: var(--pf-v5-c-wizard__toggle-list--MarginBottom);
+  margin-block-end: var(--pf-v5-c-wizard__toggle-list--MarginBottom);
+  margin-inline-end: var(--pf-v5-c-wizard__toggle-list--MarginRight);
   list-style: none;
 }
 
 .pf-v5-c-wizard__toggle-list-item {
-  margin-bottom: var(--pf-v5-c-wizard__toggle-list-item--MarginBottom);
-  text-align: left;
+  margin-block-end: var(--pf-v5-c-wizard__toggle-list-item--MarginBottom);
+  text-align: start;
   word-break: break-word;
 }
 .pf-v5-c-wizard__toggle-list-item:not(:last-child) {
-  margin-right: var(--pf-v5-c-wizard__toggle-list-item--not-last-child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-wizard__toggle-list-item--not-last-child--MarginRight);
 }
 
 .pf-v5-c-wizard__toggle-num {
@@ -294,9 +300,12 @@
 }
 
 .pf-v5-c-wizard__toggle-separator {
-  margin-left: var(--pf-v5-c-wizard__toggle-separator--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-wizard__toggle-separator--MarginLeft);
   color: var(--pf-v5-c-wizard__toggle-separator--Color);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-separator {
+  scale: -1 1;
+}
 
 .pf-v5-c-wizard__toggle-icon {
   line-height: var(--pf-v5-c-wizard__toggle-icon--LineHeight);
@@ -312,7 +321,7 @@
 }
 @media screen and (min-width: 992px) {
   .pf-v5-c-wizard__outer-wrap {
-    padding-left: var(--pf-v5-c-wizard__outer-wrap--lg--PaddingLeft);
+    padding-inline-start: var(--pf-v5-c-wizard__outer-wrap--lg--PaddingLeft);
   }
 }
 
@@ -331,8 +340,8 @@
 
 .pf-v5-c-wizard__nav {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: var(--pf-v5-c-wizard__nav--ZIndex);
   display: none;
   width: var(--pf-v5-c-wizard__nav--Width);
@@ -349,22 +358,22 @@
   .pf-v5-c-wizard__nav {
     display: block;
     height: 100%;
-    border-right: var(--pf-v5-c-wizard__nav--lg--BorderRightWidth) solid var(--pf-v5-c-wizard__nav--lg--BorderRightColor);
+    border-inline-end: var(--pf-v5-c-wizard__nav--lg--BorderRightWidth) solid var(--pf-v5-c-wizard__nav--lg--BorderRightColor);
   }
 }
 
 .pf-v5-c-wizard__nav-list {
-  padding-top: var(--pf-v5-c-wizard__nav-list--PaddingTop);
-  padding-right: var(--pf-v5-c-wizard__nav-list--PaddingRight);
-  padding-bottom: var(--pf-v5-c-wizard__nav-list--PaddingBottom);
-  padding-left: var(--pf-v5-c-wizard__nav-list--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-wizard__nav-list--PaddingTop);
+  padding-block-end: var(--pf-v5-c-wizard__nav-list--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-wizard__nav-list--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-wizard__nav-list--PaddingRight);
   list-style: none;
   counter-reset: wizard-nav-count;
 }
 .pf-v5-c-wizard__nav-list .pf-v5-c-wizard__nav-list {
   padding: 0;
-  margin-top: var(--pf-v5-c-wizard__nav-list--nested--MarginTop);
-  margin-left: var(--pf-v5-c-wizard__nav-list--nested--MarginLeft);
+  margin-block-start: var(--pf-v5-c-wizard__nav-list--nested--MarginTop);
+  margin-inline-start: var(--pf-v5-c-wizard__nav-list--nested--MarginLeft);
 }
 .pf-v5-c-wizard__nav-list .pf-v5-c-wizard__nav-list .pf-v5-c-wizard__nav-link::before {
   content: none;
@@ -374,7 +383,7 @@
 }
 
 .pf-v5-c-wizard__nav-item + .pf-v5-c-wizard__nav-item {
-  margin-top: var(--pf-v5-c-wizard__nav-item--MarginTop);
+  margin-block-start: var(--pf-v5-c-wizard__nav-item--MarginTop);
 }
 .pf-v5-c-wizard__nav-item.pf-m-expandable > .pf-v5-c-wizard__nav-link {
   display: flex;
@@ -394,16 +403,17 @@
   display: inline-block;
   width: 100%;
   color: var(--pf-v5-c-wizard__nav-link--Color);
-  text-align: left;
+  text-align: start;
   text-decoration: var(--pf-v5-c-wizard__nav-link--TextDecoration);
   word-break: break-word;
   background-color: var(--pf-v5-c-wizard__nav-link--BackgroundColor);
   border: 0;
 }
 .pf-v5-c-wizard__toggle-num, .pf-v5-c-wizard__nav-link::before {
+  transform: translateX(var(--pf-v5-c-wizard__nav-link--before--TranslateX));
   position: absolute;
-  top: var(--pf-v5-c-wizard__nav-link--before--Top);
-  left: 0;
+  inset-block-start: var(--pf-v5-c-wizard__nav-link--before--Top);
+  inset-inline-start: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -414,11 +424,13 @@
   color: var(--pf-v5-c-wizard__nav-link--before--Color);
   background-color: var(--pf-v5-c-wizard__nav-link--before--BackgroundColor);
   border-radius: var(--pf-v5-c-wizard__nav-link--before--BorderRadius);
-  transform: translateX(var(--pf-v5-c-wizard__nav-link--before--TranslateX));
+}
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-num, .pf-v5-c-wizard__nav-link::before {
+  transform: translateX(calc(var(--pf-v5-c-wizard__nav-link--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
 }
 
 .pf-v5-c-wizard__nav-link::before {
-  top: 0;
+  inset-block-start: 0;
   content: counter(wizard-nav-count);
   counter-increment: wizard-nav-count;
 }
@@ -453,8 +465,8 @@
 }
 
 .pf-v5-c-wizard__nav-link-toggle {
-  padding-right: var(--pf-v5-c-wizard__nav-link-toggle--PaddingRight);
-  padding-left: var(--pf-v5-c-wizard__nav-link-toggle--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-wizard__nav-link-toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-wizard__nav-link-toggle--PaddingRight);
   color: var(--pf-v5-c-wizard__nav-link-toggle--Color);
 }
 
@@ -463,6 +475,9 @@
   transition: var(--pf-v5-c-wizard__nav-link-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-wizard__nav-link-toggle-icon--Rotate));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__nav-link-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-wizard__main {
   z-index: var(--pf-v5-c-wizard__main--ZIndex);
@@ -473,7 +488,10 @@
 }
 
 .pf-v5-c-wizard__main-body {
-  padding: var(--pf-v5-c-wizard__main-body--PaddingTop) var(--pf-v5-c-wizard__main-body--PaddingRight) var(--pf-v5-c-wizard__main-body--PaddingBottom) var(--pf-v5-c-wizard__main-body--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-wizard__main-body--PaddingTop);
+  padding-block-end: var(--pf-v5-c-wizard__main-body--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-wizard__main-body--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-wizard__main-body--PaddingRight);
 }
 .pf-v5-c-wizard__main-body.pf-m-no-padding {
   padding: 0;
@@ -485,21 +503,24 @@
   display: flex;
   flex-shrink: 0;
   flex-wrap: wrap;
-  padding: var(--pf-v5-c-wizard__footer--PaddingTop) var(--pf-v5-c-wizard__footer--PaddingRight) var(--pf-v5-c-wizard__footer--PaddingBottom) var(--pf-v5-c-wizard__footer--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-wizard__footer--PaddingTop);
+  padding-block-end: var(--pf-v5-c-wizard__footer--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-wizard__footer--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-wizard__footer--PaddingRight);
   background-color: var(--pf-v5-c-wizard__footer--BackgroundColor);
 }
 .pf-v5-c-wizard__footer > * {
-  margin-bottom: var(--pf-v5-c-wizard__footer--child--MarginBottom);
+  margin-block-end: var(--pf-v5-c-wizard__footer--child--MarginBottom);
 }
 .pf-v5-c-wizard__footer > *:not(:last-child) {
-  margin-right: var(--pf-v5-c-wizard__footer--child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-wizard__footer--child--MarginRight);
 }
 .pf-v5-c-page__main-wizard .pf-v5-c-wizard__footer, .pf-v5-c-modal-box .pf-v5-c-wizard__footer, .pf-v5-c-drawer > .pf-v5-c-wizard__footer {
   box-shadow: var(--pf-v5-c-wizard__footer--BoxShadow);
 }
 
 .pf-v5-c-wizard__footer-cancel {
-  margin-left: var(--pf-v5-c-wizard__footer-cancel--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-wizard__footer-cancel--MarginLeft);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button {