@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.10

package/components/Page/page.scss

@@ -1,180 +1,123 @@
-// @debug $page; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
+
 // stylelint-disable
-$pf-page-v5--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
-$pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-page-v6--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 // stylelint-enable
 
-:root {
+@include pf-root($page) {
   --#{$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);
+  --#{$page}--inset: var(--pf-t--global--spacer--inset--page-chrome);
 
   // Header
-  --#{$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-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);
-    --#{$page}--inset: var(--#{$page}--xl--inset);
-  }
-
-  // Toggle
-  --#{$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-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-t--global--background--color--secondary--default);
-  --#{$page}__header-nav--xl--BackgroundColor: transparent;
-  --#{$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);
-    --#{$page}__header-nav--PaddingRight: var(--#{$page}__header-nav--xl--PaddingRight);
-    --#{$page}__header-nav--PaddingLeft: var(--#{$page}__header-nav--xl--PaddingLeft);
-  }
-
-  // Header tools
-  --#{$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;
-
-  // Header tools group button
-  --#{$page}__header-tools--c-button--m-selected--before--Width: auto;
-  --#{$page}__header-tools--c-button--m-selected--before--Height: auto;
-
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
-    --#{$page}__header-tools--MarginRight: var(--#{$page}__header-tools--xl--MarginRight);
-  }
+  --#{$page}--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
 
   // Sidebar
-  --#{$page}__sidebar--ZIndex: var(--#{$pf-global}--ZIndex--sm);
+  --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
   --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}__sidebar--BoxShadow: none;
-  --#{$page}__sidebar--Transition: var(--#{$pf-global}--Transition);
+
+  // TODO Reduced Motion default needed
+  --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
+  --#{$page}__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$page}__sidebar--TranslateX: -100%;
   --#{$page}__sidebar--TranslateZ: 0;
   --#{$page}__sidebar--m-expanded--TranslateX: 0;
   --#{$page}__sidebar--xl--TranslateX: 0;
-  --#{$page}__sidebar--MarginRight: 0;
+  --#{$page}__sidebar--MarginInlineEnd: 0;
   --#{$page}__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --#{$page}__sidebar--PaddingInlineStart: 0;
+  --#{$page}__sidebar--PaddingInlineEnd: 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--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$page}__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$page}__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+  --#{$page}__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$page}__sidebar-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$page}__sidebar-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$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);
+  --#{$page}__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
   // Sidebar body
-  --#{$page}__sidebar-body--PaddingRight: 0;
-  --#{$page}__sidebar-body--PaddingLeft: 0;
-  --#{$page}__sidebar-body--m-page-insets--PaddingRight: var(--#{$page}--inset);
-  --#{$page}__sidebar-body--m-page-insets--PaddingLeft: var(--#{$page}--inset);
-  --#{$page}__sidebar-body--m-menu--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$page}__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
-  --#{$page}__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
-  --#{$page}__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-t--global--border--color--default);
-
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  --#{$page}__sidebar-body--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
+  --#{$page}__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
+  --#{$page}__sidebar-body--m-page-insets--PaddingInlineEnd: var(--#{$page}--inset);
+  --#{$page}__sidebar-body--m-page-insets--PaddingInlineStart: var(--#{$page}--inset);
+  --#{$page}__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$page}__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
+
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--xl--TranslateX);
   }
 
-  // Main
-  --#{$page}__main--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-  --#{$page}__main--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
-  --#{$page}__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --#{$page}__main--MarginInlineStart: var(--pf-t--global--spacer--lg);
-  --#{$page}__main--MarginInlineEnd: var(--pf-t--global--spacer--lg);
-  --#{$page}__main--BorderRadius: var(--pf-t--global--border--radius--large);
-  --#{$page}__main--BorderWidth: var(--pf-t--global--spacer--sm); // TODO Change to be a page outline token
-  --#{$page}__main--BorderColor: var(--#{$page}__main--BackgroundColor); // TODO Border should match the background to blend in - change to be a page outline token
+  // Container for the main content area (grid area)
+  --#{$page}__main-container--ZIndex: var(--pf-t--global--z-index--xs);
+  --#{$page}__main-container--GridArea: main;
+  --#{$page}--masthead--main-container--GridArea: sidebar / sidebar / main / main; // no sidebar
+  --#{$page}__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
+  --#{$page}__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$page}__main-container--MarginInlineStart: var(--#{$page}--inset); 
+  --#{$page}__main-container--MarginInlineEnd: var(--#{$page}--inset);
+  --#{$page}__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
+  --#{$page}__main-container--BorderWidth: var(--pf-t--global--spacer--sm); // TODO Change to be a page outline token
+  --#{$page}__main-container--BorderColor: var(--#{$page}__main-container--BackgroundColor); // TODO Border should match the background to blend in - change to be a page outline token
 
   // Main section
