@patternfly/patternfly 5.0.0-alpha.13 → 5.0.0-alpha.18

package/docs/components/DescriptionList/examples/DescriptionList.md

@@ -1560,34 +1560,34 @@ Cards can be used as [description list group wrappers](../card#description-list-
 
 ### Accessibility
 
-| Attribute      | Applied to                                    | Outcome                                                                                                                                       |
-| -------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`        | `.pf-c-description-list`                      | Provides an accessible title for the description list. **Required**                                                                           |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `title` | `.pf-c-description-list` | Provides an accessible title for the description list. **Required** |
 | `tabindex="0"` | `.pf-c-description-list__text.pf-m-help-text` | Inserts the `.pf-c-description-list__text` into the tab order of the page so that it is focusable. **Required when the element is clickable** |
 
 ### Usage
 
-| Class                                                                           | Applied to                               | Outcome                                                                                                                                                                        |
-| ------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-description-list`                                                        | `<dl>`                                   | Initiates the description list component. **Required**                                                                                                                         |
-| `.pf-c-description-list__group`                                                 | `<div>`                                  | Initiates a description list component group. **Required**                                                                                                                     |
-| `.pf-c-description-list__term`                                                  | `<dt>`                                   | Initiates a description list component term. **Required**                                                                                                                      |
-| `.pf-c-description-list__description`                                           | `<dd>`                                   | Initiates a description list component description. **Required**                                                                                                               |
-| `.pf-c-description-list__text`                                                  | `<span>`, `<div>`                        | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required**                                               |
-| `.pf-c-description-list__term-icon`                                             | `<span>`                                 | Initiates a description list component term icon element.                                                                                                                      |
-| `.pf-m-compact`                                                                 | `.pf-c-description-list`                 | Modifies the description list for compact horizontal and vertical spacing.                                                                                                     |
-| `.pf-m-display-lg`                                                              | `.pf-c-description-list`                 | Modifies the description list to have large display styling.                                                                                                                   |
-| `.pf-m-display-2xl`                                                             | `.pf-c-description-list`                 | Modifies the description list to have 2xl display styling.                                                                                                                     |
-| `.pf-m-fluid`                                                                   | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid.                                                                                                                          |
-| `.pf-m-help-text`                                                               | `.pf-c-description-list__text`           | Indicates there is more information available for the description list component term text.                                                                                    |
-| `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}`                                   | `.pf-c-description-list`                 | Modifies the description list component term and description pair to a horizontal layout.                                                                                      |
-| `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}`                                     | `.pf-c-description-list`                 | Modifies the description list component term and description pair to a vertical layout.                                                                                        |
-| `.pf-m-fill-columns`                                                            | `.pf-c-description-list`                 | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right.                                                                   |
-| `.pf-m-auto-column-widths`                                                      | `.pf-c-description-list`                 | Modifies the description list to format automatically.                                                                                                                         |
-| `.pf-m-inline-grid`                                                             | `.pf-c-description-list`                 | Modifies the description list display to inline-grid.                                                                                                                          |
-| `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}`                                  | `.pf-c-description-list`                 | Modifies the description list number of columns.                                                                                                                               |
-| `--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}`  | `.pf-c-description-list`                 | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `--pf-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                          |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-description-list` | `<dl>` | Initiates the description list component. **Required** |
+| `.pf-c-description-list__group` | `<div>` | Initiates a description list component group. **Required** |
+| `.pf-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required** |
+| `.pf-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required** |
+| `.pf-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required** |
+| `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
+| `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
+| `.pf-m-display-lg` | `.pf-c-description-list` | Modifies the description list to have large display styling. |
+| `.pf-m-display-2xl` | `.pf-c-description-list` | Modifies the description list to have 2xl display styling. |
+| `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
+| `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
+| `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |
+| `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a vertical layout. |
+| `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right. |
+| `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically. |
+| `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid. |
+| `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns. |
+| `--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `--pf-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 
 <!-- | `.pf-m-order[0-12]{-on-[breakpoint]}` | `.pf-c-description-list__group` | Modifies the order of the flex layout element. |
 | `.pf-m-order-first{-on-[breakpoint]}` | `.pf-c-description-list__group` | Modifies the order of the flex layout element to -1. |

package/docs/components/Divider/examples/Divider.md

@@ -16,7 +16,7 @@ cssPrefix: pf-c-divider
 ### li
 
 ```html
-<ul>
+<ul role="list">
   <li>List item one</li>
   <li class="pf-c-divider" role="separator"></li>
   <li>List item two</li>
@@ -92,16 +92,16 @@ cssPrefix: pf-c-divider
 
 The divider renders as an `<hr>` by default. It is possible to make the divider render as an `li` or a `div` to match the HTML5 specification and context of the divider.
 
-| Attribute          | Applied to                            | Outcome                                      |
-| ------------------ | ------------------------------------- | -------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `role="separator"` | `li.pf-c-divider`, `div.pf-c-divider` | Indicates that the separator is a separator. |
 
 ### Usage
 
-| Class                                                                     | Applied to              | Outcome                                                                                                                                                                           |
-| ------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-divider`                                                           | `<hr>`, `<li>`, `<div>` | Defines the divider component.                                                                                                                                                    |
-| `.pf-m-vertical`                                                          | `.pf-c-divider`         | Modifies the divider component from horizontal to vertical. This modifier requires that the parent has an explicit or implicit height, or has a flex or grid based layout parent. |
-| `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-divider`         | Modifies divider padding/inset to visually match padding of other adjacent components.                                                                                            |
-| `.pf-m-hidden{-on-[breakpoint]}`                                          | `.pf-c-divider`         | Modifies a divider to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                     |
-| `.pf-m-visible{-on-[breakpoint]}`                                         | `.pf-c-divider`         | Modifies a divider to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-divider` | `<hr>`, `<li>`, `<div>` | Defines the divider component. |
+| `.pf-m-vertical` | `.pf-c-divider` | Modifies the divider component from horizontal to vertical. This modifier requires that the parent has an explicit or implicit height, or has a flex or grid based layout parent. |
+| `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-divider` | Modifies divider padding/inset to visually match padding of other adjacent components. |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-divider` | Modifies a divider to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-divider` | Modifies a divider to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/components/DragDrop/examples/DragDrop.md

@@ -59,9 +59,9 @@ cssPrefix: pf-c-drag-drop
 
 ### Usage
 
-| Class                | Applied to                           | Outcome                                                                  |
-| -------------------- | ------------------------------------ | ------------------------------------------------------------------------ |
-| `.pf-c-draggable`    | `*`                                  | Initiates a draggable element.                                           |
-| `.pf-c-droppable`    | `*`                                  | Initiates a droppable element.                                           |
-| `.pf-m-dragging`     | `.pf-c-draggable`, `.pf-c-droppable` | Indicates a draggable and droppable element are in the dragging state.   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-draggable` | `*` | Initiates a draggable element. |
+| `.pf-c-droppable` | `*` | Initiates a droppable element. |
+| `.pf-m-dragging` | `.pf-c-draggable`, `.pf-c-droppable` | Indicates a draggable and droppable element are in the dragging state. |
 | `.pf-m-drag-outside` | `.pf-c-draggable`, `.pf-c-droppable` | Indicates a draggable element is dragged outside of a droppable element. |

package/docs/components/Drawer/examples/Drawer.md

@@ -690,57 +690,57 @@ cssPrefix: pf-c-drawer
 
 ### Accessibility
 
-| Class                           | Applied to                             | Outcome                                                                                   |
-| ------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------- |
-| `role="separator"`              | `.pf-c-drawer__splitter`               | Indicates that the splitter is a separator. **Required**                                  |
-| `tabindex="0"`                  | `.pf-c-drawer__splitter`               | Inserts the splitter into the tab order of the page so that it is focusable. **Required** |
-| `aria-orientation="horizontal"` | `.pf-c-drawer__splitter`               | Indicates that the splitter is oriented horizontally.                                     |
-| `aria-orientation="vertical"`   | `.pf-c-drawer__splitter.pf-m-vertical` | Indicates that the splitter is oriented vertically.                                       |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `role="separator"` | `.pf-c-drawer__splitter` | Indicates that the splitter is a separator. **Required** |
+| `tabindex="0"` | `.pf-c-drawer__splitter` | Inserts the splitter into the tab order of the page so that it is focusable. **Required** |
+| `aria-orientation="horizontal"` | `.pf-c-drawer__splitter` | Indicates that the splitter is oriented horizontally. |
+| `aria-orientation="vertical"` | `.pf-c-drawer__splitter.pf-m-vertical` | Indicates that the splitter is oriented vertically. |
 
 ### Usage
 
-| Class                           | Applied to               | Outcome                                |
-| ------------------------------- | ------------------------ | -------------------------------------- |
-| `.pf-c-drawer__splitter`        | `<div>`                  | Initiates the splitter.                |
-| `.pf-c-drawer__splitter-handle` | `<div>`                  | Initiates the splitter handle element. |
-| `.pf-m-vertical`                | `.pf-c-drawer__splitter` | Modifies the splitter to be vertical.  |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-drawer__splitter` | `<div>` | Initiates the splitter. |
+| `.pf-c-drawer__splitter-handle` | `<div>` | Initiates the splitter handle element. |
+| `.pf-m-vertical` |  `.pf-c-drawer__splitter` | Modifies the splitter to be vertical. |
 
 ## Documentation
 
 ### Accessibility
 
-| Attribute               | Applied to                 | Outcome                                                          |
-| ----------------------- | -------------------------- | ---------------------------------------------------------------- |
-| `aria-expanded="true"`  | `action that opens drawer` | Indicates that the expandable content is visible. **Required**   |
-| `aria-expanded="false"` | `action that opens drawer` | Indicates that the expandable content is hidden. **Required**    |
-| `hidden`                | `.pf-c-drawer__panel`      | Hides the drawer panel from assistive technologies. **Required** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-expanded="true"` | `action that opens drawer` | Indicates that the expandable content is visible. **Required** |
+| `aria-expanded="false"` | `action that opens drawer` | Indicates that the expandable content is hidden. **Required** |
+| `hidden` | `.pf-c-drawer__panel` | Hides the drawer panel from assistive technologies. **Required** |
 
 ### Usage
 
-| Class                                                     | Applied to                                                              | Outcome                                                                                                                                                                                                                                                     |
-| --------------------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-drawer`                                            | `<div>`                                                                 | Initiates the drawer container. **Required**                                                                                                                                                                                                                |
-| `.pf-c-drawer__section`                                   | `<div>`                                                                 | Initiates a drawer section area. This element can be used above or below `.pf-c-drawer__main` for titles, toolbars, footers, etc.                                                                                                                           |
-| `.pf-c-drawer__main`                                      | `<div>`                                                                 | Initiates the drawer main area. **Required**                                                                                                                                                                                                                |
-| `.pf-c-drawer__content`                                   | `<div>`                                                                 | Initiates the drawer content container. **Required**                                                                                                                                                                                                        |
-| `.pf-c-drawer__panel`                                     | `<aside>`                                                               | Initiates the drawer panel container. **Required**                                                                                                                                                                                                          |
-| `.pf-c-drawer__panel-main`                                | `<div>`                                                                 | Initiates the drawer panel main container for resizable drawers only.                                                                                                                                                                                       |
-| `.pf-c-drawer__body`                                      | `<div>`                                                                 | Initiates a drawer body container and is the child of `.pf-c-drawer__content`, `.pf-c-drawer__panel` and `.pf-c-drawer__panel-main`. **Required**                                                                                                           |
-| `.pf-c-drawer__head`                                      | `<div>`                                                                 | Initiates a drawer head container. This container positions `.pf-c-drawer__actions`, if present.                                                                                                                                                            |
-| `.pf-c-drawer__actions`                                   | `<div>`                                                                 | Identifies the drawer close button.                                                                                                                                                                                                                         |
-| `.pf-c-drawer__close`                                     | `<div>`                                                                 | Identifies the drawer close button.                                                                                                                                                                                                                         |
-| `.pf-m-panel-left`                                        | `.pf-c-drawer`                                                          | Modifies the drawer panel to expand from the left.                                                                                                                                                                                                          |
-| `.pf-m-panel-bottom`                                      | `.pf-c-drawer`                                                          | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height.                                                                              |
-| `.pf-m-expanded`                                          | `.pf-c-drawer`                                                          | Modifies the drawer panel for the expanded state.                                                                                                                                                                                                           |
-| `.pf-m-static{-on-[lg, xl, 2xl]}`                         | `.pf-c-drawer`                                                          | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                          |
-| `.pf-m-inline{-on-[lg, xl, 2xl]}`                         | `.pf-c-drawer`                                                          | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) will default to the `md` breakpoint. |
-| `.pf-m-no-border`                                         | `.pf-c-drawer__panel`                                                   | Modifies the drawer panel border treatment to disable all border treatment.                                                                                                                                                                                 |
-| `.pf-m-padding`                                           | `.pf-c-drawer__body`                                                    | Modifies the element to add padding.                                                                                                                                                                                                                        |
-| `.pf-m-no-padding`                                        | `.pf-c-drawer__body`                                                    | Modifies the element to remove padding.                                                                                                                                                                                                                     |
-| `.pf-m-no-background`                                     | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to transparent.                                                                                                                                                                                             |
-| `.pf-m-light-200`                                         | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to light grey.                                                                                                                                                                                              |
-| `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-drawer__panel`                                                   | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                                |
-| `.pf-m-resizable`                                         | `.pf-c-drawer__panel`                                                   | Modifies the drawer panel to be resizable. Intended for use with the `.pf-c-drawer__splitter` element.                                                                                                                                                      |
-| `--pf-c-drawer__panel--md--FlexBasis--min`                | `.pf-c-drawer__panel`                                                   | Defines the drawer panel minimum size.                                                                                                                                                                                                                      |
-| `--pf-c-drawer__panel--md--FlexBasis`                     | `.pf-c-drawer__panel`                                                   | Defines the drawer panel size.                                                                                                                                                                                                                              |
-| `--pf-c-drawer__panel--md--FlexBasis--max`                | `.pf-c-drawer__panel`                                                   | Defines the drawer panel maximum size.                                                                                                                                                                                                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-drawer` | `<div>` | Initiates the drawer container. **Required** |
+| `.pf-c-drawer__section` | `<div>` | Initiates a drawer section area. This element can be used above or below `.pf-c-drawer__main` for titles, toolbars, footers, etc. |
+| `.pf-c-drawer__main` | `<div>` | Initiates the drawer main area. **Required** |
+| `.pf-c-drawer__content` | `<div>` | Initiates the drawer content container. **Required** |
+| `.pf-c-drawer__panel` | `<aside>` | Initiates the drawer panel container. **Required** |
+| `.pf-c-drawer__panel-main` | `<div>` | Initiates the drawer panel main container for resizable drawers only. |
+| `.pf-c-drawer__body` | `<div>` | Initiates a drawer body container and is the child of `.pf-c-drawer__content`, `.pf-c-drawer__panel` and `.pf-c-drawer__panel-main`. **Required** |
+| `.pf-c-drawer__head` | `<div>` | Initiates a drawer head container. This container positions `.pf-c-drawer__actions`, if present. |
+| `.pf-c-drawer__actions` | `<div>` | Identifies the drawer close button. |
+| `.pf-c-drawer__close` | `<div>` | Identifies the drawer close button. |
+| `.pf-m-panel-left` | `.pf-c-drawer` | Modifies the drawer panel to expand from the left. |
+| `.pf-m-panel-bottom` | `.pf-c-drawer` | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height. |
+| `.pf-m-expanded` | `.pf-c-drawer` | Modifies the drawer panel for the expanded state. |
+| `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) will default to the `md` breakpoint. |
+| `.pf-m-no-border` | `.pf-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
+| `.pf-m-padding` | `.pf-c-drawer__body` | Modifies the element to add padding. |
+| `.pf-m-no-padding` | `.pf-c-drawer__body` | Modifies the element to remove padding. |
+| `.pf-m-no-background` | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to transparent. |
+| `.pf-m-light-200` | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to light grey. |
+| `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-resizable` | `.pf-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-c-drawer__splitter` element. |
+| `--pf-c-drawer__panel--md--FlexBasis--min` | `.pf-c-drawer__panel` | Defines the drawer panel minimum size. |
+| `--pf-c-drawer__panel--md--FlexBasis` | `.pf-c-drawer__panel` | Defines the drawer panel size. |
+| `--pf-c-drawer__panel--md--FlexBasis--max` | `.pf-c-drawer__panel` | Defines the drawer panel maximum size. |

package/docs/components/Dropdown/examples/Dropdown.css

@@ -31,11 +31,14 @@
 }
 
 #ws-core-c-dropdown-with-groups,
-#ws-core-c-dropdown-with-groups-and-dividers-between-groups,
-#ws-core-c-dropdown-with-groups-and-dividers-between-items {
+#ws-core-c-dropdown-with-groups-and-dividers-between-groups {
   min-height: 440px;
 }
 
+#ws-core-c-dropdown-with-groups-and-dividers-between-items {
+  min-height: 460px;
+}
+
 #ws-core-c-dropdown-dropdown-with-image-and-text .ws-preview-html {
   min-height: 19rem;
 }

package/docs/components/Dropdown/examples/Dropdown.md

@@ -2294,56 +2294,56 @@ The dropdown menu can contain either links or buttons, depending on the expected
 
 ### Accessibility
 
-| Attribute                                          | Applied                                                                                                            | Outcome                                                                                                                                    |
-| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `aria-expanded="false"`                            | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-check`, `.pf-c-dropdown__toggle-button`                          | Indicates that the menu is hidden.                                                                                                         |
-| `aria-expanded="true"`                             | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-check`, `.pf-c-dropdown__toggle-button`                          | Indicates that the menu is visible.                                                                                                        |
-| `aria-label="Actions"`                             | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-check`, `.pf-c-dropdown__toggle-button`                          | Provides an accessible name for the dropdown when an icon is used instead of text. **Required when icon is used with no supporting text**. |
-| `aria-hidden="true"`                               | `.pf-c-dropdown__toggle-icon`, `<i>`, `.pf-c-dropdown__toggle-check .pf-c-dropdown__toggle-text`                   | Hides the icon from assistive technologies.                                                                                                |
-| `hidden`                                           | `.pf-c-dropdown__menu`                                                                                             | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies.                         |
-| `aria-labelledby="{toggle button id}"`             | `.pf-c-dropdown__menu`                                                                                             | Gives the menu an accessible name by referring to the element that toggles the menu.                                                       |
-| `aria-labelledby="{checkbox id} {toggle text id}"` | `.pf-m-split-button .pf-c-dropdown__toggle-check > input[type="checkbox"]`                                         | Gives the checkbox an accessible name by referring to the element by which it is described.                                                |
-| `disabled`                                         | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-button`, `.pf-c-dropdown__toggle-check > input[type="checkbox"]` | Disables the dropdown toggle and removes it from keyboard focus.                                                                           |
-| `disabled`                                         | `button.pf-c-dropdown__menu-item`                                                                                  | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus.                             |
-| `aria-disabled="true"`                             | `a.pf-c-dropdown__menu-item`                                                                                       | When the menu item uses a link element, indicates that it is unavailable.                                                                  |
-| `tabindex="-1"`                                    | `a.pf-c-dropdown__menu-item`                                                                                       | When the menu item uses a link element, removes it from keyboard focus.                                                                    |
+| Attribute | Applied | Outcome |
+| -- | -- | -- |
+| `aria-expanded="false"` | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-check`, `.pf-c-dropdown__toggle-button` |  Indicates that the menu is hidden. |
+| `aria-expanded="true"` | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-check`, `.pf-c-dropdown__toggle-button` |  Indicates that the menu is visible. |
+| `aria-label="Actions"` | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-check`, `.pf-c-dropdown__toggle-button` | Provides an accessible name for the dropdown when an icon is used instead of text. **Required when icon is used with no supporting text**. |
+| `aria-hidden="true"` | `.pf-c-dropdown__toggle-icon`, `<i>`, `.pf-c-dropdown__toggle-check .pf-c-dropdown__toggle-text` | Hides the icon from assistive technologies. |
+| `hidden` | `.pf-c-dropdown__menu` | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
+| `aria-labelledby="{toggle button id}"` | `.pf-c-dropdown__menu` | Gives the menu an accessible name by referring to the element that toggles the menu. |
+| `aria-labelledby="{checkbox id} {toggle text id}"` | `.pf-m-split-button .pf-c-dropdown__toggle-check > input[type="checkbox"]` | Gives the checkbox an accessible name by referring to the element by which it is described. |
+| `disabled` | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-button`, `.pf-c-dropdown__toggle-check > input[type="checkbox"]` | Disables the dropdown toggle and removes it from keyboard focus. |
+| `disabled` | `button.pf-c-dropdown__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
+| `aria-disabled="true"` | `a.pf-c-dropdown__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
+| `tabindex="-1"` | `a.pf-c-dropdown__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
 
 ### Usage
 
