@brightspace-ui/core 3.269.4 → 3.269.5

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

package/components/form/form.js

@@ -4,7 +4,6 @@ import '../link/link.js';
 import { css, html, LitElement } from 'lit';
 import { findFormElements, flattenMap, getFormElementData, isCustomFormElement, isNativeFormElement } from './form-helper.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
-import { getComposedActiveElement } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { localizeFormElement } from './form-element-localize-helper.js';
@@ -66,9 +65,6 @@ class Form extends LocalizeCoreElement(LitElement) {
 		this._tooltips = new Map();
 		this._validationCustoms = new Set();
 
-		this._onUnload = this._onUnload.bind(this);
-		this._onNativeSubmit = this._onNativeSubmit.bind(this);
-
 		/** @ignore */
 		this.addEventListener('d2l-form-connect', this._onFormConnect);
 		this.addEventListener('d2l-form-errors-change', this._onErrorsChange);
@@ -84,14 +80,14 @@ class Form extends LocalizeCoreElement(LitElement) {
 
 	connectedCallback() {
 		super.connectedCallback();
-		window.addEventListener('beforeunload', this._onUnload);
+		window.addEventListener('beforeunload', this.#onUnload);
 		/** @ignore */
 		this._isSubForm = !this.dispatchEvent(new CustomEvent('d2l-form-connect', { bubbles: true, composed: true, cancelable: true }));
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		window.removeEventListener('beforeunload', this._onUnload);
+		window.removeEventListener('beforeunload', this.#onUnload);
 		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-form-disconnect'));
 		this._isSubForm = false;
@@ -193,6 +189,13 @@ class Form extends LocalizeCoreElement(LitElement) {
 		return flattenedErrorMap;
 	}
 
+	#onUnload = (e) => {
+		if (this.trackChanges && this._dirty) {
+			e.preventDefault();
+			e.returnValue = false;
+		}
+	};
+
 	_displayInvalid(ele, message) {
 		let tooltip = this._tooltips.get(ele);
 		if (!tooltip) {
@@ -296,20 +299,6 @@ class Form extends LocalizeCoreElement(LitElement) {
 		this._updateErrors(ele, errors);
 	}
 
-	_onNativeSubmit(e) {
-		e.preventDefault();
-		e.stopPropagation();
-		const submitter = e.submitter || getComposedActiveElement();
-		this.requestSubmit(submitter);
-	}
-
-	_onUnload(e) {
-		if (this.trackChanges && this._dirty) {
-			e.preventDefault();
-			e.returnValue = false;
-		}
-	}
-
 	_setupDialogValidationReset() {
 		const dialogAncestor = findComposedAncestor(
 			this,

package/components/inputs/input-text.js

@@ -302,8 +302,6 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		this._lastSlotWidth = 0;
 		this._prevValue = '';
 
-		this._handleBlur = this._handleBlur.bind(this);
-		this._handleFocus = this._handleFocus.bind(this);
 		this._perfMonitor = new PerfMonitor(this);
 	}
 
@@ -369,8 +367,8 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		if (this._intersectionObserver) this._intersectionObserver.disconnect();
 		const container = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-text-container');
 		if (!container) return;
-		container.removeEventListener('blur', this._handleBlur, true);
-		container.removeEventListener('focus', this._handleFocus, true);
+		container.removeEventListener('blur', this.#handleBlur, true);
+		container.removeEventListener('focus', this.#handleFocus, true);
 	}
 
 	firstUpdated(changedProperties) {
@@ -380,8 +378,8 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 
 		const container = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-text-container');
 		if (!container) return;
-		container.addEventListener('blur', this._handleBlur, true);
-		container.addEventListener('focus', this._handleFocus, true);
+		container.addEventListener('blur', this.#handleBlur, true);
+		container.addEventListener('focus', this.#handleFocus, true);
 
 		// if initially hidden then update layout when it becomes visible
 		if (typeof(IntersectionObserver) === 'function') {
@@ -534,6 +532,24 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		});
 	}
 
+	#handleBlur = async(e) => {
+		this._focused = false;
+		this.requestValidate(true);
+
+		/**
+		 * This is needed only for Legacy-Edge
+		 * the _handleChange function is NOT triggered, therefore we have to detect the blur and handle it ourselves.
+		 */
+		const browserType = window.navigator.userAgent;
+		if (this._prevValue !== e.target.value && (browserType.indexOf('Edge') > -1)) {
+			this._handleChange();
+		}
+	};
+
+	#handleFocus = () => {
+		this._focused = true;
+	};
+
 	_getAriaLabel() {
 		let label;
 		if (this.label && (this.labelHidden || this.labelledBy)) {
@@ -565,20 +581,6 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		this._hasAfterContent = (afterContent && afterContent.length > 0);
 	}
 
-	async _handleBlur(e) {
-		this._focused = false;
-		this.requestValidate(true);
-
-		/**
-		 * This is needed only for Legacy-Edge
-		 * the _handleChange function is NOT triggered, therefore we have to detect the blur and handle it ourselves.
-		 */
-		const browserType = window.navigator.userAgent;
-		if (this._prevValue !== e.target.value && (browserType.indexOf('Edge') > -1)) {
-			this._handleChange();
-		}
-	}
-
 	_handleChange() {
 		// Change events aren't composed, so we need to re-dispatch
 		this.dispatchEvent(new CustomEvent(
@@ -587,10 +589,6 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		));
 	}
 
-	_handleFocus() {
-		this._focused = true;
-	}
-
 	_handleInput(e) {
 		this._setValue(e.target.value, false);
 		return true;

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

@@ -83,10 +83,8 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 	constructor() {
 		super();
 
-		this._handleItemMutation = this._handleItemMutation.bind(this);
-		this._handleResize = this._handleResize.bind(this);
-		this._itemObserver = new MutationObserver(this._handleItemMutation);
-		this._resizeObserver = new ResizeObserver((entries) => requestAnimationFrame(() => this._handleResize(entries)));
+		this._itemObserver = new MutationObserver(this.#handleItemMutation);
+		this._resizeObserver = new ResizeObserver((entries) => requestAnimationFrame(() => this.#handleResize(entries)));
 
 		this._hasResized = false;
 		this._isObservingResize = false;
@@ -183,6 +181,46 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 		throw new Error('OverflowGroupMixin.getOverflowContainer must be overridden');
 	}
 
+	#handleItemMutation = (mutations) => {
+		if (!mutations || mutations.length === 0) return;
+		if (this._updateOverflowItemsRequested) return;
+
+		let isWidthModifyingMutation = false;
+		for (const mutation of mutations) {
+			if (mutation.attributeName
+				&& (mutation.attributeName === 'selected' || mutation.attributeName === 'text')
+			) {
+				isWidthModifyingMutation = true;
+				break;
+			}
+		}
+
+		this._updateOverflowItemsRequested = true;
+		setTimeout(() => {
+			this._overflowItems = this._slotItems.map((node) => this.convertToOverflowItem(node));
+
+			// when certain attributes change the corresponding item width can also change and so we need to re-get the layouts and chomp
+			if (isWidthModifyingMutation) {
+				this._itemLayouts = this._getItemLayouts(this._slotItems);
+				this._chomp();
+			}
+			this._updateOverflowItemsRequested = false;
+			this.requestUpdate();
+		}, 0);
+	};
+
+	#handleResize = async(entries) => {
+		await (document.fonts ? document.fonts.ready : Promise.resolve()); // computed widths can be incorrect if we don't wait for fonts to load
+		this._availableWidth = Math.ceil(entries[0].contentRect.width);
+
+		if (!this._hasResized) {
+			this._hasResized = true;
+			this._handleSlotChange();
+		} else {
+			this._chomp();
+		}
+	};
+
 	_autoDetectBoundaries(items) {
 		if (!items) return;
 
@@ -335,46 +373,6 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 		return filteredNodes;
 	}
 
-	_handleItemMutation(mutations) {
-		if (!mutations || mutations.length === 0) return;
-		if (this._updateOverflowItemsRequested) return;
-
-		let isWidthModifyingMutation = false;
-		for (const mutation of mutations) {
-			if (mutation.attributeName
-				&& (mutation.attributeName === 'selected' || mutation.attributeName === 'text')
-			) {
-				isWidthModifyingMutation = true;
-				break;
-			}
-		}
-
-		this._updateOverflowItemsRequested = true;
-		setTimeout(() => {
-			this._overflowItems = this._slotItems.map((node) => this.convertToOverflowItem(node));
-
-			// when certain attributes change the corresponding item width can also change and so we need to re-get the layouts and chomp
-			if (isWidthModifyingMutation) {
-				this._itemLayouts = this._getItemLayouts(this._slotItems);
-				this._chomp();
-			}
-			this._updateOverflowItemsRequested = false;
-			this.requestUpdate();
-		}, 0);
-	}
-
-	async _handleResize(entries) {
-		await (document.fonts ? document.fonts.ready : Promise.resolve()); // computed widths can be incorrect if we don't wait for fonts to load
-		this._availableWidth = Math.ceil(entries[0].contentRect.width);
-
-		if (!this._hasResized) {
-			this._hasResized = true;
-			this._handleSlotChange();
-		} else {
-			this._chomp();
-		}
-	}
-
 	_handleSlotChange() {
 		if (!this._hasResized) return;
 		requestAnimationFrame(async() => {

package/components/page/page.js

@@ -111,11 +111,15 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		}
 
 		.content {
+			box-sizing: border-box;
 			display: flex;
 			margin-inline: var(--d2l-page-margin-inline, 0);
 			max-width: var(--d2l-page-content-max-width, 100%);
 			padding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */
 		}
+		.content.has-panels {
+			min-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));
+		}
 
 		main {
 			flex: 1;
@@ -124,7 +128,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 		.side-nav-panel,
 		.supporting-panel {
-			height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));
+			max-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));
 			overflow: clip auto;
 			position: sticky;
 			top: var(--d2l-page-header-height, 0);
@@ -166,6 +170,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			for (const entry of entries) {
 				if (entry.target.classList.contains('header')) {
 					this._headerHeight = entry.target.offsetHeight;
+					this.style.setProperty('--d2l-page-header-height-measured', `${this._headerHeight}px`);
 
 					const height = this._headerIsSticky ? this._headerHeight : 0;
 					this.style.setProperty('--d2l-page-header-height', `${height}px`);
@@ -216,11 +221,15 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			'page': true,
 			'header-sticky': this._headerIsSticky
 		};
+		const contentClasses = {
+			'content': true,
+			'has-panels': this._slotVisibility['side-nav'] || this._slotVisibility['supporting']
+		};
 
 		return html`
 			<div class="${classMap(pageClasses)}">
 				${this.#renderHeader()}
-				<div class="content">
+				<div class="${classMap(contentClasses)}">
 					${this.#renderSideNavPanel()}
 					<main><slot></slot></main>
 					${this.#renderSupportingPanel()}

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

@@ -168,9 +168,7 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 		this._scrollbarRight = false;
 		this._syncDriver = null;
 		this._syncDriverTimeout = null;
-		this._checkScrollThresholds = this._checkScrollThresholds.bind(this);
 
-		this._synchronizeScroll = this._synchronizeScroll.bind(this);
 	}
 
 	disconnectedCallback() {
@@ -218,7 +216,7 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 	checkScrollbar() {
 		if (!this._container) return;
 		this._hScrollbar = this._container.offsetWidth !== this._container.scrollWidth;
-		this._checkScrollThresholds();
+		this.#checkScrollThresholds();
 	}
 
 	notifyResize() {
@@ -237,13 +235,24 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 		}
 	}
 
-	_checkScrollThresholds() {
+	#checkScrollThresholds = () => {
 		if (!this._container) return;
 		const lowerScrollValue = this._container.scrollWidth - this._baseContainer.offsetWidth - Math.abs(this._container.scrollLeft);
 		this._scrollbarLeft = (this._container.scrollLeft === 0);
 		this._scrollbarRight = (lowerScrollValue <= 0);
 
-	}
+	};
+
+	#synchronizeScroll = (e) => {
+		if (this._syncDriver && e.target !== this._syncDriver) return;
+		if (this._syncDriverTimeout) clearTimeout(this._syncDriverTimeout);
+
+		this._syncDriver = e.target;
+		this._allScrollers.forEach(element => {
+			if (element && element !== e.target) element.scrollLeft = e.target.scrollLeft;
+		});
+		this._syncDriverTimeout = setTimeout(() => this._syncDriver = null, 100);
+	};
 
 	_disconnectAll() {
 		this._resizeObserver?.disconnect();
@@ -252,11 +261,11 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 			this._container.style.removeProperty('overflow-x');
 			this._container.classList.remove('d2l-scroll-wrapper-focus');
 			this._container.removeAttribute('tabindex');
-			this._container.removeEventListener('scroll', this._synchronizeScroll);
-			this._container.removeEventListener('scroll', this._checkScrollThresholds);
+			this._container.removeEventListener('scroll', this.#synchronizeScroll);
+			this._container.removeEventListener('scroll', this.#checkScrollThresholds);
 			this._secondaryScrollers.forEach(element => {
 				element.style.removeProperty('overflow-x');
-				element.removeEventListener('scroll', this._synchronizeScroll);
+				element.removeEventListener('scroll', this.#synchronizeScroll);
 			});
 		}
 	}
@@ -276,17 +285,6 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 		this.scrollDistance(scrollDistance, true);
 	}
 
-	_synchronizeScroll(e) {
-		if (this._syncDriver && e.target !== this._syncDriver) return;
-		if (this._syncDriverTimeout) clearTimeout(this._syncDriverTimeout);
-
-		this._syncDriver = e.target;
-		this._allScrollers.forEach(element => {
-			if (element && element !== e.target) element.scrollLeft = e.target.scrollLeft;
-		});
-		this._syncDriverTimeout = setTimeout(() => this._syncDriver = null, 100);
-	}
-
 	_updateScrollTargets() {
 		this._disconnectAll();
 
@@ -307,17 +305,17 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 			}
 			this._container.style.overflowX = 'auto';
 			this._resizeObserver.observe(this._container);
-			this._container.addEventListener('scroll', this._checkScrollThresholds);
+			this._container.addEventListener('scroll', this.#checkScrollThresholds);
 			this._updateTabIndex();
 		}
 
 		if (this._secondaryScrollers.length) {
 			this._secondaryScrollers.forEach(element => {
 				element.style.overflowX = 'hidden';
-				element.addEventListener('scroll', this._synchronizeScroll);
+				element.addEventListener('scroll', this.#synchronizeScroll);
 			});
-			this._container.addEventListener('scroll', this._synchronizeScroll);
-			this._synchronizeScroll({ target: this._container });
+			this._container.addEventListener('scroll', this.#synchronizeScroll);
+			this.#synchronizeScroll({ target: this._container });
 		}
 	}
 

package/custom-elements.json

@@ -6489,7 +6489,7 @@
         {
           "name": "styles",
           "type": "CSSResult",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\theight: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "widthType",

package/mixins/rtl/rtl-mixin.js

@@ -14,26 +14,25 @@ export const RtlMixin = dedupeMixin(superclass => class extends superclass {
 	constructor() {
 		super();
 		this._localeSettings = getDocumentLocaleSettings();
-		this._handleLanguageChange = this._handleLanguageChange.bind(this);
-		this._handleLanguageChange();
+		this.#handleLanguageChange();
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
-		this._localeSettings.addChangeListener(this._handleLanguageChange);
+		this._localeSettings.addChangeListener(this.#handleLanguageChange);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this._localeSettings.removeChangeListener(this._handleLanguageChange);
+		this._localeSettings.removeChangeListener(this.#handleLanguageChange);
 	}
 
-	_handleLanguageChange() {
+	#handleLanguageChange = () => {
 		const dir = document.documentElement.getAttribute('dir');
 		// avoid reflecting "ltr" for better performance
 		if (dir && (dir !== 'ltr' || this.dir === 'rtl')) {
 			this.dir = dir;
 		}
-	}
+	};
 
 });

package/package.json

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