@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.92

package/docs/components/Select/deprecated/Select.md

@@ -11,54 +11,54 @@ deprecated: true
 ### Single select
 
 ```html
-<div class="pf-v5-c-select">
+<div class="pf-v6-c-select">
   <span id="select-single-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-single-toggle"
     aria-haspopup="true"
     aria-expanded="false"
     aria-labelledby="select-single-label select-single-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-single-label"
     hidden
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>
@@ -68,53 +68,53 @@ deprecated: true
 ### Single expanded
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-single-expanded-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-single-expanded-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-single-expanded-label select-single-expanded-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-single-expanded-label"
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>
@@ -124,53 +124,53 @@ deprecated: true
 ### Single with top expanded
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded pf-m-top">
+<div class="pf-v6-c-select pf-m-expanded pf-m-top">
   <span id="select-single-top-expanded-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-single-top-expanded-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-single-top-expanded-label select-single-top-expanded-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-single-top-expanded-label"
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>
@@ -180,53 +180,53 @@ deprecated: true
 ### Single expanded and selected
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-single-expanded-selected-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-single-expanded-selected-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-single-expanded-selected-label select-single-expanded-selected-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">April</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">April</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-single-expanded-selected-label"
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>
@@ -256,11 +256,11 @@ The single select should be used when the user is selecting an option from a lis
 ### Disabled
 
 ```html
-<div class="pf-v5-c-select">
+<div class="pf-v6-c-select">
   <span id="select-disabled-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-disabled-toggle"
     aria-haspopup="true"
@@ -268,43 +268,43 @@ The single select should be used when the user is selecting an option from a lis
     aria-labelledby="select-disabled-label select-disabled-toggle"
     disabled
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-disabled-label"
     hidden
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>
@@ -314,57 +314,57 @@ The single select should be used when the user is selecting an option from a lis
 ### Success
 
 ```html
-<div class="pf-v5-c-select pf-m-success">
+<div class="pf-v6-c-select pf-m-success">
   <span id="select-success-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-success-toggle"
     aria-haspopup="true"
     aria-expanded="false"
     aria-labelledby="select-success-label select-success-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-status-icon">
+    <span class="pf-v6-c-select__toggle-status-icon">
       <i class="fas fa-check-circle" aria-hidden="true"></i>
     </span>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-success-label"
     hidden
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>
@@ -374,57 +374,57 @@ The single select should be used when the user is selecting an option from a lis
 ### Warning
 
 ```html
-<div class="pf-v5-c-select pf-m-warning">
+<div class="pf-v6-c-select pf-m-warning">
   <span id="select-warning-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-warning-toggle"
     aria-haspopup="true"
     aria-expanded="false"
     aria-labelledby="select-warning-label select-warning-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-status-icon">
+    <span class="pf-v6-c-select__toggle-status-icon">
       <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
     </span>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-warning-label"
     hidden
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>
@@ -434,11 +434,11 @@ The single select should be used when the user is selecting an option from a lis
 ### Invalid
 
 ```html
-<div class="pf-v5-c-select pf-m-invalid">
+<div class="pf-v6-c-select pf-m-invalid">
   <span id="select-invalid-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-invalid-toggle"
     aria-haspopup="true"
@@ -446,46 +446,46 @@ The single select should be used when the user is selecting an option from a lis
     aria-labelledby="select-invalid-label select-invalid-toggle"
     aria-invalid="true"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-status-icon">
+    <span class="pf-v6-c-select__toggle-status-icon">
       <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
     </span>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-invalid-label"
     hidden
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>
@@ -523,12 +523,12 @@ The single select should be used when the user is selecting an option from a lis
 ### Single with typeahead
 
 ```html
-<div class="pf-v5-c-select">
+<div class="pf-v6-c-select">
   <span id="select-single-typeahead-label" hidden>Choose a state</span>
 
-  <div class="pf-v5-c-select__toggle pf-m-typeahead">
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
+  <div class="pf-v6-c-select__toggle pf-m-typeahead">
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
         <input
           type="text"
           id="select-single-typeahead-typeahead"
@@ -539,7 +539,7 @@ The single select should be used when the user is selecting an option from a lis
       </span>
     </div>
     <button
-      class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button"
+      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
       type="button"
       id="select-single-typeahead-toggle"
       aria-haspopup="true"
@@ -548,51 +548,51 @@ The single select should be used when the user is selecting an option from a lis
       aria-label="Select"
     >
       <i
-        class="fas fa-caret-down pf-v5-c-select__toggle-arrow"
+        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
         aria-hidden="true"
       ></i>
     </button>
   </div>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     aria-labelledby="select-single-typeahead-label"
     role="listbox"
     hidden
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Alabama</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Florida</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Florida</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
+      <button class="pf-v6-c-select__menu-item" role="option">
         New
         &nbsp;Jersey
       </button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         New
         &nbsp;Mexico
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
+      <button class="pf-v6-c-select__menu-item" role="option">
         New
         &nbsp;York
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">North Carolina</button>
+      <button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
     </li>
   </ul>
 </div>
@@ -602,12 +602,12 @@ The single select should be used when the user is selecting an option from a lis
 ### Single with typeahead expanded
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-single-typeahead-expanded-label" hidden>Choose a state</span>
 
-  <div class="pf-v5-c-select__toggle pf-m-typeahead">
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
+  <div class="pf-v6-c-select__toggle pf-m-typeahead">
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
         <input
           type="text"
           id="select-single-typeahead-expanded-typeahead"
@@ -618,14 +618,14 @@ The single select should be used when the user is selecting an option from a lis
       </span>
     </div>
     <button
-      class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear"
+      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-clear"
       type="button"
       aria-label="Clear all"
     >
       <i class="fas fa-times-circle" aria-hidden="true"></i>
     </button>
     <button
-      class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button"
+      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
       type="button"
       id="select-single-typeahead-expanded-toggle"
       aria-haspopup="true"
@@ -634,39 +634,39 @@ The single select should be used when the user is selecting an option from a lis
       aria-label="Select"
     >
       <i
-        class="fas fa-caret-down pf-v5-c-select__toggle-arrow"
+        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
         aria-hidden="true"
       ></i>
     </button>
   </div>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     aria-labelledby="select-single-typeahead-expanded-label"
     role="listbox"
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
-        <mark class="pf-v5-c-select__menu-item--match">New</mark>
+      <button class="pf-v6-c-select__menu-item" role="option">
+        <mark class="pf-v6-c-select__menu-item--match">New</mark>
         &nbsp;Jersey
       </button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
-        <mark class="pf-v5-c-select__menu-item--match">New</mark>
+        <mark class="pf-v6-c-select__menu-item--match">New</mark>
         &nbsp;Mexico
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
-        <mark class="pf-v5-c-select__menu-item--match">New</mark>
+      <button class="pf-v6-c-select__menu-item" role="option">
+        <mark class="pf-v6-c-select__menu-item--match">New</mark>
         &nbsp;York
       </button>
     </li>
@@ -678,15 +678,15 @@ The single select should be used when the user is selecting an option from a lis
 ### Single with typeahead expanded and selected
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span
     id="select-single-typeahead-expanded-selected-label"
     hidden
   >Choose a state</span>
 
-  <div class="pf-v5-c-select__toggle pf-m-typeahead">
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
+  <div class="pf-v6-c-select__toggle pf-m-typeahead">
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
         <input
           type="text"
           id="select-single-typeahead-expanded-selected-typeahead"
@@ -697,14 +697,14 @@ The single select should be used when the user is selecting an option from a lis
       </span>
     </div>
     <button
-      class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear"
+      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-clear"
       type="button"
       aria-label="Clear all"
     >
       <i class="fas fa-times-circle" aria-hidden="true"></i>
     </button>
     <button
-      class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button"
+      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
       type="button"
       id="select-single-typeahead-expanded-selected-toggle"
       aria-haspopup="true"
@@ -713,50 +713,50 @@ The single select should be used when the user is selecting an option from a lis
       aria-label="Select"
     >
       <i
-        class="fas fa-caret-down pf-v5-c-select__toggle-arrow"
+        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
         aria-hidden="true"
       ></i>
     </button>
   </div>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     aria-labelledby="select-single-typeahead-expanded-selected-label"
     role="listbox"
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Alabama</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Florida</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Florida</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
+      <button class="pf-v6-c-select__menu-item" role="option">
         New
         &nbsp;Jersey
       </button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         New
         &nbsp;Mexico
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
+      <button class="pf-v6-c-select__menu-item" role="option">
         New
         &nbsp;York
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">North Carolina</button>
+      <button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
     </li>
   </ul>
 </div>
