@patternfly/react-core 5.0.0-alpha.90 → 5.0.0-alpha.92

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-c-page my-page-class"
+    class="pf-v5-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-c-page__header"
+      class="pf-v5-c-page__header"
     >
       <div
-        class="pf-c-page__header-brand"
+        class="pf-v5-c-page__header-brand"
       >
         <span
-          class="pf-c-page__header-brand-link"
+          class="pf-v5-c-page__header-brand-link"
         >
           Logo
         </span>
@@ -23,36 +23,36 @@ exports[`Page Check dark page against snapshot 1`] = `
     </header>
     <div
       aria-hidden="false"
-      class="pf-c-page__sidebar pf-m-expanded"
+      class="pf-v5-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     >
       <div
-        class="pf-c-page__sidebar-body"
+        class="pf-v5-c-page__sidebar-body"
       >
         Navigation
       </div>
     </div>
     <main
-      class="pf-c-page__main"
+      class="pf-v5-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-c-page__main-section"
+        class="pf-v5-c-page__main-section"
       >
         Section with default background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-light"
+        class="pf-v5-c-page__main-section pf-m-light"
       >
         Section with light background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-200"
+        class="pf-v5-c-page__main-section pf-m-dark-200"
       >
         Section with dark background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-100"
+        class="pf-v5-c-page__main-section pf-m-dark-100"
       >
         Section with darker background
       </section>
@@ -65,23 +65,23 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page my-page-class"
+    class="pf-v5-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-c-page__header"
+      class="pf-v5-c-page__header"
     >
       <div
-        class="pf-c-page__header-brand"
+        class="pf-v5-c-page__header-brand"
       >
         <span
-          class="pf-c-page__header-brand-link"
+          class="pf-v5-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-c-page__header-nav"
+        class="pf-v5-c-page__header-nav"
       >
         Navigation
       </div>
@@ -89,30 +89,30 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
     </header>
     <div
       aria-hidden="false"
-      class="pf-c-page__sidebar pf-m-expanded"
+      class="pf-v5-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-c-page__main"
+      class="pf-v5-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-c-page__main-section"
+        class="pf-v5-c-page__main-section"
       >
         Section with default background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-light"
+        class="pf-v5-c-page__main-section pf-m-light"
       >
         Section with light background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-200"
+        class="pf-v5-c-page__main-section pf-m-dark-200"
       >
         Section with dark background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-100"
+        class="pf-v5-c-page__main-section pf-m-dark-100"
       >
         Section with darker background
       </section>
@@ -125,23 +125,23 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page my-page-class"
+    class="pf-v5-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-c-page__header"
+      class="pf-v5-c-page__header"
     >
       <div
-        class="pf-c-page__header-brand"
+        class="pf-v5-c-page__header-brand"
       >
         <span
-          class="pf-c-page__header-brand-link"
+          class="pf-v5-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-c-page__header-nav"
+        class="pf-v5-c-page__header-nav"
       >
         Navigation
       </div>
@@ -149,41 +149,41 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
     </header>
     <div
       aria-hidden="false"
-      class="pf-c-page__sidebar pf-m-expanded"
+      class="pf-v5-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-c-page__main"
+      class="pf-v5-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-c-page__main-breadcrumb"
+        class="pf-v5-c-page__main-breadcrumb"
       >
         <nav
           aria-label="Breadcrumb"
-          class="pf-c-breadcrumb"
+          class="pf-v5-c-breadcrumb"
           data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
           data-ouia-component-type="PF4/Breadcrumb"
           data-ouia-safe="true"
         >
           <ol
-            class="pf-c-breadcrumb__list"
+            class="pf-v5-c-breadcrumb__list"
             role="list"
           >
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               Section Home
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -194,21 +194,21 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
                 </svg>
               </span>
               <a
-                class="pf-c-breadcrumb__link"
+                class="pf-v5-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -219,21 +219,21 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
                 </svg>
               </span>
               <a
-                class="pf-c-breadcrumb__link"
+                class="pf-v5-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -245,7 +245,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
               </span>
               <a
                 aria-current="page"
-                class="pf-c-breadcrumb__link pf-m-current"
+                class="pf-v5-c-breadcrumb__link pf-m-current"
                 href="#"
               >
                 Section Landing
@@ -255,22 +255,22 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
         </nav>
       </section>
       <section
-        class="pf-c-page__main-section"
+        class="pf-v5-c-page__main-section"
       >
         Section with default background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-light"
+        class="pf-v5-c-page__main-section pf-m-light"
       >
         Section with light background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-200"
+        class="pf-v5-c-page__main-section pf-m-dark-200"
       >
         Section with dark background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-100"
+        class="pf-v5-c-page__main-section pf-m-dark-100"
       >
         Section with darker background
       </section>
@@ -283,23 +283,23 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page my-page-class"
+    class="pf-v5-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-c-page__header"
+      class="pf-v5-c-page__header"
     >
       <div
-        class="pf-c-page__header-brand"
+        class="pf-v5-c-page__header-brand"
       >
         <span
-          class="pf-c-page__header-brand-link"
+          class="pf-v5-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-c-page__header-nav"
+        class="pf-v5-c-page__header-nav"
       >
         Navigation
       </div>
@@ -307,41 +307,41 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
     </header>
     <div
       aria-hidden="false"
-      class="pf-c-page__sidebar pf-m-expanded"
+      class="pf-v5-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-c-page__main"
+      class="pf-v5-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-c-page__main-breadcrumb"
+        class="pf-v5-c-page__main-breadcrumb"
       >
         <nav
           aria-label="Breadcrumb"
-          class="pf-c-breadcrumb"
+          class="pf-v5-c-breadcrumb"
           data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
           data-ouia-component-type="PF4/Breadcrumb"
           data-ouia-safe="true"
         >
           <ol
-            class="pf-c-breadcrumb__list"
+            class="pf-v5-c-breadcrumb__list"
             role="list"
           >
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               Section Home
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -352,21 +352,21 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
                 </svg>
               </span>
               <a
-                class="pf-c-breadcrumb__link"
+                class="pf-v5-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -377,21 +377,21 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
                 </svg>
               </span>
               <a
-                class="pf-c-breadcrumb__link"
+                class="pf-v5-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -403,7 +403,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
               </span>
               <a
                 aria-current="page"
-                class="pf-c-breadcrumb__link pf-m-current"
+                class="pf-v5-c-breadcrumb__link pf-m-current"
                 href="#"
               >
                 Section Landing
@@ -413,22 +413,22 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
         </nav>
       </section>
       <section
-        class="pf-c-page__main-section"
+        class="pf-v5-c-page__main-section"
       >
         Section with default background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-light"
+        class="pf-v5-c-page__main-section pf-m-light"
       >
         Section with light background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-200"
+        class="pf-v5-c-page__main-section pf-m-dark-200"
       >
         Section with dark background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-100"
+        class="pf-v5-c-page__main-section pf-m-dark-100"
       >
         Section with darker background
       </section>
@@ -441,23 +441,23 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page my-page-class"
+    class="pf-v5-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-c-page__header"
+      class="pf-v5-c-page__header"
     >
       <div
-        class="pf-c-page__header-brand"
+        class="pf-v5-c-page__header-brand"
       >
         <span
-          class="pf-c-page__header-brand-link"
+          class="pf-v5-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-c-page__header-nav"
+        class="pf-v5-c-page__header-nav"
       >
         Navigation
       </div>
@@ -465,44 +465,44 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
     </header>
     <div
       aria-hidden="false"
-      class="pf-c-page__sidebar pf-m-expanded"
+      class="pf-v5-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-c-page__main"
+      class="pf-v5-c-page__main"
       tabindex="-1"
     >
       <div
-        class="pf-c-page__main-group pf-m-sticky-bottom"
+        class="pf-v5-c-page__main-group pf-m-sticky-bottom"
       >
         <section
-          class="pf-c-page__main-breadcrumb"
+          class="pf-v5-c-page__main-breadcrumb"
         >
           <nav
             aria-label="Breadcrumb"
-            class="pf-c-breadcrumb"
+            class="pf-v5-c-breadcrumb"
             data-ouia-component-id="OUIA-Generated-Breadcrumb-7"
             data-ouia-component-type="PF4/Breadcrumb"
             data-ouia-safe="true"
           >
             <ol
-              class="pf-c-breadcrumb__list"
+              class="pf-v5-c-breadcrumb__list"
               role="list"
             >
               <li
-                class="pf-c-breadcrumb__item"
+                class="pf-v5-c-breadcrumb__item"
               >
                 Section Home
               </li>
               <li
-                class="pf-c-breadcrumb__item"
+                class="pf-v5-c-breadcrumb__item"
               >
                 <span
-                  class="pf-c-breadcrumb__item-divider"
+                  class="pf-v5-c-breadcrumb__item-divider"
                 >
                   <svg
                     aria-hidden="true"
-                    class="pf-svg"
+                    class="pf-v5-svg"
                     fill="currentColor"
                     role="img"
                     viewBox="0 0 256 512"
@@ -513,21 +513,21 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                   </svg>
                 </span>
                 <a
-                  class="pf-c-breadcrumb__link"
+                  class="pf-v5-c-breadcrumb__link"
                   href="#"
                 >
                   Section Title
                 </a>
               </li>
               <li
-                class="pf-c-breadcrumb__item"
+                class="pf-v5-c-breadcrumb__item"
               >
                 <span
-                  class="pf-c-breadcrumb__item-divider"
+                  class="pf-v5-c-breadcrumb__item-divider"
                 >
                   <svg
                     aria-hidden="true"
-                    class="pf-svg"
+                    class="pf-v5-svg"
                     fill="currentColor"
                     role="img"
                     viewBox="0 0 256 512"
@@ -538,21 +538,21 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                   </svg>
                 </span>
                 <a
-                  class="pf-c-breadcrumb__link"
+                  class="pf-v5-c-breadcrumb__link"
                   href="#"
                 >
                   Section Title
                 </a>
               </li>
               <li
-                class="pf-c-breadcrumb__item"
+                class="pf-v5-c-breadcrumb__item"
               >
                 <span
-                  class="pf-c-breadcrumb__item-divider"
+                  class="pf-v5-c-breadcrumb__item-divider"
                 >
                   <svg
                     aria-hidden="true"
-                    class="pf-svg"
+                    class="pf-v5-svg"
                     fill="currentColor"
                     role="img"
                     viewBox="0 0 256 512"
@@ -564,7 +564,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                 </span>
                 <a
                   aria-current="page"
-                  class="pf-c-breadcrumb__link pf-m-current"
+                  class="pf-v5-c-breadcrumb__link pf-m-current"
                   href="#"
                 >
                   Section Landing
@@ -574,23 +574,23 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
           </nav>
         </section>
         <div
-          class="pf-c-page__main-nav"
+          class="pf-v5-c-page__main-nav"
         >
           <nav
             aria-label="Nav"
-            class="pf-c-nav pf-m-horizontal pf-m-tertiary"
+            class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
             data-ouia-component-id="OUIA-Generated-Nav-tertiary-2"
             data-ouia-component-type="PF4/Nav"
             data-ouia-safe="true"
           >
             <button
               aria-label="Scroll left"
-              class="pf-c-nav__scroll-button"
+              class="pf-v5-c-nav__scroll-button"
               disabled=""
             >
               <svg
                 aria-hidden="true"
-                class="pf-svg"
+                class="pf-v5-svg"
                 fill="currentColor"
                 role="img"
                 viewBox="0 0 256 512"
@@ -601,66 +601,66 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
               </svg>
             </button>
             <ul
-              class="pf-c-nav__list"
+              class="pf-v5-c-nav__list"
               role="list"
             >
               <li
-                class="pf-c-nav__item"
+                class="pf-v5-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-6"
                 data-ouia-component-type="PF4/NavItem"
                 data-ouia-safe="true"
               >
                 <a
                   aria-current="page"
-                  class="pf-c-nav__link pf-m-current"
+                  class="pf-v5-c-nav__link pf-m-current"
                 >
                   System Panel
                 </a>
               </li>
               <li
-                class="pf-c-nav__item"
+                class="pf-v5-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-7"
                 data-ouia-component-type="PF4/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-c-nav__link"
+                  class="pf-v5-c-nav__link"
                 >
                   Policy
                 </a>
               </li>
               <li
-                class="pf-c-nav__item"
+                class="pf-v5-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-8"
                 data-ouia-component-type="PF4/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-c-nav__link"
+                  class="pf-v5-c-nav__link"
                 >
                   Authentication
                 </a>
               </li>
               <li
-                class="pf-c-nav__item"
+                class="pf-v5-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-9"
                 data-ouia-component-type="PF4/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-c-nav__link"
+                  class="pf-v5-c-nav__link"
                 >
                   Network Services
                 </a>
               </li>
               <li
-                class="pf-c-nav__item"
+                class="pf-v5-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-10"
                 data-ouia-component-type="PF4/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-c-nav__link"
+                  class="pf-v5-c-nav__link"
                 >
                   Server
                 </a>
@@ -668,12 +668,12 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
             </ul>
             <button
               aria-label="Scroll right"
-              class="pf-c-nav__scroll-button"
+              class="pf-v5-c-nav__scroll-button"
               disabled=""
             >
               <svg
                 aria-hidden="true"
-                class="pf-svg"
+                class="pf-v5-svg"
                 fill="currentColor"
                 role="img"
                 viewBox="0 0 256 512"
@@ -687,22 +687,22 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
         </div>
       </div>
       <section
-        class="pf-c-page__main-section"
+        class="pf-v5-c-page__main-section"
       >
         Section with default background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-light"
+        class="pf-v5-c-page__main-section pf-m-light"
       >
         Section with light background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-200"
+        class="pf-v5-c-page__main-section pf-m-dark-200"
       >
         Section with dark background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-100"
+        class="pf-v5-c-page__main-section pf-m-dark-100"
       >
         Section with darker background
       </section>
@@ -715,23 +715,23 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page my-page-class"
+    class="pf-v5-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-c-page__header"
+      class="pf-v5-c-page__header"
     >
       <div
-        class="pf-c-page__header-brand"
+        class="pf-v5-c-page__header-brand"
       >
         <span
-          class="pf-c-page__header-brand-link"
+          class="pf-v5-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-c-page__header-nav"
+        class="pf-v5-c-page__header-nav"
       >
         Navigation
       </div>
@@ -739,37 +739,37 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
     </header>
     <div
       aria-hidden="false"
-      class="pf-c-page__sidebar pf-m-expanded"
+      class="pf-v5-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-c-page__main"
+      class="pf-v5-c-page__main"
       tabindex="-1"
     >
       <div
         aria-label="test"
-        class="pf-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top pf-m-overflow-scroll"
+        class="pf-v5-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top pf-m-overflow-scroll"
         role="region"
         tabindex="0"
       >
         <div
-          class="pf-c-page__main-nav"
+          class="pf-v5-c-page__main-nav"
         >
           <nav
             aria-label="Nav"
-            class="pf-c-nav pf-m-horizontal pf-m-tertiary"
+            class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
             data-ouia-component-id="OUIA-Generated-Nav-tertiary-3"
             data-ouia-component-type="PF4/Nav"
             data-ouia-safe="true"
           >
             <button
               aria-label="Scroll left"
-              class="pf-c-nav__scroll-button"
+              class="pf-v5-c-nav__scroll-button"
               disabled=""
             >
               <svg
                 aria-hidden="true"
-                class="pf-svg"
+                class="pf-v5-svg"
                 fill="currentColor"
                 role="img"
                 viewBox="0 0 256 512"
@@ -780,66 +780,66 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
               </svg>
             </button>
             <ul
-              class="pf-c-nav__list"
+              class="pf-v5-c-nav__list"
               role="list"
             >
               <li
-                class="pf-c-nav__item"
+                class="pf-v5-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-11"
                 data-ouia-component-type="PF4/NavItem"
                 data-ouia-safe="true"
               >
                 <a
                   aria-current="page"
-                  class="pf-c-nav__link pf-m-current"
+                  class="pf-v5-c-nav__link pf-m-current"
                 >
                   System Panel
                 </a>
               </li>
               <li
-                class="pf-c-nav__item"
+                class="pf-v5-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-12"
                 data-ouia-component-type="PF4/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-c-nav__link"
+                  class="pf-v5-c-nav__link"
                 >
                   Policy
                 </a>
               </li>
               <li
-                class="pf-c-nav__item"
+                class="pf-v5-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-13"
                 data-ouia-component-type="PF4/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-c-nav__link"
+                  class="pf-v5-c-nav__link"
                 >
                   Authentication
                 </a>
               </li>
               <li
-                class="pf-c-nav__item"
+                class="pf-v5-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-14"
                 data-ouia-component-type="PF4/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-c-nav__link"
+                  class="pf-v5-c-nav__link"
                 >
                   Network Services
                 </a>
               </li>
               <li
-                class="pf-c-nav__item"
+                class="pf-v5-c-nav__item"
                 data-ouia-component-id="OUIA-Generated-NavItem-15"
                 data-ouia-component-type="PF4/NavItem"
                 data-ouia-safe="true"
               >
                 <a
-                  class="pf-c-nav__link"
+                  class="pf-v5-c-nav__link"
                 >
                   Server
                 </a>
@@ -847,12 +847,12 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
             </ul>
             <button
               aria-label="Scroll right"
-              class="pf-c-nav__scroll-button"
+              class="pf-v5-c-nav__scroll-button"
               disabled=""
             >
               <svg
                 aria-hidden="true"
-                class="pf-svg"
+                class="pf-v5-svg"
                 fill="currentColor"
                 role="img"
                 viewBox="0 0 256 512"
@@ -865,36 +865,36 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
           </nav>
         </div>
         <section
-          class="pf-c-page__main-breadcrumb"
+          class="pf-v5-c-page__main-breadcrumb"
         >
           <section
-            class="pf-c-page__main-breadcrumb"
+            class="pf-v5-c-page__main-breadcrumb"
           >
             <nav
               aria-label="Breadcrumb"
-              class="pf-c-breadcrumb"
+              class="pf-v5-c-breadcrumb"
               data-ouia-component-id="OUIA-Generated-Breadcrumb-8"
               data-ouia-component-type="PF4/Breadcrumb"
               data-ouia-safe="true"
             >
               <ol
-                class="pf-c-breadcrumb__list"
+                class="pf-v5-c-breadcrumb__list"
                 role="list"
               >
                 <li
-                  class="pf-c-breadcrumb__item"
+                  class="pf-v5-c-breadcrumb__item"
                 >
                   Section Home
                 </li>
                 <li
-                  class="pf-c-breadcrumb__item"
+                  class="pf-v5-c-breadcrumb__item"
                 >
                   <span
-                    class="pf-c-breadcrumb__item-divider"
+                    class="pf-v5-c-breadcrumb__item-divider"
                   >
                     <svg
                       aria-hidden="true"
-                      class="pf-svg"
+                      class="pf-v5-svg"
                       fill="currentColor"
                       role="img"
                       viewBox="0 0 256 512"
@@ -905,21 +905,21 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                     </svg>
                   </span>
                   <a
-                    class="pf-c-breadcrumb__link"
+                    class="pf-v5-c-breadcrumb__link"
                     href="#"
                   >
                     Section Title
                   </a>
                 </li>
                 <li
-                  class="pf-c-breadcrumb__item"
+                  class="pf-v5-c-breadcrumb__item"
                 >
                   <span
-                    class="pf-c-breadcrumb__item-divider"
+                    class="pf-v5-c-breadcrumb__item-divider"
                   >
                     <svg
                       aria-hidden="true"
-                      class="pf-svg"
+                      class="pf-v5-svg"
                       fill="currentColor"
                       role="img"
                       viewBox="0 0 256 512"
@@ -930,21 +930,21 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                     </svg>
                   </span>
                   <a
-                    class="pf-c-breadcrumb__link"
+                    class="pf-v5-c-breadcrumb__link"
                     href="#"
                   >
                     Section Title
                   </a>
                 </li>
                 <li
-                  class="pf-c-breadcrumb__item"
+                  class="pf-v5-c-breadcrumb__item"
                 >
                   <span
-                    class="pf-c-breadcrumb__item-divider"
+                    class="pf-v5-c-breadcrumb__item-divider"
                   >
                     <svg
                       aria-hidden="true"
-                      class="pf-svg"
+                      class="pf-v5-svg"
                       fill="currentColor"
                       role="img"
                       viewBox="0 0 256 512"
@@ -956,7 +956,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   </span>
                   <a
                     aria-current="page"
-                    class="pf-c-breadcrumb__link pf-m-current"
+                    class="pf-v5-c-breadcrumb__link pf-m-current"
                     href="#"
                   >
                     Section Landing
@@ -968,22 +968,22 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
         </section>
       </div>
       <section
-        class="pf-c-page__main-section"
+        class="pf-v5-c-page__main-section"
       >
         Section with default background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-light"
+        class="pf-v5-c-page__main-section pf-m-light"
       >
         Section with light background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-200"
+        class="pf-v5-c-page__main-section pf-m-dark-200"
       >
         Section with dark background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-100"
+        class="pf-v5-c-page__main-section pf-m-dark-100"
       >
         Section with darker background
       </section>
@@ -996,23 +996,23 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page my-page-class"
+    class="pf-v5-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-c-page__header"
+      class="pf-v5-c-page__header"
     >
       <div
-        class="pf-c-page__header-brand"
+        class="pf-v5-c-page__header-brand"
       >
         <span
-          class="pf-c-page__header-brand-link"
+          class="pf-v5-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-c-page__header-nav"
+        class="pf-v5-c-page__header-nav"
       >
         Navigation
       </div>
@@ -1020,31 +1020,31 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
     </header>
     <div
       aria-hidden="false"
-      class="pf-c-page__sidebar pf-m-expanded"
+      class="pf-v5-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-c-page__main"
+      class="pf-v5-c-page__main"
       tabindex="-1"
     >
       <div
-        class="pf-c-page__main-nav"
+        class="pf-v5-c-page__main-nav"
       >
         <nav
           aria-label="Nav"
-          class="pf-c-nav pf-m-horizontal pf-m-tertiary"
+          class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
           data-ouia-component-id="OUIA-Generated-Nav-tertiary-1"
           data-ouia-component-type="PF4/Nav"
           data-ouia-safe="true"
         >
           <button
             aria-label="Scroll left"
-            class="pf-c-nav__scroll-button"
+            class="pf-v5-c-nav__scroll-button"
             disabled=""
           >
             <svg
               aria-hidden="true"
-              class="pf-svg"
+              class="pf-v5-svg"
               fill="currentColor"
               role="img"
               viewBox="0 0 256 512"
@@ -1055,66 +1055,66 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
             </svg>
           </button>
           <ul
-            class="pf-c-nav__list"
+            class="pf-v5-c-nav__list"
             role="list"
           >
             <li
-              class="pf-c-nav__item"
+              class="pf-v5-c-nav__item"
               data-ouia-component-id="OUIA-Generated-NavItem-1"
               data-ouia-component-type="PF4/NavItem"
               data-ouia-safe="true"
             >
               <a
                 aria-current="page"
-                class="pf-c-nav__link pf-m-current"
+                class="pf-v5-c-nav__link pf-m-current"
               >
                 System Panel
               </a>
             </li>
             <li
-              class="pf-c-nav__item"
+              class="pf-v5-c-nav__item"
               data-ouia-component-id="OUIA-Generated-NavItem-2"
               data-ouia-component-type="PF4/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-c-nav__link"
+                class="pf-v5-c-nav__link"
               >
                 Policy
               </a>
             </li>
             <li
-              class="pf-c-nav__item"
+              class="pf-v5-c-nav__item"
               data-ouia-component-id="OUIA-Generated-NavItem-3"
               data-ouia-component-type="PF4/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-c-nav__link"
+                class="pf-v5-c-nav__link"
               >
                 Authentication
               </a>
             </li>
             <li
-              class="pf-c-nav__item"
+              class="pf-v5-c-nav__item"
               data-ouia-component-id="OUIA-Generated-NavItem-4"
               data-ouia-component-type="PF4/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-c-nav__link"
+                class="pf-v5-c-nav__link"
               >
                 Network Services
               </a>
             </li>
             <li
-              class="pf-c-nav__item"
+              class="pf-v5-c-nav__item"
               data-ouia-component-id="OUIA-Generated-NavItem-5"
               data-ouia-component-type="PF4/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-c-nav__link"
+                class="pf-v5-c-nav__link"
               >
                 Server
               </a>
@@ -1122,12 +1122,12 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
           </ul>
           <button
             aria-label="Scroll right"
-            class="pf-c-nav__scroll-button"
+            class="pf-v5-c-nav__scroll-button"
             disabled=""
           >
             <svg
               aria-hidden="true"
-              class="pf-svg"
+              class="pf-v5-svg"
               fill="currentColor"
               role="img"
               viewBox="0 0 256 512"
@@ -1140,22 +1140,22 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
         </nav>
       </div>
       <section
-        class="pf-c-page__main-section"
+        class="pf-v5-c-page__main-section"
       >
         Section with default background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-light"
+        class="pf-v5-c-page__main-section pf-m-light"
       >
         Section with light background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-200"
+        class="pf-v5-c-page__main-section pf-m-dark-200"
       >
         Section with dark background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-100"
+        class="pf-v5-c-page__main-section pf-m-dark-100"
       >
         Section with darker background
       </section>
@@ -1168,16 +1168,16 @@ exports[`Page Check page to verify skip to content points to main content region
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page my-page-class"
+    class="pf-v5-c-page my-page-class"
     data-testid="page-test-id"
     id="PageId"
   >
     <div
