@patternfly/react-styles 5.1.0 → 5.1.1-prerelease.2

package/css/components/Page/page.css

@@ -281,11 +281,11 @@
 
 .pf-v5-c-page__header-brand {
   grid-column: 1/2;
-  padding-left: var(--pf-v5-c-page__header-brand--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-page__header-brand--PaddingLeft);
 }
 @media (min-width: 1200px) {
   .pf-v5-c-page__header-brand {
-    padding-right: var(--pf-v5-c-page__header-brand--xl--PaddingRight);
+    padding-inline-end: var(--pf-v5-c-page__header-brand--xl--PaddingRight);
   }
 }
 
@@ -299,9 +299,12 @@
 }
 
 .pf-v5-c-page__header-brand-toggle .pf-v5-c-button {
-  padding: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop) var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight) var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom) var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft);
-  margin-right: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight);
-  margin-left: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft);
+  padding-block-start: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop);
+  padding-block-end: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight);
+  margin-inline-start: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight);
   font-size: var(--pf-v5-c-page__header-sidebar-toggle__c-button--FontSize);
   line-height: 1;
 }
@@ -311,8 +314,8 @@
   grid-column: 1/-1;
   align-self: stretch;
   min-width: 0;
-  padding-right: var(--pf-v5-c-page__header-nav--PaddingRight);
-  padding-left: var(--pf-v5-c-page__header-nav--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-page__header-nav--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-page__header-nav--PaddingRight);
   background-color: var(--pf-v5-c-page__header-nav--BackgroundColor);
 }
 @media screen and (min-width: 1200px) {
@@ -327,11 +330,11 @@
 
 .pf-v5-c-page__header-tools {
   grid-column: 2/3;
-  margin-right: var(--pf-v5-c-page__header-tools--MarginRight);
-  margin-left: auto;
+  margin-inline-start: auto;
+  margin-inline-end: var(--pf-v5-c-page__header-tools--MarginRight);
 }
 .pf-v5-c-page__header-tools .pf-v5-c-avatar {
-  margin-left: var(--pf-v5-c-page__header-tools--c-avatar--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-page__header-tools--c-avatar--MarginLeft);
 }
 @media screen and (min-width: 992px) {
   .pf-v5-c-page__header-tools {
@@ -344,7 +347,7 @@
   align-items: center;
 }
 .pf-v5-c-page__header-tools-group + .pf-v5-c-page__header-tools-group {
-  margin-left: var(--pf-v5-c-page__header-tools-group--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-page__header-tools-group--MarginLeft);
 }
 
 .pf-v5-c-page__header-tools-item {
@@ -359,10 +362,7 @@
 }
 .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   width: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--Width);
   height: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--Height);
   content: "";
@@ -399,6 +399,10 @@
   transition: var(--pf-v5-c-page__sidebar--Transition);
   transform: translateX(var(--pf-v5-c-page__sidebar--TranslateX)) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-page__sidebar {
+  transform: translateX(calc(var(--pf-v5-c-page__sidebar--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
+}
+
 .pf-v5-c-page__sidebar.pf-m-expanded {
   --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--m-expanded--TranslateX);
   box-shadow: var(--pf-v5-c-page__sidebar--BoxShadow);
@@ -415,19 +419,19 @@
 .pf-v5-c-page__sidebar.pf-m-light {
   color: var(--pf-v5-global--Color--100);
   --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-c-page__sidebar--m-light--BackgroundColor);
-  border-right: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
+  border-inline-end: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
 }
 
 .pf-v5-c-page__sidebar-body {
-  padding-right: var(--pf-v5-c-page__sidebar-body--PaddingRight);
-  padding-left: var(--pf-v5-c-page__sidebar-body--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-page__sidebar-body--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-page__sidebar-body--PaddingRight);
 }
 .pf-v5-c-page__sidebar-body:last-child {
   flex-grow: 1;
 }
 .pf-v5-c-page__sidebar-body.pf-m-menu {
   background-color: var(--pf-v5-global--palette--black-900);
-  border-top: var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopColor);
+  border-block-start: var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopColor);
 }
 .pf-v5-c-page__sidebar-body.pf-m-menu + .pf-v5-c-page__sidebar-body.pf-m-menu {
   --pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
@@ -536,7 +540,7 @@
 .pf-v5-c-page__main-group.pf-m-sticky-top,
 .pf-v5-c-page__main-subnav.pf-m-sticky-top {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
   box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
 }
@@ -548,7 +552,7 @@
 .pf-v5-c-page__main-group.pf-m-sticky-bottom,
 .pf-v5-c-page__main-subnav.pf-m-sticky-bottom {
   position: sticky;
-  bottom: 0;
+  inset-block-end: 0;
   z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
   box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
 }
@@ -561,7 +565,7 @@
   .pf-v5-c-page__main-group.pf-m-sticky-top-on-sm-height,
   .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
     position: sticky;
-    top: 0;
+    inset-block-start: 0;
     z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
   }
