@patternfly/patternfly 6.5.0-prerelease.4 → 6.5.0-prerelease.41

package/docs/demos/Toolbar/examples/Toolbar.md

@@ -185,7 +185,7 @@ section: components
   </div>
   <header
     class="pf-v6-c-masthead"
-    id="toolbar-pagination-management-example-masthead"
+    id="toolbar-pagination-management-example-docked"
   >
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
@@ -228,7 +228,7 @@ section: components
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-toolbar-pagination-management-example-masthead"
+                id="linearGradient-toolbar-pagination-management-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -282,11 +282,11 @@ section: components
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
+                  fill="url(#linearGradient-toolbar-pagination-management-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
+                  fill="url(#linearGradient-toolbar-pagination-management-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -298,7 +298,7 @@ section: components
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="toolbar-pagination-management-example-masthead-toolbar"
+        id="toolbar-pagination-management-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -2480,7 +2480,7 @@ section: components
   </div>
   <header
     class="pf-v6-c-masthead"
-    id="toolbar-pagination-management-example-masthead"
+    id="toolbar-pagination-management-example-docked"
   >
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
@@ -2523,7 +2523,7 @@ section: components
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-toolbar-pagination-management-example-masthead"
+                id="linearGradient-toolbar-pagination-management-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -2577,11 +2577,11 @@ section: components
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
+                  fill="url(#linearGradient-toolbar-pagination-management-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
+                  fill="url(#linearGradient-toolbar-pagination-management-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -2593,7 +2593,7 @@ section: components
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="toolbar-pagination-management-example-masthead-toolbar"
+        id="toolbar-pagination-management-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">

package/docs/demos/Wizard/examples/Wizard.md

@@ -16,7 +16,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="wizard-basic-example-masthead">
+  <header class="pf-v6-c-masthead" id="wizard-basic-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -58,7 +58,7 @@ wrapperTag: div
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-wizard-basic-example-masthead"
+                id="linearGradient-wizard-basic-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -112,11 +112,11 @@ wrapperTag: div
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-wizard-basic-example-masthead)"
+                  fill="url(#linearGradient-wizard-basic-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-wizard-basic-example-masthead)"
+                  fill="url(#linearGradient-wizard-basic-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -128,7 +128,7 @@ wrapperTag: div
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="wizard-basic-example-masthead-toolbar"
+        id="wizard-basic-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -637,7 +637,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="wizard-nav-expanded-example-masthead">
+  <header class="pf-v6-c-masthead" id="wizard-nav-expanded-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -679,7 +679,7 @@ wrapperTag: div
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-wizard-nav-expanded-example-masthead"
+                id="linearGradient-wizard-nav-expanded-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -733,11 +733,11 @@ wrapperTag: div
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-wizard-nav-expanded-example-masthead)"
+                  fill="url(#linearGradient-wizard-nav-expanded-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-wizard-nav-expanded-example-masthead)"
+                  fill="url(#linearGradient-wizard-nav-expanded-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -749,7 +749,7 @@ wrapperTag: div
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="wizard-nav-expanded-example-masthead-toolbar"
+        id="wizard-nav-expanded-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -1239,7 +1239,7 @@ wrapperTag: div
   </div>
   <header
     class="pf-v6-c-masthead"
-    id="wizard-with-drawer-closed-example-masthead"
+    id="wizard-with-drawer-closed-example-docked"
   >
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
@@ -1282,7 +1282,7 @@ wrapperTag: div
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-wizard-with-drawer-closed-example-masthead"
+                id="linearGradient-wizard-with-drawer-closed-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -1336,11 +1336,11 @@ wrapperTag: div
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-wizard-with-drawer-closed-example-masthead)"
+                  fill="url(#linearGradient-wizard-with-drawer-closed-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-wizard-with-drawer-closed-example-masthead)"
+                  fill="url(#linearGradient-wizard-with-drawer-closed-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -1352,7 +1352,7 @@ wrapperTag: div
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="wizard-with-drawer-closed-example-masthead-toolbar"
+        id="wizard-with-drawer-closed-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -1826,26 +1826,25 @@ wrapperTag: div
                     </div>
                   </div>
                   <div class="pf-v6-c-drawer__panel pf-m-width-33" hidden>
