@patternfly/react-core 5.0.0-alpha.15 → 5.0.0-alpha.16

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

@@ -23,51 +23,47 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              1 - 10
-            </b>
-             of 
-            <b>
-              0
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -228,51 +224,47 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              1 - 10
-            </b>
-             of 
-            <b>
-              0
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -433,51 +425,47 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              1 - 10
-            </b>
-             of 
-            <b>
-              0
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -638,51 +626,47 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              1 - 10
-            </b>
-             of 
-            <b>
-              0
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -843,51 +827,47 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              1 - 10
-            </b>
-             of 
-            <b>
-              0
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -1048,51 +1028,47 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              1 - 10
-            </b>
-             of 
-            <b>
-              0
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -1246,44 +1222,40 @@ exports[`Pagination component render custom pagination toggle 1`] = `
       -9 - 10 - 40 - 
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-c-menu-toggle__text"
+        >
+          -9 - 10 - 40 - 
+        </span>
+        <span
+          class="pf-c-menu-toggle__controls"
         >
           <span
-            class="pf-c-menu-toggle__text"
-          >
-            -9 - 10 - 40 - 
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -1448,51 +1420,47 @@ exports[`Pagination component render custom perPageOptions 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              40
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -1657,51 +1625,47 @@ exports[`Pagination component render custom start end 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              5 - 15
-            </b>
-             of 
-            <b>
-              40
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -2026,51 +1990,47 @@ exports[`Pagination component render last page 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              11 - 20
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -2235,51 +2195,47 @@ exports[`Pagination component render limited number of pages 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              -19 - 20
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -2435,51 +2391,47 @@ exports[`Pagination component render should render correctly bottom 1`] = `
     style="--pf-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-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-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__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -2632,51 +2584,47 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
     style="--pf-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-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-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__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -2841,51 +2789,47 @@ exports[`Pagination component render should render correctly compact 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -2976,52 +2920,48 @@ exports[`Pagination component render should render correctly disabled 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -3189,51 +3129,47 @@ exports[`Pagination component render should render correctly sticky 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -3398,51 +3334,47 @@ exports[`Pagination component render should render correctly top 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              20
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -3607,51 +3539,47 @@ exports[`Pagination component render titles 1`] = `
        values
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              40
-            </b>
-             values
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -3816,51 +3744,47 @@ exports[`Pagination component render up drop direction 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              -9 - 10
-            </b>
-             of 
-            <b>
-              40
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"
@@ -4025,51 +3949,47 @@ exports[`Pagination component render zero results 1`] = `
        
     </div>
     <div>
-      <div
-        style="display: contents;"
+      <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"
       >
-        <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-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__text"
-          >
-            <b>
-              0 - 0
-            </b>
-             of 
-            <b>
-              0
-            </b>
-             
-          </span>
-          <span
-            class="pf-c-menu-toggle__controls"
+            class="pf-c-menu-toggle__toggle-icon"
           >
-            <span
-              class="pf-c-menu-toggle__toggle-icon"
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
             >
-              <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"