@brightspace-ui/core 1.213.1 → 1.216.0

package/components/tabs/tabs.js

@@ -374,34 +374,37 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 	}
 
 	getTabListRect() {
+		if (!this.shadowRoot) return undefined;
 		return this.shadowRoot.querySelector('.d2l-tabs-container-list').getBoundingClientRect();
 	}
 
 	_animateTabAddition(tabInfo) {
-		const tab = this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${cssEscape(tabInfo.id)}"]`);
+		const tab = this.shadowRoot
+			&& this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${cssEscape(tabInfo.id)}"]`);
 		return new Promise((resolve) => {
 			const handleTransitionEnd = (e) => {
 				if (e.propertyName !== 'max-width') return;
-				tab.removeEventListener('transitionend', handleTransitionEnd);
+				if (tab) tab.removeEventListener('transitionend', handleTransitionEnd);
 				resolve();
 			};
-			tab.addEventListener('transitionend', handleTransitionEnd);
+			if (tab) tab.addEventListener('transitionend', handleTransitionEnd);
 			tabInfo.state = '';
 			this.requestUpdate();
 		});
 	}
 
 	_animateTabRemoval(tabInfo) {
-		const tab = this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${cssEscape(tabInfo.id)}"]`);
+		const tab = this.shadowRoot &&
+			this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${cssEscape(tabInfo.id)}"]`);
 		return new Promise((resolve) => {
 			const handleTransitionEnd = (e) => {
 				if (e.propertyName !== 'max-width') return;
-				tab.removeEventListener('transitionend', handleTransitionEnd);
+				if (tab) tab.removeEventListener('transitionend', handleTransitionEnd);
 				this._tabInfos.splice(this._tabInfos.findIndex(info => info.id === tabInfo.id), 1);
 				this.requestUpdate();
 				resolve();
 			};
-			tab.addEventListener('transitionend', handleTransitionEnd);
+			if (tab) tab.addEventListener('transitionend', handleTransitionEnd);
 		});
 	}
 
