@patternfly/patternfly 6.0.0-alpha.103 → 6.0.0-alpha.104

package/components/Drawer/drawer.css

@@ -3,7 +3,8 @@
   --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__content--FlexBasis: 100%;
-  --pf-v6-c-drawer__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-drawer__content--BackgroundColor: transparent;
+  --pf-v6-c-drawer__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--Zindex--xs);
   --pf-v6-c-drawer__panel--MinWidth: 50%;
@@ -204,12 +205,12 @@
   order: 0;
   background-color: var(--pf-v6-c-drawer__content--BackgroundColor);
 }
+.pf-v6-c-drawer__content.pf-m-primary {
+  --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-primary--BackgroundColor);
+}
 .pf-v6-c-drawer__content.pf-m-secondary {
   --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-secondary--BackgroundColor);
 }
-.pf-v6-c-drawer__content.pf-m-no-background {
-  --pf-v6-c-drawer__content--BackgroundColor: transparent;
-}
 .pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
   padding-block-start: var(--pf-v6-c-drawer__content__body--PaddingTop);
   padding-block-end: var(--pf-v6-c-drawer__content__body--PaddingBottom);

package/components/Drawer/drawer.scss

@@ -11,7 +11,8 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
   // Content
   --#{$drawer}__content--FlexBasis: 100%;
-  --#{$drawer}__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$drawer}__content--BackgroundColor: transparent;
+  --#{$drawer}__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$drawer}__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$drawer}__content--ZIndex: var(--pf-t--global--Zindex--xs);
 
@@ -266,14 +267,14 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   order: 0;
   background-color: var(--#{$drawer}__content--BackgroundColor);
   
-  &.pf-m-secondary {
-    --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-secondary--BackgroundColor);
+  &.pf-m-primary {
+    --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-primary--BackgroundColor);
   }
 
-  &.pf-m-no-background {
-    --#{$drawer}__content--BackgroundColor: transparent;
+  &.pf-m-secondary {
+    --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-secondary--BackgroundColor);
   }
-
+  
   > .#{$drawer}__body {
     padding-block-start: var(--#{$drawer}__content__body--PaddingTop);
     padding-block-end: var(--#{$drawer}__content__body--PaddingBottom);

package/components/Page/page.css

@@ -121,19 +121,19 @@
   --pf-v6-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
   --pf-v6-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-page__main--ZIndex: var(--pf-v6-global--ZIndex--xs);
-  --pf-v6-c-page__main--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
-  --pf-v6-c-page__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-page__main--MarginInlineStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page__main--MarginInlineEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page__main--BorderRadius: var(--pf-t--global--border--radius--large);
-  --pf-v6-c-page__main--BorderWidth: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-page__main--BorderColor: var(--pf-v6-c-page__main--BackgroundColor);
+  --pf-v6-c-page__main-container--ZIndex: var(--pf-v6-global--ZIndex--xs);
+  --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--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);
   --pf-v6-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
   --pf-v6-c-page__main-section--PaddingBottom: 0;
-  --pf-v6-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
+  --pf-v6-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
   --pf-v6-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
   --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);
@@ -161,9 +161,9 @@
   --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
   --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
   --pf-v6-c-page__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
+  --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
   --pf-v6-c-page__main-breadcrumb--PaddingBottom: 0;
-  --pf-v6-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
+  --pf-v6-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
   --pf-v6-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-tabs--PaddingTop: 0;
   --pf-v6-c-page__main-tabs--PaddingRight: 0;
@@ -209,7 +209,7 @@
 }
 @media (min-width: 1200px) {
   .pf-v6-c-page {
-    grid-template-areas: "header header" "nav main";
+    grid-template-areas: "header header" "sidebar main";
     grid-template-columns: max-content 1fr;
   }
 }
@@ -321,7 +321,7 @@
   z-index: var(--pf-v6-c-page__sidebar--ZIndex);
   display: flex;
   flex-direction: column;
-  grid-area: nav;
+  grid-area: sidebar;
   grid-row-start: 2;
   grid-column-start: 1;
   width: var(--pf-v6-c-page__sidebar--Width);
@@ -633,26 +633,27 @@
   }
 }
 
