@brightspace-ui/core 3.269.4 → 3.270.0

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,20 +111,29 @@ 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;
 			min-width: min(${MAIN_MIN_WIDTH}px, 100%);
 		}
 
+		.side-nav,
+		.supporting {
+			display: contents;
+		}
+
 		.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 +175,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 +226,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()}
@@ -308,7 +322,11 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		const footerContainerClasses = { 'footer': true, 'fixed-footer': fixedFooter };
 		const footerContents = html`<div class="footer-contents"><slot name="footer" @slotchange="${this.#handleSlotVisibilityChange}"></slot></div>`;
 		return html`
-			<div class="${classMap(footerContainerClasses)}" ?hidden="${!this._slotVisibility['footer']}">
+			<div
+				role="region"
+				aria-label="${this.localize('components.page.footer-region-label')}"
+				class="${classMap(footerContainerClasses)}"
+				?hidden="${!this._slotVisibility['footer']}">
 				${fixedFooter ? footerContents : this.#renderFloatingButtons(footerContents)}	
 			</div>
 		`;
@@ -326,28 +344,30 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 	#renderSideNavPanel() {
 		return html`
-			<nav
-				class="side-nav-panel"
-				style=${styleMap({ width: `${this._panelState.getSize('side-nav')}px` })}
-				?hidden="${!this._slotVisibility['side-nav']}"
-				aria-label="${this.localize('components.page.side-nav-label')}">
-				<slot name="side-nav" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
+			<nav class="side-nav" aria-label="${this.localize('components.page.side-nav-label')}">
+				<div
+					class="side-nav-panel"
+					style=${styleMap({ width: `${this._panelState.getSize('side-nav')}px` })}
+					?hidden="${!this._slotVisibility['side-nav']}">
+					<slot name="side-nav" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
+				</div>
+				${!this._slotVisibility['side-nav'] ? nothing :
+					this.#renderDivider('side-nav', this.localize('components.page.side-nav-divider-label'), 'start')}
 			</nav>
-			${!this._slotVisibility['side-nav'] ? nothing :
-				this.#renderDivider('side-nav', this.localize('components.page.side-nav-divider-label'), 'start')}
 		`;
 	}
 
 	#renderSupportingPanel() {
 		return html`
-			${!this._slotVisibility['supporting'] ? nothing :
-				this.#renderDivider('supporting', this.localize('components.page.supporting-divider-label'), 'end')}
-			<aside
-				class="supporting-panel"
-				style=${styleMap({ width: `${this._panelState.getSize('supporting')}px` })}
-				?hidden="${!this._slotVisibility['supporting']}"
-				aria-label="${this.localize('components.page.supporting-panel-label')}">
-				<slot name="supporting" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
+			<aside class="supporting" aria-label="${this.localize('components.page.supporting-label')}">
+				${!this._slotVisibility['supporting'] ? nothing :
+					this.#renderDivider('supporting', this.localize('components.page.supporting-divider-label'), 'end')}
+				<div
+					class="supporting-panel"
+					style=${styleMap({ width: `${this._panelState.getSize('supporting')}px` })}
+					?hidden="${!this._slotVisibility['supporting']}">
+					<slot name="supporting" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
+				</div>
 			</aside>
 		`;
 	}

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,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\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/lang/ar.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "المزيد",
 	"components.object-property-list.item-placeholder-text": "عنصر نائب",
 	"components.overflow-group.moreActions": "مزيد من الإجراءات",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "الرئيسية",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "جانبية",

package/lang/ca.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "més",
 	"components.object-property-list.item-placeholder-text": "Element de marcador de posició",
 	"components.overflow-group.moreActions": "Més accions",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Lateral",

package/lang/cy.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "mwy",
 	"components.object-property-list.item-placeholder-text": "Eitem Dalfan",
 	"components.overflow-group.moreActions": "Rhagor o Gamau Gweithredu",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Prif",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Ochr",

package/lang/da.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "flere",
 	"components.object-property-list.item-placeholder-text": "Pladsholder-element",
 	"components.overflow-group.moreActions": "Flere handlinger",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Hoved",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Side",

package/lang/de.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "mehr",
 	"components.object-property-list.item-placeholder-text": "Platzhalterelement",
 	"components.overflow-group.moreActions": "Weitere Aktionen",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Haupt-",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Seiten-",

package/lang/en-gb.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "more",
 	"components.object-property-list.item-placeholder-text": "Placeholder Item",
 	"components.overflow-group.moreActions": "More Actions",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Main",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Side",

package/lang/en.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "more",
 	"components.object-property-list.item-placeholder-text": "Placeholder Item",
 	"components.overflow-group.moreActions": "More Actions",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Main",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Side",

package/lang/es-es.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "más",
 	"components.object-property-list.item-placeholder-text": "Elemento de marcador de posición",
 	"components.overflow-group.moreActions": "Más acciones",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Lateral",

package/lang/es.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "más",
 	"components.object-property-list.item-placeholder-text": "Elemento de marcador de posición",
 	"components.overflow-group.moreActions": "Más acciones",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Lateral",

package/lang/fr-fr.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "plus",
 	"components.object-property-list.item-placeholder-text": "Élément d’espace réservé",
 	"components.overflow-group.moreActions": "Plus d’actions",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Principale",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Côté",

package/lang/fr.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "plus",
 	"components.object-property-list.item-placeholder-text": "Élément de paramètre fictif",
 	"components.overflow-group.moreActions": "Plus d’actions",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Côté",

package/lang/haw.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "hou aku",
 	"components.object-property-list.item-placeholder-text": "Mea Paʻa Wahi",
 	"components.overflow-group.moreActions": "Nā Hana Hou",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Nui",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "ʻaoʻao",

package/lang/hi.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "अधिक",
 	"components.object-property-list.item-placeholder-text": "प्लेसहोल्डर आइटम",
 	"components.overflow-group.moreActions": "अधिक क्रियाएँ",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "मुख्य",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "साइड",

package/lang/ja.js

@@ -150,6 +150,7 @@ export default {
 	"components.more-less.more": "増やす",
 	"components.object-property-list.item-placeholder-text": "プレースホルダの項目",
 	"components.overflow-group.moreActions": "その他のアクション",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "メイン",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "サイド",

package/lang/ko.js

@@ -150,6 +150,7 @@ export default {
 	"components.more-less.more": "더 보기",
 	"components.object-property-list.item-placeholder-text": "자리표시자 항목",
 	"components.overflow-group.moreActions": "추가 작업",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "메인",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "사이드",

package/lang/mi.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "ētahi atu",
 	"components.object-property-list.item-placeholder-text": "Tūemi Puriwāhi",
 	"components.overflow-group.moreActions": "Ētahi atu Hohenga",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Matua",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Taha",

package/lang/nl.js

@@ -155,6 +155,7 @@ export default {
 	"components.more-less.more": "meer",
 	"components.object-property-list.item-placeholder-text": "Item tijdelijke aanduiding",
 	"components.overflow-group.moreActions": "Meer acties",
+	"components.page.footer-region-label": "Footer",
 	"components.page.header-nav-label": "Hoofdgedeelte",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Zij",