@patternfly/patternfly 5.1.0-prerelease.1 → 5.1.0-prerelease.10

package/components/MenuToggle/menu-toggle.css

@@ -121,7 +121,10 @@
   display: inline-flex;
   align-items: center;
   max-width: 100%;
-  padding: var(--pf-v5-c-menu-toggle--PaddingTop) var(--pf-v5-c-menu-toggle--PaddingRight) var(--pf-v5-c-menu-toggle--PaddingBottom) var(--pf-v5-c-menu-toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-menu-toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-menu-toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-menu-toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-menu-toggle--PaddingRight);
   font-size: var(--pf-v5-c-menu-toggle--FontSize);
   line-height: var(--pf-v5-c-menu-toggle--LineHeight);
   color: var(--pf-v5-c-menu-toggle--Color);
@@ -132,20 +135,26 @@
 }
 .pf-v5-c-menu-toggle::before, .pf-v5-c-menu-toggle::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   pointer-events: none;
   content: "";
 }
 .pf-v5-c-menu-toggle::before {
-  border-color: var(--pf-v5-c-menu-toggle--before--BorderTopColor) var(--pf-v5-c-menu-toggle--before--BorderRightColor) var(--pf-v5-c-menu-toggle--before--BorderBottomColor) var(--pf-v5-c-menu-toggle--before--BorderLeftColor);
   border-style: solid;
-  border-width: var(--pf-v5-c-menu-toggle--before--BorderTopWidth) var(--pf-v5-c-menu-toggle--before--BorderRightWidth) var(--pf-v5-c-menu-toggle--before--BorderBottomWidth) var(--pf-v5-c-menu-toggle--before--BorderLeftWidth);
+  border-block-start-color: var(--pf-v5-c-menu-toggle--before--BorderTopColor);
+  border-block-start-width: var(--pf-v5-c-menu-toggle--before--BorderTopWidth);
+  border-block-end-color: var(--pf-v5-c-menu-toggle--before--BorderBottomColor);
+  border-block-end-width: var(--pf-v5-c-menu-toggle--before--BorderBottomWidth);
+  border-inline-start-color: var(--pf-v5-c-menu-toggle--before--BorderLeftColor);
+  border-inline-start-width: var(--pf-v5-c-menu-toggle--before--BorderLeftWidth);
+  border-inline-end-color: var(--pf-v5-c-menu-toggle--before--BorderRightColor);
+  border-inline-end-width: var(--pf-v5-c-menu-toggle--before--BorderRightWidth);
 }
 .pf-v5-c-menu-toggle::after {
-  border-bottom: var(--pf-v5-c-menu-toggle--after--BorderBottomWidth) solid var(--pf-v5-c-menu-toggle--after--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-menu-toggle--after--BorderBottomWidth) solid var(--pf-v5-c-menu-toggle--after--BorderBottomColor);
 }
 .pf-v5-c-menu-toggle.pf-m-primary {
   --pf-v5-c-menu-toggle--BorderRadius: var(--pf-v5-c-menu-toggle--m-primary--BorderRadius);
@@ -267,13 +276,16 @@
 }
 .pf-v5-c-menu-toggle.pf-m-split-button > * {
   position: relative;
-  padding: var(--pf-v5-c-menu-toggle--PaddingTop) var(--pf-v5-c-menu-toggle--PaddingRight) var(--pf-v5-c-menu-toggle--PaddingBottom) var(--pf-v5-c-menu-toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-menu-toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-menu-toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-menu-toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-menu-toggle--PaddingRight);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button > *:first-child {
-  padding-right: var(--pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight);
+  padding-inline-end: var(--pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button:where(:not(.pf-m-action)) > :last-child {
-  padding-left: var(--pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check {
   --pf-v5-c-menu-toggle--PaddingRight: 0;
@@ -288,13 +300,13 @@
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--Left);
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--Left);
+  inset-inline-end: 0;
   pointer-events: none;
   content: "";
-  border-bottom: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth) solid var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth) solid var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:hover {
   --pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth);
@@ -334,16 +346,16 @@
   --pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: 0;
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :first-child, .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary > :first-child {
-  border-top-left-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
-  border-bottom-left-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
+  border-start-start-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
+  border-end-start-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :last-child, .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary > :last-child {
-  border-top-right-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
-  border-bottom-right-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
+  border-start-end-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
+  border-end-end-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action > :not(:first-child) {
   --pf-v5-c-menu-toggle--m-split-button--m-action--child--after--Left: calc(var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) * -1);
-  border-left: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) solid var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor);
+  border-inline-start: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) solid var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:not(.pf-m-expanded) {
   --pf-v5-c-menu-toggle--after--BorderBottomColor: transparent;
@@ -372,8 +384,8 @@
   --pf-v5-c-menu-toggle__controls--MarginRight: var(--pf-v5-c-menu-toggle__button__controls--MarginRight);
   --pf-v5-c-menu-toggle__controls--MarginLeft: var(--pf-v5-c-menu-toggle__button__controls--MarginLeft);
   align-self: var(--pf-v5-c-menu-toggle__button--AlignSelf);
-  padding-right: var(--pf-v5-c-menu-toggle__button--PaddingRight);
-  padding-left: var(--pf-v5-c-menu-toggle__button--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-menu-toggle__button--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-menu-toggle__button--PaddingRight);
   color: inherit;
   background-color: var(--pf-v5-c-menu-toggle__button--BackgroundColor);
   border: 0;
@@ -382,7 +394,7 @@
 .pf-v5-c-menu-toggle__icon {
   flex-shrink: 0;
   align-self: center;
-  margin-right: var(--pf-v5-c-menu-toggle__icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-menu-toggle__icon--MarginRight);
   line-height: 1;
 }
 
@@ -396,17 +408,17 @@
 .pf-v5-c-menu-toggle__count {
   display: flex;
   flex-wrap: nowrap;
-  margin-left: var(--pf-v5-c-menu-toggle__count--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-menu-toggle__count--MarginLeft);
 }
 
 .pf-v5-c-menu-toggle__controls {
-  padding-left: var(--pf-v5-c-menu-toggle__controls--PaddingLeft);
-  margin-right: var(--pf-v5-c-menu-toggle__controls--MarginRight);
-  margin-left: var(--pf-v5-c-menu-toggle__controls--MarginLeft);
+  padding-inline-start: var(--pf-v5-c-menu-toggle__controls--PaddingLeft);
+  margin-inline-start: var(--pf-v5-c-menu-toggle__controls--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-menu-toggle__controls--MarginRight);
 }
 
 .pf-v5-c-menu-toggle__toggle-icon {
-  margin-right: var(--pf-v5-c-menu-toggle__toggle-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-menu-toggle__toggle-icon--MarginRight);
   color: var(--pf-v5-c-menu-toggle__toggle-icon--Color, inherit);
 }
 

package/components/MenuToggle/menu-toggle.scss

@@ -169,7 +169,10 @@
   display: inline-flex;
   align-items: center;
   max-width: 100%;
-  padding: var(--#{$menu-toggle}--PaddingTop) var(--#{$menu-toggle}--PaddingRight) var(--#{$menu-toggle}--PaddingBottom) var(--#{$menu-toggle}--PaddingLeft);
+  padding-block-start: var(--#{$menu-toggle}--PaddingTop);
+  padding-block-end: var(--#{$menu-toggle}--PaddingBottom);
+  padding-inline-start: var(--#{$menu-toggle}--PaddingLeft);
+  padding-inline-end: var(--#{$menu-toggle}--PaddingRight);
   font-size: var(--#{$menu-toggle}--FontSize);
   line-height: var(--#{$menu-toggle}--LineHeight);
   color: var(--#{$menu-toggle}--Color);
@@ -181,22 +184,28 @@
   &::before,
   &::after {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+   inset-block-start: 0;
+   inset-block-end: 0;
+   inset-inline-start: 0;
+   inset-inline-end: 0;
     pointer-events: none;
     content: "";
   }
 
   &::before {
-    border-color: var(--#{$menu-toggle}--before--BorderTopColor) var(--#{$menu-toggle}--before--BorderRightColor) var(--#{$menu-toggle}--before--BorderBottomColor) var(--#{$menu-toggle}--before--BorderLeftColor);
     border-style: solid;
-    border-width: var(--#{$menu-toggle}--before--BorderTopWidth) var(--#{$menu-toggle}--before--BorderRightWidth) var(--#{$menu-toggle}--before--BorderBottomWidth) var(--#{$menu-toggle}--before--BorderLeftWidth);
+    border-block-start-color: var(--#{$menu-toggle}--before--BorderTopColor);
+    border-block-start-width: var(--#{$menu-toggle}--before--BorderTopWidth);
+    border-block-end-color: var(--#{$menu-toggle}--before--BorderBottomColor);
+    border-block-end-width: var(--#{$menu-toggle}--before--BorderBottomWidth);
+    border-inline-start-color: var(--#{$menu-toggle}--before--BorderLeftColor);
+    border-inline-start-width: var(--#{$menu-toggle}--before--BorderLeftWidth);
+    border-inline-end-color: var(--#{$menu-toggle}--before--BorderRightColor);
+    border-inline-end-width: var(--#{$menu-toggle}--before--BorderRightWidth);
   }
 
   &::after {
-    border-bottom: var(--#{$menu-toggle}--after--BorderBottomWidth) solid var(--#{$menu-toggle}--after--BorderBottomColor);
+    border-block-end: var(--#{$menu-toggle}--after--BorderBottomWidth) solid var(--#{$menu-toggle}--after--BorderBottomColor);
   }
 
   &.pf-m-primary {
@@ -354,16 +363,19 @@
 
     > * {
       position: relative;
-      padding: var(--#{$menu-toggle}--PaddingTop) var(--#{$menu-toggle}--PaddingRight) var(--#{$menu-toggle}--PaddingBottom) var(--#{$menu-toggle}--PaddingLeft);
+      padding-block-start: var(--#{$menu-toggle}--PaddingTop);
+      padding-block-end: var(--#{$menu-toggle}--PaddingBottom);
+      padding-inline-start: var(--#{$menu-toggle}--PaddingLeft);
+      padding-inline-end: var(--#{$menu-toggle}--PaddingRight);
 
       &:first-child {
-        padding-right: var(--#{$menu-toggle}--m-split-button--first-child--PaddingRight);
+        padding-inline-end: var(--#{$menu-toggle}--m-split-button--first-child--PaddingRight);
       }
     }
 
     &:where(:not(.pf-m-action)) {
       > :last-child {
-        padding-left: var(--#{$menu-toggle}--m-split-button--last-child--PaddingLeft);
+        padding-inline-start: var(--#{$menu-toggle}--m-split-button--last-child--PaddingLeft);
       }
     }
 
@@ -390,13 +402,13 @@
       &:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > * {
         &::after {
           position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: var(--#{$menu-toggle}--m-split-button--m-action--child--after--Left);
+          inset-block-start: 0;
+          inset-block-end: 0;
+          inset-inline-start: var(--#{$menu-toggle}--m-split-button--m-action--child--after--Left);
+          inset-inline-end: 0;
           pointer-events: none;
           content: "";
-          border-bottom: var(--#{$menu-toggle}--m-split-button--m-action--child--after--BorderBottomWidth) solid var(--#{$menu-toggle}--m-split-button--m-action--child--after--BorderBottomColor);
+          border-block-end: var(--#{$menu-toggle}--m-split-button--m-action--child--after--BorderBottomWidth) solid var(--#{$menu-toggle}--m-split-button--m-action--child--after--BorderBottomColor);
         }
 
         &:hover {
@@ -458,13 +470,13 @@
 
         // stylelint-disable max-nesting-depth
         > :first-child {
-          border-top-left-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
-          border-bottom-left-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
+          border-start-start-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
+          border-end-start-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
         }
 
         > :last-child {
-          border-top-right-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
-          border-bottom-right-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
+          border-start-end-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
+          border-end-end-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
         }
 
         // enable-disable
@@ -474,7 +486,7 @@
       > :not(:first-child) {
         --#{$menu-toggle}--m-split-button--m-action--child--after--Left: calc(var(--#{$menu-toggle}--m-split-button--m-action--child--BorderLeftWidth) * -1);
 
-        border-left: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderLeftWidth) solid var(--#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor);
+        border-inline-start: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderLeftWidth) solid var(--#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor);
       }
 
       &:not(.pf-m-expanded) {
@@ -519,8 +531,8 @@
   --#{$menu-toggle}__controls--MarginLeft: var(--#{$menu-toggle}__button__controls--MarginLeft);
 
   align-self: var(--#{$menu-toggle}__button--AlignSelf);
-  padding-right: var(--#{$menu-toggle}__button--PaddingRight);
-  padding-left: var(--#{$menu-toggle}__button--PaddingLeft);
+  padding-inline-start: var(--#{$menu-toggle}__button--PaddingLeft);
+  padding-inline-end: var(--#{$menu-toggle}__button--PaddingRight);
   color: inherit;
   background-color: var(--#{$menu-toggle}__button--BackgroundColor);
   border: 0;
@@ -529,7 +541,7 @@
 .#{$menu-toggle}__icon {
   flex-shrink: 0;
   align-self: center;
-  margin-right: var(--#{$menu-toggle}__icon--MarginRight);
+  margin-inline-end: var(--#{$menu-toggle}__icon--MarginRight);
   line-height: 1;
 }
 
@@ -542,17 +554,17 @@
 .#{$menu-toggle}__count {
   display: flex;
   flex-wrap: nowrap;
-  margin-left: var(--#{$menu-toggle}__count--MarginLeft);
+  margin-inline-start: var(--#{$menu-toggle}__count--MarginLeft);
 }
 
 .#{$menu-toggle}__controls {
-  padding-left: var(--#{$menu-toggle}__controls--PaddingLeft);
-  margin-right: var(--#{$menu-toggle}__controls--MarginRight);
-  margin-left: var(--#{$menu-toggle}__controls--MarginLeft);
+  padding-inline-start: var(--#{$menu-toggle}__controls--PaddingLeft);
+  margin-inline-start: var(--#{$menu-toggle}__controls--MarginLeft);
+  margin-inline-end: var(--#{$menu-toggle}__controls--MarginRight);
 }
 
 .#{$menu-toggle}__toggle-icon {
-  margin-right: var(--#{$menu-toggle}__toggle-icon--MarginRight);
+  margin-inline-end: var(--#{$menu-toggle}__toggle-icon--MarginRight);
   color: var(--#{$menu-toggle}__toggle-icon--Color, inherit);
 }
 

package/components/ModalBox/modal-box.css

@@ -68,7 +68,7 @@
   --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-lg--lg--MaxWidth);
 }
 .pf-v5-c-modal-box.pf-m-align-top {
-  top: var(--pf-v5-c-modal-box--m-align-top--MarginTop);
+  inset-block-start: var(--pf-v5-c-modal-box--m-align-top--MarginTop);
   align-self: flex-start;
   max-width: var(--pf-v5-c-modal-box--m-align-top--MaxWidth);
   max-height: var(--pf-v5-c-modal-box--m-align-top--MaxHeight);
@@ -91,27 +91,27 @@
 
 .pf-v5-c-modal-box__close {
   position: absolute;
-  top: var(--pf-v5-c-modal-box__close--Top);
-  right: var(--pf-v5-c-modal-box__close--Right);
+  inset-block-start: var(--pf-v5-c-modal-box__close--Top);
+  inset-inline-end: var(--pf-v5-c-modal-box__close--Right);
 }
 .pf-v5-c-modal-box__close + * {
-  margin-right: var(--pf-v5-c-modal-box__close--sibling--MarginRight);
+  margin-inline-end: var(--pf-v5-c-modal-box__close--sibling--MarginRight);
 }
 
 .pf-v5-c-modal-box__header {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  padding-top: var(--pf-v5-c-modal-box__header--PaddingTop);
-  padding-right: var(--pf-v5-c-modal-box__header--PaddingRight);
-  padding-left: var(--pf-v5-c-modal-box__header--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-modal-box__header--PaddingTop);
+  padding-inline-start: var(--pf-v5-c-modal-box__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-modal-box__header--PaddingRight);
 }
 .pf-v5-c-modal-box__header.pf-m-help {
   display: flex;
   flex-direction: row;
 }
 .pf-v5-c-modal-box__header:last-child {
-  padding-bottom: var(--pf-v5-c-modal-box__header--last-child--PaddingBottom);
+  padding-block-end: var(--pf-v5-c-modal-box__header--last-child--PaddingBottom);
 }
 .pf-v5-c-modal-box__header + .pf-v5-c-modal-box__body {
   --pf-v5-c-modal-box__body--PaddingTop: var(--pf-v5-c-modal-box__header--body--PaddingTop);
@@ -140,20 +140,20 @@
 }
 
 .pf-v5-c-modal-box__title-icon {
-  margin-right: var(--pf-v5-c-modal-box__title-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-modal-box__title-icon--MarginRight);
   color: var(--pf-v5-c-modal-box__title-icon--Color);
 }
 
 .pf-v5-c-modal-box__description {
-  padding-top: var(--pf-v5-c-modal-box__description--PaddingTop);
+  padding-block-start: var(--pf-v5-c-modal-box__description--PaddingTop);
 }
 
 .pf-v5-c-modal-box__body {
   flex: 1 1 auto;
   min-height: var(--pf-v5-c-modal-box__body--MinHeight);
-  padding-top: var(--pf-v5-c-modal-box__body--PaddingTop);
-  padding-right: var(--pf-v5-c-modal-box__body--PaddingRight);
-  padding-left: var(--pf-v5-c-modal-box__body--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-modal-box__body--PaddingTop);
+  padding-inline-start: var(--pf-v5-c-modal-box__body--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-modal-box__body--PaddingRight);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -161,20 +161,20 @@
   -webkit-overflow-scrolling: touch;
 }
 .pf-v5-c-modal-box__body:last-child {
-  padding-bottom: var(--pf-v5-c-modal-box__body--last-child--PaddingBottom);
+  padding-block-end: var(--pf-v5-c-modal-box__body--last-child--PaddingBottom);
 }
 
 .pf-v5-c-modal-box__footer {
   display: flex;
   flex: 0 0 auto;
   align-items: center;
-  padding-top: var(--pf-v5-c-modal-box__footer--PaddingTop);
-  padding-right: var(--pf-v5-c-modal-box__footer--PaddingRight);
-  padding-bottom: var(--pf-v5-c-modal-box__footer--PaddingBottom);
-  padding-left: var(--pf-v5-c-modal-box__footer--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-modal-box__footer--PaddingTop);
+  padding-block-end: var(--pf-v5-c-modal-box__footer--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-modal-box__footer--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-modal-box__footer--PaddingRight);
 }
 .pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {
-  margin-right: var(--pf-v5-c-modal-box__footer--c-button--MarginRight);
+  margin-inline-end: var(--pf-v5-c-modal-box__footer--c-button--MarginRight);
 }
 @media screen and (min-width: 576px) {
   .pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {

package/components/ModalBox/modal-box.scss

@@ -65,7 +65,7 @@
   --#{$modal-box}__footer--PaddingLeft: var(--#{$pf-global}--spacer--lg);
 
   // Footer buttons
-  --#{$modal-box}__footer--c-button--MarginRight: var(--#{$pf-global}--spacer--md); // Button spacer is used to manipulate margin-left and/or margin-right values at various breakpoints, with a single value.
+  --#{$modal-box}__footer--c-button--MarginRight: var(--#{$pf-global}--spacer--md); // Button spacer is used to manipulate margin-inline-start and/or margin-right values at various breakpoints, with a single value.
   --#{$modal-box}__footer--c-button--sm--MarginRight: calc(var(--#{$modal-box}__footer--c-button--MarginRight) / 2);
 
   position: relative;
@@ -91,7 +91,7 @@
   }
 
   &.pf-m-align-top {
-    top: var(--#{$modal-box}--m-align-top--MarginTop);
+   inset-block-start: var(--#{$modal-box}--m-align-top--MarginTop);
     align-self: flex-start;
     max-width: var(--#{$modal-box}--m-align-top--MaxWidth);
     max-height: var(--#{$modal-box}--m-align-top--MaxHeight);
@@ -121,11 +121,11 @@
 // Close button
 .#{$modal-box}__close {
   position: absolute;
-  top: var(--#{$modal-box}__close--Top);
-  right: var(--#{$modal-box}__close--Right);
+ inset-block-start: var(--#{$modal-box}__close--Top);
+ inset-inline-end: var(--#{$modal-box}__close--Right);
 
   + * {
-    margin-right: var(--#{$modal-box}__close--sibling--MarginRight); // Create room for the close button
+    margin-inline-end: var(--#{$modal-box}__close--sibling--MarginRight); // Create room for the close button
   }
 }
 
@@ -133,9 +133,9 @@
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  padding-top: var(--#{$modal-box}__header--PaddingTop);
-  padding-right: var(--#{$modal-box}__header--PaddingRight);
-  padding-left: var(--#{$modal-box}__header--PaddingLeft);
+  padding-block-start: var(--#{$modal-box}__header--PaddingTop);
+  padding-inline-start: var(--#{$modal-box}__header--PaddingLeft);
+  padding-inline-end: var(--#{$modal-box}__header--PaddingRight);
 
   &.pf-m-help {
     display: flex;
@@ -143,7 +143,7 @@
   }
 
   &:last-child {
-    padding-bottom: var(--#{$modal-box}__header--last-child--PaddingBottom);
+    padding-block-end: var(--#{$modal-box}__header--last-child--PaddingBottom);
   }
 
   + .#{$modal-box}__body {
@@ -173,21 +173,21 @@
 }
 
 .#{$modal-box}__title-icon {
-  margin-right: var(--#{$modal-box}__title-icon--MarginRight);
+  margin-inline-end: var(--#{$modal-box}__title-icon--MarginRight);
   color: var(--#{$modal-box}__title-icon--Color);
 }
 
 .#{$modal-box}__description {
-  padding-top: var(--#{$modal-box}__description--PaddingTop);
+  padding-block-start: var(--#{$modal-box}__description--PaddingTop);
 }
 
 // Body
 .#{$modal-box}__body {
   flex: 1 1 auto;
   min-height: var(--#{$modal-box}__body--MinHeight);
-  padding-top: var(--#{$modal-box}__body--PaddingTop);
-  padding-right: var(--#{$modal-box}__body--PaddingRight);
-  padding-left: var(--#{$modal-box}__body--PaddingLeft);
+  padding-block-start: var(--#{$modal-box}__body--PaddingTop);
+  padding-inline-start: var(--#{$modal-box}__body--PaddingLeft);
+  padding-inline-end: var(--#{$modal-box}__body--PaddingRight);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -195,7 +195,7 @@
   -webkit-overflow-scrolling: touch;
 
   &:last-child {
-    padding-bottom: var(--#{$modal-box}__body--last-child--PaddingBottom);
+    padding-block-end: var(--#{$modal-box}__body--last-child--PaddingBottom);
   }
 }
 
@@ -204,14 +204,14 @@
   display: flex;
   flex: 0 0 auto;
   align-items: center;
-  padding-top: var(--#{$modal-box}__footer--PaddingTop);
-  padding-right: var(--#{$modal-box}__footer--PaddingRight);
-  padding-bottom: var(--#{$modal-box}__footer--PaddingBottom);
-  padding-left: var(--#{$modal-box}__footer--PaddingLeft);
+  padding-block-start: var(--#{$modal-box}__footer--PaddingTop);
+  padding-block-end: var(--#{$modal-box}__footer--PaddingBottom);
+  padding-inline-start: var(--#{$modal-box}__footer--PaddingLeft);
+  padding-inline-end: var(--#{$modal-box}__footer--PaddingRight);
 
   // Base margin left and right equal for buttons when wrapped
   > .#{$button}:not(:last-child) {
-    margin-right: var(--#{$modal-box}__footer--c-button--MarginRight);
+    margin-inline-end: var(--#{$modal-box}__footer--c-button--MarginRight);
 
     @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
       --#{$modal-box}__footer--c-button--MarginRight: var(--#{$modal-box}__footer--c-button--sm--MarginRight);

package/components/MultipleFileUpload/multiple-file-upload.css

@@ -33,7 +33,7 @@
   --pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-v5-global--active-color--100);
   --pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-v5-global--active-color--100);
   --pf-v5-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
-  --pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign: left;
+  --pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign: start;
   --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
   --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
     "title upload"
@@ -93,7 +93,10 @@
   grid-template-rows: var(--pf-v5-c-multiple-file-upload__main--GridTemplateRows);
   grid-template-columns: var(--pf-v5-c-multiple-file-upload__main--GridTemplateColumns);
   gap: var(--pf-v5-c-multiple-file-upload__main--Gap);
-  padding: var(--pf-v5-c-multiple-file-upload__main--PaddingTop) var(--pf-v5-c-multiple-file-upload__main--PaddingRight) var(--pf-v5-c-multiple-file-upload__main--PaddingBottom) var(--pf-v5-c-multiple-file-upload__main--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-multiple-file-upload__main--PaddingTop);
+  padding-block-end: var(--pf-v5-c-multiple-file-upload__main--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-multiple-file-upload__main--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-multiple-file-upload__main--PaddingRight);
   text-align: var(--pf-v5-c-multiple-file-upload__main--TextAlign);
   background-color: var(--pf-v5-c-multiple-file-upload__main--BackgroundColor);
   border: var(--pf-v5-c-multiple-file-upload__main--BorderWidth) var(--pf-v5-c-multiple-file-upload__main--BorderStyle) var(--pf-v5-c-multiple-file-upload__main--BorderColor);
@@ -116,7 +119,7 @@
 
 .pf-v5-c-multiple-file-upload__title-text-separator {
   display: var(--pf-v5-c-multiple-file-upload__title-text-separator--Display);
-  margin-top: var(--pf-v5-c-multiple-file-upload__title-text-separator--MarginTop);
+  margin-block-start: var(--pf-v5-c-multiple-file-upload__title-text-separator--MarginTop);
 }
 
 .pf-v5-c-multiple-file-upload__upload {
@@ -125,7 +128,7 @@
 
 .pf-v5-c-multiple-file-upload__info {
   grid-area: info;
-  margin-top: var(--pf-v5-c-multiple-file-upload__info--MarginTop);
+  margin-block-start: var(--pf-v5-c-multiple-file-upload__info--MarginTop);
   font-size: var(--pf-v5-c-multiple-file-upload__info--FontSize);
   color: var(--pf-v5-c-multiple-file-upload__info--Color);
 }
@@ -149,9 +152,9 @@
   display: grid;
   grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-item--GridTemplateColumns);
   gap: var(--pf-v5-c-multiple-file-upload__status-item--Gap);
-  padding-top: var(--pf-v5-c-multiple-file-upload__status-item--PaddingTop);
-  padding-bottom: var(--pf-v5-c-multiple-file-upload__status-item--PaddingBottom);
-  border-bottom: var(--pf-v5-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v5-c-multiple-file-upload__status-item--BorderColor);
+  padding-block-start: var(--pf-v5-c-multiple-file-upload__status-item--PaddingTop);
+  padding-block-end: var(--pf-v5-c-multiple-file-upload__status-item--PaddingBottom);
+  border-block-end: var(--pf-v5-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v5-c-multiple-file-upload__status-item--BorderColor);
 }
 .pf-v5-c-multiple-file-upload__status-item:first-child {
   --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop);
@@ -162,7 +165,7 @@
 }
 
 .pf-v5-c-multiple-file-upload__status-item-close {
-  margin-top: var(--pf-v5-c-multiple-file-upload__status-item-close--MarginTop);
+  margin-block-start: var(--pf-v5-c-multiple-file-upload__status-item-close--MarginTop);
 }
 
 .pf-v5-c-multiple-file-upload__status-item-progress {

package/components/MultipleFileUpload/multiple-file-upload.scss

@@ -49,7 +49,7 @@
 
   // horizontal
   --#{$multiple-file-upload}--m-horizontal--GridTemplateColumns: fit-content(100%);
-  --#{$multiple-file-upload}--m-horizontal__main--TextAlign: left;
+  --#{$multiple-file-upload}--m-horizontal__main--TextAlign: start;
   --#{$multiple-file-upload}--m-horizontal__main--GridTemplateColumns: 1fr auto;
   --#{$multiple-file-upload}--m-horizontal__main--GridTemplateAreas:
     "title upload"
@@ -128,7 +128,10 @@
   grid-template-rows: var(--#{$multiple-file-upload}__main--GridTemplateRows);
   grid-template-columns: var(--#{$multiple-file-upload}__main--GridTemplateColumns);
   gap: var(--#{$multiple-file-upload}__main--Gap);
-  padding: var(--#{$multiple-file-upload}__main--PaddingTop) var(--#{$multiple-file-upload}__main--PaddingRight) var(--#{$multiple-file-upload}__main--PaddingBottom) var(--#{$multiple-file-upload}__main--PaddingLeft);
+  padding-block-start: var(--#{$multiple-file-upload}__main--PaddingTop);
+  padding-block-end: var(--#{$multiple-file-upload}__main--PaddingBottom);
+  padding-inline-start: var(--#{$multiple-file-upload}__main--PaddingLeft);
+  padding-inline-end: var(--#{$multiple-file-upload}__main--PaddingRight);
   text-align: var(--#{$multiple-file-upload}__main--TextAlign);
   background-color: var(--#{$multiple-file-upload}__main--BackgroundColor);
   border: var(--#{$multiple-file-upload}__main--BorderWidth) var(--#{$multiple-file-upload}__main--BorderStyle) var(--#{$multiple-file-upload}__main--BorderColor);
@@ -151,7 +154,7 @@
 
 .#{$multiple-file-upload}__title-text-separator {
   display: var(--#{$multiple-file-upload}__title-text-separator--Display);
-  margin-top: var(--#{$multiple-file-upload}__title-text-separator--MarginTop);
+  margin-block-start: var(--#{$multiple-file-upload}__title-text-separator--MarginTop);
 }
 
 .#{$multiple-file-upload}__upload {
@@ -160,7 +163,7 @@
 
 .#{$multiple-file-upload}__info {
   grid-area: info;
-  margin-top: var(--#{$multiple-file-upload}__info--MarginTop);
+  margin-block-start: var(--#{$multiple-file-upload}__info--MarginTop);
   font-size: var(--#{$multiple-file-upload}__info--FontSize);
   color: var(--#{$multiple-file-upload}__info--Color);
 }
@@ -184,9 +187,9 @@
   display: grid;
   grid-template-columns: var(--#{$multiple-file-upload}__status-item--GridTemplateColumns);
   gap: var(--#{$multiple-file-upload}__status-item--Gap);
-  padding-top: var(--#{$multiple-file-upload}__status-item--PaddingTop);
-  padding-bottom: var(--#{$multiple-file-upload}__status-item--PaddingBottom);
-  border-bottom: var(--#{$multiple-file-upload}__status-item--BorderWidth) solid var(--#{$multiple-file-upload}__status-item--BorderColor);
+  padding-block-start: var(--#{$multiple-file-upload}__status-item--PaddingTop);
+  padding-block-end: var(--#{$multiple-file-upload}__status-item--PaddingBottom);
+  border-block-end: var(--#{$multiple-file-upload}__status-item--BorderWidth) solid var(--#{$multiple-file-upload}__status-item--BorderColor);
 
   &:first-child {
     --#{$multiple-file-upload}__status-item--PaddingTop: var(--#{$multiple-file-upload}__status-item--first-child--PaddingTop);
@@ -198,7 +201,7 @@
 }
 
 .#{$multiple-file-upload}__status-item-close {
-  margin-top: var(--#{$multiple-file-upload}__status-item-close--MarginTop);
+  margin-block-start: var(--#{$multiple-file-upload}__status-item-close--MarginTop);
 }
 
 .#{$multiple-file-upload}__status-item-progress {