@brightspace-ui/core 3.288.3 → 3.289.0

package/components/page/page.js

@@ -224,6 +224,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			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 */
+			position: relative;
 		}
 		.content.has-panels {
 			min-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));
@@ -232,6 +233,11 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		main {
 			flex: 1;
 			min-width: min(${MAIN_MIN_WIDTH}px, 100%);
+			position: relative;
+		}
+		.content.has-panels main {
+			max-width: calc(100% - ${DIVIDER_WIDTH}px - ${DIVIDER_GUTTER_WIDTH}px);
+			min-width: min(${MAIN_MIN_WIDTH}px, calc(100% - ${DIVIDER_WIDTH}px - ${DIVIDER_GUTTER_WIDTH}px));
 		}
 
 		.side-nav,
@@ -245,6 +251,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 		.side-nav-panel,
 		.supporting-panel {
+			background-color: white;
 			overflow: hidden;
 		}
 
@@ -322,6 +329,30 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			margin-inline: var(--d2l-page-margin-inline, 0);
 			max-width: var(--d2l-page-footer-max-width, 100%);
 		}
+
+		/* Overlay Mode */
+		.scrim {
+			background-color: var(--d2l-color-regolith);
+			inset: 0;
+			opacity: 0.7;
+			position: absolute;
+			z-index: 14; /* To be over d2l-page-main panel header and sticky content of our core components */
+		}
+		@media (max-width: ${OVERLAY_MODE_BREAKPOINT}px) {
+			.content.scrimmed {
+				overflow: clip;
+			}
+			.side-nav-panel {
+				flex-shrink: 0;
+			}
+			.supporting {
+				display: flex;
+				inset-block: 0;
+				inset-inline-end: 0;
+				position: absolute;
+				z-index: 15; /* To be over d2l-page-* panel headers and sticky content of our core components */
+			}
+		}
 	`;
 
 	constructor() {
@@ -413,6 +444,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 	render() {
 		const sideNavPanelKey = this._inOverlayMode ? 'side-nav-overlay' : 'side-nav';
 		const supportingPanelKey = this._inMobileMode ? 'supporting-overlay' : (this._inOverlayMode ? 'supporting-overlay' : 'supporting'); // TO DO: Switch to supporting-mobile
+		const { showScrim, scrimMessage } = this.#determineScrimVisibility();
 
 		const pageClasses = {
 			'page': true,
@@ -420,7 +452,8 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		};
 		const contentClasses = {
 			'content': true,
-			'has-panels': this._slotVisibility['side-nav'] || this._slotVisibility['supporting']
+			'has-panels': this._slotVisibility['side-nav'] || this._slotVisibility['supporting'],
+			'scrimmed': showScrim
 		};
 
 		return html`
