@patternfly/patternfly 6.0.0-alpha.1 → 6.0.0-alpha.10

package/components/Page/page.scss

@@ -5,19 +5,19 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 // stylelint-enable
 
 :root {
-  --#{$page}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
-  --#{$page}--inset: var(--#{$pf-global}--spacer--md);
-  --#{$page}--xl--inset: var(--#{$pf-global}--spacer--lg);
+  --#{$page}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$page}--inset: var(--pf-t--global--spacer--md);
+  --#{$page}--xl--inset: var(--pf-t--global--spacer--xl);
 
   // Header
-  --#{$page}__header--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-100);
+  --#{$page}__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}__header--ZIndex: var(--#{$pf-global}--ZIndex--md);
   --#{$page}__header--MinHeight: #{pf-size-prem(76px)}; // fixed height for header to ensure consistency across screen sizes.
 
   // Header brand
-  --#{$page}__header-brand--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$page}__header-brand--xl--PaddingRight: var(--#{$pf-global}--spacer--xl);
-  --#{$page}__header-brand--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
+  --#{$page}__header-brand--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$page}__header-brand--xl--PaddingRight: var(--pf-t--global--spacer--xl);
+  --#{$page}__header-brand--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
 
   @media (min-width: $pf-v5-global--breakpoint--xl) {
     --#{$page}__header-brand--PaddingLeft: var(--#{$page}__header-brand--xl--PaddingLeft);
@@ -25,22 +25,22 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   // Toggle
-  --#{$page}__header-sidebar-toggle__c-button--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$page}__header-sidebar-toggle__c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$page}__header-sidebar-toggle__c-button--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$page}__header-sidebar-toggle__c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$page}__header-sidebar-toggle__c-button--MarginRight: var(--#{$pf-global}--spacer--md);
+  --#{$page}__header-sidebar-toggle__c-button--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$page}__header-sidebar-toggle__c-button--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$page}__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$page}__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$page}__header-sidebar-toggle__c-button--MarginRight: var(--pf-t--global--spacer--md);
   --#{$page}__header-sidebar-toggle__c-button--MarginLeft: calc(var(--#{$page}__header-sidebar-toggle__c-button--PaddingLeft) * -1);
-  --#{$page}__header-sidebar-toggle__c-button--FontSize: var(--#{$pf-global}--FontSize--2xl);
+  --#{$page}__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
 
   // Header brand link
   --#{$page}__header-brand-link--c-brand--MaxHeight: #{pf-size-prem(60px)};
 
   // Header nav
-  --#{$page}__header-nav--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-300);
+  --#{$page}__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}__header-nav--xl--BackgroundColor: transparent;
-  --#{$page}__header-nav--xl--PaddingRight: var(--#{$pf-global}--spacer--xl);
-  --#{$page}__header-nav--xl--PaddingLeft: var(--#{$pf-global}--spacer--xl);
+  --#{$page}__header-nav--xl--PaddingRight: var(--pf-t--global--spacer--xl);
+  --#{$page}__header-nav--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
 
   @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
     --#{$page}__header-nav--BackgroundColor: var(--#{$page}__header-nav--xl--BackgroundColor);
@@ -49,10 +49,10 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   // Header tools
-  --#{$page}__header-tools--MarginRight: var(--#{$pf-global}--spacer--md);
-  --#{$page}__header-tools--xl--MarginRight: var(--#{$pf-global}--spacer--lg);
-  --#{$page}__header-tools--c-avatar--MarginLeft: var(--#{$pf-global}--spacer--md);
-  --#{$page}__header-tools-group--MarginLeft: var(--#{$pf-global}--spacer--xl);
+  --#{$page}__header-tools--MarginRight: var(--pf-t--global--spacer--md);
+  --#{$page}__header-tools--xl--MarginRight: var(--pf-t--global--spacer--lg);
+  --#{$page}__header-tools--c-avatar--MarginLeft: var(--pf-t--global--spacer--md);
+  --#{$page}__header-tools-group--MarginLeft: var(--pf-t--global--spacer--xl);
   --#{$page}__header-tools-group--Display: flex;
   --#{$page}__header-tools-item--Display: block;
 
@@ -77,17 +77,27 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   // Sidebar
   --#{$page}__sidebar--ZIndex: var(--#{$pf-global}--ZIndex--sm);
   --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
-  --#{$page}__sidebar--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-300);
+  --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}__sidebar--m-light--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
   --#{$page}__sidebar--m-light--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
   --#{$page}__sidebar--m-light--BorderRightColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$page}__sidebar--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-right);
+  --#{$page}__sidebar--BoxShadow: none;
   --#{$page}__sidebar--Transition: var(--#{$pf-global}--Transition);
   --#{$page}__sidebar--TranslateX: -100%;
   --#{$page}__sidebar--TranslateZ: 0;
   --#{$page}__sidebar--m-expanded--TranslateX: 0;
   --#{$page}__sidebar--xl--TranslateX: 0;
 
+  // Sidebar header
+  --#{$page}__sidebar-header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$page}__sidebar-header--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --#{$page}__sidebar-header--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$page}__sidebar-header--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$page}__sidebar-title--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$page}__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$page}__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$page}__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+
   // Sidebar body
   --#{$page}__sidebar-body--PaddingRight: 0;
   --#{$page}__sidebar-body--PaddingLeft: 0;
@@ -105,22 +115,19 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__main--ZIndex: var(--#{$pf-global}--ZIndex--xs);
 
   // Main section
-  --#{$page}__main-section--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-section--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-section--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-section--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-section--xl--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$page}__main-section--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$page}__main-section--xl--PaddingBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$page}__main-section--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$page}__main-breadcrumb--main-section--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-section--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
-  --#{$page}__main-section--m-light--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
-  --#{$page}__main-section--m-light-100--BackgroundColor: var(--#{$pf-global}--BackgroundColor--150);
-  --#{$page}__main-section--m-dark-100--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-transparent-100);
-  --#{$page}__main-section--m-dark-200--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-transparent-200);
-  --#{$page}__main-breadcrumb--page__main-tabs--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-nav--page__main-tabs--PaddingTop: var(--#{$pf-global}--spacer--md);
+  --#{$page}__main-section--MarginTop: var(--pf-t--global--spacer--md);
+  --#{$page}__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
+  --#{$page}__main-section--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$page}__main-section--PaddingBottom: 0;
+  --#{$page}__main-section--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$page}__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$page}__main-section--BackgroundColor: transparent;
+  --#{$page}__main-section--m-light--BackgroundColor: transparent;
+  --#{$page}__main-section--m-light-100--BackgroundColor: transparent;
+  --#{$page}__main-section--m-dark-100--BackgroundColor: transparent;
+  --#{$page}__main-section--m-dark-200--BackgroundColor: transparent;
+  --#{$page}__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$page}__main-nav--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
 
   // Limit width
   --#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));
@@ -137,13 +144,6 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}--section--m-shadow-top--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top);
   --#{$page}--section--m-shadow-top--ZIndex: var(--#{$pf-global}--ZIndex--xs);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
