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

package/docs/components/ExpandableSection/examples/ExpandableSection.md

@@ -1,7 +1,7 @@
 ---
 id: Expandable section
 section: components
-cssPrefix: pf-v5-c-expandable-section
+cssPrefix: pf-v6-c-expandable-section
 ---## Examples
 
 ### Hidden
@@ -210,25 +210,25 @@ cssPrefix: pf-v5-c-expandable-section
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-expanded="true"` | `.pf-v5-c-expandable-section__toggle` | Indicates that the expandable section content is visible. **Required** |
-| `aria-expanded="false"` | `.pf-v5-c-expandable-section__toggle` | Indicates the the expandable section content is hidden. **Required** |
-| `hidden` | `.pf-v5-c-expandable-section__content` | Indicates that the expandable section content element is hidden. Use with `aria-expanded="false"` **Required** |
-| `aria-hidden="true"` | `.pf-v5-c-expandable-section__toggle-icon` | Hides the icon from screen readers. **Required** |
-| `aria-controls="[id of content element]"` | `.pf-v5-c-expandable-section.pf-m-detached .pf-v5-c-expandable-section__toggle` | Identifies the element controlled by the toggle button. **Required** |
-| `id` | `.pf-v5-c-expandable-section.pf-m-detached .pf-v5-c-expandable-section__content` | Gives the content an `id` for use with `aria-controls` on `.pf-v5-c-expandable-section__toggle`. **Required** |
+| `aria-expanded="true"` | `.pf-v6-c-expandable-section__toggle` | Indicates that the expandable section content is visible. **Required** |
+| `aria-expanded="false"` | `.pf-v6-c-expandable-section__toggle` | Indicates the the expandable section content is hidden. **Required** |
+| `hidden` | `.pf-v6-c-expandable-section__content` | Indicates that the expandable section content element is hidden. Use with `aria-expanded="false"` **Required** |
+| `aria-hidden="true"` | `.pf-v6-c-expandable-section__toggle-icon` | Hides the icon from screen readers. **Required** |
+| `aria-controls="[id of content element]"` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__toggle` | Identifies the element controlled by the toggle button. **Required** |
+| `id` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__content` | Gives the content an `id` for use with `aria-controls` on `.pf-v6-c-expandable-section__toggle`. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-expandable-section` | `<div>` | Initiates the expandable section component. **Required** |
-| `.pf-v5-c-expandable-section__toggle` | `<button>` | Initiates the expandable section toggle. **Required** |
-| `.pf-v5-c-expandable-section__toggle-text` | `<span>` | Initiates the expandable toggle text. **Required** |
-| `.pf-v5-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. **Required** |
-| `.pf-v5-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
-| `.pf-m-expanded` | `.pf-v5-c-expandable-section` | Modifies the component for the expanded state. |
-| `.pf-m-display-lg` | `.pf-v5-c-expandable-section` | Modifies the styling of the component to have large display styling. |
-| `.pf-m-indented` | `.pf-v5-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
-| `.pf-m-truncate` | `.pf-v5-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
-| `.pf-m-expand-top` | `.pf-v5-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
-| `--pf-v5-c-expandable-section--m-truncate__content--LineClamp` | `.pf-v5-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |
+| `.pf-v6-c-expandable-section` | `<div>` | Initiates the expandable section component. **Required** |
+| `.pf-v6-c-expandable-section__toggle` | `<button>` | Initiates the expandable section toggle. **Required** |
+| `.pf-v6-c-expandable-section__toggle-text` | `<span>` | Initiates the expandable toggle text. **Required** |
+| `.pf-v6-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. **Required** |
+| `.pf-v6-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
+| `.pf-m-expanded` | `.pf-v6-c-expandable-section` | Modifies the component for the expanded state. |
+| `.pf-m-display-lg` | `.pf-v6-c-expandable-section` | Modifies the styling of the component to have large display styling. |
+| `.pf-m-indented` | `.pf-v6-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
+| `.pf-m-truncate` | `.pf-v6-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
+| `.pf-m-expand-top` | `.pf-v6-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
+| `--pf-v6-c-expandable-section--m-truncate__content--LineClamp` | `.pf-v6-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |

package/docs/components/FileUpload/examples/FileUpload.md