-  --#{$page}__main-section--MarginTop: var(--pf-t--global--spacer--md);
-  --#{$page}__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$page}__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section - TODO, see if we can remove the need for this calc(), or possibly move it down to the property definition so a user can theme this without a calc()
-  --#{$page}__main-section--PaddingBottom: 0;
-  --#{$page}__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
-  --#{$page}__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$page}__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg); // This is the intended spacing - the border of the main section will be subtracted
+  --#{$page}__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$page}__main-section--PaddingInlineStart: var(--pf-t--global--spacer--lg); // This is the intended spacing - the border of the main section will be subtracted
+  --#{$page}__main-section--RowGap: var(--pf-t--global--spacer--lg);
+  --#{$page}__main-breadcrumb--main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$page}__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$page}__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$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);
+  --#{$page}__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
 
   // Limit width
   --#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));
-
+  
   // Sticky
-  --#{$page}--section--m-sticky-top--ZIndex: var(--#{$pf-global}--ZIndex--md);
+  --#{$page}--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
   --#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
-  --#{$page}--section--m-sticky-bottom--ZIndex: var(--#{$pf-global}--ZIndex--md);
+  --#{$page}--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
   --#{$page}--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
 
   // Shadows
   --#{$page}--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
-  --#{$page}--section--m-shadow-bottom--ZIndex: var(--#{$pf-global}--ZIndex--xs);
+  --#{$page}--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$page}--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
-  --#{$page}--section--m-shadow-top--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-
-  // Main section horizontal nav
-  --#{$page}__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$page}__main-nav--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$page}__main-nav--PaddingRight: 0;
-  --#{$page}__main-nav--PaddingLeft: 0;
-  --#{$page}__main-nav--m-sticky-top--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$page}__main-nav--xl--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$page}__main-nav--xl--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$page}--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
 
   // Main section horizontal subnav
   --#{$page}__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$page}__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$page}__main-subnav--PaddingBlockEnd: 0;
-  --#{$page}__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth));
-  --#{$page}__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth));
+  --#{$page}__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth));
+  --#{$page}__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth));
 
   // Main section breadcrumb
-  --#{$page}__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$page}__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
-  --#{$page}__main-breadcrumb--PaddingBottom: 0;
-  --#{$page}__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
+  --#{$page}__main-breadcrumb--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$page}__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
+  --#{$page}__main-breadcrumb--PaddingBlockEnd: 0;
+  --#{$page}__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
   --#{$page}__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   // Main section tabs
-  --#{$page}__main-tabs--PaddingTop: 0;
-  --#{$page}__main-tabs--PaddingRight: 0;
-  --#{$page}__main-tabs--PaddingBottom: 0;
+  --#{$page}__main-tabs--PaddingBlockStart: 0;
+  --#{$page}__main-tabs--PaddingInlineEnd: 0;
+  --#{$page}__main-tabs--PaddingBlockEnd: 0;
+  --#{$page}__main-tabs--PaddingInlineStart: 0;
   --#{$page}__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   // Wizard main section
   --#{$page}__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --#{$page}__main-wizard--BorderTopColor: var(--pf-t--global--border--color--default);
-  --#{$page}__main-wizard--BorderTopWidth: var(--pf-t--global--border--width--button--default);
-  }
+  --#{$page}__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
+  --#{$page}__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
+}
 
 .#{$page} {
   // Base