@@ -573,7 +577,7 @@
   .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
   .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
     position: sticky;
-    bottom: 0;
+    inset-block-end: 0;
     z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
     box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
   }
@@ -587,7 +591,7 @@
   .pf-v5-c-page__main-group.pf-m-sticky-top-on-md-height,
   .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-md-height {
     position: sticky;
-    top: 0;
+    inset-block-start: 0;
     z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
   }
@@ -599,7 +603,7 @@
   .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-md-height,
   .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
     position: sticky;
-    bottom: 0;
+    inset-block-end: 0;
     z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
     box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
   }
@@ -613,7 +617,7 @@
   .pf-v5-c-page__main-group.pf-m-sticky-top-on-lg-height,
   .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
     position: sticky;
-    top: 0;
+    inset-block-start: 0;
     z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
   }
@@ -625,7 +629,7 @@
   .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
   .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
     position: sticky;
-    bottom: 0;
+    inset-block-end: 0;
     z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
     box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
   }
@@ -639,7 +643,7 @@
   .pf-v5-c-page__main-group.pf-m-sticky-top-on-xl-height,
   .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
     position: sticky;
-    top: 0;
+    inset-block-start: 0;
     z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
   }
@@ -651,7 +655,7 @@
   .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
   .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
     position: sticky;
-    bottom: 0;
+    inset-block-end: 0;
     z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
     box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
   }
@@ -665,7 +669,7 @@
   .pf-v5-c-page__main-group.pf-m-sticky-top-on-2xl-height,
   .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
     position: sticky;
-    top: 0;
+    inset-block-start: 0;
     z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
   }
@@ -677,7 +681,7 @@
   .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
   .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
     position: sticky;
-    bottom: 0;
+    inset-block-end: 0;
     z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
     box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
   }
