@patternfly/react-core 6.0.0-alpha.4 → 6.0.0-alpha.40

package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap

@@ -4,17 +4,17 @@ exports[`Page Check dark page against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v6-c-page__header"
     >
       <div
-        class="pf-v5-c-page__header-brand"
+        class="pf-v6-c-page__header-brand"
       >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v6-c-page__header-brand-link"
         >
           Logo
         </span>
@@ -23,21 +23,21 @@ exports[`Page Check dark page against snapshot 1`] = `
     </header>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     >
       <div
-        class="pf-v5-c-page__sidebar-body"
+        class="pf-v6-c-page__sidebar-body"
       >
         Navigation
       </div>
     </div>
     <main
-      class="pf-v5-c-page__main"
+      class="pf-v6-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-v5-c-page__main-section"
+        class="pf-v6-c-page__main-section"
       >
         Section with default background
       </section>
@@ -50,23 +50,23 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v6-c-page__header"
     >
       <div
-        class="pf-v5-c-page__header-brand"
+        class="pf-v6-c-page__header-brand"
       >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v6-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-v5-c-page__header-nav"
+        class="pf-v6-c-page__header-nav"
       >
         Navigation
       </div>
@@ -74,15 +74,15 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
     </header>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-v5-c-page__main"
+      class="pf-v6-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-v5-c-page__main-section"
+        class="pf-v6-c-page__main-section"
       >
         Section with default background
       </section>
@@ -95,23 +95,23 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v6-c-page__header"
     >
       <div
-        class="pf-v5-c-page__header-brand"
+        class="pf-v6-c-page__header-brand"
       >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v6-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-v5-c-page__header-nav"
+        class="pf-v6-c-page__header-nav"
       >
         Navigation
       </div>
@@ -119,41 +119,41 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
     </header>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-v5-c-page__main"
+      class="pf-v6-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-v5-c-page__main-breadcrumb"
+        class="pf-v6-c-page__main-breadcrumb"
       >
         <nav
           aria-label="Breadcrumb"
-          class="pf-v5-c-breadcrumb"
+          class="pf-v6-c-breadcrumb"
           data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
           data-ouia-component-type="PF5/Breadcrumb"
           data-ouia-safe="true"
         >
           <ol
-            class="pf-v5-c-breadcrumb__list"
+            class="pf-v6-c-breadcrumb__list"
             role="list"
           >
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               Section Home
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -166,21 +166,21 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
                 </svg>
               </span>
               <a
-                class="pf-v5-c-breadcrumb__link"
+                class="pf-v6-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -193,21 +193,21 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
                 </svg>
               </span>
               <a
-                class="pf-v5-c-breadcrumb__link"
+                class="pf-v6-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -221,7 +221,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
               </span>
               <a
                 aria-current="page"
-                class="pf-v5-c-breadcrumb__link pf-m-current"
+                class="pf-v6-c-breadcrumb__link pf-m-current"
                 href="#"
               >
                 Section Landing
@@ -231,7 +231,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
         </nav>
       </section>
       <section
-        class="pf-v5-c-page__main-section"
+        class="pf-v6-c-page__main-section"
       >
         Section with default background
       </section>
@@ -244,23 +244,23 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v6-c-page__header"
     >
       <div
-        class="pf-v5-c-page__header-brand"
+        class="pf-v6-c-page__header-brand"
       >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v6-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-v5-c-page__header-nav"
+        class="pf-v6-c-page__header-nav"
       >
         Navigation
       </div>
@@ -268,41 +268,41 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
     </header>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-v5-c-page__main"
+      class="pf-v6-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-v5-c-page__main-breadcrumb"
+        class="pf-v6-c-page__main-breadcrumb"
       >
         <nav
           aria-label="Breadcrumb"
-          class="pf-v5-c-breadcrumb"
+          class="pf-v6-c-breadcrumb"
           data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
           data-ouia-component-type="PF5/Breadcrumb"
           data-ouia-safe="true"
         >
           <ol
-            class="pf-v5-c-breadcrumb__list"
+            class="pf-v6-c-breadcrumb__list"
             role="list"
           >
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               Section Home
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -315,21 +315,21 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
                 </svg>
               </span>
               <a
-                class="pf-v5-c-breadcrumb__link"
+                class="pf-v6-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -342,21 +342,21 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
                 </svg>
               </span>
               <a
-                class="pf-v5-c-breadcrumb__link"
+                class="pf-v6-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -370,7 +370,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
               </span>
               <a
                 aria-current="page"
-                class="pf-v5-c-breadcrumb__link pf-m-current"
+                class="pf-v6-c-breadcrumb__link pf-m-current"
                 href="#"
               >
                 Section Landing
@@ -380,7 +380,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
         </nav>
       </section>
       <section
-        class="pf-v5-c-page__main-section"
+        class="pf-v6-c-page__main-section"
       >
         Section with default background
       </section>
@@ -393,23 +393,23 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v6-c-page__header"
     >
       <div
-        class="pf-v5-c-page__header-brand"
+        class="pf-v6-c-page__header-brand"
       >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v6-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-v5-c-page__header-nav"
+        class="pf-v6-c-page__header-nav"
       >
         Navigation
       </div>
@@ -417,44 +417,44 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
     </header>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-v5-c-page__main"
+      class="pf-v6-c-page__main"
       tabindex="-1"
     >
       <div
-        class="pf-v5-c-page__main-group pf-m-sticky-bottom"
+        class="pf-v6-c-page__main-group pf-m-sticky-bottom"
       >
         <section
-          class="pf-v5-c-page__main-breadcrumb"
+          class="pf-v6-c-page__main-breadcrumb"
         >
           <nav
             aria-label="Breadcrumb"
-            class="pf-v5-c-breadcrumb"
+            class="pf-v6-c-breadcrumb"
             data-ouia-component-id="OUIA-Generated-Breadcrumb-7"
             data-ouia-component-type="PF5/Breadcrumb"
             data-ouia-safe="true"
           >
             <ol
-              class="pf-v5-c-breadcrumb__list"
+              class="pf-v6-c-breadcrumb__list"
               role="list"
             >
               <li
-                class="pf-v5-c-breadcrumb__item"
+                class="pf-v6-c-breadcrumb__item"
               >
                 Section Home
               </li>
               <li
-                class="pf-v5-c-breadcrumb__item"
+                class="pf-v6-c-breadcrumb__item"
               >
                 <span
-                  class="pf-v5-c-breadcrumb__item-divider"
+                  class="pf-v6-c-breadcrumb__item-divider"
                 >
                   <svg
                     aria-hidden="true"
-                    class="pf-v5-svg"
+                    class="pf-v6-svg"
                     fill="currentColor"
                     height="1em"
                     role="img"
@@ -467,21 +467,21 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                   </svg>
                 </span>
                 <a
-                  class="pf-v5-c-breadcrumb__link"
+                  class="pf-v6-c-breadcrumb__link"
                   href="#"
                 >
                   Section Title
                 </a>
               </li>
               <li
-                class="pf-v5-c-breadcrumb__item"
+                class="pf-v6-c-breadcrumb__item"
               >
                 <span
-                  class="pf-v5-c-breadcrumb__item-divider"
+                  class="pf-v6-c-breadcrumb__item-divider"
                 >
                   <svg
                     aria-hidden="true"
-                    class="pf-v5-svg"
+                    class="pf-v6-svg"
                     fill="currentColor"
                     height="1em"
                     role="img"
@@ -494,21 +494,21 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                   </svg>
                 </span>
                 <a
-                  class="pf-v5-c-breadcrumb__link"
+                  class="pf-v6-c-breadcrumb__link"
                   href="#"
                 >
                   Section Title
                 </a>
               </li>
               <li
-                class="pf-v5-c-breadcrumb__item"
+                class="pf-v6-c-breadcrumb__item"
               >
                 <span
-                  class="pf-v5-c-breadcrumb__item-divider"
+                  class="pf-v6-c-breadcrumb__item-divider"
                 >
                   <svg
                     aria-hidden="true"
-                    class="pf-v5-svg"
+                    class="pf-v6-svg"
                     fill="currentColor"
                     height="1em"
                     role="img"
@@ -522,7 +522,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                 </span>
                 <a
                   aria-current="page"
-                  class="pf-v5-c-breadcrumb__link pf-m-current"
+                  class="pf-v6-c-breadcrumb__link pf-m-current"
                   href="#"
                 >
                   Section Landing
@@ -532,124 +532,148 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
           </nav>
         </section>
         <div
-          class="pf-v5-c-page__main-nav"
+          class="pf-v6-c-page__main-nav"
         >
           <nav
             aria-label="Nav"
-            class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-            data-ouia-component-id="OUIA-Generated-Nav-tertiary-2"
+            class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
+            data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-2"
             data-ouia-component-type="PF5/Nav"
             data-ouia-safe="true"
           >
-            <button
-              aria-label="Scroll back"
-              class="pf-v5-c-nav__scroll-button"
-              disabled=""
+            <div
+              class="pf-v6-c-nav__scroll-button"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll back"
+                class="pf-v6-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v6-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
             <ul
-              class="pf-v5-c-nav__list"
+              class="pf-v6-c-nav__list"
               role="list"
             >
               <li
-                class="pf-v5-c-nav__item"
+                class="pf-v6-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-6"
                 data-ouia-component-type="PF5/NavItem"
                 data-ouia-safe="true"
               >
                 <a
                   aria-current="page"
-                  class="pf-v5-c-nav__link pf-m-current"
+                  class="pf-v6-c-nav__link pf-m-current"
                 >
                   System Panel
                 </a>
               </li>
               <li
-                class="pf-v5-c-nav__item"
+                class="pf-v6-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-7"
                 data-ouia-component-type="PF5/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-v5-c-nav__link"
+                  class="pf-v6-c-nav__link"
                 >
                   Policy
                 </a>
               </li>
               <li
-                class="pf-v5-c-nav__item"
+                class="pf-v6-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-8"
                 data-ouia-component-type="PF5/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-v5-c-nav__link"
+                  class="pf-v6-c-nav__link"
                 >
                   Authentication
                 </a>
               </li>
               <li
-                class="pf-v5-c-nav__item"
+                class="pf-v6-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-9"
                 data-ouia-component-type="PF5/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-v5-c-nav__link"
+                  class="pf-v6-c-nav__link"
                 >
                   Network Services
                 </a>
               </li>
               <li
-                class="pf-v5-c-nav__item"
+                class="pf-v6-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-10"
                 data-ouia-component-type="PF5/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-v5-c-nav__link"
+                  class="pf-v6-c-nav__link"
                 >
                   Server
                 </a>
               </li>
             </ul>
-            <button
-              aria-label="Scroll foward"
-              class="pf-v5-c-nav__scroll-button"
-              disabled=""
+            <div
+              class="pf-v6-c-nav__scroll-button"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll foward"
+                class="pf-v6-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v6-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
           </nav>
         </div>
       </div>
       <section
-        class="pf-v5-c-page__main-section"
+        class="pf-v6-c-page__main-section"
       >
         Section with default background
       </section>
@@ -662,23 +686,23 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v6-c-page__header"
     >
       <div
-        class="pf-v5-c-page__header-brand"
+        class="pf-v6-c-page__header-brand"
       >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v6-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-v5-c-page__header-nav"
+        class="pf-v6-c-page__header-nav"
       >
         Navigation
       </div>
@@ -686,166 +710,190 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
     </header>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-v5-c-page__main"
+      class="pf-v6-c-page__main"
       tabindex="-1"
     >
       <div
         aria-label="test"
-        class="pf-v5-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top pf-m-overflow-scroll"
+        class="pf-v6-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top pf-m-overflow-scroll"
         role="region"
         tabindex="0"
       >
         <div
-          class="pf-v5-c-page__main-nav"
+          class="pf-v6-c-page__main-nav"
         >
           <nav
             aria-label="Nav"
-            class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-            data-ouia-component-id="OUIA-Generated-Nav-tertiary-3"
+            class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
+            data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-3"
             data-ouia-component-type="PF5/Nav"
             data-ouia-safe="true"
           >
-            <button
-              aria-label="Scroll back"
-              class="pf-v5-c-nav__scroll-button"
-              disabled=""
+            <div
+              class="pf-v6-c-nav__scroll-button"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll back"
+                class="pf-v6-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-5"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v6-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
             <ul
-              class="pf-v5-c-nav__list"
+              class="pf-v6-c-nav__list"
               role="list"
             >
               <li
-                class="pf-v5-c-nav__item"
+                class="pf-v6-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-11"
                 data-ouia-component-type="PF5/NavItem"
                 data-ouia-safe="true"
               >
                 <a
                   aria-current="page"
-                  class="pf-v5-c-nav__link pf-m-current"
+                  class="pf-v6-c-nav__link pf-m-current"
                 >
                   System Panel
                 </a>
               </li>
               <li
-                class="pf-v5-c-nav__item"
+                class="pf-v6-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-12"
                 data-ouia-component-type="PF5/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-v5-c-nav__link"
+                  class="pf-v6-c-nav__link"
                 >
                   Policy
                 </a>
               </li>
               <li
-                class="pf-v5-c-nav__item"
+                class="pf-v6-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-13"
                 data-ouia-component-type="PF5/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-v5-c-nav__link"
+                  class="pf-v6-c-nav__link"
                 >
                   Authentication
                 </a>
               </li>
               <li
-                class="pf-v5-c-nav__item"
+                class="pf-v6-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-14"
                 data-ouia-component-type="PF5/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-v5-c-nav__link"
+                  class="pf-v6-c-nav__link"
                 >
                   Network Services
                 </a>
               </li>
               <li
-                class="pf-v5-c-nav__item"
+                class="pf-v6-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-15"
                 data-ouia-component-type="PF5/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-v5-c-nav__link"
+                  class="pf-v6-c-nav__link"
                 >
                   Server
                 </a>
               </li>
             </ul>
-            <button
-              aria-label="Scroll foward"
-              class="pf-v5-c-nav__scroll-button"
-              disabled=""
+            <div
+              class="pf-v6-c-nav__scroll-button"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll foward"
+                class="pf-v6-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-6"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v6-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
           </nav>
         </div>
         <section
-          class="pf-v5-c-page__main-breadcrumb"
+          class="pf-v6-c-page__main-breadcrumb"
         >
           <section
-            class="pf-v5-c-page__main-breadcrumb"
+            class="pf-v6-c-page__main-breadcrumb"
           >
             <nav
               aria-label="Breadcrumb"
-              class="pf-v5-c-breadcrumb"
+              class="pf-v6-c-breadcrumb"
               data-ouia-component-id="OUIA-Generated-Breadcrumb-8"
               data-ouia-component-type="PF5/Breadcrumb"
               data-ouia-safe="true"
             >
               <ol
-                class="pf-v5-c-breadcrumb__list"
+                class="pf-v6-c-breadcrumb__list"
                 role="list"
               >
                 <li
-                  class="pf-v5-c-breadcrumb__item"
+                  class="pf-v6-c-breadcrumb__item"
                 >
                   Section Home
                 </li>
                 <li
-                  class="pf-v5-c-breadcrumb__item"
+                  class="pf-v6-c-breadcrumb__item"
                 >
                   <span
-                    class="pf-v5-c-breadcrumb__item-divider"
+                    class="pf-v6-c-breadcrumb__item-divider"
                   >
                     <svg
                       aria-hidden="true"
-                      class="pf-v5-svg"
+                      class="pf-v6-svg"
                       fill="currentColor"
                       height="1em"
                       role="img"
@@ -858,21 +906,21 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                     </svg>
                   </span>
                   <a
-                    class="pf-v5-c-breadcrumb__link"
+                    class="pf-v6-c-breadcrumb__link"
                     href="#"
                   >
                     Section Title
                   </a>
                 </li>
                 <li
-                  class="pf-v5-c-breadcrumb__item"
+                  class="pf-v6-c-breadcrumb__item"
                 >
                   <span
-                    class="pf-v5-c-breadcrumb__item-divider"
+                    class="pf-v6-c-breadcrumb__item-divider"
                   >
                     <svg
                       aria-hidden="true"
-                      class="pf-v5-svg"
+                      class="pf-v6-svg"
                       fill="currentColor"
                       height="1em"
                       role="img"
@@ -885,21 +933,21 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                     </svg>
                   </span>
                   <a
-                    class="pf-v5-c-breadcrumb__link"
+                    class="pf-v6-c-breadcrumb__link"
                     href="#"
                   >
                     Section Title
                   </a>
                 </li>
                 <li
-                  class="pf-v5-c-breadcrumb__item"
+                  class="pf-v6-c-breadcrumb__item"
                 >
                   <span
-                    class="pf-v5-c-breadcrumb__item-divider"
+                    class="pf-v6-c-breadcrumb__item-divider"
                   >
                     <svg
                       aria-hidden="true"
-                      class="pf-v5-svg"
+                      class="pf-v6-svg"
                       fill="currentColor"
                       height="1em"
                       role="img"
@@ -913,7 +961,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   </span>
                   <a
                     aria-current="page"
-                    class="pf-v5-c-breadcrumb__link pf-m-current"
+                    class="pf-v6-c-breadcrumb__link pf-m-current"
                     href="#"
                   >
                     Section Landing
@@ -925,7 +973,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
         </section>
       </div>
       <section
-        class="pf-v5-c-page__main-section"
+        class="pf-v6-c-page__main-section"
       >
         Section with default background
       </section>
@@ -938,23 +986,23 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v6-c-page__header"
     >
       <div
-        class="pf-v5-c-page__header-brand"
+        class="pf-v6-c-page__header-brand"
       >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v6-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-v5-c-page__header-nav"
+        class="pf-v6-c-page__header-nav"
       >
         Navigation
       </div>
@@ -962,131 +1010,155 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
     </header>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-v5-c-page__main"
+      class="pf-v6-c-page__main"
       tabindex="-1"
     >
       <div
-        class="pf-v5-c-page__main-nav"
+        class="pf-v6-c-page__main-nav"
       >
         <nav
           aria-label="Nav"
-          class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-          data-ouia-component-id="OUIA-Generated-Nav-tertiary-1"
+          class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
+          data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-1"
           data-ouia-component-type="PF5/Nav"
           data-ouia-safe="true"
         >
-          <button
-            aria-label="Scroll back"
-            class="pf-v5-c-nav__scroll-button"
-            disabled=""
+          <div
+            class="pf-v6-c-nav__scroll-button"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 256 512"
-              width="1em"
+            <button
+              aria-disabled="false"
+              aria-label="Scroll back"
+              class="pf-v6-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-1"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <path
-                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-              />
-            </svg>
-          </button>
+              <span
+                class="pf-v6-c-button__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v6-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 256 512"
+                  width="1em"
+                >
+                  <path
+                    d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
           <ul
-            class="pf-v5-c-nav__list"
+            class="pf-v6-c-nav__list"
             role="list"
           >
             <li
-              class="pf-v5-c-nav__item"
+              class="pf-v6-c-nav__item"
               data-ouia-component-id="OUIA-Generated-NavItem-1"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
                 aria-current="page"
-                class="pf-v5-c-nav__link pf-m-current"
+                class="pf-v6-c-nav__link pf-m-current"
               >
                 System Panel
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item"
+              class="pf-v6-c-nav__item"
               data-ouia-component-id="OUIA-Generated-NavItem-2"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
               >
                 Policy
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item"
+              class="pf-v6-c-nav__item"
               data-ouia-component-id="OUIA-Generated-NavItem-3"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
               >
                 Authentication
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item"
+              class="pf-v6-c-nav__item"
               data-ouia-component-id="OUIA-Generated-NavItem-4"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
               >
                 Network Services
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item"
+              class="pf-v6-c-nav__item"
               data-ouia-component-id="OUIA-Generated-NavItem-5"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
               >
                 Server
               </a>
             </li>
           </ul>
-          <button
-            aria-label="Scroll foward"
-            class="pf-v5-c-nav__scroll-button"
-            disabled=""
+          <div
+            class="pf-v6-c-nav__scroll-button"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 256 512"
-              width="1em"
+            <button
+              aria-disabled="false"
+              aria-label="Scroll foward"
+              class="pf-v6-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-2"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              />
-            </svg>
-          </button>
+              <span
+                class="pf-v6-c-button__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v6-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 256 512"
+                  width="1em"
+                >
+                  <path
+                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </nav>
       </div>
       <section
-        class="pf-v5-c-page__main-section"
+        class="pf-v6-c-page__main-section"
       >
         Section with default background
       </section>
@@ -1099,16 +1171,16 @@ exports[`Page Check page to verify skip to content points to main content region
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     data-testid="page-test-id"
     id="PageId"
   >
     <div
-      class="pf-v5-c-skip-to-content"
+      class="pf-v6-c-skip-to-content"
     >
       <a
         aria-disabled="false"
-        class="pf-v5-c-button pf-m-primary"
+        class="pf-v6-c-button pf-m-primary"
         data-ouia-component-id="OUIA-Generated-Button-primary-1"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
@@ -1118,19 +1190,19 @@ exports[`Page Check page to verify skip to content points to main content region
       </a>
     </div>
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v6-c-page__header"
     >
       <div
-        class="pf-v5-c-page__header-brand"
+        class="pf-v6-c-page__header-brand"
       >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v6-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-v5-c-page__header-nav"
+        class="pf-v6-c-page__header-nav"
       >
         Navigation
       </div>
@@ -1138,42 +1210,42 @@ exports[`Page Check page to verify skip to content points to main content region
     </header>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-v5-c-page__main"
+      class="pf-v6-c-page__main"
       id="main-content-page-layout-test-nav"
       tabindex="-1"
     >
       <section
-        class="pf-v5-c-page__main-breadcrumb"
+        class="pf-v6-c-page__main-breadcrumb"
       >
         <nav
           aria-label="Breadcrumb"
-          class="pf-v5-c-breadcrumb"
+          class="pf-v6-c-breadcrumb"
           data-ouia-component-id="OUIA-Generated-Breadcrumb-9"
           data-ouia-component-type="PF5/Breadcrumb"
           data-ouia-safe="true"
         >
           <ol
-            class="pf-v5-c-breadcrumb__list"
+            class="pf-v6-c-breadcrumb__list"
             role="list"
           >
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               Section Home
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1186,21 +1258,21 @@ exports[`Page Check page to verify skip to content points to main content region
                 </svg>
               </span>
               <a
-                class="pf-v5-c-breadcrumb__link"
+                class="pf-v6-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1213,21 +1285,21 @@ exports[`Page Check page to verify skip to content points to main content region
                 </svg>
               </span>
               <a
-                class="pf-v5-c-breadcrumb__link"
+                class="pf-v6-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1241,7 +1313,7 @@ exports[`Page Check page to verify skip to content points to main content region
               </span>
               <a
                 aria-current="page"
-                class="pf-v5-c-breadcrumb__link pf-m-current"
+                class="pf-v6-c-breadcrumb__link pf-m-current"
                 href="#"
               >
                 Section Landing
@@ -1251,7 +1323,7 @@ exports[`Page Check page to verify skip to content points to main content region
         </nav>
       </section>
       <section
-        class="pf-v5-c-page__main-section"
+        class="pf-v6-c-page__main-section"
       >
         Section with default background
       </section>
@@ -1264,17 +1336,17 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v6-c-page__header"
     >
       <div
-        class="pf-v5-c-page__header-brand"
+        class="pf-v6-c-page__header-brand"
       >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v6-c-page__header-brand-link"
         >
           Logo
         </span>
@@ -1283,21 +1355,21 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
     </header>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     >
       <div
-        class="pf-v5-c-page__sidebar-body"
+        class="pf-v6-c-page__sidebar-body"
       >
         Navigation
       </div>
     </div>
     <main
-      class="pf-v5-c-page__main"
+      class="pf-v6-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-v5-c-page__main-section"
+        class="pf-v6-c-page__main-section"
       >
         Section with default background
       </section>
@@ -1310,23 +1382,23 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v6-c-page__header"
     >
       <div
-        class="pf-v5-c-page__header-brand"
+        class="pf-v6-c-page__header-brand"
       >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v6-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-v5-c-page__header-nav"
+        class="pf-v6-c-page__header-nav"
       >
         Navigation
       </div>
@@ -1334,41 +1406,41 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
     </header>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-v5-c-page__main"
+      class="pf-v6-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-v5-c-page__main-breadcrumb pf-m-sticky-bottom-on-sm-height pf-m-sticky-bottom-on-md-height pf-m-sticky-bottom-on-lg-height pf-m-sticky-bottom-on-xl-height pf-m-sticky-bottom-on-2xl-height"
+        class="pf-v6-c-page__main-breadcrumb pf-m-sticky-bottom-on-sm-height pf-m-sticky-bottom-on-md-height pf-m-sticky-bottom-on-lg-height pf-m-sticky-bottom-on-xl-height pf-m-sticky-bottom-on-2xl-height"
       >
         <nav
           aria-label="Breadcrumb"
-          class="pf-v5-c-breadcrumb"
+          class="pf-v6-c-breadcrumb"
           data-ouia-component-id="OUIA-Generated-Breadcrumb-6"
           data-ouia-component-type="PF5/Breadcrumb"
           data-ouia-safe="true"
         >
           <ol
-            class="pf-v5-c-breadcrumb__list"
+            class="pf-v6-c-breadcrumb__list"
             role="list"
           >
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               Section Home
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1381,21 +1453,21 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
                 </svg>
               </span>
               <a
-                class="pf-v5-c-breadcrumb__link"
+                class="pf-v6-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1408,21 +1480,21 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
                 </svg>
               </span>
               <a
-                class="pf-v5-c-breadcrumb__link"
+                class="pf-v6-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1436,7 +1508,7 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
               </span>
               <a
                 aria-current="page"
-                class="pf-v5-c-breadcrumb__link pf-m-current"
+                class="pf-v6-c-breadcrumb__link pf-m-current"
                 href="#"
               >
                 Section Landing
@@ -1446,7 +1518,7 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
         </nav>
       </section>
       <section
-        class="pf-v5-c-page__main-section"
+        class="pf-v6-c-page__main-section"
       >
         Section with default background
       </section>
@@ -1459,23 +1531,23 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v6-c-page__header"
     >
       <div
-        class="pf-v5-c-page__header-brand"
+        class="pf-v6-c-page__header-brand"
       >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v6-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-v5-c-page__header-nav"
+        class="pf-v6-c-page__header-nav"
       >
         Navigation
       </div>
@@ -1483,41 +1555,41 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
     </header>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-v5-c-page__main"
+      class="pf-v6-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-v5-c-page__main-breadcrumb pf-m-sticky-bottom-on-sm-height pf-m-sticky-bottom-on-md-height pf-m-sticky-bottom-on-lg-height pf-m-sticky-bottom-on-xl-height pf-m-sticky-bottom-on-2xl-height"
+        class="pf-v6-c-page__main-breadcrumb pf-m-sticky-bottom-on-sm-height pf-m-sticky-bottom-on-md-height pf-m-sticky-bottom-on-lg-height pf-m-sticky-bottom-on-xl-height pf-m-sticky-bottom-on-2xl-height"
       >
         <nav
           aria-label="Breadcrumb"
-          class="pf-v5-c-breadcrumb"
+          class="pf-v6-c-breadcrumb"
           data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
           data-ouia-component-type="PF5/Breadcrumb"
           data-ouia-safe="true"
         >
           <ol
-            class="pf-v5-c-breadcrumb__list"
+            class="pf-v6-c-breadcrumb__list"
             role="list"
           >
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               Section Home
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1530,21 +1602,21 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
                 </svg>
               </span>
               <a
-                class="pf-v5-c-breadcrumb__link"
+                class="pf-v6-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1557,21 +1629,21 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
                 </svg>
               </span>
               <a
-                class="pf-v5-c-breadcrumb__link"
+                class="pf-v6-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1585,7 +1657,7 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
               </span>
               <a
                 aria-current="page"
-                class="pf-v5-c-breadcrumb__link pf-m-current"
+                class="pf-v6-c-breadcrumb__link pf-m-current"
                 href="#"
               >
                 Section Landing
@@ -1595,7 +1667,7 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
         </nav>
       </section>
       <section
-        class="pf-v5-c-page__main-section"
+        class="pf-v6-c-page__main-section"
       >
         Section with default background
       </section>
@@ -1608,23 +1680,23 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v6-c-page__header"
     >
       <div
-        class="pf-v5-c-page__header-brand"
+        class="pf-v6-c-page__header-brand"
       >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v6-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-v5-c-page__header-nav"
+        class="pf-v6-c-page__header-nav"
       >
         Navigation
       </div>
@@ -1632,41 +1704,41 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
     </header>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-v5-c-page__main"
+      class="pf-v6-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-v5-c-page__main-breadcrumb pf-m-sticky-top-on-sm-height pf-m-sticky-top-on-md-height pf-m-sticky-top-on-lg-height pf-m-sticky-top-on-xl-height pf-m-sticky-top-on-2xl-height"
+        class="pf-v6-c-page__main-breadcrumb pf-m-sticky-top-on-sm-height pf-m-sticky-top-on-md-height pf-m-sticky-top-on-lg-height pf-m-sticky-top-on-xl-height pf-m-sticky-top-on-2xl-height"
       >
         <nav
           aria-label="Breadcrumb"
-          class="pf-v5-c-breadcrumb"
+          class="pf-v6-c-breadcrumb"
           data-ouia-component-id="OUIA-Generated-Breadcrumb-5"
           data-ouia-component-type="PF5/Breadcrumb"
           data-ouia-safe="true"
         >
           <ol
-            class="pf-v5-c-breadcrumb__list"
+            class="pf-v6-c-breadcrumb__list"
             role="list"
           >
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               Section Home
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1679,21 +1751,21 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
                 </svg>
               </span>
               <a
-                class="pf-v5-c-breadcrumb__link"
+                class="pf-v6-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1706,21 +1778,21 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
                 </svg>
               </span>
               <a
-                class="pf-v5-c-breadcrumb__link"
+                class="pf-v6-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1734,7 +1806,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
               </span>
               <a
                 aria-current="page"
-                class="pf-v5-c-breadcrumb__link pf-m-current"
+                class="pf-v6-c-breadcrumb__link pf-m-current"
                 href="#"
               >
                 Section Landing
@@ -1744,7 +1816,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
         </nav>
       </section>
       <section
-        class="pf-v5-c-page__main-section"
+        class="pf-v6-c-page__main-section"
       >
         Section with default background
       </section>
@@ -1757,23 +1829,23 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v6-c-page__header"
     >
       <div
-        class="pf-v5-c-page__header-brand"
+        class="pf-v6-c-page__header-brand"
       >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v6-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-v5-c-page__header-nav"
+        class="pf-v6-c-page__header-nav"
       >
         Navigation
       </div>
@@ -1781,41 +1853,41 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
     </header>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-v5-c-page__main"
+      class="pf-v6-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-v5-c-page__main-breadcrumb pf-m-sticky-top-on-sm-height pf-m-sticky-top-on-md-height pf-m-sticky-top-on-lg-height pf-m-sticky-top-on-xl-height pf-m-sticky-top-on-2xl-height"
+        class="pf-v6-c-page__main-breadcrumb pf-m-sticky-top-on-sm-height pf-m-sticky-top-on-md-height pf-m-sticky-top-on-lg-height pf-m-sticky-top-on-xl-height pf-m-sticky-top-on-2xl-height"
       >
         <nav
           aria-label="Breadcrumb"
-          class="pf-v5-c-breadcrumb"
+          class="pf-v6-c-breadcrumb"
           data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
           data-ouia-component-type="PF5/Breadcrumb"
           data-ouia-safe="true"
         >
           <ol
-            class="pf-v5-c-breadcrumb__list"
+            class="pf-v6-c-breadcrumb__list"
             role="list"
           >
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               Section Home
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1828,21 +1900,21 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
                 </svg>
               </span>
               <a
-                class="pf-v5-c-breadcrumb__link"
+                class="pf-v6-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1855,21 +1927,21 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
                 </svg>
               </span>
               <a
-                class="pf-v5-c-breadcrumb__link"
+                class="pf-v6-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-v5-c-breadcrumb__item"
+              class="pf-v6-c-breadcrumb__item"
             >
               <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                class="pf-v6-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -1883,7 +1955,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
               </span>
               <a
                 aria-current="page"
-                class="pf-v5-c-breadcrumb__link pf-m-current"
+                class="pf-v6-c-breadcrumb__link pf-m-current"
                 href="#"
               >
                 Section Landing
@@ -1893,7 +1965,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
         </nav>
       </section>
       <section
-        class="pf-v5-c-page__main-section"
+        class="pf-v6-c-page__main-section"
       >
         Section with default background
       </section>