@patternfly/patternfly 6.0.0-alpha.2 → 6.0.0-alpha.21

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-Backdrop.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>

package/docs/components/Accordion/examples/Accordion.md

@@ -499,6 +499,100 @@ cssPrefix: pf-v5-c-accordion
 
 ```
 
+### Toggle icon at start
+
+```html isBeta
+<div class="pf-v5-c-accordion pf-m-toggle-start">
+  <h3>
+    <button
+      class="pf-v5-c-accordion__toggle"
+      type="button"
+      aria-expanded="false"
+    >
+      <span class="pf-v5-c-accordion__toggle-icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </span>
+
+      <span class="pf-v5-c-accordion__toggle-text">Item one</span>
+    </button>
+  </h3>
+  <div class="pf-v5-c-accordion__expandable-content" hidden>
+    <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
+  </div>
+
+  <h3>
+    <button
+      class="pf-v5-c-accordion__toggle"
+      type="button"
+      aria-expanded="false"
+    >
+      <span class="pf-v5-c-accordion__toggle-icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </span>
+
+      <span class="pf-v5-c-accordion__toggle-text">Item two</span>
+    </button>
+  </h3>
+  <div class="pf-v5-c-accordion__expandable-content" hidden>
+    <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
+  </div>
+
+  <h3>
+    <button
+      class="pf-v5-c-accordion__toggle"
+      type="button"
+      aria-expanded="false"
+    >
+      <span class="pf-v5-c-accordion__toggle-icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </span>
+
+      <span class="pf-v5-c-accordion__toggle-text">Item three</span>
+    </button>
+  </h3>
+  <div class="pf-v5-c-accordion__expandable-content" hidden>
+    <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
+  </div>
+
+  <h3>
+    <button
+      class="pf-v5-c-accordion__toggle pf-m-expanded"
+      type="button"
+      aria-expanded="true"
+    >
+      <span class="pf-v5-c-accordion__toggle-icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </span>
+
+      <span class="pf-v5-c-accordion__toggle-text">Item four</span>
+    </button>
+  </h3>
+  <div class="pf-v5-c-accordion__expandable-content pf-m-expanded">
+    <div
+      class="pf-v5-c-accordion__expandable-content-body"
+    >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+  </div>
+
+  <h3>
+    <button
+      class="pf-v5-c-accordion__toggle"
+      type="button"
+      aria-expanded="false"
+    >
+      <span class="pf-v5-c-accordion__toggle-icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </span>
+
+      <span class="pf-v5-c-accordion__toggle-text">Item five</span>
+    </button>
+  </h3>
+  <div class="pf-v5-c-accordion__expandable-content" hidden>
+    <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -522,5 +616,6 @@ In these examples `.pf-v5-c-accordion` uses `<dl>`, `.pf-v5-c-accordion__toggle`
 | `.pf-v5-c-accordion__expandable-content-body` | `<div>` | Initiates expandable content body. **Required** |
 | `.pf-m-bordered` | `.pf-v5-c-accordion` | Modifies the accordion to add borders between items. |
 | `.pf-m-display-lg` | `.pf-v5-c-accordion` | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
+| `.pf-m-toggle-start` | `.pf-v5-c-accordion` | Modifies accordion styling when accordion toggle icons are rendered at the start of the toggle, before the toggle text. |
 | `.pf-m-expanded` | `.pf-v5-c-accordion__toggle`, `.pf-v5-c-accordion__expandable-content` | Modifies the accordion button and expandable content for the expanded state. |
 | `.pf-m-fixed` | `.pf-v5-c-accordion__expandable-content` | Modifies the expandable content for the fixed state. |

package/docs/components/Alert/examples/Alert.md

@@ -392,7 +392,7 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
   </div>
   <p class="pf-v5-c-alert__title">
     <span class="pf-v5-screen-reader">Success alert:</span>
-    Success alert title
+    Success alert title (inline)
   </p>
 </div>
 

package/docs/components/Badge/examples/Badge.md

@@ -36,6 +36,26 @@ cssPrefix: pf-v5-c-badge
 
 ```
 
+### Badge as toggle
+
+```html
+<span class="pf-v5-c-badge pf-m-read">
+  7
+  <span class="pf-v5-c-badge__toggle-icon">
+    <i class="fas fa-caret-down"></i>
+  </span>
+</span>
+<span class="pf-v5-c-badge pf-m-unread">
+  7
+  <span class="pf-v5-screen-reader">unread messages</span>
+
+  <span class="pf-v5-c-badge__toggle-icon">
+    <i class="fas fa-caret-down"></i>
+  </span>
+</span>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -47,5 +67,6 @@ Always add a modifier class. Never use the class `.pf-v5-c-badge` on its own.
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-v5-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** |
+| `.pf-v5-c-badge__toggle-icon` | `<span>` | Initiates a badge toggle icon. |
 | `.pf-m-read` | `.pf-v5-c-badge` | Applies read badge styling. |
 | `.pf-m-unread` | `.pf-v5-c-badge` | Applies unread badge styling. |

package/docs/components/Brand/examples/Brand.css

@@ -0,0 +1,12 @@
+.show-dark,
+:where(.pf-v5-theme-dark) .show-light {
+  display: none;
+}
+
+:where(.pf-v5-theme-dark) .show-dark {
+  display: revert;
+}
+
+:where(.pf-v5-theme-dark) .show-dark .pf-m-picture {
+  display: inline-flex;
+}