-    --#{$page}__main-section--PaddingTop: var(--#{$page}__main-section--xl--PaddingTop);
-    --#{$page}__main-section--PaddingRight: var(--#{$page}__main-section--xl--PaddingRight);
-    --#{$page}__main-section--PaddingBottom: var(--#{$page}__main-section--xl--PaddingBottom);
-    --#{$page}__main-section--PaddingLeft: var(--#{$page}__main-section--xl--PaddingLeft);
-  }
-
   // Main section horizontal nav
   --#{$page}__main-nav--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
   --#{$page}__main-nav--PaddingTop: var(--#{$pf-global}--spacer--md);
@@ -153,11 +153,6 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__main-nav--xl--PaddingRight: var(--#{$pf-global}--spacer--sm);
   --#{$page}__main-nav--xl--PaddingLeft: var(--#{$pf-global}--spacer--sm);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
-    --#{$page}__main-nav--PaddingRight: var(--#{$page}__main-nav--xl--PaddingRight);
-    --#{$page}__main-nav--PaddingLeft: var(--#{$page}__main-nav--xl--PaddingLeft);
-  }
-
   // Main section horizontal subnav
   --#{$page}__main-subnav--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-300);
   --#{$page}__main-subnav--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
@@ -169,34 +164,22 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
 
   // Main section breadcrumb
