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

package/docs/components/Select/examples/Select.md

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

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

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

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

@@ -8,7 +8,7 @@ cssPrefix: pf-c-simple-list
 
 ```html
 <div class="pf-c-simple-list">
-  <ul class="pf-c-simple-list__list">
+  <ul class="pf-c-simple-list__list" role="list">
     <li class="pf-c-simple-list__item">
       <button
         class="pf-c-simple-list__item-link pf-m-current"
@@ -30,7 +30,7 @@ cssPrefix: pf-c-simple-list
 
 ```html
 <div class="pf-c-simple-list">
-  <ul class="pf-c-simple-list__list">
+  <ul class="pf-c-simple-list__list" role="list">
     <li class="pf-c-simple-list__item">
       <a
         class="pf-c-simple-list__item-link pf-m-current"
@@ -55,7 +55,7 @@ cssPrefix: pf-c-simple-list
 <div class="pf-c-simple-list">
   <section class="pf-c-simple-list__section">
     <h2 class="pf-c-simple-list__title">Title</h2>
-    <ul class="pf-c-simple-list__list">
+    <ul class="pf-c-simple-list__list" role="list">
       <li class="pf-c-simple-list__item">
         <button
           class="pf-c-simple-list__item-link pf-m-current"
@@ -75,7 +75,7 @@ cssPrefix: pf-c-simple-list
   </section>
   <section class="pf-c-simple-list__section">
     <h2 class="pf-c-simple-list__title">Title</h2>
-    <ul class="pf-c-simple-list__list">
+    <ul class="pf-c-simple-list__list" role="list">
       <li class="pf-c-simple-list__item">
         <button class="pf-c-simple-list__item-link" type="button">List item 1</button>
       </li>
@@ -98,18 +98,18 @@ cssPrefix: pf-c-simple-list
 
 ### Accessibility
 
-| Attribute      | Applied to                      | Outcome                                                                               |
-| -------------- | ------------------------------- | ------------------------------------------------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `tabindex="0"` | `a.pf-c-simple-list__item-link` | Inserts the link into the tab order of the page so that it is focusable. **Required** |
 
 ### Usage
 
-| Class                          | Applied to                     | Outcome                                                                                   |
-| ------------------------------ | ------------------------------ | ----------------------------------------------------------------------------------------- |
-| `.pf-c-simple-list`            | `<div>`                        | Initiates a simple list.                                                                  |
-| `.pf-c-simple-list__section`   | `<section>`                    | Initiates a simple list section.                                                          |
-| `.pf-c-simple-list__title`     | `<h2>`                         | Initiates a simple list title.                                                            |
-| `.pf-c-simple-list__list`      | `<ul>`                         | Initiates a simple list unordered list.                                                   |
-| `.pf-c-simple-list__item`      | `<li>`                         | Initiates a simple list item.                                                             |
-| `.pf-c-simple-list__item-link` | `<button>`, `<a>`              | Initiates a simple list item link. It can be a button or a link depending on the context. |
-| `.pf-m-current`                | `.pf-c-simple-list__item-link` | Modifies the simple list item link for the current state.                                 |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-simple-list` | `<div>` | Initiates a simple list. |
+| `.pf-c-simple-list__section` | `<section>` | Initiates a simple list section. |
+| `.pf-c-simple-list__title` | `<h2>` | Initiates a simple list title. |
+| `.pf-c-simple-list__list` | `<ul>` | Initiates a simple list unordered list. |
+| `.pf-c-simple-list__item` | `<li>` | Initiates a simple list item. |
+| `.pf-c-simple-list__item-link` | `<button>`, `<a>` | Initiates a simple list item link. It can be a button or a link depending on the context. |
+| `.pf-m-current` | `.pf-c-simple-list__item-link` | Modifies the simple list item link for the current state. |

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

@@ -90,11 +90,11 @@ Small circle
 
 ### Usage
 
-| Class                                                | Applied to       | Outcome                                                                                              |
-| ---------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------- |
-| `.pf-c-skeleton`                                     | `<div>`          | Initiates the skeleton component. **Required**                                                       |
-| `.pf-m-width-[sm, md, lg, 25, 33, 50, 66, 75]`       | `.pf-c-skeleton` | Modifies the width of the skeleton. The default is 100%.                                             |
-| `.pf-m-height-[sm, md, lg, 25, 33, 50, 66, 75, 100]` | `.pf-c-skeleton` | Modifies the height of the skeleton. The default is the inherited font size.                         |
-| `.pf-m-text-[sm, md, lg, xl, 2xl, 3xl, 4xl]`         | `.pf-c-skeleton` | Modifies the skeleton height to match the height of PatternFly's text elements.                      |
-| `.pf-m-circle`                                       | `.pf-c-skeleton` | Modifies the border radius of the skeleton to be a circle. Use a width modifier to specify the size. |
-| `.pf-m-square`                                       | `.pf-c-skeleton` | Modifies the border radius of the skeleton to be a square. Use a width modifier to specify the size. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-skeleton` | `<div>` | Initiates the skeleton component. **Required** |
+| `.pf-m-width-[sm, md, lg, 25, 33, 50, 66, 75]` | `.pf-c-skeleton` | Modifies the width of the skeleton. The default is 100%. |
+| `.pf-m-height-[sm, md, lg, 25, 33, 50, 66, 75, 100]` | `.pf-c-skeleton` | Modifies the height of the skeleton. The default is the inherited font size. |
+| `.pf-m-text-[sm, md, lg, xl, 2xl, 3xl, 4xl]` | `.pf-c-skeleton` | Modifies the skeleton height to match the height of PatternFly's text elements. |
+| `.pf-m-circle` | `.pf-c-skeleton` | Modifies the border radius of the skeleton to be a circle. Use a width modifier to specify the size. |
+| `.pf-m-square` | `.pf-c-skeleton` | Modifies the border radius of the skeleton to be a square. Use a width modifier to specify the size. |

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

@@ -139,12 +139,12 @@ When using `.pf-c-skip-to-content` you must provide an `href` attribute whose va
 
 ### Accessibility
 
-| Attribute                       | Applied to              | Outcome                                                    |
-| ------------------------------- | ----------------------- | ---------------------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `href="[id of main container]"` | `.pf-c-skip-to-content` | Sends focus to the primary content container. **Required** |
 
 ### Usage
 
-| Class                   | Applied to | Outcome                             |
-| ----------------------- | ---------- | ----------------------------------- |
-| `.pf-c-skip-to-content` | `<a>`      | initiates the skip to content link. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-skip-to-content` | `<a>` |  initiates the skip to content link. |