-                    <div class="pf-v6-c-drawer__body">
-                      <div class="pf-v6-c-drawer__head">
-                        <h2
-                          class="pf-v6-c-title pf-m-xl"
-                        >Register with Red Hat connector</h2>
-                        <div class="pf-v6-c-drawer__actions">
-                          <div class="pf-v6-c-drawer__close">
-                            <button
-                              class="pf-v6-c-button pf-m-plain"
-                              type="button"
-                              aria-label="Close drawer panel"
-                            >
-                              <span class="pf-v6-c-button__icon">
-                                <i class="fas fa-times" aria-hidden="true"></i>
-                              </span>
-                            </button>
-                          </div>
+                    <div class="pf-v6-c-drawer__head">
+                      <h2
+                        class="pf-v6-c-title pf-m-xl"
+                      >Register with Red Hat connector</h2>
+                      <div class="pf-v6-c-drawer__actions">
+                        <div class="pf-v6-c-drawer__close">
+                          <button
+                            class="pf-v6-c-button pf-m-plain"
+                            type="button"
+                            aria-label="Close drawer panel"
+                          >
+                            <span class="pf-v6-c-button__icon">
+                              <i class="fas fa-times" aria-hidden="true"></i>
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </div>
+                    <div class="pf-v6-c-drawer__body"></div>
                     <div class="pf-v6-c-drawer__body">
                       <div class="pf-v6-c-content">
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.</p>
@@ -1927,7 +1926,7 @@ wrapperTag: div
   </div>
   <header
     class="pf-v6-c-masthead"
-    id="wizard-with-drawer-expanded-example-masthead"
+    id="wizard-with-drawer-expanded-example-docked"
   >
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
@@ -1970,7 +1969,7 @@ wrapperTag: div
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-wizard-with-drawer-expanded-example-masthead"
+                id="linearGradient-wizard-with-drawer-expanded-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -2024,11 +2023,11 @@ wrapperTag: div
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-wizard-with-drawer-expanded-example-masthead)"
+                  fill="url(#linearGradient-wizard-with-drawer-expanded-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-wizard-with-drawer-expanded-example-masthead)"
+                  fill="url(#linearGradient-wizard-with-drawer-expanded-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -2040,7 +2039,7 @@ wrapperTag: div
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="wizard-with-drawer-expanded-example-masthead-toolbar"
+        id="wizard-with-drawer-expanded-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -2514,23 +2513,21 @@ wrapperTag: div
                     </div>
                   </div>
                   <div class="pf-v6-c-drawer__panel pf-m-width-33">
