@patternfly/patternfly 6.3.0-prerelease.8 → 6.3.0

package/docs/components/TextInputGroup/examples/TextInputGroup.md

@@ -741,6 +741,8 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
 
 ### Search input group
 
+The React implementation can be found in the [search input](/components/search-input) component.
+
 ```html
 <div class="pf-v6-c-text-input-group">
   <div class="pf-v6-c-text-input-group__main pf-m-icon">
@@ -867,8 +869,26 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
 ```html
 <h3>Collapsed</h3>
 <br />
-<div class="pf-v6-c-input-group pf-m-plain">
-  <div class="pf-v6-c-input-group__item pf-m-plain">
+<div class="pf-v6-c-input-group pf-m-search-expandable pf-m-plain">
+  <div class="pf-v6-c-input-group__item pf-m-search-input">
+    <div class="pf-v6-c-text-input-group">
+      <div class="pf-v6-c-text-input-group__main pf-m-icon">
+        <span class="pf-v6-c-text-input-group__text">
+          <span class="pf-v6-c-text-input-group__icon">
+            <i class="fas fa-fw fa-search"></i>
+          </span>
+          <input
+            class="pf-v6-c-text-input-group__text-input"
+            type="text"
+            placeholder="Search"
+            value
+            aria-label="Search input"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+  <div class="pf-v6-c-input-group__item pf-m-search-expand pf-m-plain">
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
@@ -879,13 +899,22 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
       </span>
     </button>
   </div>
+  <div class="pf-v6-c-input-group__item pf-m-search-action pf-m-plain">
+    <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
 </div>
 <br />
 <br />
 <h3>Expanded</h3>
 <br />
-<div class="pf-v6-c-input-group pf-m-plain">
-  <div class="pf-v6-c-input-group__item pf-m-fill">
+<div
+  class="pf-v6-c-input-group pf-m-expanded pf-m-search-expandable pf-m-plain"
+>
+  <div class="pf-v6-c-input-group__item pf-m-search-input">
     <div class="pf-v6-c-text-input-group">
       <div class="pf-v6-c-text-input-group__main pf-m-icon">
         <span class="pf-v6-c-text-input-group__text">
@@ -903,7 +932,18 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
       </div>
     </div>
   </div>
-  <div class="pf-v6-c-input-group__item pf-m-plain">
+  <div class="pf-v6-c-input-group__item pf-m-search-expand pf-m-plain">
+    <button
+      class="pf-v6-c-button pf-m-plain"
+      type="button"
+      aria-label="Open search"
+    >
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+  <div class="pf-v6-c-input-group__item pf-m-search-action pf-m-plain">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>

package/docs/components/Toolbar/examples/Toolbar.md

@@ -589,7 +589,7 @@ Several components in the following examples do not include functional and/or ac
       <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
         <div class="pf-v6-c-toolbar__toggle">
           <button
-            class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
+            class="pf-v6-c-menu-toggle pf-m-expanded pf-m-plain"
             type="button"
             aria-expanded="true"
             aria-label="Show filters"
@@ -1196,7 +1196,7 @@ Several components in the following examples do not include functional and/or ac
       <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
         <div class="pf-v6-c-toolbar__toggle">
           <button
-            class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
+            class="pf-v6-c-menu-toggle pf-m-expanded pf-m-plain"
             type="button"
             aria-expanded="true"
             aria-label="Show filters"
@@ -1667,7 +1667,7 @@ Several components in the following examples do not include functional and/or ac
               class="pf-v6-c-menu-toggle pf-m-plain"
               type="button"
               aria-expanded="false"
-              aria-label="Menu toggle"
+              aria-label="Toggle options"
               id="toolbar-selected-filters-example-overflow-toggle"
             >
               <span class="pf-v6-c-menu-toggle__icon">
@@ -1919,7 +1919,7 @@ Several components in the following examples do not include functional and/or ac
               class="pf-v6-c-menu-toggle pf-m-plain"
               type="button"
               aria-expanded="false"
-              aria-label="Menu toggle"
+              aria-label="Toggle options"
               id="toolbar-stacked-example-overflow-toggle"
             >
               <span class="pf-v6-c-menu-toggle__icon">
@@ -1972,7 +1972,7 @@ Several components in the following examples do not include functional and/or ac
           <div class="pf-v6-c-pagination__total-items">37 items</div>
           <div class="pf-v6-c-pagination__page-menu">
             <button
-              class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
+              class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
               type="button"
               aria-expanded="false"
               aria-label="Menu toggle"
