@brightspace-ui/core 1.213.1 → 1.216.0

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>
@@ -159,6 +167,7 @@ class ListDemoDragAndDrop extends LitElement {
 
 		if (e.detail.keyboardActive) {
 			requestAnimationFrame(() => {
+				if (!this.shadowRoot) return;
 				const newItem = this.shadowRoot.querySelector('d2l-list').getListItemByKey(sourceListItems[0].key);
 				newItem.activateDragHandle();
 			});

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();
@@ -117,7 +119,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 		event.preventDefault();
 		if (this.disabled) return;
 		this.setSelected(!this.selected);
-		const checkbox = this.shadowRoot.querySelector(`#${this._checkboxId}`);
+		const checkbox = this.shadowRoot && this.shadowRoot.querySelector(`#${this._checkboxId}`);
 		if (checkbox) checkbox.focus();
 	}
 

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' },
@@ -360,7 +360,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	}
 
 	activateDragHandle() {
-		this.shadowRoot.querySelector(`#${this._itemDragId}`).activateKeyboardMode();
+		if (this.shadowRoot) this.shadowRoot.querySelector(`#${this._itemDragId}`).activateKeyboardMode();
 	}
 
 	_annoucePositionChange(dragTargetKey, dropTargetKey, dropLocation) {
@@ -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,
@@ -549,8 +550,10 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			e.dataTransfer.setData('text/plain', `${this.dropText}`);
 		}
 
-		const nodeImage = this.shadowRoot.querySelector('.d2l-list-item-drag-image') || this;
-		e.dataTransfer.setDragImage(nodeImage, 50, 50);
+		if (this.shadowRoot) {
+			const nodeImage = this.shadowRoot.querySelector('.d2l-list-item-drag-image') || this;
+			e.dataTransfer.setDragImage(nodeImage, 50, 50);
+		}
 
 		const rootList = this._getRootList(this);
 
