@patternfly/patternfly 5.1.0-prerelease.3 → 5.1.0-prerelease.31

package/components/Page/page.scss

@@ -255,10 +255,10 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 // Brand
 .#{$page}__header-brand {
   grid-column: 1 / 2;
-  padding-left: var(--#{$page}__header-brand--PaddingLeft);
+  padding-inline-start: var(--#{$page}__header-brand--PaddingLeft);
 
   @media (min-width: $pf-v5-global--breakpoint--xl) {
-    padding-right: var(--#{$page}__header-brand--xl--PaddingRight); // set padding right here to allow mobile view to accomodate tools
+    padding-inline-end: var(--#{$page}__header-brand--xl--PaddingRight); // set padding right here to allow mobile view to accomodate tools
   }
 }
 
@@ -276,9 +276,12 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 // Sidebar toggle
 .#{$page}__header-brand-toggle {
   .#{$button} {
-    padding: var(--#{$page}__header-sidebar-toggle__c-button--PaddingTop) var(--#{$page}__header-sidebar-toggle__c-button--PaddingRight) var(--#{$page}__header-sidebar-toggle__c-button--PaddingBottom) var(--#{$page}__header-sidebar-toggle__c-button--PaddingLeft);
-    margin-right: var(--#{$page}__header-sidebar-toggle__c-button--MarginRight);
-    margin-left: var(--#{$page}__header-sidebar-toggle__c-button--MarginLeft);
+    padding-block-start: var(--#{$page}__header-sidebar-toggle__c-button--PaddingTop);
+    padding-block-end: var(--#{$page}__header-sidebar-toggle__c-button--PaddingBottom);
+    padding-inline-start: var(--#{$page}__header-sidebar-toggle__c-button--PaddingLeft);
+    padding-inline-end: var(--#{$page}__header-sidebar-toggle__c-button--PaddingRight);
+    margin-inline-start: var(--#{$page}__header-sidebar-toggle__c-button--MarginLeft);
+    margin-inline-end: var(--#{$page}__header-sidebar-toggle__c-button--MarginRight);
     font-size: var(--#{$page}__header-sidebar-toggle__c-button--FontSize);
     line-height: 1;
   }
@@ -290,8 +293,8 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   grid-column: 1 / -1;
   align-self: stretch;
   min-width: 0;
-  padding-right: var(--#{$page}__header-nav--PaddingRight);
-  padding-left: var(--#{$page}__header-nav--PaddingLeft);
+  padding-inline-start: var(--#{$page}__header-nav--PaddingLeft);
+  padding-inline-end: var(--#{$page}__header-nav--PaddingRight);
   background-color: var(--#{$page}__header-nav--BackgroundColor);
 
   @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
@@ -307,11 +310,11 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 // Header tools
 .#{$page}__header-tools {
   grid-column: 2 / 3;
-  margin-right: var(--#{$page}__header-tools--MarginRight);
-  margin-left: auto; // to push it to the right
+  margin-inline-start: auto; // to push it to the right
+  margin-inline-end: var(--#{$page}__header-tools--MarginRight);
 
   .#{$avatar} {
-    margin-left: var(--#{$page}__header-tools--c-avatar--MarginLeft);
+    margin-inline-start: var(--#{$page}__header-tools--c-avatar--MarginLeft);
   }
 
   @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
@@ -325,7 +328,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   align-items: center;
 
   & + & {
-    margin-left: var(--#{$page}__header-tools-group--MarginLeft);
+    margin-inline-start: var(--#{$page}__header-tools-group--MarginLeft);
   }
 }
 
@@ -348,10 +351,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
       // remove at breaking change
       &::before {
         position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
+        inset: 0;
         width: var(--#{$page}__header-tools--c-button--m-selected--before--Width); // remove at breaking change
         height: var(--#{$page}__header-tools--c-button--m-selected--before--Height); // remove at breaking change
         content: "";
@@ -404,7 +404,12 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   -webkit-overflow-scrolling: touch;
   background-color: var(--#{$page}__sidebar--BackgroundColor);
   transition: var(--#{$page}__sidebar--Transition);
-  transform: translateX(var(--#{$page}__sidebar--TranslateX)) translateZ(var(--#{$page}__sidebar--TranslateZ));
+
+  @include pf-v5-bidirectional-style(
+    $prop: transform,
+    $ltr-val: translateX(var(--#{$page}__sidebar--TranslateX)) translateZ(var(--#{$page}__sidebar--TranslateZ)),
+    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$page}__sidebar--TranslateX))}) translateZ(var(--#{$page}__sidebar--TranslateZ))
+  );
 
   // Mobile
   // Expanded nav
@@ -430,13 +435,13 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
     --#{$page}__sidebar--BackgroundColor: var(--#{$page}__sidebar--m-light--BackgroundColor);
 
-    border-right: var(--#{$page}__sidebar--m-light--BorderRightWidth) solid var(--#{$page}__sidebar--m-light--BorderRightColor);
+    border-inline-end: var(--#{$page}__sidebar--m-light--BorderRightWidth) solid var(--#{$page}__sidebar--m-light--BorderRightColor);
   }
 }
 
 .#{$page}__sidebar-body {
-  padding-right: var(--#{$page}__sidebar-body--PaddingRight);
-  padding-left: var(--#{$page}__sidebar-body--PaddingLeft);
+  padding-inline-start: var(--#{$page}__sidebar-body--PaddingLeft);
+  padding-inline-end: var(--#{$page}__sidebar-body--PaddingRight);
 
   &:last-child {
     flex-grow: 1;
@@ -444,7 +449,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   &.pf-m-menu {
     background-color: var(--#{$pf-global}--palette--black-900);
-    border-top: var(--#{$page}__sidebar-body--m-menu--BorderTopWidth) solid var(--#{$page}__sidebar-body--m-menu--BorderTopColor);
+    border-block-start: var(--#{$page}__sidebar-body--m-menu--BorderTopWidth) solid var(--#{$page}__sidebar-body--m-menu--BorderTopColor);
 
     & + & {
       --#{$page}__sidebar-body--m-menu--BorderTopWidth: 0;
@@ -540,14 +545,14 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
       &.pf-m-sticky-top#{$breakpoint-name} {
         position: sticky;
-        top: 0;
+       inset-block-start: 0;
         z-index: var(--#{$page}--section--m-sticky-top--ZIndex);
         box-shadow: var(--#{$page}--section--m-sticky-top--BoxShadow);
       }
 
       &.pf-m-sticky-bottom#{$breakpoint-name} {
         position: sticky;
-        bottom: 0;
+       inset-block-end: 0;
         z-index: var(--#{$page}--section--m-sticky-bottom--ZIndex);
         box-shadow: var(--#{$page}--section--m-sticky-bottom--BoxShadow);
       }
@@ -577,9 +582,9 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 .#{$page}__main-nav {
-  padding-top: var(--#{$page}__main-nav--PaddingTop);
-  padding-right: var(--#{$page}__main-nav--PaddingRight);
-  padding-left: var(--#{$page}__main-nav--PaddingLeft);
+  padding-block-start: var(--#{$page}__main-nav--PaddingTop);
+  padding-inline-start: var(--#{$page}__main-nav--PaddingLeft);
+  padding-inline-end: var(--#{$page}__main-nav--PaddingRight);
   background-color: var(--#{$page}__main-nav--BackgroundColor);
 
   // Responsive height modifiers for sticky top/bottom
@@ -589,7 +594,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     @include pf-v5-apply-height-breakpoint($breakpoint) {
       &.pf-m-sticky-top#{$breakpoint-name},
       .#{$page}__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
-        padding-bottom: var(--#{$page}__main-nav--m-sticky-top--PaddingBottom);
+        padding-block-end: var(--#{$page}__main-nav--m-sticky-top--PaddingBottom);
       }
     }
   }
@@ -597,8 +602,8 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
 .#{$page}__main-subnav {
   background-color: var(--#{$page}__main-subnav--BackgroundColor);
-  border-top: var(--#{$page}__main-subnav--BorderTopWidth) solid var(--#{$page}__main-subnav--BorderTopColor);
-  border-left: var(--#{$page}__main-subnav--BorderLeftWidth) solid var(--#{$page}__main-subnav--BorderLeftColor);
+  border-block-start: var(--#{$page}__main-subnav--BorderTopWidth) solid var(--#{$page}__main-subnav--BorderTopColor);
+  border-inline-start: var(--#{$page}__main-subnav--BorderLeftWidth) solid var(--#{$page}__main-subnav--BorderLeftColor);
 
   @at-root .#{$page}__sidebar {
     ~ .#{$page}__main {
@@ -614,7 +619,10 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 .#{$page}__main-breadcrumb {
-  padding: var(--#{$page}__main-breadcrumb--PaddingTop) var(--#{$page}__main-breadcrumb--PaddingRight) var(--#{$page}__main-breadcrumb--PaddingBottom) var(--#{$page}__main-breadcrumb--PaddingLeft);
+  padding-block-start: var(--#{$page}__main-breadcrumb--PaddingTop);
+  padding-block-end: var(--#{$page}__main-breadcrumb--PaddingBottom);
+  padding-inline-start: var(--#{$page}__main-breadcrumb--PaddingLeft);
+  padding-inline-end: var(--#{$page}__main-breadcrumb--PaddingRight);
   background-color: var(--#{$page}__main-breadcrumb--BackgroundColor);
 
   + .#{$page}__main-section {
@@ -635,7 +643,10 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 .#{$page}__main-tabs {
-  padding: var(--#{$page}__main-tabs--PaddingTop) var(--#{$page}__main-tabs--PaddingRight) var(--#{$page}__main-tabs--PaddingBottom) var(--#{$page}__main-tabs--PaddingLeft);
+  padding-block-start: var(--#{$page}__main-tabs--PaddingTop);
+  padding-block-end: var(--#{$page}__main-tabs--PaddingBottom);
+  padding-inline-start: var(--#{$page}__main-tabs--PaddingLeft);
+  padding-inline-end: var(--#{$page}__main-tabs--PaddingRight);
   background-color: var(--#{$page}__main-tabs--BackgroundColor);
 
   .#{$page}__main-nav + & {
@@ -662,7 +673,10 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 .#{$page}__main-section {
-  padding: var(--#{$page}__main-section--PaddingTop) var(--#{$page}__main-section--PaddingRight) var(--#{$page}__main-section--PaddingBottom) var(--#{$page}__main-section--PaddingLeft);
+  padding-block-start: var(--#{$page}__main-section--PaddingTop);
+  padding-block-end: var(--#{$page}__main-section--PaddingBottom);
+  padding-inline-start: var(--#{$page}__main-section--PaddingLeft);
+  padding-inline-end: var(--#{$page}__main-section--PaddingRight);
   background-color: var(--#{$page}__main-section--BackgroundColor);
 
   &.pf-m-light {
@@ -691,13 +705,19 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     @include pf-v5-apply-breakpoint($breakpoint) {
       // stylelint-disable max-nesting-depth
       &.pf-m-padding#{$breakpoint-name} {
-        padding: var(--#{$page}__main-section--PaddingTop) var(--#{$page}__main-section--PaddingRight) var(--#{$page}__main-section--PaddingBottom) var(--#{$page}__main-section--PaddingLeft);
+        padding-block-start: var(--#{$page}__main-section--PaddingTop);
+        padding-block-end: var(--#{$page}__main-section--PaddingBottom);
+        padding-inline-start: var(--#{$page}__main-section--PaddingLeft);
+        padding-inline-end: var(--#{$page}__main-section--PaddingRight);
 
         &.pf-m-limit-width {
           padding: 0;
 
           .#{$page}__main-body {
-            padding: var(--#{$page}__main-section--PaddingTop) var(--#{$page}__main-section--PaddingRight) var(--#{$page}__main-section--PaddingBottom) var(--#{$page}__main-section--PaddingLeft);
+            padding-block-start: var(--#{$page}__main-section--PaddingTop);
+            padding-block-end: var(--#{$page}__main-section--PaddingBottom);
+            padding-inline-start: var(--#{$page}__main-section--PaddingLeft);
+            padding-inline-end: var(--#{$page}__main-section--PaddingRight);
           }
         }
       }
@@ -717,7 +737,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   flex: 1 1;
   min-height: 0;
   background-color: var(--#{$page}__main-wizard--BackgroundColor);
-  border-top: var(--#{$page}__main-wizard--BorderTopWidth) solid var(--#{$page}__main-wizard--BorderTopColor);
+  border-block-start: var(--#{$page}__main-wizard--BorderTopWidth) solid var(--#{$page}__main-wizard--BorderTopColor);
 
   &:first-child {
     --#{$page}__main-wizard--BorderTopWidth: 0;
@@ -738,21 +758,30 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
 .#{$page}__main-body {
   .#{$page}__main-nav & {
-    padding-top: var(--#{$page}__main-nav--PaddingTop);
-    padding-right: var(--#{$page}__main-nav--PaddingRight);
-    padding-left: var(--#{$page}__main-nav--PaddingLeft);
+    padding-block-start: var(--#{$page}__main-nav--PaddingTop);
+    padding-inline-start: var(--#{$page}__main-nav--PaddingLeft);
+    padding-inline-end: var(--#{$page}__main-nav--PaddingRight);
   }
 
   .#{$page}__main-breadcrumb & {
-    padding: var(--#{$page}__main-breadcrumb--PaddingTop) var(--#{$page}__main-breadcrumb--PaddingRight) var(--#{$page}__main-breadcrumb--PaddingBottom) var(--#{$page}__main-breadcrumb--PaddingLeft);
+    padding-block-start: var(--#{$page}__main-breadcrumb--PaddingTop);
+    padding-block-end: var(--#{$page}__main-breadcrumb--PaddingBottom);
+    padding-inline-start: var(--#{$page}__main-breadcrumb--PaddingLeft);
+    padding-inline-end: var(--#{$page}__main-breadcrumb--PaddingRight);
   }
 
   .#{$page}__main-section & {
-    padding: var(--#{$page}__main-section--PaddingTop) var(--#{$page}__main-section--PaddingRight) var(--#{$page}__main-section--PaddingBottom) var(--#{$page}__main-section--PaddingLeft);
+    padding-block-start: var(--#{$page}__main-section--PaddingTop);
+    padding-block-end: var(--#{$page}__main-section--PaddingBottom);
+    padding-inline-start: var(--#{$page}__main-section--PaddingLeft);
+    padding-inline-end: var(--#{$page}__main-section--PaddingRight);
   }
 
   .#{$page}__main-tabs & {
-    padding: var(--#{$page}__main-tabs--PaddingTop) var(--#{$page}__main-tabs--PaddingRight) var(--#{$page}__main-tabs--PaddingBottom) var(--#{$page}__main-tabs--PaddingLeft);
+    padding-block-start: var(--#{$page}__main-tabs--PaddingTop);
+    padding-block-end: var(--#{$page}__main-tabs--PaddingBottom);
+    padding-inline-start: var(--#{$page}__main-tabs--PaddingLeft);
+    padding-inline-end: var(--#{$page}__main-tabs--PaddingRight);
   }
 }
 

package/components/Page/themes/dark/page.scss

@@ -27,7 +27,7 @@
   }
 
   .#{$page}__sidebar {
-    border-right: var(--#{$pf-global}--BorderWidth--sm) solid var(--#{$pf-global}--BorderColor--100);
+    border-inline-end: var(--#{$pf-global}--BorderWidth--sm) solid var(--#{$pf-global}--BorderColor--100);
   }
 
   .#{$page}__main-nav {

package/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(.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);

package/components/Pagination/pagination.scss

@@ -104,13 +104,13 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
-  padding-right: var(--#{$pagination}--PaddingRight);
-  padding-left: var(--#{$pagination}--PaddingLeft);
+  padding-inline-start: var(--#{$pagination}--PaddingLeft);
+  padding-inline-end: var(--#{$pagination}--PaddingRight);
 
   // stylelint-disable selector-not-notation
   // update to single :not() in breaking change
   > *:not(:last-child):not(.#{$pagination}__total-items) {
-    margin-right: var(--#{$pagination}--child--MarginRight);
+    margin-inline-end: var(--#{$pagination}--child--MarginRight);
   }
 
   .#{$menu-toggle} {
@@ -135,7 +135,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     }
 
     position: sticky;
-    bottom: var(--#{$pagination}--m-bottom--Bottom);
+   inset-block-end: var(--#{$pagination}--m-bottom--Bottom);
     justify-content: center;
     background-color: var(--#{$pagination}--m-bottom--BackgroundColor);
     box-shadow: var(--#{$pagination}--m-bottom--BoxShadow);
@@ -172,7 +172,10 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 
       position: relative;
       justify-content: flex-end;
-      padding: var(--#{$pagination}--m-bottom--md--PaddingTop) var(--#{$pagination}--m-bottom--md--PaddingRight) var(--#{$pagination}--m-bottom--md--PaddingBottom) var(--#{$pagination}--m-bottom--md--PaddingLeft);
+      padding-block-start: var(--#{$pagination}--m-bottom--md--PaddingTop);
+      padding-block-end: var(--#{$pagination}--m-bottom--md--PaddingBottom);
+      padding-inline-start: var(--#{$pagination}--m-bottom--md--PaddingLeft);
+      padding-inline-end: var(--#{$pagination}--m-bottom--md--PaddingRight);
 
       .#{$pagination}__nav-control.pf-m-first,
       .#{$pagination}__nav-control.pf-m-last,
@@ -199,17 +202,20 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     --#{$pagination}--m-bottom--Bottom: 0;
 
     position: sticky;
-    top: var(--#{$pagination}--m-sticky--Top);
+    inset-block-start: var(--#{$pagination}--m-sticky--Top);
     z-index: var(--#{$pagination}--m-sticky--ZIndex);
-    padding-top: var(--#{$pagination}--m-sticky--PaddingTop);
-    padding-right: var(--#{$pagination}--m-sticky--PaddingRight);
-    padding-bottom: var(--#{$pagination}--m-sticky--PaddingBottom);
-    padding-left: var(--#{$pagination}--m-sticky--PaddingLeft);
+    padding-block-start: var(--#{$pagination}--m-sticky--PaddingTop);
+    padding-block-end: var(--#{$pagination}--m-sticky--PaddingBottom);
+    padding-inline-start: var(--#{$pagination}--m-sticky--PaddingLeft);
+    padding-inline-end: var(--#{$pagination}--m-sticky--PaddingRight);
     background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
     box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
 
     @media screen and (min-width: $pf-v5-global--breakpoint--md) {
-      padding: var(--#{$pagination}--m-sticky--md--PaddingTop) var(--#{$pagination}--m-sticky--md--PaddingRight) var(--#{$pagination}--m-sticky--md--PaddingBottom) var(--#{$pagination}--m-sticky--md--PaddingLeft);
+      padding-block-start: var(--#{$pagination}--m-sticky--md--PaddingTop);
+      padding-block-end: var(--#{$pagination}--m-sticky--md--PaddingBottom);
+      padding-inline-start: var(--#{$pagination}--m-sticky--md--PaddingLeft);
+      padding-inline-end: var(--#{$pagination}--m-sticky--md--PaddingRight);
     }
   }
 
@@ -231,14 +237,16 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 
 // nav control
 .#{$pagination}__nav-control {
+  @include pf-v5-mirror-inline-on-rtl;
+
   .#{$button} {
-    padding-right: var(--#{$pagination}__nav-control--c-button--PaddingRight);
-    padding-left: var(--#{$pagination}__nav-control--c-button--PaddingLeft);
+    padding-inline-start: var(--#{$pagination}__nav-control--c-button--PaddingLeft);
+    padding-inline-end: var(--#{$pagination}__nav-control--c-button--PaddingRight);
     font-size: var(--#{$pagination}__nav-control--c-button--FontSize);
   }
 
   .#{$pagination}.pf-m-compact & + & {
-    margin-left: var(--#{$pagination}--m-compact__nav-control--nav-control--MarginLeft);
+    margin-inline-start: var(--#{$pagination}--m-compact__nav-control--nav-control--MarginLeft);
   }
 }
 
@@ -246,15 +254,15 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 .#{$pagination}__nav-page-select {
   display: flex;
   align-items: center;
-  padding-right: var(--#{$pagination}__nav-page-select--PaddingRight);
-  padding-left: var(--#{$pagination}__nav-page-select--PaddingLeft);
+  padding-inline-start: var(--#{$pagination}__nav-page-select--PaddingLeft);
+  padding-inline-end: var(--#{$pagination}__nav-page-select--PaddingRight);
 
   > * {
     font-size: var(--#{$pagination}__nav-page-select--FontSize);
     white-space: nowrap;
 
     &:not(:last-child) {
-      margin-right: var(--#{$pagination}__nav-page-select--child--MarginRight);
+      margin-inline-end: var(--#{$pagination}__nav-page-select--child--MarginRight);
     }
   }
 

package/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);
 }
 

package/components/Panel/panel.scss

@@ -58,10 +58,7 @@
 
   &::before {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     pointer-events: none;
     content: "";
     border: var(--#{$panel}--before--BorderWidth) solid var(--#{$panel}--before--BorderColor);
@@ -85,7 +82,10 @@
 }
 
 .#{$panel}__header {
-  padding: var(--#{$panel}__header--PaddingTop) var(--#{$panel}__header--PaddingRight) var(--#{$panel}__header--PaddingBottom) var(--#{$panel}__header--PaddingLeft);
+  padding-block-start: var(--#{$panel}__header--PaddingTop);
+  padding-block-end: var(--#{$panel}__header--PaddingBottom);
+  padding-inline-start: var(--#{$panel}__header--PaddingLeft);
+  padding-inline-end: var(--#{$panel}__header--PaddingRight);
 }
 
 .#{$panel}__main {
@@ -94,11 +94,17 @@
 }
 
 .#{$panel}__main-body {
-  padding: var(--#{$panel}__main-body--PaddingTop) var(--#{$panel}__main-body--PaddingRight) var(--#{$panel}__main-body--PaddingBottom) var(--#{$panel}__main-body--PaddingLeft);
+  padding-block-start: var(--#{$panel}__main-body--PaddingTop);
+  padding-block-end: var(--#{$panel}__main-body--PaddingBottom);
+  padding-inline-start: var(--#{$panel}__main-body--PaddingLeft);
+  padding-inline-end: var(--#{$panel}__main-body--PaddingRight);
 }
 
 .#{$panel}__footer {
-  padding: var(--#{$panel}__footer--PaddingTop) var(--#{$panel}__footer--PaddingRight) var(--#{$panel}__footer--PaddingBottom) var(--#{$panel}__footer--PaddingLeft);
+  padding-block-start: var(--#{$panel}__footer--PaddingTop);
+  padding-block-end: var(--#{$panel}__footer--PaddingBottom);
+  padding-inline-start: var(--#{$panel}__footer--PaddingLeft);
+  padding-inline-end: var(--#{$panel}__footer--PaddingRight);
   box-shadow: var(--#{$panel}__footer--BoxShadow);
 }