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

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

@@ -2,7 +2,7 @@
 id: Select
 section: components
 subsection: menus
-cssPrefix: pf-v5-c-select
+cssPrefix: pf-v6-c-select
 deprecated: true
 ---import './Select.css'
 
@@ -239,17 +239,17 @@ The single select should be used when the user is selecting an option from a lis
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-select` | `<div>` |  Initiates a custom select. |
-| `.pf-v5-c-select__toggle` | `<button>` |  Initiates a custom toggle. |
-| `.pf-v5-c-select__toggle-wrapper` | `<div>` |  Initiates a custom select toggle wrapper. |
-| `.pf-v5-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
-| `.pf-v5-c-select__menu` | `<ul>` |  Initiates the custom select dropdown menu. |
-| `.pf-v5-c-select__menu-item` | `<li>` |  Initiates the items in the custom select dropdown menu. |
-| `.pf-v5-c-select__menu-item-icon` | `<i>` |  Initiates the selected item icon. |
-| `.pf-m-top` | `.pf-v5-c-select` |  Modifies the select menu to display above the toggle. |
-| `.pf-m-align-right` | `.pf-v5-c-select__menu` |  Modifies the select menu to display right aligned to the toggle. |
-| `.pf-m-static` | `.pf-v5-c-select__menu` |  Modifies the select menu to be statically positioned to support custom positioning. |
-| `.pf-m-active` | `.pf-v5-c-select` | Forces display of the active state of the toggle. |
+| `.pf-v6-c-select` | `<div>` |  Initiates a custom select. |
+| `.pf-v6-c-select__toggle` | `<button>` |  Initiates a custom toggle. |
+| `.pf-v6-c-select__toggle-wrapper` | `<div>` |  Initiates a custom select toggle wrapper. |
+| `.pf-v6-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
+| `.pf-v6-c-select__menu` | `<ul>` |  Initiates the custom select dropdown menu. |
+| `.pf-v6-c-select__menu-item` | `<li>` |  Initiates the items in the custom select dropdown menu. |
+| `.pf-v6-c-select__menu-item-icon` | `<i>` |  Initiates the selected item icon. |
+| `.pf-m-top` | `.pf-v6-c-select` |  Modifies the select menu to display above the toggle. |
+| `.pf-m-align-right` | `.pf-v6-c-select__menu` |  Modifies the select menu to display right aligned to the toggle. |
+| `.pf-m-static` | `.pf-v6-c-select__menu` |  Modifies the select menu to be statically positioned to support custom positioning. |
+| `.pf-m-active` | `.pf-v6-c-select` | Forces display of the active state of the toggle. |
 
 ## States
 
@@ -496,27 +496,27 @@ The single select should be used when the user is selecting an option from a lis
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-invalid="true"` | `.pf-v5-c-select__toggle` | Indicates that the select is in the invalid state. |
-| `aria-selected="true"` | `.pf-v5-c-select__menu-item` | Should be set programmatically to indicate the active item. |
-| `disabled` | `.pf-v5-c-select__toggle` | Disables the dropdown toggle and removes it from keyboard focus. |
+| `aria-invalid="true"` | `.pf-v6-c-select__toggle` | Indicates that the select is in the invalid state. |
+| `aria-selected="true"` | `.pf-v6-c-select__menu-item` | Should be set programmatically to indicate the active item. |
+| `disabled` | `.pf-v6-c-select__toggle` | Disables the dropdown toggle and removes it from keyboard focus. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-select` | `<div>` |  Initiates the select component. |
-| `.pf-v5-c-select__toggle` | `<button>` |  Initiates the select toggle. |
-| `.pf-v5-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
-| `.pf-v5-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
-| `.pf-v5-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
-| `.pf-v5-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
-| `.pf-v5-c-select__menu-item-icon` | `<span>` |  Initiates the selected item icon wrapper. |
-| `.pf-m-expanded` | `.pf-v5-c-select` |  Indicates the select is expanded. |
-| `.pf-m-success` | `.pf-v5-c-select` | Modifies select component for the success state. |
-| `.pf-m-warning` | `.pf-v5-c-select` | Modifies select component for the warning state. |
-| `.pf-m-invalid` | `.pf-v5-c-select` | Modifies select component for the invalid state. |
-| `.pf-m-selected` | `.pf-v5-c-select__menu-item` |  Indicates the menu item is selected. |
-| `.pf-m-disabled` | `div.pf-v5-c-select__toggle` | Modifies to display the select toggle as disabled. This applies to `div.pf-v5-c-select__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-v5-c-select__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-v5-c-select__toggle`|
+| `.pf-v6-c-select` | `<div>` |  Initiates the select component. |
+| `.pf-v6-c-select__toggle` | `<button>` |  Initiates the select toggle. |
+| `.pf-v6-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
+| `.pf-v6-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
+| `.pf-v6-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
+| `.pf-v6-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
+| `.pf-v6-c-select__menu-item-icon` | `<span>` |  Initiates the selected item icon wrapper. |
+| `.pf-m-expanded` | `.pf-v6-c-select` |  Indicates the select is expanded. |
+| `.pf-m-success` | `.pf-v6-c-select` | Modifies select component for the success state. |
+| `.pf-m-warning` | `.pf-v6-c-select` | Modifies select component for the warning state. |
+| `.pf-m-invalid` | `.pf-v6-c-select` | Modifies select component for the invalid state. |
+| `.pf-m-selected` | `.pf-v6-c-select__menu-item` |  Indicates the menu item is selected. |
+| `.pf-m-disabled` | `div.pf-v6-c-select__toggle` | Modifies to display the select toggle as disabled. This applies to `div.pf-v6-c-select__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-v6-c-select__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-v6-c-select__toggle`|
 
 ## Typeahead
 
@@ -934,24 +934,24 @@ The single select typeahead should be used when the user is selecting one option
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-selected="true"` | `.pf-v5-c-select__menu-item` | Should be set programmatically to indicate the active item. |
+| `aria-selected="true"` | `.pf-v6-c-select__menu-item` | Should be set programmatically to indicate the active item. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-select` | `<div>` |  Initiates the select component. |
-| `.pf-v5-c-select__toggle` | `<div>` |  Initiates the select toggle. |
-| `.pf-v5-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
-| `.pf-v5-c-select__toggle-typeahead` | `input.pf-v5-c-form-control` |  Initiates the input field for typeahead. |
-| `.pf-v5-c-select__toggle-clear` | `button.pf-v5-c-button.pf-m-plain` |  Initiates a clear button in the toggle. |
-| `.pf-v5-c-select__toggle-button` | `button.pf-v5-c-button.pf-m-plain` | Initiates a toggle button. |
-| `.pf-v5-c-select__toggle-arrow` | `<span>` |  Initiates the caret icon. |
-| `.pf-v5-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
-| `.pf-v5-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
-| `.pf-m-expanded` | `.pf-v5-c-select` |  Indicates the select is expanded. |
-| `.pf-m-typeahead` | `.pf-v5-c-select__toggle` |  Indicates the select has a typeahead. |
-| `.pf-m-focus` | `.pf-v5-c-select__menu-item` |  Modifies the menu item to apply `:focus` styling. For use when navigating the menu items by keyboard when the typeahead input field has browser focus. |
+| `.pf-v6-c-select` | `<div>` |  Initiates the select component. |
+| `.pf-v6-c-select__toggle` | `<div>` |  Initiates the select toggle. |
+| `.pf-v6-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
+| `.pf-v6-c-select__toggle-typeahead` | `input.pf-v6-c-form-control` |  Initiates the input field for typeahead. |
+| `.pf-v6-c-select__toggle-clear` | `button.pf-v6-c-button.pf-m-plain` |  Initiates a clear button in the toggle. |
+| `.pf-v6-c-select__toggle-button` | `button.pf-v6-c-button.pf-m-plain` | Initiates a toggle button. |
+| `.pf-v6-c-select__toggle-arrow` | `<span>` |  Initiates the caret icon. |
+| `.pf-v6-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
+| `.pf-v6-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
+| `.pf-m-expanded` | `.pf-v6-c-select` |  Indicates the select is expanded. |
+| `.pf-m-typeahead` | `.pf-v6-c-select__toggle` |  Indicates the select has a typeahead. |
+| `.pf-m-focus` | `.pf-v6-c-select__menu-item` |  Modifies the menu item to apply `:focus` styling. For use when navigating the menu items by keyboard when the typeahead input field has browser focus. |
 
 ## Typeahead multiselect
 
@@ -1548,24 +1548,24 @@ The multiselect should be used when the user is selecting multiple items from a
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-selected="true"` | `.pf-v5-c-select__menu-item` | Should be set programmatically to indicate the active item. |
+| `aria-selected="true"` | `.pf-v6-c-select__menu-item` | Should be set programmatically to indicate the active item. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-select` | `<div>` |  Initiates the select component. |
-| `.pf-v5-c-select__toggle` | `<div>` |  Initiates the select toggle. |
-| `.pf-v5-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper so that chips and input field can wrap together. |
-| `.pf-v5-c-chip` | `<div>` |  Initiates a chip. (See [chip component](/components/chip) for more details) |
-| `.pf-v5-c-select__toggle-typeahead` | `input.pf-v5-c-form-control` |  Initiates the input field for typeahead. |
-| `.pf-v5-c-select__toggle-clear` | `button.pf-m-plain` |  Initiates a clear button in the toggle. |
-| `.pf-v5-c-select__toggle-button` | `<button>` | Initiates a toggle button. |
-| `.pf-v5-c-select__toggle-arrow` | `<span>` |  Initiates the caret icon. |
-| `.pf-v5-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
-| `.pf-v5-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
-| `.pf-m-expanded` | `.pf-v5-c-select` |  Indicates the select is expanded. |
-| `.pf-m-typeahead` | `.pf-v5-c-select__toggle` |  Indicates the select has a typeahead. |
+| `.pf-v6-c-select` | `<div>` |  Initiates the select component. |
+| `.pf-v6-c-select__toggle` | `<div>` |  Initiates the select toggle. |
+| `.pf-v6-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper so that chips and input field can wrap together. |
+| `.pf-v6-c-chip` | `<div>` |  Initiates a chip. (See [chip component](/components/chip) for more details) |
+| `.pf-v6-c-select__toggle-typeahead` | `input.pf-v6-c-form-control` |  Initiates the input field for typeahead. |
+| `.pf-v6-c-select__toggle-clear` | `button.pf-m-plain` |  Initiates a clear button in the toggle. |
+| `.pf-v6-c-select__toggle-button` | `<button>` | Initiates a toggle button. |
+| `.pf-v6-c-select__toggle-arrow` | `<span>` |  Initiates the caret icon. |
+| `.pf-v6-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
+| `.pf-v6-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
+| `.pf-m-expanded` | `.pf-v6-c-select` |  Indicates the select is expanded. |
+| `.pf-m-typeahead` | `.pf-v6-c-select__toggle` |  Indicates the select has a typeahead. |
 
 ## Checkbox
 
@@ -2336,25 +2336,25 @@ The checkbox select can select multiple items using checkboxes. The number of it
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-select` | `<div>` | Initiates the select component. |
-| `.pf-v5-c-select__toggle` | `<button>` | Initiates the select toggle. |
-| `.pf-v5-c-select__toggle-wrapper` | `<div>` | Initiates the select toggle wrapper so that chips and input field can wrap together. |
-| `.pf-v5-c-chip` | `<div>` | Initiates a chip. (See [chip component](/components/chip) for more details) |
-| `.pf-v5-c-select__toggle-typeahead` | `input.pf-v5-c-form-control` |  Initiates the input field for typeahead. |
-| `.pf-v5-c-select__toggle-badge` | `<div>` | Initiates a container for a badge to indicate the number of items checked. \* note: This should contain an unread badge \* |
-| `.pf-v5-c-select__toggle-clear` | `button.pf-m-plain` | Initiates a clear button in the toggle. |
-| `.pf-v5-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
-| `.pf-v5-c-select__menu` | `<div>` | Initiates the select dropdown menu. |
-| `.pf-v5-c-select__menu-item` | `div.pf-v5-c-check` | Initiates the items in the select dropdown menu. |
-| `.pf-v5-c-select__menu-item-row` | `<span>` | Initiates a menu item row for use with positioning other elements before/after the item text. |
-| `.pf-v5-c-select__menu-item-text` | `<span>` | Initiates the menu item row text. |
-| `.pf-v5-c-select__menu-item-count` | `<span>` | Initiates the menu item row count. |
-| `.pf-v5-c-select__menu-fieldset` | `<fieldset>` | Initiates a fieldset for the items in a checkbox select. |
-| `.pf-v5-c-select__menu-group` | `<div>` | Initiates a group within a select menu. |
-| `.pf-v5-c-select__menu-group-title` | `<div>` | Initiates a title for a group with a select menu. |
-| `.pf-v5-c-select__menu-search` | `<div>` | Initiates a container for the search input group. |
-| `.pf-m-expanded` | `.pf-v5-c-select` | Indicates the select is expanded. |
-| `.pf-m-typeahead` | `.pf-v5-c-select__toggle` | Indicates the select has a typeahead. |
+| `.pf-v6-c-select` | `<div>` | Initiates the select component. |
+| `.pf-v6-c-select__toggle` | `<button>` | Initiates the select toggle. |
+| `.pf-v6-c-select__toggle-wrapper` | `<div>` | Initiates the select toggle wrapper so that chips and input field can wrap together. |
+| `.pf-v6-c-chip` | `<div>` | Initiates a chip. (See [chip component](/components/chip) for more details) |
+| `.pf-v6-c-select__toggle-typeahead` | `input.pf-v6-c-form-control` |  Initiates the input field for typeahead. |
+| `.pf-v6-c-select__toggle-badge` | `<div>` | Initiates a container for a badge to indicate the number of items checked. \* note: This should contain an unread badge \* |
+| `.pf-v6-c-select__toggle-clear` | `button.pf-m-plain` | Initiates a clear button in the toggle. |
+| `.pf-v6-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
+| `.pf-v6-c-select__menu` | `<div>` | Initiates the select dropdown menu. |
+| `.pf-v6-c-select__menu-item` | `div.pf-v6-c-check` | Initiates the items in the select dropdown menu. |
+| `.pf-v6-c-select__menu-item-row` | `<span>` | Initiates a menu item row for use with positioning other elements before/after the item text. |
+| `.pf-v6-c-select__menu-item-text` | `<span>` | Initiates the menu item row text. |
+| `.pf-v6-c-select__menu-item-count` | `<span>` | Initiates the menu item row count. |
+| `.pf-v6-c-select__menu-fieldset` | `<fieldset>` | Initiates a fieldset for the items in a checkbox select. |
+| `.pf-v6-c-select__menu-group` | `<div>` | Initiates a group within a select menu. |
+| `.pf-v6-c-select__menu-group-title` | `<div>` | Initiates a title for a group with a select menu. |
+| `.pf-v6-c-select__menu-search` | `<div>` | Initiates a container for the search input group. |
+| `.pf-m-expanded` | `.pf-v6-c-select` | Indicates the select is expanded. |
+| `.pf-m-typeahead` | `.pf-v6-c-select__toggle` | Indicates the select has a typeahead. |
 
 ## Plain
 
