@patternfly/react-core 4.268.2 → 5.0.0-alpha.2

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

@@ -22,53 +22,49 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-45"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
+          >
+            <b>
+              1 - 10
+            </b>
+             of 
+            <b>
+              0
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -141,7 +137,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
         <input
           aria-label="Current page"
           class="pf-c-form-control"
-          max="1"
+          max="2"
           min="1"
           type="number"
           value="1"
@@ -151,14 +147,13 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
         class="pf-c-pagination__nav-control"
       >
         <button
-          aria-disabled="true"
+          aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-181"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
-          disabled=""
           type="button"
         >
           <svg
@@ -180,14 +175,13 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
         class="pf-c-pagination__nav-control pf-m-last"
       >
         <button
-          aria-disabled="true"
+          aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-182"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
-          disabled=""
           type="button"
         >
           <svg
@@ -233,53 +227,49 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-43"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <b>
+              1 - 10
+            </b>
+             of 
+            <b>
+              0
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
+          >
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -352,7 +342,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
         <input
           aria-label="Current page"
           class="pf-c-form-control"
-          max="1"
+          max="2"
           min="1"
           type="number"
           value="1"
@@ -362,14 +352,13 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
         class="pf-c-pagination__nav-control"
       >
         <button
-          aria-disabled="true"
+          aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-173"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
-          disabled=""
           type="button"
         >
           <svg
@@ -391,14 +380,13 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
         class="pf-c-pagination__nav-control pf-m-last"
       >
         <button
-          aria-disabled="true"
+          aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-174"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
-          disabled=""
           type="button"
         >
           <svg
@@ -444,53 +432,49 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-42"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <b>
+              1 - 10
+            </b>
+             of 
+            <b>
+              0
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
+          >
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -563,7 +547,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
         <input
           aria-label="Current page"
           class="pf-c-form-control"
-          max="1"
+          max="2"
           min="1"
           type="number"
           value="1"
@@ -573,14 +557,13 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
         class="pf-c-pagination__nav-control"
       >
         <button
-          aria-disabled="true"
+          aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-169"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
-          disabled=""
           type="button"
         >
           <svg
@@ -602,14 +585,13 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
         class="pf-c-pagination__nav-control pf-m-last"
       >
         <button
-          aria-disabled="true"
+          aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-170"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
-          disabled=""
           type="button"
         >
           <svg
@@ -655,53 +637,49 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-40"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <b>
+              1 - 10
+            </b>
+             of 
+            <b>
+              0
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
+          >
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -774,7 +752,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
         <input
           aria-label="Current page"
           class="pf-c-form-control"
-          max="1"
+          max="2"
           min="1"
           type="number"
           value="1"
@@ -784,14 +762,13 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
         class="pf-c-pagination__nav-control"
       >
         <button
-          aria-disabled="true"
+          aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-161"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
-          disabled=""
           type="button"
         >
           <svg
@@ -813,14 +790,13 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
         class="pf-c-pagination__nav-control pf-m-last"
       >
         <button
-          aria-disabled="true"
+          aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-162"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
-          disabled=""
           type="button"
         >
           <svg
@@ -866,53 +842,49 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-41"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
+          >
+            <b>
+              1 - 10
+            </b>
+             of 
+            <b>
+              0
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -985,7 +957,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
         <input
           aria-label="Current page"
           class="pf-c-form-control"
-          max="1"
+          max="2"
           min="1"
           type="number"
           value="1"
@@ -995,14 +967,13 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
         class="pf-c-pagination__nav-control"
       >
         <button
-          aria-disabled="true"
+          aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-165"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
-          disabled=""
           type="button"
         >
           <svg
@@ -1024,14 +995,13 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
         class="pf-c-pagination__nav-control pf-m-last"
       >
         <button
-          aria-disabled="true"
+          aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-166"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
-          disabled=""
           type="button"
         >
           <svg
@@ -1077,53 +1047,49 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-44"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <b>
+              1 - 10
+            </b>
+             of 
+            <b>
+              0
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
+          >
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -1196,7 +1162,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
         <input
           aria-label="Current page"
           class="pf-c-form-control"
-          max="1"
+          max="2"
           min="1"
           type="number"
           value="1"
@@ -1206,14 +1172,13 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
         class="pf-c-pagination__nav-control"
       >
         <button
-          aria-disabled="true"
+          aria-disabled="false"
           aria-label="Go to next page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-c-button pf-m-plain"
           data-action="next"
           data-ouia-component-id="OUIA-Generated-Button-plain-177"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
-          disabled=""
           type="button"
         >
           <svg
@@ -1235,14 +1200,13 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
         class="pf-c-pagination__nav-control pf-m-last"
       >
         <button
-          aria-disabled="true"
+          aria-disabled="false"
           aria-label="Go to last page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
+          class="pf-c-button pf-m-plain"
           data-action="last"
           data-ouia-component-id="OUIA-Generated-Button-plain-178"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
-          disabled=""
           type="button"
         >
           <svg