-                    <div class="pf-v6-c-drawer__body">
-                      <div class="pf-v6-c-drawer__head">
-                        <h2
-                          class="pf-v6-c-title pf-m-xl"
-                        >Register with Red Hat connector</h2>
-                        <div class="pf-v6-c-drawer__actions">
-                          <div class="pf-v6-c-drawer__close">
-                            <button
-                              class="pf-v6-c-button pf-m-plain"
-                              type="button"
-                              aria-label="Close drawer panel"
-                            >
-                              <span class="pf-v6-c-button__icon">
-                                <i class="fas fa-times" aria-hidden="true"></i>
-                              </span>
-                            </button>
-                          </div>
+                    <div class="pf-v6-c-drawer__head">
+                      <h2
+                        class="pf-v6-c-title pf-m-xl"
+                      >Register with Red Hat connector</h2>
+                      <div class="pf-v6-c-drawer__actions">
+                        <div class="pf-v6-c-drawer__close">
+                          <button
+                            class="pf-v6-c-button pf-m-plain"
+                            type="button"
+                            aria-label="Close drawer panel"
+                          >
+                            <span class="pf-v6-c-button__icon">
+                              <i class="fas fa-times" aria-hidden="true"></i>
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </div>
@@ -2613,10 +2610,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header
-    class="pf-v6-c-masthead"
-    id="wizard-with-drawer-info-example-masthead"
-  >
+  <header class="pf-v6-c-masthead" id="wizard-with-drawer-info-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -2658,7 +2652,7 @@ wrapperTag: div
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-wizard-with-drawer-info-example-masthead"
+                id="linearGradient-wizard-with-drawer-info-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -2712,11 +2706,11 @@ wrapperTag: div
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-wizard-with-drawer-info-example-masthead)"
+                  fill="url(#linearGradient-wizard-with-drawer-info-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-wizard-with-drawer-info-example-masthead)"
+                  fill="url(#linearGradient-wizard-with-drawer-info-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -2728,7 +2722,7 @@ wrapperTag: div
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="wizard-with-drawer-info-example-masthead-toolbar"
+        id="wizard-with-drawer-info-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -3174,7 +3168,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="wizard-in-page-example-masthead">
+  <header class="pf-v6-c-masthead" id="wizard-in-page-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -3216,7 +3210,7 @@ wrapperTag: div
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-wizard-in-page-example-masthead"
+                id="linearGradient-wizard-in-page-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -3270,11 +3264,11 @@ wrapperTag: div
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-wizard-in-page-example-masthead)"
+                  fill="url(#linearGradient-wizard-in-page-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-wizard-in-page-example-masthead)"
+                  fill="url(#linearGradient-wizard-in-page-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -3286,7 +3280,7 @@ wrapperTag: div
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="wizard-in-page-example-masthead-toolbar"
+        id="wizard-in-page-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -3739,7 +3733,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="in-page-nav-expanded-example-masthead">
+  <header class="pf-v6-c-masthead" id="in-page-nav-expanded-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -3781,7 +3775,7 @@ wrapperTag: div
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-in-page-nav-expanded-example-masthead"
+                id="linearGradient-in-page-nav-expanded-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -3835,11 +3829,11 @@ wrapperTag: div
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-in-page-nav-expanded-example-masthead)"
+                  fill="url(#linearGradient-in-page-nav-expanded-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-in-page-nav-expanded-example-masthead)"
+                  fill="url(#linearGradient-in-page-nav-expanded-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -3851,7 +3845,7 @@ wrapperTag: div
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="in-page-nav-expanded-example-masthead-toolbar"
+        id="in-page-nav-expanded-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -4285,7 +4279,7 @@ wrapperTag: div
   </div>
   <header
     class="pf-v6-c-masthead"
-    id="wizard-with-drawer-in-page-example-masthead"
+    id="wizard-with-drawer-in-page-example-docked"
   >
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
@@ -4328,7 +4322,7 @@ wrapperTag: div
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-wizard-with-drawer-in-page-example-masthead"
+                id="linearGradient-wizard-with-drawer-in-page-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -4382,11 +4376,11 @@ wrapperTag: div
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-wizard-with-drawer-in-page-example-masthead)"
+                  fill="url(#linearGradient-wizard-with-drawer-in-page-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-wizard-with-drawer-in-page-example-masthead)"
+                  fill="url(#linearGradient-wizard-with-drawer-in-page-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -4398,7 +4392,7 @@ wrapperTag: div
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="wizard-with-drawer-in-page-example-masthead-toolbar"
+        id="wizard-with-drawer-in-page-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -4903,7 +4897,7 @@ wrapperTag: div
   </div>
   <header
     class="pf-v6-c-masthead"
-    id="wizard-with-drawer-in-page-expanded-example-masthead"
+    id="wizard-with-drawer-in-page-expanded-example-docked"
   >
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
@@ -4946,7 +4940,7 @@ wrapperTag: div
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-wizard-with-drawer-in-page-expanded-example-masthead"
+                id="linearGradient-wizard-with-drawer-in-page-expanded-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -5000,11 +4994,11 @@ wrapperTag: div
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-masthead)"
+                  fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-masthead)"
+                  fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -5016,7 +5010,7 @@ wrapperTag: div
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="wizard-with-drawer-in-page-expanded-example-masthead-toolbar"
+        id="wizard-with-drawer-in-page-expanded-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">

package/docs/layouts/Bullseye/examples/Bullseye.css