@@ -2477,16 +2477,16 @@ The plain select variation should be used when you do not want a border applied
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-select` | `<div>` |  Initiates the select component. |
-| `.pf-v5-c-select__toggle` | `<button>` |  Initiates the select toggle. |
-| `.pf-v5-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
-| `.pf-v5-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
-| `.pf-v5-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
-| `.pf-v5-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
-| `.pf-v5-c-select__menu-item-icon` | `<i>` |  Initiates the selected item icon. |
-| `.pf-m-expanded` | `.pf-v5-c-select` |  Indicates the select is expanded. |
-| `.pf-m-plain` | `.pf-v5-c-select__toggle` |  Modifies to display the toggle with no border. |
-| `.pf-m-selected` | `.pf-v5-c-select__menu-item` |  Indicates the menu item is selected. |
+| `.pf-v6-c-select` | `<div>` |  Initiates the select component. |
+| `.pf-v6-c-select__toggle` | `<button>` |  Initiates the select toggle. |
+| `.pf-v6-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
+| `.pf-v6-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
+| `.pf-v6-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
+| `.pf-v6-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
+| `.pf-v6-c-select__menu-item-icon` | `<i>` |  Initiates the selected item icon. |
+| `.pf-m-expanded` | `.pf-v6-c-select` |  Indicates the select is expanded. |
+| `.pf-m-plain` | `.pf-v6-c-select__toggle` |  Modifies to display the toggle with no border. |
+| `.pf-m-selected` | `.pf-v6-c-select__menu-item` |  Indicates the menu item is selected. |
 
 ## Icon
 
@@ -2554,17 +2554,17 @@ The plain select variation should be used when you do not want a border applied
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-hidden="true"` | `.pf-v5-c-select__toggle-icon` | Hides the icon from assistive technologies.
+| `aria-hidden="true"` | `.pf-v6-c-select__toggle-icon` | Hides the icon from assistive technologies.
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-select` | `<div>` |  Initiates the select component. |
-| `.pf-v5-c-select__toggle` | `<button>` |  Initiates the select toggle. |
-| `.pf-v5-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
-| `.pf-v5-c-select__toggle-icon` | `<span>` |  Initiates the icon in the dropdown toggle. |
-| `.pf-v5-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
+| `.pf-v6-c-select` | `<div>` |  Initiates the select component. |
+| `.pf-v6-c-select__toggle` | `<button>` |  Initiates the select toggle. |
+| `.pf-v6-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
+| `.pf-v6-c-select__toggle-icon` | `<span>` |  Initiates the icon in the dropdown toggle. |
+| `.pf-v6-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
 
 ## Panel
 
@@ -2602,11 +2602,11 @@ The plain select variation should be used when you do not want a border applied
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-select` | `<div>` |  Initiates the select component. |
-| `.pf-v5-c-select__toggle` | `<button>` |  Initiates the select toggle. |
-| `.pf-v5-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
-| `.pf-v5-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
-| `.pf-v5-c-select__menu` | `<div>` |  Initiates the select dropdown menu. |
+| `.pf-v6-c-select` | `<div>` |  Initiates the select component. |
+| `.pf-v6-c-select__toggle` | `<button>` |  Initiates the select toggle. |
+| `.pf-v6-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
+| `.pf-v6-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
+| `.pf-v6-c-select__menu` | `<div>` |  Initiates the select dropdown menu. |
 
 ## Description
 
