@brightspace-ui/core 1.213.0 → 1.215.0

package/components/html-block/demo/html-block.html

@@ -80,6 +80,37 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>HTML Block (compact)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-html-block compact>
+						<template>
+							<h1>heading 1</h1>
+							<h2>heading 2</h2>
+							<h3>heading 3</h3>
+							<h4>heading 4</h4>
+							<h5>heading 5</h5>
+							<h6>heading 6</h6>
+							<div><strong>strong</strong></div>
+							<div><b>bold</b></div>
+							<div>text</div>
+							<pre>preformatted</pre>
+							<p>paragraph</p>
+							<ul>
+								<li>unordered item 1</li>
+								<li>unordered item 2</li>
+							</ul>
+							<ol>
+								<li>ordered item 1</li>
+								<li>ordered item 2</li>
+							</ol>
+							<div><a href="https://d2l.com">anchor</a></div>
+						</template>
+					</d2l-html-block>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>HTML Block (math)</h2>
 
 			<d2l-demo-snippet>

package/components/html-block/html-block.js

@@ -1,10 +1,15 @@
 import '../colors/colors.js';
 import { css, LitElement } from 'lit-element/lit-element.js';
-import { HtmlAttributeObserverController } from '../../helpers/htmlAttributeObserverController.js';
+import { HtmlAttributeObserverController } from '../../controllers/attributeObserver/htmlAttributeObserverController.js';
 import { HtmlBlockMathRenderer } from '../../helpers/mathjax.js';
 import { requestInstance } from '../../mixins/provider-mixin.js';
 
 export const htmlBlockContentStyles = css`
+	.d2l-html-block-compact {
+		font-size: 0.8rem;
+		font-weight: 400;
+		line-height: 1.2rem;
+	}
 	h1, h2, h3, h4, h5, h6, b, strong, b *, strong * {
 		font-weight: bold;
 	}
@@ -49,7 +54,11 @@ export const htmlBlockContentStyles = css`
 	ul, ol {
 		list-style-position: outside;
 		margin: 1em 0;
-		padding-left: 3em;
+		padding-inline-start: 3em;
+	}
+	.d2l-html-block-compact ul,
+	.d2l-html-block-compact ol {
+		padding-inline-start: 1.5em;
 	}
 	ul, ul[type="disc"] {
 		list-style-type: disc;
@@ -95,11 +104,6 @@ export const htmlBlockContentStyles = css`
 	:host([dir="rtl"]) {
 		text-align: right;
 	}
-	:host([dir="rtl"]) ul,
-	:host([dir="rtl"]) ol {
-		padding-left: 0;
-		padding-right: 3em;
-	}
 `;
 
 let renderers;
@@ -120,6 +124,11 @@ class HtmlBlock extends LitElement {
 
 	static get properties() {
 		return {
+			/**
+			 * Whether compact styles should be applied
+			 * @type {Boolean}
+			 */
+			compact: { type: Boolean },
 			/**
 			 * Whether to disable deferred rendering of the user-authored HTML. Do *not* set this
 			 * unless your HTML relies on script executions that may break upon stamping.
@@ -153,6 +162,7 @@ class HtmlBlock extends LitElement {
 
 	constructor() {
 		super();
+		this.compact = false;
 		this.noDeferredRendering = false;
 
 		const rendererContextAttributes = getRenderers().reduce((attrs, currentRenderer) => {
@@ -185,7 +195,7 @@ class HtmlBlock extends LitElement {
 
 		if (this._renderContainer) return;
 
-		this.shadowRoot.innerHTML += '<div class="d2l-html-block-rendered"></div><slot></slot>';
+		this.shadowRoot.innerHTML += `<div class="d2l-html-block-rendered${this.compact ? ' d2l-html-block-compact' : ''}"></div><slot></slot>`;
 
 		this.shadowRoot.querySelector('slot').addEventListener('slotchange', async e => await this._render(e.target));
 		this._renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');

package/components/list/README.md

@@ -137,6 +137,7 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
 
 | Property | Type | Description |
 |---|---|---|
+| `drag-multiple` | Boolean | Whether the user can drag multiple items |
 | `grid` | Boolean | Enables keyboard grid for supported list items. See [Accessibility](#accessibility). |
 | `selection-single` | Boolean | Whether to render with single selection behaviour. If `selection-single` is specified, the list-items will render with radios instead of checkboxes, and the list component will maintain a single selected item. |
 | `separators` | String | Display separators (`all` (default), `between`, `none`) |
@@ -150,18 +151,20 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
 
 ### Methods
 
-- `getListItemCount`: returns the length of the items within the list
-- `getListItemIndex` (Object): returns the index of the given element within the list
-- `getSelectedListItems` (Array): returns the selected items; pass `true` to include nested lists
-- `getSelectionInfo` (Object): returns a `SelectionInfo` object containing the `state` (`none`, `some`, `all`), and the `keys` (Array) for the selected items
+- `getItems()` (Array): returns the list items within the list
+- `getListItemByKey(key)` (ListItem): returns the list item element from the root or nested lists for the specified key
+- `getListItemCount()` (Number): returns the number of items within the list
+- `getListItemIndex(item)` (Object): returns the index of the given element within the list
+- `getSelectedListItems(includeNested)` (Array): returns the selected items; pass `true` to include nested lists
+- `getSelectionInfo(includeNested)` (Object): returns a `SelectionInfo` object containing the `state` (`none`, `some`, `all`), and the `keys` (Array) for the selected items
 
 ## Selection Lists
 
-The `d2l-list` supports selectable items within a list, including both single and multi. Selection is enabled when a `d2l-list-item` has the `selectable` attribute set on it, and is by default multi-select which is indicated by a checkbox. Setting `selection-single` on the `d2l-list` wrapper enables single selection, which renders the selectable items with radio buttons. A `d2l-list-header` component can be added before the `d2l-list-item` component in order to have an easy multi-select header with actions.
+The `d2l-list` supports selectable items within a list, including both single and multi selection. Selection is enabled when `d2l-list-item`s have the `selectable` attribute. When items are selectable, multiple selection is the default behaviour, however the `selection-single` attribute can be applied to the `d2l-list` to enable single selection. A `d2l-list-header` component can be added to `d2l-list`'s `header` slot to provide select-all and bulk actions.
 
 ### Accessibility Properties
 
-If a `d2l-list-item` is selectable then it should have a `label` attribute set on it which corresponds to the hidden label for the checkbox.
+If a `d2l-list-item` is selectable then it should have a `label` attribute that corresponds to the hidden label for the checkbox.
 
 ### Example
 
@@ -202,12 +205,15 @@ The `d2l-list` supports drag & drop.
 ![List](./screenshots/drag-and-drop.gif?raw=true)
 <!-- docs: end hidden content -->
 
-Because the list itself is a rendering component, there is some light work involved in hooking up this behaviour.
+The `d2l-list` is simply a rendering component, so there is some light work involved in hooking up this behaviour. In order for items to be draggable, they must have their `draggable` and `key` attributes set. Optionally, the `drop-nested` attribute can be applied to items to indicate whether other items can be dropped as nested children on the item.
 
-- `d2l-list-item` components within the list must be `draggable` and have `key` set to something unique
-- Reordering and re-rendering is the controlling component's responsibility
+Reordering and re-rendering is the consuming component's responsibility. For a simple flat list, listen for the `d2l-list-item-position-change` event and call the `reorder` helper method. Alternatively, or for more complex lists such as those with nested lists, listen for the `d2l-list-items-move` event on the root list and update the consumer data using the provided source and target event detail.
 
-Here is a simple component example that adds drag 'n' drop to a list:
+### Accessibility Properties
+
+If an item is draggable, the `drag-handle-text` attribute should be used to provide an accessible label for assistive technology in keyboard mode.
+
+### Example
 
 <!-- docs: demo code autoSize:false size:medium -->
 ```html
@@ -227,18 +233,9 @@ Here is a simple component example that adds drag 'n' drop to a list:
     constructor() {
       super();
       this.list = [
-        {
-          key: '1',
-          content: 'Initially first list item'
-        },
-        {
-          key: '2',
-          content: 'Initially second list item'
-        },
-        {
-          key: '3',
-          content: 'Initially third list item'
-        }
+        { key: '1', content: 'Initially first list item' },
+        { key: '2', content: 'Initially second list item' },
+        { key: '3', content: 'Initially third list item' }
       ];
     }
 
@@ -319,7 +316,7 @@ The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot
 
 ## List Item [d2l-list-item]
 
-The `d2l-list-item` provides the appropriate `listitem` semantics for children within a list. It also provides some basic layout, breakpoints for responsiveness, a navigation link for the primary action, and selection. It extends `ListItemLinkMixin` and `ListItemMixin` and has all the same use cases as the mixin.
+The `d2l-list-item` provides the appropriate `listitem` semantics for children within a list. It also provides some basic layout, breakpoints for responsiveness, a navigation link for the primary action, and selection.
 
 <!-- docs: start hidden content -->
 ![List](./screenshots/list-item.png?raw=true)
@@ -353,7 +350,20 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 
 | Property | Type | Description |
 |---|---|---|
+| `breakpoints` | Array | Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used. |
+| `disabled` | Boolean | Disables the input |
+| `draggable` |  Boolean | Whether the item is draggable |
+| `drag-handle-text` | String | The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode. |
+| `drop-nested` | Boolean | Whether nested items can be dropped on this item |
+| `drop-text` | String | Text to drag and drop |
 | `href` | String | Address of item link if navigable |
+| `key` | String | Value to identify item if selectable or draggable |
+| `label` | String | Explicitly defined label for the element |
+| `labelled-by` | String | The id of element that provides the label for this element |
+| `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
+| `selected` | Boolean | Whether the item is selected |
+| `skeleton` | Boolean | Renders the input as a skeleton loader |
+| `slim` | Boolean | Whether to render the list-item with reduced whitespace|
 
 ### Events
 
@@ -376,6 +386,56 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
     - Image: max dimensions: `width: 216px` and `height: 120px` and has `20px margin` from the main content;
     - default break: `843px < x`  where `x` is the width of the component.
 
+## Button List Item [d2l-list-item-button]
+
+The `d2l-list-item-button` provides the same functionality as `d2l-list-item` except with button semantics for its primary action.
+
+<!-- docs: start hidden content -->
+![List](./screenshots/list-item.png?raw=true)
+<!-- docs: end hidden content -->
+
+<!-- docs: demo live name:d2l-list-item-button -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/list/list.js';
+  import '@brightspace-ui/core/components/list/list-item-button.js';
+  import '@brightspace-ui/core/components/list/list-item-content.js';
+</script>
+
+<d2l-list style="width: 100%">
+  <d2l-list-item-button href="http://www.d2l.com" selectable key="1" label="Geomorphology and GIS">
+    <d2l-list-item-content>
+      <div>Geomorphology and GIS </div>
+      <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
+    </d2l-list-item-content>
+  </d2l-list-item-button>
+</d2l-list>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `breakpoints` | Array | Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used. |
+| `disabled` | Boolean | Disables the input |
+| `draggable` |  Boolean | Whether the item is draggable |
+| `drag-handle-text` | String | The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode. |
+| `drop-nested` | Boolean | Whether nested items can be dropped on this item |
+| `drop-text` | String | Text to drag and drop |
+| `key` | String | Value to identify item if selectable or draggable |
+| `label` | String | Explicitly defined label for the element |
+| `labelled-by` | String | The id of element that provides the label for this element |
+| `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
+| `selected` | Boolean | Whether the item is selected |
+| `skeleton` | Boolean | Renders the input as a skeleton loader |
+| `slim` | Boolean | Whether to render the list-item with reduced whitespace|
+
+### Events
+
+- `d2l-list-item-button-click`: dispatched when the item's primary button action is clicked
+<!-- docs: end hidden content -->
+
 ## ListItemMixin
 
 Want to maintain consistency with `d2l-list-item` but need more modularity? This mixin is for you! This mixin allows you to make a component into a list item without requiring custom styling. All of the properties and functionality from `d2l-list-item` (listed above) will be added to your new component.
@@ -411,42 +471,7 @@ Where the parameters correspond to the slots of `d2l-list-item`:
 - illustration (TemplateResult):  Provide an illustration for your list item.
 - content (TemplateResult): Core content of the list item, such as a d2l-list-item-content element.
 - actions (TemplateResult): Secondary actions for the list item.
-
-### Accessibility Properties
-
-- `drag-handle-text`: The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.
-
-## Button List Item [d2l-list-item-button]
-
-The `d2l-list-item-button` provides the same functionality as `d2l-list-item` except with button semantics for its primary action. It extends `ListItemButtonMixin` and `ListItemMixin` and has all the same use cases as the mixin.
-
-<!-- docs: start hidden content -->
-![List](./screenshots/list-item.png?raw=true)
-<!-- docs: end hidden content -->
-
-<!-- docs: demo live name:d2l-list-item-button -->
-```html
-<script type="module">
-  import '@brightspace-ui/core/components/list/list.js';
-  import '@brightspace-ui/core/components/list/list-item-button.js';
-  import '@brightspace-ui/core/components/list/list-item-content.js';
-</script>
-
-<d2l-list style="width: 100%">
-  <d2l-list-item-button href="http://www.d2l.com" selectable key="1" label="Geomorphology and GIS">
-    <d2l-list-item-content>
-      <div>Geomorphology and GIS </div>
-      <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
-    </d2l-list-item-content>
-  </d2l-list-item-button>
-</d2l-list>
-```
-
-<!-- docs: start hidden content -->
-### Events
-
-- `d2l-list-item-button-click`: dispatched when the item's primary button action is clicked
-<!-- docs: end hidden content -->
+- nested (TemplateResult): Optional `d2l-list` for a nested list.
 
 ## List Item Content
 
@@ -494,6 +519,13 @@ This event includes a detail object with helper methods attached to it.
   - `announceFn(any, Number) (optional)`: A callback function that takes a given item in the array and its index, and returns the text to announce
   - `keyFn(any)`: A callback function that takes a given item in the array and returns its key
 
+## Event Details: @d2l-list-items-move
+
+**Properties**
+
+- `keyboardActive`: (Boolean) Whether the drag handle is in keyboard mode
+- `sourceItems`: (Array) Items being moved
+- `target`: (Object) The target reference `item` where items are being moved, and the `location` (`moveLocations.above`, `moveLocations.below`, or `moveLocations.nest`)
 
 <!-- docs: start hidden content -->
 ## Future Improvements

package/components/list/demo/list-drag-and-drop.js

@@ -21,23 +21,27 @@ class ListDemoDragAndDrop extends LitElement {
 			primaryText: 'Introductory Earth Sciences',
 			supportingText: 'This course explores the geological processes of the Earth\'s interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.',
 			imgSrc: 'https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg',
+			dropNested: true,
 			items: [{
 				key: '1-1',
 				primaryText: 'Glaciation',
-				supportingText: 'Supporting Info',
-				imgSrc: '',
+				supportingText: 'Nesting Allowed',
+				imgSrc: 'https://s.brightspace.com/course-images/images/bf648978-6637-4fdc-815b-81572c436c0e/tile-high-density-max-size.jpg',
+				dropNested: true,
 				items: []
 			}, {
 				key: '1-2',
 				primaryText: 'Weathering',
-				supportingText: 'Supporting Info',
-				imgSrc: '',
+				supportingText: 'Nesting Allowed',
+				imgSrc: 'https://s.brightspace.com/course-images/images/50f91ba6-7c25-482a-bd71-1c4b7c8d2154/tile-high-density-min-size.jpg',
+				dropNested: true,
 				items: []
 			}, {
 				key: '1-3',
 				primaryText: 'Volcanism',
-				supportingText: 'Supporting Info',
-				imgSrc: '',
+				supportingText: 'Nesting Allowed',
+				imgSrc: 'https://s.brightspace.com/course-images/images/5eb2371d-6099-4c8d-8aad-075f357012a2/tile-high-density-min-size.jpg',
+				dropNested: true,
 				items: []
 			}]
 		}, {
@@ -48,14 +52,16 @@ class ListDemoDragAndDrop extends LitElement {
 			items: [{
 				key: '2-1',
 				primaryText: 'Contaminant Transport',
-				supportingText: 'Supporting Info',
-				imgSrc: '',
+				supportingText: 'No Nesting Allowed',
+				imgSrc: 'https://s.brightspace.com/course-images/images/824fffa1-86a6-4489-84ba-91edfbc1dcc4/tile-high-density-min-size.jpg',
+				dropNested: false,
 				items: []
 			}, {
 				key: '2-2',
 				primaryText: 'Modelling Flow in Fractured Media',
-				supportingText: 'Supporting Info',
-				imgSrc: '',
+				supportingText: 'No Nesting Allowed',
+				imgSrc: 'https://s.brightspace.com/course-images/images/e18c92a4-b996-444f-84b5-988874feccac/tile-high-density-min-size.jpg',
+				dropNested: false,
 				items: []
 			}]
 		}, {
@@ -66,14 +72,16 @@ class ListDemoDragAndDrop extends LitElement {
 			items: [{
 				key: '3-1',
 				primaryText: 'Carbon & Nitrogen Cycling',
-				supportingText: 'Supporting Info',
-				imgSrc: '',
+				supportingText: 'Nesting Allowed',
+				imgSrc: 'https://s.brightspace.com/course-images/images/623b420b-a305-4762-8af8-598f0e72e956/tile-high-density-min-size.jpg',
+				dropNested: true,
 				items: []
 			}, {
 				key: '3-2',
 				primaryText: 'Wetland Engineering',
-				supportingText: 'Supporting Info',
-				imgSrc: '',
+				supportingText: 'Nesting Allowed',
+				imgSrc: 'https://s.brightspace.com/course-images/images/26102577-8f2a-4e24-84b5-19d76decbc7a/tile-high-density-min-size.jpg',
+				dropNested: true,
 				items: []
 			}]
 		}];
@@ -88,11 +96,11 @@ class ListDemoDragAndDrop extends LitElement {
 							action-href="http://www.d2l.com"
 							draggable
 							drag-handle-text="${item.primaryText}"
-							drop-nested
+							?drop-nested="${item.dropNested}"
 							key="${item.key}"
 							label="${item.primaryText}"
 							selectable>
-								${nested ? null : html`<img slot="illustration" src="${item.imgSrc}">`}
+								${item.imgSrc.length === 0 ? null : html`<img slot="illustration" src="${item.imgSrc}">`}
 								<d2l-list-item-content>
 									<div>${item.primaryText}</div>
 									<div slot="supporting-info">${item.supportingText}</div>

package/components/list/list-header.js

@@ -7,6 +7,7 @@ import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 /**
  * A header for list components containing select-all, etc.
+ * @slot - Responsive container using `d2l-overflow-group` for `d2l-selection-action` elements
  */
 class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 

package/components/list/list-item-button.js

@@ -6,6 +6,7 @@ import { LitElement } from 'lit-element/lit-element.js';
  * @slot - Default content placed inside of the component
  * @slot illustration - Image associated with the list item located at the left of the item
  * @slot actions - Actions (e.g., button icons) associated with the listen item located at the right of the item
+ * @slot nested - Nested d2l-list element
  */
 class ListItemButton extends ListItemButtonMixin(LitElement) {
 

package/components/list/list-item-checkbox-mixin.js

@@ -25,7 +25,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 			 */
 			key: { type: String, reflect: true },
 			/**
-			 * **Selection:** Indicates a input should be rendered for selecting the item
+			 * **Selection:** Indicates an input should be rendered for selecting the item
 			 * @type {boolean}
 			 */
 			selectable: { type: Boolean },
@@ -60,6 +60,8 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 
 	constructor() {
 		super();
+		this.disabled = false;
+		this.selectable = false;
 		this.selected = false;
 		this.selectionInfo = new SelectionInfo();
 		this._checkboxId = getUniqueId();

package/components/list/list-item-drag-drop-mixin.js

@@ -264,7 +264,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			 */
 			dragHandleText: { type: String, attribute: 'drag-handle-text' },
 			/**
-			 * **Drag & drop:** Whether the items can be dropped as nested children
+			 * **Drag & drop:** Whether nested items can be dropped on this item
 			 * @type {boolean}
 			 */
 			dropNested: { type: Boolean, attribute: 'drop-nested' },
@@ -374,6 +374,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	_dispatchListItemsMove(sourceItems, targetItem, moveLocation, keyboardActive) {
 		if (!keyboardActive) keyboardActive = false;
 		const rootList = this._getRootList();
+		/** @ignore */
 		rootList.dispatchEvent(new CustomEvent('d2l-list-items-move', {
 			detail: {
 				keyboardActive: keyboardActive,

package/components/list/list-item.js

@@ -6,6 +6,7 @@ import { LitElement } from 'lit-element/lit-element.js';
  * @slot - Default content placed inside of the component
  * @slot illustration - Image associated with the list item located at the left of the item
  * @slot actions - Actions (e.g., button icons) associated with the listen item located at the right of the item
+ * @slot nested - Nested d2l-list element
  */
 class ListItem extends ListItemLinkMixin(LitElement) {
 

package/components/list/list.js

@@ -10,17 +10,20 @@ export const listSelectionStates = SelectionInfo.states;
 
 /**
  * A container for a styled list of items ("d2l-list-item"). It provides the appropriate "list" semantics as well as options for displaying separators, etc.
- * @slot - List content (e.g., `listitem`s)
+ * @slot - Slot for list items (ex. `d2l-list-item`, `d2l-list-item-button`, or custom items)
+ * @slot header - Slot for `d2l-list-header` to be rendered above the list
+ * @fires d2l-list-items-move - Dispatched when one or more items are moved. See [Event Details: d2l-list-items-move](#event-details%3A-%40d2l-list-items-move).
  */
 class List extends SelectionMixin(LitElement) {
 
 	static get properties() {
 		return {
 			/**
-			 * Whether to the user can drag multiple items
+			 * Not publicly available yet. Whether the user can drag multiple items
 			 * @type {boolean}
-			 */
-			dragMultiple: { type: Boolean, attribute: 'drag-multiple' },
+ 			 * @ignore
+ 			 */
+			dragMultiple: { type: Boolean, reflect: true, attribute: 'drag-multiple' },
 			/**
 			 * Whether to extend the separators beyond the content's edge
 			 * @type {boolean}

package/custom-elements.json

@@ -3378,6 +3378,12 @@
       "path": "./components/html-block/html-block.js",
       "description": "A component for displaying user-authored HTML.",
       "attributes": [
+        {
+          "name": "compact",
+          "description": "Whether compact styles should be applied",
+          "type": "Boolean",
+          "default": "false"
+        },
         {
           "name": "no-deferred-rendering",
           "description": "Whether to disable deferred rendering of the user-authored HTML. Do *not* set this\nunless your HTML relies on script executions that may break upon stamping.",
@@ -3386,6 +3392,13 @@
         }
       ],
       "properties": [
+        {
+          "name": "compact",
+          "attribute": "compact",
+          "description": "Whether compact styles should be applied",
+          "type": "Boolean",
+          "default": "false"
+        },
         {
           "name": "noDeferredRendering",
           "attribute": "no-deferred-rendering",
@@ -6260,7 +6273,7 @@
         {
           "name": "items",
           "type": "array",
-          "default": "[{\"key\":\"1\",\"primaryText\":\"Introductory Earth Sciences\",\"supportingText\":\"This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"1-1\",\"primaryText\":\"Glaciation\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"1-2\",\"primaryText\":\"Weathering\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"1-3\",\"primaryText\":\"Volcanism\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]},{\"key\":\"2\",\"primaryText\":\"Flow and Transport Through Fractured Rocks\",\"supportingText\":\"Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"2-1\",\"primaryText\":\"Contaminant Transport\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"2-2\",\"primaryText\":\"Modelling Flow in Fractured Media\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]},{\"key\":\"3\",\"primaryText\":\"Applied Wetland Science\",\"supportingText\":\"Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"3-1\",\"primaryText\":\"Carbon & Nitrogen Cycling\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"3-2\",\"primaryText\":\"Wetland Engineering\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]}]"
+          "default": "[{\"key\":\"1\",\"primaryText\":\"Introductory Earth Sciences\",\"supportingText\":\"This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg\",\"dropNested\":true,\"items\":[{\"key\":\"1-1\",\"primaryText\":\"Glaciation\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/bf648978-6637-4fdc-815b-81572c436c0e/tile-high-density-max-size.jpg\",\"dropNested\":true,\"items\":[]},{\"key\":\"1-2\",\"primaryText\":\"Weathering\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/50f91ba6-7c25-482a-bd71-1c4b7c8d2154/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]},{\"key\":\"1-3\",\"primaryText\":\"Volcanism\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/5eb2371d-6099-4c8d-8aad-075f357012a2/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]}]},{\"key\":\"2\",\"primaryText\":\"Flow and Transport Through Fractured Rocks\",\"supportingText\":\"Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"2-1\",\"primaryText\":\"Contaminant Transport\",\"supportingText\":\"No Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/824fffa1-86a6-4489-84ba-91edfbc1dcc4/tile-high-density-min-size.jpg\",\"dropNested\":false,\"items\":[]},{\"key\":\"2-2\",\"primaryText\":\"Modelling Flow in Fractured Media\",\"supportingText\":\"No Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/e18c92a4-b996-444f-84b5-988874feccac/tile-high-density-min-size.jpg\",\"dropNested\":false,\"items\":[]}]},{\"key\":\"3\",\"primaryText\":\"Applied Wetland Science\",\"supportingText\":\"Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"3-1\",\"primaryText\":\"Carbon & Nitrogen Cycling\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/623b420b-a305-4762-8af8-598f0e72e956/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]},{\"key\":\"3-2\",\"primaryText\":\"Wetland Engineering\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/26102577-8f2a-4e24-84b5-19d76decbc7a/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]}]}]"
         }
       ],
       "properties": [
@@ -6268,7 +6281,7 @@
           "name": "items",
           "attribute": "items",
           "type": "array",
-          "default": "[{\"key\":\"1\",\"primaryText\":\"Introductory Earth Sciences\",\"supportingText\":\"This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"1-1\",\"primaryText\":\"Glaciation\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"1-2\",\"primaryText\":\"Weathering\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"1-3\",\"primaryText\":\"Volcanism\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]},{\"key\":\"2\",\"primaryText\":\"Flow and Transport Through Fractured Rocks\",\"supportingText\":\"Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"2-1\",\"primaryText\":\"Contaminant Transport\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"2-2\",\"primaryText\":\"Modelling Flow in Fractured Media\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]},{\"key\":\"3\",\"primaryText\":\"Applied Wetland Science\",\"supportingText\":\"Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"3-1\",\"primaryText\":\"Carbon & Nitrogen Cycling\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"3-2\",\"primaryText\":\"Wetland Engineering\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]}]"
+          "default": "[{\"key\":\"1\",\"primaryText\":\"Introductory Earth Sciences\",\"supportingText\":\"This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg\",\"dropNested\":true,\"items\":[{\"key\":\"1-1\",\"primaryText\":\"Glaciation\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/bf648978-6637-4fdc-815b-81572c436c0e/tile-high-density-max-size.jpg\",\"dropNested\":true,\"items\":[]},{\"key\":\"1-2\",\"primaryText\":\"Weathering\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/50f91ba6-7c25-482a-bd71-1c4b7c8d2154/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]},{\"key\":\"1-3\",\"primaryText\":\"Volcanism\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/5eb2371d-6099-4c8d-8aad-075f357012a2/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]}]},{\"key\":\"2\",\"primaryText\":\"Flow and Transport Through Fractured Rocks\",\"supportingText\":\"Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"2-1\",\"primaryText\":\"Contaminant Transport\",\"supportingText\":\"No Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/824fffa1-86a6-4489-84ba-91edfbc1dcc4/tile-high-density-min-size.jpg\",\"dropNested\":false,\"items\":[]},{\"key\":\"2-2\",\"primaryText\":\"Modelling Flow in Fractured Media\",\"supportingText\":\"No Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/e18c92a4-b996-444f-84b5-988874feccac/tile-high-density-min-size.jpg\",\"dropNested\":false,\"items\":[]}]},{\"key\":\"3\",\"primaryText\":\"Applied Wetland Science\",\"supportingText\":\"Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"3-1\",\"primaryText\":\"Carbon & Nitrogen Cycling\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/623b420b-a305-4762-8af8-598f0e72e956/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]},{\"key\":\"3-2\",\"primaryText\":\"Wetland Engineering\",\"supportingText\":\"Nesting Allowed\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/26102577-8f2a-4e24-84b5-19d76decbc7a/tile-high-density-min-size.jpg\",\"dropNested\":true,\"items\":[]}]}]"
         }
       ]
     },
@@ -6306,23 +6319,24 @@
         },
         {
           "name": "drop-nested",
-          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean"
-        },
         {
           "name": "key",
           "description": "Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "description": "**Selection:** Disables the input",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectable",
-          "description": "**Selection:** Indicates a input should be rendered for selecting the item",
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
           "type": "boolean",
           "default": "true"
         },
@@ -6386,26 +6400,27 @@
         {
           "name": "dropNested",
           "attribute": "drop-nested",
-          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean"
-        },
         {
           "name": "key",
           "attribute": "key",
           "description": "Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "**Selection:** Disables the input",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",
-          "description": "**Selection:** Indicates a input should be rendered for selecting the item",
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
           "type": "boolean",
           "default": "true"
         },
@@ -6449,9 +6464,6 @@
           "name": "d2l-list-item-position-change",
           "description": "Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change)."
         },
-        {
-          "name": "d2l-list-items-move"
-        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -6478,6 +6490,12 @@
           "type": "boolean",
           "default": "false"
         }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Responsive container using `d2l-overflow-group` for `d2l-selection-action` elements"
+        }
       ]
     },
     {
@@ -6515,24 +6533,26 @@
         },
         {
           "name": "drop-nested",
-          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean"
-        },
         {
           "name": "key",
           "description": "Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "description": "**Selection:** Disables the input",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectable",
-          "description": "**Selection:** Indicates a input should be rendered for selecting the item",
-          "type": "boolean"
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "selected",
@@ -6594,27 +6614,29 @@
         {
           "name": "dropNested",
           "attribute": "drop-nested",
-          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean"
-        },
         {
           "name": "key",
           "attribute": "key",
           "description": "Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "**Selection:** Disables the input",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",
-          "description": "**Selection:** Indicates a input should be rendered for selecting the item",
-          "type": "boolean"
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "selected",
@@ -6660,9 +6682,6 @@
           "name": "d2l-list-item-position-change",
           "description": "Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change)."
         },
-        {
-          "name": "d2l-list-items-move"
-        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -6680,6 +6699,10 @@
         {
           "name": "actions",
           "description": "Actions (e.g., button icons) associated with the listen item located at the right of the item"
+        },
+        {
+          "name": "nested",
+          "description": "Nested d2l-list element"
         }
       ]
     },
@@ -6850,24 +6873,26 @@
         },
         {
           "name": "drop-nested",
-          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean"
-        },
         {
           "name": "key",
           "description": "Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "description": "**Selection:** Disables the input",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectable",
-          "description": "**Selection:** Indicates a input should be rendered for selecting the item",
-          "type": "boolean"
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "selected",
@@ -6941,27 +6966,29 @@
         {
           "name": "dropNested",
           "attribute": "drop-nested",
-          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean"
-        },
         {
           "name": "key",
           "attribute": "key",
           "description": "Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "**Selection:** Disables the input",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",
-          "description": "**Selection:** Indicates a input should be rendered for selecting the item",
-          "type": "boolean"
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "selected",
@@ -7007,9 +7034,6 @@
           "name": "d2l-list-item-position-change",
           "description": "Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change)."
         },
-        {
-          "name": "d2l-list-items-move"
-        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -7027,6 +7051,10 @@
         {
           "name": "actions",
           "description": "Actions (e.g., button icons) associated with the listen item located at the right of the item"
+        },
+        {
+          "name": "nested",
+          "description": "Nested d2l-list element"
         }
       ]
     },
@@ -7041,12 +7069,6 @@
           "type": "'all'|'between'|'none'",
           "default": "\"\\\"all\\\"\""
         },
-        {
-          "name": "drag-multiple",
-          "description": "Whether to the user can drag multiple items",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "extend-separators",
           "description": "Whether to extend the separators beyond the content's edge",
@@ -7076,8 +7098,6 @@
         },
         {
           "name": "dragMultiple",
-          "attribute": "drag-multiple",
-          "description": "Whether to the user can drag multiple items",
           "type": "boolean",
           "default": "false"
         },
@@ -7104,6 +7124,10 @@
         }
       ],
       "events": [
+        {
+          "name": "d2l-list-items-move",
+          "description": "Dispatched when one or more items are moved. See [Event Details: d2l-list-items-move](#event-details%3A-%40d2l-list-items-move)."
+        },
         {
           "name": "d2l-list-selection-changes",
           "description": "Dispatched once for a set of selection state changes (ex. select-all); event detail includes an array of objects where each object contains the `key` and `selected` state for each changed item"
@@ -7116,7 +7140,11 @@
       "slots": [
         {
           "name": "",
-          "description": "List content (e.g., `listitem`s)"
+          "description": "Slot for list items (ex. `d2l-list-item`, `d2l-list-item-button`, or custom items)"
+        },
+        {
+          "name": "header",
+          "description": "Slot for `d2l-list-header` to be rendered above the list"
         }
       ]
     },

package/directives/animate/animate.js

@@ -1,6 +1,8 @@
-import { directive, PropertyPart } from 'lit-html';
+import { directive, PartType } from 'lit-html/directive.js';
 import { getComposedActiveElement, getNextFocusable } from '../../helpers/focus.js';
+import { AsyncDirective } from 'lit-html/async-directive.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
+import { noChange } from 'lit-html';
 
 const stateMap = new WeakMap();
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -10,15 +12,13 @@ const moveYValue = 20;
 
 class AnimationState {
 
-	constructor(propertyPart) {
-
-		if (!(propertyPart instanceof PropertyPart) || propertyPart.committer.name !== 'animate') {
-			throw new Error('animation directives must be used with "animate" property');
+	constructor(partInfo) {
+		if (!(partInfo.type === PartType.PROPERTY) || partInfo.name !== 'animate') {
+			throw new Error('animate directives must be used with "animate" property');
 		}
-
 		this.id = 0;
 		this.clone = null;
-		this.elem = propertyPart.committer.element;
+		this.elem = partInfo.element;
 		this.state = 'unknown';
 		this.styleAttr = null;
 		this.styleAttrUse = false;
@@ -289,20 +289,37 @@ class AnimationState {
 
 }
 
-async function helper(part, action, opts) {
-	let state = stateMap.get(part);
-	if (state === undefined) {
-		state = new AnimationState(part);
-		stateMap.set(part, state);
+class Hide extends AsyncDirective {
+	render() {
+		return noChange;
 	}
-	opts = opts || {};
-	if (action === 'show') {
-		state.show(opts);
-	} else if (action === 'hide') {
+	update(part, [opts]) {
+		opts = opts || {};
+		let state = stateMap.get(part.element);
+		if (state === undefined) {
+			state = new AnimationState(part);
+			stateMap.set(part.element, state);
+		}
 		state.hide(opts);
+		return this.render();
 	}
 }
 
-export const hide = directive((opts) => async(part) => helper(part, 'hide', opts));
+class Show extends AsyncDirective {
+	render() {
+		return noChange;
+	}
+	update(part, [opts]) {
+		opts = opts || {};
+		let state = stateMap.get(part.element);
+		if (state === undefined) {
+			state = new AnimationState(part);
+			stateMap.set(part.element, state);
+		}
+		state.show(opts);
+		return this.render();
+	}
+}
 
-export const show = directive((opts) => async(part) => helper(part, 'show', opts));
+export const hide = directive(Hide);
+export const show = directive(Show);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.213.0",
+  "version": "1.215.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -48,10 +48,10 @@
     "@open-wc/testing": "^2",
     "@web/dev-server": "^0.1",
     "@web/test-runner": "^0.13",
-    "@web/test-runner-playwright": "^0.8.8",
+    "@web/test-runner-playwright": "^0.8",
     "axe-core": "^4",
     "chalk": "^5",
-    "eslint": "^7",
+    "eslint": "^8",
     "eslint-config-brightspace": "^0.16",
     "eslint-plugin-html": "^6",
     "eslint-plugin-import": "^2",
@@ -61,7 +61,7 @@
     "node-sass": "^7",
     "sinon": "^12",
     "stylelint": "^14",
-    "web-test-runner-performance": "^0.1.4"
+    "web-test-runner-performance": "^0.1"
   },
   "dependencies": {
     "@brightspace-ui/intl": "^3",
@@ -71,7 +71,7 @@
     "ifrau": "^0.39",
     "intl-messageformat": "^7",
     "lit-element": "^2",
-    "lit-html": "^1.4.1",
+    "lit-html": "^1",
     "prismjs": "^1",
     "resize-observer-polyfill": "^1"
   }