@@ -766,13 +766,13 @@ The single select should be used when the user is selecting an option from a lis
 ### Disabled with typeahead
 
 ```html
-<div class="pf-v5-c-select">
+<div class="pf-v6-c-select">
   <span id="select-single-typeahead-disabled-label" hidden>Choose a state</span>
 
-  <div class="pf-v5-c-select__toggle pf-m-typeahead pf-m-disabled">
-    <div class="pf-v5-c-select__toggle-wrapper">
+  <div class="pf-v6-c-select__toggle pf-m-typeahead pf-m-disabled">
+    <div class="pf-v6-c-select__toggle-wrapper">
       <span
-        class="pf-v5-c-form-control pf-m-disabled pf-v5-c-select__toggle-typeahead"
+        class="pf-v6-c-form-control pf-m-disabled pf-v5-c-select__toggle-typeahead"
       >
         <input
           disabled
@@ -784,7 +784,7 @@ The single select should be used when the user is selecting an option from a lis
       </span>
     </div>
     <button
-      class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button"
+      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
       type="button"
       id="select-single-typeahead-disabled-toggle"
       aria-haspopup="true"
@@ -794,51 +794,51 @@ The single select should be used when the user is selecting an option from a lis
       disabled
     >
       <i
-        class="fas fa-caret-down pf-v5-c-select__toggle-arrow"
+        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
         aria-hidden="true"
       ></i>
     </button>
   </div>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     aria-labelledby="select-single-typeahead-disabled-label"
     role="listbox"
     hidden
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Alabama</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Florida</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Florida</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
+      <button class="pf-v6-c-select__menu-item" role="option">
         New
         &nbsp;Jersey
       </button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         New
         &nbsp;Mexico
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
+      <button class="pf-v6-c-select__menu-item" role="option">
         New
         &nbsp;York
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">North Carolina</button>
+      <button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
     </li>
   </ul>
 </div>
@@ -848,12 +848,12 @@ The single select should be used when the user is selecting an option from a lis
 ### Invalid with typeahead
 
 ```html
-<div class="pf-v5-c-select pf-m-invalid">
+<div class="pf-v6-c-select pf-m-invalid">
   <span id="select-single-typeahead-invalid-label" hidden>Choose a state</span>
 
-  <div class="pf-v5-c-select__toggle pf-m-typeahead">
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
+  <div class="pf-v6-c-select__toggle pf-m-typeahead">
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
         <input
           type="text"
           id="select-single-typeahead-invalid-typeahead"
@@ -864,11 +864,11 @@ The single select should be used when the user is selecting an option from a lis
         />
       </span>
     </div>
-    <span class="pf-v5-c-select__toggle-status-icon">
+    <span class="pf-v6-c-select__toggle-status-icon">
       <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
     </span>
     <button
-      class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button"
+      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
       type="button"
       id="select-single-typeahead-invalid-toggle"
       aria-haspopup="true"
@@ -877,51 +877,51 @@ The single select should be used when the user is selecting an option from a lis
       aria-label="Select"
     >
       <i
-        class="fas fa-caret-down pf-v5-c-select__toggle-arrow"
+        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
         aria-hidden="true"
       ></i>
     </button>
   </div>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     aria-labelledby="select-single-typeahead-invalid-label"
     role="listbox"
     hidden
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Alabama</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Florida</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Florida</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
+      <button class="pf-v6-c-select__menu-item" role="option">
         New
         &nbsp;Jersey
       </button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         New
         &nbsp;Mexico
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
+      <button class="pf-v6-c-select__menu-item" role="option">
         New
         &nbsp;York
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">North Carolina</button>
+      <button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
     </li>
   </ul>
 </div>