@@ -2,7 +2,7 @@
 id: Simple file upload
 section: components
 subsection: file-upload
-cssPrefix: pf-v5-c-file-upload
+cssPrefix: pf-v6-c-file-upload
 ---## Examples
 
 ### Basic file upload
@@ -381,10 +381,10 @@ cssPrefix: pf-v5-c-file-upload
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-file-upload` | `<div>`, `<form>` | Initiates the file upload component. **Required**. |
-| `.pf-v5-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** |
-| `.pf-v5-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** |
-| `.pf-v5-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** |
-| `.pf-v5-c-file-upload__helper-text` | `<div>` | Initiates a container for [helper text](/components/helper-text) |
-| `.pf-m-drag-hover` | `.pf-v5-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
-| `.pf-m-loading` | `.pf-v5-c-file-upload` | Modifies file upload for the loading state. |
+| `.pf-v6-c-file-upload` | `<div>`, `<form>` | Initiates the file upload component. **Required**. |
+| `.pf-v6-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** |
+| `.pf-v6-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** |
+| `.pf-v6-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** |
+| `.pf-v6-c-file-upload__helper-text` | `<div>` | Initiates a container for [helper text](/components/helper-text) |
+| `.pf-m-drag-hover` | `.pf-v6-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
+| `.pf-m-loading` | `.pf-v6-c-file-upload` | Modifies file upload for the loading state. |

package/docs/components/Form/examples/Form.md

@@ -2,7 +2,7 @@
 id: Form
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-form
+cssPrefix: pf-v6-c-form
 ---## Examples
 
 ### Vertically aligned labels
@@ -805,7 +805,7 @@ cssPrefix: pf-v5-c-form
 
 ## Documentation
 
-To avoid the form label's required indicator or help tooltip icon from wrapping separately from the form label text, all whitespace characters between the last word of the label text, the required indicator (`.pf-v5-c-form__label-required`), and help tooltip icon (`.pf-v5-c-form__label-help`) must be removed, and `&nbsp;` characters added in between to maintain spacing. Also the help tooltip icon's `.pf-v5-c-form__label-required` element must be a `<span>` instead of a `<button>` due to layout limitations of the `<button>` element imposed by user agent styles.
+To avoid the form label's required indicator or help tooltip icon from wrapping separately from the form label text, all whitespace characters between the last word of the label text, the required indicator (`.pf-v6-c-form__label-required`), and help tooltip icon (`.pf-v6-c-form__label-help`) must be removed, and `&nbsp;` characters added in between to maintain spacing. Also the help tooltip icon's `.pf-v6-c-form__label-required` element must be a `<span>` instead of a `<button>` due to layout limitations of the `<button>` element imposed by user agent styles.
 
 ### Accessibility
 
@@ -814,59 +814,59 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
 | `for` | `<label>` |  Each `<label>` must have a `for` attribute that matches its form field id. **Required** |
 | `id` | `<input type="radio/checkbox/text">`, `<select>`, `<textarea>` |  Each `<form>` field must have an `id` attribute that matches its label's `for` value. **Required** |
 | `required` | `<input>`, `<select>`, `<textarea>` | Required fields must include these attributes. |
-| `aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | Form fields with related `.pf-v5-c-helper-text` require this attribute. Usage `<input aria-describedby="{helper_text_id}">`.  |
+| `aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | Form fields with related `.pf-v6-c-helper-text` require this attribute. Usage `<input aria-describedby="{helper_text_id}">`.  |
 | `aria-invalid="true" aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` |  When form validation fails `aria-describedby` is used to communicate the error to the user. These attributes need to be handled with Javascript so that `aria-describedby` only references help text that explains the error, and so that `aria-invalid="true"` is only present when validation fails. For proper styling of errors `aria-invalid="true"` is required. |
-| `aria-hidden="true"` | `.pf-v5-c-form__label-required` |  Hides the required indicator from assistive technologies. |
-| `role="group"` | `.pf-v5-c-form__group`, `.pf-v5-c-form__section`, `.pf-v5-c-form__field-group` | Provides group role for form groups, form sections, and form field groups. **Required for checkbox groups, form groups, form sections, and form field groups.** |
-| `role="radiogroup"` | `.pf-v5-c-form__group` | Provides group role for radio input groups. **Required for radio input groups** |
-| `role="button"` | `.pf-v5-c-form__group-label-help` | Provides button role for group label help spans. **Required for group label help.** |
-| `id` | `.pf-v5-c-form__group-label` | Generates an `id` for use in the `aria-labelledby` attribute in a checkbox or radio form group. |
-| `id` | `.pf-v5-c-form__field-group-title-text` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
-| `id` | `.pf-v5-c-form__field-group-toggle-button > button` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
-| `aria-labelledby="{label id}"` | `.pf-v5-c-form__group`, `.pf-v5-c-form__section`, `.pf-v5-c-form__field-group` | Provides an accessible label for form groups, form sections, and form field groups. **Required for form groups, form sections, and form field groups that contain labels.** |
-| `aria-label` | `.pf-v5-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. |
-| `aria-labelledby="{title id} {toggle button id}"` | `.pf-v5-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. |
-| `aria-expanded="true/false"` | `.pf-v5-c-form__field-group-toggle-button > button` | Indicates whether the field group body is visible or hidden. |
-| `id="{form_label_id}"` | `.pf-v5-c-form__label` |  Generates an `id` for use in the `aria-describedby` attribute in a `.pf-v5-c-form__group-label-help`. |
-| `aria-label="{descriptive text}" aria-describedby="{form_label_id}"` | `.pf-v5-c-form__group-label-help` |  Provides an accessible label on a button that provides additional information for a form element. |
+| `aria-hidden="true"` | `.pf-v6-c-form__label-required` |  Hides the required indicator from assistive technologies. |
+| `role="group"` | `.pf-v6-c-form__group`, `.pf-v6-c-form__section`, `.pf-v6-c-form__field-group` | Provides group role for form groups, form sections, and form field groups. **Required for checkbox groups, form groups, form sections, and form field groups.** |
+| `role="radiogroup"` | `.pf-v6-c-form__group` | Provides group role for radio input groups. **Required for radio input groups** |
+| `role="button"` | `.pf-v6-c-form__group-label-help` | Provides button role for group label help spans. **Required for group label help.** |
+| `id` | `.pf-v6-c-form__group-label` | Generates an `id` for use in the `aria-labelledby` attribute in a checkbox or radio form group. |
+| `id` | `.pf-v6-c-form__field-group-title-text` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
+| `id` | `.pf-v6-c-form__field-group-toggle-button > button` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
+| `aria-labelledby="{label id}"` | `.pf-v6-c-form__group`, `.pf-v6-c-form__section`, `.pf-v6-c-form__field-group` | Provides an accessible label for form groups, form sections, and form field groups. **Required for form groups, form sections, and form field groups that contain labels.** |
+| `aria-label` | `.pf-v6-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. |
+| `aria-labelledby="{title id} {toggle button id}"` | `.pf-v6-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. |
+| `aria-expanded="true/false"` | `.pf-v6-c-form__field-group-toggle-button > button` | Indicates whether the field group body is visible or hidden. |
+| `id="{form_label_id}"` | `.pf-v6-c-form__label` |  Generates an `id` for use in the `aria-describedby` attribute in a `.pf-v6-c-form__group-label-help`. |
+| `aria-label="{descriptive text}" aria-describedby="{form_label_id}"` | `.pf-v6-c-form__group-label-help` |  Provides an accessible label on a button that provides additional information for a form element. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-form` | `<form>` |  Initiates a standard form. **Required** |
-| `.pf-v5-c-form__section` | `<div>, <section>` |  Initiates a form section. |
-| `.pf-v5-c-form__section-title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` |  Initiates a form section title. |
-| `.pf-v5-c-form__group` | `<div>` |  Initiates a form group. |
-| `.pf-v5-c-form__group-label` | `<div>` |  Initiates a form group label. |
-| `.pf-v5-c-form__label` | `<label>`, `<span>` |  Initiates a form label. **Required** |
-| `.pf-v5-c-form__label-text` | `<span>` |  Initiates a form label text. **Required** |
-| `.pf-v5-c-form__label-required` | `<span>` |  Initiates a form label required indicator. |
-| `.pf-v5-c-form__group-label-main` | `<div>` |  Initiates a form group label main container. |
-| `.pf-v5-c-form__group-label-info` | `<div>` |  Initiates a form group info label. |
-| `.pf-v5-c-form__group-label-help` | `<span>` | Initiates field level help. |
-| `.pf-v5-c-form__group-control` | `<div>` |  Initiates a form group control section. |
-| `.pf-v5-c-form__actions` | `<div>` | Iniates a row of actions. |
-| `.pf-v5-c-form__helper-text` | `<p>`, `<div>` |  Initiates a form helper text block. |
-| `.pf-v5-c-form__alert` | `<div>` | Initiates the form alert container for inline alerts. |
-| `.pf-v5-c-form__field-group` | `<div>` | Initiates a form field group. |
-| `.pf-v5-c-form__field-group-toggle` | `<div>` | Initiates the form field group toggle. |
-| `.pf-v5-c-form__field-group-toggle-button` | `<div>` | Initiates the form field group toggle button. |
-| `.pf-v5-c-form__field-group-toggle-icon` | `<span>` | Initiates the form field group toggle icon. |
-| `.pf-v5-c-form__field-group-header` | `<div>` | Initiates the form field group header. |
-| `.pf-v5-c-form__field-group-header-main` | `<div>` | Initiates the form field group main section. |
-| `.pf-v5-c-form__field-group-header-title` | `<div>` | Initiates the form field group title. |
-| `.pf-v5-c-form__field-group-header-title-text` | `<div>` | Initiates the form field group title text. |
-| `.pf-v5-c-form__field-group-header-description` | `<div>` | Initiates the form field group description. |
-| `.pf-v5-c-form__field-group-header-actions` | `<div>` | Initiates the form field group actions container. |
-| `.pf-v5-c-form__field-group-body` | `<div>` | Initiates the form field group body. |
-| `.pf-m-horizontal{-on-[xs, sm, md, lg, xl, 2xl]}` | `.pf-v5-c-form` | Modifies the form for a horizontal layout at an optional breakpoint. The default breakpoint is `-md`. |
-| `.pf-m-limit-width` | `.pf-v5-c-form` | Limits the overall max-width of the form. Configurable by defining `--pf-v5-c-form--m-limit-width--MaxWidth`. |
-| `.pf-m-info` | `.pf-v5-c-form__group-label` | Modifies the form group label to contain form group label info. |
-| `.pf-m-action` | `.pf-v5-c-form__group` | Modifies form group margin-top. |
-| `.pf-m-disabled` | `.pf-v5-c-form__label` | Modifies form label to show disabled state. |
-| `.pf-m-no-padding-top` | `.pf-v5-c-form__group-label` | Removes top padding from the label element for labels adjacent to an element that isn't a form control. |
-| `.pf-m-inline` | `.pf-v5-c-form__group-control` | Modifies form group children to be inline (this is primarily for radio buttons and checkboxes). |
-| `.pf-m-stack` | `.pf-v5-c-form__group-control` | Modifies form group children to be stacked with space between children. |
-| `.pf-m-expanded` | `.pf-v5-c-form__field-group` | Modifies an expandable field group for the expanded state. |
-| `--pf-v5-c-form--m-limit-width--MaxWidth` | `.pf-v5-c-form.pf-m-limit-width` | Sets a custom `max-width` for a width limited form. |
+| `.pf-v6-c-form` | `<form>` |  Initiates a standard form. **Required** |
+| `.pf-v6-c-form__section` | `<div>, <section>` |  Initiates a form section. |
+| `.pf-v6-c-form__section-title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` |  Initiates a form section title. |
+| `.pf-v6-c-form__group` | `<div>` |  Initiates a form group. |
+| `.pf-v6-c-form__group-label` | `<div>` |  Initiates a form group label. |
+| `.pf-v6-c-form__label` | `<label>`, `<span>` |  Initiates a form label. **Required** |
+| `.pf-v6-c-form__label-text` | `<span>` |  Initiates a form label text. **Required** |
+| `.pf-v6-c-form__label-required` | `<span>` |  Initiates a form label required indicator. |
+| `.pf-v6-c-form__group-label-main` | `<div>` |  Initiates a form group label main container. |
+| `.pf-v6-c-form__group-label-info` | `<div>` |  Initiates a form group info label. |
+| `.pf-v6-c-form__group-label-help` | `<span>` | Initiates field level help. |
+| `.pf-v6-c-form__group-control` | `<div>` |  Initiates a form group control section. |
+| `.pf-v6-c-form__actions` | `<div>` | Iniates a row of actions. |
+| `.pf-v6-c-form__helper-text` | `<p>`, `<div>` |  Initiates a form helper text block. |
+| `.pf-v6-c-form__alert` | `<div>` | Initiates the form alert container for inline alerts. |
+| `.pf-v6-c-form__field-group` | `<div>` | Initiates a form field group. |
+| `.pf-v6-c-form__field-group-toggle` | `<div>` | Initiates the form field group toggle. |
+| `.pf-v6-c-form__field-group-toggle-button` | `<div>` | Initiates the form field group toggle button. |
+| `.pf-v6-c-form__field-group-toggle-icon` | `<span>` | Initiates the form field group toggle icon. |
+| `.pf-v6-c-form__field-group-header` | `<div>` | Initiates the form field group header. |
+| `.pf-v6-c-form__field-group-header-main` | `<div>` | Initiates the form field group main section. |
+| `.pf-v6-c-form__field-group-header-title` | `<div>` | Initiates the form field group title. |
+| `.pf-v6-c-form__field-group-header-title-text` | `<div>` | Initiates the form field group title text. |
+| `.pf-v6-c-form__field-group-header-description` | `<div>` | Initiates the form field group description. |
+| `.pf-v6-c-form__field-group-header-actions` | `<div>` | Initiates the form field group actions container. |
+| `.pf-v6-c-form__field-group-body` | `<div>` | Initiates the form field group body. |
+| `.pf-m-horizontal{-on-[xs, sm, md, lg, xl, 2xl]}` | `.pf-v6-c-form` | Modifies the form for a horizontal layout at an optional breakpoint. The default breakpoint is `-md`. |
+| `.pf-m-limit-width` | `.pf-v6-c-form` | Limits the overall max-width of the form. Configurable by defining `--pf-v6-c-form--m-limit-width--MaxWidth`. |
+| `.pf-m-info` | `.pf-v6-c-form__group-label` | Modifies the form group label to contain form group label info. |
+| `.pf-m-action` | `.pf-v6-c-form__group` | Modifies form group margin-top. |
+| `.pf-m-disabled` | `.pf-v6-c-form__label` | Modifies form label to show disabled state. |
+| `.pf-m-no-padding-top` | `.pf-v6-c-form__group-label` | Removes top padding from the label element for labels adjacent to an element that isn't a form control. |
+| `.pf-m-inline` | `.pf-v6-c-form__group-control` | Modifies form group children to be inline (this is primarily for radio buttons and checkboxes). |
+| `.pf-m-stack` | `.pf-v6-c-form__group-control` | Modifies form group children to be stacked with space between children. |
+| `.pf-m-expanded` | `.pf-v6-c-form__field-group` | Modifies an expandable field group for the expanded state. |
+| `--pf-v6-c-form--m-limit-width--MaxWidth` | `.pf-v6-c-form.pf-m-limit-width` | Sets a custom `max-width` for a width limited form. |

