@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.61

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

@@ -16,7 +16,7 @@ cssPrefix: pf-v6-c-text-input-group
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value
-        aria-label="Type to filter"
+        aria-label="Basic"
       />
     </span>
   </div>
@@ -35,7 +35,7 @@ cssPrefix: pf-v6-c-text-input-group
         type="text"
         disabled
         value="Disabled"
-        aria-label="Disabled text input group example input"
+        aria-label="Disabled"
       />
     </span>
   </div>
@@ -56,7 +56,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="Text input group with plain styling"
-        aria-label="Type to filter"
+        aria-label="Plain"
       />
     </span>
   </div>
@@ -78,7 +78,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         type="text"
         placeholder="placeholder"
         value
-        aria-label="Type to filter"
+        aria-label="Utilities and icon with placeholder"
       />
     </span>
   </div>
@@ -86,7 +86,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear utilities and icon with placeholder example"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -107,7 +107,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="Success validation"
-        aria-label="Type to filter"
+        aria-label="Success validation"
       />
       <span class="pf-v6-c-text-input-group__icon pf-m-status">
         <i aria-hidden="true" class="fas fa-check-circle"></i>
@@ -126,7 +126,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="Warning validation with icon at start"
-        aria-label="Type to filter"
+        aria-label="Warning validation"
       />
       <span class="pf-v6-c-text-input-group__icon pf-m-status">
         <i aria-hidden="true" class="fas fa-exclamation-triangle"></i>
@@ -145,6 +145,34 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="Error validation with icon at start and utilities"
+        aria-label="Error validation"
+      />
+      <span class="pf-v6-c-text-input-group__icon pf-m-status">
+        <i aria-hidden="true" class="fas fa-exclamation-circle"></i>
+      </span>
+    </span>
+  </div>
+  <div class="pf-v6-c-text-input-group__utilities">
+    <button
+      class="pf-v6-c-button pf-m-plain"
+      type="button"
+      aria-label="Clear error validation example"
+    >
+      <span class="pf-v6-c-button__text">
+        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+</div>
+
+<br />
+<div class="pf-v6-c-text-input-group pf-m-error">
+  <div class="pf-v6-c-text-input-group__main">
+    <span class="pf-v6-c-text-input-group__text">
+      <input
+        class="pf-v6-c-text-input-group__text-input"
+        type="text"
+        value="Error validation with no icon but with utilities"
         aria-label="Type to filter"
       />
       <span class="pf-v6-c-text-input-group__icon pf-m-status">
@@ -334,7 +362,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value
-        aria-label="Type to filter"
+        aria-label="Filters"
       />
     </span>
   </div>
@@ -342,7 +370,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear filter example"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -695,7 +723,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value
-        aria-label="Type to filter"
+        aria-label="Filters expanded"
       />
     </span>
   </div>
@@ -703,7 +731,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear filters expanded example"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -741,6 +769,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">
@@ -753,7 +783,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         type="text"
         placeholder="Find by name"
         value
-        aria-label="Search input"
+        aria-label="Search input group"
       />
     </span>
   </div>
@@ -775,7 +805,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         type="text"
         placeholder="Find by name"
         value="Joh"
-        aria-label="Search input"
+        aria-label="Search input group no match"
       />
     </span>
   </div>
@@ -783,7 +813,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear search input group no match"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -808,16 +838,19 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         type="text"
         placeholder="Find by name"
         value="John Doe"
-        aria-label="Search input"
+        aria-label="Search input group match with result count"
       />
     </span>
   </div>
   <div class="pf-v6-c-text-input-group__utilities">
-    <span class="pf-v6-c-badge pf-m-read">3</span>
+    <span class="pf-v6-c-badge pf-m-read">
+      <span aria-hidden="true">3</span>
+      <span class="pf-v6-screen-reader">3 matching results</span>
+    </span>
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear search input group match with result count"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -842,16 +875,36 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         type="text"
         placeholder="Find by name"
         value="John Doe"
-        aria-label="Search input"
+        aria-label="Search input group match with navigable options"
       />
     </span>
   </div>
   <div class="pf-v6-c-text-input-group__utilities">
-    <span class="pf-v6-c-badge pf-m-read">1 / 3</span>
+    <span class="pf-v6-c-badge pf-m-read">
+      <span aria-hidden="true">1 / 3</span>
+      <span class="pf-v6-screen-reader">Showing result 1 / 3</span>
+    </span>
+    <div class="pf-v6-c-text-input-group__group">
+      <button
+        class="pf-v6-c-button pf-m-plain"
+        type="button"
+        aria-label="Previous"
+        disabled
+      >
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
+        </span>
+      </button>
+      <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Next">
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
+        </span>
+      </button>
+    </div>
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear search input group match with navigable options"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -867,25 +920,56 @@ 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 group collapsed"
+          />
+        </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"
-      aria-label="Open search"
+      aria-label="Open search input group collapsed"
     >
       <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 search input group expandable"
