@patternfly/patternfly 6.0.0-alpha.97 → 6.0.0-alpha.99

package/docs/components/DataList/examples/DataList.md

@@ -1,7 +1,7 @@
 ---
 id: Data list
 section: components
-cssPrefix: pf-v5-c-data-list
+cssPrefix: pf-v6-c-data-list
 ---## Examples
 
 ### Basic
@@ -44,24 +44,24 @@ cssPrefix: pf-v5-c-data-list
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role="list"`       | `.pf-v5-c-data-list` | Indicates that the data list is a list. **Required** |
-| `aria-label`        | `.pf-v5-c-data-list`       | Provides an accessible name for the data list. **Required** |
-| `aria-labelledby`   | `.pf-v5-c-data-list__item` | Provides an accessible description for data list item. **Required** |
-| `id`                | `.pf-v5-c-data-list__cell`, `.pf-v5-c-data-list__cell *`  | Provides a reference for data list item description. **Required** |
+| `role="list"`       | `.pf-v6-c-data-list` | Indicates that the data list is a list. **Required** |
+| `aria-label`        | `.pf-v6-c-data-list`       | Provides an accessible name for the data list. **Required** |
+| `aria-labelledby`   | `.pf-v6-c-data-list__item` | Provides an accessible description for data list item. **Required** |
+| `id`                | `.pf-v6-c-data-list__cell`, `.pf-v6-c-data-list__cell *`  | Provides a reference for data list item description. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-data-list` | `<ul>` | Initiates a data list. **Required** |
-| `.pf-v5-c-data-list__item` | `<li>` | Initiates a data list item. **Required** |
-| `.pf-v5-c-data-list__item-row` | `<div>` | Initiates a data list item row. **Required** |
-| `.pf-v5-c-data-list__item-content` | `<div>` | Initiates a container for data list content. **Required**|
-| `.pf-v5-c-data-list__cell` | `*` | Initiates a data list content cell. **Required** |
-| `.pf-v5-c-data-list__cell-text` | `<span>` | Initiates a data list content cell text element. |
-| `.pf-m-align-left` | `.pf-v5-c-data-list__cell` | Modifies a data list cell to not grow and align-left when its the first data-list\_\_cell element. |
-| `.pf-m-no-fill` | `.pf-v5-c-data-list__cell` | Modifies a data list cell to not fill the available horizontal space. |
-| `.pf-m-align-right` | `.pf-v5-c-data-list__cell` | Modifies a data list cell to align-right. |
+| `.pf-v6-c-data-list` | `<ul>` | Initiates a data list. **Required** |
+| `.pf-v6-c-data-list__item` | `<li>` | Initiates a data list item. **Required** |
+| `.pf-v6-c-data-list__item-row` | `<div>` | Initiates a data list item row. **Required** |
+| `.pf-v6-c-data-list__item-content` | `<div>` | Initiates a container for data list content. **Required**|
+| `.pf-v6-c-data-list__cell` | `*` | Initiates a data list content cell. **Required** |
+| `.pf-v6-c-data-list__cell-text` | `<span>` | Initiates a data list content cell text element. |
+| `.pf-m-align-left` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to not grow and align-left when its the first data-list\_\_cell element. |
+| `.pf-m-no-fill` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to not fill the available horizontal space. |
+| `.pf-m-align-right` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to align-right. |
 
 ### With headings
 
@@ -127,14 +127,19 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-v6-c-data-list__item-row">
       <div class="pf-v6-c-data-list__item-control">
         <div class="pf-v6-c-data-list__check">
-          <div class="pf-v6-c-check pf-m-standalone">
+          <label
+            class="pf-v6-c-check pf-m-standalone"
+            id="data-list-checkboxes-actions-addl-cells-item-1&quot;"
+            for="data-list-checkboxes-actions-addl-cells-item-1&quot;-input"
+          >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              name="data-list-checkboxes-actions-addl-cells-item-1-checkbox"
-              aria-labelledby="data-list-checkboxes-actions-addl-cells-item-1"
+              id="data-list-checkboxes-actions-addl-cells-item-1&quot;-input"
+              name="data-list-checkboxes-actions-addl-cells-item-1&quot;-input"
+              aria-label="Standalone check"
             />
