@brightspace-ui/core 3.269.4 → 3.270.0

package/components/alert/alert-toast.js

@@ -163,10 +163,6 @@ class AlertToast extends LitElement {
 		this._state = states.CLOSED;
 		this._totalSiblingHeightBelow = 0;
 
-		this._closeTimerStop = this._closeTimerStop.bind(this);
-		this._handlePageResize = this._handlePageResize.bind(this);
-		this._handleSiblingCloseTimerStart = this._handleSiblingCloseTimerStart.bind(this);
-		this._handleSiblingResize = this._handleSiblingResize.bind(this);
 		this._resizeObserver = null;
 	}
 
@@ -185,11 +181,11 @@ class AlertToast extends LitElement {
 
 	async connectedCallback() {
 		super.connectedCallback();
-		document.body.addEventListener('d2l-alert-toast-close', this._handleSiblingResize);
-		document.body.addEventListener('d2l-alert-toast-resize', this._handleSiblingResize);
-		document.body.addEventListener('d2l-alert-toast-timer-start', this._handleSiblingCloseTimerStart);
-		document.body.addEventListener('d2l-alert-toast-timer-stop', this._closeTimerStop);
-		if (mediaQueryList.addEventListener) mediaQueryList.addEventListener('change', this._handlePageResize);
+		document.body.addEventListener('d2l-alert-toast-close', this.#handleSiblingResize);
+		document.body.addEventListener('d2l-alert-toast-resize', this.#handleSiblingResize);
+		document.body.addEventListener('d2l-alert-toast-timer-start', this.#handleSiblingCloseTimerStart);
+		document.body.addEventListener('d2l-alert-toast-timer-stop', this.#closeTimerStop);
+		if (mediaQueryList.addEventListener) mediaQueryList.addEventListener('change', this.#handlePageResize);
 
 		await this.updateComplete;
 		this._resizeObserver = new ResizeObserver((e) => requestAnimationFrame(() => this._handleResize(e)));
@@ -198,12 +194,12 @@ class AlertToast extends LitElement {
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		document.body.removeEventListener('d2l-alert-toast-close', this._handleSiblingResize);
-		document.body.removeEventListener('d2l-alert-toast-resize', this._handleSiblingResize);
-		document.body.removeEventListener('d2l-alert-toast-timer-start', this._handleSiblingCloseTimerStart);
-		document.body.removeEventListener('d2l-alert-toast-timer-stop', this._closeTimerStop);
+		document.body.removeEventListener('d2l-alert-toast-close', this.#handleSiblingResize);
+		document.body.removeEventListener('d2l-alert-toast-resize', this.#handleSiblingResize);
+		document.body.removeEventListener('d2l-alert-toast-timer-start', this.#handleSiblingCloseTimerStart);
+		document.body.removeEventListener('d2l-alert-toast-timer-stop', this.#closeTimerStop);
 		if (this._resizeObserver) this._resizeObserver.disconnect();
-		if (mediaQueryList.removeEventListener) mediaQueryList.removeEventListener('change', this._handlePageResize);
+		if (mediaQueryList.removeEventListener) mediaQueryList.removeEventListener('change', this.#handlePageResize);
 
 		if (this._hasMouse) ALERT_HAS_HOVER = false;
 		if (this._hasFocus) ALERT_HAS_FOCUS = false;
@@ -274,6 +270,39 @@ class AlertToast extends LitElement {
 		}
 	}
 
+	#closeTimerStop = () => {
+		if (!this.open) return;
+		clearTimeout(this._setTimeoutId);
+	};
+
+	#handlePageResize = (e) => {
+		this._smallWidth = e.matches;
+	};
+
+	#handleSiblingCloseTimerStart = () => {
+		if (!this.open) return;
+		this._closeTimerStart();
+	};
+
+	#handleSiblingResize = (e) => {
+		if (e?.composedPath()[0] === this || !this.open) return;
+
+		if (!e.detail.opening) {
+			const containerBottom = this._innerContainer.getBoundingClientRect().bottom;
+			const siblingContainerBottom = e.detail.bottom;
+			if (siblingContainerBottom < containerBottom) return; // resized alert is above this alert, no need to adjust bottom spacing
+		}
+
+		this._totalSiblingHeightBelow += e.detail.heightDifference;
+		if (e.detail.opening) {
+			this._numAlertsBelow += 1;
+			if (!activeReduceMotion) this._state = states.SLIDING;
+		} else if (e.detail.closing) {
+			this._numAlertsBelow -= 1;
+			if (!activeReduceMotion) this._state = states.SLIDING;
+		}
+	};
+
 	_closeTimerStart() {
 		clearTimeout(this._setTimeoutId);
 		if (!this.noAutoClose && !ALERT_HAS_FOCUS && !ALERT_HAS_HOVER) {
@@ -284,20 +313,11 @@ class AlertToast extends LitElement {
 		}
 	}
 
-	_closeTimerStop() {
-		if (!this.open) return;
-		clearTimeout(this._setTimeoutId);
-	}
-
 	_handleButtonPress(e) {
 		e.stopPropagation();
 		this.dispatchEvent(new CustomEvent('d2l-alert-toast-button-press'));
 	}
 
-	_handlePageResize(e) {
-		this._smallWidth = e.matches;
-	}
-
 	_handleResize() {
 		const boundingClientRect = this._innerContainer.getBoundingClientRect();
 		const newHeight = boundingClientRect.height;
@@ -318,30 +338,6 @@ class AlertToast extends LitElement {
 		));
 	}
 
-	_handleSiblingCloseTimerStart() {
-		if (!this.open) return;
-		this._closeTimerStart();
-	}
-
-	_handleSiblingResize(e) {
-		if (e?.composedPath()[0] === this || !this.open) return;
-
-		if (!e.detail.opening) {
-			const containerBottom = this._innerContainer.getBoundingClientRect().bottom;
-			const siblingContainerBottom = e.detail.bottom;
-			if (siblingContainerBottom < containerBottom) return; // resized alert is above this alert, no need to adjust bottom spacing
-		}
-
-		this._totalSiblingHeightBelow += e.detail.heightDifference;
-		if (e.detail.opening) {
-			this._numAlertsBelow += 1;
-			if (!activeReduceMotion) this._state = states.SLIDING;
-		} else if (e.detail.closing) {
-			this._numAlertsBelow -= 1;
-			if (!activeReduceMotion) this._state = states.SLIDING;
-		}
-	}
-
 	_onBlur() {
 		ALERT_HAS_FOCUS = false;
 		this._hasFocus = false;
@@ -361,7 +357,7 @@ class AlertToast extends LitElement {
 	_onFocus() {
 		ALERT_HAS_FOCUS = true;
 		this._hasFocus = true;
-		this._closeTimerStop();
+		this.#closeTimerStop();
 		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-alert-toast-timer-stop', { bubbles: true, composed: false }));
 	}
@@ -369,7 +365,7 @@ class AlertToast extends LitElement {
 	_onMouseEnter() {
 		ALERT_HAS_HOVER = true;
 		this._hasMouse = true;
-		this._closeTimerStop();
+		this.#closeTimerStop();
 		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-alert-toast-timer-stop', { bubbles: true, composed: false }));
 	}
@@ -458,7 +454,7 @@ class AlertToast extends LitElement {
 		if (newlyOpened || newlyOpenedReduceMotion) {
 			this._closeTimerStart();
 		} else if (newState !== states.SLIDING && newState !== states.OPEN) {
-			this._closeTimerStop();
+			this.#closeTimerStop();
 		}
 	}
 }

package/components/card/card.js

@@ -227,15 +227,13 @@ class Card extends LitElement {
 		this._footerHidden = true;
 		this._hover = false;
 		this._tooltipShowing = false;
-		this._onBadgeResize = this._onBadgeResize.bind(this);
-		this._onFooterResize = this._onFooterResize.bind(this);
 	}
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
-		const badgeObserver = new ResizeObserver(this._onBadgeResize);
+		const badgeObserver = new ResizeObserver(this.#onBadgeResize);
 		badgeObserver.observe(this.shadowRoot.querySelector('.d2l-card-badge'));
-		const footerObserver = new ResizeObserver(this._onFooterResize);
+		const footerObserver = new ResizeObserver(this.#onFooterResize);
 		footerObserver.observe(this.shadowRoot.querySelector('.d2l-card-footer'));
 
 		if (this._focusOnFirstRender) {
@@ -307,11 +305,19 @@ class Card extends LitElement {
 		else super.focus();
 	}
 
-	_onBadgeResize(entries) {
+	#onBadgeResize = (entries) => {
 		if (!entries || entries.length === 0) return;
 		const entry = entries[0];
 		requestAnimationFrame(() => this._badgeMarginTop = `${-0.5 * entry.contentRect.height}px`);
-	}
+	};
+
+	#onFooterResize = (entries) => {
+		if (!entries || entries.length === 0) return;
+		const entry = entries[0];
+		// firefox has a rounding error when calculating the height of the contentRect
+		// with `box-sizing: border-box;` so check for numbers which are close to 0 as well
+		requestAnimationFrame(() => this._footerHidden = (entry.contentRect.height < 1));
+	};
 
 	_onDropdownClose() {
 		this._dropdownActionOpen = false;
@@ -321,14 +327,6 @@ class Card extends LitElement {
 		this._dropdownActionOpen = true;
 	}
 
-	_onFooterResize(entries) {
-		if (!entries || entries.length === 0) return;
-		const entry = entries[0];
-		// firefox has a rounding error when calculating the height of the contentRect
-		// with `box-sizing: border-box;` so check for numbers which are close to 0 as well
-		requestAnimationFrame(() => this._footerHidden = (entry.contentRect.height < 1));
-	}
-
 	_onLinkBlur() {
 		this._active = false;
 	}

package/components/dialog/dialog-mixin.js

@@ -79,7 +79,6 @@ export const DialogMixin = superclass => class extends superclass {
 		this._autoSize = true;
 		this._dialogId = getUniqueId();
 		this._fullscreenWithin = 0;
-		this._handleMvcDialogOpen = this._handleMvcDialogOpen.bind(this);
 		this._inIframe = false;
 		this._isDialogMixin = true;
 		this._isFullHeight = false;
@@ -93,21 +92,19 @@ export const DialogMixin = superclass => class extends superclass {
 		this._scroll = false;
 		this._state = null;
 		this._top = 0;
-		this._updateOverflow = this._updateOverflow.bind(this);
-		this._updateSize = this._updateSize.bind(this);
 		this._width = 0;
 	}
 
 	async connectedCallback() {
 		super.connectedCallback();
 		if (this._useNative) {
-			window.addEventListener('d2l-mvc-dialog-open', this._handleMvcDialogOpen);
+			window.addEventListener('d2l-mvc-dialog-open', this.#handleMvcDialogOpen);
 		}
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		window.removeEventListener('d2l-mvc-dialog-open', this._handleMvcDialogOpen);
+		window.removeEventListener('d2l-mvc-dialog-open', this.#handleMvcDialogOpen);
 
 		// If the dialog is disconnected before the close animation finishes
 		if (this.opened && closeDialogWhenDisconnectedFlag) {
@@ -158,7 +155,7 @@ export const DialogMixin = superclass => class extends superclass {
 	resize() {
 		return new Promise(resolve => {
 			setTimeout(async() => {
-				await this._updateSize();
+				await this.#updateSize();
 				resolve();
 			}, 0);
 		});
@@ -172,10 +169,56 @@ export const DialogMixin = superclass => class extends superclass {
 
 	#useNativeInitialized = false;
 
+	#handleMvcDialogOpen = () => {
+		// native dialogs on top layer will be stacked on non-native dialogs regardless of z-index
+		// so we need to opt out of native dialogs if a non-native nested dialog is launched
+		this._useNative = false;
+	};
+
+	#updateOverflow = () => {
+		if (!this.shadowRoot) return;
+		const content = this.shadowRoot.querySelector('.d2l-dialog-content');
+		// On Windows, browser zoom can cause scrollTop to be a fraction
+		const bottomOverflow = content.scrollHeight - (Math.ceil(content.scrollTop) + content.clientHeight);
+		this._overflowTop = (content.scrollTop > 0);
+		this._overflowBottom = (bottomOverflow > 0);
+	};
+
+	#updateSize = async() => {
+		if (this._autoSize) {
+			if (this._ifrauContextInfo) {
+				if (this._ifrauContextInfo.top > defaultMargin.top) {
+					this._top = 0;
+					this._margin.top = 0;
+				} else if (this._ifrauContextInfo.top < 0) {
+					this._top = defaultMargin.top - this._ifrauContextInfo.top;
+					this._margin.top = defaultMargin.top;
+				} else {
+					this._top = defaultMargin.top - this._ifrauContextInfo.top;
+					this._margin.top = defaultMargin.top - this._ifrauContextInfo.top;
+				}
+			}
+			this._width = this._getWidth();
+			this._left = this._getLeft();
+			await this.updateComplete;
+			this._height = this._getHeight();
+			await this.updateComplete;
+		} else {
+			this._width = 0;
+		}
+		await new Promise(resolve => {
+			requestAnimationFrame(async() => {
+				this.#updateOverflow();
+				await this.updateComplete;
+				resolve();
+			});
+		});
+	};
+
 	_addHandlers() {
-		window.addEventListener('resize', this._updateSize);
+		window.addEventListener('resize', this.#updateSize);
 		this.addEventListener('touchstart', this._handleTouchStart);
-		if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-dialog-content').addEventListener('scroll', this._updateOverflow);
+		if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-dialog-content').addEventListener('scroll', this.#updateOverflow);
 	}
 
 	_close(action) {
@@ -379,12 +422,6 @@ export const DialogMixin = superclass => class extends superclass {
 		}
 	}
 
-	_handleMvcDialogOpen() {
-		// native dialogs on top layer will be stacked on non-native dialogs regardless of z-index
-		// so we need to opt out of native dialogs if a non-native nested dialog is launched
-		this._useNative = false;
-	}
-
 	_handleTouchStart(e) {
 		// elements external to the dialog such as primary-secondary template should not be reacting
 		// to touchstart events originating inside the dialog or backdrop
@@ -450,7 +487,7 @@ export const DialogMixin = superclass => class extends superclass {
 				this._scroll = true;
 			}, 0);
 
-			await this._updateSize();
+			await this.#updateSize();
 			if (!this._useNative) this._state = 'showing';
 			await this.updateComplete;
 
@@ -470,7 +507,7 @@ export const DialogMixin = superclass => class extends superclass {
 			requestAnimationFrame(() => this._updateFocusableContentElemPresent());
 
 			await this.waitForUpdateComplete();
-			await this._updateSize();
+			await this.#updateSize();
 			/** Dispatched when the dialog is opened */
 			this.dispatchEvent(new CustomEvent(
 				'd2l-dialog-open', { bubbles: true, composed: true }
@@ -481,9 +518,9 @@ export const DialogMixin = superclass => class extends superclass {
 	}
 
 	_removeHandlers() {
-		window.removeEventListener('resize', this._updateSize);
+		window.removeEventListener('resize', this.#updateSize);
 		this.removeEventListener('touchstart', this._handleTouchStart);
-		this.shadowRoot?.querySelector('.d2l-dialog-content')?.removeEventListener('scroll', this._updateOverflow);
+		this.shadowRoot?.querySelector('.d2l-dialog-content')?.removeEventListener('scroll', this.#updateOverflow);
 	}
 
 	_render(inner, info, iframeTopOverride) {
@@ -564,44 +601,4 @@ export const DialogMixin = superclass => class extends superclass {
 		return elementToFocus;
 	}
 
-	_updateOverflow() {
-		if (!this.shadowRoot) return;
-		const content = this.shadowRoot.querySelector('.d2l-dialog-content');
-		// On Windows, browser zoom can cause scrollTop to be a fraction
-		const bottomOverflow = content.scrollHeight - (Math.ceil(content.scrollTop) + content.clientHeight);
-		this._overflowTop = (content.scrollTop > 0);
-		this._overflowBottom = (bottomOverflow > 0);
-	}
-
-	async _updateSize() {
-		if (this._autoSize) {
-			if (this._ifrauContextInfo) {
-				if (this._ifrauContextInfo.top > defaultMargin.top) {
-					this._top = 0;
-					this._margin.top = 0;
-				} else if (this._ifrauContextInfo.top < 0) {
-					this._top = defaultMargin.top - this._ifrauContextInfo.top;
-					this._margin.top = defaultMargin.top;
-				} else {
-					this._top = defaultMargin.top - this._ifrauContextInfo.top;
-					this._margin.top = defaultMargin.top - this._ifrauContextInfo.top;
-				}
-			}
-			this._width = this._getWidth();
-			this._left = this._getLeft();
-			await this.updateComplete;
-			this._height = this._getHeight();
-			await this.updateComplete;
-		} else {
-			this._width = 0;
-		}
-		await new Promise(resolve => {
-			requestAnimationFrame(async() => {
-				this._updateOverflow();
-				await this.updateComplete;
-				resolve();
-			});
-		});
-	}
-
 };

package/components/dialog/dialog.js

@@ -102,7 +102,6 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 		this.preferNative = false;
 		this.width = 600;
 		this._criticalLabelId = getUniqueId();
-		this._handleResize = this._handleResize.bind(this);
 		this._titleId = getUniqueId();
 		this._textId = getUniqueId();
 	}
@@ -113,17 +112,17 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 
 	connectedCallback() {
 		super.connectedCallback();
-		if (mediaQueryList.addEventListener) mediaQueryList.addEventListener('change', this._handleResize);
+		if (mediaQueryList.addEventListener) mediaQueryList.addEventListener('change', this.#handleResize);
 	}
 
 	disconnectedCallback() {
-		if (mediaQueryList.removeEventListener) mediaQueryList.removeEventListener('change', this._handleResize);
+		if (mediaQueryList.removeEventListener) mediaQueryList.removeEventListener('change', this.#handleResize);
 		super.disconnectedCallback();
 	}
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
-		this._handleResize();
+		this.#handleResize();
 	}
 
 	render() {
@@ -202,6 +201,11 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 		}
 	}
 
+	#handleResize = () => {
+		this._autoSize = !mediaQueryList.matches;
+		this.resize();
+	};
+
 	_abort() {
 		this._close('abort');
 	}
@@ -211,11 +215,6 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 		this._hasFooterContent = (footerContent && footerContent.length > 0);
 	}
 
-	_handleResize() {
-		this._autoSize = !mediaQueryList.matches;
-		this.resize();
-	}
-
 	_handleSlotChange() {
 		requestAnimationFrame(() => this._updateFocusableContentElemPresent());
 	}

package/components/dropdown/dropdown-opener-mixin.js

@@ -62,7 +62,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this._isHovering = false;
 		this._isFading = false;
 
-		this._onOutsideClick = this._onOutsideClick.bind(this);
 		this._contentRendered = null;
 		this._openerRendered = null;
 	}
@@ -77,7 +76,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this.addEventListener('mouseleave', this.__onMouseLeave);
 
 		if (this.openOnHover) {
-			document.body.addEventListener('mouseup', this._onOutsideClick);
+			document.body.addEventListener('mouseup', this.#onOutsideClick);
 		}
 	}
 
@@ -90,7 +89,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this.removeEventListener('mouseleave', this.__onMouseLeave);
 
 		if (this.openOnHover) {
-			document.body.removeEventListener('mouseup', this._onOutsideClick);
+			document.body.removeEventListener('mouseup', this.#onOutsideClick);
 		}
 	}
 
@@ -167,6 +166,22 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this.dropdownOpened = !this.dropdownOpened;
 	}
 
+	/* used by open-on-hover option */
+	#onOutsideClick = (e) => {
+		if (!this.dropdownOpened) return;
+		const dropdownContent = this.__getContentElement();
+		const isWithinDropdown = isComposedAncestor(dropdownContent, e.composedPath()[0]);
+		const isWithinOpener = isComposedAncestor(this.getOpenerElement(), e.composedPath()[0]);
+
+		const isBackdropClick = isWithinDropdown
+			&& dropdownContent._mobile
+			&& e.composedPath().find(node => node.nodeName === 'D2L-BACKDROP');
+
+		if (!isWithinOpener && (!isWithinDropdown || isBackdropClick)) {
+			this.closeDropdown();
+		}
+	};
+
 	__dispatchOpenerClickEvent() {
 		/** Dispatched when the opener is clicked, useful for when no-auto-open is enabled */
 		this.dispatchEvent(new CustomEvent(
@@ -289,22 +304,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this._isFading = false;
 	}
 
-	/* used by open-on-hover option */
-	_onOutsideClick(e) {
-		if (!this.dropdownOpened) return;
-		const dropdownContent = this.__getContentElement();
-		const isWithinDropdown = isComposedAncestor(dropdownContent, e.composedPath()[0]);
-		const isWithinOpener = isComposedAncestor(this.getOpenerElement(), e.composedPath()[0]);
-
-		const isBackdropClick = isWithinDropdown
-			&& dropdownContent._mobile
-			&& e.composedPath().find(node => node.nodeName === 'D2L-BACKDROP');
-
-		if (!isWithinOpener && (!isWithinDropdown || isBackdropClick)) {
-			this.closeDropdown();
-		}
-	}
-
 	_setOpenerElementAttribute(val, setActive = false, hasPopup) {
 		const opener = this.getOpenerElement();
 		if (!opener) return false;

package/components/focus-trap/focus-trap.js

@@ -33,9 +33,6 @@ class FocusTrap extends FocusMixin(LitElement) {
 	constructor() {
 		super();
 		this.trap = false;
-		this._handleBodyFocus = this._handleBodyFocus.bind(this);
-		this._handleLegacyPromptOpen = this._handleLegacyPromptOpen.bind(this);
-		this._handleLegacyPromptClose = this._handleLegacyPromptClose.bind(this);
 		this._legacyPromptIds = new Set();
 	}
 
@@ -45,16 +42,16 @@ class FocusTrap extends FocusMixin(LitElement) {
 
 	connectedCallback() {
 		super.connectedCallback();
-		document.body.addEventListener('focus', this._handleBodyFocus, true);
-		document.body.addEventListener('d2l-legacy-prompt-open', this._handleLegacyPromptOpen);
-		document.body.addEventListener('d2l-legacy-prompt-close', this._handleLegacyPromptClose);
+		document.body.addEventListener('focus', this.#handleBodyFocus, true);
+		document.body.addEventListener('d2l-legacy-prompt-open', this.#handleLegacyPromptOpen);
+		document.body.addEventListener('d2l-legacy-prompt-close', this.#handleLegacyPromptClose);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		document.body.removeEventListener('focus', this._handleBodyFocus, true);
-		document.body.removeEventListener('d2l-legacy-prompt-open', this._handleLegacyPromptOpen);
-		document.body.removeEventListener('d2l-legacy-prompt-close', this._handleLegacyPromptClose);
+		document.body.removeEventListener('focus', this.#handleBodyFocus, true);
+		document.body.removeEventListener('d2l-legacy-prompt-open', this.#handleLegacyPromptOpen);
+		document.body.removeEventListener('d2l-legacy-prompt-close', this.#handleLegacyPromptClose);
 	}
 
 	render() {
@@ -83,6 +80,25 @@ class FocusTrap extends FocusMixin(LitElement) {
 		'.equatio-toolbar-shadow-root-container'
 	].join(', ');
 
+	#handleBodyFocus = (e) => {
+		const lastTrap = traps[traps.length - 1];
+		if (!this.trap || this._legacyPromptIds.size > 0 || lastTrap !== this) return;
+		const container = this._getContainer();
+		const target = e.composedPath()[0];
+		if (isComposedAncestor(container, target) || FocusTrap.#isExempt(target)) return;
+		this._focusFirst();
+	};
+
+	#handleLegacyPromptClose = (e) => {
+		this._legacyPromptIds.delete(e.detail.id);
+		this.requestUpdate();
+	};
+
+	#handleLegacyPromptOpen = (e) => {
+		this._legacyPromptIds.add(e.detail.id);
+		this.requestUpdate();
+	};
+
 	_focusFirst() {
 		const focusable = this.shadowRoot &&
 			getNextFocusable(this.shadowRoot.querySelector('.d2l-focus-trap-start'));
@@ -94,15 +110,6 @@ class FocusTrap extends FocusMixin(LitElement) {
 		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-focus-trap-start').parentNode;
 	}
 
-	_handleBodyFocus(e) {
-		const lastTrap = traps[traps.length - 1];
-		if (!this.trap || this._legacyPromptIds.size > 0 || lastTrap !== this) return;
-		const container = this._getContainer();
-		const target = e.composedPath()[0];
-		if (isComposedAncestor(container, target) || FocusTrap.#isExempt(target)) return;
-		this._focusFirst();
-	}
-
 	_handleEndFocusIn(e) {
 		const container = this._getContainer();
 		if (this.shadowRoot && (isComposedAncestor(container, e.relatedTarget) || FocusTrap.#isExempt(e.relatedTarget))) {
@@ -116,16 +123,6 @@ class FocusTrap extends FocusMixin(LitElement) {
 		this._focusFirst();
 	}
 
-	_handleLegacyPromptClose(e) {
-		this._legacyPromptIds.delete(e.detail.id);
-		this.requestUpdate();
-	}
-
-	_handleLegacyPromptOpen(e) {
-		this._legacyPromptIds.add(e.detail.id);
-		this.requestUpdate();
-	}
-
 	_handleStartFocusIn(e) {
 		const container = this._getContainer();
 		if (this.shadowRoot && (isComposedAncestor(container, e.relatedTarget) || FocusTrap.#isExempt(e.relatedTarget))) {

package/components/form/form-element-mixin.js

@@ -113,8 +113,6 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 
 	constructor() {
 		super();
-		this._validationCustomConnected = this._validationCustomConnected.bind(this);
-		this._onFormElementErrorsChange = this._onFormElementErrorsChange.bind(this);
 
 		this._firstUpdateResolve = null;
 		this._firstUpdatePromise = new Promise((resolve) => {
@@ -160,14 +158,14 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 
 	connectedCallback() {
 		super.connectedCallback();
-		this.shadowRoot.addEventListener('d2l-validation-custom-connected', this._validationCustomConnected);
-		this.shadowRoot.addEventListener('d2l-form-element-errors-change', this._onFormElementErrorsChange);
+		this.shadowRoot.addEventListener('d2l-validation-custom-connected', this.#validationCustomConnected);
+		this.shadowRoot.addEventListener('d2l-form-element-errors-change', this.#onFormElementErrorsChange);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.shadowRoot.removeEventListener('d2l-validation-custom-connected', this._validationCustomConnected);
-		this.shadowRoot.removeEventListener('d2l-form-element-errors-change', this._onFormElementErrorsChange);
+		this.shadowRoot.removeEventListener('d2l-validation-custom-connected', this.#validationCustomConnected);
+		this.shadowRoot.removeEventListener('d2l-form-element-errors-change', this.#onFormElementErrorsChange);
 	}
 
 	firstUpdated(changedProperties) {
@@ -261,7 +259,7 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		this._validationCustoms.delete(custom);
 	}
 
-	_onFormElementErrorsChange(e) {
+	#onFormElementErrorsChange = (e) => {
 		e.stopPropagation();
 		const errors = e.detail.errors;
 		if (errors.length === 0) {
@@ -273,9 +271,9 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 			this.childErrors.set(e.target, errors);
 			this.requestUpdate('childErrors');
 		}
-	}
+	};
 
-	_validationCustomConnected(e) {
+	#validationCustomConnected = (e) => {
 		e.stopPropagation();
 		const custom = e.composedPath()[0];
 		this.validationCustomConnected(custom);
@@ -285,6 +283,6 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 			this.validationCustomDisconnected(custom);
 		};
 		custom.addEventListener('d2l-validation-custom-disconnected', onDisconnect);
-	}
+	};
 
 };