@@ -704,44 +708,44 @@
 }
 
 .pf-v5-c-page__main-nav {
-  padding-top: var(--pf-v5-c-page__main-nav--PaddingTop);
-  padding-right: var(--pf-v5-c-page__main-nav--PaddingRight);
-  padding-left: var(--pf-v5-c-page__main-nav--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-page__main-nav--PaddingTop);
+  padding-inline-start: var(--pf-v5-c-page__main-nav--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-page__main-nav--PaddingRight);
   background-color: var(--pf-v5-c-page__main-nav--BackgroundColor);
 }
 .pf-v5-c-page__main-nav.pf-m-sticky-top, .pf-v5-c-page__main-group.pf-m-sticky-top .pf-v5-c-page__main-nav:last-child {
-  padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
+  padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
 }
 @media (min-height: 0) {
   .pf-v5-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-v5-c-page__main-nav:last-child {
-    padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
   }
 }
 @media (min-height: 40rem) {
   .pf-v5-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-md-height .pf-v5-c-page__main-nav:last-child {
-    padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
   }
 }
 @media (min-height: 48rem) {
   .pf-v5-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-v5-c-page__main-nav:last-child {
-    padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
   }
 }
 @media (min-height: 60rem) {
   .pf-v5-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-v5-c-page__main-nav:last-child {
-    padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
   }
 }
 @media (min-height: 80rem) {
   .pf-v5-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-v5-c-page__main-nav:last-child {
-    padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
   }
 }
 
 .pf-v5-c-page__main-subnav {
   background-color: var(--pf-v5-c-page__main-subnav--BackgroundColor);
-  border-top: var(--pf-v5-c-page__main-subnav--BorderTopWidth) solid var(--pf-v5-c-page__main-subnav--BorderTopColor);
-  border-left: var(--pf-v5-c-page__main-subnav--BorderLeftWidth) solid var(--pf-v5-c-page__main-subnav--BorderLeftColor);
+  border-block-start: var(--pf-v5-c-page__main-subnav--BorderTopWidth) solid var(--pf-v5-c-page__main-subnav--BorderTopColor);
+  border-inline-start: var(--pf-v5-c-page__main-subnav--BorderLeftWidth) solid var(--pf-v5-c-page__main-subnav--BorderLeftColor);
 }
 @media screen and (min-width: 1200px) {
   .pf-v5-c-page__sidebar ~ .pf-v5-c-page__main {
@@ -753,7 +757,10 @@
 }
 
 .pf-v5-c-page__main-breadcrumb {
-  padding: var(--pf-v5-c-page__main-breadcrumb--PaddingTop) var(--pf-v5-c-page__main-breadcrumb--PaddingRight) var(--pf-v5-c-page__main-breadcrumb--PaddingBottom) var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-page__main-breadcrumb--PaddingTop);
+  padding-block-end: var(--pf-v5-c-page__main-breadcrumb--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-page__main-breadcrumb--PaddingRight);
   background-color: var(--pf-v5-c-page__main-breadcrumb--BackgroundColor);
 }
 .pf-v5-c-page__main-breadcrumb + .pf-v5-c-page__main-section {
@@ -789,7 +796,10 @@
 }
 
 .pf-v5-c-page__main-tabs {
-  padding: var(--pf-v5-c-page__main-tabs--PaddingTop) var(--pf-v5-c-page__main-tabs--PaddingRight) var(--pf-v5-c-page__main-tabs--PaddingBottom) var(--pf-v5-c-page__main-tabs--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-page__main-tabs--PaddingTop);
+  padding-block-end: var(--pf-v5-c-page__main-tabs--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-page__main-tabs--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-page__main-tabs--PaddingRight);
   background-color: var(--pf-v5-c-page__main-tabs--BackgroundColor);
 }
 .pf-v5-c-page__main-nav + .pf-v5-c-page__main-tabs {
@@ -815,7 +825,10 @@
 }
 
 .pf-v5-c-page__main-section {
-  padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
+  padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
   background-color: var(--pf-v5-c-page__main-section--BackgroundColor);
 }
 .pf-v5-c-page__main-section.pf-m-light {
@@ -834,26 +847,38 @@
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-dark-200--BackgroundColor);
 }
 .pf-v5-c-page__main-section.pf-m-padding {
-  padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
+  padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
 }
 .pf-v5-c-page__main-section.pf-m-padding.pf-m-limit-width {
   padding: 0;
 }
 .pf-v5-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-v5-c-page__main-body {
-  padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
+  padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
 }
 .pf-v5-c-page__main-section.pf-m-no-padding, .pf-v5-c-page__main-section.pf-m-no-padding.pf-m-limit-width .pf-v5-c-page__main-body {
   padding: 0;
 }
 @media (min-width: 576px) {
   .pf-v5-c-page__main-section.pf-m-padding-on-sm {
-    padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
+    padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
+    padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
   }
   .pf-v5-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
     padding: 0;
   }
   .pf-v5-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-v5-c-page__main-body {
-    padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
+    padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
+    padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
   }
   .pf-v5-c-page__main-section.pf-m-no-padding-on-sm, .pf-v5-c-page__main-section.pf-m-no-padding-on-sm.pf-m-limit-width .pf-v5-c-page__main-body {
     padding: 0;
@@ -861,13 +886,19 @@
 }
 @media (min-width: 768px) {
   .pf-v5-c-page__main-section.pf-m-padding-on-md {
-    padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
+    padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
+    padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
   }
   .pf-v5-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
     padding: 0;
   }
   .pf-v5-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-v5-c-page__main-body {
-    padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
+    padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
+    padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
   }
   .pf-v5-c-page__main-section.pf-m-no-padding-on-md, .pf-v5-c-page__main-section.pf-m-no-padding-on-md.pf-m-limit-width .pf-v5-c-page__main-body {
     padding: 0;
@@ -875,13 +906,19 @@
 }
 @media (min-width: 992px) {
   .pf-v5-c-page__main-section.pf-m-padding-on-lg {
-    padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
+    padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
+    padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
   }
   .pf-v5-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
     padding: 0;
   }
   .pf-v5-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-v5-c-page__main-body {
-    padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
+    padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
+    padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
   }
   .pf-v5-c-page__main-section.pf-m-no-padding-on-lg, .pf-v5-c-page__main-section.pf-m-no-padding-on-lg.pf-m-limit-width .pf-v5-c-page__main-body {
     padding: 0;
@@ -889,13 +926,19 @@
 }
 @media (min-width: 1200px) {
   .pf-v5-c-page__main-section.pf-m-padding-on-xl {
-    padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
+    padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
+    padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
   }
   .pf-v5-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
     padding: 0;
   }
   .pf-v5-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-v5-c-page__main-body {
-    padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
+    padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
+    padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
   }
   .pf-v5-c-page__main-section.pf-m-no-padding-on-xl, .pf-v5-c-page__main-section.pf-m-no-padding-on-xl.pf-m-limit-width .pf-v5-c-page__main-body {
     padding: 0;
@@ -903,13 +946,19 @@
 }
 @media (min-width: 1450px) {
   .pf-v5-c-page__main-section.pf-m-padding-on-2xl {
-    padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
+    padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
+    padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
   }
   .pf-v5-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
     padding: 0;
   }
   .pf-v5-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-v5-c-page__main-body {
-    padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
+    padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
+    padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
+    padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
   }
   .pf-v5-c-page__main-section.pf-m-no-padding-on-2xl, .pf-v5-c-page__main-section.pf-m-no-padding-on-2xl.pf-m-limit-width .pf-v5-c-page__main-body {
     padding: 0;
@@ -920,7 +969,7 @@
   flex: 1 1;
   min-height: 0;
   background-color: var(--pf-v5-c-page__main-wizard--BackgroundColor);
-  border-top: var(--pf-v5-c-page__main-wizard--BorderTopWidth) solid var(--pf-v5-c-page__main-wizard--BorderTopColor);
+  border-block-start: var(--pf-v5-c-page__main-wizard--BorderTopWidth) solid var(--pf-v5-c-page__main-wizard--BorderTopColor);
 }
 .pf-v5-c-page__main-wizard:first-child {
   --pf-v5-c-page__main-wizard--BorderTopWidth: 0;
@@ -938,18 +987,27 @@
 }
 
 .pf-v5-c-page__main-nav .pf-v5-c-page__main-body {
-  padding-top: var(--pf-v5-c-page__main-nav--PaddingTop);
-  padding-right: var(--pf-v5-c-page__main-nav--PaddingRight);
-  padding-left: var(--pf-v5-c-page__main-nav--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-page__main-nav--PaddingTop);
+  padding-inline-start: var(--pf-v5-c-page__main-nav--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-page__main-nav--PaddingRight);
 }
 .pf-v5-c-page__main-breadcrumb .pf-v5-c-page__main-body {
-  padding: var(--pf-v5-c-page__main-breadcrumb--PaddingTop) var(--pf-v5-c-page__main-breadcrumb--PaddingRight) var(--pf-v5-c-page__main-breadcrumb--PaddingBottom) var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-page__main-breadcrumb--PaddingTop);
+  padding-block-end: var(--pf-v5-c-page__main-breadcrumb--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-page__main-breadcrumb--PaddingRight);
 }
 .pf-v5-c-page__main-section .pf-v5-c-page__main-body {
-  padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
+  padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
 }
 .pf-v5-c-page__main-tabs .pf-v5-c-page__main-body {
-  padding: var(--pf-v5-c-page__main-tabs--PaddingTop) var(--pf-v5-c-page__main-tabs--PaddingRight) var(--pf-v5-c-page__main-tabs--PaddingBottom) var(--pf-v5-c-page__main-tabs--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-page__main-tabs--PaddingTop);
+  padding-block-end: var(--pf-v5-c-page__main-tabs--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-page__main-tabs--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-page__main-tabs--PaddingRight);
 }
 
 .pf-v5-c-page__drawer {
@@ -978,7 +1036,7 @@
   background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar {
-  border-right: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+  border-inline-end: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-bottom {
   --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);

package/css/components/Page/page.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
   "brand": "pf-v5-c-brand",
   "button": "pf-v5-c-button",
   "contextSelector": "pf-v5-c-context-selector",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "drawer": "pf-v5-c-drawer",
   "masthead": "pf-v5-c-masthead",
   "modifiers": {
@@ -88,6 +89,7 @@ declare const _default: {
   "pageMainWizard": "pf-v5-c-page__main-wizard",
   "pageSidebar": "pf-v5-c-page__sidebar",
   "pageSidebarBody": "pf-v5-c-page__sidebar-body",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Page/page.js

@@ -6,6 +6,7 @@ exports.default = {
   "brand": "pf-v5-c-brand",
   "button": "pf-v5-c-button",
   "contextSelector": "pf-v5-c-context-selector",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "drawer": "pf-v5-c-drawer",
   "masthead": "pf-v5-c-masthead",
   "modifiers": {
@@ -90,5 +91,6 @@ exports.default = {
   "pageMainWizard": "pf-v5-c-page__main-wizard",
   "pageSidebar": "pf-v5-c-page__sidebar",
   "pageSidebarBody": "pf-v5-c-page__sidebar-body",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Page/page.mjs

@@ -4,6 +4,7 @@ export default {
   "brand": "pf-v5-c-brand",
   "button": "pf-v5-c-button",
   "contextSelector": "pf-v5-c-context-selector",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "drawer": "pf-v5-c-drawer",
   "masthead": "pf-v5-c-masthead",
   "modifiers": {
@@ -88,5 +89,6 @@ export default {
   "pageMainWizard": "pf-v5-c-page__main-wizard",
   "pageSidebar": "pf-v5-c-page__sidebar",
   "pageSidebarBody": "pf-v5-c-page__sidebar-body",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Pagination/pagination.css

@@ -2,8 +2,8 @@
   appearance: textfield;
 }
 .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button {
-  appearance: none;
   margin: 0;
+  appearance: none;
 }
 
 .pf-v5-c-pagination {
@@ -67,8 +67,8 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
-  padding-right: var(--pf-v5-c-pagination--PaddingRight);
-  padding-left: var(--pf-v5-c-pagination--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-pagination--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-pagination--PaddingRight);
 }
 @media screen and (min-width: 768px) {
   .pf-v5-c-pagination {
@@ -93,7 +93,7 @@
   }
 }
 .pf-v5-c-pagination > *:not(:last-child):not(.pf-v5-c-pagination__total-items) {
-  margin-right: var(--pf-v5-c-pagination--child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-pagination--child--MarginRight);
 }
 .pf-v5-c-pagination .pf-v5-c-menu-toggle {
   display: var(--pf-v5-c-pagination--c-menu-toggle--Display);
@@ -106,7 +106,7 @@
   --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow);
   --pf-v5-c-pagination--m-sticky--Top: auto;
   position: sticky;
-  bottom: var(--pf-v5-c-pagination--m-bottom--Bottom);
+  inset-block-end: var(--pf-v5-c-pagination--m-bottom--Bottom);
   justify-content: center;
   background-color: var(--pf-v5-c-pagination--m-bottom--BackgroundColor);
   box-shadow: var(--pf-v5-c-pagination--m-bottom--BoxShadow);
@@ -143,7 +143,10 @@
     --pf-v5-c-pagination--m-bottom--Bottom: auto;
     position: relative;
     justify-content: flex-end;
-    padding: var(--pf-v5-c-pagination--m-bottom--md--PaddingTop) var(--pf-v5-c-pagination--m-bottom--md--PaddingRight) var(--pf-v5-c-pagination--m-bottom--md--PaddingBottom) var(--pf-v5-c-pagination--m-bottom--md--PaddingLeft);
+    padding-block-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingTop);
+    padding-block-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingBottom);
+    padding-inline-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingLeft);
+    padding-inline-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingRight);
   }
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-first,
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-last,
@@ -164,18 +167,21 @@
 .pf-v5-c-pagination.pf-m-sticky {
   --pf-v5-c-pagination--m-bottom--Bottom: 0;
   position: sticky;
-  top: var(--pf-v5-c-pagination--m-sticky--Top);
+  inset-block-start: var(--pf-v5-c-pagination--m-sticky--Top);
   z-index: var(--pf-v5-c-pagination--m-sticky--ZIndex);
-  padding-top: var(--pf-v5-c-pagination--m-sticky--PaddingTop);
-  padding-right: var(--pf-v5-c-pagination--m-sticky--PaddingRight);
-  padding-bottom: var(--pf-v5-c-pagination--m-sticky--PaddingBottom);
-  padding-left: var(--pf-v5-c-pagination--m-sticky--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-pagination--m-sticky--PaddingTop);
+  padding-block-end: var(--pf-v5-c-pagination--m-sticky--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-pagination--m-sticky--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-pagination--m-sticky--PaddingRight);
   background-color: var(--pf-v5-c-pagination--m-sticky--BackgroundColor);
   box-shadow: var(--pf-v5-c-pagination--m-sticky--BoxShadow);
 }
 @media screen and (min-width: 768px) {
   .pf-v5-c-pagination.pf-m-sticky {
-    padding: var(--pf-v5-c-pagination--m-sticky--md--PaddingTop) var(--pf-v5-c-pagination--m-sticky--md--PaddingRight) var(--pf-v5-c-pagination--m-sticky--md--PaddingBottom) var(--pf-v5-c-pagination--m-sticky--md--PaddingLeft);
+    padding-block-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingTop);
+    padding-block-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingBottom);
+    padding-inline-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingLeft);
+    padding-inline-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingRight);
   }
 }
 .pf-v5-c-pagination.pf-m-compact {
@@ -190,27 +196,31 @@
   justify-content: flex-end;
 }
 
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-pagination__nav-control {
+  scale: -1 1;
+}
+
 .pf-v5-c-pagination__nav-control .pf-v5-c-button {
-  padding-right: var(--pf-v5-c-pagination__nav-control--c-button--PaddingRight);
-  padding-left: var(--pf-v5-c-pagination__nav-control--c-button--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-pagination__nav-control--c-button--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-pagination__nav-control--c-button--PaddingRight);
   font-size: var(--pf-v5-c-pagination__nav-control--c-button--FontSize);
 }
 .pf-v5-c-pagination.pf-m-compact .pf-v5-c-pagination__nav-control + .pf-v5-c-pagination__nav-control {
-  margin-left: var(--pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
 }
 
 .pf-v5-c-pagination__nav-page-select {
   display: flex;
   align-items: center;
-  padding-right: var(--pf-v5-c-pagination__nav-page-select--PaddingRight);
-  padding-left: var(--pf-v5-c-pagination__nav-page-select--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-pagination__nav-page-select--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-pagination__nav-page-select--PaddingRight);
 }
 .pf-v5-c-pagination__nav-page-select > * {
   font-size: var(--pf-v5-c-pagination__nav-page-select--FontSize);
   white-space: nowrap;
 }
 .pf-v5-c-pagination__nav-page-select > *:not(:last-child) {
-  margin-right: var(--pf-v5-c-pagination__nav-page-select--child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-pagination__nav-page-select--child--MarginRight);
 }
 .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
   width: var(--pf-v5-c-pagination__nav-page-select--c-form-control--Width);