-          </div>
+          </label>
         </div>
       </div>
       <div class="pf-v6-c-data-list__item-content">
@@ -227,14 +232,19 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-v6-c-data-list__item-row">
       <div class="pf-v6-c-data-list__item-control">
         <div class="pf-v6-c-data-list__check">
-          <div class="pf-v6-c-check pf-m-standalone">
+          <label
+            class="pf-v6-c-check pf-m-standalone"
+            id="data-list-checkboxes-actions-addl-cells-item-2&quot;"
+            for="data-list-checkboxes-actions-addl-cells-item-2&quot;-input"
+          >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              name="data-list-checkboxes-actions-addl-cells-item-2-checkbox"
-              aria-labelledby="data-list-checkboxes-actions-addl-cells-item-2"
+              id="data-list-checkboxes-actions-addl-cells-item-2&quot;-input"
+              name="data-list-checkboxes-actions-addl-cells-item-2&quot;-input"
+              aria-label="Standalone check"
             />
-          </div>
+          </label>
         </div>
       </div>
       <div class="pf-v6-c-data-list__item-content">
@@ -324,14 +334,19 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-v6-c-data-list__item-row">
       <div class="pf-v6-c-data-list__item-control">
         <div class="pf-v6-c-data-list__check">
-          <div class="pf-v6-c-check pf-m-standalone">
+          <label
+            class="pf-v6-c-check pf-m-standalone"
+            id="data-list-checkboxes-actions-addl-cells-item-3&quot;"
+            for="data-list-checkboxes-actions-addl-cells-item-3&quot;-input"
+          >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              name="data-list-checkboxes-actions-addl-cells-item-3-checkbox"
-              aria-labelledby="data-list-checkboxes-actions-addl-cells-item-3"
+              id="data-list-checkboxes-actions-addl-cells-item-3&quot;-input"
+              name="data-list-checkboxes-actions-addl-cells-item-3&quot;-input"
+              aria-label="Standalone check"
             />
-          </div>
+          </label>
         </div>
       </div>
       <div class="pf-v6-c-data-list__item-content">