@@ -428,7 +461,10 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 				${this.#renderHeader()}
 				<div class="${classMap(contentClasses)}">
 					${this.#renderSideNavPanel(sideNavPanelKey)}
-					<main><slot></slot></main>
+					<main aria-label="${ifDefined(showScrim ? this.localize(scrimMessage) : undefined)}">
+						<div class="main" ?inert="${showScrim}"><slot></slot></div>
+						${showScrim ? html`<div class="scrim"></div>` : nothing}
+					</main>
 					${this.#renderSupportingPanel(supportingPanelKey)}
 				</div>
 				${this.#renderFooter()}
@@ -460,13 +496,26 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		this._panelState.updateMaxSize('supporting-mobile', this.#getMaxDrawerHeight());
 	};
 
+	#determineScrimVisibility() {
+		let scrimMessage = null;
+		if (!this._inOverlayMode) return { showScrim: false, scrimMessage };
+
+		if (this._slotVisibility['side-nav'] && !this._panelState.getCollapsed('side-nav-overlay')) {
+			scrimMessage = 'components.page.side-nav-scrim';
+		} else if (this._slotVisibility['supporting'] && !this._panelState.getCollapsed('supporting-overlay')) {
+			// TO DO: No scrim for supporting in mobile mode
+			scrimMessage = 'components.page.supporting-scrim';
+		}
+		return { showScrim: scrimMessage !== null, scrimMessage };
+	}
+
 	#getMaxDrawerHeight() {
 		const reservedSpace = this._headerHeight + this._footerHeight + DIVIDER_WIDTH;
 		return Math.max(DRAWER_MIN_HEIGHT, window.innerHeight - reservedSpace);
 	}
 
 	#getMaxPanelOverlayWidth() {
-		const reservedSpace = MAIN_MIN_WIDTH + DIVIDER_WIDTH; // TO DO: Update when overlay styles added
+		const reservedSpace = DIVIDER_WIDTH + DIVIDER_GUTTER_WIDTH;
 		return Math.max(PANEL_MIN_WIDTH, this._contentWidth - reservedSpace);
 	}
 

package/custom-elements.json

@@ -13589,7 +13589,7 @@
       "properties": [
         {
           "name": "styles",
-          "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: ${OVERLAY_MODE_BREAKPOINT}px) {\\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: ${MOBILE_MODE_BREAKPOINT}px) {\\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: 16; /* To be over sticky content of our core components and the divider */\\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\\t\\t.side-nav[hidden],\\n\\t\\t.supporting[hidden] {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\t\\t.side-nav-panel-content {\\n\\t\\t\\tfloat: inline-end;\\n\\t\\t}\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel.collapsed {\\n\\t\\t\\tpadding-inline-end: ${DIVIDER_GUTTER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.supporting-panel.collapsed {\\n\\t\\t\\tpadding-inline-start: ${DIVIDER_GUTTER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.side-nav-panel.collapsed .side-nav-panel-content,\\n\\t\\t.supporting-panel.collapsed .supporting-panel-content {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t@media (prefers-reduced-motion: no-preference) {\\n\\t\\t\\t.side-nav-panel.animate,\\n\\t\\t\\t.supporting-panel.animate,\\n\\t\\t\\t.side-nav-panel.animate .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate .supporting-panel-content {\\n\\t\\t\\t\\ttransition:\\n\\t\\t\\t\\t\\twidth 400ms cubic-bezier(0, 0.7, 0.5, 1),\\n\\t\\t\\t\\t\\tpadding 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel.animate.collapsed .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate.collapsed .supporting-panel-content {\\n\\t\\t\\t\\ttransition:\\n\\t\\t\\t\\t\\twidth 400ms cubic-bezier(0, 0.7, 0.5, 1),\\n\\t\\t\\t\\t\\tvisibility 0s 400ms;\\n\\t\\t\\t}\\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: 15; /* To be over sticky content of our core components and divider */\\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: ${OVERLAY_MODE_BREAKPOINT}px) {\\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: ${MOBILE_MODE_BREAKPOINT}px) {\\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: 16; /* To be over sticky content of our core components and the divider */\\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\\tposition: relative;\\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\\tposition: relative;\\n\\t\\t}\\n\\t\\t.content.has-panels main {\\n\\t\\t\\tmax-width: calc(100% - ${DIVIDER_WIDTH}px - ${DIVIDER_GUTTER_WIDTH}px);\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, calc(100% - ${DIVIDER_WIDTH}px - ${DIVIDER_GUTTER_WIDTH}px));\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\t\\t.side-nav[hidden],\\n\\t\\t.supporting[hidden] {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\t\\t.side-nav-panel-content {\\n\\t\\t\\tfloat: inline-end;\\n\\t\\t}\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel.collapsed {\\n\\t\\t\\tpadding-inline-end: ${DIVIDER_GUTTER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.supporting-panel.collapsed {\\n\\t\\t\\tpadding-inline-start: ${DIVIDER_GUTTER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.side-nav-panel.collapsed .side-nav-panel-content,\\n\\t\\t.supporting-panel.collapsed .supporting-panel-content {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t@media (prefers-reduced-motion: no-preference) {\\n\\t\\t\\t.side-nav-panel.animate,\\n\\t\\t\\t.supporting-panel.animate,\\n\\t\\t\\t.side-nav-panel.animate .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate .supporting-panel-content {\\n\\t\\t\\t\\ttransition:\\n\\t\\t\\t\\t\\twidth 400ms cubic-bezier(0, 0.7, 0.5, 1),\\n\\t\\t\\t\\t\\tpadding 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel.animate.collapsed .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate.collapsed .supporting-panel-content {\\n\\t\\t\\t\\ttransition:\\n\\t\\t\\t\\t\\twidth 400ms cubic-bezier(0, 0.7, 0.5, 1),\\n\\t\\t\\t\\t\\tvisibility 0s 400ms;\\n\\t\\t\\t}\\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: 15; /* To be over sticky content of our core components and divider */\\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\\n\\t\\t/* Overlay Mode */\\n\\t\\t.scrim {\\n\\t\\t\\tbackground-color: var(--d2l-color-regolith);\\n\\t\\t\\tinset: 0;\\n\\t\\t\\topacity: 0.7;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tz-index: 14; /* To be over d2l-page-main panel header and sticky content of our core components */\\n\\t\\t}\\n\\t\\t@media (max-width: ${OVERLAY_MODE_BREAKPOINT}px) {\\n\\t\\t\\t.content.scrimmed {\\n\\t\\t\\t\\toverflow: clip;\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel {\\n\\t\\t\\t\\tflex-shrink: 0;\\n\\t\\t\\t}\\n\\t\\t\\t.supporting {\\n\\t\\t\\t\\tdisplay: flex;\\n\\t\\t\\t\\tinset-block: 0;\\n\\t\\t\\t\\tinset-inline-end: 0;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers and sticky content of our core components */\\n\\t\\t\\t}\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "stateStorageKey",

package/lang/ar.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "الرئيسية",
 	"components.page.side-nav-divider-label": "مقسّم التنقل الجانبي",
 	"components.page.side-nav-label": "جانبية",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "فاصل اللوحة الداعمة",
 	"components.page.supporting-label": "داعمة",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} مادة واحد}

package/lang/ca.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-divider-label": "Separador de la navegació lateral",
 	"components.page.side-nav-label": "Lateral",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Divisor del panell de suport",
 	"components.page.supporting-label": "Suport",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} element}

