@brightspace-ui/core 3.233.0 → 3.234.1

package/components/backdrop/backdrop-loading.js

@@ -1,14 +1,17 @@
 import '../colors/colors.js';
 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 { 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 BACKDROP_DELAY_MS = 800;
 const FADE_DURATION_MS = 500;
 const SPINNER_DELAY_MS = FADE_DURATION_MS;
+const LOADING_ANNOUNCEMENT_DELAY = 1000;
 
-const LOADING_SPINNER_MINIMUM_BUFFER = 100;
 const LOADING_SPINNER_SIZE = 50;
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -16,7 +19,7 @@ const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 /**
  * A component for displaying a semi-transparent backdrop and a loading spinner over the containing element
  */
-class LoadingBackdrop extends LitElement {
+class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitElement)) {
 
 	static get properties() {
 		return {
@@ -29,15 +32,16 @@ class LoadingBackdrop extends LitElement {
 			 * Used to identify content that the backdrop should make inert
 			 * @type {boolean}
 			 */
-			for: { type: String },
+			for: { type: String, required: true },
 			_state: { type: String, reflect: true },
-			_spinnerTop: { state: true }
+			_spinnerTop: { state: true },
+			_ariaContent: { state: true }
 		};
 	}
 
 	static get styles() {
 		return css`
-			:host {
+			#visible {
 				display: none;
 				height: 100%;
 				justify-content: center;
@@ -46,9 +50,9 @@ class LoadingBackdrop extends LitElement {
 				width: 100%;
 				z-index: 999;
 			}
-			:host([_state="showing"]),
-			:host([_state="shown"]),
-			:host([_state="hiding"]) {
+			:host([_state="showing"]) #visible,
+			:host([_state="shown"]) #visible,
+			:host([_state="hiding"]) #visible {
 				display: flex;
 			}
 
@@ -58,20 +62,23 @@ class LoadingBackdrop extends LitElement {
 				opacity: 0;
 				position: absolute;
 				top: 0;
-				transition: opacity ${FADE_DURATION_MS}ms ease-in;
 				width: 100%;
 			}
 			:host([_state="shown"]) .backdrop {
 				opacity: 0.7;
+				transition: opacity ${FADE_DURATION_MS}ms ease-in;
+			}
+			:host([_state="hiding"]) .backdrop {
+				transition: opacity ${FADE_DURATION_MS}ms ease-out;
 			}
 
 			d2l-loading-spinner {
 				opacity: 0;
 				position: absolute;
-				transition: opacity ${FADE_DURATION_MS}ms ease-in ${SPINNER_DELAY_MS}ms;
 			}
 			:host([_state="shown"]) d2l-loading-spinner {
 				opacity: 1;
+				transition: opacity ${FADE_DURATION_MS}ms ease-in ${SPINNER_DELAY_MS}ms;
 			}
 
 			:host([_state="hiding"]) .d2l-backdrop,
@@ -89,14 +96,19 @@ class LoadingBackdrop extends LitElement {
 		super();
 		this.shown = false;
 		this._state = 'hidden';
-		this._spinnerTop = LOADING_SPINNER_MINIMUM_BUFFER;
+		this._spinnerTop = 0;
+		this._ariaContent = '';
 	}
 
 	render() {
-		if (this._state === 'hidden') return nothing;
 		return html`
-			<div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#hide}"></div>
-			<d2l-loading-spinner style=${styleMap({ top: `${this._spinnerTop}px` })} size="${LOADING_SPINNER_SIZE}"></d2l-loading-spinner>
+			${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>
+					</div>`
+			}
+			<d2l-offscreen aria-live="polite">${this._ariaContent}</d2l-offscreen>
 		`;
 	}
 	updated(changedProperties) {
@@ -116,9 +128,12 @@ class LoadingBackdrop extends LitElement {
 	}
 	willUpdate(changedProperties) {
 		if (changedProperties.has('shown')) {
+			this.#clearLiveArea();
 			if (this.shown) {
+				this.#setLiveArea(this.localize('components.backdrop-loading.loadingAnnouncement'), { delay: LOADING_ANNOUNCEMENT_DELAY });
 				this.#show();
 			} else if (changedProperties.get('shown') !== undefined) {
+				this.#setLiveArea(this.localize('components.backdrop-loading.loadingCompleteAnnouncement'));
 				this.#fade();
 			}
 		}
@@ -130,13 +145,13 @@ class LoadingBackdrop extends LitElement {
 		const loadingSpinner = this.shadowRoot.querySelector('d2l-loading-spinner');
 		if (!loadingSpinner) { return; }
 
-		const boundingRect = this.getBoundingClientRect();
+		const boundingRect = this.shadowRoot.querySelector('#visible').getBoundingClientRect();
 
 		// Calculate the centerpoint of the visible portion of the element
 		const upperVisibleBound = Math.max(0, boundingRect.top);
 		const lowerVisibleBound = Math.min(window.innerHeight, boundingRect.bottom);
 		const visibleHeight = lowerVisibleBound - upperVisibleBound;
-		const centeringOffset = visibleHeight / 2;
+		const centeringOffset = (visibleHeight / 4);
 
 		// Calculate if an offset is required to move to the top of the viewport before centering
 		const topOffset = Math.max(0, -boundingRect.top); // measures the distance below the top of the viewport, which is negative if the element starts above the viewport
@@ -144,8 +159,17 @@ class LoadingBackdrop extends LitElement {
 		// Adjust for the size of the spinner
 		const spinnerSizeOffset = LOADING_SPINNER_SIZE / 2;
 
-		const newPosition = centeringOffset + topOffset - spinnerSizeOffset;
-		this._spinnerTop = Math.max(LOADING_SPINNER_MINIMUM_BUFFER, newPosition);
+		this._spinnerTop = centeringOffset + topOffset - spinnerSizeOffset;
+	}
+
+	#clearLiveArea() {
+		this._ariaContent = '';
+
+		if (this.announcementTimeout) {
+			clearTimeout(this.announcementTimeout);
+		}
+
+		this.announcementTimeout = null;
 	}
 
 	#fade() {
@@ -164,15 +188,15 @@ class LoadingBackdrop extends LitElement {
 	#getBackdropTarget() {
 		const parent = getComposedParent(this);
 
-		if (!this.for) { return parent; }
-
 		const targetedChildren = getComposedChildren(
 			parent,
 			(elem) => elem.id === this.for,
 			false
 		);
 
-		return targetedChildren.length === 0 ? parent : targetedChildren[0];
+		if (targetedChildren.length === 0) { throw new Error(`Backdrop cannot find sibling identified by 'for' property with value ${this.for}`);}
+
+		return targetedChildren[0];
 	}
 	#handleTransitionEnd() {
 		if (this._state === 'hiding') {
@@ -186,6 +210,9 @@ class LoadingBackdrop extends LitElement {
 
 		if (containingBlock.dataset.initiallyInert !== '1') containingBlock.removeAttribute('inert');
 	}
+	#setLiveArea(content, { delay } = {}) {
+		this.announcementTimeout = setTimeout(() => this._ariaContent = content, delay || 0);
+	}
 	#show() {
 		this._state = reduceMotion ? 'shown' : 'showing';
 

package/components/colors/colors.js

@@ -217,6 +217,10 @@ function formatCSSVariable([key, value]) {
 	else return `${key}: ${value};`;
 }
 
+function isCustomPropertyDefined(rule, name) {
+	return rule.style.getPropertyValue(name).trim() !== '';
+}
+
 function resolvePrimitive(variableName, variables) {
 	const value = variables.get(variableName);
 	if (!value) return;
@@ -248,9 +252,7 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
 			/* primary accent */
 			--d2l-color-primary-accent-action: var(--d2l-color-celestine);
 			--d2l-color-primary-accent-indicator: var(--d2l-color-carnelian);
-		}
 
-		html {
 			${lightCSS}
 		}
 		html[data-color-mode="dark"] {
@@ -270,17 +272,22 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
 	globalThis.document.head.appendChild(style);
 }
 
+const lightRule = style.sheet.cssRules[0];
+const darkRule = style.sheet.cssRules[1];
+const osRule = style.sheet.cssRules[2].cssRules[0];
+
 export function registerSemanticVariableForSvgImageUrl(name, value) {
 	if (!name || typeof value !== 'string') {
 		throw new TypeError('registerSemanticVariableForSvgImageUrl requires both a name and value');
 	}
+	if (isCustomPropertyDefined(lightRule, name)) {
+		console.warn(`registerSemanticVariableForSvgImageUrl called for ${name} but a custom property is already defined with this name`);
+	}
 
 	const replacedLightValue = svgToCSS(replaceSemanticVariables(value, lightVariables));
-	style.sheet.insertRule(`html { ${ name }: ${ replacedLightValue } }`, 0);
+	lightRule.style.setProperty(name, replacedLightValue);
 
 	const replacedDarkValue = svgToCSS(replaceSemanticVariables(value, darkVariables));
-	style.sheet.insertRule(`html[data-color-mode="dark"] { ${ name }: ${ replacedDarkValue } }`, 1);
-	style.sheet.insertRule(`@media (prefers-color-scheme: dark) {
-		html[data-color-mode="os"] { ${ name }: ${ replacedDarkValue } }
-	}`, 2);
+	darkRule.style.setProperty(name, replacedDarkValue);
+	osRule.style.setProperty(name, replacedDarkValue);
 };

package/lang/ar.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "إغلاق التنبيه",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "مسار التنقل",
 	"components.button-add.addItem": "إضافة عنصر",
 	"components.button-copy.copied": "تم النسخ!",

package/lang/cy.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Cau Hysbysiad",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
 	"components.button-add.addItem": "Ychwanegu Eitem",
 	"components.button-copy.copied": "Wedi’i gopïo!",

package/lang/da.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Luk besked",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Brødkrumme",
 	"components.button-add.addItem": "Tilføj element",
 	"components.button-copy.copied": "Kopieret!",

package/lang/de.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Benachrichtigung schließen",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Brotkrümelnavigation",
 	"components.button-add.addItem": "Element hinzufügen",
 	"components.button-copy.copied": "Kopiert.",

package/lang/en-gb.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Close Alert",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",
 	"components.button-copy.copied": "Copied!",

package/lang/en.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Close Alert",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",
 	"components.button-copy.copied": "Copied!",

package/lang/es-es.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Cerrar alerta",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
 	"components.button-copy.copied": "¡Copiado!",

package/lang/es.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Cerrar alerta",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
 	"components.button-copy.copied": "Copiado.",

package/lang/fr-fr.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Fermer l’alerte",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
 	"components.button-copy.copied": "Copie effectuée !",

package/lang/fr.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Fermer l’alerte",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
 	"components.button-copy.copied": "Copié!",

package/lang/haw.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Pani i ka makaʻala",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Palapalapala",
 	"components.button-add.addItem": "Pākuʻi Mea",
 	"components.button-copy.copied": "Kope ʻia!",

package/lang/hi.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "अलर्ट बंद करें",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "ब्रेडक्रंब",
 	"components.button-add.addItem": "आइटम जोड़ें",
 	"components.button-copy.copied": "कॉपी किया गया!",

package/lang/ja.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "アラートを閉じる",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "階層",
 	"components.button-add.addItem": "項目の追加",
 	"components.button-copy.copied": "コピーできました。",

package/lang/ko.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "경보 닫기",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "이동 경로",
 	"components.button-add.addItem": "항목 추가",
 	"components.button-copy.copied": "복사 완료!",

package/lang/mi.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Kati Matohi",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Pānui",
 	"components.button-add.addItem": "Tāpiri Tūemi",
 	"components.button-copy.copied": "Kua tāruatia!",

package/lang/nl.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Waarschuwing sluiten",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Kruimelpad",
 	"components.button-add.addItem": "Item toevoegen",
 	"components.button-copy.copied": "Gekopieerd!",

package/lang/pt.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Fechar alerta",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Auxiliar de navegação",
 	"components.button-add.addItem": "Adicionar item",
 	"components.button-copy.copied": "Copiado!",

package/lang/sv.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Stängningsvarning",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Sökväg",
 	"components.button-add.addItem": "Lägg till objekt",
 	"components.button-copy.copied": "Kopierat!",

package/lang/th.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "ปิดการแจ้งเตือน",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "แถบนำทาง",
 	"components.button-add.addItem": "เพิ่มรายการ",
 	"components.button-copy.copied": "คัดลอกแล้ว!",

package/lang/tr.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Kapatma Uyarısı",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "İçerik Haritası",
 	"components.button-add.addItem": "Öğe Ekle",
 	"components.button-copy.copied": "Kopyalandı!",

package/lang/vi.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Đóng Cảnh Báo",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "Đường dẫn",
 	"components.button-add.addItem": "Thêm mục",
 	"components.button-copy.copied": "Đã sao chép!",

package/lang/zh-cn.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "关闭提醒",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "痕迹导航",
 	"components.button-add.addItem": "添加项目",
 	"components.button-copy.copied": "已复制！",

package/lang/zh-tw.js

@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "關閉警示",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
 	"components.breadcrumbs.breadcrumb": "導覽路徑",
 	"components.button-add.addItem": "新增項目",
 	"components.button-copy.copied": "複製成功！",

package/package.json

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