@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

package/dist/docs/api/v6/components/expandable-section/html

@@ -0,0 +1,92 @@
+## Examples
+
+### Hidden
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Expanded
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Indented
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Disclosure variation (hidden)
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Disclosure variation (expanded)
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Disclosure variation (indented)
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Detached
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Truncate expansion (hidden)
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Truncate expansion (expanded)
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+## Documentation
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-expanded="true"` | `.pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Indicates that the expandable section content is visible. **Required** |
+| `aria-expanded="false"` | `.pf-v6-c-expandable-section__toggle .pf-v6-c-button` | 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 .pf-v6-c-button` | 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 .pf-v6-c-button`. **Required** |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-expandable-section` | `<div>` | Initiates the expandable section component. **Required** |
+| `.pf-v6-c-expandable-section__toggle` | `<div>` | Initiates the expandable toggle wrapper. **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/dist/docs/api/v6/components/expandable-section/react

@@ -0,0 +1,67 @@
+## Examples
+
+### Basic
+
+
+import ExpandableSectionBasic from "./ExpandableSectionBasic.tsx?raw"
+
+<LiveExample src={ExpandableSectionBasic} />
+
+### Uncontrolled
+
+
+import ExpandableSectionUncontrolled from "./ExpandableSectionUncontrolled.tsx?raw"
+
+<LiveExample src={ExpandableSectionUncontrolled} />
+
+### Uncontrolled with dynamic toggle text
+
+
+import ExpandableSectionUncontrolledDynamicToggleText from "./ExpandableSectionUncontrolledDynamicToggleText.tsx?raw"
+
+<LiveExample src={ExpandableSectionUncontrolledDynamicToggleText} />
+
+### Detached
+
+When passing the `isDetached` property into `<ExpandableSection>`, you must also manually pass in the same `toggleId` and `contentId` properties to both `<ExpandableSection>` and `<ExpandableSectionToggle>`. This will link the content to the toggle via ARIA attributes.
+
+
+import ExpandableSectionDetached from "./ExpandableSectionDetached.tsx?raw"
+
+<LiveExample src={ExpandableSectionDetached} />
+
+### Disclosure variation
+
+You can pass in the `displaySize="lg"` property for a disclosure variation styling.
+
+
+import ExpandableSectionDisclosure from "./ExpandableSectionDisclosure.tsx?raw"
+
+<LiveExample src={ExpandableSectionDisclosure} />
+
+### Indented expandable content
+
+You can indent the expandable content by passing in the `isIndented` property. This will not affect the expandable toggle.
+
+
+import ExpandableSectionIndented from "./ExpandableSectionIndented.tsx?raw"
+
+<LiveExample src={ExpandableSectionIndented} />
+
+### With custom toggle content
+
+By using the `toggleContent` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button.
+
+
+import ExpandableSectionCustomToggle from "./ExpandableSectionCustomToggle.tsx?raw"
+
+<LiveExample src={ExpandableSectionCustomToggle} />
+
+### Truncate expansion
+
+By passing in `variant="truncate"`, the expandable content will be visible up to a maximum number of lines before being truncated, with the toggle revealing or hiding the truncated content. By default the expandable content will truncate after 3 lines, and this can be customized by also passing in the `truncateMaxLines` prop.
+
+
+import ExpandableSectionTruncateExpansion from "./ExpandableSectionTruncateExpansion.tsx?raw"
+
+<LiveExample src={ExpandableSectionTruncateExpansion} />

package/dist/docs/api/v6/components/form/html

@@ -0,0 +1,139 @@
+## Examples
+
+### Vertically aligned labels
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Horizontally aligned labels
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Horizontal layout at a custom breakpoint
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Form sections
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Help text
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Label with additional info
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Label with additional info (horizontal form)
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Action group
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Field group (non-expandable)
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Expandable and nested field groups
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+## 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-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
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `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-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-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-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/dist/docs/api/v6/components/form/html-demos

@@ -0,0 +1,36 @@
+## Demos
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Horizontal
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Grid
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Sections with repeatable fields
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Complex form
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />

package/dist/docs/api/v6/components/form/react