@@ -958,12 +958,12 @@ The single select typeahead should be used when the user is selecting one option
 ### Select multi with typeahead
 
 ```html
-<div class="pf-v5-c-select">
+<div class="pf-v6-c-select">
   <span id="select-multi-typeahead-label" hidden>Choose states</span>
 
-  <div class="pf-v5-c-select__toggle pf-m-typeahead">
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
+  <div class="pf-v6-c-select__toggle pf-m-typeahead">
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
         <input
           type="text"
           id="select-multi-typeahead-typeahead"
@@ -974,7 +974,7 @@ The single select typeahead should be used when the user is selecting one option
       </span>
     </div>
     <button
-      class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button"
+      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
       type="button"
       id="select-multi-typeahead-toggle"
       aria-haspopup="true"
@@ -983,38 +983,38 @@ The single select typeahead should be used when the user is selecting one option
       aria-label="Select"
     >
       <i
-        class="fas fa-caret-down pf-v5-c-select__toggle-arrow"
+        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
         aria-hidden="true"
       ></i>
     </button>
   </div>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     aria-labelledby="select-multi-typeahead-label"
     role="listbox"
     hidden
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Alabama</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Florida</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Florida</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
+      <button class="pf-v6-c-select__menu-item" role="option">
         New
         &nbsp;Jersey
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
+      <button class="pf-v6-c-select__menu-item" role="option">
         New
         &nbsp;York
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">North Carolina</button>
+      <button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
     </li>
   </ul>
 </div>
@@ -1024,29 +1024,29 @@ The single select typeahead should be used when the user is selecting one option
 ### Multi with typeahead (chip group expanded)
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-multi-typeahead-expanded-label" hidden>Choose states</span>
 
-  <div class="pf-v5-c-select__toggle pf-m-typeahead">
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <div class="pf-v5-c-chip-group" role="group">
-        <div class="pf-v5-c-chip-group__main">
+  <div class="pf-v6-c-select__toggle pf-m-typeahead">
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <div class="pf-v6-c-chip-group" role="group">
+        <div class="pf-v6-c-chip-group__main">
           <ul
-            class="pf-v5-c-chip-group__list"
+            class="pf-v6-c-chip-group__list"
             role="list"
             aria-label="Chip group list"
           >
-            <li class="pf-v5-c-chip-group__list-item">
-              <div class="pf-v5-c-chip">
-                <span class="pf-v5-c-chip__content">
+            <li class="pf-v6-c-chip-group__list-item">
+              <div class="pf-v6-c-chip">
+                <span class="pf-v6-c-chip__content">
                   <span
-                    class="pf-v5-c-chip__text"
+                    class="pf-v6-c-chip__text"
                     id="select-multi-typeahead-expanded-chip_one"
                   >Arkansas</span>
                 </span>
-                <span class="pf-v5-c-chip__actions">
+                <span class="pf-v6-c-chip__actions">
                   <button
-                    class="pf-v5-c-button pf-m-plain"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-labelledby="remove_select-multi-typeahead-expanded_chip_one select-multi-typeahead-expanded-chip_two"
                     aria-label="Remove"
@@ -1057,17 +1057,17 @@ The single select typeahead should be used when the user is selecting one option
                 </span>
               </div>
             </li>
-            <li class="pf-v5-c-chip-group__list-item">
-              <div class="pf-v5-c-chip">
-                <span class="pf-v5-c-chip__content">
+            <li class="pf-v6-c-chip-group__list-item">
+              <div class="pf-v6-c-chip">
+                <span class="pf-v6-c-chip__content">
                   <span
-                    class="pf-v5-c-chip__text"
+                    class="pf-v6-c-chip__text"
                     id="select-multi-typeahead-expanded-chip_two"
                   >Massachusetts</span>
                 </span>
-                <span class="pf-v5-c-chip__actions">
+                <span class="pf-v6-c-chip__actions">
                   <button
-                    class="pf-v5-c-button pf-m-plain"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-labelledby="remove_select-multi-typeahead-expanded_chip_two select-multi-typeahead-expanded-chip_two"
                     aria-label="Remove"
@@ -1078,17 +1078,17 @@ The single select typeahead should be used when the user is selecting one option
                 </span>
               </div>
             </li>
-            <li class="pf-v5-c-chip-group__list-item">
-              <div class="pf-v5-c-chip">
-                <span class="pf-v5-c-chip__content">
+            <li class="pf-v6-c-chip-group__list-item">
+              <div class="pf-v6-c-chip">
+                <span class="pf-v6-c-chip__content">
                   <span
-                    class="pf-v5-c-chip__text"
+                    class="pf-v6-c-chip__text"
                     id="select-multi-typeahead-expanded-chip_three"
                   >New Mexico</span>
                 </span>
-                <span class="pf-v5-c-chip__actions">
+                <span class="pf-v6-c-chip__actions">
                   <button
-                    class="pf-v5-c-button pf-m-plain"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-labelledby="remove_select-multi-typeahead-expanded_chip_three select-multi-typeahead-expanded-chip_three"
                     aria-label="Remove"
@@ -1099,17 +1099,17 @@ The single select typeahead should be used when the user is selecting one option
                 </span>
               </div>
             </li>
-            <li class="pf-v5-c-chip-group__list-item">
-              <div class="pf-v5-c-chip">
-                <span class="pf-v5-c-chip__content">
+            <li class="pf-v6-c-chip-group__list-item">
+              <div class="pf-v6-c-chip">
+                <span class="pf-v6-c-chip__content">
                   <span
-                    class="pf-v5-c-chip__text"
+                    class="pf-v6-c-chip__text"
                     id="select-multi-typeahead-expanded-chip_four"
                   >Ohio</span>
                 </span>
-                <span class="pf-v5-c-chip__actions">
+                <span class="pf-v6-c-chip__actions">
                   <button
-                    class="pf-v5-c-button pf-m-plain"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-labelledby="remove_select-multi-typeahead-expanded_chip_four select-multi-typeahead-expanded-chip_four"
                     aria-label="Remove"
@@ -1120,17 +1120,17 @@ The single select typeahead should be used when the user is selecting one option
                 </span>
               </div>
             </li>
-            <li class="pf-v5-c-chip-group__list-item">
-              <div class="pf-v5-c-chip">
-                <span class="pf-v5-c-chip__content">
+            <li class="pf-v6-c-chip-group__list-item">
+              <div class="pf-v6-c-chip">
+                <span class="pf-v6-c-chip__content">
                   <span
-                    class="pf-v5-c-chip__text"
+                    class="pf-v6-c-chip__text"
                     id="select-multi-typeahead-expanded-chip_five"
                   >Washington</span>
                 </span>
-                <span class="pf-v5-c-chip__actions">
+                <span class="pf-v6-c-chip__actions">
                   <button
-                    class="pf-v5-c-button pf-m-plain"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-labelledby="remove_select-multi-typeahead-expanded_chip_five select-multi-typeahead-expanded-chip_five"
                     aria-label="Remove"
@@ -1144,7 +1144,7 @@ The single select typeahead should be used when the user is selecting one option
           </ul>
         </div>
       </div>
-      <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
+      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
         <input
           type="text"
           id="select-multi-typeahead-expanded-typeahead"
@@ -1155,14 +1155,14 @@ The single select typeahead should be used when the user is selecting one option
       </span>
     </div>
     <button
-      class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear"
+      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-clear"
       type="button"
       aria-label="Clear all"
     >
       <i class="fas fa-times-circle" aria-hidden="true"></i>
     </button>
     <button
-      class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button"
+      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
       type="button"
       id="select-multi-typeahead-expanded-toggle"
       aria-haspopup="true"
@@ -1171,37 +1171,37 @@ The single select typeahead should be used when the user is selecting one option
       aria-label="Select"
     >
       <i
-        class="fas fa-caret-down pf-v5-c-select__toggle-arrow"
+        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
         aria-hidden="true"
       ></i>
     </button>
   </div>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     aria-labelledby="select-multi-typeahead-expanded-label"
     role="listbox"
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Alabama</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Florida</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Florida</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
+      <button class="pf-v6-c-select__menu-item" role="option">
         New
         &nbsp;Jersey
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
+      <button class="pf-v6-c-select__menu-item" role="option">
         New
         &nbsp;York
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">North Carolina</button>
+      <button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
     </li>
   </ul>
 </div>
@@ -1211,29 +1211,29 @@ The single select typeahead should be used when the user is selecting one option
 ### Multi with typeahead (chip group collapsed)
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-multi-typeahead-expanded-selected-label" hidden>Choose states</span>
 
-  <div class="pf-v5-c-select__toggle pf-m-typeahead">
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <div class="pf-v5-c-chip-group" role="group">
-        <div class="pf-v5-c-chip-group__main">
+  <div class="pf-v6-c-select__toggle pf-m-typeahead">
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <div class="pf-v6-c-chip-group" role="group">
+        <div class="pf-v6-c-chip-group__main">
           <ul
-            class="pf-v5-c-chip-group__list"
+            class="pf-v6-c-chip-group__list"
             role="list"
             aria-label="Chip group list"
           >
-            <li class="pf-v5-c-chip-group__list-item">
-              <div class="pf-v5-c-chip">
-                <span class="pf-v5-c-chip__content">
+            <li class="pf-v6-c-chip-group__list-item">
+              <div class="pf-v6-c-chip">
+                <span class="pf-v6-c-chip__content">
                   <span
-                    class="pf-v5-c-chip__text"
+                    class="pf-v6-c-chip__text"
                     id="select-multi-typeahead-expanded-selected-chip_one"
                   >Arkansas</span>
                 </span>
-                <span class="pf-v5-c-chip__actions">
+                <span class="pf-v6-c-chip__actions">
                   <button
-                    class="pf-v5-c-button pf-m-plain"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_one select-multi-typeahead-expanded-selected-chip_one"
                     aria-label="Remove"
@@ -1244,17 +1244,17 @@ The single select typeahead should be used when the user is selecting one option
                 </span>
               </div>
             </li>
-            <li class="pf-v5-c-chip-group__list-item">
-              <div class="pf-v5-c-chip">
-                <span class="pf-v5-c-chip__content">
+            <li class="pf-v6-c-chip-group__list-item">
+              <div class="pf-v6-c-chip">
+                <span class="pf-v6-c-chip__content">
                   <span
-                    class="pf-v5-c-chip__text"
+                    class="pf-v6-c-chip__text"
                     id="select-multi-typeahead-expanded-selected-chip_two"
                   >Massachusetts</span>
                 </span>
-                <span class="pf-v5-c-chip__actions">
+                <span class="pf-v6-c-chip__actions">
                   <button
-                    class="pf-v5-c-button pf-m-plain"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_two select-multi-typeahead-expanded-selected-chip_two"
                     aria-label="Remove"
@@ -1265,17 +1265,17 @@ The single select typeahead should be used when the user is selecting one option
                 </span>
               </div>
             </li>
-            <li class="pf-v5-c-chip-group__list-item">
-              <div class="pf-v5-c-chip">
-                <span class="pf-v5-c-chip__content">
+            <li class="pf-v6-c-chip-group__list-item">
+              <div class="pf-v6-c-chip">
+                <span class="pf-v6-c-chip__content">
                   <span
-                    class="pf-v5-c-chip__text"
+                    class="pf-v6-c-chip__text"
                     id="select-multi-typeahead-expanded-selected-chip_three"
                   >New Mexico</span>
                 </span>
-                <span class="pf-v5-c-chip__actions">
+                <span class="pf-v6-c-chip__actions">
                   <button
-                    class="pf-v5-c-button pf-m-plain"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_three select-multi-typeahead-expanded-selected-chip_three"
                     aria-label="Remove"
@@ -1286,17 +1286,17 @@ The single select typeahead should be used when the user is selecting one option
                 </span>
               </div>
             </li>
-            <li class="pf-v5-c-chip-group__list-item">
-              <button class="pf-v5-c-chip pf-m-overflow">
-                <span class="pf-v5-c-chip__content">
-                  <span class="pf-v5-c-chip__text">2 more</span>
+            <li class="pf-v6-c-chip-group__list-item">
+              <button class="pf-v6-c-chip pf-m-overflow">
+                <span class="pf-v6-c-chip__content">
+                  <span class="pf-v6-c-chip__text">2 more</span>
                 </span>
               </button>
             </li>
           </ul>
         </div>
       </div>
-      <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
+      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
         <input
           type="text"
           id="select-multi-typeahead-expanded-selected-typeahead"
@@ -1307,14 +1307,14 @@ The single select typeahead should be used when the user is selecting one option
       </span>
     </div>
     <button
-      class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear"
+      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-clear"
       type="button"
       aria-label="Clear all"
     >
       <i class="fas fa-times-circle" aria-hidden="true"></i>
     </button>
     <button
-      class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button"
+      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
       type="button"
       id="select-multi-typeahead-expanded-selected-toggle"
       aria-haspopup="true"
@@ -1323,26 +1323,26 @@ The single select typeahead should be used when the user is selecting one option
       aria-label="Select"
     >
       <i
-        class="fas fa-caret-down pf-v5-c-select__toggle-arrow"
+        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
         aria-hidden="true"
       ></i>
     </button>
   </div>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     aria-labelledby="select-multi-typeahead-expanded-selected-label"
     role="listbox"
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
-        <mark class="pf-v5-c-select__menu-item--match">New</mark>
+      <button class="pf-v6-c-select__menu-item" role="option">
+        <mark class="pf-v6-c-select__menu-item--match">New</mark>
         &nbsp;Jersey
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
-        <mark class="pf-v5-c-select__menu-item--match">New</mark>
+      <button class="pf-v6-c-select__menu-item" role="option">
+        <mark class="pf-v6-c-select__menu-item--match">New</mark>
         &nbsp;York
       </button>
     </li>
@@ -1354,29 +1354,29 @@ The single select typeahead should be used when the user is selecting one option
 ### Multi with typeahead invalid
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded pf-m-invalid">
+<div class="pf-v6-c-select pf-m-expanded pf-m-invalid">
   <span id="select-multi-typeahead-invalid-label" hidden>Choose states</span>
 
-  <div class="pf-v5-c-select__toggle pf-m-typeahead">
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <div class="pf-v5-c-chip-group" role="group">
-        <div class="pf-v5-c-chip-group__main">
+  <div class="pf-v6-c-select__toggle pf-m-typeahead">
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <div class="pf-v6-c-chip-group" role="group">
+        <div class="pf-v6-c-chip-group__main">
           <ul
-            class="pf-v5-c-chip-group__list"
+            class="pf-v6-c-chip-group__list"
             role="list"
             aria-label="Chip group list"
           >
-            <li class="pf-v5-c-chip-group__list-item">
-              <div class="pf-v5-c-chip">
-                <span class="pf-v5-c-chip__content">
+            <li class="pf-v6-c-chip-group__list-item">
+              <div class="pf-v6-c-chip">
+                <span class="pf-v6-c-chip__content">
                   <span
-                    class="pf-v5-c-chip__text"
+                    class="pf-v6-c-chip__text"
                     id="select-multi-typeahead-invalid-chip_one"
                   >Arkansas</span>
                 </span>
-                <span class="pf-v5-c-chip__actions">
+                <span class="pf-v6-c-chip__actions">
                   <button
-                    class="pf-v5-c-button pf-m-plain"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-labelledby="remove_select-multi-typeahead-invalid_chip_one select-multi-typeahead-invalid-chip_two"
                     aria-label="Remove"
@@ -1387,17 +1387,17 @@ The single select typeahead should be used when the user is selecting one option
                 </span>
               </div>
             </li>
-            <li class="pf-v5-c-chip-group__list-item">
-              <div class="pf-v5-c-chip">
-                <span class="pf-v5-c-chip__content">
+            <li class="pf-v6-c-chip-group__list-item">
+              <div class="pf-v6-c-chip">
+                <span class="pf-v6-c-chip__content">
                   <span
-                    class="pf-v5-c-chip__text"
+                    class="pf-v6-c-chip__text"
                     id="select-multi-typeahead-invalid-chip_two"
                   >Massachusetts</span>
                 </span>
-                <span class="pf-v5-c-chip__actions">
+                <span class="pf-v6-c-chip__actions">
                   <button
-                    class="pf-v5-c-button pf-m-plain"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-labelledby="remove_select-multi-typeahead-invalid_chip_two select-multi-typeahead-invalid-chip_two"
                     aria-label="Remove"
@@ -1408,17 +1408,17 @@ The single select typeahead should be used when the user is selecting one option
                 </span>
               </div>
             </li>
-            <li class="pf-v5-c-chip-group__list-item">
-              <div class="pf-v5-c-chip">
-                <span class="pf-v5-c-chip__content">
+            <li class="pf-v6-c-chip-group__list-item">
+              <div class="pf-v6-c-chip">
+                <span class="pf-v6-c-chip__content">
                   <span
-                    class="pf-v5-c-chip__text"
+                    class="pf-v6-c-chip__text"
                     id="select-multi-typeahead-invalid-chip_three"
                   >New Mexico</span>
                 </span>
-                <span class="pf-v5-c-chip__actions">
+                <span class="pf-v6-c-chip__actions">
                   <button
-                    class="pf-v5-c-button pf-m-plain"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-labelledby="remove_select-multi-typeahead-invalid_chip_three select-multi-typeahead-invalid-chip_three"
                     aria-label="Remove"
@@ -1429,17 +1429,17 @@ The single select typeahead should be used when the user is selecting one option
                 </span>
               </div>
             </li>
-            <li class="pf-v5-c-chip-group__list-item">
-              <div class="pf-v5-c-chip">
-                <span class="pf-v5-c-chip__content">
+            <li class="pf-v6-c-chip-group__list-item">
+              <div class="pf-v6-c-chip">
+                <span class="pf-v6-c-chip__content">
                   <span
-                    class="pf-v5-c-chip__text"
+                    class="pf-v6-c-chip__text"
                     id="select-multi-typeahead-invalid-chip_four"
                   >Ohio</span>
                 </span>
-                <span class="pf-v5-c-chip__actions">
+                <span class="pf-v6-c-chip__actions">
                   <button
-                    class="pf-v5-c-button pf-m-plain"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-labelledby="remove_select-multi-typeahead-invalid_chip_four select-multi-typeahead-invalid-chip_four"
                     aria-label="Remove"
@@ -1450,17 +1450,17 @@ The single select typeahead should be used when the user is selecting one option
                 </span>
               </div>
             </li>
-            <li class="pf-v5-c-chip-group__list-item">
-              <div class="pf-v5-c-chip">
-                <span class="pf-v5-c-chip__content">
+            <li class="pf-v6-c-chip-group__list-item">
+              <div class="pf-v6-c-chip">
+                <span class="pf-v6-c-chip__content">
                   <span
-                    class="pf-v5-c-chip__text"
+                    class="pf-v6-c-chip__text"
                     id="select-multi-typeahead-invalid-chip_five"
                   >Washington</span>
                 </span>
-                <span class="pf-v5-c-chip__actions">
+                <span class="pf-v6-c-chip__actions">
                   <button
-                    class="pf-v5-c-button pf-m-plain"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-labelledby="remove_select-multi-typeahead-invalid_chip_five select-multi-typeahead-invalid-chip_five"
                     aria-label="Remove"
@@ -1474,7 +1474,7 @@ The single select typeahead should be used when the user is selecting one option
           </ul>
         </div>
       </div>
-      <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
+      <span class="pf-v6-c-form-control pf-v5-c-select__toggle-typeahead">
         <input
           type="text"
           id="select-multi-typeahead-invalid-typeahead"
@@ -1485,18 +1485,18 @@ The single select typeahead should be used when the user is selecting one option
         />
       </span>
     </div>
-    <span class="pf-v5-c-select__toggle-status-icon">
+    <span class="pf-v6-c-select__toggle-status-icon">
       <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
     </span>
     <button
-      class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear"
+      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-clear"
       type="button"
       aria-label="Clear all"
     >
       <i class="fas fa-times-circle" aria-hidden="true"></i>
     </button>
     <button
-      class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button"
+      class="pf-v6-c-button pf-m-plain pf-v5-c-select__toggle-button"
       type="button"
       id="select-multi-typeahead-invalid-toggle"
       aria-haspopup="true"
@@ -1505,37 +1505,37 @@ The single select typeahead should be used when the user is selecting one option
       aria-label="Select"
     >
       <i
-        class="fas fa-caret-down pf-v5-c-select__toggle-arrow"
+        class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
         aria-hidden="true"
       ></i>
     </button>
   </div>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     aria-labelledby="select-multi-typeahead-invalid-label"
     role="listbox"
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Alabama</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Florida</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Florida</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
+      <button class="pf-v6-c-select__menu-item" role="option">
         New
         &nbsp;Jersey
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">
+      <button class="pf-v6-c-select__menu-item" role="option">
         New
         &nbsp;York
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">North Carolina</button>
+      <button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
     </li>
   </ul>
 </div>
@@ -1572,101 +1572,101 @@ The multiselect should be used when the user is selecting multiple items from a
 ### Checkbox select
 
 ```html
