@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

package/docs/components/OverflowMenu/examples/overflow-menu.css

@@ -1,11 +1,14 @@
 #ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__item,
 #ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__group,
-#ws-core-c-overflow-menu-group-types .pf-v6-c-overflow-menu__group:not([class*="pf-m-"]) {
+#ws-core-c-overflow-menu-group-types .pf-v6-c-overflow-menu__group:not([class*="pf-m-"]),
+#ws-core-c-overflow-menu-vertical .pf-v6-c-overflow-menu__item,
+#ws-core-c-overflow-menu-vertical .pf-v6-c-overflow-menu__group {
   padding: .5rem;
   border: 2px dashed #393f44;
 }
 
-#ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__group .pf-v6-c-overflow-menu__item {
+#ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__group .pf-v6-c-overflow-menu__item,
+#ws-core-c-overflow-menu-vertical .pf-v6-c-overflow-menu__group .pf-v6-c-overflow-menu__item {
   padding: 0;
   border: none;
-}
+}

package/docs/components/OverflowMenu/examples/overflow-menu.md

@@ -23,7 +23,19 @@ The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (
       id="overflow-menu-simple-toggle"
     >
       <span class="pf-v6-c-menu-toggle__icon">
-        <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 32 32"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -48,6 +60,26 @@ The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (
 
 ```
 
+### Vertical
+
+```html isBeta
+<div
+  class="pf-v6-c-overflow-menu pf-m-vertical"
+  id="overflow-menu-vertical-expanded"
+>
+  <div class="pf-v6-c-overflow-menu__content">
+    <div class="pf-v6-c-overflow-menu__item">Item 1</div>
+    <div class="pf-v6-c-overflow-menu__item">Item 2</div>
+    <div class="pf-v6-c-overflow-menu__group">
+      <div class="pf-v6-c-overflow-menu__item">Item 3</div>
+      <div class="pf-v6-c-overflow-menu__item">Item 4</div>
+      <div class="pf-v6-c-overflow-menu__item">Item 5</div>
+    </div>
+  </div>
+</div>
+
+```
+
 ### Default spacing for items and groups:
 
 | Class | CSS Variable | Computed Value |
@@ -100,7 +132,19 @@ The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (
           aria-label="Align left"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-align-left" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.83 352h262.34A12.82 12.82 0 0 0 288 339.17v-38.34A12.82 12.82 0 0 0 275.17 288H12.83A12.82 12.82 0 0 0 0 300.83v38.34A12.82 12.82 0 0 0 12.83 352zm0-256h262.34A12.82 12.82 0 0 0 288 83.17V44.83A12.82 12.82 0 0 0 275.17 32H12.83A12.82 12.82 0 0 0 0 44.83v38.34A12.82 12.82 0 0 0 12.83 96zM432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -111,7 +155,19 @@ The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (
           aria-label="Align center"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-align-center" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM108.1 96h231.81A12.09 12.09 0 0 0 352 83.9V44.09A12.09 12.09 0 0 0 339.91 32H108.1A12.09 12.09 0 0 0 96 44.09V83.9A12.1 12.1 0 0 0 108.1 96zm231.81 256A12.09 12.09 0 0 0 352 339.9v-39.81A12.09 12.09 0 0 0 339.91 288H108.1A12.09 12.09 0 0 0 96 300.09v39.81a12.1 12.1 0 0 0 12.1 12.1z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -122,7 +178,19 @@ The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (
           aria-label="Align right"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-align-right" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M16 224h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm416 192H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-384H172.83A12.82 12.82 0 0 0 160 44.83v38.34A12.82 12.82 0 0 0 172.83 96h262.34A12.82 12.82 0 0 0 448 83.17V44.83A12.82 12.82 0 0 0 435.17 32zm0 256H172.83A12.82 12.82 0 0 0 160 300.83v38.34A12.82 12.82 0 0 0 172.83 352h262.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -158,7 +226,19 @@ The action group consists of a primary and secondary action. Any additional acti
       id="overflow-menu-simple-additional-options-hidden-toggle"
     >
       <span class="pf-v6-c-menu-toggle__icon">
-        <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 32 32"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -199,7 +279,19 @@ The action group consists of a primary and secondary action. Any additional acti
           aria-label="Align left"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-align-left" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.83 352h262.34A12.82 12.82 0 0 0 288 339.17v-38.34A12.82 12.82 0 0 0 275.17 288H12.83A12.82 12.82 0 0 0 0 300.83v38.34A12.82 12.82 0 0 0 12.83 352zm0-256h262.34A12.82 12.82 0 0 0 288 83.17V44.83A12.82 12.82 0 0 0 275.17 32H12.83A12.82 12.82 0 0 0 0 44.83v38.34A12.82 12.82 0 0 0 12.83 96zM432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -210,7 +302,19 @@ The action group consists of a primary and secondary action. Any additional acti
           aria-label="Align center"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-align-center" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM108.1 96h231.81A12.09 12.09 0 0 0 352 83.9V44.09A12.09 12.09 0 0 0 339.91 32H108.1A12.09 12.09 0 0 0 96 44.09V83.9A12.1 12.1 0 0 0 108.1 96zm231.81 256A12.09 12.09 0 0 0 352 339.9v-39.81A12.09 12.09 0 0 0 339.91 288H108.1A12.09 12.09 0 0 0 96 300.09v39.81a12.1 12.1 0 0 0 12.1 12.1z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -221,7 +325,19 @@ The action group consists of a primary and secondary action. Any additional acti
           aria-label="Align right"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-align-right" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M16 224h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm416 192H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-384H172.83A12.82 12.82 0 0 0 160 44.83v38.34A12.82 12.82 0 0 0 172.83 96h262.34A12.82 12.82 0 0 0 448 83.17V44.83A12.82 12.82 0 0 0 435.17 32zm0 256H172.83A12.82 12.82 0 0 0 160 300.83v38.34A12.82 12.82 0 0 0 172.83 352h262.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -236,7 +352,19 @@ The action group consists of a primary and secondary action. Any additional acti
       id="overflow-menu-simple-additional-options-visible-toggle"
     >
       <span class="pf-v6-c-menu-toggle__icon">
-        <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 32 32"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -268,7 +396,19 @@ The action group consists of a primary and secondary action. Any additional acti
       id="overflow-menu-persistent-hidden-toggle"
     >
       <span class="pf-v6-c-menu-toggle__icon">
-        <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 32 32"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -311,7 +451,19 @@ The action group consists of a primary and secondary action. Any additional acti
       id="overflow-menu-persistent-visible-example-toggle"
     >
       <span class="pf-v6-c-menu-toggle__icon">
-        <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 32 32"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -328,5 +480,6 @@ The action group consists of a primary and secondary action. Any additional acti
 | `.pf-v6-c-overflow-menu__control` | `<div>` | Initiates the overflow menu control. **Required** |
 | `.pf-v6-c-overflow-menu__group` | `<div>` | Initiates an overflow menu group. |
 | `.pf-v6-c-overflow-menu__item` | `<div>` | Initiates an overflow menu item. **Required** |
+| `.pf-m-vertical` | `.pf-v6-c-overflow-menu` | Modifies the flex direction to "column", for vertically aligned overflow menus. |
 | `.pf-m-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--spacer)`. Child spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--space-items)`. |
 | `.pf-m-icon-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--spacer)`. Child spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--space-items)`. |

package/docs/components/Page/examples/Page.md

@@ -52,30 +52,44 @@ wrapperTag: div
     </div>
   </header>
   <div class="pf-v6-c-page__sidebar">
-    <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    <div class="pf-v6-c-page__sidebar-main">
+      <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    </div>
   </div>
   <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">
+      <section
+        class="pf-v6-c-page__main-section"
+        aria-label="Default main section example 1"
+      >
         <div class="pf-v6-c-page__main-body">
           This is a default
           <code>.pf-v6-c-page__main-section</code>.
         </div>
       </section>
-      <section class="pf-v6-c-page__main-section pf-m-secondary">
+      <section
+        class="pf-v6-c-page__main-section pf-m-secondary"
+        aria-label="Secondary main section example 1"
+      >
         <div class="pf-v6-c-page__main-body">
           This
           <code>.pf-v6-c-page__main-section</code> uses
           <code>.pf-m-secondary</code>.
         </div>
       </section>
-      <section class="pf-v6-c-page__main-section">
+      <section
+        class="pf-v6-c-page__main-section"
+        aria-label="Default main section example 2"
+      >
         <div class="pf-v6-c-page__main-body">
           This is a default
           <code>.pf-v6-c-page__main-section</code>.
         </div>
       </section>
-      <section class="pf-v6-c-page__main-section pf-m-secondary">
+      <section
+        class="pf-v6-c-page__main-section pf-m-secondary"
+        aria-label="Multiple main body section example"
+      >
         <div
           class="pf-v6-c-page__main-body"
         >This is a page__main-body, one of three within one page__main-section.</div>
@@ -138,20 +152,29 @@ wrapperTag: div
   </header>
   <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">
+      <section
+        class="pf-v6-c-page__main-section"
+        aria-label="Horizontal nav default main section example 1"
+      >
         <div class="pf-v6-c-page__main-body">
           This is a default
           <code>.pf-v6-c-page__main-section</code>.
         </div>
       </section>
-      <section class="pf-v6-c-page__main-section pf-m-secondary">
+      <section
+        class="pf-v6-c-page__main-section pf-m-secondary"
+        aria-label="Horizontal nav secondary main section example"
+      >
         <div class="pf-v6-c-page__main-body">
           This
           <code>.pf-v6-c-page__main-section</code> uses
           <code>.pf-m-secondary</code>.
         </div>
       </section>
-      <section class="pf-v6-c-page__main-section">
+      <section
+        class="pf-v6-c-page__main-section"
+        aria-label="Horizontal nav default main section example 2"
+      >
         <div class="pf-v6-c-page__main-body">
           This is a default
           <code>.pf-v6-c-page__main-section</code>.
@@ -208,16 +231,21 @@ wrapperTag: div
     </div>
   </header>
   <div class="pf-v6-c-page__sidebar">
-    <div class="pf-v6-c-page__sidebar-body">Navigation</div>
-    <div class="pf-v6-c-page__sidebar-body pf-m-fill">inset content</div>
-    <div
-      class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-inset-none"
-    >content that is not inset</div>
-    <div class="pf-v6-c-page__sidebar-body pf-m-no-fill">footer content</div>
+    <div class="pf-v6-c-page__sidebar-main">
+      <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+      <div class="pf-v6-c-page__sidebar-body pf-m-fill">inset content</div>
+      <div
+        class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-inset-none"
+      >content that is not inset</div>
+      <div class="pf-v6-c-page__sidebar-body pf-m-no-fill">footer content</div>
+    </div>
   </div>
   <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">
+      <section
+        class="pf-v6-c-page__main-section"
+        aria-label="Sidebar body layout section"
+      >
         <div class="pf-v6-c-page__main-body"></div>
       </section>
     </main>
@@ -272,10 +300,16 @@ wrapperTag: div
   </header>
   <div class="pf-v6-c-page__main-container pf-m-fill" tabindex="-1">
     <main class="pf-v6-c-page__main" tabindex="-1">
-      <section class="pf-v6-c-page__main-section">
+      <section
+        class="pf-v6-c-page__main-section"
+        aria-label="Regular page section example"
+      >
         <div class="pf-v6-c-page__main-body">A regular page section.</div>
       </section>
-      <section class="pf-v6-c-page__main-section pf-m-fill">
+      <section
+        class="pf-v6-c-page__main-section pf-m-fill"
+        aria-label="Fill page section example"
+      >
         <div class="pf-v6-c-page__main-body">
           This section uses
           <code>.pf-m-fill</code> to fill the available space. The
@@ -283,7 +317,10 @@ wrapperTag: div
           <code>.pf-m-fill</code> in order for the section to have space to stretch to full height.
         </div>
       </section>
-      <section class="pf-v6-c-page__main-section pf-m-no-fill">
+      <section
+        class="pf-v6-c-page__main-section pf-m-no-fill"
+        aria-label="No fill page section example"
+      >
         <div class="pf-v6-c-page__main-body">
           This section uses
           <code>.pf-m-no-fill</code> and will not fill the available space.
@@ -340,17 +377,25 @@ wrapperTag: div
     </div>
   </header>
   <div class="pf-v6-c-page__sidebar">
-    <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    <div class="pf-v6-c-page__sidebar-main">
+      <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    </div>
   </div>
   <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">
+      <section
+        class="pf-v6-c-page__main-section"
+        aria-label="Default padding main section example"
+      >
         <div class="pf-v6-c-page__main-body">
           This
           <code>.pf-v6-c-page__main-section</code> has default padding.
         </div>
       </section>
-      <section class="pf-v6-c-page__main-section pf-m-no-padding">
+      <section
+        class="pf-v6-c-page__main-section pf-m-no-padding"
+        aria-label="No padding main section example"
+      >
         <div class="pf-v6-c-page__main-body">
           This
           <code>.pf-v6-c-page__main-section</code> uses
@@ -359,6 +404,7 @@ wrapperTag: div
       </section>
       <section
         class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
+        aria-label="Responsive padding main section example"
       >
         <div class="pf-v6-c-page__main-body">
           This
@@ -418,7 +464,9 @@ wrapperTag: div
     </div>
   </header>
   <div class="pf-v6-c-page__sidebar">
-    <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    <div class="pf-v6-c-page__sidebar-main">
+      <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    </div>
   </div>
   <div class="pf-v6-c-page__main-container" tabindex="-1">
     <main class="pf-v6-c-page__main" tabindex="-1">
@@ -434,7 +482,10 @@ wrapperTag: 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">
+      <section
+        class="pf-v6-c-page__main-section"
+        aria-label="Main section variations example"
+      >
         <div class="pf-v6-c-page__main-body">
           <code>.pf-v6-c-page__main-section</code> for main sections
         </div>
@@ -496,6 +547,7 @@ wrapperTag: div
     <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"
+        aria-label="Centered section example"
       >
         <div class="pf-v6-c-page__main-body">
           <div class="pf-v6-c-card">
@@ -514,6 +566,133 @@ wrapperTag: div
 
 ```
 