@@ -189,126 +132,22 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   max-height: 100%;
   background-color: var(--#{$page}--BackgroundColor);
 
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
     grid-template-areas:
       "header header"
-      "nav main";
-    grid-template-columns: max-content 1fr;
+      "sidebar main";
+    grid-template-columns: var(--#{$page}__sidebar--Width) 1fr;
     }
-}
+  }
 
 // Header
-.#{$page}__header,
 .#{$page} > .#{$masthead} {
-  z-index: var(--#{$page}__header--ZIndex);
-  grid-area: header;
-}
-
-.#{$page}__header {
-  display: grid;
-  grid-template-columns: auto auto;
-  align-items: center;
-  min-width: 0;
-  min-height: var(--#{$page}__header--MinHeight);
-  background-color: var(--#{$page}__header--BackgroundColor);
-
-  > * {
-    display: flex;
-    align-items: center;
-  }
-
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
-    grid-template-columns: auto 1fr auto;
-  }
-
-  .#{$masthead} {
-    grid-column: span 2;
-    align-self: stretch;
-  }
-}
-
-// Brand
-.#{$page}__header-brand {
-  grid-column: 1 / 2;
-  padding-inline-start: var(--#{$page}__header-brand--PaddingLeft);
-
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
-    padding-inline-end: var(--#{$page}__header-brand--xl--PaddingRight); // set padding right here to allow mobile view to accomodate tools
-  }
-}
-
-// Link
-.#{$page}__header-brand-link {
-  display: flex;
-  flex: 1;
-  align-items: center;
-
-  .#{$brand} {
-    max-height: var(--#{$page}__header-brand-link--c-brand--MaxHeight); // Hardcode brand image max-height so it always aligns with everthing else.
-  }
-}
-
-// Sidebar toggle
-.#{$page}__header-brand-toggle {
-  .#{$button} {
-    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;
-  }
-}
-
-// Header navigation
-.#{$page}__header-nav {
-  grid-row: 2 / 3;
-  grid-column: 1 / -1;
-  align-self: stretch;
-  min-width: 0;
-  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) {
-    grid-row: 1 / 2;
-    grid-column: 2 / 3;
-  }
-
-  .#{$nav} {
-    align-self: stretch;
-  }
-}
-
-// Header tools
-.#{$page}__header-tools {
-  grid-column: 2 / 3;
-  margin-inline-start: auto; // to push it to the right
-  margin-inline-end: var(--#{$page}__header-tools--MarginRight);
-
-  .#{$avatar} {
-    margin-inline-start: var(--#{$page}__header-tools--c-avatar--MarginLeft);
-  }
-
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
-    grid-column: 3 / 4;
-  }
-}
-
-.#{$page}__header-tools-group {
-  @include pf-v5-hidden-visible(var(--#{$page}__header-tools-group--Display));
-
-  align-items: center;
-
-  & + & {
-    margin-inline-start: var(--#{$page}__header-tools-group--MarginLeft);
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
+    --#{$masthead}--m-display-inline--GridTemplateColumns: var(--#{$masthead}--m-display-inline--breakpoint--xl--GridTemplateColumns);
   }
-}
 
-.#{$page}__header-tools-item {
-  @include pf-v5-hidden-visible(var(--#{$page}__header-tools-item--Display));
+  z-index: var(--#{$page}--c-masthead--ZIndex);
+  grid-area: header;
 }
 
 // Sidebar
@@ -316,24 +155,25 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   z-index: var(--#{$page}__sidebar--ZIndex);
   display: flex;
   flex-direction: column;
-  grid-area: nav;
+  grid-area: sidebar;
   grid-row-start: 2;
   grid-column-start: 1;
   width: var(--#{$page}__sidebar--Width);
   padding-block-start: 0;
   padding-block-end: var(--#{$page}__sidebar--PaddingBlockEnd);
   padding-inline-start: var(--#{$page}__sidebar--PaddingInlineStart);
-  margin-inline-end: var(--#{$page}__sidebar--MarginRight);
+  padding-inline-end: var(--#{$page}__sidebar--PaddingInlineEnd);
+  margin-inline-end: var(--#{$page}__sidebar--MarginInlineEnd);
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   background-color: var(--#{$page}__sidebar--BackgroundColor);
-  transition: var(--#{$page}__sidebar--Transition);
+  transition: transform var(--#{$page}__sidebar--TransitionDuration) var(--#{$page}__sidebar--TransitionTimingFunction);
 
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-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))
+    $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$page}__sidebar--TranslateX))}) translateZ(var(--#{$page}__sidebar--TranslateZ))
   );
 
   // Mobile
@@ -343,7 +183,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
     box-shadow: var(--#{$page}__sidebar--BoxShadow);
 
-    @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
       --#{$page}__sidebar--BoxShadow: none;
     }
   }
@@ -357,13 +197,13 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 .#{$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);
+  padding-block-start: var(--#{$page}__sidebar-header--PaddingBlockStart);
+  padding-block-end: var(--#{$page}__sidebar-header--PaddingBlockEnd);
+  border-block-end: var(--#{$page}__sidebar-header--BorderBlockEndWidth) solid var(--#{$page}__sidebar-header--BorderBlockEndColor);
 }
 
 .#{$page}__sidebar-title {
-  padding-inline-start: var(--#{$page}__sidebar-title--PaddingLeft);
+  padding-inline-start: var(--#{$page}__sidebar-title--PaddingInlineStart);
   font-family: var(--#{$page}__sidebar-title--FontFamily);
   font-size: var(--#{$page}__sidebar-title--FontSize);
   font-weight: var(--#{$page}__sidebar-title--FontWeight);
@@ -371,42 +211,26 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 .#{$page}__sidebar-body {
-  padding-inline-start: var(--#{$page}__sidebar-body--PaddingLeft);
-  padding-inline-end: var(--#{$page}__sidebar-body--PaddingRight);
+  padding-inline-start: var(--#{$page}__sidebar-body--PaddingInlineStart);
+  padding-inline-end: var(--#{$page}__sidebar-body--PaddingInlineEnd);
 
   &:last-child {
     flex-grow: 1;
   }
 
-  &.pf-m-menu {
-    background-color: var(--#{$page}__sidebar-body--m-menu--BackgroundColor);
-    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;
-    }
-
-    .#{$context-selector} {
-      --#{$context-selector}__toggle--BorderTopColor: transparent;
-      --#{$context-selector}__toggle--BorderRightColor: transparent;
-      --#{$context-selector}__toggle--BorderBottomColor: var(--#{$page}__sidebar-body--m-menu--c-context-selector--BorderBottomColor);
-      --#{$context-selector}__toggle--BorderLeftColor: transparent;
-      --#{$context-selector}__menu--Top: 100%;
-
-      @include pf-v5-t-dark;
-
-      width: 100%;
-    }
+  &.pf-m-page-insets {
+    --#{$page}__sidebar-body--PaddingInlineEnd: var(--#{$page}__sidebar-body--m-page-insets--PaddingInlineEnd);
+    --#{$page}__sidebar-body--PaddingInlineStart: var(--#{$page}__sidebar-body--m-page-insets--PaddingInlineStart);
   }
 
-  &.pf-m-page-insets {
-    --#{$page}__sidebar-body--PaddingRight: var(--#{$page}__sidebar-body--m-page-insets--PaddingRight);
-    --#{$page}__sidebar-body--PaddingLeft: var(--#{$page}__sidebar-body--m-page-insets--PaddingLeft);
+  &.pf-m-context-selector {
+    --#{$page}__sidebar-body--PaddingInlineEnd: var(--#{$page}__sidebar-body--m-context-selector--PaddingInlineEnd);
+    --#{$page}__sidebar-body--PaddingInlineStart: var(--#{$page}__sidebar-body--m-context-selector--PaddingInlineStart);
   }
 
   &.pf-m-inset-none {
-    --#{$page}__sidebar-body--PaddingRight: 0;
-    --#{$page}__sidebar-body--PaddingLeft: 0;
+    --#{$page}__sidebar-body--PaddingInlineEnd: 0;
+    --#{$page}__sidebar-body--PaddingInlineStart: 0;
   }
 
   &.pf-m-fill {
@@ -418,18 +242,12 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 }
 
-.#{$page}__main-nav,
 .#{$page}__main-breadcrumb,
 .#{$page}__main-tabs,
 .#{$page}__main-section,
 .#{$page}__main-wizard {
   &.pf-m-limit-width {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-
     > .#{$page}__main-body {
-      flex: 1;
       max-width: var(--#{$page}--section--m-limit-width--MaxWidth);
     }
 
@@ -443,13 +261,14 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 }
 
-.#{$page}__main-nav,
 .#{$page}__main-breadcrumb,
 .#{$page}__main-tabs,
 .#{$page}__main-section,
 .#{$page}__main-wizard,
 .#{$page}__main-group,
 .#{$page}__main-subnav {
+  display: flex;
+  flex-direction: column;
   flex-shrink: 0;
 
   &.pf-m-overflow-scroll {
@@ -469,10 +288,10 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   // Responsive height modifiers for sticky top/bottom
-  @each $breakpoint, $breakpoint-value in $pf-page-v5--height-breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-page-v6--height-breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
 
-    @include pf-v5-apply-height-breakpoint($breakpoint) {
+    @include pf-v6-apply-height-breakpoint($breakpoint) {
 
       &.pf-m-sticky-top#{$breakpoint-name} {
         position: sticky;
@@ -492,25 +311,43 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 // Main & Drawer
-.#{$page}__main {
+.#{$page}__main-container {
+  display: flex;
+  flex-direction: column;
   align-self: start;
-  max-height: var(--#{$page}__main--MaxHeight);
-  margin-block-start: 0;
-  margin-inline-start: var(--#{$page}__main--MarginInlineStart);
-  margin-inline-end: var(--#{$page}__main--MarginInlineEnd);
-  background: var(--#{$page}__main--BackgroundColor);
-  border: var(--#{$page}__main--BorderWidth) solid var(--#{$page}__main--BorderColor);
-  border-radius: var(--#{$page}__main--BorderRadius);
+  max-height: var(--#{$page}__main-container--MaxHeight);
+  margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
+  margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
+  background: var(--#{$page}__main-container--BackgroundColor);
+  border: var(--#{$page}__main-container--BorderWidth) solid var(--#{$page}__main-container--BorderColor);
+  border-radius: var(--#{$page}__main-container--BorderRadius);
 }
 
-.#{$page}__main,
+.#{$page}__main-container,
 .#{$page}__drawer {
-  z-index: var(--#{$page}__main--ZIndex);
-  grid-area: main;
+  z-index: var(--#{$page}__main-container--ZIndex);
+  grid-area: var(--#{$page}__main-container--GridArea);
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
+    .#{$masthead} + &,
+    .#{$page}__sidebar.pf-m-collapsed + & {
+      --#{$page}__main-container--GridArea: var(--#{$page}--masthead--main-container--GridArea);
+    }
+
+    .#{$page}__sidebar:not(.pf-m-collapsed) + & {
+      --#{$page}__main-container--MarginInlineStart: 0;
+    }
+  }
+
+  &.pf-m-fill,
+  &:has(.#{$page}__main-wizard) {
+    align-self: stretch;
+  }
+
+
   &:focus {
     outline: 0;
   }
@@ -518,29 +355,14 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
 .#{$page}__main,
 .#{$page}__main-drawer,
-.#{$page}__main-group,
-.#{$page}__main-list {
+.#{$page}__main-group {
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
 }
 
-.#{$page}__main-nav {
-  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
-  @each $breakpoint, $breakpoint-value in $pf-page-v5--height-breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
-
-    @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-block-end: var(--#{$page}__main-nav--m-sticky-top--PaddingBottom);
-      }
-    }
-  }
+.#{$page}__main {
+  overflow: auto;
 }
 
 .#{$page}__main-subnav {
@@ -552,50 +374,44 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 .#{$page}__main-breadcrumb {
-  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);
+  padding-block-start: var(--#{$page}__main-breadcrumb--PaddingBlockStart);
+  padding-block-end: var(--#{$page}__main-breadcrumb--PaddingBlockEnd);
+  padding-inline-start: var(--#{$page}__main-breadcrumb--PaddingInlineStart);
+  padding-inline-end: var(--#{$page}__main-breadcrumb--PaddingInlineEnd);
   background-color: var(--#{$page}__main-breadcrumb--BackgroundColor);
 
   + .#{$page}__main-section {
-    --#{$page}__main-section--PaddingTop: var(--#{$page}__main-breadcrumb--main-section--PaddingTop);
+    --#{$page}__main-section--PaddingBlockStart: var(--#{$page}__main-breadcrumb--main-section--PaddingBlockStart);
   }
 
   // Responsive height modifiers for sticky top/bottom
-  @each $breakpoint, $breakpoint-value in $pf-page-v5--height-breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-page-v6--height-breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
 
-    @include pf-v5-apply-height-breakpoint($breakpoint) {
+    @include pf-v6-apply-height-breakpoint($breakpoint) {
       &.pf-m-sticky-top#{$breakpoint-name},
       .#{$page}__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
-        --#{$page}__main-breadcrumb--PaddingBottom: var(--#{$page}__main-breadcrumb--m-sticky-top--PaddingBottom);
+        --#{$page}__main-breadcrumb--PaddingBlockEnd: var(--#{$page}__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
       }
     }
   }
 }
 
 .#{$page}__main-tabs {
-  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);
+  padding-block-start: var(--#{$page}__main-tabs--PaddingBlockStart);
+  padding-block-end: var(--#{$page}__main-tabs--PaddingBlockEnd);
+  padding-inline-start: var(--#{$page}__main-tabs--PaddingInlineStart);
+  padding-inline-end: var(--#{$page}__main-tabs--PaddingInlineEnd);
   background-color: var(--#{$page}__main-tabs--BackgroundColor);
 
-  .#{$page}__main-nav + & {
-    --#{$page}__main-tabs--PaddingTop: var(--#{$page}__main-nav--page__main-tabs--PaddingTop);
-  }
-
   .#{$page}__main-breadcrumb + & {
-    --#{$page}__main-tabs--PaddingTop: var(--#{$page}__main-breadcrumb--page__main-tabs--PaddingTop);
+    --#{$page}__main-tabs--PaddingBlockStart: var(--#{$page}__main-breadcrumb--page__main-tabs--PaddingBlockStart);
   }
 }
 
 .#{$page}__main-section,
 .#{$page}__main-group,
 .#{$page}__main-wizard {
-  &:last-child,
-  &:only-child,
   &.pf-m-fill {
     flex-grow: 1;
   }
@@ -606,44 +422,31 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 .#{$page}__main-section {
-  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);
+  gap: var(--#{$page}__main-section--RowGap);
+  padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
+  padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
+  padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
+  padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
   background-color: var(--#{$page}__main-section--BackgroundColor);
 
   &.pf-m-secondary {
     --#{$page}__main-section--BackgroundColor: var(--#{$page}__main-section--m-secondary--BackgroundColor);
   }
 
-  @each $breakpoint, $breakpoint-value in $pf-page-v5--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-page-v6--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       // stylelint-disable max-nesting-depth
       &.pf-m-padding#{$breakpoint-name} {
-        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-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);
-          }
-        }
+        padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
+        padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
+        padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
+        padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
       }
 
       &.pf-m-no-padding#{$breakpoint-name} {
-        &,
-        &.pf-m-limit-width .#{$page}__main-body {
-          padding: 0;
-        }
+        padding: 0;
       }
       // stylelint-enable
     }
@@ -654,10 +457,10 @@ $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-block-start: var(--#{$page}__main-wizard--BorderTopWidth) solid var(--#{$page}__main-wizard--BorderTopColor);
+  border-block-start: var(--#{$page}__main-wizard--BorderBlockStartWidth) solid var(--#{$page}__main-wizard--BorderBlockStartColor);
 
   &:first-child {
-    --#{$page}__main-wizard--BorderTopWidth: 0;
+    --#{$page}__main-wizard--BorderBlockStartWidth: 0;
   }
 }
 
@@ -669,35 +472,6 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   flex-shrink: 0;
 }
 
-.#{$page}__main-body {
-  .#{$page}__main-nav & {
-    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-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-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-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);
-  }
-}
-
 .#{$page}__drawer {
   grid-area: main;
 
@@ -705,4 +479,3 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     flex: 1 0 auto;
   }
 }
-