-<div class="pf-v5-c-select">
+<div class="pf-v6-c-select">
   <span id="select-checkbox-label" hidden>Choose many</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-checkbox-toggle"
     aria-haspopup="true"
     aria-expanded="false"
     aria-labelledby="select-checkbox-label select-checkbox-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
-  <div class="pf-v5-c-select__menu" hidden>
-    <fieldset class="pf-v5-c-select__menu-fieldset" aria-label="Select input">
+  <div class="pf-v6-c-select__menu" hidden>
+    <fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
+        class="pf-v6-c-check pf-v5-c-select__menu-item pf-m-description"
         id="select-checkbox-active"
         for="select-checkbox-active-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           aria-describedby="select-checkbox-active-description"
           id="select-checkbox-active-input"
           name="select-checkbox-active-input"
         />
-        <span class="pf-v5-c-check__label">Active</span>
+        <span class="pf-v6-c-check__label">Active</span>
         <span
-          class="pf-v5-c-check__description"
+          class="pf-v6-c-check__description"
           id="select-checkbox-active-description"
         >This is a description</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
+        class="pf-v6-c-check pf-v5-c-select__menu-item pf-m-description"
         id="select-checkbox-canceled"
         for="select-checkbox-canceled-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           aria-describedby="select-checkbox-canceled-description"
           id="select-checkbox-canceled-input"
           name="select-checkbox-canceled-input"
         />
-        <span class="pf-v5-c-check__label">Canceled</span>
+        <span class="pf-v6-c-check__label">Canceled</span>
         <span
-          class="pf-v5-c-check__description"
+          class="pf-v6-c-check__description"
           id="select-checkbox-canceled-description"
         >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-paused"
         for="select-checkbox-paused-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-paused-input"
           name="select-checkbox-paused-input"
         />
-        <span class="pf-v5-c-check__label">Paused</span>
+        <span class="pf-v6-c-check__label">Paused</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-warning"
         for="select-checkbox-warning-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-warning-input"
           name="select-checkbox-warning-input"
         />
-        <span class="pf-v5-c-check__label">Warning</span>
+        <span class="pf-v6-c-check__label">Warning</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-restarted"
         for="select-checkbox-restarted-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-restarted-input"
           name="select-checkbox-restarted-input"
         />
-        <span class="pf-v5-c-check__label">Restarted</span>
+        <span class="pf-v6-c-check__label">Restarted</span>
       </label>
     </fieldset>
   </div>
@@ -1677,94 +1677,94 @@ The multiselect should be used when the user is selecting multiple items from a
 ### Checkbox expanded
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-checkbox-expanded-label" hidden>Choose many</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-checkbox-expanded-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-checkbox-expanded-label select-checkbox-expanded-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
-  <div class="pf-v5-c-select__menu">
-    <fieldset class="pf-v5-c-select__menu-fieldset" aria-label="Select input">
+  <div class="pf-v6-c-select__menu">
+    <fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-expanded-check-active"
         for="select-checkbox-expanded-check-active-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-expanded-check-active-input"
           name="select-checkbox-expanded-check-active-input"
           checked
         />
-        <span class="pf-v5-c-check__label">Active</span>
+        <span class="pf-v6-c-check__label">Active</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-expanded-check-canceled"
         for="select-checkbox-expanded-check-canceled-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-expanded-check-canceled-input"
           name="select-checkbox-expanded-check-canceled-input"
           checked
         />
-        <span class="pf-v5-c-check__label">Canceled</span>
+        <span class="pf-v6-c-check__label">Canceled</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-expanded-check-paused"
         for="select-checkbox-expanded-check-paused-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-expanded-check-paused-input"
           name="select-checkbox-expanded-check-paused-input"
         />
-        <span class="pf-v5-c-check__label">Paused</span>
+        <span class="pf-v6-c-check__label">Paused</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-expanded-check-warning"
         for="select-checkbox-expanded-check-warning-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-expanded-check-warning-input"
           name="select-checkbox-expanded-check-warning-input"
           checked
         />
-        <span class="pf-v5-c-check__label">Warning</span>
+        <span class="pf-v6-c-check__label">Warning</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-expanded-check-restarted"
         for="select-checkbox-expanded-check-restarted-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-expanded-check-restarted-input"
           name="select-checkbox-expanded-check-restarted-input"
         />
-        <span class="pf-v5-c-check__label">Restarted</span>
+        <span class="pf-v6-c-check__label">Restarted</span>
       </label>
     </fieldset>
   </div>