package/docs/components/FormControl/examples/FormControl.md

@@ -2,7 +2,7 @@
 id: Form control
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-form-control
+cssPrefix: pf-v6-c-form-control
 ---## Examples
 
 ### Input
@@ -461,29 +461,29 @@ cssPrefix: pf-v5-c-form-control
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `id` | `.pf-v5-c-form-control > input`,`.pf-v5-c-form-control > select`, or `.pf-v5-c-form-control > textarea` | Provides an `id` value that can be used with the `for` attribute on an associated `<label>` element to provide an accessible label for the form control element.
-| `aria-invalid="true"` | `.pf-v5-c-form-control > input`,`.pf-v5-c-form-control > select`, or `.pf-v5-c-form-control > textarea` | Indicates that the form control is in the error state and applies error state styling. Use with `.pf-m-error` on the `.pf-v5-c-form-control` to ensure correct styling. |
-| `aria-label="descriptive text"` | `.pf-v5-c-form-control > input`,`.pf-v5-c-form-control > select`, or `.pf-v5-c-form-control > textarea` | Provides an accessible label for assistive technology. |
-| `aria-expanded="true"` | `.pf-v5-c-form-control > input` | Indicates that clicking in the form control has toggled something else to be expanded. Use with `.pf-m-expanded` on the `.pf-v5-c-form-control` to ensure correct styling. |
+| `id` | `.pf-v6-c-form-control > input`,`.pf-v6-c-form-control > select`, or `.pf-v6-c-form-control > textarea` | Provides an `id` value that can be used with the `for` attribute on an associated `<label>` element to provide an accessible label for the form control element.
+| `aria-invalid="true"` | `.pf-v6-c-form-control > input`,`.pf-v6-c-form-control > select`, or `.pf-v6-c-form-control > textarea` | Indicates that the form control is in the error state and applies error state styling. Use with `.pf-m-error` on the `.pf-v6-c-form-control` to ensure correct styling. |
+| `aria-label="descriptive text"` | `.pf-v6-c-form-control > input`,`.pf-v6-c-form-control > select`, or `.pf-v6-c-form-control > textarea` | Provides an accessible label for assistive technology. |
+| `aria-expanded="true"` | `.pf-v6-c-form-control > input` | Indicates that clicking in the form control has toggled something else to be expanded. Use with `.pf-m-expanded` on the `.pf-v6-c-form-control` to ensure correct styling. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-form-control` | `<span>` |  Initiates a container for an input, text area or select. For styling of checkboxes or radios see the [checkbox component](/components/forms/checkbox) or [radio component](/components/forms/radio). **Required**  |
-| `.pf-v5-c-form-control__utilities` | `<span>` |  Initiates a container for elements like icons to be associated with the form control.  |
-| `.pf-v5-c-form-control__icon` | `<span>` |  Creates a container for an icon associated with a form control.  |
-| `.pf-v5-c-form-control__toggle-icon` | `<span>` |  Initiates a toggle icon for a form select.  |
-| `.pf-m-resize-vertical` | `.pf-v5-c-form-control` | Modifies a form control element containing a text area so it can only be resized vertically. |
-| `.pf-m-resize-horizontal` | `.pf-v5-c-form-control` | Modifies a form control element containing a text area so it can only be resized horizontally. |
-| `.pf-m-resize-both` | `.pf-v5-c-form-control` | Modifies a `.pf-v5-c-form-control` element containing a text area so it resizes in both directions. |
-| `.pf-m-icon` | `.pf-v5-c-form-control` | Modifies a form control to allow for an icon. |
-| `.pf-m-readonly` | `.pf-v5-c-form-control` | Modifies a form control for a readonly input, text area, or select.|
-| `.pf-m-disabled` | `.pf-v5-c-form-control` | Modifies a form control for a disabled input, text area, or select.|
-| `.pf-m-success` | `.pf-v5-c-form-control` | Modifies a form control for the success state. |
-| `.pf-m-warning` | `.pf-v5-c-form-control` | Modifies a form control for the warning state. |
-| `.pf-m-error` | `.pf-v5-c-form-control` | Modifies a form control for the error (invalid) state. |
-| `.pf-m-expanded` | `.pf-v5-c-form-control` | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
-| `.pf-m-placeholder` | `.pf-v5-c-form-control` | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
-| `.pf-m-plain` | `.pf-v5-c-form-control` | Modifies a form control containing an `<input>` or `<textarea>` with a `readonly` attribute to be presented as normal text. |
-| `.pf-m-status`| `.pf-v5-c-form-control__icon` | Modifies a form control icon to show status. |
+| `.pf-v6-c-form-control` | `<span>` |  Initiates a container for an input, text area or select. For styling of checkboxes or radios see the [checkbox component](/components/forms/checkbox) or [radio component](/components/forms/radio). **Required**  |
+| `.pf-v6-c-form-control__utilities` | `<span>` |  Initiates a container for elements like icons to be associated with the form control.  |
+| `.pf-v6-c-form-control__icon` | `<span>` |  Creates a container for an icon associated with a form control.  |
+| `.pf-v6-c-form-control__toggle-icon` | `<span>` |  Initiates a toggle icon for a form select.  |
+| `.pf-m-resize-vertical` | `.pf-v6-c-form-control` | Modifies a form control element containing a text area so it can only be resized vertically. |
+| `.pf-m-resize-horizontal` | `.pf-v6-c-form-control` | Modifies a form control element containing a text area so it can only be resized horizontally. |
+| `.pf-m-resize-both` | `.pf-v6-c-form-control` | Modifies a `.pf-v6-c-form-control` element containing a text area so it resizes in both directions. |
+| `.pf-m-icon` | `.pf-v6-c-form-control` | Modifies a form control to allow for an icon. |
+| `.pf-m-readonly` | `.pf-v6-c-form-control` | Modifies a form control for a readonly input, text area, or select.|
+| `.pf-m-disabled` | `.pf-v6-c-form-control` | Modifies a form control for a disabled input, text area, or select.|
+| `.pf-m-success` | `.pf-v6-c-form-control` | Modifies a form control for the success state. |
+| `.pf-m-warning` | `.pf-v6-c-form-control` | Modifies a form control for the warning state. |
+| `.pf-m-error` | `.pf-v6-c-form-control` | Modifies a form control for the error (invalid) state. |
+| `.pf-m-expanded` | `.pf-v6-c-form-control` | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
+| `.pf-m-placeholder` | `.pf-v6-c-form-control` | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
+| `.pf-m-plain` | `.pf-v6-c-form-control` | Modifies a form control containing an `<input>` or `<textarea>` with a `readonly` attribute to be presented as normal text. |
+| `.pf-m-status`| `.pf-v6-c-form-control__icon` | Modifies a form control icon to show status. |

package/docs/components/HelperText/examples/HelperText.md

@@ -1,7 +1,7 @@
 ---
 id: 'Helper text'
 section: components
-cssPrefix: pf-v5-c-helper-text
+cssPrefix: pf-v6-c-helper-text
 ---## Examples
 
 ### Static
@@ -188,13 +188,13 @@ cssPrefix: pf-v5-c-helper-text
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-helper-text` | `<div>`, `<ul>` |  Initiates the helper text component. **Required** |
-| `.pf-v5-c-helper-text__item` | `<div>`, `<li>` |  Initiates a helper text item. **Required** |
-| `.pf-v5-c-helper-text__item-icon` | `<span>` |  Initiates a helper text item icon. **Required when used in `.pf-v5-c-helper-text__item.pf-m-dynamic`** |
-| `.pf-v5-c-helper-text__item-text` | `<span>` |  Initiates a helper text item text. **Required** |
-| `.pf-m-dynamic` | `.pf-v5-c-helper-text__item` |  Modifies a helper text item to be dynamic. For use when the item changes state as the form field the text is associated with is updated. |
-| `.pf-m-indeterminate` | `.pf-v5-c-helper-text__item` |  Modifies a helper text item for indeterminate state styles. |
-| `.pf-m-warning` | `.pf-v5-c-helper-text__item` |  Modifies a helper text item for warning state styles. |
-| `.pf-m-success` | `.pf-v5-c-helper-text__item` |  Modifies a helper text item for success state styles. |
-| `.pf-m-error` | `.pf-v5-c-helper-text__item` |  Modifies a helper text item for error state styles. |
-| `.pf-m-hidden` | `.pf-v5-c-helper-text` | Hides helper text. |
+| `.pf-v6-c-helper-text` | `<div>`, `<ul>` |  Initiates the helper text component. **Required** |
+| `.pf-v6-c-helper-text__item` | `<div>`, `<li>` |  Initiates a helper text item. **Required** |
+| `.pf-v6-c-helper-text__item-icon` | `<span>` |  Initiates a helper text item icon. **Required when used in `.pf-v6-c-helper-text__item.pf-m-dynamic`** |
+| `.pf-v6-c-helper-text__item-text` | `<span>` |  Initiates a helper text item text. **Required** |
+| `.pf-m-dynamic` | `.pf-v6-c-helper-text__item` |  Modifies a helper text item to be dynamic. For use when the item changes state as the form field the text is associated with is updated. |
+| `.pf-m-indeterminate` | `.pf-v6-c-helper-text__item` |  Modifies a helper text item for indeterminate state styles. |
+| `.pf-m-warning` | `.pf-v6-c-helper-text__item` |  Modifies a helper text item for warning state styles. |
+| `.pf-m-success` | `.pf-v6-c-helper-text__item` |  Modifies a helper text item for success state styles. |
+| `.pf-m-error` | `.pf-v6-c-helper-text__item` |  Modifies a helper text item for error state styles. |
+| `.pf-m-hidden` | `.pf-v6-c-helper-text` | Hides helper text. |