@@ -423,21 +438,21 @@ When a list item includes more than one block of content, it can be difficult fo
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-label="[descriptive text]"`  | `.pf-v5-c-data-list__action` > `.pf-v5-c-button`  | Provides an accessible label buttons. **Required** |
-| `aria-labelledby="{title_cell_id}"`  | `.pf-v5-c-data-list__check` > `.pf-v5-c-check__input`   | Creates an accessible label for the checkbox based on the title cell. **Required** |
-| `aria-labelledby="{title_cell_id} {data_list_action_id}"`  | `.pf-v5-c-data-list__action` > `.pf-v5-c-button`   | Creates an accessible label for the action button using the title cell and button label **Required** |
-| `id`  | `.pf-v5-c-data-list__cell > *`, `.pf-v5-c-data-list__check` > `.pf-v5-c-check__input`, `.pf-v5-c-data-list__action` > `.pf-v5-c-button` | Provides a reference for interactive elements. **Required** |
+| `aria-label="[descriptive text]"`  | `.pf-v6-c-data-list__action` > `.pf-v6-c-button`  | Provides an accessible label buttons. **Required** |
+| `aria-labelledby="{title_cell_id}"`  | `.pf-v6-c-data-list__check` > `.pf-v6-c-check__input`   | Creates an accessible label for the checkbox based on the title cell. **Required** |
+| `aria-labelledby="{title_cell_id} {data_list_action_id}"`  | `.pf-v6-c-data-list__action` > `.pf-v6-c-button`   | Creates an accessible label for the action button using the title cell and button label **Required** |
+| `id`  | `.pf-v6-c-data-list__cell > *`, `.pf-v6-c-data-list__check` > `.pf-v6-c-check__input`, `.pf-v6-c-data-list__action` > `.pf-v6-c-button` | Provides a reference for interactive elements. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-data-list__item-control` | `<div>` | Initiates a container for data list controls. For example, add `.pf-v5-c-data-list__check` here. **Required** |
-| `.pf-v5-c-data-list__item-action` | `<div>` | Initiates a container for the data list actions. For example, add `.pf-v5-c-data-list__action` here. **Required** |
-| `.pf-v5-c-data-list__check`  | `<div>` | Initiates a data list check cell. **Required** |
-| `.pf-v5-c-data-list__action` | `<div>` | Initiates a data list action button cell. **Required** |
-| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), or hides it at all breakpoints with `.pf-m-hidden`. |
-| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-v6-c-data-list__item-control` | `<div>` | Initiates a container for data list controls. For example, add `.pf-v6-c-data-list__check` here. **Required** |
+| `.pf-v6-c-data-list__item-action` | `<div>` | Initiates a container for the data list actions. For example, add `.pf-v6-c-data-list__action` here. **Required** |
+| `.pf-v6-c-data-list__check`  | `<div>` | Initiates a data list check cell. **Required** |
+| `.pf-v6-c-data-list__action` | `<div>` | Initiates a data list action button cell. **Required** |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), or hides it at all breakpoints with `.pf-m-hidden`. |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 
 ### Expandable
 
@@ -1610,14 +1625,19 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-v6-c-data-list__item-row">
       <div class="pf-v6-c-data-list__item-control">
         <div class="pf-v6-c-data-list__check">
-          <div class="pf-v6-c-check pf-m-standalone">
+          <label
+            class="pf-v6-c-check pf-m-standalone"
+            id="data-list-compact-item-1&quot;"
+            for="data-list-compact-item-1&quot;-input"
+          >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              name="data-list-compact-item-1-checkbox"
-              aria-labelledby="data-list-compact-item-1"
+              id="data-list-compact-item-1&quot;-input"
+              name="data-list-compact-item-1&quot;-input"
+              aria-label="Standalone check"
             />
-          </div>
+          </label>
         </div>
       </div>
       <div class="pf-v6-c-data-list__item-content">
@@ -1708,14 +1728,19 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-v6-c-data-list__item-row">
       <div class="pf-v6-c-data-list__item-control">
         <div class="pf-v6-c-data-list__check">
-          <div class="pf-v6-c-check pf-m-standalone">
+          <label
+            class="pf-v6-c-check pf-m-standalone"
+            id="data-list-compact-item-2&quot;"
+            for="data-list-compact-item-2&quot;-input"
+          >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              name="data-list-compact-item-2-checkbox"
-              aria-labelledby="data-list-compact-item-2"
+              id="data-list-compact-item-2&quot;-input"
+              name="data-list-compact-item-2&quot;-input"
+              aria-label="Standalone check"
             />
-          </div>
+          </label>
         </div>
       </div>
       <div class="pf-v6-c-data-list__item-content">
@@ -1803,14 +1828,19 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-v6-c-data-list__item-row">
       <div class="pf-v6-c-data-list__item-control">
         <div class="pf-v6-c-data-list__check">
-          <div class="pf-v6-c-check pf-m-standalone">
+          <label
+            class="pf-v6-c-check pf-m-standalone"
+            id="data-list-compact-item-3&quot;"
+            for="data-list-compact-item-3&quot;-input"
+          >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              name="data-list-compact-item-3-checkbox"
-              aria-labelledby="data-list-compact-item-3"
+              id="data-list-compact-item-3&quot;-input"
+              name="data-list-compact-item-3&quot;-input"
+              aria-label="Standalone check"
             />
-          </div>
+          </label>
         </div>
       </div>
       <div class="pf-v6-c-data-list__item-content">
@@ -1900,26 +1930,26 @@ When a list item includes more than one block of content, it can be difficult fo
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-expanded="true"` | `.pf-v5-c-data-list__toggle` > `.pf-v5-c-button` | Indicates that the expandable content is visible. **Required**|
-| `hidden` | `.pf-v5-c-data-list__expandable-content` | Indicates that the expandable content is hidden. **Required**|
-| `aria-label="[descriptive text]"` | `.pf-v5-c-data-list__toggle` > `.pf-v5-c-button` | Provides an accessible name for toggle button. **Required**|
-| `aria-labelledby="{title_cell_id} {button_id}"` | `.pf-v5-c-data-list__toggle` > `.pf-v5-c-button` | Establishes relationship between aria-label text and toggle button. **Required**
-| `id="{button_id}"` | `.pf-v5-c-data-list__toggle` > `.pf-v5-c-button` | Provides a reference for toggle button description. **Required** |
-| `aria-controls="[id of element controlled]"` | `.pf-v5-c-data-list__toggle` > `.pf-v5-c-button`    | Identifies the section controlled by the toggle button. **Required** |
+| `aria-expanded="true"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Indicates that the expandable content is visible. **Required**|
+| `hidden` | `.pf-v6-c-data-list__expandable-content` | Indicates that the expandable content is hidden. **Required**|
+| `aria-label="[descriptive text]"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Provides an accessible name for toggle button. **Required**|
+| `aria-labelledby="{title_cell_id} {button_id}"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Establishes relationship between aria-label text and toggle button. **Required**
+| `id="{button_id}"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Provides a reference for toggle button description. **Required** |
+| `aria-controls="[id of element controlled]"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button`    | Identifies the section controlled by the toggle button. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-data-list__item-control` | `<div>` | Initiates a container for data list controls. For example, add `.pf-v5-c-data-list__toggle` here. **Required** |
-| `.pf-v5-c-data-list__toggle` | `<div>` | Initiates a toggle button. |
-| `.pf-v5-c-data-list__toggle-icon` | `<span>` | Initiates a toggle icon. |
-| `.pf-v5-c-data-list__expandable-content` | `<div>` | Initiates an expandable content container. |
-| `.pf-v5-c-data-list__expandable-content-body` | `<div>` | Initiates an expandable content container body. **Required** when `.pf-v5-c-data-list__expandable-content` is used. |
-| `.pf-m-expanded` | `.pf-v5-c-data-list__item` | Modifies for expanded state. |
-| `.pf-m-compact` | `.pf-v5-c-data-list` | Modifies for compact variation. |
-| `.pf-m-no-padding` | `.pf-v5-c-data-list__expandable-content-body` | Removes padding for the expandable content body. |
-| `.pf-m-icon` | `.pf-v5-c-data-list__cell` | Modifies a data list cell to not grow and align-left when its the first data-list\_\_cell element. |
+| `.pf-v6-c-data-list__item-control` | `<div>` | Initiates a container for data list controls. For example, add `.pf-v6-c-data-list__toggle` here. **Required** |
+| `.pf-v6-c-data-list__toggle` | `<div>` | Initiates a toggle button. |
+| `.pf-v6-c-data-list__toggle-icon` | `<span>` | Initiates a toggle icon. |
+| `.pf-v6-c-data-list__expandable-content` | `<div>` | Initiates an expandable content container. |
+| `.pf-v6-c-data-list__expandable-content-body` | `<div>` | Initiates an expandable content container body. **Required** when `.pf-v6-c-data-list__expandable-content` is used. |
+| `.pf-m-expanded` | `.pf-v6-c-data-list__item` | Modifies for expanded state. |
+| `.pf-m-compact` | `.pf-v6-c-data-list` | Modifies for compact variation. |
+| `.pf-m-no-padding` | `.pf-v6-c-data-list__expandable-content-body` | Removes padding for the expandable content body. |
+| `.pf-m-icon` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to not grow and align-left when its the first data-list\_\_cell element. |
 
 ### Modifiers
 
@@ -1938,14 +1968,19 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-v6-c-data-list__item-row">
       <div class="pf-v6-c-data-list__item-control">
         <div class="pf-v6-c-data-list__check">
-          <div class="pf-v6-c-check pf-m-standalone">
+          <label
+            class="pf-v6-c-check pf-m-standalone"
+            id="data-list-default-fitting-item-1&quot;"
+            for="data-list-default-fitting-item-1&quot;-input"
+          >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              name="data-list-default-fitting-item-1-checkbox"
-              aria-labelledby="data-list-default-fitting-item-1"
+              id="data-list-default-fitting-item-1&quot;-input"
+              name="data-list-default-fitting-item-1&quot;-input"
+              aria-label="Standalone check"
             />
-          </div>
+          </label>
         </div>
       </div>
       <div class="pf-v6-c-data-list__item-content">
@@ -1979,14 +2014,19 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-v6-c-data-list__item-row">
       <div class="pf-v6-c-data-list__item-control">
         <div class="pf-v6-c-data-list__check">
-          <div class="pf-v6-c-check pf-m-standalone">
+          <label
+            class="pf-v6-c-check pf-m-standalone"
+            id="data-list-flex-modifiers-item-1&quot;"
+            for="data-list-flex-modifiers-item-1&quot;-input"
+          >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              name="data-list-flex-modifiers-item-1-checkbox"
-              aria-labelledby="data-list-flex-modifiers-item-1"
+              id="data-list-flex-modifiers-item-1&quot;-input"
+              name="data-list-flex-modifiers-item-1&quot;-input"
+              aria-label="Standalone check"
             />
-          </div>
+          </label>
         </div>
       </div>
       <div class="pf-v6-c-data-list__item-content">
@@ -2097,14 +2137,19 @@ When a list item includes more than one block of content, it can be difficult fo
         </div>
 
         <div class="pf-v6-c-data-list__check">
-          <div class="pf-v6-c-check pf-m-standalone">
+          <label
+            class="pf-v6-c-check pf-m-standalone"
+            id="data-list-flex-modifiers-2-item-1&quot;"
+            for="data-list-flex-modifiers-2-item-1&quot;-input"
+          >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              name="data-list-flex-modifiers-2-item-1-checkbox"
-              aria-labelledby="data-list-flex-modifiers-2-item-1"
+              id="data-list-flex-modifiers-2-item-1&quot;-input"
+              name="data-list-flex-modifiers-2-item-1&quot;-input"
+              aria-label="Standalone check"
             />
-          </div>
+          </label>
         </div>
       </div>
       <div class="pf-v6-c-data-list__item-content">
@@ -2213,13 +2258,13 @@ When a list item includes more than one block of content, it can be difficult fo
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-controls="[id of element controlled]"` | `.pf-v5-c-data-list__toggle` > `.pf-v5-c-button`    | Identifies the section controlled by the toggle button. **Required** |
+| `aria-controls="[id of element controlled]"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button`    | Identifies the section controlled by the toggle button. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-flex-{1, 2, 3, 4, 5}` | `.pf-v5-c-data-list__cell` | Percentage based modifier for `.pf-v5-c-data-list__cell` widths. |
+| `.pf-m-flex-{1, 2, 3, 4, 5}` | `.pf-v6-c-data-list__cell` | Percentage based modifier for `.pf-v6-c-data-list__cell` widths. |
 
 ### Clickable rows
 
@@ -2279,14 +2324,14 @@ When a list item includes more than one block of content, it can be difficult fo
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `tabindex="0"` | `.pf-v5-c-data-list__item.pf-m-clickable` | Inserts the clickable row into the tab order of the page so that it is focusable. **Required** |
+| `tabindex="0"` | `.pf-v6-c-data-list__item.pf-m-clickable` | Inserts the clickable row into the tab order of the page so that it is focusable. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-clickable` | `.pf-v5-c-data-list__item` | Modifies a data list item so that it is clickable. |
-| `.pf-m-selected` | `.pf-v5-c-data-list__item` | Modifies a data list item for the selected state. |
+| `.pf-m-clickable` | `.pf-v6-c-data-list__item` | Modifies a data list item so that it is clickable. |
+| `.pf-m-selected` | `.pf-v6-c-data-list__item` | Modifies a data list item for the selected state. |
 
 ### Clickable expandable rows
 