@@ -1775,153 +1775,153 @@ The multiselect should be used when the user is selecting multiple items from a
 ### Checkbox expanded and selected with groups
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-checkbox-expanded-selected-label" hidden>Choose many</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-checkbox-expanded-selected-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-checkbox-expanded-selected-label select-checkbox-expanded-selected-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
-  <div class="pf-v5-c-select__menu">
-    <div class="pf-v5-c-select__menu-group">
+  <div class="pf-v6-c-select__menu">
+    <div class="pf-v6-c-select__menu-group">
       <div
-        class="pf-v5-c-select__menu-group-title"
+        class="pf-v6-c-select__menu-group-title"
         aria-hidden="true"
         id="select-checkbox-expanded-selected-group-status"
       >Status</div>
       <fieldset
-        class="pf-v5-c-select__menu-fieldset"
+        class="pf-v6-c-select__menu-fieldset"
         aria-labelledby="select-checkbox-expanded-selected-group-status"
       >
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-check-running"
           for="select-checkbox-expanded-selected-check-running-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-check-running-input"
             name="select-checkbox-expanded-selected-check-running-input"
           />
-          <span class="pf-v5-c-check__label">Running</span>
+          <span class="pf-v6-c-check__label">Running</span>
         </label>
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-check-stopped"
           for="select-checkbox-expanded-selected-check-stopped-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-check-stopped-input"
             name="select-checkbox-expanded-selected-check-stopped-input"
           />
-          <span class="pf-v5-c-check__label">Stopped</span>
+          <span class="pf-v6-c-check__label">Stopped</span>
         </label>
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-check-down"
           for="select-checkbox-expanded-selected-check-down-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-check-down-input"
             name="select-checkbox-expanded-selected-check-down-input"
           />
-          <span class="pf-v5-c-check__label">Down</span>
+          <span class="pf-v6-c-check__label">Down</span>
         </label>
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-check-degraded"
           for="select-checkbox-expanded-selected-check-degraded-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-check-degraded-input"
             name="select-checkbox-expanded-selected-check-degraded-input"
           />
-          <span class="pf-v5-c-check__label">Degraded</span>
+          <span class="pf-v6-c-check__label">Degraded</span>
         </label>
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-check-needs-maintenance"
           for="select-checkbox-expanded-selected-check-needs-maintenance-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-check-needs-maintenance-input"
             name="select-checkbox-expanded-selected-check-needs-maintenance-input"
             checked
           />
-          <span class="pf-v5-c-check__label">Needs maintenance</span>
+          <span class="pf-v6-c-check__label">Needs maintenance</span>
         </label>
       </fieldset>
     </div>
-    <div class="pf-v5-c-select__menu-group">
+    <div class="pf-v6-c-select__menu-group">
       <div
-        class="pf-v5-c-select__menu-group-title"
+        class="pf-v6-c-select__menu-group-title"
         aria-hidden="true"
         id="select-checkbox-expanded-selected-group-vendor"
       >Vendor</div>
       <fieldset
-        class="pf-v5-c-select__menu-fieldset"
+        class="pf-v6-c-select__menu-fieldset"
         aria-labelledby="select-checkbox-expanded-selected-group-vendor"
       >
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-check-dell"
           for="select-checkbox-expanded-selected-check-dell-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-check-dell-input"
             name="select-checkbox-expanded-selected-check-dell-input"
           />
-          <span class="pf-v5-c-check__label">Dell</span>
+          <span class="pf-v6-c-check__label">Dell</span>
         </label>
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-check-Samsung"
           for="select-checkbox-expanded-selected-check-Samsung-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-check-Samsung-input"
             name="select-checkbox-expanded-selected-check-Samsung-input"
             disabled
           />
-          <span class="pf-v5-c-check__label pf-m-disabled">Samsung</span>
+          <span class="pf-v6-c-check__label pf-m-disabled">Samsung</span>
         </label>
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-check-Hp"
           for="select-checkbox-expanded-selected-check-Hp-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-check-Hp-input"
             name="select-checkbox-expanded-selected-check-Hp-input"
           />
-          <span class="pf-v5-c-check__label">Hewlett-Packard</span>
+          <span class="pf-v6-c-check__label">Hewlett-Packard</span>
         </label>
       </fieldset>
     </div>
@@ -1933,38 +1933,38 @@ The multiselect should be used when the user is selecting multiple items from a
 ### Checkbox expanded and selected with groups and filter
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span
     id="select-checkbox-expanded-selected-filter-example-label"
     hidden
   >Choose many</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-checkbox-expanded-selected-filter-example-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-checkbox-expanded-selected-filter-example-label select-checkbox-expanded-selected-filter-example-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
-  <div class="pf-v5-c-select__menu">
-    <div class="pf-v5-c-select__menu-search">
-      <div class="pf-v5-c-text-input-group">
-        <div class="pf-v5-c-text-input-group__main pf-m-icon">
-          <span class="pf-v5-c-text-input-group__text">
-            <span class="pf-v5-c-text-input-group__icon">
+  <div class="pf-v6-c-select__menu">
+    <div class="pf-v6-c-select__menu-search">
+      <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-v5-c-text-input-group__text-input"
+              class="pf-v6-c-text-input-group__text-input"
               type="text"
               placeholder="Search"
               value
@@ -1974,134 +1974,134 @@ The multiselect should be used when the user is selecting multiple items from a
         </div>
       </div>
     </div>
-    <hr class="pf-v5-c-divider" />
-    <div class="pf-v5-c-select__menu-group">
+    <hr class="pf-v6-c-divider" />
+    <div class="pf-v6-c-select__menu-group">
       <div
-        class="pf-v5-c-select__menu-group-title"
+        class="pf-v6-c-select__menu-group-title"
         aria-hidden="true"
         id="select-checkbox-expanded-selected-filter-example-group-status"
       >Status</div>
       <fieldset
-        class="pf-v5-c-select__menu-fieldset"
+        class="pf-v6-c-select__menu-fieldset"
         aria-labelledby="select-checkbox-expanded-selected-filter-example-group-status"
       >
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-filter-example-check-running"
           for="select-checkbox-expanded-selected-filter-example-check-running-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-filter-example-check-running-input"
             name="select-checkbox-expanded-selected-filter-example-check-running-input"
           />
-          <span class="pf-v5-c-check__label">Running</span>
+          <span class="pf-v6-c-check__label">Running</span>
         </label>
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-filter-example-check-stopped"
           for="select-checkbox-expanded-selected-filter-example-check-stopped-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-filter-example-check-stopped-input"
             name="select-checkbox-expanded-selected-filter-example-check-stopped-input"
           />
-          <span class="pf-v5-c-check__label">Stopped</span>
+          <span class="pf-v6-c-check__label">Stopped</span>
         </label>
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-filter-example-check-down"
           for="select-checkbox-expanded-selected-filter-example-check-down-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-filter-example-check-down-input"
             name="select-checkbox-expanded-selected-filter-example-check-down-input"
           />
-          <span class="pf-v5-c-check__label">Down</span>
+          <span class="pf-v6-c-check__label">Down</span>
         </label>
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-filter-example-check-degraded"
           for="select-checkbox-expanded-selected-filter-example-check-degraded-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-filter-example-check-degraded-input"
             name="select-checkbox-expanded-selected-filter-example-check-degraded-input"
           />
-          <span class="pf-v5-c-check__label">Degraded</span>
+          <span class="pf-v6-c-check__label">Degraded</span>
         </label>
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-filter-example-check-needs-maintenance"
           for="select-checkbox-expanded-selected-filter-example-check-needs-maintenance-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-filter-example-check-needs-maintenance-input"
             name="select-checkbox-expanded-selected-filter-example-check-needs-maintenance-input"
             checked
           />
-          <span class="pf-v5-c-check__label">Needs maintenance</span>
+          <span class="pf-v6-c-check__label">Needs maintenance</span>
         </label>
       </fieldset>
     </div>
-    <div class="pf-v5-c-select__menu-group">
+    <div class="pf-v6-c-select__menu-group">
       <div
-        class="pf-v5-c-select__menu-group-title"
+        class="pf-v6-c-select__menu-group-title"
         aria-hidden="true"
         id="select-checkbox-expanded-selected-filter-example-group-vendor"
       >Vendor</div>
       <fieldset
-        class="pf-v5-c-select__menu-fieldset"
+        class="pf-v6-c-select__menu-fieldset"
         aria-labelledby="select-checkbox-expanded-selected-filter-example-group-vendor"
       >
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-filter-example-check-dell"
           for="select-checkbox-expanded-selected-filter-example-check-dell-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-filter-example-check-dell-input"
             name="select-checkbox-expanded-selected-filter-example-check-dell-input"
           />
-          <span class="pf-v5-c-check__label">Dell</span>
+          <span class="pf-v6-c-check__label">Dell</span>
         </label>
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-filter-example-check-Samsung"
           for="select-checkbox-expanded-selected-filter-example-check-Samsung-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-filter-example-check-Samsung-input"
             name="select-checkbox-expanded-selected-filter-example-check-Samsung-input"
             disabled
           />
-          <span class="pf-v5-c-check__label pf-m-disabled">Samsung</span>
+          <span class="pf-v6-c-check__label pf-m-disabled">Samsung</span>
         </label>
         <label
-          class="pf-v5-c-check pf-v5-c-select__menu-item"
+          class="pf-v6-c-check pf-v5-c-select__menu-item"
           id="select-checkbox-expanded-selected-filter-example-check-Hp"
           for="select-checkbox-expanded-selected-filter-example-check-Hp-input"
         >
           <input
-            class="pf-v5-c-check__input"
+            class="pf-v6-c-check__input"
             type="checkbox"
             id="select-checkbox-expanded-selected-filter-example-check-Hp-input"
             name="select-checkbox-expanded-selected-filter-example-check-Hp-input"
           />