@@ -0,0 +1,94 @@
+## Examples
+
+When using helper text inside a `FormGroup`, the `HelperText` component should be wrapped with the `FormHelperText` component to provide additional spacing.
+
+### Basic
+
+
+import FormBasic from "./FormBasic.tsx?raw"
+
+<LiveExample src={FormBasic} />
+
+### Horizontal
+
+
+import FormHorizontal from "./FormHorizontal.tsx?raw"
+
+<LiveExample src={FormHorizontal} />
+
+### Limit width
+
+
+import FormLimitWidth from "./FormLimitWidth.tsx?raw"
+
+<LiveExample src={FormLimitWidth} />
+
+### Invalid
+
+
+import FormInvalid from "./FormInvalid.tsx?raw"
+
+<LiveExample src={FormInvalid} />
+
+### Invalid with form alert
+
+
+import FormInvalidWithFormAlert from "./FormInvalidWithFormAlert.tsx?raw"
+
+<LiveExample src={FormInvalidWithFormAlert} />
+
+### Validated
+
+
+import FormValidated from "./FormValidated.tsx?raw"
+
+<LiveExample src={FormValidated} />
+
+### Horizontal stacked no padding top
+
+
+import FormHorizontalStacked from "./FormHorizontalStacked.tsx?raw"
+
+<LiveExample src={FormHorizontalStacked} />
+
+### Horizontal stacked helper text on top
+
+
+import FormHorizontalHelper from "./FormHorizontalHelper.tsx?raw"
+
+<LiveExample src={FormHorizontalHelper} />
+
+### Form group with additional label info
+
+
+import FormGroupLabelInfo from "./FormGroupLabelInfo.tsx?raw"
+
+<LiveExample src={FormGroupLabelInfo} />
+
+### Form Sections
+
+
+import FormSections from "./FormSections.tsx?raw"
+
+<LiveExample src={FormSections} />
+
+### Grid form
+
+
+import FormGrid from "./FormGrid.tsx?raw"
+
+<LiveExample src={FormGrid} />
+
+### Field Groups
+
+
+import FormFieldGroups from "./FormFieldGroups.tsx?raw"
+
+<LiveExample src={FormFieldGroups} />
+
+### Form state
+
+
+import FormState from "./FormState.tsx?raw"
+
+<LiveExample src={FormState} />

package/dist/docs/api/v6/components/form-control/html

@@ -0,0 +1,57 @@
+## Examples
+
+### Input
+
+**Note:** In webkit browsers, inputs with status icons that are autocompleted will have their icons removed by the user agent stylesheet. If the field does not need to use autocomplete, turn it off with `autocomplete="off"` to avoid the problem. Otherwise, use [helper text](/components/helper-text/html-demos)  instead to ensure that the status will remain visible if the field is autocompleted.
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Select
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Textarea
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+## Documentation
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `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-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/dist/docs/api/v6/components/form-select/react

@@ -0,0 +1,29 @@
+## Examples
+
+### Basic
+
+
+import FormSelectBasic from "./FormSelectBasic.tsx?raw"
+
+<LiveExample src={FormSelectBasic} />
+
+### Validated
+
+
+import FormSelectValidated from "./FormSelectValidated.tsx?raw"
+
+<LiveExample src={FormSelectValidated} />
+
+### Disabled
+
+
+import FormSelectDisabled from "./FormSelectDisabled.tsx?raw"
+
+<LiveExample src={FormSelectDisabled} />
+
+### Grouped
+
+
+import FormSelectGrouped from "./FormSelectGrouped.tsx?raw"
+
+<LiveExample src={FormSelectGrouped} />

package/dist/docs/api/v6/components/helper-text/html

@@ -0,0 +1,51 @@
+## Examples
+
+### Static
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Icon
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Multiple static
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Dynamic
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Dynamic list
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.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/dist/docs/api/v6/components/helper-text/html-demos

@@ -0,0 +1,12 @@
+## Examples
+
+### Helper text on a form
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+## Documentation
+
+When adding helper text to a form field, place it within the form helper text element.

package/dist/docs/api/v6/components/helper-text/react

@@ -0,0 +1,24 @@
+## Examples
+
+### Basic
+
+
+import HelperTextBasic from "./HelperTextBasic.tsx?raw"
+
+<LiveExample src={HelperTextBasic} />
+
+### With custom icons
+
+
+import HelperTextWithCustomIcon from "./HelperTextWithCustomIcon.tsx?raw"
+
+<LiveExample src={HelperTextWithCustomIcon} />
+
+### Multiple items
+
+You can pass multiple `<HelperTextItem>` components inside a single `<Helpertext>` container.
+
+
+import HelperTextMultipleItems from "./HelperTextMultipleItems.tsx?raw"
+
+<LiveExample src={HelperTextMultipleItems} />

package/dist/docs/api/v6/components/hint/html

@@ -0,0 +1,35 @@
+## Examples
+
+### Hint with title
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Default with no title
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Actions with no offset
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+## Documentation
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.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. |
+| `.pf-m-no-offset` | `.pf-v6-c-hint__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the hint title. |

package/dist/docs/api/v6/components/hint/react

@@ -0,0 +1,28 @@
+## Examples
+
+### Basic with title
+
+
+import HintBasicWithTitle from "./HintBasicWithTitle.tsx?raw"
+
+<LiveExample src={HintBasicWithTitle} />
+
+### Basic without title
+
+
+import HintBasicWithoutTitle from "./HintBasicWithoutTitle.tsx?raw"
+
+<LiveExample src={HintBasicWithoutTitle} />
+
+### With actions
+
+You can add actions to a hint to allow users to respond to suggestions and initiate any related processes.
+
+When a `<Hint>` contains `actions`, a negative margin is applied to the actions so that they are better aligned with the hint title. For larger-sized titles or non-plain actions (such as a button), remove this negative margin by setting `hasNoActionsOffset` to `true`.
+
+To illustrate this behavior, select the "actions hasNoActionsOffset" checkbox in the following example.
+
+
+import HintActionsWithNoOffset from "./HintActionsWithNoOffset.tsx?raw"
+
+<LiveExample src={HintActionsWithNoOffset} />