+    >
+      <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">
@@ -897,14 +981,29 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
             type="text"
             placeholder="Search"
             value
-            aria-label="Search input"
+            aria-label="Search input group expanded"
           />
         </span>
       </div>
     </div>
   </div>
-  <div class="pf-v6-c-input-group__item pf-m-plain">
-    <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
+  <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 input group collapsed"
+    >
+      <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 search input group expandable"
+    >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
       </span>
@@ -930,7 +1029,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
             type="text"
             placeholder="Find by name"
             value
-            aria-label="Search input"
+            aria-label="Search input group with submit button"
           />
         </span>
       </div>
@@ -940,7 +1039,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-control"
       type="submit"
-      aria-label="Search"
+      aria-label="Submit search input group"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-arrow-right" aria-hidden="true"></i>
@@ -966,7 +1065,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
             class="pf-v6-c-text-input-group__text-input"
             type="text"
             value="username:root firstname:ned"
-            aria-label="Search input"
+            aria-label="Search input group advanced search"
           />
         </span>
       </div>
@@ -974,7 +1073,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         <button
           class="pf-v6-c-button pf-m-plain"
           type="button"
-          aria-label="Clear input"
+          aria-label="Clear advance search input group collapsed"
         >
           <span class="pf-v6-c-button__icon">
             <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -988,7 +1087,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
       class="pf-v6-c-button pf-m-control"
       type="button"
       aria-expanded="false"
-      aria-label="Advanced search"
+      aria-label="Advanced search collapsed"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -999,7 +1098,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-control"
       type="submit"
-      aria-label="Search"
+      aria-label="Search advance search input group collapsed"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-arrow-right" aria-hidden="true"></i>
@@ -1025,7 +1124,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
             class="pf-v6-c-text-input-group__text-input"
             type="text"
             value="username:root firstname:ned"
-            aria-label="Search input"
+            aria-label="Search input group advanced search expanded"
           />
         </span>
       </div>
@@ -1033,7 +1132,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         <button
           class="pf-v6-c-button pf-m-plain"
           type="button"
-          aria-label="Clear input"
+          aria-label="Clear advance search input group expanded"
         >
           <span class="pf-v6-c-button__icon">
             <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -1047,7 +1146,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
       class="pf-v6-c-button pf-m-expanded pf-m-control"
       type="button"
       aria-expanded="true"
-      aria-label="Advanced search"
+      aria-label="Advanced search expanded"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -1058,7 +1157,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-control"
       type="submit"
-      aria-label="Search"
+      aria-label="Search advance search input group expanded"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-arrow-right" aria-hidden="true"></i>
@@ -1143,10 +1242,20 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         </div>
         <div class="pf-v6-c-form__group pf-m-action">
           <div class="pf-v6-c-form__actions">
-            <button class="pf-v6-c-button pf-m-primary" type="submit">
+            <button
+              class="pf-v6-c-button pf-m-primary"
+              id="submit-advanced-search-expanded"
+              type="submit"
+              aria-labelledby="submit-advanced-search-expanded search-input-group-advanced-search-expanded"
+            >
               <span class="pf-v6-c-button__text">Submit</span>
             </button>
-            <button class="pf-v6-c-button pf-m-link" type="reset">
+            <button
+              class="pf-v6-c-button pf-m-link"
+              id="reset-advanced-search-expanded"
+              type="reset"
+              aria-labelledby="reset-advanced-search-expanded search-input-group-advanced-search-expanded"
+            >
               <span class="pf-v6-c-button__text">Reset</span>
             </button>
           </div>
@@ -1171,7 +1280,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-text-input-group__text-input"
         type="text"
         value="app"
-        aria-label="Search input"
+        aria-label="Search input group autocomplete"
       />
     </span>
   </div>
@@ -1179,7 +1288,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear autocomplete search input group"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -1247,7 +1356,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
     <button
       class="pf-v6-c-button pf-m-plain"
       type="button"
-      aria-label="Clear input"
+      aria-label="Clear autocomple search input group last option hint"
     >
       <span class="pf-v6-c-button__icon">
         <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -1288,7 +1397,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
               class="pf-v6-c-text-input-group__text-input"
               type="text"
               value="username:root firstname:n"