@@ -2805,9 +2805,9 @@ The plain select variation should be used when you do not want a border applied
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-select__menu-item-description` | `<span>` |  Initiates the select menu item description element. |
-| `.pf-v5-c-select__menu-item-main` | `<span>` | Initiates the select menu item main element. Used when the description element is present. |
-| `.pf-m-description` | `.pf-v5-c-select__menu-item` | Modifies the select menu item when selected to accommodate the description element. |
+| `.pf-v6-c-select__menu-item-description` | `<span>` |  Initiates the select menu item description element. |
+| `.pf-v6-c-select__menu-item-main` | `<span>` | Initiates the select menu item main element. Used when the description element is present. |
+| `.pf-m-description` | `.pf-v6-c-select__menu-item` | Modifies the select menu item when selected to accommodate the description element. |
 
 ## Favorites
 
@@ -3034,18 +3034,18 @@ The plain select variation should be used when you do not want a border applied
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-label="Not starred"` | `.pf-v5-c-select__menu-wrapper > .pf-v5-c-select__menu-item.pf-m-action` | Provides an accessible label indicating that the favorite action is not selected. |
-| `aria-label="Starred"` | `.pf-v5-c-select__menu-wrapper.pf-m-favorite > .pf-v5-c-select__menu-item.pf-m-action` | Provides an accessible label indicating that the favorite action is selected. |
+| `aria-label="Not starred"` | `.pf-v6-c-select__menu-wrapper > .pf-v6-c-select__menu-item.pf-m-action` | Provides an accessible label indicating that the favorite action is not selected. |
+| `aria-label="Starred"` | `.pf-v6-c-select__menu-wrapper.pf-m-favorite > .pf-v6-c-select__menu-item.pf-m-action` | Provides an accessible label indicating that the favorite action is selected. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-select__menu-wrapper` | `<li>` | Defines a menu wrapper for use with multiple actionable items in a single item row. |
-| `.pf-m-favorite` | `.pf-v5-c-select__menu-wrapper` | Modifies wrapper to indicate that the item row has been favorited. |
-| `.pf-m-favorite-action` | `.pf-v5-c-select__menu-item` | Modifies an item for favorite styles. |
-| `.pf-m-link` | `.pf-v5-c-select__menu-item.pf-m-wrapper > .pf-v5-c-select__menu-item` | Modifies item for link styles. |
-| `.pf-m-action` | `.pf-v5-c-select__menu-item.pf-m-wrapper > .pf-v5-c-select__menu-item` | Modifies item to for action styles. |
+| `.pf-v6-c-select__menu-wrapper` | `<li>` | Defines a menu wrapper for use with multiple actionable items in a single item row. |
+| `.pf-m-favorite` | `.pf-v6-c-select__menu-wrapper` | Modifies wrapper to indicate that the item row has been favorited. |
+| `.pf-m-favorite-action` | `.pf-v6-c-select__menu-item` | Modifies an item for favorite styles. |
+| `.pf-m-link` | `.pf-v6-c-select__menu-item.pf-m-wrapper > .pf-v6-c-select__menu-item` | Modifies item for link styles. |
+| `.pf-m-action` | `.pf-v6-c-select__menu-item.pf-m-wrapper > .pf-v6-c-select__menu-item` | Modifies item to for action styles. |
 
 ## View more
 
@@ -3115,7 +3115,7 @@ The plain select variation should be used when you do not want a border applied
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-load` | `.pf-v5-c-select__menu-item` | Modifies a menu item for load styles. |
+| `.pf-m-load` | `.pf-v6-c-select__menu-item` | Modifies a menu item for load styles. |
 
 ## Loading
 