-          <span class="pf-v5-c-check__label">Hewlett-Packard</span>
+          <span class="pf-v6-c-check__label">Hewlett-Packard</span>
         </label>
       </fieldset>
     </div>
@@ -2113,94 +2113,94 @@ The multiselect should be used when the user is selecting multiple items from a
 ### Checkbox expanded without badge
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-checkbox-without-badge-label" hidden>Choose many</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-checkbox-without-badge-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-checkbox-without-badge-label select-checkbox-without-badge-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
-  <div class="pf-v5-c-select__menu">
-    <fieldset class="pf-v5-c-select__menu-fieldset" aria-label="Select input">
+  <div class="pf-v6-c-select__menu">
+    <fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-without-badge-check-active"
         for="select-checkbox-without-badge-check-active-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-without-badge-check-active-input"
           name="select-checkbox-without-badge-check-active-input"
           checked
         />
-        <span class="pf-v5-c-check__label">Active</span>
+        <span class="pf-v6-c-check__label">Active</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-without-badge-check-canceled"
         for="select-checkbox-without-badge-check-canceled-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-without-badge-check-canceled-input"
           name="select-checkbox-without-badge-check-canceled-input"
           checked
         />
-        <span class="pf-v5-c-check__label">Canceled</span>
+        <span class="pf-v6-c-check__label">Canceled</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-without-badge-check-paused"
         for="select-checkbox-without-badge-check-paused-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-without-badge-check-paused-input"
           name="select-checkbox-without-badge-check-paused-input"
         />
-        <span class="pf-v5-c-check__label">Paused</span>
+        <span class="pf-v6-c-check__label">Paused</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-without-badge-check-warning"
         for="select-checkbox-without-badge-check-warning-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-without-badge-check-warning-input"
           name="select-checkbox-without-badge-check-warning-input"
           checked
         />
-        <span class="pf-v5-c-check__label">Warning</span>
+        <span class="pf-v6-c-check__label">Warning</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-without-badge-check-restarted"
         for="select-checkbox-without-badge-check-restarted-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-without-badge-check-restarted-input"
           name="select-checkbox-without-badge-check-restarted-input"
         />
-        <span class="pf-v5-c-check__label">Restarted</span>
+        <span class="pf-v6-c-check__label">Restarted</span>
       </label>
     </fieldset>
   </div>
@@ -2211,116 +2211,116 @@ The multiselect should be used when the user is selecting multiple items from a
 ### Checkbox with counts
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-checkbox-counts-label" hidden>Choose many</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-checkbox-counts-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-checkbox-counts-label select-checkbox-counts-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
-  <div class="pf-v5-c-select__menu">
-    <fieldset class="pf-v5-c-select__menu-fieldset" aria-label="Select input">
+  <div class="pf-v6-c-select__menu">
+    <fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-counts-active"
         for="select-checkbox-counts-active-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-counts-active-input"
           name="select-checkbox-counts-active-input"
         />
-        <span class="pf-v5-c-check__label">
-          <span class="pf-v5-c-select__menu-item-row">
-            <span class="pf-v5-c-select__menu-item-text">Active</span>
-            <span class="pf-v5-c-select__menu-item-count">3</span>
+        <span class="pf-v6-c-check__label">
+          <span class="pf-v6-c-select__menu-item-row">
+            <span class="pf-v6-c-select__menu-item-text">Active</span>
+            <span class="pf-v6-c-select__menu-item-count">3</span>
           </span>
         </span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-counts-canceled"
         for="select-checkbox-counts-canceled-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-counts-canceled-input"
           name="select-checkbox-counts-canceled-input"
           checked
         />
-        <span class="pf-v5-c-check__label">
-          <span class="pf-v5-c-select__menu-item-row">
-            <span class="pf-v5-c-select__menu-item-text">Canceled</span>
-            <span class="pf-v5-c-select__menu-item-count">1</span>
+        <span class="pf-v6-c-check__label">
+          <span class="pf-v6-c-select__menu-item-row">
+            <span class="pf-v6-c-select__menu-item-text">Canceled</span>
+            <span class="pf-v6-c-select__menu-item-count">1</span>
           </span>
         </span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-counts-paused"
         for="select-checkbox-counts-paused-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-counts-paused-input"
           name="select-checkbox-counts-paused-input"
         />
-        <span class="pf-v5-c-check__label">
-          <span class="pf-v5-c-select__menu-item-row">
-            <span class="pf-v5-c-select__menu-item-text">Paused</span>
-            <span class="pf-v5-c-select__menu-item-count">15</span>
+        <span class="pf-v6-c-check__label">
+          <span class="pf-v6-c-select__menu-item-row">
+            <span class="pf-v6-c-select__menu-item-text">Paused</span>
+            <span class="pf-v6-c-select__menu-item-count">15</span>
           </span>
         </span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-counts-warning"
         for="select-checkbox-counts-warning-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-counts-warning-input"
           name="select-checkbox-counts-warning-input"
           checked
         />
-        <span class="pf-v5-c-check__label">
-          <span class="pf-v5-c-select__menu-item-row">
-            <span class="pf-v5-c-select__menu-item-text">Warning</span>
-            <span class="pf-v5-c-select__menu-item-count">2</span>
+        <span class="pf-v6-c-check__label">
+          <span class="pf-v6-c-select__menu-item-row">
+            <span class="pf-v6-c-select__menu-item-text">Warning</span>
+            <span class="pf-v6-c-select__menu-item-count">2</span>
           </span>
         </span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-counts-restarted"
         for="select-checkbox-counts-restarted-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-counts-restarted-input"
           name="select-checkbox-counts-restarted-input"
         />
-        <span class="pf-v5-c-check__label">
-          <span class="pf-v5-c-select__menu-item-row">
-            <span class="pf-v5-c-select__menu-item-text">Restarted</span>
-            <span class="pf-v5-c-select__menu-item-count">8</span>
+        <span class="pf-v6-c-check__label">
+          <span class="pf-v6-c-select__menu-item-row">
+            <span class="pf-v6-c-select__menu-item-text">Restarted</span>
+            <span class="pf-v6-c-select__menu-item-count">8</span>
           </span>
         </span>
       </label>
@@ -2361,54 +2361,54 @@ The checkbox select can select multiple items using checkboxes. The number of it
 ### Plain toggle
 
 ```html
-<div class="pf-v5-c-select">
+<div class="pf-v6-c-select">
   <span id="select-plain-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle pf-m-plain"
+    class="pf-v6-c-select__toggle pf-m-plain"
     type="button"
     id="select-plain-toggle"
     aria-haspopup="true"
     aria-expanded="false"
     aria-labelledby="select-plain-label select-plain-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-plain-label"
     hidden
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>
@@ -2418,53 +2418,53 @@ The checkbox select can select multiple items using checkboxes. The number of it
 ### Plain toggle expanded
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-plain-expanded-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle pf-m-plain"
+    class="pf-v6-c-select__toggle pf-m-plain"
     type="button"
     id="select-plain-expanded-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-plain-expanded-label select-plain-expanded-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-plain-expanded-label"
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>
@@ -2493,57 +2493,57 @@ The plain select variation should be used when you do not want a border applied
 ### Toggle icon
 
 ```html
-<div class="pf-v5-c-select">
+<div class="pf-v6-c-select">
   <span id="select-icon-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-icon-toggle"
     aria-haspopup="true"
     aria-expanded="false"
     aria-labelledby="select-icon-label select-icon-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-icon">
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-icon">
         <i class="fas fa-filter" aria-hidden="true"></i>
       </span>
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-icon-label"
     hidden
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>
@@ -2571,27 +2571,27 @@ The plain select variation should be used when you do not want a border applied
 ### Panel menu
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-panel-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-panel-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-panel-label select-panel-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <div
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     aria-labelledby="select-panel-label"
   >[Panel contents here]</div>
 </div>
@@ -2613,81 +2613,81 @@ The plain select variation should be used when you do not want a border applied
 ### Item description
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-with-description-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-with-description-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-with-description-label select-with-description-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Select with description</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Select with description</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-with-description-label"
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Menu item</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Menu item</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item pf-m-description" role="option">
-        <span class="pf-v5-c-select__menu-item-main">Menu item description</span>
+      <button class="pf-v6-c-select__menu-item pf-m-description" role="option">
+        <span class="pf-v6-c-select__menu-item-main">Menu item description</span>
         <span
-          class="pf-v5-c-select__menu-item-description"
+          class="pf-v6-c-select__menu-item-description"
         >This is a description.</span>
       </button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-description"
+        class="pf-v6-c-select__menu-item pf-m-description"
         role="option"
         disabled
       >
-        <span class="pf-v5-c-select__menu-item-main">
+        <span class="pf-v6-c-select__menu-item-main">
           <span
-            class="pf-v5-c-select__menu-item-main"
+            class="pf-v6-c-select__menu-item-main"
           >Menu item description disabled</span>
         </span>
         <span
-          class="pf-v5-c-select__menu-item-description"
+          class="pf-v6-c-select__menu-item-description"
         >This is a description.</span>
       </button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected pf-m-description"
+        class="pf-v6-c-select__menu-item pf-m-selected pf-m-description"
         role="option"
         aria-selected="true"
       >
-        <span class="pf-v5-c-select__menu-item-main">
+        <span class="pf-v6-c-select__menu-item-main">
           Menu item description selected
           <span
-            class="pf-v5-c-select__menu-item-icon"
+            class="pf-v6-c-select__menu-item-icon"
           >
             <i class="fas fa-check" aria-hidden="true"></i>
           </span>
         </span>
         <span