-              aria-label="Search input"
+              aria-label="Search input group advanced search expanded with autocomplete"
             />
           </span>
         </div>
@@ -1296,7 +1405,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
           <button
             class="pf-v6-c-button pf-m-plain"
             type="button"
-            aria-label="Clear input"
+            aria-label="Clear advance search input group expanded with autocomplete"
           >
             <span class="pf-v6-c-button__icon">
               <i class="fas fa-times fa-fw" aria-hidden="true"></i>
@@ -1310,7 +1419,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
         class="pf-v6-c-button pf-m-expanded pf-m-control"
         type="button"
         aria-expanded="true"
-        aria-label="Advanced search"
+        aria-label="Advanced search expanded with autocomplete"
       >
         <span class="pf-v6-c-button__icon">
           <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -1321,7 +1430,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
       <button
         class="pf-v6-c-button pf-m-control"
         type="submit"
-        aria-label="Search"
+        aria-label="Search advanced search input group expanded with autocomplete"
       >
         <span class="pf-v6-c-button__icon">
           <i class="fas fa-arrow-right" aria-hidden="true"></i>
@@ -1406,10 +1515,20 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
           </div>
           <div class="pf-v6-c-form__group pf-m-action">
             <div class="pf-v6-c-form__actions">
-              <button class="pf-v6-c-button pf-m-primary" type="submit">
+              <button
+                class="pf-v6-c-button pf-m-primary"
+                id="submit-advanced-search-expanded-with-autocomplete"
+                type="submit"
+                aria-labelledby="submit-advanced-search-expanded-with-autocomplete search-input-group-advanced-search-expanded-with-autocomplete"
+              >
                 <span class="pf-v6-c-button__text">Submit</span>
               </button>
-              <button class="pf-v6-c-button pf-m-link" type="reset">
+              <button
+                class="pf-v6-c-button pf-m-link"
+                id="reset-advanced-search-expanded-with-autocomplete"
+                type="submit"
+                aria-labelledby="reset-advanced-search-expanded-with-autocomplete search-input-group-advanced-search-expanded-with-autocomplete"
+              >
                 <span class="pf-v6-c-button__text">Reset</span>
               </button>
             </div>

package/docs/components/Title/examples/Title.md

@@ -19,12 +19,12 @@ cssPrefix: pf-v6-c-title
 ### Heading level modifiers
 
 ```html
-<div class="pf-v6-c-title pf-m-h1">H1-styled title</div>
-<div class="pf-v6-c-title pf-m-h2">H2-styled title</div>
-<div class="pf-v6-c-title pf-m-h3">H3-styled title</div>
-<div class="pf-v6-c-title pf-m-h4">H4-styled title</div>
-<div class="pf-v6-c-title pf-m-h5">H5-styled title</div>
-<div class="pf-v6-c-title pf-m-h6">H6-styled title</div>
+<h1 class="pf-v6-c-title pf-m-h1">H1-styled title</h1>
+<h2 class="pf-v6-c-title pf-m-h2">H2-styled title</h2>
+<h3 class="pf-v6-c-title pf-m-h3">H3-styled title</h3>
+<h4 class="pf-v6-c-title pf-m-h4">H4-styled title</h4>
+<h5 class="pf-v6-c-title pf-m-h5">H5-styled title</h5>
+<h6 class="pf-v6-c-title pf-m-h6">H6-styled title</h6>
 
 ```
 
@@ -33,7 +33,7 @@ cssPrefix: pf-v6-c-title
 ```html
 <h1 class="pf-v6-c-title pf-m-2xl pf-m-page-title">2xl page title</h1>
 
-<div class="pf-v6-c-title pf-m-h1 pf-m-page-title">H1 page title</div>
+<h1 class="pf-v6-c-title pf-m-h1 pf-m-page-title">H1 page title</h1>
 
 ```
 
@@ -58,7 +58,7 @@ The content component defines margin on headers. To regain the same spacing use,
 
 | Class | Applied | Outcome |
 | -- | -- | -- |
-| `.pf-v6-c-title` | `*` |  Initiates a title. Always use it with a modifier class. |
+| `.pf-v6-c-title` | `h1-h6` |  Initiates a title. Always use it with a modifier class. |
 | `.pf-m-4xl` | `.pf-v6-c-title` | Modifies for 4xl size |
 | `.pf-m-3xl` | `.pf-v6-c-title` | Modifies for 3xl size |
 | `.pf-m-2xl` | `.pf-v6-c-title` | Modifies for 2xl size |

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"