@@ -3197,8 +3197,8 @@ The plain select variation should be used when you do not want a border applied
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-select__list-item` | `<li>` | Defines a list item element in the select menu. |
-| `.pf-m-loading` | `.pf-v5-c-select__list-item` | Modifies a list item for loading styles. |
+| `.pf-v6-c-select__list-item` | `<li>` | Defines a list item element in the select menu. |
+| `.pf-m-loading` | `.pf-v6-c-select__list-item` | Modifies a list item for loading styles. |
 
 ## Footer
 
@@ -3270,8 +3270,8 @@ The plain select variation should be used when you do not want a border applied
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-select__menu-footer` | `<div>` | Defines a menu footer. |
-| `.pf-v5-c-select__menu-list` | `<ul>` | Defines the menu list when the list is placed in `div.pf-v5-c-select__menu`. |
+| `.pf-v6-c-select__menu-footer` | `<div>` | Defines a menu footer. |
+| `.pf-v6-c-select__menu-list` | `<ul>` | Defines the menu list when the list is placed in `div.pf-v6-c-select__menu`. |
 
 ## Placeholder
 
@@ -3514,7 +3514,7 @@ The plain select variation should be used when you do not want a border applied
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-placeholder` | `.pf-v5-c-select__toggle` | Modifies the toggle for placeholder styles. |
+| `.pf-m-placeholder` | `.pf-v6-c-select__toggle` | Modifies the toggle for placeholder styles. |
 
 ## Documentation
 

package/docs/components/Sidebar/examples/Sidebar.md

@@ -1,7 +1,7 @@
 ---
 id: 'Sidebar'
 section: components
-cssPrefix: pf-v5-c-sidebar
+cssPrefix: pf-v6-c-sidebar
 ---import './Sidebar.css'
 
 ## Examples
@@ -253,18 +253,18 @@ cssPrefix: pf-v5-c-sidebar
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-sidebar` | `<div>` | Initiates the sidebar component. **Required** |
-| `.pf-v5-c-sidebar__main` | `<div>` | Initiates the sidebar main element. **Required** |
-| `.pf-v5-c-sidebar__panel` | `<div>` | Initiates the sidebar panel element. **Required** |
-| `.pf-v5-c-sidebar__content` | `<div>` | Initiates the sidebar content element. **Required** |
-| `.pf-m-border` | `.pf-v5-c-sidebar__main` | Modifies the sidebar component to add a border between the panel and content. |
-| `.pf-m-padding` | `.pf-v5-c-sidebar__panel`, `.pf-v5-c-sidebar__content` | Modifies the sidebar component to add a padding to panel and/or content. |
-| `.pf-m-gutter` | `.pf-v5-c-sidebar` | Modifies the sidebar component to add a gutter between the panel and content. |
-| `.pf-m-stack` | `.pf-v5-c-sidebar` | Modifies the sidebar to stack the panel on top of the content. |
-| `.pf-m-split` | `.pf-v5-c-sidebar` | Modifies the sidebar to position the panel and content side by side. |
-| `.pf-m-panel-right` | `.pf-v5-c-sidebar` | Modifies the sidebar to place the panel to the right of the content. |
-| `.pf-m-sticky` | `.pf-v5-c-sidebar__panel` | Modifies the panel to be sticky to the top of the layout. |
-| `.pf-m-static` | `.pf-v5-c-sidebar__panel` | Modifies the panel to be positioned statically. |
-| `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v5-c-sidebar__panel` | Modifies the panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** does not apply when the panel is stacked on top of the content. |
-| `.pf-m-no-background` | `.pf-v5-c-sidebar`, `.pf-v5-c-sidebar__panel, .pf-v5-c-sidebar__content` | Modifies the element to have a transparent background. |
-| `.pf-m-secondary` | `.pf-v5-c-sidebar__panel, .pf-v5-c-sidebar__content` | Modifies the element to have secondary styling. |
+| `.pf-v6-c-sidebar` | `<div>` | Initiates the sidebar component. **Required** |
+| `.pf-v6-c-sidebar__main` | `<div>` | Initiates the sidebar main element. **Required** |
+| `.pf-v6-c-sidebar__panel` | `<div>` | Initiates the sidebar panel element. **Required** |
+| `.pf-v6-c-sidebar__content` | `<div>` | Initiates the sidebar content element. **Required** |
+| `.pf-m-border` | `.pf-v6-c-sidebar__main` | Modifies the sidebar component to add a border between the panel and content. |
+| `.pf-m-padding` | `.pf-v6-c-sidebar__panel`, `.pf-v6-c-sidebar__content` | Modifies the sidebar component to add a padding to panel and/or content. |
+| `.pf-m-gutter` | `.pf-v6-c-sidebar` | Modifies the sidebar component to add a gutter between the panel and content. |
+| `.pf-m-stack` | `.pf-v6-c-sidebar` | Modifies the sidebar to stack the panel on top of the content. |
+| `.pf-m-split` | `.pf-v6-c-sidebar` | Modifies the sidebar to position the panel and content side by side. |
+| `.pf-m-panel-right` | `.pf-v6-c-sidebar` | Modifies the sidebar to place the panel to the right of the content. |
+| `.pf-m-sticky` | `.pf-v6-c-sidebar__panel` | Modifies the panel to be sticky to the top of the layout. |
+| `.pf-m-static` | `.pf-v6-c-sidebar__panel` | Modifies the panel to be positioned statically. |
+| `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-sidebar__panel` | Modifies the panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** does not apply when the panel is stacked on top of the content. |
+| `.pf-m-no-background` | `.pf-v6-c-sidebar`, `.pf-v6-c-sidebar__panel, .pf-v6-c-sidebar__content` | Modifies the element to have a transparent background. |
+| `.pf-m-secondary` | `.pf-v6-c-sidebar__panel, .pf-v6-c-sidebar__content` | Modifies the element to have secondary styling. |