-      class="pf-c-skip-to-content"
+      class="pf-v5-c-skip-to-content"
     >
       <a
         aria-disabled="false"
-        class="pf-c-button pf-m-primary"
+        class="pf-v5-c-button pf-m-primary"
         data-ouia-component-id="OUIA-Generated-Button-primary-1"
         data-ouia-component-type="PF4/Button"
         data-ouia-safe="true"
@@ -1187,19 +1187,19 @@ exports[`Page Check page to verify skip to content points to main content region
       </a>
     </div>
     <header
-      class="pf-c-page__header"
+      class="pf-v5-c-page__header"
     >
       <div
-        class="pf-c-page__header-brand"
+        class="pf-v5-c-page__header-brand"
       >
         <span
-          class="pf-c-page__header-brand-link"
+          class="pf-v5-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-c-page__header-nav"
+        class="pf-v5-c-page__header-nav"
       >
         Navigation
       </div>
@@ -1207,42 +1207,42 @@ exports[`Page Check page to verify skip to content points to main content region
     </header>
     <div
       aria-hidden="false"
-      class="pf-c-page__sidebar pf-m-expanded"
+      class="pf-v5-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-c-page__main"
+      class="pf-v5-c-page__main"
       id="main-content-page-layout-test-nav"
       tabindex="-1"
     >
       <section
-        class="pf-c-page__main-breadcrumb"
+        class="pf-v5-c-page__main-breadcrumb"
       >
         <nav
           aria-label="Breadcrumb"
-          class="pf-c-breadcrumb"
+          class="pf-v5-c-breadcrumb"
           data-ouia-component-id="OUIA-Generated-Breadcrumb-9"
           data-ouia-component-type="PF4/Breadcrumb"
           data-ouia-safe="true"
         >
           <ol
-            class="pf-c-breadcrumb__list"
+            class="pf-v5-c-breadcrumb__list"
             role="list"
           >
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               Section Home
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1253,21 +1253,21 @@ exports[`Page Check page to verify skip to content points to main content region
                 </svg>
               </span>
               <a
-                class="pf-c-breadcrumb__link"
+                class="pf-v5-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1278,21 +1278,21 @@ exports[`Page Check page to verify skip to content points to main content region
                 </svg>
               </span>
               <a
-                class="pf-c-breadcrumb__link"
+                class="pf-v5-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1304,7 +1304,7 @@ exports[`Page Check page to verify skip to content points to main content region
               </span>
               <a
                 aria-current="page"
-                class="pf-c-breadcrumb__link pf-m-current"
+                class="pf-v5-c-breadcrumb__link pf-m-current"
                 href="#"
               >
                 Section Landing
@@ -1314,22 +1314,22 @@ exports[`Page Check page to verify skip to content points to main content region
         </nav>
       </section>
       <section
-        class="pf-c-page__main-section"
+        class="pf-v5-c-page__main-section"
       >
         Section with default background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-light"
+        class="pf-v5-c-page__main-section pf-m-light"
       >
         Section with light background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-200"
+        class="pf-v5-c-page__main-section pf-m-dark-200"
       >
         Section with dark background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-100"
+        class="pf-v5-c-page__main-section pf-m-dark-100"
       >
         Section with darker background
       </section>
@@ -1342,17 +1342,17 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page my-page-class"
+    class="pf-v5-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-c-page__header"
+      class="pf-v5-c-page__header"
     >
       <div
-        class="pf-c-page__header-brand"
+        class="pf-v5-c-page__header-brand"
       >
         <span
-          class="pf-c-page__header-brand-link"
+          class="pf-v5-c-page__header-brand-link"
         >
           Logo
         </span>
@@ -1361,36 +1361,36 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
     </header>
     <div
       aria-hidden="false"
-      class="pf-c-page__sidebar pf-m-expanded"
+      class="pf-v5-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     >
       <div
-        class="pf-c-page__sidebar-body"
+        class="pf-v5-c-page__sidebar-body"
       >
         Navigation
       </div>
     </div>
     <main
-      class="pf-c-page__main"
+      class="pf-v5-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-c-page__main-section"
+        class="pf-v5-c-page__main-section"
       >
         Section with default background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-light"
+        class="pf-v5-c-page__main-section pf-m-light"
       >
         Section with light background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-200"
+        class="pf-v5-c-page__main-section pf-m-dark-200"
       >
         Section with dark background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-100"
+        class="pf-v5-c-page__main-section pf-m-dark-100"
       >
         Section with darker background
       </section>
@@ -1403,23 +1403,23 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page my-page-class"
+    class="pf-v5-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-c-page__header"
+      class="pf-v5-c-page__header"
     >
       <div
-        class="pf-c-page__header-brand"
+        class="pf-v5-c-page__header-brand"
       >
         <span
-          class="pf-c-page__header-brand-link"
+          class="pf-v5-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-c-page__header-nav"
+        class="pf-v5-c-page__header-nav"
       >
         Navigation
       </div>
@@ -1427,41 +1427,41 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
     </header>
     <div
       aria-hidden="false"
-      class="pf-c-page__sidebar pf-m-expanded"
+      class="pf-v5-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-c-page__main"
+      class="pf-v5-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-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-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"
       >
         <nav
           aria-label="Breadcrumb"
-          class="pf-c-breadcrumb"
+          class="pf-v5-c-breadcrumb"
           data-ouia-component-id="OUIA-Generated-Breadcrumb-6"
           data-ouia-component-type="PF4/Breadcrumb"
           data-ouia-safe="true"
         >
           <ol
-            class="pf-c-breadcrumb__list"
+            class="pf-v5-c-breadcrumb__list"
             role="list"
           >
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               Section Home
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1472,21 +1472,21 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
                 </svg>
               </span>
               <a
-                class="pf-c-breadcrumb__link"
+                class="pf-v5-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1497,21 +1497,21 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
                 </svg>
               </span>
               <a
-                class="pf-c-breadcrumb__link"
+                class="pf-v5-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1523,7 +1523,7 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
               </span>
               <a
                 aria-current="page"
-                class="pf-c-breadcrumb__link pf-m-current"
+                class="pf-v5-c-breadcrumb__link pf-m-current"
                 href="#"
               >
                 Section Landing
@@ -1533,22 +1533,22 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
         </nav>
       </section>
       <section
-        class="pf-c-page__main-section"
+        class="pf-v5-c-page__main-section"
       >
         Section with default background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-light"
+        class="pf-v5-c-page__main-section pf-m-light"
       >
         Section with light background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-200"
+        class="pf-v5-c-page__main-section pf-m-dark-200"
       >
         Section with dark background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-100"
+        class="pf-v5-c-page__main-section pf-m-dark-100"
       >
         Section with darker background
       </section>
@@ -1561,23 +1561,23 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page my-page-class"
+    class="pf-v5-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-c-page__header"
+      class="pf-v5-c-page__header"
     >
       <div
-        class="pf-c-page__header-brand"
+        class="pf-v5-c-page__header-brand"
       >
         <span
-          class="pf-c-page__header-brand-link"
+          class="pf-v5-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-c-page__header-nav"
+        class="pf-v5-c-page__header-nav"
       >
         Navigation
       </div>
@@ -1585,41 +1585,41 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
     </header>
     <div
       aria-hidden="false"
-      class="pf-c-page__sidebar pf-m-expanded"
+      class="pf-v5-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-c-page__main"
+      class="pf-v5-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-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-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"
       >
         <nav
           aria-label="Breadcrumb"
-          class="pf-c-breadcrumb"
+          class="pf-v5-c-breadcrumb"
           data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
           data-ouia-component-type="PF4/Breadcrumb"
           data-ouia-safe="true"
         >
           <ol
-            class="pf-c-breadcrumb__list"
+            class="pf-v5-c-breadcrumb__list"
             role="list"
           >
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               Section Home
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1630,21 +1630,21 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
                 </svg>
               </span>
               <a
-                class="pf-c-breadcrumb__link"
+                class="pf-v5-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1655,21 +1655,21 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
                 </svg>
               </span>
               <a
-                class="pf-c-breadcrumb__link"
+                class="pf-v5-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1681,7 +1681,7 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
               </span>
               <a
                 aria-current="page"
-                class="pf-c-breadcrumb__link pf-m-current"
+                class="pf-v5-c-breadcrumb__link pf-m-current"
                 href="#"
               >
                 Section Landing
@@ -1691,22 +1691,22 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
         </nav>
       </section>
       <section
-        class="pf-c-page__main-section"
+        class="pf-v5-c-page__main-section"
       >
         Section with default background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-light"
+        class="pf-v5-c-page__main-section pf-m-light"
       >
         Section with light background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-200"
+        class="pf-v5-c-page__main-section pf-m-dark-200"
       >
         Section with dark background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-100"
+        class="pf-v5-c-page__main-section pf-m-dark-100"
       >
         Section with darker background
       </section>
@@ -1719,23 +1719,23 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page my-page-class"
+    class="pf-v5-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-c-page__header"
+      class="pf-v5-c-page__header"
     >
       <div
-        class="pf-c-page__header-brand"
+        class="pf-v5-c-page__header-brand"
       >
         <span
-          class="pf-c-page__header-brand-link"
+          class="pf-v5-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-c-page__header-nav"
+        class="pf-v5-c-page__header-nav"
       >
         Navigation
       </div>
@@ -1743,41 +1743,41 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
     </header>
     <div
       aria-hidden="false"
-      class="pf-c-page__sidebar pf-m-expanded"
+      class="pf-v5-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-c-page__main"
+      class="pf-v5-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-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-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"
       >
         <nav
           aria-label="Breadcrumb"
-          class="pf-c-breadcrumb"
+          class="pf-v5-c-breadcrumb"
           data-ouia-component-id="OUIA-Generated-Breadcrumb-5"
           data-ouia-component-type="PF4/Breadcrumb"
           data-ouia-safe="true"
         >
           <ol
-            class="pf-c-breadcrumb__list"
+            class="pf-v5-c-breadcrumb__list"
             role="list"
           >
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               Section Home
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1788,21 +1788,21 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
                 </svg>
               </span>
               <a
-                class="pf-c-breadcrumb__link"
+                class="pf-v5-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1813,21 +1813,21 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
                 </svg>
               </span>
               <a
-                class="pf-c-breadcrumb__link"
+                class="pf-v5-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1839,7 +1839,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
               </span>
               <a
                 aria-current="page"
-                class="pf-c-breadcrumb__link pf-m-current"
+                class="pf-v5-c-breadcrumb__link pf-m-current"
                 href="#"
               >
                 Section Landing
@@ -1849,22 +1849,22 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
         </nav>
       </section>
       <section
-        class="pf-c-page__main-section"
+        class="pf-v5-c-page__main-section"
       >
         Section with default background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-light"
+        class="pf-v5-c-page__main-section pf-m-light"
       >
         Section with light background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-200"
+        class="pf-v5-c-page__main-section pf-m-dark-200"
       >
         Section with dark background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-100"
+        class="pf-v5-c-page__main-section pf-m-dark-100"
       >
         Section with darker background
       </section>
@@ -1877,23 +1877,23 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page my-page-class"
+    class="pf-v5-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-c-page__header"
+      class="pf-v5-c-page__header"
     >
       <div
-        class="pf-c-page__header-brand"
+        class="pf-v5-c-page__header-brand"
       >
         <span
-          class="pf-c-page__header-brand-link"
+          class="pf-v5-c-page__header-brand-link"
         >
           Logo
         </span>
       </div>
       <div
-        class="pf-c-page__header-nav"
+        class="pf-v5-c-page__header-nav"
       >
         Navigation
       </div>
@@ -1901,41 +1901,41 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
     </header>
     <div
       aria-hidden="false"
-      class="pf-c-page__sidebar pf-m-expanded"
+      class="pf-v5-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
     <main
-      class="pf-c-page__main"
+      class="pf-v5-c-page__main"
       tabindex="-1"
     >
       <section
-        class="pf-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-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"
       >
         <nav
           aria-label="Breadcrumb"
-          class="pf-c-breadcrumb"
+          class="pf-v5-c-breadcrumb"
           data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
           data-ouia-component-type="PF4/Breadcrumb"
           data-ouia-safe="true"
         >
           <ol
-            class="pf-c-breadcrumb__list"
+            class="pf-v5-c-breadcrumb__list"
             role="list"
           >
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               Section Home
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1946,21 +1946,21 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
                 </svg>
               </span>
               <a
-                class="pf-c-breadcrumb__link"
+                class="pf-v5-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1971,21 +1971,21 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
                 </svg>
               </span>
               <a
-                class="pf-c-breadcrumb__link"
+                class="pf-v5-c-breadcrumb__link"
                 href="#"
               >
                 Section Title
               </a>
             </li>
             <li
-              class="pf-c-breadcrumb__item"
+              class="pf-v5-c-breadcrumb__item"
             >
               <span
-                class="pf-c-breadcrumb__item-divider"
+                class="pf-v5-c-breadcrumb__item-divider"
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 256 512"
@@ -1997,7 +1997,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
               </span>
               <a
                 aria-current="page"
-                class="pf-c-breadcrumb__link pf-m-current"
+                class="pf-v5-c-breadcrumb__link pf-m-current"
                 href="#"
               >
                 Section Landing
@@ -2007,22 +2007,22 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
         </nav>
       </section>
       <section
-        class="pf-c-page__main-section"
+        class="pf-v5-c-page__main-section"
       >
         Section with default background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-light"
+        class="pf-v5-c-page__main-section pf-m-light"
       >
         Section with light background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-200"
+        class="pf-v5-c-page__main-section pf-m-dark-200"
       >
         Section with dark background
       </section>
       <section
-        class="pf-c-page__main-section pf-m-dark-100"
+        class="pf-v5-c-page__main-section pf-m-dark-100"
       >
         Section with darker background
       </section>