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

package/components/ContextSelector/context-selector.scss

@@ -159,13 +159,13 @@
       align-self: stretch;
 
       &::before {
-        border-top-width: var(--#{$context-selector}--m-full-height__toggle--before--BorderTopWidth);
+        border-block-start-width: var(--#{$context-selector}--m-full-height__toggle--before--BorderTopWidth);
       }
     }
 
     &:hover {
       .#{$context-selector}__toggle::before {
-        border-bottom-width: var(--#{$context-selector}--m-full-height__toggle--hover--BorderBottomWidth);
+        border-block-end-width: var(--#{$context-selector}--m-full-height__toggle--hover--BorderBottomWidth);
       }
     }
   }
@@ -200,7 +200,10 @@
   column-gap: var(--#{$context-selector}__toggle--ColumnGap);
   align-items: center;
   width: 100%;
-  padding: var(--#{$context-selector}__toggle--PaddingTop) var(--#{$context-selector}__toggle--PaddingRight) var(--#{$context-selector}__toggle--PaddingBottom) var(--#{$context-selector}__toggle--PaddingLeft);
+  padding-block-start: var(--#{$context-selector}__toggle--PaddingTop);
+  padding-block-end: var(--#{$context-selector}__toggle--PaddingBottom);
+  padding-inline-start: var(--#{$context-selector}__toggle--PaddingLeft);
+  padding-inline-end: var(--#{$context-selector}__toggle--PaddingRight);
   color: var(--#{$context-selector}__toggle--Color);
   white-space: nowrap;
   cursor: pointer;
@@ -209,20 +212,23 @@
 
   &::before {
     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;
     content: "";
     border: var(--#{$context-selector}__toggle--BorderWidth) solid;
-    border-color: var(--#{$context-selector}__toggle--BorderTopColor) var(--#{$context-selector}__toggle--BorderRightColor) var(--#{$context-selector}__toggle--BorderBottomColor) var(--#{$context-selector}__toggle--BorderLeftColor);
+    border-block-start-color: var(--#{$context-selector}__toggle--BorderTopColor);
+    border-block-end-color: var(--#{$context-selector}__toggle--BorderBottomColor);
+    border-inline-start-color: var(--#{$context-selector}__toggle--BorderLeftColor);
+    border-inline-end-color: var(--#{$context-selector}__toggle--BorderRightColor);
   }
 
   &:hover {
     &::before {
       --#{$context-selector}__toggle--BorderBottomColor: var(--#{$context-selector}__toggle--hover--BorderBottomColor);
 
-      border-bottom-width: var(--#{$context-selector}__toggle--hover--BorderBottomWidth);
+      border-block-end-width: var(--#{$context-selector}__toggle--hover--BorderBottomWidth);
     }
   }
 
@@ -232,7 +238,7 @@
     &::before {
       --#{$context-selector}__toggle--BorderBottomColor: var(--#{$context-selector}__toggle--active--BorderBottomColor);
 
-      border-bottom-width: var(--#{$context-selector}__toggle--active--BorderBottomWidth);
+      border-block-end-width: var(--#{$context-selector}__toggle--active--BorderBottomWidth);
     }
   }
 
@@ -240,7 +246,7 @@
     &::before {
       --#{$context-selector}__toggle--BorderBottomColor: var(--#{$context-selector}__toggle--expanded--BorderBottomColor);
 
-      border-bottom-width: var(--#{$context-selector}__toggle--expanded--BorderBottomWidth);
+      border-block-end-width: var(--#{$context-selector}__toggle--expanded--BorderBottomWidth);
     }
   }
 
@@ -286,13 +292,13 @@
     font-size: var(--#{$context-selector}__toggle-text--FontSize);
     font-weight: var(--#{$context-selector}__toggle-text--FontWeight);
     line-height: var(--#{$context-selector}__toggle-text--LineHeight);
-    text-align: left;
+    text-align: start;
   }
 }
 
 .#{$context-selector}__toggle-icon {
-  padding-right: var(--#{$context-selector}__toggle-icon--PaddingRight);
-  padding-left: var(--#{$context-selector}__toggle-icon--PaddingLeft);
+  padding-inline-start: var(--#{$context-selector}__toggle-icon--PaddingLeft);
+  padding-inline-end: var(--#{$context-selector}__toggle-icon--PaddingRight);
   color: var(--#{$context-selector}__toggle-icon--Color, inherit);
 }
 
@@ -300,7 +306,7 @@
   @include pf-v5-t-light;
 
   position: absolute;
-  top: var(--#{$context-selector}__menu--Top);
+  inset-block-start: var(--#{$context-selector}__menu--Top);
   z-index: var(--#{$context-selector}__menu--ZIndex);
   min-width: 100%;
   background-color: var(--#{$context-selector}__menu--BackgroundColor);
@@ -309,10 +315,10 @@
 
   &.pf-m-static {
     position: static;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
+    inset-block-start: auto;
+    inset-block-end: auto;
+    inset-inline-start: auto;
+    inset-inline-end: auto;
     z-index: auto;
     min-width: min-content;
   }
@@ -320,19 +326,25 @@
 
 .#{$context-selector}__menu-search {
   position: relative;
-  padding: var(--#{$context-selector}__menu-search--PaddingTop) var(--#{$context-selector}__menu-search--PaddingRight) var(--#{$context-selector}__menu-search--PaddingBottom) var(--#{$context-selector}__menu-search--PaddingLeft);
-  border-bottom: var(--#{$context-selector}__menu-search--BorderBottomWidth) solid var(--#{$context-selector}__menu-search--BorderBottomColor);
+  padding-block-start: var(--#{$context-selector}__menu-search--PaddingTop);
+  padding-block-end: var(--#{$context-selector}__menu-search--PaddingBottom);
+  padding-inline-start: var(--#{$context-selector}__menu-search--PaddingLeft);
+  padding-inline-end: var(--#{$context-selector}__menu-search--PaddingRight);
+  border-block-end: var(--#{$context-selector}__menu-search--BorderBottomWidth) solid var(--#{$context-selector}__menu-search--BorderBottomColor);
 }
 
 .#{$context-selector}__menu-footer {
-  padding: var(--#{$context-selector}__menu-footer--PaddingTop) var(--#{$context-selector}__menu-footer--PaddingRight) var(--#{$context-selector}__menu-footer--PaddingBottom) var(--#{$context-selector}__menu-footer--PaddingLeft);
+  padding-block-start: var(--#{$context-selector}__menu-footer--PaddingTop);
+  padding-block-end: var(--#{$context-selector}__menu-footer--PaddingBottom);
+  padding-inline-start: var(--#{$context-selector}__menu-footer--PaddingLeft);
+  padding-inline-end: var(--#{$context-selector}__menu-footer--PaddingRight);
   box-shadow: var(--#{$context-selector}__menu-footer--BoxShadow);
 }
 
 .#{$context-selector}__menu-list {
   max-height: var(--#{$context-selector}__menu-list--MaxHeight);
-  padding-top: var(--#{$context-selector}__menu-list--PaddingTop);
-  padding-bottom: var(--#{$context-selector}__menu-list--PaddingBottom);
+  padding-block-start: var(--#{$context-selector}__menu-list--PaddingTop);
+  padding-block-end: var(--#{$context-selector}__menu-list--PaddingBottom);
   overflow-y: auto;
 }
 
@@ -340,7 +352,10 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--#{$context-selector}__menu-list-item--PaddingTop) var(--#{$context-selector}__menu-list-item--PaddingRight) var(--#{$context-selector}__menu-list-item--PaddingBottom) var(--#{$context-selector}__menu-list-item--PaddingLeft);
+  padding-block-start: var(--#{$context-selector}__menu-list-item--PaddingTop);
+  padding-block-end: var(--#{$context-selector}__menu-list-item--PaddingBottom);
+  padding-inline-start: var(--#{$context-selector}__menu-list-item--PaddingLeft);
+  padding-inline-end: var(--#{$context-selector}__menu-list-item--PaddingRight);
   color: var(--#{$context-selector}__menu-list-item--Color);
   white-space: nowrap;
   background-color: var(--#{$context-selector}__menu-list-item--BackgroundColor);

package/components/ContextSelector/themes/dark/context-selector.scss

@@ -19,6 +19,6 @@
   }
 
   .#{$context-selector}__menu-footer {
-    border-top: 1px solid var(--#{$pf-global}--BorderColor--300);
+    border-block-start: 1px solid var(--#{$pf-global}--BorderColor--300);
   }
 }

package/components/DataList/data-list-grid.css

@@ -23,17 +23,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
   .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -81,17 +81,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
   .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -139,17 +139,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
   .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -197,17 +197,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
   .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -255,17 +255,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
   .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -313,17 +313,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
   .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -371,17 +371,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
   .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;

package/components/DataList/data-list-grid.scss

@@ -43,14 +43,14 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--#{$data-list}__item-content--md--PaddingBottom);
+    padding-block-end: var(--#{$data-list}__item-content--md--PaddingBottom);
   }
 
   .#{$data-list}__cell {
     // stylelint-disable selector-not-notation
     // update to single :not() in breaking change
     &:not(:last-child):not(.pf-m-icon) {
-      margin-right: var(--#{$data-list}__cell--MarginRight);
+      margin-inline-end: var(--#{$data-list}__cell--MarginRight);
     }
 
     // for all subsequent .#{$data-list}__cell's, set to full width
@@ -60,7 +60,7 @@
     }
 
     &.pf-m-align-right {
-      margin-left: auto;
+      margin-inline-start: auto;
     }
 
     &.pf-m-no-fill {

package/components/DataList/data-list.css

@@ -84,17 +84,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
   .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -142,17 +142,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
   .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -200,17 +200,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
   .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -258,17 +258,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
   .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -316,17 +316,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
   .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -374,17 +374,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
   .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -432,17 +432,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
   .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -590,7 +590,7 @@
   font-size: var(--pf-v5-c-data-list--FontSize);
   line-height: var(--pf-v5-c-data-list--LineHeight);
   overflow-wrap: break-word;
-  border-top: var(--pf-v5-c-data-list--BorderTopWidth) solid var(--pf-v5-c-data-list--BorderTopColor);
+  border-block-start: var(--pf-v5-c-data-list--BorderTopWidth) solid var(--pf-v5-c-data-list--BorderTopColor);
 }
 @media screen and (min-width: 576px) {
   .pf-v5-c-data-list {
@@ -669,13 +669,13 @@
   display: flex;
   flex-direction: column;
   background-color: var(--pf-v5-c-data-list__item--BackgroundColor);
-  border-bottom: var(--pf-v5-c-data-list__item--BorderBottomWidth) solid var(--pf-v5-c-data-list__item--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-data-list__item--BorderBottomWidth) solid var(--pf-v5-c-data-list__item--BorderBottomColor);
 }
 .pf-v5-c-data-list__item::before {
   position: absolute;
-  top: var(--pf-v5-c-data-list__item--before--Top);
-  bottom: 0;
-  left: 0;
+  inset-block-start: var(--pf-v5-c-data-list__item--before--Top);
+  inset-block-end: 0;
+  inset-inline-start: 0;
   width: var(--pf-v5-c-data-list__item--before--Width);
   content: "";
   background-color: var(--pf-v5-c-data-list__item--before--BackgroundColor);
@@ -693,7 +693,7 @@
   --pf-v5-c-data-list__item--BorderBottomWidth: 0;
 }
 .pf-v5-c-data-list__item.pf-m-clickable:hover:not(.pf-m-selected):not(:last-child) + .pf-v5-c-data-list__item, .pf-v5-c-data-list__item.pf-m-clickable:focus:not(.pf-m-selected):not(:last-child) + .pf-v5-c-data-list__item {
-  border-top: var(--pf-v5-c-data-list__item--m-clickable--hover--item--BorderTopWidth) solid var(--pf-v5-c-data-list__item--m-clickable--hover--item--BorderTopColor);
+  border-block-start: var(--pf-v5-c-data-list__item--m-clickable--hover--item--BorderTopWidth) solid var(--pf-v5-c-data-list__item--m-clickable--hover--item--BorderTopColor);
 }
 .pf-v5-c-data-list__item.pf-m-clickable:hover {
   box-shadow: var(--pf-v5-c-data-list__item--m-clickable--hover--BoxShadow);
@@ -712,10 +712,10 @@
 }
 .pf-v5-c-data-list__item.pf-m-ghost-row::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;
   content: "";
   background-color: var(--pf-v5-c-data-list__item--m-ghost-row--after--BackgroundColor);
   opacity: var(--pf-v5-c-data-list__item--m-ghost-row--after--Opacity);
@@ -727,19 +727,19 @@
 .pf-v5-c-data-list__item-row {
   display: flex;
   flex-wrap: nowrap;
-  padding-right: var(--pf-v5-c-data-list__item-row--PaddingRight);
-  padding-left: var(--pf-v5-c-data-list__item-row--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-data-list__item-row--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-data-list__item-row--PaddingRight);
 }
 
 .pf-v5-c-data-list__item-control {
   display: flex;
   flex-wrap: nowrap;
-  padding-top: var(--pf-v5-c-data-list__item-control--PaddingTop);
-  padding-bottom: var(--pf-v5-c-data-list__item-control--PaddingBottom);
-  margin-right: var(--pf-v5-c-data-list__item-control--MarginRight);
+  padding-block-start: var(--pf-v5-c-data-list__item-control--PaddingTop);
+  padding-block-end: var(--pf-v5-c-data-list__item-control--PaddingBottom);
+  margin-inline-end: var(--pf-v5-c-data-list__item-control--MarginRight);
 }
 .pf-v5-c-data-list__item-control > *:not(:last-child) {
-  margin-right: var(--pf-v5-c-data-list__item-control--not-last-child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-data-list__item-control--not-last-child--MarginRight);
 }
 
 .pf-v5-c-data-list__check {
@@ -747,7 +747,7 @@
   align-items: center;
   align-self: flex-start;
   height: var(--pf-v5-c-data-list__check--Height);
-  margin-top: var(--pf-v5-c-data-list__check--MarginTop);
+  margin-block-start: var(--pf-v5-c-data-list__check--MarginTop);
 }
 .pf-v5-c-data-list__check > input {
   cursor: pointer;
@@ -756,8 +756,13 @@
 .pf-v5-c-data-list__item-draggable-button {
   display: flex;
   flex-direction: column;
-  padding: var(--pf-v5-c-data-list__item-draggable-button--PaddingTop) var(--pf-v5-c-data-list__item-draggable-button--PaddingRight) var(--pf-v5-c-data-list__item-draggable-button--PaddingBottom) var(--pf-v5-c-data-list__item-draggable-button--PaddingLeft);
-  margin: var(--pf-v5-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-v5-c-data-list__item-draggable-button--MarginBottom) var(--pf-v5-c-data-list__item-draggable-button--MarginLeft);
+  padding-block-start: var(--pf-v5-c-data-list__item-draggable-button--PaddingTop);
+  padding-block-end: var(--pf-v5-c-data-list__item-draggable-button--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-data-list__item-draggable-button--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-data-list__item-draggable-button--PaddingRight);
+  margin-block-start: var(--pf-v5-c-data-list__item-draggable-button--MarginTop);
+  margin-block-end: var(--pf-v5-c-data-list__item-draggable-button--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-data-list__item-draggable-button--MarginLeft);
   background-color: var(--pf-v5-c-data-list__item-draggable-button--BackgroundColor);
   border: 0;
 }
@@ -783,20 +788,22 @@
   --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-data-list__item-action--Display);
   align-content: flex-start;
   align-items: flex-start;
-  padding-top: var(--pf-v5-c-data-list__item-action--PaddingTop);
-  padding-bottom: var(--pf-v5-c-data-list__item-action--PaddingBottom);
-  margin-left: var(--pf-v5-c-data-list__item-action--MarginLeft);
+  padding-block-start: var(--pf-v5-c-data-list__item-action--PaddingTop);
+  padding-block-end: var(--pf-v5-c-data-list__item-action--PaddingBottom);
+  margin-inline-start: var(--pf-v5-c-data-list__item-action--MarginLeft);
 }
 .pf-v5-c-data-list__item-action > *:not(:last-child) {
-  margin-right: var(--pf-v5-c-data-list__item-action--not-last-child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-data-list__item-action--not-last-child--MarginRight);
 }
 .pf-v5-c-data-list__item-action .pf-v5-c-data-list__action {
-  margin-top: var(--pf-v5-c-data-list__action--MarginTop);
-  margin-bottom: var(--pf-v5-c-data-list__item-action__action--MarginBottom);
+  margin-block-start: var(--pf-v5-c-data-list__action--MarginTop);
+  margin-block-end: var(--pf-v5-c-data-list__item-action__action--MarginBottom);
 }
 
 .pf-v5-c-data-list__toggle {
-  margin: var(--pf-v5-c-data-list__toggle--MarginTop) 0 var(--pf-v5-c-data-list__toggle--MarginBottom) var(--pf-v5-c-data-list__toggle--MarginLeft);
+  margin-block-start: var(--pf-v5-c-data-list__toggle--MarginTop);
+  margin-block-end: var(--pf-v5-c-data-list__toggle--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-data-list__toggle--MarginLeft);
 }
 
 .pf-v5-c-data-list__toggle-icon {
@@ -805,6 +812,9 @@
   transition: var(--pf-v5-c-data-list__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-data-list__toggle-icon--Rotate));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-data-list__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-data-list__item-content {
   display: grid;
@@ -815,25 +825,25 @@
 .pf-v5-c-data-list__cell {
   flex: 1;
   grid-column: 1/-1;
-  padding-top: var(--pf-v5-c-data-list__cell--PaddingTop);
-  padding-bottom: var(--pf-v5-c-data-list__cell--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-data-list__cell--PaddingTop);
+  padding-block-end: var(--pf-v5-c-data-list__cell--PaddingBottom);
 }
 .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
   flex: 1 0 100%;
   order: 1;
-  padding-top: var(--pf-v5-c-data-list__cell--cell--PaddingTop);
+  padding-block-start: var(--pf-v5-c-data-list__cell--cell--PaddingTop);
 }
 .pf-v5-c-data-list__cell.pf-m-icon {
   flex-grow: 0;
   grid-column: 1/2;
-  margin-right: var(--pf-v5-c-data-list__cell--m-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-data-list__cell--m-icon--MarginRight);
 }
 .pf-v5-c-data-list__cell.pf-m-icon + .pf-v5-c-data-list__cell {
   grid-column: 2/3;
-  padding-top: var(--pf-v5-c-data-list__cell--m-icon--cell--PaddingTop);
+  padding-block-start: var(--pf-v5-c-data-list__cell--m-icon--cell--PaddingTop);
 }
 .pf-v5-c-data-list__cell.pf-m-align-right {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 
 .pf-v5-c-data-list__text {
@@ -855,13 +865,16 @@
   overflow-y: auto;
 }
 .pf-v5-c-data-list__expandable-content .pf-v5-c-data-list__expandable-content-body {
-  padding: var(--pf-v5-c-data-list__expandable-content-body--PaddingTop) var(--pf-v5-c-data-list__expandable-content-body--PaddingRight) var(--pf-v5-c-data-list__expandable-content-body--PaddingBottom) var(--pf-v5-c-data-list__expandable-content-body--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-data-list__expandable-content-body--PaddingTop);
+  padding-block-end: var(--pf-v5-c-data-list__expandable-content-body--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-data-list__expandable-content-body--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-data-list__expandable-content-body--PaddingRight);
 }
 .pf-v5-c-data-list__expandable-content .pf-v5-c-data-list__expandable-content-body > .pf-v5-c-data-list {
-  margin-left: var(--pf-v5-c-data-list--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-data-list--MarginLeft);
 }
 .pf-v5-c-data-list__expandable-content .pf-v5-c-data-list__expandable-content-body .pf-v5-c-data-list__item:last-child {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 .pf-v5-c-data-list__expandable-content .pf-v5-c-data-list__expandable-content-body .pf-v5-c-data-list__item-row {
   --pf-v5-c-data-list__item-row--PaddingLeft: 0;