@brightspace-ui/core 1.215.0 → 1.219.0

package/components/list/list-item-drag-handle.js

@@ -1,9 +1,11 @@
 import '../button/button-icon.js';
 import '../icons/icon.js';
+import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
 import { buttonStyles } from '../button/button-styles.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
@@ -36,6 +38,8 @@ export const dragActions = Object.freeze({
 	up: 'up'
 });
 
+let hasDisplayedKeyboardTooltip = false;
+
 /**
  * @fires d2l-list-item-drag-handle-action - Dispatched when an action performed on the drag handle
  */
@@ -58,6 +62,7 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			 * @type {string}
 			 */
 			text: { type: String },
+			_displayKeyboardTooltip: { type: Boolean },
 			_keyboardActive: { type: Boolean }
 		};
 	}
@@ -109,6 +114,15 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				cursor: default;
 				opacity: 0.5;
 			}
+			d2l-tooltip > div {
+				font-weight: 700;
+			}
+			d2l-tooltip > ul {
+				padding-inline-start: 1rem;
+			}
+			.d2l-list-item-drag-handle-tooltip-key {
+				font-weight: 700;
+			}
 		`];
 	}
 
@@ -117,6 +131,8 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 		this.disabled = false;
 
+		this._buttonId = getUniqueId();
+		this._displayKeyboardTooltip = false;
 		this._keyboardActive = false;
 		this._movingElement = false;
 	}
@@ -219,7 +235,14 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this._movingElement = false;
 	}
 
-	_onFocusOut(e) {
+	_onFocusInKeyboardButton() {
+		if (hasDisplayedKeyboardTooltip) return;
+		this._displayKeyboardTooltip = true;
+		hasDisplayedKeyboardTooltip = true;
+	}
+
+	_onFocusOutKeyboardButton(e) {
+		this._displayKeyboardTooltip = false;
 		if (this._movingElement) {
 			this._movingElement = false;
 			e.stopPropagation();
@@ -266,17 +289,32 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	_renderKeyboardDragging() {
 		return html`
 			<button
+				aria-label="${this._defaultLabel}"
+				aria-live="assertive"
 				class="d2l-list-item-drag-handle-keyboard-button"
-				@focusout="${this._onFocusOut}"
-				@keyup="${this._onActiveKeyboard}"
+				@focusin="${this._onFocusInKeyboardButton}"
+				@focusout="${this._onFocusOutKeyboardButton}"
+				id="${this._buttonId}"
 				@keydown="${this._onPreventDefault}"
-				aria-live="assertive"
-				aria-label="${this._defaultLabel}">
+				@keyup="${this._onActiveKeyboard}">
 				<d2l-icon icon="tier1:arrow-toggle-up" @click="${this._dispatchActionUp}" class="d2l-button-icon"></d2l-icon>
 				<d2l-icon icon="tier1:arrow-toggle-down" @click="${this._dispatchActionDown}" class="d2l-button-icon"></d2l-icon>
 			</button>
