@patternfly/react-styles 6.0.0-alpha.30 → 6.0.0-alpha.32

package/css/components/ModalBox/modal-box.css

@@ -49,7 +49,7 @@
   --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   :where(:root, .pf-v6-c-modal-box) {
     --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
   }
@@ -195,7 +195,7 @@
 .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
   margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd);
 }
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
     --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd);
   }

package/css/components/Nav/nav.css

@@ -7,8 +7,8 @@
   --pf-v6-c-nav__list--ColumnGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-nav--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-nav--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-nav--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-nav--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-nav--PaddingInlineStart: 0;
+  --pf-v6-c-nav--PaddingInlineEnd: 0;
   --pf-v6-c-nav--RowGap: var(--pf-t--global--spacer--lg);
   --pf-v6-c-nav--ColumnGap: 0;
   --pf-v6-c-nav--AlignItems: baseline;
@@ -98,8 +98,9 @@
 .pf-v6-c-nav.pf-m-overflow-hidden {
   overflow: hidden;
 }
-.pf-v6-c-nav.pf-m-full-width {
-  width: 100%;
+.pf-v6-c-nav.pf-m-inset {
+  --pf-v6-c-nav--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-nav--PaddingInlineEnd: var(--pf-t--global--spacer--md);
 }
 .pf-v6-c-nav.pf-m-fill {
   flex-grow: 1;

package/css/components/Nav/nav.d.ts

@@ -5,7 +5,7 @@ declare const _default: {
   "menu": "pf-v6-c-menu",
   "modifiers": {
     "overflowHidden": "pf-m-overflow-hidden",
-    "fullWidth": "pf-m-full-width",
+    "inset": "pf-m-inset",
     "fill": "pf-m-fill",
     "expanded": "pf-m-expanded",
     "hover": "pf-m-hover",

package/css/components/Nav/nav.js

@@ -7,7 +7,7 @@ exports.default = {
   "menu": "pf-v6-c-menu",
   "modifiers": {
     "overflowHidden": "pf-m-overflow-hidden",
-    "fullWidth": "pf-m-full-width",
+    "inset": "pf-m-inset",
     "fill": "pf-m-fill",
     "expanded": "pf-m-expanded",
     "hover": "pf-m-hover",

package/css/components/Nav/nav.mjs

@@ -5,7 +5,7 @@ export default {
   "menu": "pf-v6-c-menu",
   "modifiers": {
     "overflowHidden": "pf-m-overflow-hidden",
-    "fullWidth": "pf-m-full-width",
+    "inset": "pf-m-inset",
     "fill": "pf-m-fill",
     "expanded": "pf-m-expanded",
     "hover": "pf-m-hover",

package/css/components/Page/page.css

@@ -1,7 +1,6 @@
 :where(:root, .pf-v6-c-page) {
   --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-page--inset: var(--pf-t--global--spacer--md);
-  --pf-v6-c-page--xl--inset: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-page__sidebar--Width: 18.125rem;
@@ -15,6 +14,7 @@
   --pf-v6-c-page__sidebar--MarginInlineEnd: 0;
   --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__sidebar--PaddingInlineStart: 0;
+  --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
   --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -24,17 +24,19 @@
   --pf-v6-c-page__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-page__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
   --pf-v6-c-page__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading--default);
-  --pf-v6-c-page__sidebar-body--PaddingInlineEnd: 0;
-  --pf-v6-c-page__sidebar-body--PaddingInlineStart: 0;
+  --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineEnd: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-page__main-container--GridArea: main;
+  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
   --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
   --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
+  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
   --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -47,7 +49,6 @@
   --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-page__main-nav--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
   --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
@@ -57,13 +58,6 @@
   --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --pf-v6-c-page--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
-  --pf-v6-c-page__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-page__main-nav--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-page__main-nav--PaddingInlineEnd: 0;
-  --pf-v6-c-page__main-nav--PaddingInlineStart: 0;
-  --pf-v6-c-page__main-nav--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-page__main-nav--xl--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-page__main-nav--xl--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-page__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-subnav--PaddingBlockEnd: 0;
@@ -83,12 +77,7 @@
   --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
 }
-@media (min-width: 1200px) {
-  :where(:root, .pf-v6-c-page) {
-    --pf-v6-c-page--inset: var(--pf-v6-c-page--xl--inset);
-  }
-}
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   :where(:root, .pf-v6-c-page) {
     --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
   }
@@ -104,10 +93,10 @@
   max-height: 100%;
   background-color: var(--pf-v6-c-page--BackgroundColor);
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-page {
     grid-template-areas: "header header" "sidebar main";
-    grid-template-columns: max-content 1fr;
+    grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
   }
 }
 
@@ -115,6 +104,11 @@
   z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
   grid-area: header;
 }
+@media (min-width: 75rem) {
+  .pf-v6-c-page > .pf-v6-c-masthead {
+    --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns);
+  }
+}
 
 .pf-v6-c-page__sidebar {
   z-index: var(--pf-v6-c-page__sidebar--ZIndex);
@@ -127,6 +121,7 @@
   padding-block-start: 0;
   padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
   margin-inline-end: var(--pf-v6-c-page__sidebar--MarginInlineEnd);
   overflow-x: hidden;
   overflow-y: auto;
@@ -143,7 +138,7 @@
   --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--m-expanded--TranslateX);
   box-shadow: var(--pf-v6-c-page__sidebar--BoxShadow);
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-c-page__sidebar.pf-m-expanded {
     --pf-v6-c-page__sidebar--BoxShadow: none;
   }
@@ -193,21 +188,18 @@
   flex-grow: 0;
 }
 
-.pf-v6-c-page__main-nav.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
   max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
 }
-.pf-v6-c-page__main-nav.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
   align-items: center;
 }
-.pf-v6-c-page__main-nav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
@@ -215,7 +207,6 @@
   width: 100%;
 }
 
