@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.60

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 {

package/components/Wizard/wizard.scss

@@ -241,14 +241,17 @@
 
   position: relative;
   z-index: var(--#{$wizard}__header--ZIndex);
-  padding: var(--#{$wizard}__header--PaddingTop) var(--#{$wizard}__header--PaddingRight) var(--#{$wizard}__header--PaddingBottom) var(--#{$wizard}__header--PaddingLeft);
+  padding-block-start: var(--#{$wizard}__header--PaddingTop);
+  padding-block-end: var(--#{$wizard}__header--PaddingBottom);
+  padding-inline-start: var(--#{$wizard}__header--PaddingLeft);
+  padding-inline-end: var(--#{$wizard}__header--PaddingRight);
   background-color: var(--#{$wizard}__header--BackgroundColor);
 
   // Nested selector to match button component color specificity
   .#{$wizard}__close {
     position: absolute;
-    top: var(--#{$wizard}__close--Top);
-    right: var(--#{$wizard}__close--Right);
+   inset-block-start: var(--#{$wizard}__close--Top);
+   inset-inline-end: var(--#{$wizard}__close--Right);
 
     button {
       font-size: var(--#{$wizard}__close--FontSize);
@@ -257,7 +260,7 @@
 }
 
 .#{$wizard}__title {
-  padding-right: var(--#{$wizard}__title--PaddingRight);
+  padding-inline-end: var(--#{$wizard}__title--PaddingRight);
   word-wrap: break-word;
 }
 
@@ -270,7 +273,7 @@
 
 .#{$wizard}__description {
   display: none;
-  padding-top: var(--#{$wizard}__description--PaddingTop);
+  padding-block-start: var(--#{$wizard}__description--PaddingTop);
   color: var(--#{$wizard}__description--Color);
 
   @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
@@ -284,7 +287,10 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-  padding: var(--#{$wizard}__toggle--PaddingTop) var(--#{$wizard}__toggle--PaddingRight) var(--#{$wizard}__toggle--PaddingBottom) var(--#{$wizard}__toggle--PaddingLeft);
+  padding-block-start: var(--#{$wizard}__toggle--PaddingTop);
+  padding-block-end: var(--#{$wizard}__toggle--PaddingBottom);
+  padding-inline-start: var(--#{$wizard}__toggle--PaddingLeft);
+  padding-inline-end: var(--#{$wizard}__toggle--PaddingRight);
   background-color: var(--#{$wizard}__toggle--BackgroundColor);
   border: 0;
   box-shadow: var(--#{$wizard}__toggle--BoxShadow);
@@ -296,7 +302,7 @@
   &.pf-m-expanded {
     --#{$wizard}__toggle--BoxShadow: none;
 
-    border-bottom: var(--#{$wizard}__toggle--m-expanded--BorderBottomWidth) solid var(--#{$wizard}__toggle--m-expanded--BorderBottomColor);
+    border-block-end: var(--#{$wizard}__toggle--m-expanded--BorderBottomWidth) solid var(--#{$wizard}__toggle--m-expanded--BorderBottomColor);
 
     .#{$wizard}__toggle-icon {
       transform: rotate(var(--#{$wizard}__toggle--m-expanded__toggle-icon--Rotate));
@@ -309,18 +315,18 @@
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
-  margin-right: var(--#{$wizard}__toggle-list--MarginRight);
-  margin-bottom: var(--#{$wizard}__toggle-list--MarginBottom);
+  margin-block-end: var(--#{$wizard}__toggle-list--MarginBottom);
+  margin-inline-end: var(--#{$wizard}__toggle-list--MarginRight);
   list-style: none;
 }
 
 .#{$wizard}__toggle-list-item {
-  margin-bottom: var(--#{$wizard}__toggle-list-item--MarginBottom);
-  text-align: left;
+  margin-block-end: var(--#{$wizard}__toggle-list-item--MarginBottom);
+  text-align: start;
   word-break: break-word;
 
   &:not(:last-child) {
-    margin-right: var(--#{$wizard}__toggle-list-item--not-last-child--MarginRight);
+    margin-inline-end: var(--#{$wizard}__toggle-list-item--not-last-child--MarginRight);
   }
 }
 
@@ -329,7 +335,9 @@
 }
 
 .#{$wizard}__toggle-separator {
-  margin-left: var(--#{$wizard}__toggle-separator--MarginLeft);
+  @include pf-v5-mirror-inline-on-rtl;
+
+  margin-inline-start: var(--#{$wizard}__toggle-separator--MarginLeft);
   color: var(--#{$wizard}__toggle-separator--Color);
 }
 
@@ -346,7 +354,7 @@
   background-color: var(--#{$wizard}__outer-wrap--BackgroundColor);
 
   @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
-    padding-left: var(--#{$wizard}__outer-wrap--lg--PaddingLeft);
+    padding-inline-start: var(--#{$wizard}__outer-wrap--lg--PaddingLeft);
   }
 }
 
@@ -364,8 +372,8 @@
 
 .#{$wizard}__nav {
   position: absolute;
-  top: 0;
-  left: 0;
+ inset-block-start: 0;
+ inset-inline-start: 0;
   z-index: var(--#{$wizard}__nav--ZIndex);
   display: none;
   width: var(--#{$wizard}__nav--Width);
@@ -382,23 +390,23 @@
   @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
     display: block;
     height: 100%;
-    border-right: var(--#{$wizard}__nav--lg--BorderRightWidth) solid var(--#{$wizard}__nav--lg--BorderRightColor);
+    border-inline-end: var(--#{$wizard}__nav--lg--BorderRightWidth) solid var(--#{$wizard}__nav--lg--BorderRightColor);
   }
 }
 
 .#{$wizard}__nav-list {
-  padding-top: var(--#{$wizard}__nav-list--PaddingTop);
-  padding-right: var(--#{$wizard}__nav-list--PaddingRight);
-  padding-bottom: var(--#{$wizard}__nav-list--PaddingBottom);
-  padding-left: var(--#{$wizard}__nav-list--PaddingLeft);
+  padding-block-start: var(--#{$wizard}__nav-list--PaddingTop);
+  padding-block-end: var(--#{$wizard}__nav-list--PaddingBottom);
+  padding-inline-start: var(--#{$wizard}__nav-list--PaddingLeft);
+  padding-inline-end: var(--#{$wizard}__nav-list--PaddingRight);
   list-style: none;
   counter-reset: wizard-nav-count;
 
   // Nested sub menus
   & & {
     padding: 0;
-    margin-top: var(--#{$wizard}__nav-list--nested--MarginTop);
-    margin-left: var(--#{$wizard}__nav-list--nested--MarginLeft);
+    margin-block-start: var(--#{$wizard}__nav-list--nested--MarginTop);
+    margin-inline-start: var(--#{$wizard}__nav-list--nested--MarginLeft);
 
     // Reset styles for nested nav links
     .#{$wizard}__nav-link {
@@ -415,7 +423,7 @@
 
 .#{$wizard}__nav-item {
   & + & {
-    margin-top: var(--#{$wizard}__nav-item--MarginTop);
+    margin-block-start: var(--#{$wizard}__nav-item--MarginTop);
   }
 
   &.pf-m-expandable {
@@ -444,7 +452,7 @@
   display: inline-block;
   width: 100%;
   color: var(--#{$wizard}__nav-link--Color);
-  text-align: left; // needed for when the item is a button
+  text-align: start; // needed for when the item is a button
   text-decoration: var(--#{$wizard}__nav-link--TextDecoration);
   word-break: break-word;
   background-color: var(--#{$wizard}__nav-link--BackgroundColor);
@@ -453,9 +461,15 @@
   // Common step number styles
   @at-root .#{$wizard}__toggle-num,
   &::before {
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translateX(var(--#{$wizard}__nav-link--before--TranslateX)),
+      $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$wizard}__nav-link--before--TranslateX))})
+    );
+
     position: absolute;
-    top: var(--#{$wizard}__nav-link--before--Top);
-    left: 0;
+    inset-block-start: var(--#{$wizard}__nav-link--before--Top);
+    inset-inline-start: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -466,12 +480,11 @@
     color: var(--#{$wizard}__nav-link--before--Color);
     background-color: var(--#{$wizard}__nav-link--before--BackgroundColor);
     border-radius: var(--#{$wizard}__nav-link--before--BorderRadius);
-    transform: translateX(var(--#{$wizard}__nav-link--before--TranslateX));
   }
 
   // Nav step number
   &::before {
-    top: 0;
+   inset-block-start: 0;
     content: counter(wizard-nav-count);
     counter-increment: wizard-nav-count;
   }
@@ -516,12 +529,14 @@
 }
 
 .#{$wizard}__nav-link-toggle {
-  padding-right: var(--#{$wizard}__nav-link-toggle--PaddingRight);
-  padding-left: var(--#{$wizard}__nav-link-toggle--PaddingLeft);
+  padding-inline-start: var(--#{$wizard}__nav-link-toggle--PaddingLeft);
+  padding-inline-end: var(--#{$wizard}__nav-link-toggle--PaddingRight);
   color: var(--#{$wizard}__nav-link-toggle--Color);
 }
 
 .#{$wizard}__nav-link-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   display: inline-block;
   transition: var(--#{$wizard}__nav-link-toggle-icon--Transition);
   transform: rotate(var(--#{$wizard}__nav-link-toggle-icon--Rotate));
@@ -536,7 +551,10 @@
 }
 
 .#{$wizard}__main-body {
-  padding: var(--#{$wizard}__main-body--PaddingTop) var(--#{$wizard}__main-body--PaddingRight) var(--#{$wizard}__main-body--PaddingBottom) var(--#{$wizard}__main-body--PaddingLeft);
+  padding-block-start: var(--#{$wizard}__main-body--PaddingTop);
+  padding-block-end: var(--#{$wizard}__main-body--PaddingBottom);
+  padding-inline-start: var(--#{$wizard}__main-body--PaddingLeft);
+  padding-inline-end: var(--#{$wizard}__main-body--PaddingRight);
 
   &.pf-m-no-padding {
     padding: 0;
@@ -549,14 +567,17 @@
   display: flex;
   flex-shrink: 0;
   flex-wrap: wrap;
-  padding: var(--#{$wizard}__footer--PaddingTop) var(--#{$wizard}__footer--PaddingRight) var(--#{$wizard}__footer--PaddingBottom) var(--#{$wizard}__footer--PaddingLeft);
+  padding-block-start: var(--#{$wizard}__footer--PaddingTop);
+  padding-block-end: var(--#{$wizard}__footer--PaddingBottom);
+  padding-inline-start: var(--#{$wizard}__footer--PaddingLeft);
+  padding-inline-end: var(--#{$wizard}__footer--PaddingRight);
   background-color: var(--#{$wizard}__footer--BackgroundColor);
 
   > * {
-    margin-bottom: var(--#{$wizard}__footer--child--MarginBottom);
+    margin-block-end: var(--#{$wizard}__footer--child--MarginBottom);
 
     &:not(:last-child) {
-      margin-right: var(--#{$wizard}__footer--child--MarginRight);
+      margin-inline-end: var(--#{$wizard}__footer--child--MarginRight);
     }
   }
 
@@ -570,7 +591,7 @@
 }
 
 .#{$wizard}__footer-cancel {
-  margin-left: var(--#{$wizard}__footer-cancel--MarginLeft);
+  margin-inline-start: var(--#{$wizard}__footer-cancel--MarginLeft);
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/docs/components/AboutModalBox/examples/AboutModalBox.md

@@ -9,12 +9,12 @@ cssPrefix: pf-v5-c-about-modal-box
 ```html isFullscreen
 <div
   class="pf-v5-c-about-modal-box"
-  style="--pf-v5-c-about-modal-box--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+  style="--pf-v5-c-about-modal-box--BackgroundImage: url(/assets/images/pf-background.svg)"
 >
   <div class="pf-v5-c-about-modal-box__brand">
     <img
       class="pf-v5-c-about-modal-box__brand-image"
-      src="/assets/images/pf_mini_logo_white.svg"
+      src="/assets/images/PF-IconLogo.svg"
       alt="PatternFly brand logo"
     />
   </div>