package/docs/components/SimpleList/examples/SimpleList.md

@@ -1,7 +1,7 @@
 ---
 id: Simple list
 section: components
-cssPrefix: pf-v5-c-simple-list
+cssPrefix: pf-v6-c-simple-list
 ---## Examples
 
 ### Simple list
@@ -108,16 +108,16 @@ cssPrefix: pf-v5-c-simple-list
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `tabindex="0"` | `a.pf-v5-c-simple-list__item-link` | Inserts the link into the tab order of the page so that it is focusable. **Required** |
+| `tabindex="0"` | `a.pf-v6-c-simple-list__item-link` | Inserts the link into the tab order of the page so that it is focusable. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-simple-list` | `<div>` | Initiates a simple list. |
-| `.pf-v5-c-simple-list__section` | `<section>` | Initiates a simple list section. |
-| `.pf-v5-c-simple-list__title` | `<h2>` | Initiates a simple list title. |
-| `.pf-v5-c-simple-list__list` | `<ul>` | Initiates a simple list unordered list. |
-| `.pf-v5-c-simple-list__item` | `<li>` | Initiates a simple list item. |
-| `.pf-v5-c-simple-list__item-link` | `<button>`, `<a>` | Initiates a simple list item link. It can be a button or a link depending on the context. |
-| `.pf-m-current` | `.pf-v5-c-simple-list__item-link` | Modifies the simple list item link for the current state. |
+| `.pf-v6-c-simple-list` | `<div>` | Initiates a simple list. |
+| `.pf-v6-c-simple-list__section` | `<section>` | Initiates a simple list section. |
+| `.pf-v6-c-simple-list__title` | `<h2>` | Initiates a simple list title. |
+| `.pf-v6-c-simple-list__list` | `<ul>` | Initiates a simple list unordered list. |
+| `.pf-v6-c-simple-list__item` | `<li>` | Initiates a simple list item. |
+| `.pf-v6-c-simple-list__item-link` | `<button>`, `<a>` | Initiates a simple list item link. It can be a button or a link depending on the context. |
+| `.pf-m-current` | `.pf-v6-c-simple-list__item-link` | Modifies the simple list item link for the current state. |

package/docs/components/Skeleton/examples/Skeleton.md

@@ -1,7 +1,7 @@
 ---
 id: Skeleton
 section: components
-cssPrefix: pf-v5-c-skeleton
+cssPrefix: pf-v6-c-skeleton
 ---import './Skeleton.css'
 
 ## Examples
@@ -45,19 +45,19 @@ cssPrefix: pf-v5-c-skeleton
 ### Text modifiers
 
 ```html