-  --#{$page}__main-breadcrumb--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
-  --#{$page}__main-breadcrumb--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-breadcrumb--PaddingRight: var(--#{$pf-global}--spacer--md);
+  --#{$page}__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$page}__main-breadcrumb--PaddingRight: var(--pf-t--global--spacer--md);
   --#{$page}__main-breadcrumb--PaddingBottom: 0;
-  --#{$page}__main-breadcrumb--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-breadcrumb--m-sticky-top--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-breadcrumb--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$page}__main-breadcrumb--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
+  --#{$page}__main-breadcrumb--PaddingLeft: var(--pf-t--global--spacer--lg);
 
   // Main section tabs
   --#{$page}__main-tabs--PaddingTop: 0;
   --#{$page}__main-tabs--PaddingRight: 0;
   --#{$page}__main-tabs--PaddingBottom: 0;
   --#{$page}__main-tabs--PaddingLeft: 0;
-  --#{$page}__main-tabs--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
-
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
-    --#{$page}__main-breadcrumb--PaddingRight: var(--#{$page}__main-breadcrumb--xl--PaddingRight);
-    --#{$page}__main-breadcrumb--PaddingLeft: var(--#{$page}__main-breadcrumb--xl--PaddingLeft);
-  }
 
   // Wizard main section
   --#{$page}__main-wizard--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
   --#{$page}__main-wizard--BorderTopColor: var(--#{$pf-global}--BorderColor--100);
   --#{$page}__main-wizard--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
   --#{$page}__main-wizard--m-light-200--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-
-  // URL.com/guidelines#layout
 }
 
 .#{$page} {
@@ -255,10 +238,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 +259,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 +276,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 +293,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 +311,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 +334,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: "";
@@ -390,8 +373,6 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
 // Sidebar
 .#{$page}__sidebar {
-  @include pf-v5-t-dark;
-
   z-index: var(--#{$page}__sidebar--ZIndex);
   display: flex;
   flex-direction: column;
@@ -399,12 +380,21 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   grid-row-start: 2;
   grid-column-start: 1;
   width: var(--#{$page}__sidebar--Width);
+  padding-block-start: 0;
+  padding-block-end: var(--pf-t--global--spacer--lg);
+  padding-inline-start: var(--pf-t--global--spacer--lg);
+  margin-inline-end: var(--#{$page}__sidebar--MarginRight); // TODO need variable
   overflow-x: hidden;
   overflow-y: auto;
   -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 +420,26 @@ $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-header {
+  padding-block-start: var(--#{$page}__sidebar-header--PaddingTop);
+  padding-block-end: var(--#{$page}__sidebar-header--PaddingBottom);
+  border-block-end: var(--#{$page}__sidebar-header--BorderBottomWidth) solid var(--#{$page}__sidebar-header--BorderBottomColor);
+}
+
+.#{$page}__sidebar-title {
+  font-family: var(--#{$page}__sidebar-title--FontFamily);
+  font-size: var(--#{$page}__sidebar-title--FontSize);
+  font-weight: var(--#{$page}__sidebar-title--FontWeight);
+  line-height: var(--#{$page}__sidebar-title--LineHeight);
+}
+
 .#{$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 +447,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 +543,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);
       }
@@ -556,6 +559,19 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 // Main & Drawer
+.#{$page}__main {
+  margin-block-start: 0;
+  margin-inline-start: var(--pf-t--global--spacer--lg);
+  margin-inline-end: var(--pf-t--global--spacer--lg);
+}
+
+.#{$page}__main-list {
+  padding-block-end: var(--pf-t--global--spacer--lg);
+  margin-block-end: var(--pf-t--global--spacer--lg);
+  background-color: var(--pf-t--global--background--color--primary--default);
+  border-radius: var(--pf-t--global--border--radius--large);
+}
+
 .#{$page}__main,
 .#{$page}__drawer {
   z-index: var(--#{$page}__main--ZIndex);
@@ -571,15 +587,16 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
 .#{$page}__main,
 .#{$page}__main-drawer,
-.#{$page}__main-group {
+.#{$page}__main-group,
+.#{$page}__main-list {
   display: flex;
   flex-direction: column;
 }
 
 .#{$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 +606,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 +614,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 +631,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 +655,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 +685,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 +717,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 +749,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 +770,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

@@ -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);