@@ -1,5 +1,5 @@
-.ws-core-l-bullseye .pf-v6-l-bullseye,
-.ws-core-l-bullseye .pf-v6-l-bullseye__item {
+.ws-core-f-bullseye .pf-v6-l-bullseye,
+.ws-core-f-bullseye .pf-v6-l-bullseye__item {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Bullseye/examples/Bullseye.md

@@ -1,6 +1,7 @@
 ---
 id: Bullseye
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-bullseye
 ---import './Bullseye.css'
 

package/docs/layouts/Flex/examples/Flex.css

@@ -1,6 +1,6 @@
-.ws-core-l-flex-border,
-.ws-core-l-flex .pf-v6-l-flex .pf-v6-l-flex,
-.ws-core-l-flex .pf-v6-l-flex__item {
+.ws-core-f-flex-border,
+.ws-core-f-flex .pf-v6-l-flex .pf-v6-l-flex,
+.ws-core-f-flex .pf-v6-l-flex__item {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Flex/examples/Flex.md

@@ -1,6 +1,7 @@
 ---
 id: Flex
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-flex
 ---import './Flex.css'
 
@@ -20,7 +21,7 @@ The flex layout provides two ways of spacing its direct children.
 
 ### Breakpoints
 
-[Breakpoints](/tokens/all-patternfly-tokens) `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl` are provided.
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl` are provided.
 
 ### Usefulness
 

package/docs/layouts/Gallery/examples/Gallery.css

@@ -1,5 +1,5 @@
-.ws-core-l-gallery .pf-v6-l-gallery,
-.ws-core-l-gallery .pf-v6-l-gallery__item {
+.ws-core-f-gallery .pf-v6-l-gallery,
+.ws-core-f-gallery .pf-v6-l-gallery__item {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Gallery/examples/Gallery.md

@@ -1,6 +1,7 @@
 ---
 id: Gallery
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-gallery
 ---import './Gallery.css'
 
@@ -174,5 +175,5 @@ The gallery layout is designed so that all of its children are of uniform size,
 | `.pf-v6-l-gallery` |  `<div>` |  Initializes a Gallery layout |
 | `.pf-v6-l-gallery__item` | `<div>` |  Explicitly sets the child for the gallery. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
 | `.pf-m-gutter` | `.pf-v6-l-gallery` | Adds space between children by using the globally defined gutter value. |
-| `--pf-v6-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the min value of `grid-template-columns` declaration at the optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `--pf-v6-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the max value of `grid-template-columns` declaration at the optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the min value of `grid-template-columns` declaration at the optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `--pf-v6-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the max value of `grid-template-columns` declaration at the optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |

package/docs/layouts/Grid/examples/Grid.css

@@ -1,4 +1,4 @@
-.ws-core-l-grid .pf-v6-l-grid__item {
+.ws-core-f-grid .pf-v6-l-grid__item {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Grid/examples/Grid.md

@@ -1,6 +1,7 @@
 ---
 id: Grid
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-grid
 ---import './Grid.css'
 
@@ -318,7 +319,7 @@ The grid layout is based on CSS Grid’s two-dimensional system of columns and r
 | `.pf-v6-l-grid` | `<div>` | Initializes the grid layout. |
 | `.pf-v6-l-grid__item` | `<div>` | Explicitly sets a child of the grid. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
 | `.pf-m-gutter` | `.pf-v6-l-grid` | Adds space between children by using the globally defined gutter value. |
-| `.pf-m-all-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid` | Defines grid item size on grid container at optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `.pf-m-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item size at optional [breakpoint](/tokens/all-patternfly-tokens).  Although not required, they are strongly suggested. If not used, grid item will default to 12 col. |
-| `.pf-m-{2-x}-row{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item row span at optional [breakpoint](/tokens/all-patternfly-tokens).  For row spans to function correctly, the value of of the current row plus the grid items to span must be equal to or less than 12. Example: `.pf-m-8-col.pf-m-2-row` + `.pf-m-4-col` + `.pf-m-4-col`. There is no limit to number of spanned rows. |
-| `--pf-v6-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-grid > .pf-v6-l-grid`, `.pf-v6-l-grid__item` | Modifies the order of the grid layout element at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-all-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid` | Defines grid item size on grid container at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item size at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens).  Although not required, they are strongly suggested. If not used, grid item will default to 12 col. |
+| `.pf-m-{2-x}-row{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item row span at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens).  For row spans to function correctly, the value of of the current row plus the grid items to span must be equal to or less than 12. Example: `.pf-m-8-col.pf-m-2-row` + `.pf-m-4-col` + `.pf-m-4-col`. There is no limit to number of spanned rows. |
+| `--pf-v6-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-grid > .pf-v6-l-grid`, `.pf-v6-l-grid__item` | Modifies the order of the grid layout element at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |