@brightspace-ui/core 3.237.0 → 3.237.2

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/demo/demo-page-settings.js

@@ -60,7 +60,10 @@ class DemoPageSettings extends LitElement {
 		} else {
 			this._language = getDocumentLocaleSettings().language;
 		}
+
 		this._colorMode = document.documentElement.dataset.colorMode || defaultColorMode;
+
+		this.#updateColorSchemeMeta();
 	}
 
 	connectedCallback() {
@@ -176,6 +179,8 @@ class DemoPageSettings extends LitElement {
 			this.#updateDefaultColorMode(newColorMode);
 		}
 
+		this.#updateColorSchemeMeta();
+
 		url.searchParams.set('color-mode', newColorMode);
 		window.history.replaceState({}, '', url.toString());
 	}
@@ -208,6 +213,18 @@ class DemoPageSettings extends LitElement {
 		}
 	}
 
+	#updateColorSchemeMeta() {
+		let elem = document.querySelector('meta[name="color-scheme"]');
+		if (!elem) {
+			elem = document.createElement('meta');
+			elem.name = 'color-scheme';
+			document.head.insertBefore(elem, document.head.firstChild);
+		}
+		if (document.documentElement.dataset.colorMode === 'dark') elem.content = 'dark';
+		else if (document.documentElement.dataset.colorMode === 'os') elem.content = 'light dark';
+		else elem.content = 'light';
+	}
+
 	#updateDefaultColorMode(colorMode) {
 		localStorage.setItem('color-mode', colorMode);
 	}

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.0",
+  "version": "3.237.2",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",