---pf-v5-global--FontSize--4xl
+--pf-v6-global--FontSize--4xl
 <div class="pf-v6-c-skeleton pf-m-text-4xl"></div>
-<br />--pf-v5-global--FontSize--3xl
+<br />--pf-v6-global--FontSize--3xl
 <div class="pf-v6-c-skeleton pf-m-text-3xl"></div>
-<br />--pf-v5-global--FontSize--2xl
+<br />--pf-v6-global--FontSize--2xl
 <div class="pf-v6-c-skeleton pf-m-text-2xl"></div>
-<br />--pf-v5-global--FontSize--xl
+<br />--pf-v6-global--FontSize--xl
 <div class="pf-v6-c-skeleton pf-m-text-xl"></div>
-<br />--pf-v5-global--FontSize--lg
+<br />--pf-v6-global--FontSize--lg
 <div class="pf-v6-c-skeleton pf-m-text-lg"></div>
-<br />--pf-v5-global--FontSize--md
+<br />--pf-v6-global--FontSize--md
 <div class="pf-v6-c-skeleton pf-m-text-md"></div>
-<br />--pf-v5-global--FontSize--sm
+<br />--pf-v6-global--FontSize--sm
 <div class="pf-v6-c-skeleton pf-m-text-sm"></div>
 
 ```
@@ -92,9 +92,9 @@ Small circle
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-skeleton` | `<div>` | Initiates the skeleton component. **Required** |
-| `.pf-m-width-[sm, md, lg, 25, 33, 50, 66, 75]` | `.pf-v5-c-skeleton` | Modifies the width of the skeleton. The default is 100%. |
-| `.pf-m-height-[sm, md, lg, 25, 33, 50, 66, 75, 100]` | `.pf-v5-c-skeleton` | Modifies the height of the skeleton. The default is the inherited font size. |
-| `.pf-m-text-[sm, md, lg, xl, 2xl, 3xl, 4xl]` | `.pf-v5-c-skeleton` | Modifies the skeleton height to match the height of PatternFly's text elements. |
-| `.pf-m-circle` | `.pf-v5-c-skeleton` | Modifies the border radius of the skeleton to be a circle. Use a width modifier to specify the size. |
-| `.pf-m-square` | `.pf-v5-c-skeleton` | Modifies the border radius of the skeleton to be a square. Use a width modifier to specify the size. |
+| `.pf-v6-c-skeleton` | `<div>` | Initiates the skeleton component. **Required** |
+| `.pf-m-width-[sm, md, lg, 25, 33, 50, 66, 75]` | `.pf-v6-c-skeleton` | Modifies the width of the skeleton. The default is 100%. |
+| `.pf-m-height-[sm, md, lg, 25, 33, 50, 66, 75, 100]` | `.pf-v6-c-skeleton` | Modifies the height of the skeleton. The default is the inherited font size. |
+| `.pf-m-text-[sm, md, lg, xl, 2xl, 3xl, 4xl]` | `.pf-v6-c-skeleton` | Modifies the skeleton height to match the height of PatternFly's text elements. |
+| `.pf-m-circle` | `.pf-v6-c-skeleton` | Modifies the border radius of the skeleton to be a circle. Use a width modifier to specify the size. |
+| `.pf-m-square` | `.pf-v6-c-skeleton` | Modifies the border radius of the skeleton to be a square. Use a width modifier to specify the size. |

