@patternfly/patternfly 5.0.0-alpha.2 → 5.0.0-alpha.20

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

@@ -10,7 +10,7 @@ cssPrefix: pf-c-breadcrumb
 
 ```html
 <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-  <ol class="pf-c-breadcrumb__list">
+  <ol class="pf-c-breadcrumb__list" role="list">
     <li class="pf-c-breadcrumb__item">
       <span class="pf-c-breadcrumb__item-divider">
         <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -48,7 +48,7 @@ cssPrefix: pf-c-breadcrumb
 
 ```html
 <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-  <ol class="pf-c-breadcrumb__list">
+  <ol class="pf-c-breadcrumb__list" role="list">
     <li class="pf-c-breadcrumb__item">
       <span class="pf-c-breadcrumb__item-divider">
         <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -98,7 +98,7 @@ cssPrefix: pf-c-breadcrumb
 
 ```html
 <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-  <ol class="pf-c-breadcrumb__list">
+  <ol class="pf-c-breadcrumb__list" role="list">
     <li class="pf-c-breadcrumb__item">
       <span class="pf-c-breadcrumb__item-divider">
         <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -144,7 +144,7 @@ cssPrefix: pf-c-breadcrumb
 
 ```html
 <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-  <ol class="pf-c-breadcrumb__list">
+  <ol class="pf-c-breadcrumb__list" role="list">
     <li class="pf-c-breadcrumb__item">
       <span class="pf-c-breadcrumb__item-divider">
         <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -235,7 +235,7 @@ cssPrefix: pf-c-breadcrumb
 
 ```html
 <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-  <ol class="pf-c-breadcrumb__list">
+  <ol class="pf-c-breadcrumb__list" role="list">
     <li class="pf-c-breadcrumb__item">
       <span class="pf-c-breadcrumb__item-divider">
         <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -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

@@ -144,10 +144,12 @@ cssPrefix: pf-c-card
         />
       </div>
     </div>
-    <div
-      class="pf-c-card__title"
-      id="card-action-example-2-check-label"
-    >This is a really really really really really really really really really really long title</div>
+    <div class="pf-c-card__header-main">
+      <div
+        class="pf-c-card__title"
+        id="card-action-example-2-check-label"
+      >This is a really really really really really really really really really really long title</div>
+    </div>
   </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
@@ -230,10 +232,12 @@ cssPrefix: pf-c-card
     <div class="pf-c-card__actions pf-m-no-offset">
       <button class="pf-c-button pf-m-primary" type="button">Action</button>
     </div>
-    <h1
-      class="pf-c-title pf-m-2xl"
-      id="card-action-no-offset-check-label"
-    >This is a card title</h1>
+    <div class="pf-c-card__header-main">
+      <h1
+        class="pf-c-title pf-m-2xl"
+        id="card-action-no-offset-check-label"
+      >This is a card title</h1>
+    </div>
   </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
@@ -555,7 +559,9 @@ cssPrefix: pf-c-card
         />
       </div>
     </div>
-    <div class="pf-c-card__title" id="card-expandable-example-title">Title</div>
+    <div class="pf-c-card__header-main">
+      <div class="pf-c-card__title" id="card-expandable-example-title">Title</div>
+    </div>
   </div>
 </div>
 
@@ -579,11 +585,13 @@ cssPrefix: pf-c-card
         </span>
       </button>
     </div>
-    <img
-      src="/assets/images/pf-logo-small.svg"
-      alt="PatternFly logo"
-      width="27px"
-    />
+    <div class="pf-c-card__header-main">
+      <img
+        src="/assets/images/pf-logo-small.svg"
+        alt="PatternFly logo"
+        width="27px"
+      />
+    </div>
     <div class="pf-c-card__actions">
       <div class="pf-c-dropdown">
         <button
@@ -713,7 +721,9 @@ cssPrefix: pf-c-card
         />
       </div>
     </div>
-    <div class="pf-c-card__title" id="card-expanded-example-title">Title</div>
+    <div class="pf-c-card__header-main">
+      <div class="pf-c-card__title" id="card-expanded-example-title">Title</div>
+    </div>
   </div>
   <div class="pf-c-card__expandable-content">
     <div class="pf-c-card__body">Body</div>
@@ -781,7 +791,9 @@ cssPrefix: pf-c-card
         />
       </div>
     </div>
-    <div class="pf-c-card__title" id="card-full-height-example-title">Title</div>
+    <div class="pf-c-card__header-main">
+      <div class="pf-c-card__title" id="card-full-height-example-title">Title</div>
+    </div>
   </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
@@ -847,7 +859,12 @@ cssPrefix: pf-c-card
         />
       </div>
     </div>
-    <div class="pf-c-card__title" id="card-toggle-on-right-example-title">Title</div>
+    <div class="pf-c-card__header-main">
+      <div
+        class="pf-c-card__title"
+        id="card-toggle-on-right-example-title"
+      >Title</div>
+    </div>
     <div class="pf-c-card__header-toggle">
       <button
         class="pf-c-button pf-m-plain"
@@ -889,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.                                                                                    |
-| `.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

