@patternfly/react-core 5.0.0-alpha.1 → 5.0.0-alpha.100

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

@@ -3,15 +3,15 @@
 exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
+    class="pf-v5-c-pagination pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
     data-ouia-component-id="OUIA-Generated-Pagination-top-44"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         1 - 10
@@ -23,63 +23,57 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            1 - 10
+          </b>
+           of 
+          <b>
+            0
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              1 - 10
-            </b>
-             of 
-            <b>
-              0
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-179"
           data-ouia-component-type="PF4/Button"
@@ -89,12 +83,10 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -103,12 +95,12 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-180"
           data-ouia-component-type="PF4/Button"
@@ -118,12 +110,10 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -132,11 +122,11 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="2"
           min="1"
           type="number"
@@ -144,12 +134,12 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
         />
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-181"
           data-ouia-component-type="PF4/Button"
@@ -158,12 +148,10 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -172,12 +160,12 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-182"
           data-ouia-component-type="PF4/Button"
@@ -186,12 +174,10 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -208,15 +194,15 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
 exports[`Pagination API verify insetLg inset breakpoints 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
+    class="pf-v5-c-pagination pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
     data-ouia-component-id="OUIA-Generated-Pagination-top-42"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         1 - 10
@@ -228,63 +214,57 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            1 - 10
+          </b>
+           of 
+          <b>
+            0
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              1 - 10
-            </b>
-             of 
-            <b>
-              0
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-171"
           data-ouia-component-type="PF4/Button"
@@ -294,12 +274,10 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -308,12 +286,12 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-172"
           data-ouia-component-type="PF4/Button"
@@ -323,12 +301,10 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -337,11 +313,11 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="2"
           min="1"
           type="number"
@@ -349,12 +325,12 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
         />
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-173"
           data-ouia-component-type="PF4/Button"
@@ -363,12 +339,10 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -377,12 +351,12 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-174"
           data-ouia-component-type="PF4/Button"
@@ -391,12 +365,10 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -413,15 +385,15 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
 exports[`Pagination API verify insetMd inset breakpoints 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
+    class="pf-v5-c-pagination pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
     data-ouia-component-id="OUIA-Generated-Pagination-top-41"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         1 - 10
@@ -433,63 +405,57 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            1 - 10
+          </b>
+           of 
+          <b>
+            0
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              1 - 10
-            </b>
-             of 
-            <b>
-              0
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-167"
           data-ouia-component-type="PF4/Button"
@@ -499,12 +465,10 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -513,12 +477,12 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-168"
           data-ouia-component-type="PF4/Button"
@@ -528,12 +492,10 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -542,11 +504,11 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="2"
           min="1"
           type="number"
@@ -554,12 +516,12 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
         />
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-169"
           data-ouia-component-type="PF4/Button"
@@ -568,12 +530,10 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -582,12 +542,12 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-170"
           data-ouia-component-type="PF4/Button"
@@ -596,12 +556,10 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -618,15 +576,15 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
 exports[`Pagination API verify insetNone inset breakpoints 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
+    class="pf-v5-c-pagination pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
     data-ouia-component-id="OUIA-Generated-Pagination-top-39"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         1 - 10
@@ -638,63 +596,57 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            1 - 10
+          </b>
+           of 
+          <b>
+            0
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              1 - 10
-            </b>
-             of 
-            <b>
-              0
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-159"
           data-ouia-component-type="PF4/Button"
@@ -704,12 +656,10 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -718,12 +668,12 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-160"
           data-ouia-component-type="PF4/Button"
@@ -733,12 +683,10 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -747,11 +695,11 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="2"
           min="1"
           type="number"
@@ -759,12 +707,12 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
         />
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-161"
           data-ouia-component-type="PF4/Button"
@@ -773,12 +721,10 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -787,12 +733,12 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-162"
           data-ouia-component-type="PF4/Button"
@@ -801,12 +747,10 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -823,15 +767,15 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
 exports[`Pagination API verify insetSm inset breakpoints 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
+    class="pf-v5-c-pagination pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
     data-ouia-component-id="OUIA-Generated-Pagination-top-40"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         1 - 10
@@ -843,63 +787,57 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            1 - 10
+          </b>
+           of 
+          <b>
+            0
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              1 - 10
-            </b>
-             of 
-            <b>
-              0
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-163"
           data-ouia-component-type="PF4/Button"
@@ -909,12 +847,10 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -923,12 +859,12 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-164"
           data-ouia-component-type="PF4/Button"
@@ -938,12 +874,10 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -952,11 +886,11 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="2"
           min="1"
           type="number"
@@ -964,12 +898,12 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
         />
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-165"
           data-ouia-component-type="PF4/Button"
@@ -978,12 +912,10 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -992,12 +924,12 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-166"
           data-ouia-component-type="PF4/Button"
@@ -1006,12 +938,10 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -1028,15 +958,15 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
 exports[`Pagination API verify insetXl inset breakpoints 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
+    class="pf-v5-c-pagination pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
     data-ouia-component-id="OUIA-Generated-Pagination-top-43"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         1 - 10
@@ -1048,63 +978,57 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            1 - 10
+          </b>
+           of 
+          <b>
+            0
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              1 - 10
-            </b>
-             of 
-            <b>
-              0
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-175"
           data-ouia-component-type="PF4/Button"
@@ -1114,12 +1038,10 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -1128,12 +1050,12 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-176"
           data-ouia-component-type="PF4/Button"
@@ -1143,12 +1065,10 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -1157,11 +1077,11 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="2"
           min="1"
           type="number"
@@ -1169,12 +1089,12 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
         />
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-177"
           data-ouia-component-type="PF4/Button"
@@ -1183,12 +1103,10 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -1197,12 +1115,12 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-178"
           data-ouia-component-type="PF4/Button"
@@ -1211,12 +1129,10 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -1233,69 +1149,63 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
 exports[`Pagination component render custom pagination toggle 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination"
+    class="pf-v5-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-12"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       -9 - 10 - 40 - 
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          -9 - 10 - 40 - 
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            -9 - 10 - 40 - 
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-51"
           data-ouia-component-type="PF4/Button"
@@ -1305,12 +1215,10 @@ exports[`Pagination component render custom pagination toggle 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -1319,12 +1227,12 @@ exports[`Pagination component render custom pagination toggle 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-52"
           data-ouia-component-type="PF4/Button"
@@ -1334,12 +1242,10 @@ exports[`Pagination component render custom pagination toggle 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -1348,11 +1254,11 @@ exports[`Pagination component render custom pagination toggle 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="4"
           min="1"
           type="number"
@@ -1365,12 +1271,12 @@ exports[`Pagination component render custom pagination toggle 1`] = `
         </span>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-53"
           data-ouia-component-type="PF4/Button"
@@ -1379,12 +1285,10 @@ exports[`Pagination component render custom pagination toggle 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -1393,12 +1297,12 @@ exports[`Pagination component render custom pagination toggle 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-54"
           data-ouia-component-type="PF4/Button"
@@ -1407,12 +1311,10 @@ exports[`Pagination component render custom pagination toggle 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -1428,15 +1330,15 @@ exports[`Pagination component render custom pagination toggle 1`] = `
 exports[`Pagination component render custom perPageOptions 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination"
+    class="pf-v5-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-8"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         -9 - 10
@@ -1448,63 +1350,57 @@ exports[`Pagination component render custom perPageOptions 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            -9 - 10
+          </b>
+           of 
+          <b>
+            40
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              40
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-35"
           data-ouia-component-type="PF4/Button"
@@ -1514,12 +1410,10 @@ exports[`Pagination component render custom perPageOptions 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -1528,12 +1422,12 @@ exports[`Pagination component render custom perPageOptions 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-36"
           data-ouia-component-type="PF4/Button"
@@ -1543,12 +1437,10 @@ exports[`Pagination component render custom perPageOptions 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -1557,11 +1449,11 @@ exports[`Pagination component render custom perPageOptions 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="4"
           min="1"
           type="number"
@@ -1574,12 +1466,12 @@ exports[`Pagination component render custom perPageOptions 1`] = `
         </span>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-37"
           data-ouia-component-type="PF4/Button"
@@ -1588,12 +1480,10 @@ exports[`Pagination component render custom perPageOptions 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -1602,12 +1492,12 @@ exports[`Pagination component render custom perPageOptions 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-38"
           data-ouia-component-type="PF4/Button"
@@ -1616,12 +1506,10 @@ exports[`Pagination component render custom perPageOptions 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -1637,15 +1525,15 @@ exports[`Pagination component render custom perPageOptions 1`] = `
 exports[`Pagination component render custom start end 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination"
+    class="pf-v5-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-10"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         -9 - 10
@@ -1657,63 +1545,57 @@ exports[`Pagination component render custom start end 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            5 - 15
+          </b>
+           of 
+          <b>
+            40
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              5 - 15
-            </b>
-             of 
-            <b>
-              40
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="false"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-43"
           data-ouia-component-type="PF4/Button"
@@ -1722,12 +1604,10 @@ exports[`Pagination component render custom start end 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -1736,12 +1616,12 @@ exports[`Pagination component render custom start end 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-44"
           data-ouia-component-type="PF4/Button"
@@ -1750,12 +1630,10 @@ exports[`Pagination component render custom start end 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -1764,11 +1642,11 @@ exports[`Pagination component render custom start end 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="4"
           min="1"
           type="number"
@@ -1781,12 +1659,12 @@ exports[`Pagination component render custom start end 1`] = `
         </span>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-45"
           data-ouia-component-type="PF4/Button"
@@ -1795,12 +1673,10 @@ exports[`Pagination component render custom start end 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -1809,12 +1685,12 @@ exports[`Pagination component render custom start end 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-46"
           data-ouia-component-type="PF4/Button"
@@ -1823,12 +1699,10 @@ exports[`Pagination component render custom start end 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -1844,15 +1718,15 @@ exports[`Pagination component render custom start end 1`] = `
 exports[`Pagination component render empty per page options 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination"
+    class="pf-v5-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-9"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         -9 - 10
@@ -1865,15 +1739,15 @@ exports[`Pagination component render empty per page options 1`] = `
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-39"
           data-ouia-component-type="PF4/Button"
@@ -1883,12 +1757,10 @@ exports[`Pagination component render empty per page options 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -1897,12 +1769,12 @@ exports[`Pagination component render empty per page options 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-40"
           data-ouia-component-type="PF4/Button"
@@ -1912,12 +1784,10 @@ exports[`Pagination component render empty per page options 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -1926,11 +1796,11 @@ exports[`Pagination component render empty per page options 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="4"
           min="1"
           type="number"
@@ -1943,12 +1813,12 @@ exports[`Pagination component render empty per page options 1`] = `
         </span>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-41"
           data-ouia-component-type="PF4/Button"
@@ -1957,12 +1827,10 @@ exports[`Pagination component render empty per page options 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -1971,12 +1839,12 @@ exports[`Pagination component render empty per page options 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-42"
           data-ouia-component-type="PF4/Button"
@@ -1985,12 +1853,10 @@ exports[`Pagination component render empty per page options 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -2006,15 +1872,15 @@ exports[`Pagination component render empty per page options 1`] = `
 exports[`Pagination component render last page 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination"
+    class="pf-v5-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-7"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         11 - 20
@@ -2026,63 +1892,57 @@ exports[`Pagination component render last page 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            11 - 20
+          </b>
+           of 
+          <b>
+            20
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              11 - 20
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="false"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-31"
           data-ouia-component-type="PF4/Button"
@@ -2091,12 +1951,10 @@ exports[`Pagination component render last page 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -2105,12 +1963,12 @@ exports[`Pagination component render last page 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-32"
           data-ouia-component-type="PF4/Button"
@@ -2119,12 +1977,10 @@ exports[`Pagination component render last page 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -2133,11 +1989,11 @@ exports[`Pagination component render last page 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="2"
           min="1"
           type="number"
@@ -2150,12 +2006,12 @@ exports[`Pagination component render last page 1`] = `
         </span>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-33"
           data-ouia-component-type="PF4/Button"
@@ -2165,12 +2021,10 @@ exports[`Pagination component render last page 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -2179,12 +2033,12 @@ exports[`Pagination component render last page 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="true"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-34"
           data-ouia-component-type="PF4/Button"
@@ -2194,12 +2048,10 @@ exports[`Pagination component render last page 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -2215,15 +2067,15 @@ exports[`Pagination component render last page 1`] = `
 exports[`Pagination component render limited number of pages 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination"
+    class="pf-v5-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-5"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         -19 - 20
@@ -2235,63 +2087,57 @@ exports[`Pagination component render limited number of pages 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            -19 - 20
+          </b>
+           of 
+          <b>
+            20
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              -19 - 20
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-23"
           data-ouia-component-type="PF4/Button"
@@ -2301,12 +2147,10 @@ exports[`Pagination component render limited number of pages 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -2315,12 +2159,12 @@ exports[`Pagination component render limited number of pages 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-24"
           data-ouia-component-type="PF4/Button"
@@ -2330,12 +2174,10 @@ exports[`Pagination component render limited number of pages 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -2344,11 +2186,11 @@ exports[`Pagination component render limited number of pages 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           disabled=""
           max="1"
           min="1"
@@ -2362,12 +2204,12 @@ exports[`Pagination component render limited number of pages 1`] = `
         </span>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-25"
           data-ouia-component-type="PF4/Button"
@@ -2377,12 +2219,10 @@ exports[`Pagination component render limited number of pages 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -2391,12 +2231,12 @@ exports[`Pagination component render limited number of pages 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="true"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-26"
           data-ouia-component-type="PF4/Button"
@@ -2406,12 +2246,10 @@ exports[`Pagination component render limited number of pages 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -2427,71 +2265,65 @@ exports[`Pagination component render limited number of pages 1`] = `
 exports[`Pagination component render should render correctly bottom 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination pf-m-bottom"
+    class="pf-v5-c-pagination pf-m-bottom"
     data-ouia-component-id="OUIA-Generated-Pagination-bottom-1"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-bottom-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-bottom-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-bottom-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            -9 - 10
+          </b>
+           of 
+          <b>
+            20
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-5"
           data-ouia-component-type="PF4/Button"
@@ -2501,12 +2333,10 @@ exports[`Pagination component render should render correctly bottom 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -2515,12 +2345,12 @@ exports[`Pagination component render should render correctly bottom 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-6"
           data-ouia-component-type="PF4/Button"
@@ -2530,12 +2360,10 @@ exports[`Pagination component render should render correctly bottom 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -2544,11 +2372,11 @@ exports[`Pagination component render should render correctly bottom 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="2"
           min="1"
           type="number"
@@ -2561,12 +2389,12 @@ exports[`Pagination component render should render correctly bottom 1`] = `
         </span>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-7"
           data-ouia-component-type="PF4/Button"
@@ -2575,12 +2403,10 @@ exports[`Pagination component render should render correctly bottom 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -2589,12 +2415,12 @@ exports[`Pagination component render should render correctly bottom 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-8"
           data-ouia-component-type="PF4/Button"
@@ -2603,12 +2429,10 @@ exports[`Pagination component render should render correctly bottom 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -2624,71 +2448,65 @@ exports[`Pagination component render should render correctly bottom 1`] = `
 exports[`Pagination component render should render correctly bottom sticky 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination pf-m-bottom pf-m-sticky"
+    class="pf-v5-c-pagination pf-m-bottom pf-m-sticky"
     data-ouia-component-id="OUIA-Generated-Pagination-bottom-2"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-bottom-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-bottom-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-bottom-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            -9 - 10
+          </b>
+           of 
+          <b>
+            20
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-15"
           data-ouia-component-type="PF4/Button"
@@ -2698,12 +2516,10 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -2712,12 +2528,12 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-16"
           data-ouia-component-type="PF4/Button"
@@ -2727,12 +2543,10 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -2741,11 +2555,11 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="2"
           min="1"
           type="number"
@@ -2758,12 +2572,12 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
         </span>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-17"
           data-ouia-component-type="PF4/Button"
@@ -2772,12 +2586,10 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -2786,12 +2598,12 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-18"
           data-ouia-component-type="PF4/Button"
@@ -2800,12 +2612,10 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -2821,15 +2631,15 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
 exports[`Pagination component render should render correctly compact 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination pf-m-compact"
+    class="pf-v5-c-pagination pf-m-compact"
     data-ouia-component-id="OUIA-Generated-Pagination-top-2"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         -9 - 10
@@ -2841,63 +2651,57 @@ exports[`Pagination component render should render correctly compact 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            -9 - 10
+          </b>
+           of 
+          <b>
+            20
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-9"
           data-ouia-component-type="PF4/Button"
@@ -2907,12 +2711,10 @@ exports[`Pagination component render should render correctly compact 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -2921,12 +2723,12 @@ exports[`Pagination component render should render correctly compact 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-10"
           data-ouia-component-type="PF4/Button"
@@ -2935,12 +2737,10 @@ exports[`Pagination component render should render correctly compact 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -2956,15 +2756,15 @@ exports[`Pagination component render should render correctly compact 1`] = `
 exports[`Pagination component render should render correctly disabled 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination"
+    class="pf-v5-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-4"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         -9 - 10
@@ -2976,64 +2776,58 @@ exports[`Pagination component render should render correctly disabled 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
+        disabled=""
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
-          disabled=""
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            -9 - 10
+          </b>
+           of 
+          <b>
+            20
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-19"
           data-ouia-component-type="PF4/Button"
@@ -3043,12 +2837,10 @@ exports[`Pagination component render should render correctly disabled 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -3057,12 +2849,12 @@ exports[`Pagination component render should render correctly disabled 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-20"
           data-ouia-component-type="PF4/Button"
@@ -3072,12 +2864,10 @@ exports[`Pagination component render should render correctly disabled 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -3086,11 +2876,11 @@ exports[`Pagination component render should render correctly disabled 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           disabled=""
           max="2"
           min="1"
@@ -3104,12 +2894,12 @@ exports[`Pagination component render should render correctly disabled 1`] = `
         </span>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-21"
           data-ouia-component-type="PF4/Button"
@@ -3119,12 +2909,10 @@ exports[`Pagination component render should render correctly disabled 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -3133,12 +2921,12 @@ exports[`Pagination component render should render correctly disabled 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="true"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-22"
           data-ouia-component-type="PF4/Button"
@@ -3148,12 +2936,10 @@ exports[`Pagination component render should render correctly disabled 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -3169,15 +2955,15 @@ exports[`Pagination component render should render correctly disabled 1`] = `
 exports[`Pagination component render should render correctly sticky 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination pf-m-sticky"
+    class="pf-v5-c-pagination pf-m-sticky"
     data-ouia-component-id="OUIA-Generated-Pagination-top-3"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         -9 - 10
@@ -3189,63 +2975,57 @@ exports[`Pagination component render should render correctly sticky 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            -9 - 10
+          </b>
+           of 
+          <b>
+            20
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-11"
           data-ouia-component-type="PF4/Button"
@@ -3255,12 +3035,10 @@ exports[`Pagination component render should render correctly sticky 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -3269,12 +3047,12 @@ exports[`Pagination component render should render correctly sticky 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-12"
           data-ouia-component-type="PF4/Button"
@@ -3284,12 +3062,10 @@ exports[`Pagination component render should render correctly sticky 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -3298,11 +3074,11 @@ exports[`Pagination component render should render correctly sticky 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="2"
           min="1"
           type="number"
@@ -3315,12 +3091,12 @@ exports[`Pagination component render should render correctly sticky 1`] = `
         </span>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-13"
           data-ouia-component-type="PF4/Button"
@@ -3329,12 +3105,10 @@ exports[`Pagination component render should render correctly sticky 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -3343,12 +3117,12 @@ exports[`Pagination component render should render correctly sticky 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-14"
           data-ouia-component-type="PF4/Button"
@@ -3357,12 +3131,10 @@ exports[`Pagination component render should render correctly sticky 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -3378,15 +3150,15 @@ exports[`Pagination component render should render correctly sticky 1`] = `
 exports[`Pagination component render should render correctly top 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination"
+    class="pf-v5-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-1"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         -9 - 10
@@ -3398,63 +3170,57 @@ exports[`Pagination component render should render correctly top 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            -9 - 10
+          </b>
+           of 
+          <b>
+            20
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-1"
           data-ouia-component-type="PF4/Button"
@@ -3464,12 +3230,10 @@ exports[`Pagination component render should render correctly top 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -3478,12 +3242,12 @@ exports[`Pagination component render should render correctly top 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-2"
           data-ouia-component-type="PF4/Button"
@@ -3493,12 +3257,10 @@ exports[`Pagination component render should render correctly top 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -3507,11 +3269,11 @@ exports[`Pagination component render should render correctly top 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="2"
           min="1"
           type="number"
@@ -3524,12 +3286,12 @@ exports[`Pagination component render should render correctly top 1`] = `
         </span>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-3"
           data-ouia-component-type="PF4/Button"
@@ -3538,12 +3300,10 @@ exports[`Pagination component render should render correctly top 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -3552,12 +3312,12 @@ exports[`Pagination component render should render correctly top 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-4"
           data-ouia-component-type="PF4/Button"
@@ -3566,12 +3326,10 @@ exports[`Pagination component render should render correctly top 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -3587,15 +3345,15 @@ exports[`Pagination component render should render correctly top 1`] = `
 exports[`Pagination component render titles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination"
+    class="pf-v5-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-11"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         -9 - 10
@@ -3607,63 +3365,57 @@ exports[`Pagination component render titles 1`] = `
        values
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            -9 - 10
+          </b>
+           of 
+          <b>
+            40
+          </b>
+           values
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              40
-            </b>
-             values
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-47"
           data-ouia-component-type="PF4/Button"
@@ -3673,12 +3425,10 @@ exports[`Pagination component render titles 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -3687,12 +3437,12 @@ exports[`Pagination component render titles 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-48"
           data-ouia-component-type="PF4/Button"
@@ -3702,12 +3452,10 @@ exports[`Pagination component render titles 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -3716,11 +3464,11 @@ exports[`Pagination component render titles 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="4"
           min="1"
           type="number"
@@ -3733,12 +3481,12 @@ exports[`Pagination component render titles 1`] = `
         </span>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-49"
           data-ouia-component-type="PF4/Button"
@@ -3747,12 +3495,10 @@ exports[`Pagination component render titles 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -3761,12 +3507,12 @@ exports[`Pagination component render titles 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-50"
           data-ouia-component-type="PF4/Button"
@@ -3775,12 +3521,10 @@ exports[`Pagination component render titles 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -3796,15 +3540,15 @@ exports[`Pagination component render titles 1`] = `
 exports[`Pagination component render up drop direction 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination"
+    class="pf-v5-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-13"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         -9 - 10
@@ -3816,63 +3560,57 @@ exports[`Pagination component render up drop direction 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            -9 - 10
+          </b>
+           of 
+          <b>
+            40
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              40
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-55"
           data-ouia-component-type="PF4/Button"
@@ -3882,12 +3620,10 @@ exports[`Pagination component render up drop direction 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -3896,12 +3632,12 @@ exports[`Pagination component render up drop direction 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-56"
           data-ouia-component-type="PF4/Button"
@@ -3911,12 +3647,10 @@ exports[`Pagination component render up drop direction 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -3925,11 +3659,11 @@ exports[`Pagination component render up drop direction 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           max="4"
           min="1"
           type="number"
@@ -3942,12 +3676,12 @@ exports[`Pagination component render up drop direction 1`] = `
         </span>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-57"
           data-ouia-component-type="PF4/Button"
@@ -3956,12 +3690,10 @@ exports[`Pagination component render up drop direction 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -3970,12 +3702,12 @@ exports[`Pagination component render up drop direction 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-58"
           data-ouia-component-type="PF4/Button"
@@ -3984,12 +3716,10 @@ exports[`Pagination component render up drop direction 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
@@ -4005,15 +3735,15 @@ exports[`Pagination component render up drop direction 1`] = `
 exports[`Pagination component render zero results 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-pagination"
+    class="pf-v5-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-6"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+    style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-pagination__total-items"
+      class="pf-v5-c-pagination__total-items"
     >
       <b>
         0 - 0
@@ -4025,63 +3755,57 @@ exports[`Pagination component render zero results 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+        id="options-menu-top-toggle"
+        type="button"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="pf-c-menu-toggle pf-m-plain pf-m-text"
-          id="options-menu-top-toggle"
-          type="button"
+        <span
+          class="pf-v5-c-menu-toggle__text"
+        >
+          <b>
+            0 - 0
+          </b>
+           of 
+          <b>
+            0
+          </b>
+           
+        </span>
+        <span
+          class="pf-v5-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            <b>
-              0 - 0
-            </b>
-             of 
-            <b>
-              0
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
-          >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
             >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
-      class="pf-c-pagination__nav"
+      class="pf-v5-c-pagination__nav"
     >
       <div
-        class="pf-c-pagination__nav-control pf-m-first"
+        class="pf-v5-c-pagination__nav-control pf-m-first"
       >
         <button
           aria-disabled="true"
           aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
           data-ouia-component-id="OUIA-Generated-Button-plain-27"
           data-ouia-component-type="PF4/Button"
@@ -4091,12 +3815,10 @@ exports[`Pagination component render zero results 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 512"
-            width="1em"
           >
             <path
               d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
@@ -4105,12 +3827,12 @@ exports[`Pagination component render zero results 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
           data-ouia-component-id="OUIA-Generated-Button-plain-28"
           data-ouia-component-type="PF4/Button"
@@ -4120,12 +3842,10 @@ exports[`Pagination component render zero results 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -4134,11 +3854,11 @@ exports[`Pagination component render zero results 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-page-select"
+        class="pf-v5-c-pagination__nav-page-select"
       >
         <input
           aria-label="Current page"
-          class="pf-c-form-control"
+          class="pf-v5-c-form-control"
           disabled=""
           max="0"
           min="1"
@@ -4152,12 +3872,12 @@ exports[`Pagination component render zero results 1`] = `
         </span>
       </div>
       <div
-        class="pf-c-pagination__nav-control"
+        class="pf-v5-c-pagination__nav-control"
       >
         <button
           aria-disabled="true"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-29"
           data-ouia-component-type="PF4/Button"
@@ -4167,12 +3887,10 @@ exports[`Pagination component render zero results 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             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"
@@ -4181,12 +3899,12 @@ exports[`Pagination component render zero results 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-pagination__nav-control pf-m-last"
+        class="pf-v5-c-pagination__nav-control pf-m-last"
       >
         <button
           aria-disabled="true"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-30"
           data-ouia-component-type="PF4/Button"
@@ -4196,12 +3914,10 @@ exports[`Pagination component render zero results 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-v5-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"