-          class="pf-v5-c-select__menu-item-description"
+          class="pf-v6-c-select__menu-item-description"
         >This is a description.</span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item pf-m-description" role="option">
-        <span class="pf-v5-c-select__menu-item-main">Menu item long description</span>
+      <button class="pf-v6-c-select__menu-item pf-m-description" role="option">
+        <span class="pf-v6-c-select__menu-item-main">Menu item long description</span>
         <span
-          class="pf-v5-c-select__menu-item-description"
+          class="pf-v6-c-select__menu-item-description"
         >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
       </button>
     </li>
@@ -2699,101 +2699,101 @@ The plain select variation should be used when you do not want a border applied
 ### Checkbox item description
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-checkbox-description-label" hidden>Choose many</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-checkbox-description-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-checkbox-description-label select-checkbox-description-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
-  <div class="pf-v5-c-select__menu">
-    <fieldset class="pf-v5-c-select__menu-fieldset" aria-label="Select input">
+  <div class="pf-v6-c-select__menu">
+    <fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
+        class="pf-v6-c-check pf-v5-c-select__menu-item pf-m-description"
         id="select-checkbox-description-active"
         for="select-checkbox-description-active-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           aria-describedby="select-checkbox-description-active-description"
           id="select-checkbox-description-active-input"
           name="select-checkbox-description-active-input"
         />
-        <span class="pf-v5-c-check__label">Active</span>
+        <span class="pf-v6-c-check__label">Active</span>
         <span
-          class="pf-v5-c-check__description"
+          class="pf-v6-c-check__description"
           id="select-checkbox-description-active-description"
         >This is a description</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
+        class="pf-v6-c-check pf-v5-c-select__menu-item pf-m-description"
         id="select-checkbox-description-canceled"
         for="select-checkbox-description-canceled-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           aria-describedby="select-checkbox-description-canceled-description"
           id="select-checkbox-description-canceled-input"
           name="select-checkbox-description-canceled-input"
         />
-        <span class="pf-v5-c-check__label">Canceled</span>
+        <span class="pf-v6-c-check__label">Canceled</span>
         <span
-          class="pf-v5-c-check__description"
+          class="pf-v6-c-check__description"
           id="select-checkbox-description-canceled-description"
         >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-description-paused"
         for="select-checkbox-description-paused-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-description-paused-input"
           name="select-checkbox-description-paused-input"
         />
-        <span class="pf-v5-c-check__label">Paused</span>
+        <span class="pf-v6-c-check__label">Paused</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-description-warning"
         for="select-checkbox-description-warning-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-description-warning-input"
           name="select-checkbox-description-warning-input"
         />
-        <span class="pf-v5-c-check__label">Warning</span>
+        <span class="pf-v6-c-check__label">Warning</span>
       </label>
       <label
-        class="pf-v5-c-check pf-v5-c-select__menu-item"
+        class="pf-v6-c-check pf-v5-c-select__menu-item"
         id="select-checkbox-description-restarted"
         for="select-checkbox-description-restarted-input"
       >
         <input
-          class="pf-v5-c-check__input"
+          class="pf-v6-c-check__input"
           type="checkbox"
           id="select-checkbox-description-restarted-input"
           name="select-checkbox-description-restarted-input"
         />
-        <span class="pf-v5-c-check__label">Restarted</span>
+        <span class="pf-v6-c-check__label">Restarted</span>
       </label>
     </fieldset>
   </div>
@@ -2814,35 +2814,35 @@ The plain select variation should be used when you do not want a border applied
 ### Menu item favorites
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-favorites-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-favorites-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-favorites-label select-favorites-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Favorites</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Favorites</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
-  <div class="pf-v5-c-select__menu" aria-labelledby="select-favorites-label">
-    <div class="pf-v5-c-select__menu-search">
-      <div class="pf-v5-c-text-input-group">
-        <div class="pf-v5-c-text-input-group__main pf-m-icon">
-          <span class="pf-v5-c-text-input-group__text">
-            <span class="pf-v5-c-text-input-group__icon">
+  <div class="pf-v6-c-select__menu" aria-labelledby="select-favorites-label">
+    <div class="pf-v6-c-select__menu-search">
+      <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-v5-c-text-input-group__text-input"
+              class="pf-v6-c-text-input-group__text-input"
               type="text"
               placeholder="Search"
               value
@@ -2852,173 +2852,173 @@ The plain select variation should be used when you do not want a border applied
         </div>
       </div>
     </div>
-    <hr class="pf-v5-c-divider" />
-    <div class="pf-v5-c-select__menu-group">
+    <hr class="pf-v6-c-divider" />
+    <div class="pf-v6-c-select__menu-group">
       <div
-        class="pf-v5-c-select__menu-group-title"
+        class="pf-v6-c-select__menu-group-title"
         aria-hidden="true"
         id="select-favorites-group-title-1"
       >Favorites</div>
       <ul role="listbox" aria-labelledby="select-favorites-group-title-1">
         <li
-          class="pf-v5-c-select__menu-wrapper pf-m-favorite"
+          class="pf-v6-c-select__menu-wrapper pf-m-favorite"
           role="presentation"
         >
           <button
-            class="pf-v5-c-select__menu-item pf-m-link pf-m-description"
+            class="pf-v6-c-select__menu-item pf-m-link pf-m-description"
             role="option"
           >
-            <span class="pf-v5-c-select__menu-item-main">Item 1</span>
+            <span class="pf-v6-c-select__menu-item-main">Item 1</span>
             <span
-              class="pf-v5-c-select__menu-item-description"
+              class="pf-v6-c-select__menu-item-description"
             >This is a description.</span>
           </button>
           <button
-            class="pf-v5-c-select__menu-item pf-m-action pf-m-favorite-action"
+            class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
             role="option"
             aria-label="Starred"
           >
-            <span class="pf-v5-c-select__menu-item-action-icon">
+            <span class="pf-v6-c-select__menu-item-action-icon">
               <i class="fas fa-star" aria-hidden="true"></i>
             </span>
           </button>
         </li>
         <li
-          class="pf-v5-c-select__menu-wrapper pf-m-favorite"
+          class="pf-v6-c-select__menu-wrapper pf-m-favorite"
           role="presentation"
         >
           <button
-            class="pf-v5-c-select__menu-item pf-m-link"
+            class="pf-v6-c-select__menu-item pf-m-link"
             role="option"
           >Item 4</button>
           <button
-            class="pf-v5-c-select__menu-item pf-m-action pf-m-favorite-action"
+            class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
             role="option"
             aria-label="Starred"
           >
-            <span class="pf-v5-c-select__menu-item-action-icon">
+            <span class="pf-v6-c-select__menu-item-action-icon">
               <i class="fas fa-star" aria-hidden="true"></i>
             </span>
           </button>
         </li>
       </ul>
     </div>
-    <hr class="pf-v5-c-divider" />
-    <div class="pf-v5-c-select__menu-group">
+    <hr class="pf-v6-c-divider" />
+    <div class="pf-v6-c-select__menu-group">
       <div
-        class="pf-v5-c-select__menu-group-title"
+        class="pf-v6-c-select__menu-group-title"
         aria-hidden="true"
         id="select-favorites-group-title-2"
       >Group 1</div>
       <ul role="listbox" aria-labelledby="select-favorites-group-title-2">
         <li
-          class="pf-v5-c-select__menu-wrapper pf-m-favorite"
+          class="pf-v6-c-select__menu-wrapper pf-m-favorite"
           role="presentation"
         >
           <button
-            class="pf-v5-c-select__menu-item pf-m-link pf-m-description"
+            class="pf-v6-c-select__menu-item pf-m-link pf-m-description"
             role="option"
           >
-            <span class="pf-v5-c-select__menu-item-main">Item 1</span>
+            <span class="pf-v6-c-select__menu-item-main">Item 1</span>
             <span
-              class="pf-v5-c-select__menu-item-description"
+              class="pf-v6-c-select__menu-item-description"
             >This is a description.</span>
           </button>
           <button
-            class="pf-v5-c-select__menu-item pf-m-action pf-m-favorite-action"
+            class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
             role="option"
             aria-label="Starred"
           >
-            <span class="pf-v5-c-select__menu-item-action-icon">
+            <span class="pf-v6-c-select__menu-item-action-icon">
               <i class="fas fa-star" aria-hidden="true"></i>
             </span>
           </button>
         </li>
-        <li class="pf-v5-c-select__menu-wrapper" role="presentation">
+        <li class="pf-v6-c-select__menu-wrapper" role="presentation">
           <button
-            class="pf-v5-c-select__menu-item pf-m-selected pf-m-link"
+            class="pf-v6-c-select__menu-item pf-m-selected pf-m-link"
             role="option"
             aria-selected="true"
           >
             Item 2
-            <span class="pf-v5-c-select__menu-item-icon">
+            <span class="pf-v6-c-select__menu-item-icon">
               <i class="fas fa-check" aria-hidden="true"></i>
             </span>
           </button>
           <button
-            class="pf-v5-c-select__menu-item pf-m-action pf-m-favorite-action"
+            class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
             role="option"
             aria-label="Not starred"
           >
-            <span class="pf-v5-c-select__menu-item-action-icon">
+            <span class="pf-v6-c-select__menu-item-action-icon">
               <i class="fas fa-star" aria-hidden="true"></i>
             </span>
           </button>
         </li>
         <li
-          class="pf-v5-c-select__menu-wrapper pf-m-disabled"
+          class="pf-v6-c-select__menu-wrapper pf-m-disabled"
           role="presentation"
         >
           <button