-.pf-v6-c-page__main-nav,
 .pf-v6-c-page__main-breadcrumb,
 .pf-v6-c-page__main-tabs,
 .pf-v6-c-page__main-section,
@@ -226,7 +217,6 @@
   flex-direction: column;
   flex-shrink: 0;
 }
-.pf-v6-c-page__main-nav.pf-m-overflow-scroll,
 .pf-v6-c-page__main-breadcrumb.pf-m-overflow-scroll,
 .pf-v6-c-page__main-tabs.pf-m-overflow-scroll,
 .pf-v6-c-page__main-section.pf-m-overflow-scroll,
@@ -237,7 +227,6 @@
   flex-shrink: 1;
   overflow: auto;
 }
-.pf-v6-c-page__main-nav.pf-m-shadow-bottom,
 .pf-v6-c-page__main-breadcrumb.pf-m-shadow-bottom,
 .pf-v6-c-page__main-tabs.pf-m-shadow-bottom,
 .pf-v6-c-page__main-section.pf-m-shadow-bottom,
@@ -247,7 +236,6 @@
   z-index: var(--pf-v6-c-page--section--m-shadow-bottom--ZIndex);
   box-shadow: var(--pf-v6-c-page--section--m-shadow-bottom--BoxShadow);
 }
-.pf-v6-c-page__main-nav.pf-m-shadow-top,
 .pf-v6-c-page__main-breadcrumb.pf-m-shadow-top,
 .pf-v6-c-page__main-tabs.pf-m-shadow-top,
 .pf-v6-c-page__main-section.pf-m-shadow-top,
@@ -257,7 +245,6 @@
   z-index: var(--pf-v6-c-page--section--m-shadow-top--ZIndex);
   box-shadow: var(--pf-v6-c-page--section--m-shadow-top--BoxShadow);
 }
-.pf-v6-c-page__main-nav.pf-m-sticky-top,
 .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top,
 .pf-v6-c-page__main-tabs.pf-m-sticky-top,
 .pf-v6-c-page__main-section.pf-m-sticky-top,
@@ -269,7 +256,6 @@
   z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
   box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
 }
-.pf-v6-c-page__main-nav.pf-m-sticky-bottom,
 .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom,
 .pf-v6-c-page__main-tabs.pf-m-sticky-bottom,
 .pf-v6-c-page__main-section.pf-m-sticky-bottom,