@@ -582,6 +585,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	}
 
 	_onDragTargetClick(e) {
+		if (!this.shadowRoot) return;
 		if (this._keyboardActiveOnNextClick) {
 			this.shadowRoot.querySelector(`#${this._itemDragId}`).activateKeyboardMode();
 		} else {
@@ -690,7 +694,8 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		const dropGrid = listItem.shadowRoot.querySelector('.d2l-list-item-drag-drop-grid');
 		if (dropGrid) dropGrid.dispatchEvent(createDragEvent('drop'));
 		// simulate dragend
-		this.shadowRoot.querySelector('.d2l-list-item-drag-area').dispatchEvent(createDragEvent('dragend'));
+		if (this.shadowRoot)
+			this.shadowRoot.querySelector('.d2l-list-item-drag-area').dispatchEvent(createDragEvent('dragend'));
 	}
 
 	/**
@@ -742,7 +747,8 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		// simulate dragstart for touch and hold
 		this._touchTimeoutId = setTimeout(() => {
 			this._touchStarted = true;
-			this.shadowRoot.querySelector('.d2l-list-item-drag-area').dispatchEvent(createDragEvent('dragstart'));
+			if (this.shadowRoot)
+				this.shadowRoot.querySelector('.d2l-list-item-drag-area').dispatchEvent(createDragEvent('dragstart'));
 		}, touchHoldDuration);
 	}
 

package/components/list/list-item-generic-layout.js

@@ -171,7 +171,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 	}
 
 	_focusCellItem(num, itemNum) {
-		const cell = this.shadowRoot.querySelector(`[data-cell-num="${num}"]`);
+		const cell = this.shadowRoot && this.shadowRoot.querySelector(`[data-cell-num="${num}"]`);
 		if (!cell) return;
 
 		const firstFocusable = getFirstFocusableDescendant(cell);
@@ -197,7 +197,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 		let focusable = null;
 		let num = 1;
 		do {
-			cell = this.shadowRoot.querySelector(`[data-cell-num="${num++}"]`);
+			cell = this.shadowRoot && this.shadowRoot.querySelector(`[data-cell-num="${num++}"]`);
 			if (cell) {
 				focusable = getLastFocusableDescendant(cell) || focusable;
 			}
@@ -220,7 +220,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 		let focusable = null;
 
 		do {
-			cell = this.shadowRoot.querySelector(`[data-cell-num="${num}"]`);
+			cell = this.shadowRoot && this.shadowRoot.querySelector(`[data-cell-num="${num}"]`);
 			if (cell) {
 				focusable = forward ? getFirstFocusableDescendant(cell) : getLastFocusableDescendant(cell);
 			}
@@ -381,7 +381,8 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 	}
 
 	_getThisCell() {
-		return this.shadowRoot.querySelector(`.d2l-cell[data-cell-num="${this._cellNum}"]`);
+		return this.shadowRoot &&
+			this.shadowRoot.querySelector(`.d2l-cell[data-cell-num="${this._cellNum}"]`);
 	}
 
 	_onKeydown(event) {

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

@@ -303,6 +303,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 	}
 
 	_getNestedList() {
+		if (!this.shadowRoot) return;
 		const nestedSlot = this.shadowRoot.querySelector('slot[name="nested"]');
 		let nestedNodes = nestedSlot.assignedNodes();
 		if (nestedNodes.length === 0) {

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}
@@ -98,6 +101,7 @@ class List extends SelectionMixin(LitElement) {
 	}
 
 	getItems() {
+		if (!this.shadowRoot) return;
 		const slot = this.shadowRoot.querySelector('slot:not([name])');
 		if (!slot) return [];
 		return slot.assignedNodes({ flatten: true }).filter((node) => {
@@ -154,6 +158,7 @@ class List extends SelectionMixin(LitElement) {
 	_handleKeyDown(e) {
 		if (!this.grid || this.slot === 'nested' || e.keyCode !== keyCodes.TAB) return;
 		e.preventDefault();
+		if (!this.shadowRoot) return;
 		const focusable = (e.shiftKey ? getPreviousFocusable(this.shadowRoot.querySelector('slot:not([name])'))
 			: getNextFocusable(this, false, true, true));
 		if (focusable) focusable.focus();

package/components/menu/demo/custom-view.js

@@ -48,7 +48,7 @@ class CustomView extends HierarchicalViewMixin(LitElement) {
 	}
 
 	focus() {
-		this.shadowRoot.querySelector('.d2l-custom-view-back-container > a').focus();
+		if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-custom-view-back-container > a').focus();
 	}
 
 	_handleHide(e) {

package/components/menu/menu-item-link.js

@@ -84,7 +84,7 @@ class MenuItemLink extends MenuItemMixin(LitElement) {
 	}
 
 	_onClick() {
-		this.shadowRoot.querySelector('a').dispatchEvent(new CustomEvent('click'));
+		if (this.shadowRoot) this.shadowRoot.querySelector('a').dispatchEvent(new CustomEvent('click'));
 	}
 
 	_onKeyDown(e) {

package/components/menu/menu-item-mixin.js

@@ -109,7 +109,7 @@ export const MenuItemMixin = superclass => class extends FocusVisiblePolyfillMix
 	}
 
 	__initializeItem() {
-		const slot = this.shadowRoot.querySelector('slot:not([name])');
+		const slot = this.shadowRoot && this.shadowRoot.querySelector('slot:not([name])');
 		if (!slot) {
 			return;
 		}

package/components/menu/menu.js

@@ -221,11 +221,11 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(FocusVisiblePolyfillMixin(Li
 	}
 
 	_getMenuItemReturn() {
-		return this.shadowRoot.querySelector('d2l-menu-item-return');
+		return this.shadowRoot && this.shadowRoot.querySelector('d2l-menu-item-return');
 	}
 
 	_getMenuItems() {
-		const slot = this.shadowRoot.querySelector('slot');
+		const slot = this.shadowRoot && this.shadowRoot.querySelector('slot');
 		if (!slot) return;
 		const items = slot.assignedNodes({ flatten: true }).filter((node) => node.nodeType === Node.ELEMENT_NODE);
 

package/components/overflow-group/overflow-group.js

@@ -318,7 +318,7 @@ class OverflowGroup extends RtlMixin(LocalizeCoreElement(LitElement)) {
 	}
 
 	_chomp() {
-		if (!this._itemLayouts) return;
+		if (!this.shadowRoot || !this._itemLayouts) return;
 
 		this._overflowMenu = this.shadowRoot.querySelector('.d2l-overflow-dropdown');
 		this._overflowMenuMini = this.shadowRoot.querySelector('.d2l-overflow-dropdown-mini');

package/components/scroll-wrapper/demo/scroll-wrapper-test.js

@@ -53,7 +53,7 @@ class TestScrollWrapper extends RtlMixin(LitElement) {
 	}
 
 	focus() {
-		forceFocusVisible(this.shadowRoot.querySelector('d2l-scroll-wrapper')._container);
+		if (this.shadowRoot) forceFocusVisible(this.shadowRoot.querySelector('d2l-scroll-wrapper')._container);
 	}
 
 }

package/components/selection/selection-action.js

@@ -79,7 +79,7 @@ class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlM
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('d2l-button-subtle');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-button-subtle');
 		if (elem) elem.focus();
 	}
 

package/components/selection/selection-input.js

@@ -142,7 +142,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 	}
 
 	focus() {
-		const elem = this.shadowRoot.firstElementChild;
+		const elem = this.shadowRoot && this.shadowRoot.firstElementChild;
 		if (elem) elem.focus();
 	}
 

package/components/selection/selection-select-all.js

@@ -57,7 +57,7 @@ class SelectAll extends LocalizeCoreElement(SelectionObserverMixin(LitElement))
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('d2l-input-checkbox');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-checkbox');
 		if (elem) elem.focus();
 	}
 

package/components/switch/switch-mixin.js

@@ -213,7 +213,7 @@ export const SwitchMixin = superclass => class extends RtlMixin(FocusVisiblePoly
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('.d2l-switch-container');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-switch-container');
 		if (elem) elem.focus();
 	}
 

package/components/table/table-col-sort-button.js

@@ -71,7 +71,7 @@ export class TableColSortButton extends LitElement {
 	}
 
 	focus() {
-		const button = this.shadowRoot.querySelector('button');
+		const button = this.shadowRoot && this.shadowRoot.querySelector('button');
 		if (button) button.focus();
 	}