-.pf-v6-c-page__main {
+.pf-v6-c-page__main-container {
   align-self: start;
-  max-height: var(--pf-v6-c-page__main--MaxHeight);
+  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
   margin-block-start: 0;
-  margin-inline-start: var(--pf-v6-c-page__main--MarginInlineStart);
-  margin-inline-end: var(--pf-v6-c-page__main--MarginInlineEnd);
-  background: var(--pf-v6-c-page__main--BackgroundColor);
-  border: var(--pf-v6-c-page__main--BorderWidth) solid var(--pf-v6-c-page__main--BorderColor);
-  border-radius: var(--pf-v6-c-page__main--BorderRadius);
+  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,
+.pf-v6-c-page__main-container,
 .pf-v6-c-page__drawer {
-  z-index: var(--pf-v6-c-page__main--ZIndex);
+  z-index: var(--pf-v6-c-page__main-container--ZIndex);
   grid-area: main;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
-.pf-v6-c-page__main:focus,
+.pf-v6-c-page__main-container:focus,
 .pf-v6-c-page__drawer:focus {
   outline: 0;
 }

package/components/Page/page.scss

@@ -104,22 +104,22 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     --#{$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-global}--ZIndex--xs);
+  --#{$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(--pf-t--global--spacer--lg);
+  --#{$page}__main-container--MarginInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$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-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
   --#{$page}__main-breadcrumb--main-section--PaddingTop: 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);
@@ -159,9 +159,9 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   // 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--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--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--PaddingLeft: 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
@@ -192,7 +192,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   @media (min-width: $pf-v5-global--breakpoint--xl) {
     grid-template-areas:
       "header header"
-      "nav main";
+      "sidebar main";
     grid-template-columns: max-content 1fr;
     }
 }
@@ -316,7 +316,7 @@ $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);
@@ -492,20 +492,21 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 // Main & Drawer
-.#{$page}__main {
+.#{$page}__main-container {
   align-self: start;
-  max-height: var(--#{$page}__main--MaxHeight);
+  max-height: var(--#{$page}__main-container--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);
+  margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
+  margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
+  overflow: auto;
+  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);
+  z-index: var(--#{$page}__main-container--ZIndex);
   grid-area: main;
   overflow-x: hidden;
   overflow-y: auto;

package/docs/components/Drawer/examples/Drawer.md

@@ -775,7 +775,8 @@ cssPrefix: pf-v6-c-drawer
 | `.pf-m-no-border` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
 | `.pf-m-padding` | `.pf-v6-c-drawer__body` | Modifies the element to add padding. |
 | `.pf-m-no-padding` | `.pf-v6-c-drawer__body` | Modifies the element to remove padding. |
-| `.pf-m-no-background` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` | Modifies the drawer element background color to transparent. |
+| `.pf-m-no-background` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__panel` | Modifies the drawer element background color to transparent. |
+| `.pf-m-primary` | `.pf-v6-c-drawer__content` | Modifies the drawer content to use the primary background color. |
 | `.pf-m-secondary` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` | Modifies the drawer element to use the secondary background color. |
 | `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-resizable` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-v6-c-drawer__splitter` element. |

package/docs/components/Page/deprecated/PageHeader.md

@@ -21,27 +21,29 @@ deprecated: true
   <div class="pf-v6-c-page__sidebar">
     <div class="pf-v6-c-page__sidebar-body">Navigation</div>
   </div>
-  <main class="pf-v6-c-page__main" tabindex="-1">
-    <section class="pf-v6-c-page__main-section pf-m-dark-100">
-      This
-      <code>.pf-v6-c-page__main-section</code> uses
-      <code>.pf-m-dark-100</code>.
-    </section>
-    <section class="pf-v6-c-page__main-section pf-m-dark-200">
-      This
-      <code>.pf-v6-c-page__main-section</code> uses
-      <code>.pf-m-dark-200</code>.
-    </section>
-    <section class="pf-v6-c-page__main-section pf-m-light">
-      This
-      <code>.pf-v6-c-page__main-section</code> uses
-      <code>.pf-m-light</code>.
-    </section>
-    <section class="pf-v6-c-page__main-section">
-      This is a default
-      <code>.pf-v6-c-page__main-section</code>.
-    </section>
-  </main>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section class="pf-v6-c-page__main-section pf-m-dark-100">
+        This
+        <code>.pf-v6-c-page__main-section</code> uses
+        <code>.pf-m-dark-100</code>.
+      </section>
+      <section class="pf-v6-c-page__main-section pf-m-dark-200">
+        This
+        <code>.pf-v6-c-page__main-section</code> uses
+        <code>.pf-m-dark-200</code>.
+      </section>
+      <section class="pf-v6-c-page__main-section pf-m-light">
+        This
+        <code>.pf-v6-c-page__main-section</code> uses
+        <code>.pf-m-light</code>.
+      </section>
+      <section class="pf-v6-c-page__main-section">
+        This is a default
+        <code>.pf-v6-c-page__main-section</code>.
+      </section>
+    </main>
+  </div>
 </div>
 
 ```
@@ -57,12 +59,14 @@ deprecated: true
     <div class="pf-v6-c-page__header-nav">Navigation</div>
     <div class="pf-v6-c-page__header-tools">header-tools</div>
   </header>
-  <main class="pf-v6-c-page__main" tabindex="-1">
-    <section class="pf-v6-c-page__main-section pf-m-dark-100"></section>
-    <section class="pf-v6-c-page__main-section pf-m-dark-200"></section>
-    <section class="pf-v6-c-page__main-section pf-m-light"></section>
-    <section class="pf-v6-c-page__main-section"></section>
-  </main>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section class="pf-v6-c-page__main-section pf-m-dark-100"></section>
+      <section class="pf-v6-c-page__main-section pf-m-dark-200"></section>
+      <section class="pf-v6-c-page__main-section pf-m-light"></section>
+      <section class="pf-v6-c-page__main-section"></section>
+    </main>
+  </div>
 </div>
 
 ```
@@ -85,9 +89,11 @@ deprecated: true
     >inset content</div>
     <div class="pf-v6-c-page__sidebar-body pf-m-page-insets">footer content</div>
   </div>
-  <main class="pf-v6-c-page__main" tabindex="-1">
-    <section class="pf-v6-c-page__main-section pf-m-light"></section>
-  </main>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section class="pf-v6-c-page__main-section pf-m-light"></section>
+    </main>
+  </div>
 </div>
 
 ```
@@ -103,19 +109,21 @@ deprecated: true
     <div class="pf-v6-c-page__header-nav">Navigation</div>
     <div class="pf-v6-c-page__header-tools">header-tools</div>
   </header>
-  <main class="pf-v6-c-page__main" tabindex="-1">
-    <section
-      class="pf-v6-c-page__main-section pf-m-light"
-    >A regular page section.</section>
-    <section class="pf-v6-c-page__main-section pf-m-fill">
-      This section uses
-      <code>.pf-m-fill</code> to fill the available space.
-    </section>
-    <section class="pf-v6-c-page__main-section pf-m-light pf-m-no-fill">
-      This section uses
-      <code>.pf-m-no-fill</code> to not fill the available space.
-    </section>
-  </main>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section
+        class="pf-v6-c-page__main-section pf-m-light"
+      >A regular page section.</section>
+      <section class="pf-v6-c-page__main-section pf-m-fill">
+        This section uses
+        <code>.pf-m-fill</code> to fill the available space.
+      </section>
+      <section class="pf-v6-c-page__main-section pf-m-light pf-m-no-fill">
+        This section uses
+        <code>.pf-m-no-fill</code> to not fill the available space.
+      </section>
+    </main>
+  </div>
 </div>
 
 ```
@@ -134,25 +142,27 @@ deprecated: true
   <div class="pf-v6-c-page__sidebar">
     <div class="pf-v6-c-page__sidebar-body">Navigation</div>
   </div>
-  <main class="pf-v6-c-page__main" tabindex="-1">
-    <section class="pf-v6-c-page__main-section">
-      This
-      <code>.pf-v6-c-page__main-section</code> has default padding.
-    </section>
-    <section class="pf-v6-c-page__main-section pf-m-no-padding pf-m-light">
-      This
-      <code>.pf-v6-c-page__main-section</code> uses
-      <code>.pf-m-no-padding</code> to remove all padding.
-    </section>
-    <section
-      class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
-    >
-      This
-      <code>.pf-v6-c-page__main-section</code> uses
-      <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
-      <code>md</code> breakpoint.
-    </section>
-  </main>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section class="pf-v6-c-page__main-section">
+        This
+        <code>.pf-v6-c-page__main-section</code> has default padding.
+      </section>
+      <section class="pf-v6-c-page__main-section pf-m-no-padding pf-m-light">
+        This
+        <code>.pf-v6-c-page__main-section</code> uses
+        <code>.pf-m-no-padding</code> to remove all padding.
+      </section>
+      <section
+        class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
+      >
+        This
+        <code>.pf-v6-c-page__main-section</code> uses
+        <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
+        <code>md</code> breakpoint.
+      </section>
+    </main>
+  </div>
 </div>
 
 ```
@@ -171,29 +181,31 @@ deprecated: true
   <div class="pf-v6-c-page__sidebar">
     <div class="pf-v6-c-page__sidebar-body">Navigation</div>
   </div>
-  <main class="pf-v6-c-page__main" tabindex="-1">
-    <section class="pf-v6-c-page__main-subnav">
-      <code>.pf-v6-c-page__main-subnav</code> for horizontal subnav navigation
-    </section>
-    <section class="pf-v6-c-page__main-nav">
-      <code>.pf-v6-c-page__main-nav</code> for tertiary navigation
-    </section>
-    <section class="pf-v6-c-page__main-tabs">
-      <code>.pf-v6-c-page__main-tabs</code> for tabs
-    </section>
-    <div class="pf-v6-c-page__main-group">
-      <code>.pf-v6-c-page__main-group</code> for a group of page sections
-    </div>
-    <section class="pf-v6-c-page__main-breadcrumb">
-      <code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
-    </section>
-    <section class="pf-v6-c-page__main-section">
-      <code>.pf-v6-c-page__main-section</code> for main sections
-    </section>
-    <section class="pf-v6-c-page__main-wizard">
-      <code>.pf-v6-c-page__main-wizard</code> for wizards
-    </section>
-  </main>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section class="pf-v6-c-page__main-subnav">
+        <code>.pf-v6-c-page__main-subnav</code> for horizontal subnav navigation
+      </section>
+      <section class="pf-v6-c-page__main-nav">
+        <code>.pf-v6-c-page__main-nav</code> for tertiary navigation
+      </section>
+      <section class="pf-v6-c-page__main-tabs">
+        <code>.pf-v6-c-page__main-tabs</code> for tabs
+      </section>
+      <div class="pf-v6-c-page__main-group">
+        <code>.pf-v6-c-page__main-group</code> for a group of page sections
+      </div>
+      <section class="pf-v6-c-page__main-breadcrumb">
+        <code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
+      </section>
+      <section class="pf-v6-c-page__main-section">
+        <code>.pf-v6-c-page__main-section</code> for main sections
+      </section>
+      <section class="pf-v6-c-page__main-wizard">
+        <code>.pf-v6-c-page__main-wizard</code> for wizards
+      </section>
+    </main>
+  </div>
 </div>
 
 ```
@@ -209,22 +221,24 @@ deprecated: true
     </div>
     <div class="pf-v6-c-page__header-tools">header-tools</div>
   </header>
-  <main class="pf-v6-c-page__main" tabindex="-1">
-    <section
-      class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
-    >
-      <div class="pf-v6-c-page__main-body">
-        <div class="pf-v6-c-card">
-          <div class="pf-v6-c-card__body">
-            When a width limited page section is wider than the value of
-            <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
-            <br />
-            <br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section
+        class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
+      >
+        <div class="pf-v6-c-page__main-body">
+          <div class="pf-v6-c-card">
+            <div class="pf-v6-c-card__body">
+              When a width limited page section is wider than the value of
+              <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
+              <br />
+              <br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
+            </div>
           </div>
         </div>
-      </div>
-    </section>
-  </main>
+      </section>
+    </main>
+  </div>
 </div>
 
 ```