package/lang/cy.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Prif",
 	"components.page.side-nav-divider-label": "Raniwr Llywio Ochr",
 	"components.page.side-nav-label": "Ochr",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Raniwr Panel Cymorth",
 	"components.page.supporting-label": "Cefnogi",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} eitem}

package/lang/da.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Hoved",
 	"components.page.side-nav-divider-label": "Skillelinje i sidemenu",
 	"components.page.side-nav-label": "Side",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Skillelinje i sidepanel",
 	"components.page.supporting-label": "Understøttende",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} element}

package/lang/de.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Haupt-",
 	"components.page.side-nav-divider-label": "Trennung für Seitennavigation",
 	"components.page.side-nav-label": "Seiten-",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Trennung für Unterstützungsbereich",
 	"components.page.supporting-label": "Unterstützung",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} Element}

package/lang/en-gb.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Main",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Side",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Supporting Panel Divider",
 	"components.page.supporting-label": "Supporting",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} item}

package/lang/en.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Main",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Side",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Supporting Panel Divider",
 	"components.page.supporting-label": "Supporting",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} item}

package/lang/es-es.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-divider-label": "Separador de navegación lateral",
 	"components.page.side-nav-label": "Lateral",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Separador del panel complementario",
 	"components.page.supporting-label": "Complementario",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} elemento}

package/lang/es.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-divider-label": "Divisor de navegación lateral",
 	"components.page.side-nav-label": "Lateral",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Divisor de panel de soporte",
 	"components.page.supporting-label": "Soporte",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} elemento}

package/lang/fr-fr.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Principale",
 	"components.page.side-nav-divider-label": "Séparateur de navigation latérale",
 	"components.page.side-nav-label": "Côté",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Séparateur de panneau d’aide",
 	"components.page.supporting-label": "Pris en charge",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} élément}

package/lang/fr.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-divider-label": "Séparateur de navigation latéral",
 	"components.page.side-nav-label": "Côté",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Séparateur de panneau de support",
 	"components.page.supporting-label": "Support",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} élément}

package/lang/haw.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Nui",
 	"components.page.side-nav-divider-label": "Māhele Hoʻokele ʻAoʻao",
 	"components.page.side-nav-label": "ʻaoʻao",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Mea Hoʻokaʻawale Panel Kākoʻo",
 	"components.page.supporting-label": "Ke kākoʻo nei",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} mea}

package/lang/hi.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "मुख्य",
 	"components.page.side-nav-divider-label": "साइड नेविगेशन डिवाइडर",
 	"components.page.side-nav-label": "साइड",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "सपोर्टिंग पैनल डिवाइडर",
 	"components.page.supporting-label": "सपोर्टिंग",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} आइटम}

package/lang/ja.js

@@ -155,8 +155,10 @@ export default {
 	"components.page.header-nav-label": "メイン",
 	"components.page.side-nav-divider-label": "サイドナビゲーション区切り",
 	"components.page.side-nav-label": "サイド",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "サポートパネル区切り",
 	"components.page.supporting-label": "サポート",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} 個の項目}