+### With dock
+
+```html isBeta
+<div class="pf-v6-c-page pf-m-docked">
+  <div class="pf-v6-c-page__dock">
+    <div class="pf-v6-c-page__dock-main">
+      <header class="pf-v6-c-masthead pf-m-docked">
+        <div class="pf-v6-c-masthead__main">
+          <div class="pf-v6-c-masthead__brand">logo</div>
+        </div>
+        <div class="pf-v6-c-masthead__content">
+          <button
+            class="pf-v6-c-button pf-m-plain"
+            type="button"
+            aria-label="Chat"
+          >
+            <span class="pf-v6-c-button__icon">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 512 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </header>
+    </div>
+  </div>
+  <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"
+        aria-label="Dock main section example"
+      >
+        <div class="pf-v6-c-page__main-body">
+          This is a default
+          <code>.pf-v6-c-page__main-section</code>.
+        </div>
+      </section>
+    </main>
+  </div>
+</div>
+
+```
+
+### Sticky section dynamic
+
+```html
+<div class="pf-v6-c-page">
+  <header class="pf-v6-c-masthead">
+    <div class="pf-v6-c-masthead__main">
+      <span class="pf-v6-c-masthead__toggle">
+        <button
+          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
+          type="button"
+          aria-label="Global navigation"
+        >
+          <span class="pf-v6-c-button__icon">
+            <svg
+              viewBox="0 0 10 10"
+              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+              width="1em"
+              height="1em"
+            >
+              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+              <path
+                class="pf-v6-c-button--hamburger-icon--middle"
+                d="M1,5 L9,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--arrow"
+                d="M1,5 L1,5 L1,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--bottom"
+                d="M9,9 L1,9"
+              />
+            </svg>
+          </span>
+        </button>
+      </span>
+      <div class="pf-v6-c-masthead__brand">
+        <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
+      </div>
+    </div>
+    <div class="pf-v6-c-masthead__content">
+      <span>Content</span>
+    </div>
+  </header>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <div
+        class="pf-v6-c-page__main-group pf-m-sticky-top-base pf-m-sticky-top-stuck"
+      >
+        <section class="pf-v6-c-page__main-breadcrumb">Breadcrumb</section>
+        <section
+          class="pf-v6-c-page__main-section"
+          aria-label="Sticky dynamic section title"
+        >
+          <div class="pf-v6-c-page__main-body">
+            This
+            <code>.pf-v6-c-page__main-group</code> uses
+            <code>.pf-m-sticky-top-base</code> and
+            <code>.pf-m-sticky-top-stuck</code> for dynamic sticky positioning with a fade-in background and shadow.
+          </div>
+        </section>
+      </div>
+      <section
+        class="pf-v6-c-page__main-section"
+        aria-label="Sticky dynamic content section"
+      >
+        <div class="pf-v6-c-page__main-body">Content below the sticky section.</div>
+      </section>
+    </main>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -545,20 +724,27 @@ This component provides the basic chrome for a page, including sidebar and main
 | `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required** |
 | `.pf-v6-c-page__main-group` | `<div>` | Creates the group of `.pf-v6-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
 | `.pf-v6-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