+			${this._displayKeyboardTooltip ? html`<d2l-tooltip align="start" for="${this._buttonId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;
 	}
+
+	_renderTooltipContent() {
+		return html`
+			<div>${this.localize('components.list-item-drag-handle-tooltip.title')}</div>
+			<ul>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.enter-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.enter-desc')}</li>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.up-down-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.up-down-desc')}</li>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.left-right-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.left-right-desc')}</li>
+			</ul>
+		`;
+	}
+
 }
 
 customElements.define('d2l-list-item-drag-handle', ListItemDragHandle);

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-link-mixin.js

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
 import { css, html } from 'lit-element/lit-element.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ListItemMixin } from './list-item-mixin.js';
 
 export const ListItemLinkMixin = superclass => class extends ListItemMixin(superclass) {
@@ -42,6 +43,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 	constructor() {
 		super();
 		this.actionHref = null;
+		this._primaryActionId = getUniqueId();
 	}
 
 	_handleLinkClick() {
@@ -51,7 +53,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 
 	_renderPrimaryAction(labelledBy) {
 		if (!this.actionHref) return;
-		return html`<a aria-labelledby="${labelledBy}" href="${this.actionHref}" @click="${this._handleLinkClick}"></a>`;
+		return html`<a id="${this._primaryActionId}" aria-labelledby="${labelledBy}" href="${this.actionHref}" @click="${this._handleLinkClick}"></a>`;
 	}
 
 };

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

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import './list-item-generic-layout.js';
 import './list-item-placement-marker.js';
+import '../tooltip/tooltip.js';
 import { css, html } from 'lit-element/lit-element.js';
 import { findComposedAncestor, getComposedParent } from '../../helpers/dom.js';
 import { classMap } from 'lit-html/directives/class-map.js';
@@ -10,10 +11,28 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { ListItemCheckboxMixin } from './list-item-checkbox-mixin.js';
 import { ListItemDragDropMixin } from './list-item-drag-drop-mixin.js';
 import { ListItemRoleMixin } from './list-item-role-mixin.js';
+import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { nothing } from 'lit-html';
 import ResizeObserver from 'resize-observer-polyfill';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
+let tabPressed = false;
+let tabListenerAdded = false;
+function addTabListener() {
+	if (tabListenerAdded) return;
+	tabListenerAdded = true;
+	document.addEventListener('keydown', e => {
+		if (e.keyCode !== 9) return;
+		tabPressed = true;
+	});
+	document.addEventListener('keyup', e => {
+		if (e.keyCode !== 9) return;
+		tabPressed = false;
+	});
+}
+
+let hasDisplayedKeyboardTooltip = false;
+
 const ro = new ResizeObserver(entries => {
 	entries.forEach(entry => {
 		if (!entry || !entry.target || !entry.target.resizedCallback) {
@@ -25,7 +44,7 @@ const ro = new ResizeObserver(entries => {
 
 const defaultBreakpoints = [842, 636, 580, 0];
 
-export const ListItemMixin = superclass => class extends ListItemDragDropMixin(ListItemCheckboxMixin(ListItemRoleMixin(RtlMixin(superclass)))) {
+export const ListItemMixin = superclass => class extends LocalizeCoreElement(ListItemDragDropMixin(ListItemCheckboxMixin(ListItemRoleMixin(RtlMixin(superclass))))) {
 
 	static get properties() {
 		return {
@@ -40,6 +59,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 			 */
 			slim: { type: Boolean },
 			_breakpoint: { type: Number },
+			_displayKeyboardTooltip: { type: Boolean },
 			_dropdownOpen: { type: Boolean, attribute: '_dropdown-open', reflect: true },
 			_hoveringPrimaryAction: { type: Boolean },
 			_focusing: { type: Boolean },
@@ -237,6 +257,15 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 			:host([draggable][selected]:not([disabled])) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border {
 				transform: rotate(1deg);
 			}
+			d2l-tooltip > div {
+				font-weight: 700;
+			}
+			d2l-tooltip > ul {
+				padding-inline-start: 1rem;
+			}
+			.d2l-list-item-tooltip-key {
+				font-weight: 700;
+			}
 		`];
 
 		super.styles && styles.unshift(super.styles);
@@ -249,6 +278,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 		this.slim = false;
 		this._breakpoint = 0;
 		this._contentId = getUniqueId();
