@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

package/docs/components/DatePicker/examples/DatePicker.md

@@ -1,7 +1,7 @@
 ---
 id: 'Date picker'
-beta: true
 section: components
+subsection: date-and-time
 cssPrefix: pf-c-date-picker
 ---import './DatePicker.css'
 
@@ -13,21 +13,25 @@ cssPrefix: pf-c-date-picker
 <div class="pf-c-date-picker">
   <div class="pf-c-date-picker__input">
     <div class="pf-c-input-group">
-      <input
-        class="pf-c-form-control"
-        type="text"
-        value="2020-03-05"
-        id="basic-input"
-        name="basic-input"
-        aria-label="Date picker"
-      />
-      <button
-        class="pf-c-button pf-m-control"
-        type="button"
-        aria-label="Toggle date picker"
-      >
-        <i class="fas fa-calendar-alt" aria-hidden="true"></i>
-      </button>
+      <div class="pf-c-input-group__item pf-m-fill">
+        <input
+          class="pf-c-form-control"
+          type="text"
+          value="2020-03-05"
+          id="basic-input"
+          name="basic-input"
+          aria-label="Date picker"
+        />
+      </div>
+      <div class="pf-c-input-group__item">
+        <button
+          class="pf-c-button pf-m-control"
+          type="button"
+          aria-label="Toggle date picker"
+        >
+          <i class="fas fa-calendar-alt" aria-hidden="true"></i>
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -40,24 +44,34 @@ cssPrefix: pf-c-date-picker
 <div class="pf-c-date-picker">
   <div class="pf-c-date-picker__input">
     <div class="pf-c-input-group">
-      <input
-        class="pf-c-form-control"
-        type="text"
-        value="2020-03-05"
-        id="helper-text-input"
-        name="helper-text-input"
-        aria-label="Date picker"
-      />
-      <button
-        class="pf-c-button pf-m-control"
-        type="button"
-        aria-label="Toggle date picker"
-      >
-        <i class="fas fa-calendar-alt" aria-hidden="true"></i>
-      </button>
+      <div class="pf-c-input-group__item pf-m-fill">
+        <input
+          class="pf-c-form-control"
+          type="text"
+          value="2020-03-05"
+          id="helper-text-input"
+          name="helper-text-input"
+          aria-label="Date picker"
+        />
+      </div>
+      <div class="pf-c-input-group__item">
+        <button
+          class="pf-c-button pf-m-control"
+          type="button"
+          aria-label="Toggle date picker"
+        >
+          <i class="fas fa-calendar-alt" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="pf-c-date-picker__helper-text">
+    <div class="pf-c-helper-text">
+      <div class="pf-c-helper-text__item">
+        <span class="pf-c-helper-text__item-text">Select a date.</span>
+      </div>
     </div>
   </div>
-  <div class="pf-c-date-picker__helper-text">Select a date.</div>
 </div>
 
 ```
@@ -68,25 +82,35 @@ cssPrefix: pf-c-date-picker
 <div class="pf-c-date-picker">
   <div class="pf-c-date-picker__input">
     <div class="pf-c-input-group">
-      <input
-        class="pf-c-form-control"
-        aria-invalid="true"
-        type="text"
-        value="2020-03-05"
-        id="invalid-input"
-        name="invalid-input"
-        aria-label="Date picker"
-      />
-      <button
-        class="pf-c-button pf-m-control"
-        type="button"
-        aria-label="Toggle date picker"
-      >
-        <i class="fas fa-calendar-alt" aria-hidden="true"></i>
-      </button>
+      <div class="pf-c-input-group__item pf-m-fill">
+        <input
+          class="pf-c-form-control"
+          aria-invalid="true"
+          type="text"
+          value="2020-03-05"
+          id="invalid-input"
+          name="invalid-input"
+          aria-label="Date picker"
+        />
+      </div>
+      <div class="pf-c-input-group__item">
+        <button
+          class="pf-c-button pf-m-control"
+          type="button"
+          aria-label="Toggle date picker"
+        >
+          <i class="fas fa-calendar-alt" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="pf-c-date-picker__helper-text">
+    <div class="pf-c-helper-text">
+      <div class="pf-c-helper-text__item pf-m-error">
+        <span class="pf-c-helper-text__item-text">Invalid date</span>
+      </div>
     </div>
   </div>
-  <div class="pf-c-date-picker__helper-text pf-m-error">Invalid date</div>
 </div>
 
 ```
@@ -97,21 +121,25 @@ cssPrefix: pf-c-date-picker
 <div class="pf-c-date-picker">
   <div class="pf-c-date-picker__input">
     <div class="pf-c-input-group">
