@patternfly/patternfly 5.0.0-alpha.14 → 5.0.0-alpha.19

package/docs/components/AppLauncher/examples/application-launcher.md

@@ -657,40 +657,40 @@ cssPrefix: pf-c-app-launcher
 
 ### Accessibility
 
-| Attribute                           | Applied                                           | Outcome                                                                                                            |
-| ----------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `aria-label="Application launcher"` | `.pf-c-app-launcher`                              | Gives the app launcher element an accessible name. **Required**                                                    |
-| `aria-expanded="false"`             | `.pf-c-button`                                    | Indicates that the menu is hidden.                                                                                 |
-| `aria-expanded="true"`              | `.pf-c-button`                                    | Indicates that the menu is visible.                                                                                |
-| `aria-label="Actions"`              | `.pf-c-button`                                    | Provides an accessible name for the app launcher when an icon is used. **Required**                                |
-| `hidden`                            | `.pf-c-app-launcher__menu`                        | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
-| `disabled`                          | `.pf-c-app-launcher__toggle`                      | Disables the app launcher toggle and removes it from keyboard focus.                                               |
-| `disabled`                          | `button.pf-c-app-launcher__menu-item`             | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus.     |
-| `aria-disabled="true"`              | `a.pf-c-app-launcher__menu-item`                  | When the menu item uses a link element, indicates that it is unavailable.                                          |
-| `tabindex="-1"`                     | `a.pf-c-app-launcher__menu-item`                  | When the menu item uses a link element, removes it from keyboard focus.                                            |
-| `aria-hidden="true"`                | `.pf-c-app-launcher__menu-item-external-icon > *` | Hides the icon from assistive technologies.                                                                        |
+| Attribute | Applied | Outcome |
+| -- | -- | -- |
+| `aria-label="Application launcher"` | `.pf-c-app-launcher` |  Gives the app launcher element an accessible name. **Required** |
+| `aria-expanded="false"` | `.pf-c-button` |  Indicates that the menu is hidden. |
+| `aria-expanded="true"` | `.pf-c-button` |  Indicates that the menu is visible. |
+| `aria-label="Actions"` | `.pf-c-button` | Provides an accessible name for the app launcher when an icon is used. **Required** |
+| `hidden` | `.pf-c-app-launcher__menu` | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
+| `disabled` | `.pf-c-app-launcher__toggle` | Disables the app launcher toggle and removes it from keyboard focus. |
+| `disabled` | `button.pf-c-app-launcher__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
+| `aria-disabled="true"` | `a.pf-c-app-launcher__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
+| `tabindex="-1"` | `a.pf-c-app-launcher__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
+| `aria-hidden="true"` | `.pf-c-app-launcher__menu-item-external-icon > *` | Hides the icon from assistive technologies. |
 
 ### Usage
 
-| Class                                         | Applied                                                                      | Outcome                                                                                                |
-| --------------------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `.pf-c-app-launcher`                          | `<nav>`                                                                      | Defines the parent wrapper of the app launcher.                                                        |
-| `.pf-c-app-launcher__toggle`                  | `<button>`                                                                   | Defines the app launcher toggle.                                                                       |
-| `.pf-c-app-launcher__menu`                    | `<ul>`, `<div>`                                                              | Defines the parent wrapper of the menu items. Use a `<div>` if your app launcher has groups.           |
-| `.pf-c-app-launcher__menu-search`             | `<div>`                                                                      | Defines the wrapper for the search input.                                                              |
-| `.pf-c-app-launcher__group`                   | `<section>`                                                                  | Defines a group of items. Required when there is more than one group.                                  |
-| `.pf-c-app-launcher__group-title`             | `<h1>`                                                                       | Defines a title for a group of items.                                                                  |
-| `.pf-c-app-launcher__menu-wrapper`            | `<li>`                                                                       | Defines a menu wrapper for use with multiple actionable items in a single item row.                    |
-| `.pf-c-app-launcher__menu-item`               | `<a>`, `<button>`                                                            | Defines a menu item.                                                                                   |
-| `.pf-c-app-launcher__menu-item-icon`          | `<span>`                                                                     | Defines the wrapper for the menu item icon.                                                            |
-| `.pf-c-app-launcher__menu-item-external-icon` | `<span>`                                                                     | Defines the wrapper for the external link icon that appears on hover/focus. Use with `.pf-m-external`. |
-| `.pf-m-expanded`                              | `.pf-c-app-launcher`                                                         | Modifies for the expanded state.                                                                       |
-| `.pf-m-top`                                   | `.pf-c-app-launcher`                                                         | Modifies to display the menu above the toggle.                                                         |
-| `.pf-m-align-right`                           | `.pf-c-app-launcher__menu`                                                   | Modifies to display the menu aligned to the right edge of the toggle.                                  |
-| `.pf-m-static`                                | `.pf-c-app-launcher__menu`                                                   | Modifies to position the menu statically to support custom positioning.                                |
-| `.pf-m-disabled`                              | `a.pf-c-app-launcher__menu-item`                                             | Modifies to display the menu item as disabled.                                                         |
-| `.pf-m-external`                              | `.pf-c-app-launcher__menu-item`                                              | Modifies to display the menu item as having an external link icon on hover/focus.                      |
-| `.pf-m-favorite`                              | `.pf-c-app-launcher__menu-wrapper`                                           | Modifies wrapper to indicate that the item row has been favorited.                                     |
-| `.pf-m-link`                                  | `.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-item` | Modifies item for link styles.                                                                         |
-| `.pf-m-action`                                | `.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-item` | Modifies item to for action styles.                                                                    |
-| `.pf-m-active`                                | `.pf-c-app-launcher__toggle`                                                 | Forces display of the active state of the toggle.                                                      |
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-c-app-launcher` | `<nav>` | Defines the parent wrapper of the app launcher. |
+| `.pf-c-app-launcher__toggle` | `<button>` | Defines the app launcher toggle. |
+| `.pf-c-app-launcher__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. Use a `<div>` if your app launcher has groups. |
+| `.pf-c-app-launcher__menu-search` | `<div>` | Defines the wrapper for the search input. |
+| `.pf-c-app-launcher__group` | `<section>` | Defines a group of items. Required when there is more than one group. |
+| `.pf-c-app-launcher__group-title` | `<h1>` | Defines a title for a group of items. |
+| `.pf-c-app-launcher__menu-wrapper` | `<li>` | Defines a menu wrapper for use with multiple actionable items in a single item row. |
+| `.pf-c-app-launcher__menu-item` | `<a>`, `<button>` | Defines a menu item. |
+| `.pf-c-app-launcher__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
+| `.pf-c-app-launcher__menu-item-external-icon` | `<span>` | Defines the wrapper for the external link icon that appears on hover/focus. Use with `.pf-m-external`. |
+| `.pf-m-expanded` | `.pf-c-app-launcher` | Modifies for the expanded state. |
+| `.pf-m-top` | `.pf-c-app-launcher` | Modifies to display the menu above the toggle. |
+| `.pf-m-align-right` | `.pf-c-app-launcher__menu` | Modifies to display the menu aligned to the right edge of the toggle. |
+| `.pf-m-static` | `.pf-c-app-launcher__menu` | Modifies to position the menu statically to support custom positioning. |
+| `.pf-m-disabled` | `a.pf-c-app-launcher__menu-item` | Modifies to display the menu item as disabled. |
+| `.pf-m-external` | `.pf-c-app-launcher__menu-item` | Modifies to display the menu item as having an external link icon on hover/focus. |
+| `.pf-m-favorite` | `.pf-c-app-launcher__menu-wrapper` | Modifies wrapper to indicate that the item row has been favorited. |
+| `.pf-m-link` | `.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-item` | Modifies item for link styles. |
+| `.pf-m-action` | `.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-item` | Modifies item to for action styles. |
+| `.pf-m-active` | `.pf-c-app-launcher__toggle` | Forces display of the active state of the toggle. |