@@ -2071,7 +2071,7 @@ Several components in the following examples do not include functional and/or ac
       <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
         <div class="pf-v6-c-toolbar__toggle">
           <button
-            class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
+            class="pf-v6-c-menu-toggle pf-m-expanded pf-m-plain"
             type="button"
             aria-expanded="true"
             aria-label="Show filters"
@@ -2393,7 +2393,7 @@ Several components in the following examples do not include functional and/or ac
           <div class="pf-v6-c-pagination__total-items">37 items</div>
           <div class="pf-v6-c-pagination__page-menu">
             <button
-              class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
+              class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
               type="button"
               aria-expanded="false"
               aria-label="Menu toggle"

package/docs/demos/AboutModal/examples/AboutModal.md

@@ -21,12 +21,31 @@ This demo implements the about modal, including the backdrop.
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
           type="button"
           aria-label="Global navigation"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-bars" aria-hidden="true"></i>
+            <svg
+              viewBox="0 0 10 10"
+              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+              width="1em"
+              height="1em"
+            >
+              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+              <path
+                class="pf-v6-c-button--hamburger-icon--middle"
+                d="M1,5 L9,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--arrow"
+                d="M1,5 L1,5 L1,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--bottom"
+                d="M9,9 L1,9"
+              />
+            </svg>
           </span>
         </button>
       </span>
@@ -134,7 +153,7 @@ This demo implements the about modal, including the backdrop.
                 </div>
                 <div class="pf-v6-c-toolbar__item">
                   <button
-                    class="pf-v6-c-menu-toggle pf-m-plain"
+                    class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
                     type="button"
                     aria-expanded="false"
                     aria-label="Settings"

package/docs/demos/Alert/examples/Alert.md

@@ -19,12 +19,31 @@ section: components
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
           type="button"
           aria-label="Global navigation"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-bars" aria-hidden="true"></i>
+            <svg
+              viewBox="0 0 10 10"
+              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+              width="1em"
+              height="1em"
+            >
+              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+              <path
+                class="pf-v6-c-button--hamburger-icon--middle"
+                d="M1,5 L9,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--arrow"
+                d="M1,5 L1,5 L1,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--bottom"
+                d="M9,9 L1,9"
+              />
+            </svg>
           </span>
         </button>
       </span>
@@ -132,7 +151,7 @@ section: components
                 </div>
                 <div class="pf-v6-c-toolbar__item">
                   <button
-                    class="pf-v6-c-menu-toggle pf-m-plain"
+                    class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
                     type="button"
                     aria-expanded="false"
                     aria-label="Settings"
@@ -398,12 +417,31 @@ section: components
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
           type="button"
           aria-label="Global navigation"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-bars" aria-hidden="true"></i>
+            <svg
+              viewBox="0 0 10 10"
+              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+              width="1em"
+              height="1em"
+            >
+              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+              <path
+                class="pf-v6-c-button--hamburger-icon--middle"
+                d="M1,5 L9,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--arrow"
+                d="M1,5 L1,5 L1,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--bottom"
+                d="M9,9 L1,9"
+              />
+            </svg>
           </span>
         </button>
       </span>
@@ -511,7 +549,7 @@ section: components
                 </div>
                 <div class="pf-v6-c-toolbar__item">
                   <button
-                    class="pf-v6-c-menu-toggle pf-m-plain"
+                    class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
                     type="button"
                     aria-expanded="false"
                     aria-label="Settings"
@@ -877,12 +915,31 @@ section: components
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
           type="button"
           aria-label="Global navigation"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-bars" aria-hidden="true"></i>
+            <svg
+              viewBox="0 0 10 10"
+              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+              width="1em"
+              height="1em"
+            >
+              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+              <path
+                class="pf-v6-c-button--hamburger-icon--middle"
+                d="M1,5 L9,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--arrow"
+                d="M1,5 L1,5 L1,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--bottom"
+                d="M9,9 L1,9"
+              />
+            </svg>
           </span>
         </button>
       </span>
@@ -990,7 +1047,7 @@ section: components
                 </div>
                 <div class="pf-v6-c-toolbar__item">
                   <button
-                    class="pf-v6-c-menu-toggle pf-m-plain"
+                    class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
                     type="button"
                     aria-expanded="false"
                     aria-label="Settings"

package/docs/demos/BackToTop/examples/BackToTop.md

@@ -20,12 +20,31 @@ cssPrefix: pf-d-back-to-top
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
           type="button"
           aria-label="Global navigation"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-bars" aria-hidden="true"></i>