@@ -282,7 +268,6 @@
   box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
 }
 @media (min-height: 0) {
-  .pf-v6-c-page__main-nav.pf-m-sticky-top-on-sm-height,
   .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
   .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
   .pf-v6-c-page__main-section.pf-m-sticky-top-on-sm-height,
@@ -294,7 +279,6 @@
     z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
   }
-  .pf-v6-c-page__main-nav.pf-m-sticky-bottom-on-sm-height,
   .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
   .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
   .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
@@ -308,7 +292,6 @@
   }
 }
 @media (min-height: 40rem) {
-  .pf-v6-c-page__main-nav.pf-m-sticky-top-on-md-height,
   .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
   .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-md-height,
   .pf-v6-c-page__main-section.pf-m-sticky-top-on-md-height,
@@ -320,7 +303,6 @@
     z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
   }
-  .pf-v6-c-page__main-nav.pf-m-sticky-bottom-on-md-height,
   .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
   .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
   .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-md-height,
@@ -334,7 +316,6 @@
   }
 }
 @media (min-height: 48rem) {
-  .pf-v6-c-page__main-nav.pf-m-sticky-top-on-lg-height,
   .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
   .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
   .pf-v6-c-page__main-section.pf-m-sticky-top-on-lg-height,
@@ -346,7 +327,6 @@
     z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
   }
-  .pf-v6-c-page__main-nav.pf-m-sticky-bottom-on-lg-height,
   .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
   .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
   .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
@@ -360,7 +340,6 @@
   }
 }
 @media (min-height: 60rem) {
-  .pf-v6-c-page__main-nav.pf-m-sticky-top-on-xl-height,
   .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
   .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
   .pf-v6-c-page__main-section.pf-m-sticky-top-on-xl-height,
@@ -372,7 +351,6 @@
     z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
   }
-  .pf-v6-c-page__main-nav.pf-m-sticky-bottom-on-xl-height,
   .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
   .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
   .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
@@ -386,7 +364,6 @@
   }
 }
 @media (min-height: 80rem) {
-  .pf-v6-c-page__main-nav.pf-m-sticky-top-on-2xl-height,
   .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
   .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
   .pf-v6-c-page__main-section.pf-m-sticky-top-on-2xl-height,
@@ -398,7 +375,6 @@
     z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
   }
-  .pf-v6-c-page__main-nav.pf-m-sticky-bottom-on-2xl-height,
   .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
   .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
   .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
@@ -417,26 +393,37 @@
   flex-direction: column;
   align-self: start;
   max-height: var(--pf-v6-c-page__main-container--MaxHeight);
-  margin-block-start: 0;
   margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
-  overflow: auto;
   background: var(--pf-v6-c-page__main-container--BackgroundColor);
   border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
   border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
 }
