@brightspace-ui/core 3.240.3 → 3.240.5

package/components/backdrop/backdrop-dirty-overlay.js

@@ -56,7 +56,7 @@ class BackdropDirtyOverlay extends LitElement {
 
 	render() {
 		return html`
-			<p class="d2l-body-compact d2l-backdrop-dirty-overlay" tabindex="-1">${this.description}</p>
+			<p class="d2l-body-compact d2l-backdrop-dirty-overlay">${this.description}</p>
 			<d2l-button-subtle
 				class="d2l-backdrop-dirty-overlay-action"
 				@click=${this.#handleActionClick}

package/components/backdrop/backdrop-loading.js

@@ -1,11 +1,13 @@
 import '../colors/colors.js';
 import '../loading-spinner/loading-spinner.js';
 import './backdrop-dirty-overlay.js';
-import '../offscreen/offscreen.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { getComposedChildren, getComposedParent } from '../../helpers/dom.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { getFlag } from '../../helpers/flags.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { offscreenStyles } from '../offscreen/offscreen.js';
+
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -15,7 +17,6 @@ const BACKDROP_DELAY_MS = 800;
 const FADE_DURATION_MS = 500;
 const SPINNER_DELAY_MS = FADE_DURATION_MS;
 const LOADING_ANNOUNCEMENT_DELAY = 1000;
-const DIRTY_ANNOUNCEMENT_DELAY = 1000;
 
 const LOADING_SPINNER_SIZE = 50;
 
@@ -66,9 +67,18 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 	}
 
 	static get styles() {
-		return css`
+		return [css`
 			#visible {
 				display: none;
+			}
+
+			:host([_state="showing"]),
+			:host([_state="shown"]),
+			:host([_state="hiding"]),
+			:host([_state="showing"]) #visible,
+			:host([_state="shown"]) #visible,
+			:host([_state="hiding"]) #visible {
+				display: flex;
 				height: 100%;
 				justify-content: center;
 				position: absolute;
@@ -76,11 +86,6 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 				width: 100%;
 				z-index: 999;
 			}
-			:host([_state="showing"]) #visible,
-			:host([_state="shown"]) #visible,
-			:host([_state="hiding"]) #visible {
-				display: flex;
-			}
 
 			.backdrop {
 				background-color: var(--d2l-theme-backdrop-background-color);
@@ -134,7 +139,7 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 			@media (prefers-reduced-motion: reduce) {
 				* { transition: none; }
 			}
-		`;
+		`, offscreenStyles];
 	}
 
 	constructor() {
@@ -148,16 +153,18 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 
 	render() {
 		const forcedOffscreenSizelessStyles = OffSCREEN_SIZELESS ? {} : { height: '0px', width: '0px' };
+		const dirtyStateVisible = this._state !== 'hidden' && this.dataState === 'dirty';
 
 		return html`
 			${this._state === 'hidden' ? nothing :
 					html`<div id="visible">
 						<div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#handleTransitionEnd}"></div>
 						<d2l-loading-spinner style=${styleMap({ top: `${this._spinnerTop}px` })} size="${LOADING_SPINNER_SIZE}"></d2l-loading-spinner>
-						${this.#renderDirtyOverlay()}
 					</div>`
 			}
-			<d2l-offscreen style=${styleMap(forcedOffscreenSizelessStyles)} aria-live="polite">${this._ariaContent}</d2l-offscreen>
+			<div aria-live="polite" class="${classMap({ 'd2l-offscreen': !dirtyStateVisible })}" style="${styleMap(dirtyStateVisible ? {} : forcedOffscreenSizelessStyles)}">
+				${this.dataState === 'dirty' ? this.#renderDirtyOverlay() : this._ariaContent}
+			</div>
 		`;
 	}
 	updated(changedProperties) {
@@ -190,8 +197,6 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 				this.#setLiveArea(this.localize('components.backdrop-loading.loadingAnnouncement'), { delay: LOADING_ANNOUNCEMENT_DELAY });
 			} else if (oldState === 'loading' && newState === 'clean') {
 				this.#setLiveArea(this.localize('components.backdrop-loading.loadingCompleteAnnouncement'));
-			} else if (newState === 'dirty') {
-				this.#setLiveArea(this.#renderDirtyOverlay(), { delay: DIRTY_ANNOUNCEMENT_DELAY });
 			}
 
 			// Update backdrop
@@ -227,13 +232,16 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 		// Adjust for the size of the spinner
 		const spinnerSizeOffset = LOADING_SPINNER_SIZE / 2;
 
+		this._spinnerTop = centeringOffset + topOffset - spinnerSizeOffset;
+
 		// Adjust for the size of the dirty dialog
-		await this.shadowRoot.querySelector('d2l-backdrop-dirty-overlay').getUpdateComplete();
-		await this.shadowRoot.querySelector('d2l-empty-state-action-button')?.getUpdateComplete();
-		const dirtyDialogSizeOffset = this.shadowRoot.querySelector('d2l-backdrop-dirty-overlay').getBoundingClientRect().height / 2;
+		const dirtyOverlay = this.shadowRoot.querySelector('d2l-backdrop-dirty-overlay');
+		if (dirtyOverlay) {
+			await this.shadowRoot.querySelector('d2l-empty-state-action-button')?.getUpdateComplete();
+			const dirtyDialogSizeOffset = dirtyOverlay.getBoundingClientRect().height / 2;
 
-		this._spinnerTop = centeringOffset + topOffset - spinnerSizeOffset;
-		this._dirtyDialogTop = centeringOffset + topOffset - dirtyDialogSizeOffset;
+			this._dirtyDialogTop = centeringOffset + topOffset - dirtyDialogSizeOffset;
+		}
 	}
 
 	#clearLiveArea() {

package/components/dropdown/dropdown-tabs.js

@@ -23,7 +23,7 @@ class DropdownTabs extends DropdownPopoverMixin(LitElement) {
 
 		this.addEventListener('d2l-dropdown-open', this.#handleOpen);
 		this.addEventListener('d2l-menu-resize', this.#handleMenuResize);
-		this.addEventListener('d2l-tab-panel-selected', this.#handleTabSelected);
+		this.addEventListener('d2l-tab-selected', this.#handleTabSelected);
 	}
 
 	#initializingHeight;

package/components/selection/selection-controls.js

@@ -61,7 +61,7 @@ export class SelectionControls extends PageableSubscriberMixin(SelectionObserver
 				}
 			}
 			:host([_scrolled]) .d2l-selection-controls-shadow {
-				background-color: var(--d2l-selection-controls-background-color, white);
+				background-color: var(--d2l-selection-controls-background-color, var(--d2l-theme-background-color-base));
 				bottom: -4px;
 				box-shadow: 0 8px 12px -9px rgba(0, 0, 0, 0.3);
 				clip: rect(30px, auto, 200px, auto);
@@ -78,7 +78,7 @@ export class SelectionControls extends PageableSubscriberMixin(SelectionObserver
 			}
 			.d2l-selection-controls-container {
 				align-items: center;
-				background-color: var(--d2l-selection-controls-background-color, white);
+				background-color: var(--d2l-selection-controls-background-color, var(--d2l-theme-background-color-base));
 				display: flex;
 				margin: 6px calc(-1*var(--d2l-selection-controls-padding, 0px));
 				min-height: 54px;

package/package.json

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