@@ -2503,14 +2548,19 @@ When a list item includes more than one block of content, it can be difficult fo
           </span>
         </button>
         <div class="pf-v6-c-data-list__check">
-          <div class="pf-v6-c-check pf-m-standalone">
+          <label
+            class="pf-v6-c-check pf-m-standalone"
+            id="data-list-draggable-item-1&quot;"
+            for="data-list-draggable-item-1&quot;-input"
+          >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              name="data-list-draggable-item-1-checkbox"
-              aria-labelledby="data-list-draggable-item-1"
+              id="data-list-draggable-item-1&quot;-input"
+              name="data-list-draggable-item-1&quot;-input"
+              aria-label="Standalone check"
             />
-          </div>
+          </label>
         </div>
       </div>
       <div class="pf-v6-c-data-list__item-content">
@@ -2544,14 +2594,19 @@ When a list item includes more than one block of content, it can be difficult fo
           </span>
         </button>
         <div class="pf-v6-c-data-list__check">
-          <div class="pf-v6-c-check pf-m-standalone">
+          <label
+            class="pf-v6-c-check pf-m-standalone"
+            id="data-list-draggable-item-2&quot;"
+            for="data-list-draggable-item-2&quot;-input"
+          >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              name="data-list-draggable-item-2-checkbox"
-              aria-labelledby="data-list-draggable-item-2"
+              id="data-list-draggable-item-2&quot;-input"
+              name="data-list-draggable-item-2&quot;-input"
+              aria-label="Standalone check"
             />