-      <input
-        class="pf-c-form-control"
-        type="text"
-        value="2020-03-05"
-        id="expanded-input"
-        name="expanded-input"
-        aria-label="Date picker"
-      />
-      <button
-        class="pf-c-button pf-m-control"
-        type="button"
-        aria-label="Toggle date picker"
-      >
-        <i class="fas fa-calendar-alt" aria-hidden="true"></i>
-      </button>
+      <div class="pf-c-input-group__item pf-m-fill">
+        <input
+          class="pf-c-form-control"
+          type="text"
+          value="2020-03-05"
+          id="expanded-input"
+          name="expanded-input"
+          aria-label="Date picker"
+        />
+      </div>
+      <div class="pf-c-input-group__item">
+        <button
+          class="pf-c-button pf-m-control"
+          type="button"
+          aria-label="Toggle date picker"
+        >
+          <i class="fas fa-calendar-alt" aria-hidden="true"></i>
+        </button>
+      </div>
     </div>
   </div>
   <div class="pf-c-date-picker__calendar">Calendar</div>
@@ -128,21 +156,25 @@ cssPrefix: pf-c-date-picker
 >
   <div class="pf-c-date-picker__input">
     <div class="pf-c-input-group">
-      <input
-        class="pf-c-form-control"
-        type="text"
-        value="November 20, 2020"
-        id="custom-width-input-input"
-        name="custom-width-input-input"
-        aria-label="Date picker"
-      />
-      <button
-        class="pf-c-button pf-m-control"
-        type="button"
-        aria-label="Toggle date picker"
-      >
-        <i class="fas fa-calendar-alt" aria-hidden="true"></i>
-      </button>
+      <div class="pf-c-input-group__item pf-m-fill">
+        <input
+          class="pf-c-form-control"
+          type="text"
+          value="November 20, 2020"
+          id="custom-width-input-input"
+          name="custom-width-input-input"
+          aria-label="Date picker"
+        />
+      </div>
+      <div class="pf-c-input-group__item">
+        <button
+          class="pf-c-button pf-m-control"
+          type="button"
+          aria-label="Toggle date picker"
+        >
+          <i class="fas fa-calendar-alt" aria-hidden="true"></i>
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -158,21 +190,25 @@ cssPrefix: pf-c-date-picker
 >
   <div class="pf-c-date-picker__input">
     <div class="pf-c-input-group">
-      <input
-        class="pf-c-form-control"
-        type="text"
-        value="November 20, 2020"
-        id="custom-width-input-based-on-number-of-characters-input"
-        name="custom-width-input-based-on-number-of-characters-input"
-        aria-label="Date picker"
-      />
-      <button
-        class="pf-c-button pf-m-control"
-        type="button"
-        aria-label="Toggle date picker"
-      >
-        <i class="fas fa-calendar-alt" aria-hidden="true"></i>
-      </button>
+      <div class="pf-c-input-group__item pf-m-fill">
+        <input
+          class="pf-c-form-control"
+          type="text"
+          value="November 20, 2020"
+          id="custom-width-input-based-on-number-of-characters-input"
+          name="custom-width-input-based-on-number-of-characters-input"
+          aria-label="Date picker"
+        />
+      </div>
+      <div class="pf-c-input-group__item">
+        <button
+          class="pf-c-button pf-m-control"
+          type="button"
+          aria-label="Toggle date picker"
+        >
+          <i class="fas fa-calendar-alt" aria-hidden="true"></i>
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -183,13 +219,12 @@ cssPrefix: pf-c-date-picker
 
 ### Usage
 
-| Class                            | Applied to                       | Outcome                                                                                                      |
-| -------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-date-picker`              | `<div>`                          | Initiates the date picker component. **Required**                                                            |
-| `.pf-c-date-picker__input`       | `<div>`                          | Initiates the date picker input container. **Required**                                                      |
-| `.pf-c-date-picker__helper-text` | `<div>`                          | Initiates the date picker helper text.                                                                       |
-| `.pf-c-date-picker__calendar`    | `<div>`                          | Initiates an optional date picker calendar container. **Note:** Required in the react date picker component. |
-| `.pf-m-top`                      | `.pf-c-date-picker`              | Modifies to display the calendar above the date picker.                                                      |
-| `.pf-m-error`                    | `.pf-c-date-picker__helper-text` | Modifies the helper text for the invalid/error state.                                                        |
-| `.pf-m-align-right`              | `.pf-c-date-picker__calendar`    | Modifies the calendar to align the calendar to the right edge of the date picker.                            |
-| `.pf-m-static`                   | `.pf-c-date-picker__calendar`    | Modifies the calendar to be statically positioned to support custom positioning.                             |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-date-picker` | `<div>` | Initiates the date picker component. **Required** |
+| `.pf-c-date-picker__input` | `<div>` | Initiates the date picker input container. **Required** |
+| `.pf-c-date-picker__helper-text` | `<div>` | Initiates the date picker helper text. |
+| `.pf-c-date-picker__calendar` | `<div>` | Initiates an optional date picker calendar container. **Note:** Required in the react date picker component. |
+| `.pf-m-top` | `.pf-c-date-picker` | Modifies to display the calendar above the date picker. |
+| `.pf-m-align-right` | `.pf-c-date-picker__calendar` | Modifies the calendar to align the calendar to the right edge of the date picker. |
+| `.pf-m-static` | `.pf-c-date-picker__calendar` | Modifies the calendar to be statically positioned to support custom positioning. |

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;
 }