package/docs/components/SkipToContent/examples/SkipToContent.md

@@ -1,7 +1,7 @@
 ---
 id: Skip to content
 section: components
-cssPrefix: pf-v5-c-skip-to-content
+cssPrefix: pf-v6-c-skip-to-content
 ---## Examples
 
 ### Basic
@@ -135,16 +135,16 @@ cssPrefix: pf-v5-c-skip-to-content
 
 Skip to content allows screen reader and keyboard users to bypass navigation rather than tabbing through it.
 
-When using `.pf-v5-c-skip-to-content` you must provide an `href` attribute whose value corresponds to the `id` attribute of the primary content container for your application. In most cases this is the `<main>` element. For a demo of this, navigate to a [page demo](/components/page/html-demos) and note the use of `tabindex="-1"`, which allows the element to receive focus programmatically.
+When using `.pf-v6-c-skip-to-content` you must provide an `href` attribute whose value corresponds to the `id` attribute of the primary content container for your application. In most cases this is the `<main>` element. For a demo of this, navigate to a [page demo](/components/page/html-demos) and note the use of `tabindex="-1"`, which allows the element to receive focus programmatically.
 
 ### Accessibility
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `href="[id of main container]"` | `.pf-v5-c-skip-to-content` | Sends focus to the primary content container. **Required** |
+| `href="[id of main container]"` | `.pf-v6-c-skip-to-content` | Sends focus to the primary content container. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-skip-to-content` | `<a>` |  initiates the skip to content link. |
+| `.pf-v6-c-skip-to-content` | `<a>` |  initiates the skip to content link. |