-          </div>
+          </label>
         </div>
       </div>
       <div class="pf-v6-c-data-list__item-content">
@@ -2586,14 +2641,19 @@ When a list item includes more than one block of content, it can be difficult fo
           </span>
         </button>
         <div class="pf-v6-c-data-list__check">
-          <div class="pf-v6-c-check pf-m-standalone">
+          <label
+            class="pf-v6-c-check pf-m-standalone"
+            id="data-list-draggable-item-3&quot;"
+            for="data-list-draggable-item-3&quot;-input"
+          >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              name="data-list-draggable-item-3-checkbox"
-              aria-labelledby="data-list-draggable-item-3"
+              id="data-list-draggable-item-3&quot;-input"
+              name="data-list-draggable-item-3&quot;-input"
+              aria-label="Standalone check"
             />
-          </div>
+          </label>
         </div>
       </div>
       <div class="pf-v6-c-data-list__item-content">
@@ -2627,14 +2687,19 @@ When a list item includes more than one block of content, it can be difficult fo
           </span>
         </button>
         <div class="pf-v6-c-data-list__check">
-          <div class="pf-v6-c-check pf-m-standalone">
+          <label
+            class="pf-v6-c-check pf-m-standalone"
+            id="data-list-draggable-item-4&quot;"
+            for="data-list-draggable-item-4&quot;-input"
+          >
             <input
               class="pf-v6-c-check__input"
               type="checkbox"