+            <svg
+              viewBox="0 0 10 10"
+              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+              width="1em"
+              height="1em"
+            >
+              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+              <path
+                class="pf-v6-c-button--hamburger-icon--middle"
+                d="M1,5 L9,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--arrow"
+                d="M1,5 L1,5 L1,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--bottom"
+                d="M9,9 L1,9"
+              />
+            </svg>
           </span>
         </button>
       </span>
@@ -133,7 +152,7 @@ cssPrefix: pf-d-back-to-top
                 </div>
                 <div class="pf-v6-c-toolbar__item">
                   <button
-                    class="pf-v6-c-menu-toggle pf-m-plain"
+                    class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
                     type="button"
                     aria-expanded="false"
                     aria-label="Settings"

package/docs/demos/Banner/examples/Banner.md

@@ -21,12 +21,31 @@ wrapperTag: div
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
           type="button"
           aria-label="Global navigation"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-bars" aria-hidden="true"></i>
+            <svg
+              viewBox="0 0 10 10"
+              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+              width="1em"
+              height="1em"
+            >
+              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+              <path
+                class="pf-v6-c-button--hamburger-icon--middle"
+                d="M1,5 L9,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--arrow"
+                d="M1,5 L1,5 L1,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--bottom"
+                d="M9,9 L1,9"
+              />
+            </svg>
           </span>
         </button>
       </span>
@@ -134,7 +153,7 @@ wrapperTag: div
                 </div>
                 <div class="pf-v6-c-toolbar__item">
                   <button
-                    class="pf-v6-c-menu-toggle pf-m-plain"
+                    class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
                     type="button"
                     aria-expanded="false"
                     aria-label="Settings"
@@ -481,12 +500,34 @@ wrapperTag: div
         <div class="pf-v6-c-masthead__main">
           <span class="pf-v6-c-masthead__toggle">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-hamburger pf-m-plain"
               type="button"
               aria-label="Global navigation"
             >
               <span class="pf-v6-c-button__icon">
-                <i class="fas fa-bars" aria-hidden="true"></i>
+                <svg
+                  viewBox="0 0 10 10"
+                  class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    class="pf-v6-c-button--hamburger-icon--top"
+                    d="M1,1 L9,1"
+                  />
+                  <path
+                    class="pf-v6-c-button--hamburger-icon--middle"
+                    d="M1,5 L9,5"
+                  />
+                  <path
+                    class="pf-v6-c-button--hamburger-icon--arrow"
+                    d="M1,5 L1,5 L1,5"
+                  />
+                  <path
+                    class="pf-v6-c-button--hamburger-icon--bottom"
+                    d="M9,9 L1,9"
+                  />
+                </svg>
               </span>
             </button>
           </span>
@@ -599,7 +640,7 @@ wrapperTag: div
                     </div>
                     <div class="pf-v6-c-toolbar__item">
                       <button
-                        class="pf-v6-c-menu-toggle pf-m-plain"
+                        class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
                         type="button"
                         aria-expanded="false"
                         aria-label="Settings"

package/docs/demos/Card/examples/Card.md

@@ -723,25 +723,6 @@ wrapperTag: div
           <button
             type="button"
             class="pf-v6-c-tabs__link"
-            onclick="
-                      event.preventDefault();
-                      ((e) => {
-                        const el = this,
-                              li = this.closest('li'),
-                              ul = this.closest('ul'),
-                              tabs = this.closest('.pf-v6-c-tabs'),
-                              left = Math.round(li.offsetLeft),
-                              top = Math.round(li.offsetTop),
-                              width = Math.round(li.offsetWidth),
-                              height = Math.round(li.offsetHeight);
-                  
-                        ul.querySelectorAll('li').forEach(function(el) {
-                          el.classList.remove('pf-m-current')});
-                          li.classList.add('pf-m-current');
-                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
-                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
-                        }
-                      )()"
             role="tab"
             id="status-tabs-object-1-link"
           >
@@ -752,25 +733,6 @@ wrapperTag: div
           <button
             type="button"
             class="pf-v6-c-tabs__link"