package/docs/components/Hint/examples/Hint.md

@@ -1,7 +1,7 @@
 ---
 id: 'Hint'
 section: components
-cssPrefix: pf-v5-c-hint
+cssPrefix: pf-v6-c-hint
 ---## Examples
 
 ### Hint with title
@@ -228,8 +228,8 @@ cssPrefix: pf-v5-c-hint
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-hint` | `<div>` | Initiates the hint component. **Required** |
-| `.pf-v5-c-hint__title` | `<div>` | Initiates the hint title element. |
-| `.pf-v5-c-hint__body` | `<div>` | Initiates the hint body element. |
-| `.pf-v5-c-hint__footer` | `<div>` | Initiates the hint footer element. |
-| `.pf-v5-c-hint__actions` | `<div>` | Initiates the hint actions element. |
+| `.pf-v6-c-hint` | `<div>` | Initiates the hint component. **Required** |
+| `.pf-v6-c-hint__title` | `<div>` | Initiates the hint title element. |
+| `.pf-v6-c-hint__body` | `<div>` | Initiates the hint body element. |
+| `.pf-v6-c-hint__footer` | `<div>` | Initiates the hint footer element. |
+| `.pf-v6-c-hint__actions` | `<div>` | Initiates the hint actions element. |

package/docs/components/Icon/examples/Icon.md

@@ -1,7 +1,7 @@
 ---
 id: 'Icon'
 section: components
-cssPrefix: pf-v5-c-icon
+cssPrefix: pf-v6-c-icon
 ---## Examples
 
 ### Basic
@@ -311,15 +311,15 @@ Refer to the [icons](/design-foundations/icons) page for information about the P
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-icon` | `<span>`, `<div>` | Initiates an icon component. **Required**  |
-| `.pf-v5-c-icon__content` | `<span>`, `<div>` | Initiates the icon content. **Required**  |
-| `.pf-v5-c-icon__progress` | `<span>`, `<div>` | Initiates a container for a progress spinner.  |
-| `.pf-m-inline` | `.pf-v5-c-icon` | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
-| `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon` | Modifies the icon container to be small, medium, large, extra large, double extra large, or triple extra large. |
-| `.pf-m-body-[sm,default,lg]` | `.pf-v5-c-icon` | Modifies the icon container to be a size matching small, default, or large body text. |
-| `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon` | Modifies the icon container to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
-| `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon__content`, `pf-v5-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
-| `.pf-m-body-[sm,default,lg]` | `.pf-v5-c-icon__content` | Modifies the icon content or progress element to be a size matching small, default, or large body text. |
-| `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon__content` | Modifies the icon content or progress element to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
-| `.pf-m-in-progress` | `.pf-v5-c-icon` | Shows the progress element in place of the icon content.  |
-| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-custom`  | `.pf-v5-c-icon__content` | Modifies the icon content to use a status color.  |
+| `.pf-v6-c-icon` | `<span>`, `<div>` | Initiates an icon component. **Required**  |
+| `.pf-v6-c-icon__content` | `<span>`, `<div>` | Initiates the icon content. **Required**  |
+| `.pf-v6-c-icon__progress` | `<span>`, `<div>` | Initiates a container for a progress spinner.  |
+| `.pf-m-inline` | `.pf-v6-c-icon` | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
+| `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v6-c-icon` | Modifies the icon container to be small, medium, large, extra large, double extra large, or triple extra large. |
+| `.pf-m-body-[sm,default,lg]` | `.pf-v6-c-icon` | Modifies the icon container to be a size matching small, default, or large body text. |
+| `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v6-c-icon` | Modifies the icon container to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
+| `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v6-c-icon__content`, `pf-v6-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
+| `.pf-m-body-[sm,default,lg]` | `.pf-v6-c-icon__content` | Modifies the icon content or progress element to be a size matching small, default, or large body text. |
+| `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v6-c-icon__content` | Modifies the icon content or progress element to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
+| `.pf-m-in-progress` | `.pf-v6-c-icon` | Shows the progress element in place of the icon content.  |
+| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-custom`  | `.pf-v6-c-icon__content` | Modifies the icon content to use a status color.  |