@@ -1281,46 +1245,42 @@ exports[`Pagination component render custom pagination toggle 1`] = `
     >
       -9 - 10 - 40 - 
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          -9 - 10 - 40 - 
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
+          >
+            -9 - 10 - 40 - 
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -1487,53 +1447,49 @@ exports[`Pagination component render custom perPageOptions 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            -9 - 10
-          </b>
-           of 
-          <b>
-            40
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
+          >
+            <b>
+              -9 - 10
+            </b>
+             of 
+            <b>
+              40
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -1700,53 +1656,49 @@ exports[`Pagination component render custom start end 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            5 - 15
-          </b>
-           of 
-          <b>
-            40
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-11"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <b>
+              5 - 15
+            </b>
+             of 
+            <b>
+              40
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
+          >
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -1911,15 +1863,6 @@ exports[`Pagination component render empty per page options 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
-      />
-    </div>
     <nav
       aria-label="Pagination"
       class="pf-c-pagination__nav"
@@ -2082,53 +2025,49 @@ exports[`Pagination component render last page 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            11 - 20
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <b>
+              11 - 20
+            </b>
+             of 
+            <b>
+              20
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
+          >
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -2295,53 +2234,49 @@ exports[`Pagination component render limited number of pages 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            -19 - 20
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <b>
+              -19 - 20
+            </b>
+             of 
+            <b>
+              20
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
+          >
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -2499,53 +2434,49 @@ exports[`Pagination component render should render correctly bottom 1`] = `
     id="options-menu-bottom-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
-    <div
-      class="pf-c-options-menu pf-m-top"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            -9 - 10
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-bottom-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
+          >
+            <b>
+              -9 - 10
+            </b>
+             of 
+            <b>
+              20
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -2700,53 +2631,49 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
     id="options-menu-bottom-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
-    <div
-      class="pf-c-options-menu pf-m-top"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            -9 - 10
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-bottom-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <b>
+              -9 - 10
+            </b>
+             of 
+            <b>
+              20
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
+          >
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -2891,215 +2818,6 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
 </DocumentFragment>
 `;
 
-exports[`Pagination component render should render correctly button variant 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-17"
-    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;"
-  >
-    <div
-      class="pf-c-pagination__total-items"
-    >
-      <b>
-        -9 - 10
-      </b>
-       of 
-      <b>
-        20
-      </b>
-       
-    </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label=""
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-18"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="options-menu-top-toggle"
-        type="button"
-      >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            -9 - 10
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </span>
-        <span
-          class="pf-c-options-menu__toggle-icon"
-        >
-          <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>
-      </button>
-    </div>
-    <nav
-      aria-label="Pagination"
-      class="pf-c-pagination__nav"
-    >
-      <div
-        class="pf-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"
-          data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-71"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          disabled=""
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            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"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-c-pagination__nav-control"
-      >
-        <button
-          aria-disabled="true"
-          aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
-          data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-72"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          disabled=""
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            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"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-c-pagination__nav-page-select"
-      >
-        <input
-          aria-label="Current page"
-          class="pf-c-form-control"
-          max="2"
-          min="1"
-          type="number"
-          value="1"
-        />
-        <span
-          aria-hidden="true"
-        >
-          of 2
-        </span>
-      </div>
-      <div
-        class="pf-c-pagination__nav-control"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Go to next page"
-          class="pf-c-button pf-m-plain"
-          data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-73"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            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"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-c-pagination__nav-control pf-m-last"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Go to last page"
-          class="pf-c-button pf-m-plain"
-          data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-74"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            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"
-            />
-          </svg>
-        </button>
-      </div>
-    </nav>
-  </div>
-</DocumentFragment>
-`;
-
 exports[`Pagination component render should render correctly compact 1`] = `
 <DocumentFragment>
   <div
@@ -3122,53 +2840,49 @@ exports[`Pagination component render should render correctly compact 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            -9 - 10
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
+          >
+            <b>
+              -9 - 10
+            </b>
+             of 
+            <b>
+              20
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -3261,54 +2975,50 @@ exports[`Pagination component render should render correctly disabled 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-disabled pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            -9 - 10
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          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-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
+          >
+            <b>
+              -9 - 10
+            </b>
+             of 
+            <b>
+              20
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -3478,53 +3188,49 @@ exports[`Pagination component render should render correctly sticky 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            -9 - 10
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
+          >
+            <b>
+              -9 - 10
+            </b>
+             of 
+            <b>
+              20
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -3691,53 +3397,49 @@ exports[`Pagination component render should render correctly top 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            -9 - 10
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
+          >
+            <b>
+              -9 - 10
+            </b>
+             of 
+            <b>
+              20
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -3904,53 +3606,49 @@ exports[`Pagination component render titles 1`] = `
       </b>
        values
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            -9 - 10
-          </b>
-           of 
-          <b>
-            40
-          </b>
-           values
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
+          >
+            <b>
+              -9 - 10
+            </b>
+             of 
+            <b>
+              40
+            </b>
+             values
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -4117,53 +3815,49 @@ exports[`Pagination component render up drop direction 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu pf-m-top"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            -9 - 10
-          </b>
-           of 
-          <b>
-            40
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
+          >
+            <b>
+              -9 - 10
+            </b>
+             of 
+            <b>
+              40
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>
@@ -4330,53 +4024,49 @@ exports[`Pagination component render zero results 1`] = `
       </b>
        
     </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
+    <div>
       <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        style="display: contents;"
       >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            0 - 0
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           
-        </span>
         <button
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
+          class="pf-c-menu-toggle pf-m-plain pf-m-text"
           id="options-menu-top-toggle"
           type="button"
         >
           <span
-            class="pf-c-options-menu__toggle-button-icon"
+            class="pf-c-menu-toggle__text"
+          >
+            <b>
+              0 - 0
+            </b>
+             of 
+            <b>
+              0
+            </b>
+             
+          </span>
+          <span
+            class="pf-c-menu-toggle__controls"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
+            <span
+              class="pf-c-menu-toggle__toggle-icon"
             >
-              <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>
+              <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>
           </span>
         </button>
       </div>