@brightspace-ui/core 1.213.2 → 1.217.0

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

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",

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.2",
+  "version": "1.217.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));