-.pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard) {
-  align-self: stretch;
-}
 
 .pf-v6-c-page__main-container,
 .pf-v6-c-page__drawer {
   z-index: var(--pf-v6-c-page__main-container--ZIndex);
-  grid-area: main;
+  grid-area: var(--pf-v6-c-page__main-container--GridArea);
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
+@media screen and (min-width: 75rem) {
+  .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
+  .pf-v6-c-masthead + .pf-v6-c-page__drawer,
+  .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
+    --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
+  }
+  .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-container,
+  .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__drawer {
+    --pf-v6-c-page__main-container--MarginInlineStart: 0;
+  }
+}
+.pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard),
+.pf-v6-c-page__drawer.pf-m-fill,
+.pf-v6-c-page__drawer:has(.pf-v6-c-page__main-wizard) {
+  align-self: stretch;
+}
 .pf-v6-c-page__main-container:focus,
 .pf-v6-c-page__drawer:focus {
   outline: 0;
@@ -444,48 +431,12 @@
 
 .pf-v6-c-page__main,
 .pf-v6-c-page__main-drawer,
-.pf-v6-c-page__main-group,
-.pf-v6-c-page__main-list {
+.pf-v6-c-page__main-group {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }
 
-.pf-v6-c-page__main-nav {
-  padding-block-start: var(--pf-v6-c-page__main-nav--PaddingBlockStart);
-  padding-inline-start: var(--pf-v6-c-page__main-nav--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-page__main-nav--PaddingInlineEnd);
-  background-color: var(--pf-v6-c-page__main-nav--BackgroundColor);
-}
-.pf-v6-c-page__main-nav.pf-m-sticky-top, .pf-v6-c-page__main-group.pf-m-sticky-top .pf-v6-c-page__main-nav:last-child {
-  padding-block-end: var(--pf-v6-c-page__main-nav--m-sticky-top--PaddingBlockEnd);
-}
-@media (min-height: 0) {
-  .pf-v6-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-v6-c-page__main-nav:last-child {
-    padding-block-end: var(--pf-v6-c-page__main-nav--m-sticky-top--PaddingBlockEnd);
-  }
-}
-@media (min-height: 40rem) {
-  .pf-v6-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-md-height .pf-v6-c-page__main-nav:last-child {
-    padding-block-end: var(--pf-v6-c-page__main-nav--m-sticky-top--PaddingBlockEnd);
-  }
-}
-@media (min-height: 48rem) {
-  .pf-v6-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-v6-c-page__main-nav:last-child {
-    padding-block-end: var(--pf-v6-c-page__main-nav--m-sticky-top--PaddingBlockEnd);
-  }
-}
-@media (min-height: 60rem) {
-  .pf-v6-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-v6-c-page__main-nav:last-child {
-    padding-block-end: var(--pf-v6-c-page__main-nav--m-sticky-top--PaddingBlockEnd);
-  }
-}
-@media (min-height: 80rem) {
-  .pf-v6-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-v6-c-page__main-nav:last-child {
-    padding-block-end: var(--pf-v6-c-page__main-nav--m-sticky-top--PaddingBlockEnd);
-  }
-}
-
 .pf-v6-c-page__main-subnav {
   padding-block-start: var(--pf-v6-c-page__main-subnav--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-page__main-subnav--PaddingBlockEnd);
@@ -540,9 +491,6 @@
   padding-inline-end: var(--pf-v6-c-page__main-tabs--PaddingInlineEnd);
   background-color: var(--pf-v6-c-page__main-tabs--BackgroundColor);
 }
-.pf-v6-c-page__main-nav + .pf-v6-c-page__main-tabs {
-  --pf-v6-c-page__main-tabs--PaddingBlockStart: var(--pf-v6-c-page__main-nav--page__main-tabs--PaddingBlockStart);
-}
 .pf-v6-c-page__main-breadcrumb + .pf-v6-c-page__main-tabs {
   --pf-v6-c-page__main-tabs--PaddingBlockStart: var(--pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart);
 }
@@ -575,115 +523,61 @@
   padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
   padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
 }
-.pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width {
+.pf-v6-c-page__main-section.pf-m-no-padding {
   padding: 0;
 }
-.pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-v6-c-page__main-body {
-  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-  padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
-  padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
-}
-.pf-v6-c-page__main-section.pf-m-no-padding, .pf-v6-c-page__main-section.pf-m-no-padding.pf-m-limit-width .pf-v6-c-page__main-body {
-  padding: 0;
-}
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-page__main-section.pf-m-padding-on-sm {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
     padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
     padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
-  .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
-    padding: 0;
-  }
-  .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-v6-c-page__main-body {
-    padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
-    padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
-    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
-  }
-  .pf-v6-c-page__main-section.pf-m-no-padding-on-sm, .pf-v6-c-page__main-section.pf-m-no-padding-on-sm.pf-m-limit-width .pf-v6-c-page__main-body {
+  .pf-v6-c-page__main-section.pf-m-no-padding-on-sm {
     padding: 0;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-page__main-section.pf-m-padding-on-md {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
     padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
     padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
-  .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
-    padding: 0;
-  }
-  .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-v6-c-page__main-body {
-    padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
-    padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
-    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
-  }
-  .pf-v6-c-page__main-section.pf-m-no-padding-on-md, .pf-v6-c-page__main-section.pf-m-no-padding-on-md.pf-m-limit-width .pf-v6-c-page__main-body {
+  .pf-v6-c-page__main-section.pf-m-no-padding-on-md {
     padding: 0;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-page__main-section.pf-m-padding-on-lg {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
     padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
     padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
-  .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
-    padding: 0;
-  }
-  .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-v6-c-page__main-body {
-    padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
-    padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
-    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
-  }
-  .pf-v6-c-page__main-section.pf-m-no-padding-on-lg, .pf-v6-c-page__main-section.pf-m-no-padding-on-lg.pf-m-limit-width .pf-v6-c-page__main-body {
+  .pf-v6-c-page__main-section.pf-m-no-padding-on-lg {
     padding: 0;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-page__main-section.pf-m-padding-on-xl {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
     padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
     padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
-  .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
-    padding: 0;
-  }
-  .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-v6-c-page__main-body {
-    padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
-    padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
-    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
-  }
-  .pf-v6-c-page__main-section.pf-m-no-padding-on-xl, .pf-v6-c-page__main-section.pf-m-no-padding-on-xl.pf-m-limit-width .pf-v6-c-page__main-body {
+  .pf-v6-c-page__main-section.pf-m-no-padding-on-xl {
     padding: 0;
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
     padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
     padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
-  .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
-    padding: 0;
-  }
-  .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-v6-c-page__main-body {
-    padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
-    padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
-    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
-  }
-  .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl, .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl.pf-m-limit-width .pf-v6-c-page__main-body {
+  .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl {
     padding: 0;
   }
 }
@@ -706,19 +600,6 @@
   flex-shrink: 0;
 }
 
-.pf-v6-c-page__main-nav .pf-v6-c-page__main-body {
-  padding-inline-start: var(--pf-v6-c-page__main-nav--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-page__main-nav--PaddingInlineEnd);
-}
-.pf-v6-c-page__main-breadcrumb .pf-v6-c-page__main-body {
-  padding-inline-start: 0;
-  padding-inline-end: 0;
-}
-.pf-v6-c-page__main-tabs .pf-v6-c-page__main-body {
-  padding-inline-start: var(--pf-v6-c-page__main-tabs--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-page__main-tabs--PaddingInlineEnd);
-}
-
 .pf-v6-c-page__drawer {
   grid-area: main;
 }

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

@@ -50,8 +50,6 @@ declare const _default: {
   "pageMainContainer": "pf-v6-c-page__main-container",
   "pageMainDrawer": "pf-v6-c-page__main-drawer",
   "pageMainGroup": "pf-v6-c-page__main-group",
-  "pageMainList": "pf-v6-c-page__main-list",
-  "pageMainNav": "pf-v6-c-page__main-nav",
   "pageMainSection": "pf-v6-c-page__main-section",
   "pageMainSubnav": "pf-v6-c-page__main-subnav",
   "pageMainTabs": "pf-v6-c-page__main-tabs",

package/css/components/Page/page.js

@@ -52,8 +52,6 @@ exports.default = {
   "pageMainContainer": "pf-v6-c-page__main-container",
   "pageMainDrawer": "pf-v6-c-page__main-drawer",
   "pageMainGroup": "pf-v6-c-page__main-group",
-  "pageMainList": "pf-v6-c-page__main-list",
-  "pageMainNav": "pf-v6-c-page__main-nav",
   "pageMainSection": "pf-v6-c-page__main-section",
   "pageMainSubnav": "pf-v6-c-page__main-subnav",
   "pageMainTabs": "pf-v6-c-page__main-tabs",

package/css/components/Page/page.mjs

@@ -50,8 +50,6 @@ export default {
   "pageMainContainer": "pf-v6-c-page__main-container",
   "pageMainDrawer": "pf-v6-c-page__main-drawer",
   "pageMainGroup": "pf-v6-c-page__main-group",
-  "pageMainList": "pf-v6-c-page__main-list",
-  "pageMainNav": "pf-v6-c-page__main-nav",
   "pageMainSection": "pf-v6-c-page__main-section",
   "pageMainSubnav": "pf-v6-c-page__main-subnav",
   "pageMainTabs": "pf-v6-c-page__main-tabs",