-              name="data-list-draggable-item-4-checkbox"
-              aria-labelledby="data-list-draggable-item-4"
+              id="data-list-draggable-item-4&quot;-input"
+              name="data-list-draggable-item-4&quot;-input"
+              aria-label="Standalone check"
             />
-          </div>
+          </label>
         </div>
       </div>
       <div class="pf-v6-c-data-list__item-content">
@@ -2659,22 +2724,22 @@ When a list item includes more than one block of content, it can be difficult fo
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-pressed="true or false"` | `.pf-v5-c-data-list__item-draggable-button` | Indicates that the button is a toggle. When set to "true", `pf-m-active` should also be set so that the button displays in an active state. |
+| `aria-pressed="true or false"` | `.pf-v6-c-data-list__item-draggable-button` | Indicates that the button is a toggle. When set to "true", `pf-m-active` should also be set so that the button displays in an active state. |
 | `aria-live` | `[element with live text]` | Gives screen reader users live feedback about what's happening during interaction with the data list, both during drag and drop interactions and keyboard interactions. **Highly Recommended** |
-| `aria-describedby="[id value of applicable content]"` | `.pf-v5-c-data-list__item-draggable-button` | Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. The example here uses a `<div id="draggable-help"></div>`. **Highly recommended** |
-| `aria-labelledby="[id value of .pf-v5-c-data-list__item-draggable-button] [id value of .pf-v5-c-data-list__cell-text]"` | `.pf-v5-c-data-list__item-draggable-button` | Provides an accessible name for the draggable button. |
-| `id="[]"` | `.pf-v5-c-data-list__item-draggable-button`, `.pf-v5-c-data-list__cell-text` | Gives the button and the text element accessible IDs |
+| `aria-describedby="[id value of applicable content]"` | `.pf-v6-c-data-list__item-draggable-button` | Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. The example here uses a `<div id="draggable-help"></div>`. **Highly recommended** |
+| `aria-labelledby="[id value of .pf-v6-c-data-list__item-draggable-button] [id value of .pf-v6-c-data-list__cell-text]"` | `.pf-v6-c-data-list__item-draggable-button` | Provides an accessible name for the draggable button. |
+| `id="[]"` | `.pf-v6-c-data-list__item-draggable-button`, `.pf-v6-c-data-list__cell-text` | Gives the button and the text element accessible IDs |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-data-list__item-draggable-button` | `<button>` | Initiates the draggable button. Use for drag and drop. |
-| `.pf-v5-c-data-list__item-draggable-icon` | `<span>` | Initiates the draggable button icon. |
-| `.pf-m-draggable` | `.pf-v5-c-data-list__item` | Modifies a data list item so that it is draggable. |
-| `.pf-m-ghost-row` | `.pf-v5-c-data-list__item.pf-m-draggable` | Modifies a draggable data list item to be the ghost row. |
-| `.pf-m-disabled` | `.pf-v5-c-data-list__item.pf-m-draggable` | Modifies a data list draggable item for the disabled state. |
-| `.pf-m-drag-over` | `.pf-v5-c-data-list` | Modifies the data list to indicate that a draggable item is being dragged over the data list. |
+| `.pf-v6-c-data-list__item-draggable-button` | `<button>` | Initiates the draggable button. Use for drag and drop. |
+| `.pf-v6-c-data-list__item-draggable-icon` | `<span>` | Initiates the draggable button icon. |
+| `.pf-m-draggable` | `.pf-v6-c-data-list__item` | Modifies a data list item so that it is draggable. |
+| `.pf-m-ghost-row` | `.pf-v6-c-data-list__item.pf-m-draggable` | Modifies a draggable data list item to be the ghost row. |
+| `.pf-m-disabled` | `.pf-v6-c-data-list__item.pf-m-draggable` | Modifies a data list draggable item for the disabled state. |
+| `.pf-m-drag-over` | `.pf-v6-c-data-list` | Modifies the data list to indicate that a draggable item is being dragged over the data list. |
 
 ### Text modifiers
 