@@ -488,7 +491,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 	}
 
 	async _focusSelected() {
-		const selectedTab = this.shadowRoot.querySelector('d2l-tab-internal[aria-selected="true"]');
+		const selectedTab = this.shadowRoot && this.shadowRoot.querySelector('d2l-tab-internal[aria-selected="true"]');
 		if (!selectedTab) return;
 
 		const selectedTabInfo = this._getTabInfo(selectedTab.controlsPanel);
@@ -517,6 +520,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 	}
 
 	_getPanel(id) {
+		if (!this.shadowRoot) return;
 		// use simple selector for slot (Edge)
 		const slot = this.shadowRoot.querySelector('.d2l-panels-container').querySelector('slot');
 		const panels = this._getPanels(slot);
@@ -702,7 +706,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 		await this._scrollToPosition(newTranslationValue);
 		await this._updateScrollVisibility(newMeasures);
 
-		if (!isOverflowingNext) {
+		if (!isOverflowingNext && this.shadowRoot) {
 			this.shadowRoot.querySelector('.d2l-tabs-scroll-previous-container button').focus();
 		}
 
@@ -735,7 +739,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 		await this._scrollToPosition(newTranslationValue);
 		await this._updateScrollVisibility(newMeasures);
 
-		if (!isOverflowingPrevious) {
+		if (!isOverflowingPrevious && this.shadowRoot) {
 			this.shadowRoot.querySelector('.d2l-tabs-scroll-next-container button').focus();
 		}
 
@@ -777,7 +781,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 		}
 
 		this._translationValue = translationValue;
-		if (reduceMotion) return this.updateComplete;
+		if (!this.shadowRoot || reduceMotion) return this.updateComplete;
 
 		return new Promise((resolve) => {
 			const tabList = this.shadowRoot.querySelector('.d2l-tabs-container-list');
@@ -805,13 +809,13 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 			expandedPromise = this.updateComplete;
 		} else {
 			expandedPromise = new Promise((resolve) => {
-				const tabsContainer = this.shadowRoot.querySelector('.d2l-tabs-container');
+				const tabsContainer = this.shadowRoot && this.shadowRoot.querySelector('.d2l-tabs-container');
 				const handleTransitionEnd = (e) => {
 					if (e.propertyName !== 'max-width') return;
-					tabsContainer.removeEventListener('transitionend', handleTransitionEnd);
+					if (tabsContainer) tabsContainer.removeEventListener('transitionend', handleTransitionEnd);
 					resolve();
 				};
-				tabsContainer.addEventListener('transitionend', handleTransitionEnd);
+				if (tabsContainer) tabsContainer.addEventListener('transitionend', handleTransitionEnd);
 				this._scrollCollapsed = false;
 				this._maxWidth = measures.totalTabsWidth + 50;
 			});
@@ -828,7 +832,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 			if (!this._allowScrollPrevious) {
 				this._focusSelected();
 			} else {
-				this.shadowRoot.querySelector('.d2l-tabs-scroll-previous-container button').focus();
+				if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-tabs-scroll-previous-container button').focus();
 			}
 		}
 
@@ -838,6 +842,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 
 	_updateMeasures() {
 		let totalTabsWidth = 0;
+		if (!this.shadowRoot) return;
 		const tabs = [...this.shadowRoot.querySelectorAll('d2l-tab-internal')];
 
 		const tabRects = tabs.map((tab) => {
@@ -894,7 +899,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 			// don't animate the tabs list visibility if it's the inital render
 			if (reduceMotion || !this._initialized) {
 				this._state = 'hidden';
-			} else {
+			} else if (this.shadowRoot) {
 				const layout = this.shadowRoot.querySelector('.d2l-tabs-layout');
 				const handleTransitionEnd = (e) => {
 					if (e.propertyName !== 'max-height') return;

package/components/tooltip/tooltip.js

@@ -715,7 +715,7 @@ class Tooltip extends RtlMixin(LitElement) {
 	}
 
 	_getContent() {
-		return this.shadowRoot.querySelector('.d2l-tooltip-content');
+		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-tooltip-content');
 	}
 
 	_isAboveOrBelow() {

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/helpers/demo/announce-test.js

@@ -25,6 +25,7 @@ class AnnounceTest extends LitElement {
 	}
 
 	_handleAnnounce() {
+		if (!this.shadowRoot) return;
 		const value1 = this.shadowRoot.querySelector('#msg1').value;
 		if (value1.length > 0) announce(value1);
 		const value2 = this.shadowRoot.querySelector('#msg2').value;

package/mixins/arrow-keys-mixin.js

@@ -37,7 +37,9 @@ export const ArrowKeysMixin = superclass => class extends superclass {
 	}
 
 	async arrowKeysFocusablesProvider() {
-		return [...this.shadowRoot.querySelectorAll('.d2l-arrowkeys-focusable')];
+		return this.shadowRoot ?
+			[...this.shadowRoot.querySelectorAll('.d2l-arrowkeys-focusable')]
+			: [];
 	}
 
 	async _focus(elem) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.213.1",
+  "version": "1.216.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",

package/templates/primary-secondary/primary-secondary.js

@@ -1014,6 +1014,7 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 	}
 
 	_computeContentBounds(contentRect) {
+		if (!this.shadowRoot) return;
 		const divider = this.shadowRoot.querySelector('.d2l-template-primary-secondary-divider');
 		const desktopDividerSize = divider.offsetWidth;
 		const mobileDividerSize = divider.offsetHeight;
@@ -1057,7 +1058,7 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 			} else {
 				if (this._isMobile) {
 					this._size = this._contentBounds.minHeight;
-				} else {
+				} else if (this.shadowRoot) {
 					const divider = this.shadowRoot.querySelector('.d2l-template-primary-secondary-divider');
 					const desktopDividerSize = contentRect.width - divider.offsetWidth;
 					this._size = Math.max(desktopMinSize, desktopDividerSize * (1 / 3));