package/lang/ko.js

@@ -155,8 +155,10 @@ export default {
 	"components.page.header-nav-label": "메인",
 	"components.page.side-nav-divider-label": "측면 탐색 구분선",
 	"components.page.side-nav-label": "사이드",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "보조 패널 구분선",
 	"components.page.supporting-label": "지원",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			other {해당 항목 수 {countFormatted}개}

package/lang/mi.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Matua",
 	"components.page.side-nav-divider-label": "Wehewehenga Whakatere Taha",
 	"components.page.side-nav-label": "Taha",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Te Wehewehe Paewhiri Tautoko",
 	"components.page.supporting-label": "Te tautoko",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} Tūemi}

package/lang/nl.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Hoofdgedeelte",
 	"components.page.side-nav-divider-label": "Scheidingslijn zijmenu",
 	"components.page.side-nav-label": "Zij",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Scheidingslijn ondersteunend paneel",
 	"components.page.supporting-label": "Ondersteuning",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} item}

package/lang/pl.js

@@ -170,8 +170,10 @@ export default {
 	"components.page.header-nav-label": "Główna",
 	"components.page.side-nav-divider-label": "Separator nawigacji bocznej",
 	"components.page.side-nav-label": "Strona boczna",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Separator panelu pomocniczego",
 	"components.page.supporting-label": "Wsparcie",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} element}

package/lang/pt.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-divider-label": "Divisor de Navegação Lateral",
 	"components.page.side-nav-label": "Lateral",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Divisor do Painel de Suporte",
 	"components.page.supporting-label": "Suporte",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} item}

package/lang/ru.js

@@ -170,8 +170,10 @@ export default {
 	"components.page.header-nav-label": "Главная",
 	"components.page.side-nav-divider-label": "Боковой навигационный разделитель",
 	"components.page.side-nav-label": "Сторона",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Опорный разделитель панелей",
 	"components.page.supporting-label": "Поддерживающий",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} элемент}

package/lang/sv.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Huvudsida",
 	"components.page.side-nav-divider-label": "Avgränsare för sidnavigering",
 	"components.page.side-nav-label": "Sida",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Avgränsare för supportpanel",
 	"components.page.supporting-label": "Support",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} objekt}

package/lang/th.js

@@ -156,8 +156,10 @@ export default {
 	"components.page.header-nav-label": "หลัก",
 	"components.page.side-nav-divider-label": "ตัวแบ่งในแถบนำทางด้านข้าง",
 	"components.page.side-nav-label": "ด้านข้าง",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "ตัวแบ่งในแผงส่วนเสริม",
 	"components.page.supporting-label": "ส่วนเสริม",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} รายการ}

package/lang/tr.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Ana",
 	"components.page.side-nav-divider-label": "Yan Navigasyon Ayırıcı",
 	"components.page.side-nav-label": "Yan",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Destekleyici Panel Ayırıcı",
 	"components.page.supporting-label": "Destekleyici",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} öğe}

package/lang/ur.js

@@ -160,8 +160,10 @@ export default {
 	"components.page.header-nav-label": "Main",
 	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Side",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Supporting Panel Divider",
 	"components.page.supporting-label": "Supporting",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} item}

package/lang/vi.js

@@ -154,8 +154,10 @@ export default {
 	"components.page.header-nav-label": "Chính",
 	"components.page.side-nav-divider-label": "Phân cách điều hướng bên",
 	"components.page.side-nav-label": "Bên",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "Bộ phân cách bảng hỗ trợ",
 	"components.page.supporting-label": "Hỗ trợ",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} mục}

package/lang/zh-cn.js

@@ -155,8 +155,10 @@ export default {
 	"components.page.header-nav-label": "主要",
 	"components.page.side-nav-divider-label": "侧边导航分隔条",
 	"components.page.side-nav-label": "侧面",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "辅助面板分隔条",
 	"components.page.supporting-label": "辅助",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} 项}

package/lang/zh-tw.js

@@ -156,8 +156,10 @@ export default {
 	"components.page.header-nav-label": "主要",
 	"components.page.side-nav-divider-label": "側邊導覽分隔線",
 	"components.page.side-nav-label": "側邊",
+	"components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
 	"components.page.supporting-divider-label": "支援面板分隔線",
 	"components.page.supporting-label": "支援",
+	"components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} 個項目}

package/package.json

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