@@ -97,22 +97,18 @@ cssPrefix: pf-c-check
     type="checkbox"
     id="check-disabled"
     name="check-disabled"
-    disabled
   />
 
-  <label
-    class="pf-c-check__label pf-m-disabled"
-    for="check-disabled"
-  >Check disabled</label>
+  <label class="pf-c-check__label" for="check-disabled">Check disabled</label>
 </div>
 <div class="pf-c-check">
   <input
     class="pf-c-check__input"
     type="checkbox"
+    disabled
     id="check-disabled-2"
     name="check-disabled-2"
     checked
-    disabled
   />
 
   <label
@@ -213,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** |

package/docs/components/Chip/examples/Chip.md

@@ -80,20 +80,20 @@ A Chip is used to display items that have been filtered or selected from a large
 
 ## Accessibility
 
-| Attribute                                      | Applied to     | Outcome                                                                                                                                                            |
-| ---------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `aria-label="[button label text]"`             | `.pf-c-button` | Provides an accessible name for the button when an icon is used instead of text. Required when an icon is used with no supporting text.                            |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label="[button label text]"` | `.pf-c-button` |  Provides an accessible name for the button when an icon is used instead of text. Required when an icon is used with no supporting text. |
 | `aria-labelledby="[id value of .pf-c-button]"` | `.pf-c-button` | Gives the button an accessible name by referring to the element that provides the position of the button within a list. Required when the button is being removed. |
-| `aria-hidden="true"`                           | `<i>`          | Hides the icon from assistive technologies.                                                                                                                        |
+| `aria-hidden="true"` | `<i>` |  Hides the icon from assistive technologies. |
 
 ## Usage
 
-| Class              | Applied to            | Outcome                                                                         |
-| ------------------ | --------------------- | ------------------------------------------------------------------------------- |
-| `.pf-c-chip`       | `<div>`, `<button>`,  | Initiates the chip component. Use a `<button>` with overflow chips **Required** |
-| `.pf-c-chip__text` | `<span>`              | Initiates the text inside of the chip. **Required**                             |
-| `.pf-c-chip__icon` | `<span>`              | Initiates the icon inside of the chip.                                          |
-| `.pf-c-button`     | `.pf-c-chip <button>` | Initiates the button used to remove the chip.                                   |
-| `.pf-c-badge`      | `<span>`              | Initiates the badge inside the chip.                                            |
-| `.pf-m-overflow`   | `button.pf-c-chip`    | Applies styling of the overflow chip.                                           |
-| `.pf-m-draggable`  | `.pf-c-chip`          | Modifies the chip to be in the draggable state.                                 |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-chip` | `<div>`, `<button>`, | Initiates the chip component. Use a `<button>` with overflow chips **Required** |
+| `.pf-c-chip__text` | `<span>` | Initiates the text inside of the chip. **Required** |
+| `.pf-c-chip__icon` | `<span>` | Initiates the icon inside of the chip. |
+| `.pf-c-button` | `.pf-c-chip <button>` | Initiates the button used to remove the chip. |
+| `.pf-c-badge` | `<span>` | Initiates the badge inside the chip. |
+| `.pf-m-overflow` | `button.pf-c-chip` | Applies styling of the overflow chip. |
+| `.pf-m-draggable` | `.pf-c-chip` | Modifies the chip to be in the draggable state. |