-| Class                                   | Applied                                    | Outcome                                                                                                                                                                                                                                                                                                |
-| --------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-dropdown`                        | `<div>`                                    | Defines the parent wrapper of the dropdown.                                                                                                                                                                                                                                                            |
-| `.pf-c-dropdown__toggle`                | `<button>`                                 | Defines the dropdown toggle.                                                                                                                                                                                                                                                                           |
-| `.pf-c-dropdown__toggle-icon`           | `<span>`                                   | Defines the dropdown toggle icon.                                                                                                                                                                                                                                                                      |
-| `.pf-c-dropdown__toggle-text`           | `<span>`                                   | Defines the dropdown toggle text. **Required when text is present, adds truncation**.                                                                                                                                                                                                                  |
-| `.pf-c-dropdown__toggle-check`          | `<label>`                                  | Defines a checkbox in the toggle area of a split button dropdown.                                                                                                                                                                                                                                      |
-| `.pf-c-dropdown__toggle-button`         | `<button>`                                 | Defines the toggle button for a split button dropdown.                                                                                                                                                                                                                                                 |
-| `.pf-c-dropdown__toggle-progress`       | `<span>`                                   | Defines the progress element to indicate a dropdown action is in progress.                                                                                                                                                                                                                             |
-| `.pf-c-dropdown__menu`                  | `<ul>`, `<div>`                            | Defines the parent wrapper of the menu items.                                                                                                                                                                                                                                                          |
-| `.pf-c-dropdown__menu-item`             | `<a>`                                      | Defines a menu item that navigates to another page.                                                                                                                                                                                                                                                    |
-| `.pf-c-dropdown__menu-item-icon`        | `<span>`                                   | Defines the wrapper for the menu item icon.                                                                                                                                                                                                                                                            |
-| `.pf-c-dropdown__menu-item-description` | `<div>`                                    | Defines the wrapper for the menu item description.                                                                                                                                                                                                                                                     |
-| `.pf-c-dropdown__menu-item-main`        | `<div>`                                    | Defines the wrapper for the menu item main element. Use when the description element is present.                                                                                                                                                                                                       |
-| `.pf-c-dropdown__toggle-image`          | `<span>`                                   | Defines the wrapper for the dropdown toggle button image.                                                                                                                                                                                                                                              |
-| `.pf-c-dropdown__menu-item`             | `<button>`                                 | Defines a menu item that performs an action on the current page.                                                                                                                                                                                                                                       |
-| `.pf-c-dropdown__group`                 | `<section>`                                | Defines a group of items in a dropdown. **Required when there is more than one group in a dropdown**.                                                                                                                                                                                                  |
-| `.pf-c-dropdown__group-title`           | `<h1>`                                     | Defines the title for a group of items in the dropdown menu.                                                                                                                                                                                                                                           |
-| `.pf-m-expanded`                        | `.pf-c-dropdown`                           | Modifies for the expanded state.                                                                                                                                                                                                                                                                       |
-| `.pf-m-top`                             | `.pf-c-dropdown`                           | Modifies to display the menu above the toggle.                                                                                                                                                                                                                                                         |
-| `.pf-m-align-left{-on-[breakpoint]}`    | `.pf-c-dropdown__menu`                     | Modifies to display the menu aligned to the left edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                                       |
-| `.pf-m-align-right{-on-[breakpoint]}`   | `.pf-c-dropdown__menu`                     | Modifies to display the menu aligned to the right edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                                      |
-| `.pf-m-static`                          | `.pf-c-dropdown__menu`                     | Modifies a dropdown menu to be statically positioned to support custom positioning.                                                                                                                                                                                                                    |
-| `.pf-m-split-button`                    | `.pf-c-dropdown__toggle`                   | Modifies the dropdown toggle area to allow for interactive elements.                                                                                                                                                                                                                                   |
-| `.pf-m-action`                          | `.pf-c-dropdown__toggle.pf-m-split-button` | Modifies the dropdown toggle for when an action is placed beside a toggle button in a split button dropdown.                                                                                                                                                                                           |
-| `.pf-m-text`                            | `.pf-c-dropdown__menu-item`                | Modifies a menu item to be non-interactive text.                                                                                                                                                                                                                                                       |
-| `.pf-m-plain`                           | `.pf-c-dropdown__toggle`                   | Modifies to display the toggle with no border.                                                                                                                                                                                                                                                         |
-| `.pf-m-text`                            | `.pf-c-dropdown__toggle`                   | Modifies the dropdown toggle for the text variation.                                                                                                                                                                                                                                                   |
-| `.pf-m-primary`                         | `.pf-c-dropdown__toggle`                   | Modifies to display the toggle with primary styles.                                                                                                                                                                                                                                                    |
-| `.pf-m-secondary`                       | `.pf-c-dropdown__toggle`                   | Modifies to display the toggle with secondary styles.                                                                                                                                                                                                                                                  |
-| `.pf-m-full-height`                     | `.pf-c-dropdown`                           | Modifies a dropdown to full height of parent. See masthead for use.                                                                                                                                                                                                                                    |
-| `.pf-m-disabled`                        | `a.pf-c-dropdown__menu-item`               | Modifies to display the menu item as disabled. This applies to `a.pf-c-dropdown__menu-item` and should not be used in lieu of the `disabled` attribute on `button.pf-c-dropdown__menu-item`.                                                                                                           |
-| `.pf-m-disabled`                        | `div.pf-c-dropdown__toggle`                | Modifies to display the dropdown toggle as disabled. This applies to `div.pf-c-dropdown__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-c-dropdown__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-c-dropdown__toggle`. |
-| `.pf-m-icon`                            | `.pf-c-dropdown__menu-item`                | Modifies an item to support adding an icon.                                                                                                                                                                                                                                                            |
-| `.pf-m-active`                          | `.pf-c-dropdown__toggle`                   | Modifies the dropdown menu toggle for the active state.                                                                                                                                                                                                                                                |
-| `.pf-m-description`                     | `.pf-c-dropdown__menu-item`                | Modifies an item to support adding a description.                                                                                                                                                                                                                                                      |
-| `.pf-m-in-progress`                     | `.pf-c-dropdown__toggle-check`             | Modifies a toggle check element to indicate the check action is in progress.                                                                                                                                                                                                                           |
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-c-dropdown` | `<div>` | Defines the parent wrapper of the dropdown. |
+| `.pf-c-dropdown__toggle` | `<button>` | Defines the dropdown toggle. |
+| `.pf-c-dropdown__toggle-icon` | `<span>` | Defines the dropdown toggle icon. |
+| `.pf-c-dropdown__toggle-text` | `<span>` | Defines the dropdown toggle text. **Required when text is present, adds truncation**. |
+| `.pf-c-dropdown__toggle-check` | `<label>` | Defines a checkbox in the toggle area of a split button dropdown. |
+| `.pf-c-dropdown__toggle-button` | `<button>` | Defines the toggle button for a split button dropdown. |
+| `.pf-c-dropdown__toggle-progress` | `<span>` | Defines the progress element to indicate a dropdown action is in progress. |
+| `.pf-c-dropdown__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. |
+| `.pf-c-dropdown__menu-item` | `<a>` | Defines a menu item that navigates to another page. |
+| `.pf-c-dropdown__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
+| `.pf-c-dropdown__menu-item-description` | `<div>` | Defines the wrapper for the menu item description. |
+| `.pf-c-dropdown__menu-item-main` | `<div>` | Defines the wrapper for the menu item main element. Use when the description element is present. |
+| `.pf-c-dropdown__toggle-image` | `<span>` | Defines the wrapper for the dropdown toggle button image. |
+| `.pf-c-dropdown__menu-item` | `<button>` | Defines a menu item that performs an action on the current page. |
+| `.pf-c-dropdown__group` | `<section>` | Defines a group of items in a dropdown. **Required when there is more than one group in a dropdown**. |
+| `.pf-c-dropdown__group-title` | `<h1>` | Defines the title for a group of items in the dropdown menu. |
+| `.pf-m-expanded` | `.pf-c-dropdown` | Modifies for the expanded state. |
+| `.pf-m-top` | `.pf-c-dropdown` | Modifies to display the menu above the toggle. |
+| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-dropdown__menu` | Modifies to display the menu aligned to the left edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-dropdown__menu` | Modifies to display the menu aligned to the right edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-static` | `.pf-c-dropdown__menu` | Modifies a dropdown menu to be statically positioned to support custom positioning. |
+| `.pf-m-split-button` | `.pf-c-dropdown__toggle` | Modifies the dropdown toggle area to allow for interactive elements. |
+| `.pf-m-action` | `.pf-c-dropdown__toggle.pf-m-split-button` | Modifies the dropdown toggle for when an action is placed beside a toggle button in a split button dropdown. |
+| `.pf-m-text` | `.pf-c-dropdown__menu-item` | Modifies a menu item to be non-interactive text. |
+| `.pf-m-plain` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with no border. |
+| `.pf-m-text` | `.pf-c-dropdown__toggle` | Modifies the dropdown toggle for the text variation. |
+| `.pf-m-primary` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with primary styles. |
+| `.pf-m-secondary` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with secondary styles. |
+| `.pf-m-full-height` | `.pf-c-dropdown` | Modifies a dropdown to full height of parent. See masthead for use. |
+| `.pf-m-disabled` | `a.pf-c-dropdown__menu-item` | Modifies to display the menu item as disabled. This applies to `a.pf-c-dropdown__menu-item` and should not be used in lieu of the `disabled` attribute on `button.pf-c-dropdown__menu-item`. |
+| `.pf-m-disabled` | `div.pf-c-dropdown__toggle` | Modifies to display the dropdown toggle as disabled. This applies to `div.pf-c-dropdown__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-c-dropdown__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-c-dropdown__toggle`. |
+| `.pf-m-icon` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding an icon. |
+| `.pf-m-active` | `.pf-c-dropdown__toggle` | Modifies the dropdown menu toggle for the active state. |
+| `.pf-m-description` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding a description. |
+| `.pf-m-in-progress` | `.pf-c-dropdown__toggle-check` | Modifies a toggle check element to indicate the check action is in progress. |