-            class="pf-v5-c-select__menu-item pf-m-link"
+            class="pf-v6-c-select__menu-item pf-m-link"
             role="option"
             disabled
           >Item 3 (disabled)</button>
           <button
-            class="pf-v5-c-select__menu-item pf-m-action pf-m-favorite-action"
+            class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
             role="option"
             disabled
             aria-label="Not starred"
           >
-            <span class="pf-v5-c-select__menu-item-action-icon">
+            <span class="pf-v6-c-select__menu-item-action-icon">
               <i class="fas fa-star" aria-hidden="true"></i>
             </span>
           </button>
         </li>
       </ul>
     </div>
-    <hr class="pf-v5-c-divider" />
-    <div class="pf-v5-c-select__menu-group">
+    <hr class="pf-v6-c-divider" />
+    <div class="pf-v6-c-select__menu-group">
       <div
-        class="pf-v5-c-select__menu-group-title"
+        class="pf-v6-c-select__menu-group-title"
         aria-hidden="true"
         id="select-favorites-group-title-3"
       >Group 2</div>
       <ul role="listbox" aria-labelledby="select-favorites-group-title-3">
         <li
-          class="pf-v5-c-select__menu-wrapper pf-m-favorite"
+          class="pf-v6-c-select__menu-wrapper pf-m-favorite"
           role="presentation"
         >
           <button
-            class="pf-v5-c-select__menu-item pf-m-link"
+            class="pf-v6-c-select__menu-item pf-m-link"
             role="option"
           >Item 4</button>
           <button
-            class="pf-v5-c-select__menu-item pf-m-action pf-m-favorite-action"
+            class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
             role="option"
             aria-label="Starred"
           >
-            <span class="pf-v5-c-select__menu-item-action-icon">
+            <span class="pf-v6-c-select__menu-item-action-icon">
               <i class="fas fa-star" aria-hidden="true"></i>
             </span>
           </button>
         </li>
-        <li class="pf-v5-c-select__menu-wrapper" role="presentation">
+        <li class="pf-v6-c-select__menu-wrapper" role="presentation">
           <button
-            class="pf-v5-c-select__menu-item pf-m-link pf-m-description"
+            class="pf-v6-c-select__menu-item pf-m-link pf-m-description"
             role="option"
           >
-            <span class="pf-v5-c-select__menu-item-main">Item 5</span>
+            <span class="pf-v6-c-select__menu-item-main">Item 5</span>
             <span
-              class="pf-v5-c-select__menu-item-description"
+              class="pf-v6-c-select__menu-item-description"
             >This is a description.</span>
           </button>
           <button
-            class="pf-v5-c-select__menu-item pf-m-action pf-m-favorite-action"
+            class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
             role="option"
             aria-label="Not starred"
           >
-            <span class="pf-v5-c-select__menu-item-action-icon">
+            <span class="pf-v6-c-select__menu-item-action-icon">
               <i class="fas fa-star" aria-hidden="true"></i>
             </span>
           </button>
@@ -3052,57 +3052,57 @@ The plain select variation should be used when you do not want a border applied
 ### View more menu item
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-single-view-more-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-single-view-more-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-single-view-more-label select-single-view-more-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-single-view-more-label"
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-load"
+        class="pf-v6-c-select__menu-item pf-m-load"
         role="option"
       >View more</button>
     </li>
@@ -3122,64 +3122,64 @@ The plain select variation should be used when you do not want a border applied
 ### Loading menu item
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-single-loading-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-single-loading-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-single-loading-label select-single-loading-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-single-loading-label"
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
-    <li role="presentation" class="pf-v5-c-select__list-item pf-m-loading">
-      <button class="pf-v5-c-select__menu-item" role="option">
+    <li role="presentation" class="pf-v6-c-select__list-item pf-m-loading">
+      <button class="pf-v6-c-select__menu-item" role="option">
         <svg
-          class="pf-v5-c-spinner pf-m-lg"
+          class="pf-v6-c-spinner pf-m-lg"
           role="progressbar"
           viewBox="0 0 100 100"
           aria-label="Loading items"
         >
           <circle
-            class="pf-v5-c-spinner__path"
+            class="pf-v6-c-spinner__path"
             cx="50"
             cy="50"
             r="45"
@@ -3205,61 +3205,61 @@ The plain select variation should be used when you do not want a border applied
 ### Menu footer
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-single-footer-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle"
+    class="pf-v6-c-select__toggle"
     type="button"
     id="select-single-footer-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-single-footer-label select-single-footer-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
-  <div class="pf-v5-c-select__menu">
+  <div class="pf-v6-c-select__menu">
     <ul
-      class="pf-v5-c-select__menu-list"
+      class="pf-v6-c-select__menu-list"
       role="listbox"
       aria-labelledby="select-single-footer-label"
     >
       <li role="presentation">
-        <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+        <button class="pf-v6-c-select__menu-item" role="option">Running</button>
       </li>
       <li role="presentation">
         <button
-          class="pf-v5-c-select__menu-item pf-m-selected"
+          class="pf-v6-c-select__menu-item pf-m-selected"
           role="option"
           aria-selected="true"
         >
           Stopped
-          <span class="pf-v5-c-select__menu-item-icon">
+          <span class="pf-v6-c-select__menu-item-icon">
             <i class="fas fa-check" aria-hidden="true"></i>
           </span>
         </button>
       </li>
       <li role="presentation">
-        <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+        <button class="pf-v6-c-select__menu-item" role="option">Down</button>
       </li>
       <li role="presentation">
-        <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+        <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
       </li>
       <li role="presentation">
         <button
-          class="pf-v5-c-select__menu-item"
+          class="pf-v6-c-select__menu-item"
           role="option"
         >Needs maintenance</button>
       </li>
     </ul>
-    <div class="pf-v5-c-select__menu-footer">
-      <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">Action</button>
+    <div class="pf-v6-c-select__menu-footer">
+      <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Action</button>
     </div>
   </div>
 </div>
@@ -3278,54 +3278,54 @@ The plain select variation should be used when you do not want a border applied
 ### Placeholder collapsed
 
 ```html
-<div class="pf-v5-c-select">
+<div class="pf-v6-c-select">
   <span id="select-placeholder-collapsed-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle pf-m-placeholder"
+    class="pf-v6-c-select__toggle pf-m-placeholder"
     type="button"
     id="select-placeholder-collapsed-toggle"
     aria-haspopup="true"
     aria-expanded="false"
     aria-labelledby="select-placeholder-collapsed-label select-placeholder-collapsed-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-placeholder-collapsed-label"
     hidden
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>
@@ -3335,53 +3335,53 @@ The plain select variation should be used when you do not want a border applied
 ### Placeholder expanded
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-placeholder-expanded-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle pf-m-placeholder"
+    class="pf-v6-c-select__toggle pf-m-placeholder"
     type="button"
     id="select-placeholder-expanded-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-placeholder-expanded-label select-placeholder-expanded-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-placeholder-expanded-label"
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>
@@ -3391,60 +3391,60 @@ The plain select variation should be used when you do not want a border applied
 ### Placeholder item disabled
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-placeholder-item-disabled-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle pf-m-placeholder"
+    class="pf-v6-c-select__toggle pf-m-placeholder"
     type="button"
     id="select-placeholder-item-disabled-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-placeholder-item-disabled-label select-placeholder-item-disabled-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-placeholder-item-disabled-label"
   >
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item"
+        class="pf-v6-c-select__menu-item"
         role="option"
         disabled
       >Filter by status</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>
@@ -3454,56 +3454,56 @@ The plain select variation should be used when you do not want a border applied
 ### Placeholder item enabled
 
 ```html
-<div class="pf-v5-c-select pf-m-expanded">
+<div class="pf-v6-c-select pf-m-expanded">
   <span id="select-placeholder-item-enabled-label" hidden>Choose one</span>
 
   <button
-    class="pf-v5-c-select__toggle pf-m-placeholder"
+    class="pf-v6-c-select__toggle pf-m-placeholder"
     type="button"
     id="select-placeholder-item-enabled-toggle"
     aria-haspopup="true"
     aria-expanded="true"
     aria-labelledby="select-placeholder-item-enabled-label select-placeholder-item-enabled-toggle"
   >
-    <div class="pf-v5-c-select__toggle-wrapper">
-      <span class="pf-v5-c-select__toggle-text">Filter by status</span>
+    <div class="pf-v6-c-select__toggle-wrapper">
+      <span class="pf-v6-c-select__toggle-text">Filter by status</span>
     </div>
-    <span class="pf-v5-c-select__toggle-arrow">
+    <span class="pf-v6-c-select__toggle-arrow">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
     </span>
   </button>
 
   <ul
-    class="pf-v5-c-select__menu"
+    class="pf-v6-c-select__menu"
     role="listbox"
     aria-labelledby="select-placeholder-item-enabled-label"
   >
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Filter by status</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Filter by status</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Running</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Running</button>
     </li>
     <li role="presentation">
       <button
-        class="pf-v5-c-select__menu-item pf-m-selected"
+        class="pf-v6-c-select__menu-item pf-m-selected"
         role="option"
         aria-selected="true"
       >
         Stopped
-        <span class="pf-v5-c-select__menu-item-icon">
+        <span class="pf-v6-c-select__menu-item-icon">
           <i class="fas fa-check" aria-hidden="true"></i>
         </span>
       </button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Down</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Down</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
     </li>
     <li role="presentation">
-      <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
+      <button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
     </li>
   </ul>
 </div>