+| `.pf-m-docked` | `.pf-v6-c-page` | Modifies the page grid to have a dock. |
 | `.pf-m-no-sidebar` | `.pf-v6-c-page` | Modifies the page grid for layouts without a sidebar. |
 | `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |
 | `.pf-m-collapsed` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the collapsed state. |
 | `.pf-m-page-insets` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |
 | `.pf-m-context-selector` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body to contain a context selector. |
 | `.pf-m-inset-none` | `.pf-v6-c-page__sidebar-body` | Removes a sidebar body left/right inset. |
-| `.pf-m-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/tokens/all-patternfly-tokens). Should be used with pf-m-no-padding. |
-| `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). Should be used with pf-m-no-padding. |
+| `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 | `.pf-m-fill` | `.pf-v6-c-page__main-container`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element to grow to fill the available space. Note that `.pf-v6-c-page__main-container` must also have `.pf-m-fill` applied in order for the section to have space to stretch to full height.|
 | `.pf-m-no-fill` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element not to grow to fill the available vertical space. |
+| `.pf-m-plain` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__main-breadcrumb`, `.pf-v6-c-page__main-subnav`, and `.pf-v6-c-page__main-tabs` | Applies plain styling to the section. |
+| `.pf-m-no-plain-on-glass` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__main-breadcrumb`, `.pf-v6-c-page__main-subnav`, and `.pf-v6-c-page__main-tabs` | Prevents the section from automatically applying plain styling when glass theme is enabled. |
 | `.pf-m-limit-width` | `.pf-v6-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
 | `.pf-m-align-center` | `.pf-v6-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
 | `.pf-m-sticky-top{-on-[breakpoint]-height}` | `.pf-v6-c-page__main-*` | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint. |
 | `.pf-m-sticky-bottom{-on-[breakpoint]-height}` | `.pf-v6-c-page__main-*` | Modifies a section/group to be sticky to the bottom of its container at an optional height breakpoint. |
+| `.pf-m-sticky-top-base` | `.pf-v6-c-page__main-*` | Sets up dynamic sticky top positioning with no background or shadow. Used with `.pf-m-sticky-top-stuck`. |
+| `.pf-m-sticky-top-stuck` | `.pf-v6-c-page__main-*` | Triggers the sticky top stuck state, fading in the background and shadow. Apply via JS when the section becomes stuck. |
+| `.pf-m-sticky-bottom-base` | `.pf-v6-c-page__main-*` | Sets up dynamic sticky bottom positioning with no background or shadow. Used with `.pf-m-sticky-bottom-stuck`. |
+| `.pf-m-sticky-bottom-stuck` | `.pf-v6-c-page__main-*` | Triggers the sticky bottom stuck state, fading in the background and shadow. Apply via JS when the section becomes stuck. |
 | `.pf-m-shadow-bottom` | `.pf-v6-c-page__main-*` | Modifies a section/group to have a bottom shadow. |
 | `.pf-m-shadow-top` | `.pf-v6-c-page__main-*` | Modifies a section/group to have a top shadow. |
 | `.pf-m-overflow-scroll` | `.pf-v6-c-page__main-*` | Modifies a section/group to show a scrollbar if it has overflow content. |