@patternfly/react-styles 5.0.0 → 5.1.1-prerelease.1

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: "";
@@ -415,19 +415,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 +536,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 +548,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 +561,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 +573,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 +587,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 +599,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 +613,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 +625,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 +639,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 +651,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 +665,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 +677,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 +704,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 +753,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 +792,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 +821,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 +843,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 +882,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 +902,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 +922,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 +942,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 +965,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 +983,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 +1032,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/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 {
@@ -191,26 +197,26 @@
 }
 
 .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);

package/css/components/Panel/panel.css

@@ -39,10 +39,7 @@
 }
 .pf-v5-c-panel::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   pointer-events: none;
   content: "";
   border: var(--pf-v5-c-panel--before--BorderWidth) solid var(--pf-v5-c-panel--before--BorderColor);
@@ -62,7 +59,10 @@
 }
 
 .pf-v5-c-panel__header {
-  padding: var(--pf-v5-c-panel__header--PaddingTop) var(--pf-v5-c-panel__header--PaddingRight) var(--pf-v5-c-panel__header--PaddingBottom) var(--pf-v5-c-panel__header--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-panel__header--PaddingTop);
+  padding-block-end: var(--pf-v5-c-panel__header--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-panel__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-panel__header--PaddingRight);
 }
 
 .pf-v5-c-panel__main {
@@ -71,11 +71,17 @@
 }
 
 .pf-v5-c-panel__main-body {
-  padding: var(--pf-v5-c-panel__main-body--PaddingTop) var(--pf-v5-c-panel__main-body--PaddingRight) var(--pf-v5-c-panel__main-body--PaddingBottom) var(--pf-v5-c-panel__main-body--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-panel__main-body--PaddingTop);
+  padding-block-end: var(--pf-v5-c-panel__main-body--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-panel__main-body--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-panel__main-body--PaddingRight);
 }
 
 .pf-v5-c-panel__footer {
-  padding: var(--pf-v5-c-panel__footer--PaddingTop) var(--pf-v5-c-panel__footer--PaddingRight) var(--pf-v5-c-panel__footer--PaddingBottom) var(--pf-v5-c-panel__footer--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-panel__footer--PaddingTop);
+  padding-block-end: var(--pf-v5-c-panel__footer--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-panel__footer--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-panel__footer--PaddingRight);
   box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
 }