package/docs/components/Avatar/examples/Avatar.md

@@ -91,18 +91,18 @@ The avatar component provides a default SVG icon. If an image is used it should
 
 ### Accessibility
 
-| Attribute | Applied to     | Outcome                                                                                   |
-| --------- | -------------- | ----------------------------------------------------------------------------------------- |
-| `alt`     | `.pf-c-avatar` | The alt attribute describes the appearance and function of the avatar image. **Required** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `alt` | `.pf-c-avatar` | The alt attribute describes the appearance and function of the avatar image. **Required** |
 
 ### Usage
 
-| Class                        | Applied to     | Outcome                                                                                                                                                                             |
-| ---------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-avatar`               | `<img>`        | Initiates an avatar image. **Required**                                                                                                                                             |
-| `.pf-m-light`                | `.pf-c-avatar` | Modifies an avatar for use against a light background.                                                                                                                              |
-| `.pf-m-dark`                 | `.pf-c-avatar` | Modifies an avatar for use against a dark background.                                                                                                                               |
-| `.pf-m-sm{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-avatar` | `<img>` |  Initiates an avatar image. **Required** |
+| `.pf-m-light` | `.pf-c-avatar` | Modifies an avatar for use against a light background. |
+| `.pf-m-dark` | `.pf-c-avatar` | Modifies an avatar for use against a dark background. |
+| `.pf-m-sm{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-md{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** This is the default size. |
-| `.pf-m-lg{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
-| `.pf-m-xl{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                |
+| `.pf-m-lg{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-xl{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/components/BackToTop/examples/BackToTop.md

@@ -24,7 +24,7 @@ cssPrefix: pf-c-back-to-top
 
 ### Usage
 
-| Class               | Applied to          | Outcome                                           |
-| ------------------- | ------------------- | ------------------------------------------------- |
-| `.pf-c-back-to-top` | `<div>`             | Initiates the back to top component. **Required** |
-| `.pf-m-hidden`      | `.pf-c-back-to-top` | Modifies the component to be hidden.              |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-back-to-top` | `<div>` | Initiates the back to top component. **Required** |
+| `.pf-m-hidden` | `.pf-c-back-to-top` | Modifies the component to be hidden. |

package/docs/components/Backdrop/examples/Backdrop.md

@@ -19,7 +19,7 @@ This component puts a backdrop over the entire viewport.
 
 ### Usage
 
-| Class                  | Applied to | Outcome                                                                                                                                                    |
-| ---------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-backdrop`       | `<div>`    | Initiates backdrop. **Required**                                                                                                                           |
-| `.pf-c-backdrop__open` | `<body>`   | Lock scrolling when backdrop is active. This class should be set on `<body>` while backdrop is active and removed while backdrop is inactive. **Required** |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-backdrop` | `<div>` |  Initiates backdrop. **Required** |
+| `.pf-c-backdrop__open` | `<body>` |  Lock scrolling when backdrop is active. This class should be set on `<body>` while backdrop is active and removed while backdrop is inactive. **Required** |

package/docs/components/BackgroundImage/examples/BackgroundImage.md

@@ -42,7 +42,7 @@ This component puts an image on the background with an svg filter applied to it.
 
 ### Usage
 
-| Class                            | Applied to | Outcome                                                            |
-| -------------------------------- | ---------- | ------------------------------------------------------------------ |
-| `.pf-c-background-image`         | `*`        | A fixed background image is applied to the background of the page. |
-| `.pf-c-background-image__filter` | `*`        | The inline svg that provides the filter for the background image.  |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-background-image` | `*` |  A fixed background image is applied to the background of the page. |
+| `.pf-c-background-image__filter` | `*` |  The inline svg that provides the filter for the background image. |

package/docs/components/Badge/examples/Badge.md

@@ -32,8 +32,8 @@ Always add a modifier class. Never use the class `.pf-c-badge` on its own.
 
 ### Usage
 
-| Class          | Applied to    | Outcome                                                  |
-| -------------- | ------------- | -------------------------------------------------------- |
-| `.pf-c-badge`  | `<span>`      | Initiates a badge. **Always use with a modifier class.** |
-| `.pf-m-read`   | `.pf-c-badge` | Applies read badge styling.                              |
-| `.pf-m-unread` | `.pf-c-badge` | Applies unread badge styling.                            |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** |
+| `.pf-m-read` | `.pf-c-badge` | Applies read badge styling. |
+| `.pf-m-unread` | `.pf-c-badge` | Applies unread badge styling. |

package/docs/components/Banner/examples/Banner.md

@@ -151,11 +151,11 @@ Add a modifier class to the default banner to change the presentation: `.pf-m-bl
 
 ### Usage
 
-| Class          | Applied to     | Outcome                                                   |
-| -------------- | -------------- | --------------------------------------------------------- |
-| `.pf-c-banner` | `<div>`        | Initiates a banner. **Required**                          |
-| `.pf-m-blue`   | `.pf-c-banner` | Modifies banner for blue styling.                         |
-| `.pf-m-red`    | `.pf-c-banner` | Modifies banner for red styling.                          |
-| `.pf-m-green`  | `.pf-c-banner` | Modifies banner for green styling.                        |
-| `.pf-m-gold`   | `.pf-c-banner` | Modifies banner for gold styling.                         |
-| `.pf-m-sticky` | `.pf-c-banner` | Modifies banner to be sticky to the top of its container. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-banner` | `<div>` |  Initiates a banner. **Required** |
+| `.pf-m-blue` | `.pf-c-banner` |  Modifies banner for blue styling. |
+| `.pf-m-red` | `.pf-c-banner` |  Modifies banner for red styling. |
+| `.pf-m-green` | `.pf-c-banner` |  Modifies banner for green styling. |
+| `.pf-m-gold` | `.pf-c-banner` |  Modifies banner for gold styling. |
+| `.pf-m-sticky` | `.pf-c-banner` |  Modifies banner to be sticky to the top of its container. |

package/docs/components/Brand/examples/Brand.md

@@ -50,15 +50,15 @@ Simple brand component.
 
 ### Accessibility
 
-| Attribute | Applied to    | Outcome                                                                                                    |
-| --------- | ------------- | ---------------------------------------------------------------------------------------------------------- |
-| `alt`     | `.pf-c-brand` | The alt attribute specifies an alternate text for an image, if the image cannot be displayed. **Required** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `alt` | `.pf-c-brand` | The alt attribute specifies an alternate text for an image, if the image cannot be displayed. **Required** |
 
 ### Usage
 
-| Class                                              | Applied to         | Outcome                                                                                                                                             |
-| -------------------------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-brand`                                      | `<img>, <picture>` | Initiates a brand image. **Required**                                                                                                               |
-| `.pf-m-picture`                                    | `.pf-c-brand`      | Modifies a brand image to a picture.                                                                                                                |
-| `--pf-c-brand--Width{-on-[breakpoint]}: {width}`   | `.pf-c-brand`      | Modifies the width value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  |
-| `--pf-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-c-brand`      | Modifies the height value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-brand` | `<img>, <picture>` |  Initiates a brand image. **Required** |
+| `.pf-m-picture` | `.pf-c-brand` |  Modifies a brand image to a picture. |
+| `--pf-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-c-brand` |  Modifies the width value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `--pf-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-c-brand` |  Modifies the height value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/components/Breadcrumb/examples/Breadcrumb.md

@@ -275,26 +275,26 @@ cssPrefix: pf-c-breadcrumb
 
 A breadcrumb is a list of links to display a user's navigational hierarchy. The last item of the breadcrumb list indicates the current page's location.
 
--   `.pf-c-breadcrumb__list` is the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.
+*   `.pf-c-breadcrumb__list` is the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.
 
 In the event that a page does not have a traditional `<h1>` page title, a heading can be included in the breadcrumbs and an optional link within.
 
 ### Accessibility
 
-| Attribute                             | Applied to                                         | Outcome                                           |
-| ------------------------------------- | -------------------------------------------------- | ------------------------------------------------- |
-| `aria-label="[landmark description]"` | `.pf-c-breadcrumb`                                 | Describes `<nav>` landmark.                       |
-| `aria-label="[link name]"`            | `.pf-c-breadcrumb__link`                           | If link has no text (icon), add an aria-label.    |
-| `aria-current="page"`                 | `.pf-c-breadcrumb__item`, `.pf-c-breadcrumb__link` | Indicates the current page within a set of pages. |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label="[landmark description]"` | `.pf-c-breadcrumb` |  Describes `<nav>` landmark. |
+| `aria-label="[link name]"` | `.pf-c-breadcrumb__link` | If link has no text (icon), add an aria-label. |
+| `aria-current="page"` | `.pf-c-breadcrumb__item`, `.pf-c-breadcrumb__link` |  Indicates the current page within a set of pages. |
 
 ### Usage
 
-| Class                            | Applied to               | Outcome                                                |
-| -------------------------------- | ------------------------ | ------------------------------------------------------ |
-| `.pf-c-breadcrumb`               | `<nav>`                  | Initiates a primary breadcrumb element. **Required**   |
-| `.pf-c-breadcrumb__list`         | `<ol>`                   | Initiates default breadcrumb ordered list.             |
-| `.pf-c-breadcrumb__item`         | `<li>`                   | Initiates default breadcrumb list item.                |
-| `.pf-c-breadcrumb__item-divider` | `<span>`                 | Initiates default breadcrumb list item divider.        |
-| `.pf-c-breadcrumb__link`         | `<a>`, `<button>`        | Initiates default breadcrumb list link.                |
-| `.pf-c-breadcrumb__title`        | `<h1>`                   | Initiates breadcrumb header.                           |
-| `.pf-m-current`                  | `.pf-c-breadcrumb__link` | Modifies to display the list item as the current item. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-breadcrumb` | `<nav>` | Initiates a primary breadcrumb element. **Required** |
+| `.pf-c-breadcrumb__list` | `<ol>` | Initiates default breadcrumb ordered list. |
+| `.pf-c-breadcrumb__item` | `<li>` | Initiates default breadcrumb list item. |
+| `.pf-c-breadcrumb__item-divider` | `<span>` | Initiates default breadcrumb list item divider. |
+| `.pf-c-breadcrumb__link` | `<a>`, `<button>` | Initiates default breadcrumb list link. |
+| `.pf-c-breadcrumb__title` | `<h1>` | Initiates breadcrumb header. |
+| `.pf-m-current` | `.pf-c-breadcrumb__link` | Modifies to display the list item as the current item. |

package/docs/components/Button/examples/Button.md

@@ -479,41 +479,41 @@ Semantic buttons and links are important for usability as well as accessibility.
 
 ### Accessibility
 
-| Attribute                          | Applied to                                                                            | Outcome                                                                                                                                                                                        |
-| ---------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `aria-pressed="true or false"`     | `.pf-c-button`                                                                        | Indicates that the button is a toggle. When set to "true", `pf-m-active` should also be set so that the button displays in an active state. **Required when button is a toggle**               |
-| `aria-label="[button label text]"` | `.pf-c-button.pf-m-plain`                                                             | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text**                                                        |
-| `aria-label="[descriptive text]"`  | `a.pf-c-button`, `span.pf-c-button.pf-m-link.pf-m-inline`                             | The button component's text should adequately describe its purpose. If it does not, `aria-label` can provide more detailed interaction information.                                            |
-| `disabled`                         | `button.pf-c-button`                                                                  | When a button element is used, indicates that it is unavailable and removes it from keyboard focus. **Required when button is disabled**                                                       |
-| `aria-disabled="true"`             | `button.pf-c-button`                                                                  | When a button element is used, indicates that it is unavailable but does not prevent keyboard or hover interactions. Used when a disabled button provides interactive elements like a tooltip. |
-| `aria-disabled="true"`             | `a.pf-c-button.pf-m-disabled`, `span.pf-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, indicates that it is unavailable. **Required when element is disabled**                                                                                     |
-| `aria-expanded="true"`             | `.pf-c-button.pf-m-expanded`                                                          | Indicates that the expanded content element is visible. **Required**                                                                                                                           |
-| `tabindex="-1"`                    | `a.pf-c-button.pf-m-disabled`, `span.pf-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, removes it from keyboard focus. **Required when element is disabled**                                                                                       |
-| `tabindex="0"`                     | `span.pf-c-button.pf-m-link.pf-m-inline`                                              | Inserts the span into the tab order of the page so that it is focusable. **Required when the element is a span**                                                                               |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-pressed="true or false"` | `.pf-c-button` | Indicates that the button is a toggle. When set to "true", `pf-m-active` should also be set so that the button displays in an active state. **Required when button is a toggle** |
+| `aria-label="[button label text]"` | `.pf-c-button.pf-m-plain` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text** |
+| `aria-label="[descriptive text]"` | `a.pf-c-button`, `span.pf-c-button.pf-m-link.pf-m-inline` | The button component's text should adequately describe its purpose. If it does not, `aria-label` can provide more detailed interaction information. |
+| `disabled` | `button.pf-c-button` | When a button element is used, indicates that it is unavailable and removes it from keyboard focus. **Required when button is disabled** |
+| `aria-disabled="true"` | `button.pf-c-button` | When a button element is used, indicates that it is unavailable but does not prevent keyboard or hover interactions. Used when a disabled button provides interactive elements like a tooltip. |
+| `aria-disabled="true"` | `a.pf-c-button.pf-m-disabled`, `span.pf-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, indicates that it is unavailable. **Required when element is disabled** |
+| `aria-expanded="true"` | `.pf-c-button.pf-m-expanded` | Indicates that the expanded content element is visible. **Required** |
+| `tabindex="-1"` | `a.pf-c-button.pf-m-disabled`, `span.pf-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, removes it from keyboard focus. **Required when element is disabled** |
+| `tabindex="0"` | `span.pf-c-button.pf-m-link.pf-m-inline` | Inserts the span into the tab order of the page so that it is focusable. **Required when the element is a span** |
 
 ### Usage
 
-| Class                    | Applied to                              | Outcome                                                                                                                                                                                                                     |
-| ------------------------ | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-button`           | `<button>`                              | Initiates a button. Always use it with a modifier class. **Required**                                                                                                                                                       |
-| `.pf-c-button__icon`     | `<span>`                                | Initiates a button icon.                                                                                                                                                                                                    |
-| `.pf-c-button__progress` | `<span>`                                | Initiates a button progress container.                                                                                                                                                                                      |
-| `.pf-c-button__count`    | `<span>`                                | Initiates a button count container. **Note:** Count should only be used on link buttons.                                                                                                                                    |
-| `.pf-m-primary`          | `.pf-c-button`                          | Modifies for primary styles.                                                                                                                                                                                                |
-| `.pf-m-secondary`        | `.pf-c-button`                          | Modifies for secondary styles.                                                                                                                                                                                              |
-| `.pf-m-tertiary`         | `.pf-c-button`                          | Modifies for tertiary styles.                                                                                                                                                                                               |
-| `.pf-m-danger`           | `.pf-c-button`                          | Modifies for danger styles.                                                                                                                                                                                                 |
-| `.pf-m-link`             | `.pf-c-button`                          | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon.                                                             |
-| `.pf-m-plain`            | `.pf-c-button`                          | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, etc.                                                |
-| `.pf-m-inline`           | `.pf-c-button.pf-m-link`                | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a `<span>`, the text will flow inline with text around it. |
-| `.pf-m-block`            | `.pf-c-button`                          | Creates a block level button.                                                                                                                                                                                               |
-| `.pf-m-control`          | `.pf-c-button`                          | Modifies for control styles. **Note:** This modifier should only be used when using buttons in the Input Group or Clipboard Copy components.                                                                                |
-| `.pf-m-expanded`         | `.pf-c-button.pf-m-control`             | Modifies a control button for the expanded state.                                                                                                                                                                           |
-| `.pf-m-start`            | `.pf-c-button__icon`                    | Applies right spacing to an icon inside of a button when the icon comes before text.                                                                                                                                        |
-| `.pf-m-end`              | `.pf-c-button__icon`                    | Applies left spacing to an icon inside of a button when the icon comes after text.                                                                                                                                          |
-| `.pf-m-active`           | `.pf-c-button`                          | Forces display of the active state of the button. This modifier should be used when `aria-pressed` is set to true so that the button displays in an active state.                                                           |
-| `.pf-m-small`            | `.pf-c-button`                          | Modifies the button so that it has small font size.                                                                                                                                                                         |
-| `.pf-m-aria-disabled`    | `.pf-c-button`                          | Modifies a button to be visually disabled, yet is still focusable.                                                                                                                                                          |
-| `.pf-m-display-lg`       | `.pf-c-button`, `pf-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles.                                                                                           |
-| `.pf-m-progress`         | `.pf-c-button`                          | Indicates that the button supports the progress state. **Note:** Not used with the plain variation.                                                                                                                         |
-| `.pf-m-in-progress`      | `.pf-c-button`                          | Indicates that the button is in the in progress state.                                                                                                                                                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-button` | `<button>` |  Initiates a button. Always use it with a modifier class. **Required** |
+| `.pf-c-button__icon` | `<span>` | Initiates a button icon. |
+| `.pf-c-button__progress` | `<span>` | Initiates a button progress container. |
+| `.pf-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons.|
+| `.pf-m-primary` | `.pf-c-button` | Modifies for primary styles. |
+| `.pf-m-secondary` | `.pf-c-button` | Modifies for secondary styles. |
+| `.pf-m-tertiary` | `.pf-c-button` | Modifies for tertiary styles. |
+| `.pf-m-danger` | `.pf-c-button` | Modifies for danger styles. |
+| `.pf-m-link` | `.pf-c-button` | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon. |
+| `.pf-m-plain` | `.pf-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, etc. |
+| `.pf-m-inline` | `.pf-c-button.pf-m-link` | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a `<span>`, the text will flow inline with text around it. |
+| `.pf-m-block` | `.pf-c-button` | Creates a block level button. |
+| `.pf-m-control` | `.pf-c-button` | Modifies for control styles. **Note:** This modifier should only be used when using buttons in the Input Group or Clipboard Copy components. |
+| `.pf-m-expanded` | `.pf-c-button.pf-m-control` | Modifies a control button for the expanded state. |
+| `.pf-m-start` | `.pf-c-button__icon` | Applies right spacing to an icon inside of a button when the icon comes before text. |
+| `.pf-m-end` | `.pf-c-button__icon` | Applies left spacing to an icon inside of a button when the icon comes after text. |
+| `.pf-m-active` | `.pf-c-button` | Forces display of the active state of the button. This modifier should be used when `aria-pressed` is set to true so that the button displays in an active state. |
+| `.pf-m-small` | `.pf-c-button` | Modifies the button so that it has small font size. |
+| `.pf-m-aria-disabled` | `.pf-c-button` | Modifies a button to be visually disabled, yet is still focusable. |
+| `.pf-m-display-lg` | `.pf-c-button`, `pf-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles. |
+| `.pf-m-progress` | `.pf-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
+| `.pf-m-in-progress` | `.pf-c-button` | Indicates that the button is in the in progress state. |

package/docs/components/CalendarMonth/examples/CalendarMonth.md

@@ -1597,38 +1597,38 @@ cssPrefix: pf-c-calendar-month
 
 ### Accessibility
 
-| Attribute                            | Applied to                                                   | Outcome                                                                                                             |
-| ------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `aria-hidden="true"`                 | `.pf-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required**                                                |
-| `aria-hidden="true"`                 | `.pf-c-calendar-month__day > span`                           | Hides the visual day of the month label from assistive technologies. **Required**                                   |
-| `.pf-screen-reader`                  | `.pf-c-calendar-month__day > span`                           | Hides the full day of the month text visually. **Required**                                                         |
-| `aria-label="[Prev/Next] month"`     | `.pf-c-calendar-month__header-nav-control`                   | Provides an accessible label for the nav controls. **Required**                                                     |
-| `disabled`                           | `.pf-c-calendar-month__date`                                 | Indicates that a date is selected. **Required when the parent is `.pf-c-calendar-month__dates-cell.pf-m-disabled`** |
-| `aria-label="[date] [month] [year]"` | `.pf-c-calendar-month__date`                                 | Provides an accessible label for the date button. **Required**                                                      |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-hidden="true"` | `.pf-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required** |
+| `aria-hidden="true"` | `.pf-c-calendar-month__day > span` | Hides the visual day of the month label from assistive technologies. **Required** |
+| `.pf-screen-reader` | `.pf-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
+| `aria-label="[Prev/Next] month"` | `.pf-c-calendar-month__header-nav-control` | Provides an accessible label for the nav controls. **Required** |
+| `disabled` | `.pf-c-calendar-month__date` | Indicates that a date is selected. **Required when the parent is `.pf-c-calendar-month__dates-cell.pf-m-disabled`** |
+| `aria-label="[date] [month] [year]"` | `.pf-c-calendar-month__date` | Provides an accessible label for the date button. **Required** |
 
 ### Usage
 
-| Class                                      | Applied to                                 | Outcome                                                       |
-| ------------------------------------------ | ------------------------------------------ | ------------------------------------------------------------- |
-| `.pf-c-calendar-month`                     | `<div>`                                    | Initiates the calendar month component. **Required**          |
-| `.pf-c-calendar-month__header`             | `<div>`                                    | Initiates the calendar month header. **Required**             |
-| `.pf-c-calendar-month__header-nav-control` | `<div>`                                    | Initiates a nav control for navigating by month. **Required** |
-| `.pf-c-calendar-month__header-month`       | `<div>`                                    | Initiates the month select. **Required**                      |
-| `.pf-c-calendar-month__header-year`        | `<div>`                                    | Initiates the year input. **Required**                        |
-| `.pf-c-calendar-month__calendar`           | `<table>`                                  | Initiates the calendar. **Required**                          |
-| `.pf-c-calendar-month__days`               | `<thead>`                                  | Initiates the calendar days section. **Required**             |
-| `.pf-c-calendar-month__days-row`           | `<tr>`                                     | Initiates the calendar days row. **Required**                 |
-| `.pf-c-calendar-month__day`                | `<th>`                                     | Initiates a calendar day. **Required**                        |
-| `.pf-c-calendar-month__dates`              | `<tbody>`                                  | Initiates the calendar dates section. **Required**            |
-| `.pf-c-calendar-month__dates-row`          | `<tr>`                                     | Initiates a calendar dates row. **Required**                  |
-| `.pf-c-calendar-month__dates-cell`         | `<td>`                                     | Initiates a calendar date cell. **Required**                  |
-| `.pf-c-calendar-month__date`               | `<button>`                                 | Initiates a calendar date. **Required**                       |
-| `.pf-m-prev-month`                         | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the previous month. **Required**   |
-| `.pf-m-next-month`                         | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the next month. **Required**       |
-| `.pf-m-current`                            | `.pf-c-calendar-month__dates-cell`         | Indicates a date is the current day. **Required**             |
-| `.pf-m-selected`                           | `.pf-c-calendar-month__dates-cell`         | Indicates a date is selected.                                 |
-| `.pf-m-start-range`                        | `.pf-c-calendar-month__dates-cell`         | Indicates a date is the start of a range.                     |
-| `.pf-m-in-range`                           | `.pf-c-calendar-month__dates-cell`         | Indicates a date is in a range.                               |
-| `.pf-m-end-range`                          | `.pf-c-calendar-month__dates-cell`         | Indicates a date is the end of a range.                       |
-| `.pf-m-adjacent-month`                     | `.pf-c-calendar-month__dates-cell`         | Indicates a date is in an adjacent month.                     |
-| `.pf-m-disabled`                           | `.pf-c-calendar-month__dates-cell`         | Indicates a date is disabled and unavailable.                 |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-calendar-month` | `<div>` | Initiates the calendar month component. **Required** |
+| `.pf-c-calendar-month__header` | `<div>` | Initiates the calendar month header. **Required** |
+| `.pf-c-calendar-month__header-nav-control` | `<div>` | Initiates a nav control for navigating by month. **Required** |
+| `.pf-c-calendar-month__header-month` | `<div>` | Initiates the month select. **Required** |
+| `.pf-c-calendar-month__header-year` | `<div>` | Initiates the year input. **Required** |
+| `.pf-c-calendar-month__calendar` | `<table>` | Initiates the calendar. **Required** |
+| `.pf-c-calendar-month__days` | `<thead>` | Initiates the calendar days section. **Required** |
+| `.pf-c-calendar-month__days-row` | `<tr>` | Initiates the calendar days row. **Required** |
+| `.pf-c-calendar-month__day` | `<th>` | Initiates a calendar day. **Required** |
+| `.pf-c-calendar-month__dates` | `<tbody>` | Initiates the calendar dates section. **Required** |
+| `.pf-c-calendar-month__dates-row` | `<tr>` | Initiates a calendar dates row. **Required** |
+| `.pf-c-calendar-month__dates-cell` | `<td>` | Initiates a calendar date cell. **Required** |
+| `.pf-c-calendar-month__date` | `<button>` | Initiates a calendar date. **Required** |
+| `.pf-m-prev-month` | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the previous month. **Required** |
+| `.pf-m-next-month` | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the next month. **Required** |
+| `.pf-m-current` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the current day. **Required** |
+| `.pf-m-selected` | `.pf-c-calendar-month__dates-cell` | Indicates a date is selected. |
+| `.pf-m-start-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the start of a range. |
+| `.pf-m-in-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is in a range. |
+| `.pf-m-end-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the end of a range. |
+| `.pf-m-adjacent-month` | `.pf-c-calendar-month__dates-cell` | Indicates a date is in an adjacent month. |
+| `.pf-m-disabled` | `.pf-c-calendar-month__dates-cell` | Indicates a date is disabled and unavailable. |

package/docs/components/Card/examples/Card.md

@@ -906,30 +906,30 @@ A card is a generic rectangular container that can be used to build other compon
 
 ### Usage
 
-| Class                            | Applied                             | Outcome                                                                                                                                                                                             |
-| -------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-card`                     | `<div>`                             | Creates a card component.  **Required**                                                                                                                                                             |
-| `.pf-c-card__title`              | `<div>`                             | Creates the title of a card.                                                                                                                                                                        |
-| `.pf-c-card__body`               | `<div>`                             | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-c-card__body` elements.                                                   |
-| `.pf-c-card__footer`             | `<div>`                             | Creates the footer of a card.                                                                                                                                                                       |
-| `.pf-c-card__header`             | `<div>`                             | Creates the header of the card where images, actions, and/or the card title can go.                                                                                                                 |
-| `.pf-c-card__header-toggle`      | `<div>`                             | Creates the expandable card toggle.                                                                                                                                                                 |
-| `.pf-c-card__header-toggle-icon` | `<span>`                            | Creates the expandable card toggle icon.                                                                                                                                                            |
-| `.pf-c-card__actions`            | `<div>`                             | Creates an actions element to be used in the card header.                                                                                                                                           |
-| `.pf-c-card__header-main`        | `<div>`                             | Creates a wrapper element to be used in the card header when using an image, logo, or text. **Required if `.pf-c-card__header` has content outside of a card header toggle or card header actions** |
-| `.pf-c-card__expandable-content` | `<div>`                             | Creates the expandable card's expandable content.                                                                                                                                                   |
-| `.pf-c-card__sr-input`           | `<input>`                           | Creates an input which, when focused, makes a following `.pf-c-card` appear focused.                                                                                                                |
-| `.pf-m-compact`                  | `.pf-c-card`                        | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred.                      |
-| `.pf-m-display-lg`               | `.pf-c-card`                        | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases.                                                             |
-| `.pf-m-no-fill`                  | `.pf-c-card__body`                  | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies.                                                                    |
-| `.pf-m-hoverable-raised`         | `.pf-c-card`                        | Modifies the card to include hover styles on `:hover`.                                                                                                                                              |
-| `.pf-m-selectable-raised`        | `.pf-c-card`                        | Modifies a selectable card so that it is selectable.                                                                                                                                                |
-| `.pf-m-selected-raised`          | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state.                                                                                                                                                  |
-| `.pf-m-non-selectable-raised`    | `.pf-c-card`                        | Modifies a selectable card so that it is not selectable.                                                                                                                                            |
-| `.pf-m-flat`                     | `.pf-c-card`                        | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background.                                                              |
-| `.pf-m-rounded`                  | `.pf-c-card`                        | Modifies the card to have rounded corners.                                                                                                                                                          |
-| `.pf-m-plain`                    | `.pf-c-card`                        | Modifies the card to have no box shadow and no background color.                                                                                                                                    |
-| `.pf-m-expanded`                 | `.pf-c-card`                        | Modifies the card for the expanded state.                                                                                                                                                           |
-| `.pf-m-toggle-right`             | `.pf-c-card__header`                | Modifies the expandable card header toggle to be positioned at flex-end.                                                                                                                            |
-| `.pf-m-full-height`              | `.pf-c-card`                        | Modifies the card to full height of its parent.                                                                                                                                                     |
-| `.pf-m-no-offset`                | `.pf-c-card__actions`               | Removes the negative vertical margins on the actions element intended to align the action content with the card title.                                                                              |
+| Class | Applied | Outcome |
+| ---- | ---- | ---- |
+| `.pf-c-card` | `<div>` | Creates a card component.  **Required** |
+| `.pf-c-card__title` | `<div>` | Creates the title of a card. |
+| `.pf-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-c-card__body` elements. |
+| `.pf-c-card__footer` | `<div>` | Creates the footer of a card. |
+| `.pf-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
+| `.pf-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
+| `.pf-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
+| `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
+| `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. **Required if `.pf-c-card__header` has content outside of a card header toggle or card header actions** |
+| `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
+| `.pf-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-c-card` appear focused. |
+| `.pf-m-compact` | `.pf-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
+| `.pf-m-display-lg` | `.pf-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
+| `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
+| `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
+| `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
+| `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
+| `.pf-m-non-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is not selectable. |
+| `.pf-m-flat` | `.pf-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
+| `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners. |
+| `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color. |
+| `.pf-m-expanded` | `.pf-c-card` | Modifies the card for the expanded state. |
+| `.pf-m-toggle-right` | `.pf-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
+| `.pf-m-full-height` | `.pf-c-card` | Modifies the card to full height of its parent. |
+| `.pf-m-no-offset` | `.pf-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |

package/docs/components/Check/examples/Check.md

@@ -209,20 +209,20 @@ If you extend this component or modify the styles of this component, then make s
 
 ### Accessibility
 
-| Attribute  | Applied to           | Outcome                                                                                                           |
-| ---------- | -------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `disabled` | `.pf-c-check__input` | Indicates that the element is unavailable and removes it from keyboard focus. **Required when input is disabled** |
-| `required` | `.pf-c-check__input` | Indicates that the element is required.                                                                           |
+| `required` | `.pf-c-check__input` | Indicates that the element is required. |
 
 ### Usage
 
-| Class                         | Applied to                | Outcome                                                                                                               |
-| ----------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-check`                 | `<div>`, `<label>`        | Initiates the check component. **Required**                                                                           |
-| `.pf-c-check__input`          | `<input type="checkbox">` | Initiates a check input. **Required**                                                                                 |
-| `.pf-c-check__label`          | `<label>`, `<span>`       | Initiates a label. **Required**                                                                                       |
-| `.pf-c-check__label-required` | `<span>`                  | Initiates a required indicator.                                                                                       |
-| `.pf-c-check__description`    | `<span>`                  | Initiates a check description.                                                                                        |
-| `.pf-c-check__body`           | `<span>`                  | Initiates a check body.                                                                                               |
-| `.pf-m-standalone`            | `.pf-c-check`             | Modifies the check component for use with a standalone `<input type="checkbox">`. **Required when there is no label** |
-| `.pf-m-disabled`              | `.pf-c-check__label`      | Modifies the check component for the disabled state. **Required when input is disabled**                              |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-check` | `<div>`, `<label>` |  Initiates the check component. **Required**  |
+| `.pf-c-check__input` | `<input type="checkbox">` |  Initiates a check input. **Required**  |
+| `.pf-c-check__label` | `<label>`, `<span>` |  Initiates a label. **Required**  |
+| `.pf-c-check__label-required` | `<span>` |  Initiates a required indicator. |
+| `.pf-c-check__description` | `<span>` |  Initiates a check description. |
+| `.pf-c-check__body` | `<span>` |  Initiates a check body. |
+| `.pf-m-standalone` | `.pf-c-check` |  Modifies the check component for use with a standalone `<input type="checkbox">`. **Required when there is no label** |
+| `.pf-m-disabled` | `.pf-c-check__label` |  Modifies the check component for the disabled state. **Required when input is disabled** |