+		this._displayKeyboardTooltip = false;
 	}
 
 	get breakpoints() {
@@ -265,6 +295,9 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 	connectedCallback() {
 		super.connectedCallback();
 		ro.observe(this);
+		if (this.role === 'rowgroup') {
+			addTabListener();
+		}
 	}
 
 	disconnectedCallback() {
@@ -303,6 +336,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) {
@@ -350,6 +384,9 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 
 	_onFocusIn() {
 		this._focusing = true;
+		if (this.role !== 'rowgroup' || !tabPressed || hasDisplayedKeyboardTooltip) return;
+		this._displayKeyboardTooltip = true;
+		hasDisplayedKeyboardTooltip = true;
 	}
 
 	_onFocusInPrimaryAction() {
@@ -358,6 +395,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 
 	_onFocusOut() {
 		this._focusing = false;
+		this._displayKeyboardTooltip = false;
 	}
 
 	_onFocusOutPrimaryAction() {
@@ -397,6 +435,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 		};
 
 		const primaryAction = this._renderPrimaryAction ? this._renderPrimaryAction(this._contentId) : null;
+		const tooltipForId = (primaryAction ? this._primaryActionId : (this.selectable ? this._checkboxId : null));
 
 		return html`
 			${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
@@ -412,11 +451,11 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 					${this._renderDragHandle(this._renderOutsideControl)}
 					${this._renderDragTarget(this._renderOutsideControlAction)}
 					${this.selectable ? html`
-					<div slot="control">${ this._renderCheckbox() }</div>
+					<div slot="control">${this._renderCheckbox()}</div>
 					<div slot="control-action"
 						@mouseenter="${this._onMouseEnter}"
 						@mouseleave="${this._onMouseLeave}">
-							${ this._renderCheckboxAction('') }
+							${this._renderCheckboxAction('')}
 					</div>` : nothing }
 					${primaryAction ? html`
 					<div slot="content-action"
@@ -445,6 +484,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 				<div class="d2l-list-item-active-border"></div>
 			</div>
 			${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
+			${this._displayKeyboardTooltip && tooltipForId ? html`<d2l-tooltip align="start" announced for="${tooltipForId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;
 
 	}
@@ -457,4 +497,16 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 		return html`<div slot="outside-control-action" @mouseenter="${this._onMouseEnter}" @mouseleave="${this._onMouseLeave}">${dragTarget}</div>`;
 	}
 
+	_renderTooltipContent() {
+		return html`
+			<div>${this.localize('components.list-item-tooltip.title')}</div>
+			<ul>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.enter-key')}</span> - ${this.localize('components.list-item-tooltip.enter-desc')}</li>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.up-down-key')}</span> - ${this.localize('components.list-item-tooltip.up-down-desc')}</li>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.left-right-key')}</span> - ${this.localize('components.list-item-tooltip.left-right-desc')}</li>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.page-up-down-key')}</span> - ${this.localize('components.list-item-tooltip.page-up-down-desc')}</li>
+			</ul>
+		`;
+	}
+
 };

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

@@ -19,8 +19,9 @@ export const ListItemRoleMixin = superclass => class extends superclass {
 
 		const separators = parent.getAttribute('separators');
 
-		this.role = parent.grid ? 'rowgroup' : 'listitem';
+		this.role = parent.hasAttribute('grid') ? 'rowgroup' : 'listitem';
 		this._separators = separators || undefined;
 		this._extendSeparators = parent.hasAttribute('extend-separators');
 	}
+
 };

package/components/list/list.js

@@ -101,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) => {
@@ -157,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();
 	}
 

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/controllers/subscriber/README.md

@@ -1,6 +1,6 @@
 # Subscriber Controllers
 
-The `SubscriberRegistryController` and the corresponding `*SubscriberController`s can be used to create a subscription system within your app. Components can setup a subscriber registry instance to keep track of all components subscribed to them with the `SubscriberRegistryController`. Whenever it makes sense to do so, they can iterate over their subscribers to perform some action, update them with new data, etc.  Components can subscribe themselves to different registries using the `IdSubscriberController` or the `EventSubscriberController`. This system supports a many-to-many relationship - registry components can contain multiple registry instances with multiple subscribers in each, and subscriber components can subscribe to multiple different registries.
+The `SubscriberRegistryController` and the corresponding `*SubscriberController`s can be used to create a subscription system within your app. Components can set up a subscriber registry instance to keep track of all components subscribed to them with the `SubscriberRegistryController`. Whenever it makes sense to do so, they can iterate over their subscribers to perform some action, update them with new data, etc.  Components can subscribe themselves to different registries using the `IdSubscriberController` or the `EventSubscriberController`. This system supports a many-to-many relationship - registry components can contain multiple registry instances with multiple subscribers in each, and subscriber components can subscribe to multiple different registries.
 
 ## Usage
 
@@ -27,7 +27,7 @@ class CableSubscription extends LitElement {
 			{ onSubscribe: this._unlockKidsChannels.bind(this) }, {});
 	}
 
-	getController(controllerId) {
+	getSubscriberController(controllerId) {
 		if (controllerId === 'sports') {
 			return this._sportsSubscribers;
 		} else if (controllerId === 'movies') {
@@ -51,7 +51,7 @@ class CableSubscription extends LitElement {
 
 When creating the controller, you can pass in callbacks to run whenever a subscriber is added, removed, or `updateSubscribers` is called (which handles request debouncing for you).
 
-The `*subscriberController`s will use a `getController` method that needs to be exposed on the registry component. If you only have one `SubscriberRegistryController` you can simple return that.  If you have multiple, you will return the proper controller depending on the id the subscriber component passed to you.
+The `*subscriberController`s will use a `getSubscriberController` method that needs to be exposed on the registry component. If you only have one `SubscriberRegistryController` you can simple return that.  If you have multiple, you will return the proper controller depending on the id the subscriber component passed to you.
 
 Once this has been set up, components can subscribe to particular registries two different ways:
 1. Using a matching event name with `EventSubscriberController`. The component will need to be a child of the registry component for this to work.