@@ -2798,16 +2863,16 @@ When a list item includes more than one block of content, it can be difficult fo
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-data-list__text` | `*` | Inserts the data list text element. Use this class to modify specific text directly. |
-| `.pf-m-truncate` | `.pf-v5-c-data-list`, `.pf-v5-c-data-list__item-row`, `.pf-v5-c-data-list__cell`, `.pf-v5-c-data-list__text` | Modifies the data list element so that text is truncated. |
-| `.pf-m-break-word` | `.pf-v5-c-data-list`, `.pf-v5-c-data-list__item-row`, `.pf-v5-c-data-list__cell`, `.pf-v5-c-data-list__text` | Modifies the data list element so that text breaks to the next line. |
-| `.pf-m-nowrap` | `.pf-v5-c-data-list`, `.pf-v5-c-data-list__item-row`, `.pf-v5-c-data-list__cell`, `.pf-v5-c-data-list__text` | Modifies the data list element so that text does not wrap to the next line. |
+| `.pf-v6-c-data-list__text` | `*` | Inserts the data list text element. Use this class to modify specific text directly. |
+| `.pf-m-truncate` | `.pf-v6-c-data-list`, `.pf-v6-c-data-list__item-row`, `.pf-v6-c-data-list__cell`, `.pf-v6-c-data-list__text` | Modifies the data list element so that text is truncated. |
+| `.pf-m-break-word` | `.pf-v6-c-data-list`, `.pf-v6-c-data-list__item-row`, `.pf-v6-c-data-list__cell`, `.pf-v6-c-data-list__text` | Modifies the data list element so that text breaks to the next line. |
+| `.pf-m-nowrap` | `.pf-v6-c-data-list`, `.pf-v6-c-data-list__item-row`, `.pf-v6-c-data-list__cell`, `.pf-v6-c-data-list__text` | Modifies the data list element so that text does not wrap to the next line. |
 
 ## Documentation
 
 ### Overview
 
-The DataList component provides a flexible alternative to the Table component, wherein individual data points may or may not exist within each row. DataList relies upon PatternFly layouts to achieve desired presentation within `pf-v5-c-data-list__cell`s. DataLists do not have headers. If headers are required, use the [table component](/components/table).
+The DataList component provides a flexible alternative to the Table component, wherein individual data points may or may not exist within each row. DataList relies upon PatternFly layouts to achieve desired presentation within `pf-v6-c-data-list__cell`s. DataLists do not have headers. If headers are required, use the [table component](/components/table).
 
 ### Grid
 
@@ -2948,4 +3013,4 @@ The DataList component provides a flexible alternative to the Table component, w
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-v5-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
+| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-v6-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |

package/docs/components/DatePicker/examples/DatePicker.md

@@ -2,7 +2,7 @@
 id: 'Date picker'
 section: components
 subsection: date-and-time
-cssPrefix: pf-v5-c-date-picker
+cssPrefix: pf-v6-c-date-picker
 ---import './DatePicker.css'
 
 ## Examples
@@ -164,7 +164,7 @@ cssPrefix: pf-v5-c-date-picker
 ```html
 <div
   class="pf-v6-c-date-picker"