-            onclick="
-                      event.preventDefault();
-                      ((e) => {
-                        const el = this,
-                              li = this.closest('li'),
-                              ul = this.closest('ul'),
-                              tabs = this.closest('.pf-v6-c-tabs'),
-                              left = Math.round(li.offsetLeft),
-                              top = Math.round(li.offsetTop),
-                              width = Math.round(li.offsetWidth),
-                              height = Math.round(li.offsetHeight);
-                  
-                        ul.querySelectorAll('li').forEach(function(el) {
-                          el.classList.remove('pf-m-current')});
-                          li.classList.add('pf-m-current');
-                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
-                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
-                        }
-                      )()"
             role="tab"
             id="status-tabs-object-2-link"
           >
@@ -781,25 +743,6 @@ wrapperTag: div
           <button
             type="button"
             class="pf-v6-c-tabs__link"
-            onclick="
-                      event.preventDefault();
-                      ((e) => {
-                        const el = this,
-                              li = this.closest('li'),
-                              ul = this.closest('ul'),
-                              tabs = this.closest('.pf-v6-c-tabs'),
-                              left = Math.round(li.offsetLeft),
-                              top = Math.round(li.offsetTop),
-                              width = Math.round(li.offsetWidth),
-                              height = Math.round(li.offsetHeight);
-                  
-                        ul.querySelectorAll('li').forEach(function(el) {
-                          el.classList.remove('pf-m-current')});
-                          li.classList.add('pf-m-current');
-                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
-                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
-                        }
-                      )()"
             role="tab"
             id="status-tabs-object-3-link"
           >
@@ -1416,7 +1359,7 @@ wrapperTag: div
                   >Components of the Control Panel are responsible for maintaining and reconciling the state of the cluster.</div>
                   <div class="pf-v6-c-popover__body">
                     <table
-                      class="pf-v6-c-table pf-m-expandable pf-m-compact"
+                      class="pf-v6-c-table pf-m-compact pf-m-expandable"
                       aria-label="Control panel table"
                       id="status-card-expanded-with-popover-example-popover-table"
                     >
@@ -1982,7 +1925,7 @@ wrapperTag: div
       </div>
       <div class="pf-v6-c-card__actions pf-m-no-offset">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
+          class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
           type="button"
           aria-expanded="false"
           id="utilization-card-3-example-select-dropdown"
@@ -2743,7 +2686,7 @@ wrapperTag: div
         style="padding-block-start: 1px;"
       >
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
+          class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
           type="button"
           aria-expanded="false"
           id="trend-card-1-example-select-dropdown"
@@ -2820,7 +2763,7 @@ wrapperTag: div
     <div class="pf-v6-c-card__header pf-v6-u-align-items-flex-start">
       <div class="pf-v6-c-card__actions pf-m-no-offset">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
+          class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
           type="button"
           aria-expanded="false"
           id="card-log-view-example-select-dropdown"
@@ -2943,7 +2886,7 @@ wrapperTag: div
     <div class="pf-v6-c-card__header pf-v6-u-align-items-flex-start">
       <div class="pf-v6-c-card__actions pf-m-no-offset">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
+          class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
           type="button"
           aria-expanded="false"
           id="card-events-view-example-select-dropdown"

package/docs/demos/CardView/examples/CardView.md

@@ -19,12 +19,31 @@ section: patterns
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
           type="button"
           aria-label="Global navigation"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-bars" aria-hidden="true"></i>
+            <svg
+              viewBox="0 0 10 10"
+              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+              width="1em"
+              height="1em"
+            >
+              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+              <path
+                class="pf-v6-c-button--hamburger-icon--middle"
+                d="M1,5 L9,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--arrow"
+                d="M1,5 L1,5 L1,5"
+              />
+              <path
+                class="pf-v6-c-button--hamburger-icon--bottom"
+                d="M9,9 L1,9"
+              />
+            </svg>
           </span>
         </button>
       </span>
@@ -132,7 +151,7 @@ section: patterns
                 </div>
                 <div class="pf-v6-c-toolbar__item">
                   <button
-                    class="pf-v6-c-menu-toggle pf-m-plain"
+                    class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
                     type="button"
                     aria-expanded="false"
                     aria-label="Settings"
@@ -466,7 +485,7 @@ section: patterns
                   <div class="pf-v6-c-pagination pf-m-compact">
                     <div class="pf-v6-c-pagination__page-menu">
                       <button
-                        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
+                        class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
                         type="button"
                         aria-expanded="false"
                         aria-label="Menu toggle"
@@ -1016,7 +1035,7 @@ section: patterns
           <div class="pf-v6-c-pagination pf-m-bottom">
             <div class="pf-v6-c-pagination__page-menu">
               <button
-                class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
+                class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
                 type="button"
                 aria-expanded="false"
                 aria-label="Menu toggle"