@brightspace-ui/core 3.237.1 → 3.237.3

package/components/backdrop/backdrop-loading.js

@@ -3,10 +3,13 @@ import '../loading-spinner/loading-spinner.js';
 import '../offscreen/offscreen.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { getComposedChildren, getComposedParent } from '../../helpers/dom.js';
+import { getFlag } from '../../helpers/flags.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+const OffSCREEN_SIZELESS = getFlag('d2l-offscreen-sizeless', true);
+
 const BACKDROP_DELAY_MS = 800;
 const FADE_DURATION_MS = 500;
 const SPINNER_DELAY_MS = FADE_DURATION_MS;
@@ -101,6 +104,8 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 	}
 
 	render() {
+		const forcedOffscreenSizelessStyles = OffSCREEN_SIZELESS ? {} : { height: '0px', width: '0px' };
+
 		return html`
 			${this._state === 'hidden' ? nothing :
 					html`<div id="visible">
@@ -108,7 +113,7 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 						<d2l-loading-spinner style=${styleMap({ top: `${this._spinnerTop}px` })} size="${LOADING_SPINNER_SIZE}"></d2l-loading-spinner>
 					</div>`
 			}
-			<d2l-offscreen aria-live="polite">${this._ariaContent}</d2l-offscreen>
+			<d2l-offscreen style=${styleMap(forcedOffscreenSizelessStyles)} aria-live="polite">${this._ariaContent}</d2l-offscreen>
 		`;
 	}
 	updated(changedProperties) {

package/components/dialog/dialog-fullscreen.js

@@ -72,7 +72,7 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
 			@media (min-width: 616px) {
 
 				.d2l-dialog-header {
-					border-bottom: 1px solid var(--d2l-color-gypsum);
+					border-bottom: 1px solid var(--d2l-theme-border-color-subtle);
 					padding-bottom: 0.9rem;
 					padding-top: 1rem;
 				}
@@ -147,7 +147,7 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
 				}
 
 				.d2l-dialog-footer {
-					border-top: 1px solid var(--d2l-color-gypsum);
+					border-top: 1px solid var(--d2l-theme-border-color-subtle);
 					padding-bottom: 0; /* 0.9rem padding included on button */
 					padding-top: 0.9rem;
 				}

package/components/dialog/dialog-styles.js

@@ -23,10 +23,10 @@ export const dialogStyles = css`
 
 	.d2l-dialog-outer {
 		animation: d2l-dialog-close 200ms ease-in;
-		background-color: white;
-		border: 1px solid var(--d2l-color-mica);
+		background-color: var(--d2l-theme-background-color-base);
+		border: 1px solid var(--d2l-theme-border-color-standard);
 		border-radius: 8px;
-		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+		box-shadow: var(--d2l-theme-shadow-floating);
 		box-sizing: border-box;
 		position: fixed; /* also required for native to override position: absolute */
 		top: 75px;
@@ -53,7 +53,6 @@ export const dialogStyles = css`
 	}
 
 	.d2l-dialog-outer.d2l-dialog-outer-nested-showing {
-		border-color: rgba(205, 213, 220, 0.35);
 		box-shadow: none;
 	}
 
@@ -66,21 +65,21 @@ export const dialogStyles = css`
 	}
 
 	dialog.d2l-dialog-outer {
-		color: var(--d2l-color-ferrite);
+		color: var(--d2l-theme-text-color-static-standard);
 		margin-bottom: 0; /* required to override Chrome native positioning */
 		margin-top: 0; /* required to override Chrome native positioning */
 		padding: 0;
 	}
 
 	dialog::backdrop {
-		/* cannot use variables inside of ::backdrop : https://github.com/whatwg/fullscreen/issues/124 */
-		background-color: #f9fbff;
+		/* fallback is for old browsers (see https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element) */
+		background-color: var(--d2l-theme-backdrop-background-color, #f9fbff);
 		opacity: 0;
 		transition: opacity 200ms ease-in;
 	}
 
 	:host([_state="showing"]) dialog::backdrop {
-		opacity: 0.7;
+		opacity: var(--d2l-theme-backdrop-opacity);
 		transition-timing-function: ease-out;
 	}
 
@@ -96,7 +95,7 @@ export const dialogStyles = css`
 	}
 
 	:host([critical]) .d2l-dialog-header {
-		border-block-start: 0.4rem solid var(--d2l-color-cinnabar);
+		border-block-start: 0.4rem solid var(--d2l-theme-status-color-error);
 		border-start-end-radius: 0.4rem;
 		border-start-start-radius: 0.4rem;
 		margin-block: -1px 0;

package/components/offscreen/offscreen.js

@@ -1,16 +1,19 @@
 import { css, html, LitElement } from 'lit';
+import { getFlag } from '../../helpers/flags.js';
+
+const OffSCREEN_SIZELESS = getFlag('d2l-offscreen-sizeless', true);
 
 /**
  * A private helper declarations that should not be used by general consumers
  */
 export const _offscreenStyleDeclarations = css`
 		direction: var(--d2l-document-direction, ${document.dir === 'rtl' ? css`rtl` : css`ltr`}); /* stylelint-disable-line @stylistic/string-quotes */
-		height: 1px;
+		height: ${OffSCREEN_SIZELESS ? 0 : 1}px;
 		inset-inline-start: -10000px;
 		overflow: hidden;
 		position: absolute !important;
 		white-space: nowrap;
-		width: 1px;
+		width: ${OffSCREEN_SIZELESS ? 0 : 1}px;
 		${document.dir === 'rtl' ? css`right` : css`left`}: -10000px;
 `;
 

package/package.json

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