-  style="--pf-v5-c-date-picker__input--c-form-control--Width: 220px;"
+  style="--pf-v6-c-date-picker__input--c-form-control--Width: 220px;"
 >
   <div class="pf-v6-c-date-picker__input">
     <div class="pf-v6-c-input-group">
@@ -199,7 +199,7 @@ cssPrefix: pf-v5-c-date-picker
 ```html
 <div
   class="pf-v6-c-date-picker"
-  style="--pf-v5-c-date-picker__input--c-form-control--width-chars: 18;"
+  style="--pf-v6-c-date-picker__input--c-form-control--width-chars: 18;"
 >
   <div class="pf-v6-c-date-picker__input">
     <div class="pf-v6-c-input-group">
@@ -235,10 +235,10 @@ cssPrefix: pf-v5-c-date-picker
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-date-picker` | `<div>` | Initiates the date picker component. **Required** |
-| `.pf-v5-c-date-picker__input` | `<div>` | Initiates the date picker input container. **Required** |
-| `.pf-v5-c-date-picker__helper-text` | `<div>` | Initiates the date picker helper text. |
-| `.pf-v5-c-date-picker__calendar` | `<div>` | Initiates an optional date picker calendar container. **Note:** Required in the react date picker component. |
-| `.pf-m-top` | `.pf-v5-c-date-picker` | Modifies to display the calendar above the date picker. |
-| `.pf-m-align-right` | `.pf-v5-c-date-picker__calendar` | Modifies the calendar to align the calendar to the right edge of the date picker. |
-| `.pf-m-static` | `.pf-v5-c-date-picker__calendar` | Modifies the calendar to be statically positioned to support custom positioning. |
+| `.pf-v6-c-date-picker` | `<div>` | Initiates the date picker component. **Required** |
+| `.pf-v6-c-date-picker__input` | `<div>` | Initiates the date picker input container. **Required** |
+| `.pf-v6-c-date-picker__helper-text` | `<div>` | Initiates the date picker helper text. |
+| `.pf-v6-c-date-picker__calendar` | `<div>` | Initiates an optional date picker calendar container. **Note:** Required in the react date picker component. |
+| `.pf-m-top` | `.pf-v6-c-date-picker` | Modifies to display the calendar above the date picker. |
+| `.pf-m-align-right` | `.pf-v6-c-date-picker__calendar` | Modifies the calendar to align the calendar to the right edge of the date picker. |
+| `.pf-m-static` | `.pf-v6-c-date-picker__calendar` | Modifies the calendar to be statically positioned to support custom positioning. |