@brightspace-ui/core 3.232.1 → 3.234.0

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

@@ -111,8 +111,10 @@ const lightVariables = new Map([
 	['--d2l-theme-text-color-static-standard', '--d2l-color-ferrite'],
 	['--d2l-theme-text-color-static-subtle', '--d2l-color-tungsten'],
 	// figma - undefined
+	['--d2l-theme-background-color-interactive-faint-disabled', '#f9fbff80'], /* --d2l-theme-background-color-interactive-faint-default at 50% opacity, remove once color-mix is widely supported */
 	['--d2l-theme-badge-background-color', '--d2l-color-gypsum'],
 	['--d2l-theme-badge-text-color', '--d2l-theme-text-color-static-standard'],
+	['--d2l-theme-border-color-disabled', '--d2l-color-corundum'],
 	['--d2l-theme-notification-background-color', '--d2l-color-carnelian-minus-1'],
 	['--d2l-theme-notification-text-color', '#ffffff'],
 	['--d2l-theme-text-color-static-disabled', '#20212280'], /* --d2l-theme-text-color-static-standard at 50% opacity, remove once color-mix is widely supported */
@@ -125,7 +127,12 @@ const lightVariables = new Map([
 	['--d2l-theme-shadow-attached-block-start', '0 2px 4px 0 rgba(0, 0, 0, 0.03)'],
 	['--d2l-theme-shadow-attached-block-end', '0 -2px 4px 0 rgba(0, 0, 0, 0.03)'],
 	['--d2l-theme-shadow-floating', '0 2px 12px 0 rgba(0, 0, 0, 0.15)'],
-	['--d2l-theme-shadow-inset', 'inset 0 2px 0 0 rgba(177, 185, 190, 0.2)'], /* corundum */
+	['--d2l-theme-shadow-inset-offset-x', '0'],
+	['--d2l-theme-shadow-inset-offset-y', '2px'],
+	['--d2l-theme-shadow-inset-blur-radius', '0'],
+	['--d2l-theme-shadow-inset-spread-radius', '0'],
+	['--d2l-theme-shadow-inset-color', 'rgba(177, 185, 190, 0.2)'],
+	['--d2l-theme-shadow-inset', 'inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) var(--d2l-theme-shadow-inset-spread-radius) var(--d2l-theme-shadow-inset-color)'], /* corundum */
 	// feedback (old semantic names)
 	['--d2l-color-feedback-error', '--d2l-theme-status-color-error'],
 	['--d2l-color-feedback-warning', '--d2l-theme-status-color-warning'],
@@ -176,8 +183,10 @@ const darkVariables = new Map([
 	['--d2l-theme-text-color-static-standard', '--d2l-color-mica'],
 	['--d2l-theme-text-color-static-subtle', '--d2l-color-chromite'],
 	// figma - undefined
+	['--d2l-theme-background-color-interactive-faint-disabled', '#20212280'], /* --d2l-theme-background-color-interactive-faint-default at 50% opacity, remove once color-mix is widely supported */
 	['--d2l-theme-badge-background-color', '#303335'],
 	['--d2l-theme-badge-text-color', '--d2l-theme-text-color-static-standard'],
+	['--d2l-theme-border-color-disabled', '#303233'], /* --d2l-theme-border-color-standard (tungsten) at 50% opacity */
 	['--d2l-theme-notification-background-color', '--d2l-color-carnelian-minus-1'],
 	['--d2l-theme-notification-text-color', '#ffffff'],
 	['--d2l-theme-text-color-static-disabled', '#cdd5dc80'], /* --d2l-theme-text-color-static-standard at 50% opacity, remove once color-mix is widely supported */
@@ -190,7 +199,12 @@ const darkVariables = new Map([
 	['--d2l-theme-shadow-attached-block-start', '0 2px 4px 0 rgba(0, 0, 0, 0.85)'],
 	['--d2l-theme-shadow-attached-block-end', '0 -2px 4px 0 rgba(0, 0, 0, 0.85)'],
 	['--d2l-theme-shadow-floating', '0 2px 12px 0 rgba(0, 0, 0, 0.85)'],
-	['--d2l-theme-shadow-inset', 'inset 0 2px 0 0 rgba(177, 185, 190, 0.2)'], /* corundum */
+	['--d2l-theme-shadow-inset-offset-x', '0'],
+	['--d2l-theme-shadow-inset-offset-y', '2px'],
+	['--d2l-theme-shadow-inset-blur-radius', '0'],
+	['--d2l-theme-shadow-inset-spread-radius', '0'],
+	['--d2l-theme-shadow-inset-color', 'rgba(177, 185, 190, 0.2)'],
+	['--d2l-theme-shadow-inset', 'inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) var(--d2l-theme-shadow-inset-spread-radius) var(--d2l-theme-shadow-inset-color)'], /* corundum */
 	// feedback (old semantic names)
 	['--d2l-color-feedback-error', '--d2l-theme-status-color-error'],
 	['--d2l-color-feedback-warning', '--d2l-theme-status-color-warning'],
@@ -249,6 +263,7 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
 		}
 
 		@supports (color: color-mix(in srgb, black 50%, transparent)) {
+			--d2l-theme-background-color-interactive-faint-disabled: color-mix(in srgb, var(--d2l-theme-background-color-interactive-faint-default) 50%, transparent);
 			--d2l-theme-text-color-static-disabled: color-mix(in srgb, var(--d2l-theme-text-color-static-standard) 50%, transparent);
 		}
 	`;

package/components/inputs/input-checkbox.js

@@ -1,4 +1,3 @@
-import '../colors/colors.js';
 import '../expand-collapse/expand-collapse-content.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
@@ -9,15 +8,22 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { InputInlineHelpMixin } from './input-inline-help.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
+import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
-import { svgToCSS } from '../../helpers/svg-to-css.js';
 
-export const inputCheck = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#494C4E" d="M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z"/>\
-</svg>`);
-export const inputCheckIndeterminate = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#494C4E" d="M7.5,11h9c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-9C6.7,14,6,13.3,6,12.5l0,0C6,11.7,6.7,11,7.5,11z"/>
-</svg>`);
+registerSemanticVariableForSvgImageUrl(
+	'--d2l-input-checkbox-check-image',
+	`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+		<path fill="var(--d2l-theme-icon-color-standard)" d="M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z"/>\
+	</svg>`
+);
+
+registerSemanticVariableForSvgImageUrl(
+	'--d2l-input-checkbox-indeterminate-image',
+	`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+		<path fill="var(--d2l-theme-icon-color-standard)" d="M7.5,11h9c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-9C6.7,14,6,13.3,6,12.5l0,0C6,11.7,6.7,11,7.5,11z"/>
+	</svg>`
+);
 
 export const cssSizes = {
 	inputBoxSize: 1.2,
@@ -27,23 +33,13 @@ export const cssSizes = {
 export const checkboxStyles = css`
 	input[type="checkbox"].d2l-input-checkbox {
 		--d2l-input-checkbox-background-image: none;
-		--d2l-input-checkbox-background-color: var(--d2l-color-regolith);
+		--d2l-input-checkbox-background-color: var(--d2l-theme-background-color-interactive-faint-default);
 		--d2l-input-checkbox-background-image-disabled:
 			linear-gradient(
-				/* regolith at 50% */
-				rgba(249, 251, 255, 0.5),
-				rgba(249, 251, 255, 0.5)
+				var(--d2l-theme-background-color-interactive-faint-disabled),
+				var(--d2l-theme-background-color-interactive-faint-disabled)
 			),
 			var(--d2l-input-checkbox-background-image);
-
-		@supports (color: color-mix(in srgb, black 50%, transparent)) {
-			--d2l-input-checkbox-background-image-disabled:
-				linear-gradient(
-					color-mix(in srgb, var(--d2l-input-checkbox-background-color) 50%, transparent),
-					color-mix(in srgb, var(--d2l-input-checkbox-background-color) 50%, transparent)
-				),
-				var(--d2l-input-checkbox-background-image);
-		}
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		appearance: none;
@@ -62,32 +58,32 @@ export const checkboxStyles = css`
 		width: ${cssSizes.inputBoxSize}rem;
 	}
 	input[type="checkbox"].d2l-input-checkbox:checked {
-		--d2l-input-checkbox-background-image: ${inputCheck};
+		--d2l-input-checkbox-background-image: var(--d2l-input-checkbox-check-image);
 	}
 	input[type="checkbox"].d2l-input-checkbox:indeterminate {
-		--d2l-input-checkbox-background-image: ${inputCheckIndeterminate};
+		--d2l-input-checkbox-background-image: var(--d2l-input-checkbox-indeterminate-image);
 	}
 	input[type="checkbox"].d2l-input-checkbox,
 	input[type="checkbox"].d2l-input-checkbox:hover:disabled {
 		background-color: var(--d2l-input-checkbox-background-color);
-		border-color: var(--d2l-color-galena);
+		border-color: var(--d2l-theme-border-color-emphasized);
 		border-width: 1px;
 	}
 	input[type="checkbox"].d2l-input-checkbox:hover:disabled {
-		border-color: var(--d2l-color-corundum);
+		border-color: var(--d2l-theme-border-color-disabled);
 	}
 	input[type="checkbox"].d2l-input-checkbox:hover,
 	input[type="checkbox"].d2l-input-checkbox:focus,
 	input[type="checkbox"].d2l-input-checkbox.d2l-input-checkbox-focus,
 	:host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
-		border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-color-celestine));
+		border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-theme-border-color-focus));
 		border-width: 2px;
 		outline: none;
 	}
 	input[type="checkbox"].d2l-input-checkbox:disabled,
 	input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
 		background-image: var(--d2l-input-checkbox-background-image-disabled);
-		border-color: var(--d2l-color-corundum);
+		border-color: var(--d2l-theme-border-color-disabled);
 	}
 	@media (forced-colors: active) {
 		input[type="checkbox"].d2l-input-checkbox:checked,
@@ -110,15 +106,15 @@ export const checkboxStyles = css`
 
 		input[type="checkbox"].d2l-input-checkbox:disabled,
 		input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
-			opacity: 0.5;
+			opacity: var(--d2l-theme-opacity-disabled-control);
 		}
 
 		input[type="checkbox"].d2l-input-checkbox:checked::after {
-			mask-image: ${inputCheck};
+			mask-image: var(--d2l-input-checkbox-check-image);
 		}
 
 		input[type="checkbox"].d2l-input-checkbox:indeterminate::after {
-			mask-image: ${inputCheckIndeterminate};
+			mask-image: var(--d2l-input-checkbox-indeterminate-image);
 		}
 	}
 `;
@@ -215,7 +211,7 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
 					display: inline-block;
 				}
 				.d2l-input-checkbox-text {
-					color: var(--d2l-color-ferrite);
+					color: var(--d2l-theme-text-color-static-standard);
 					display: inline-block;
 					font-size: 0.8rem;
 					font-weight: 400;

package/components/inputs/input-label-styles.js

@@ -1,9 +1,12 @@
 import { css } from 'lit';
-import { svgToCSS } from '../../helpers/svg-to-css.js';
+import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
 
-const requiredIcon = svgToCSS(`<svg width="5" height="6" viewBox="0 0 5 6" xmlns="http://www.w3.org/2000/svg">
-	<path d="M2.38 5.141V3.86c0-.093.006-.184.018-.273.011-.089.031-.173.059-.252a.927.927 0 0 1-.182.175c-.07.051-.145.103-.224.154l-1.106.644-.413-.7 1.113-.644c.084-.051.167-.093.248-.126.082-.033.167-.056.256-.07a.816.816 0 0 1-.256-.07 2.356 2.356 0 0 1-.248-.133L.532 1.914l.406-.7 1.113.658c.08.051.155.104.228.157a.966.966 0 0 1 .185.179 1.002 1.002 0 0 1-.066-.252 2.091 2.091 0 0 1-.018-.273V.388h.826v1.281c0 .098-.006.192-.017.283a1.003 1.003 0 0 1-.067.256c.051-.065.112-.125.182-.179.07-.053.147-.106.231-.157l1.106-.644.413.7-1.113.637a1.954 1.954 0 0 1-.248.13 1.07 1.07 0 0 1-.256.073c.159.028.327.093.504.196l1.113.651-.406.7-1.113-.651a3.307 3.307 0 0 1-.231-.154 1.122 1.122 0 0 1-.189-.175c.06.15.091.322.091.518v1.288H2.38z" fill="#494C4E" fill-rule="evenodd"/>
-</svg>`);
+registerSemanticVariableForSvgImageUrl(
+	'--d2l-input-label-required-image',
+	`<svg width="5" height="6" viewBox="0 0 5 6" xmlns="http://www.w3.org/2000/svg">
+		<path d="M2.38 5.141V3.86c0-.093.006-.184.018-.273.011-.089.031-.173.059-.252a.927.927 0 0 1-.182.175c-.07.051-.145.103-.224.154l-1.106.644-.413-.7 1.113-.644c.084-.051.167-.093.248-.126.082-.033.167-.056.256-.07a.816.816 0 0 1-.256-.07 2.356 2.356 0 0 1-.248-.133L.532 1.914l.406-.7 1.113.658c.08.051.155.104.228.157a.966.966 0 0 1 .185.179 1.002 1.002 0 0 1-.066-.252 2.091 2.091 0 0 1-.018-.273V.388h.826v1.281c0 .098-.006.192-.017.283a1.003 1.003 0 0 1-.067.256c.051-.065.112-.125.182-.179.07-.053.147-.106.231-.157l1.106-.644.413.7-1.113.637a1.954 1.954 0 0 1-.248.13 1.07 1.07 0 0 1-.256.073c.159.028.327.093.504.196l1.113.651-.406.7-1.113-.651a3.307 3.307 0 0 1-.231-.154 1.122 1.122 0 0 1-.189-.175c.06.15.091.322.091.518v1.288H2.38z" fill="var(--d2l-theme-icon-color-standard)" fill-rule="evenodd"/>
+	</svg>`
+);
 
 export const inputLabelStyles = css`
 	.d2l-input-label {
@@ -19,7 +22,7 @@ export const inputLabelStyles = css`
 	}
 	:host([required]) .d2l-input-label::after,
 	.d2l-input-label-required::after {
-		background-image: ${requiredIcon};
+		background-image: var(--d2l-input-label-required-image);
 		bottom: 0.25rem;
 		content: "";
 		display: inline-block;
@@ -47,7 +50,7 @@ export const inputLabelStyles = css`
 		.d2l-input-label-required::after {
 			background-color: FieldText;
 			background-image: none;
-			mask-image: ${requiredIcon};
+			mask-image: var(--d2l-input-label-required-image);
 		}
 	}
 `;

package/components/inputs/input-radio-styles.js

@@ -1,10 +1,12 @@
-import '../colors/colors.js';
 import { css } from 'lit';
-import { svgToCSS } from '../../helpers/svg-to-css.js';
+import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
 
-const radioCheck = svgToCSS(`<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
-	<circle cx="5" cy="5" r="5" fill="#494c4e"></circle>
-</svg>`);
+registerSemanticVariableForSvgImageUrl(
+	'--d2l-input-radio-check-image',
+	`<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+		<circle cx="5" cy="5" r="5" fill="var(--d2l-theme-icon-color-standard)"></circle>
+	</svg>`
+);
 
 export const radioStyles = css`
 	.d2l-input-radio,
@@ -28,15 +30,15 @@ export const radioStyles = css`
 	.d2l-input-radio[aria-checked="true"],
 	.d2l-input-radio:checked,
 	.d2l-input-radio-label > input[type="radio"]:checked {
-		background-image: ${radioCheck};
+		background-image: var(--d2l-input-radio-check-image);
 	}
 	.d2l-input-radio,
 	.d2l-input-radio:hover:disabled,
 	.d2l-input-radio:hover.d2l-disabled,
 	.d2l-input-radio-label > input[type="radio"],
 	.d2l-input-radio-label > input[type="radio"]:hover:disabled {
-		background-color: var(--d2l-color-regolith);
-		border-color: var(--d2l-color-galena);
+		background-color: var(--d2l-theme-background-color-interactive-faint-default);
+		border-color: var(--d2l-theme-border-color-emphasized);
 		border-width: 1px;
 	}
 	.d2l-input-radio.d2l-hovering,
@@ -44,22 +46,22 @@ export const radioStyles = css`
 	.d2l-input-radio:focus,
 	.d2l-input-radio-label > input[type="radio"]:hover,
 	.d2l-input-radio-label > input[type="radio"]:focus {
-		border-color: var(--d2l-input-radio-border-color-hover-focus, var(--d2l-color-celestine));
+		border-color: var(--d2l-input-radio-border-color-hover-focus, var(--d2l-theme-border-color-focus));
 		border-width: 2px;
 		outline: none;
 	}
 	.d2l-input-radio[aria-invalid="true"],
 	.d2l-input-radio-label > input[type="radio"][aria-invalid="true"] {
-		border-color: var(--d2l-color-cinnabar);
+		border-color: var(--d2l-theme-status-color-error);
 	}
 	.d2l-input-radio:disabled,
 	.d2l-input-radio.d2l-disabled,
 	.d2l-input-radio-label > input[type="radio"]:disabled {
-		opacity: 0.5;
+		opacity: var(--d2l-theme-opacity-disabled-control);
 	}
 	.d2l-input-radio-label {
 		align-items: center;
-		color: var(--d2l-color-ferrite);
+		color: var(--d2l-theme-text-color-static-standard);
 		display: flex;
 		font-size: 0.8rem;
 		font-weight: 400;
@@ -72,7 +74,7 @@ export const radioStyles = css`
 	}
 	.d2l-input-radio-label-disabled:not(.d2l-input-radio-label-disabled-tooltip),
 	.d2l-input-radio-label-disabled-tooltip > * {
-		opacity: 0.5;
+		opacity: var(--d2l-theme-opacity-disabled-control);
 	}
 	.d2l-input-radio-label-disabled:not(.d2l-input-radio-label-disabled-tooltip) > .d2l-input-radio,
 	.d2l-input-radio-label-disabled:not(.d2l-input-radio-label-disabled-tooltip) > input[type="radio"] {
@@ -87,8 +89,8 @@ export const radioStyles = css`
 	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio-label > input[type="radio"]:hover,
 	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio-label > input[type="radio"]:focus {
 		background-blend-mode: lighten;
-		background-color: color-mix(in srgb, var(--d2l-color-regolith) 50%, transparent); /* mock background opacity */
-		border-color: var(--d2l-input-radio-border-color-hover-focus, var(--d2l-color-celestine));
+		background-color: var(--d2l-theme-background-color-interactive-faint-disabled);
+		border-color: var(--d2l-input-radio-border-color-hover-focus, var(--d2l-theme-border-color-focus));
 		border-width: 2px;
 		opacity: 1;
 		outline: none;
@@ -119,7 +121,7 @@ export const radioStyles = css`
 			display: block;
 			height: 1.2rem;
 			left: 50%;
-			mask-image: ${radioCheck};
+			mask-image: var(--d2l-input-radio-check-image);
 			mask-position: center center;
 			mask-repeat: no-repeat;
 			mask-size: 0.5rem 0.5rem;

package/components/inputs/input-select-styles.js

@@ -1,30 +1,32 @@
-import '../colors/colors.js';
+import './input-styles.js';
 import { css, unsafeCSS } from 'lit';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
-import { invalidIcon } from './input-styles.js';
-import { svgToCSS } from '../../helpers/svg-to-css.js';
+import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
 
 const focusClass = unsafeCSS(getFocusPseudoClass());
 
-const chevron = svgToCSS(`<svg width="11" height="7" viewBox="0 0 11 7" xmlns="http://www.w3.org/2000/svg">
-  <path d="M1 2l4.5 4M10 2L5.5 6" stroke="#565A5C" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"/>
-</svg>`);
+registerSemanticVariableForSvgImageUrl(
+	'--d2l-input-select-chevron-image',
+	`<svg width="11" height="7" viewBox="0 0 11 7" xmlns="http://www.w3.org/2000/svg">
+		<path d="M1 2l4.5 4M10 2L5.5 6" stroke="var(--d2l-theme-icon-color-standard)" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"/>
+	</svg>`
+);
 
 export const selectStyles = css`
 	.d2l-input-select {
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		appearance: none;
-		background-color: #ffffff;
-		background-image: ${chevron};
+		background-color: var(--d2l-theme-background-color-base);
+		background-image: var(--d2l-input-select-chevron-image);
 		background-origin: border-box;
 		background-position: center var(--d2l-inline-end, right) 17px;
 		background-repeat: no-repeat;
 		background-size: 11px 7px;
 		border: none;
 		border-radius: 0.3rem;
-		box-shadow: inset 0 2px 0 1px rgba(177, 185, 190, 0.2); /* corundum */
-		color: var(--d2l-color-ferrite);
+		box-shadow: inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) 1px var(--d2l-theme-shadow-inset-color);
+		color: var(--d2l-theme-text-color-static-standard);
 		display: inline-block;
 		font-family: inherit;
 		font-size: 0.8rem;
@@ -34,7 +36,7 @@ export const selectStyles = css`
 		line-height: 1.2rem;
 		margin: 0;
 		max-height: calc(2rem + 2px);
-		outline: 1px solid var(--d2l-color-galena);
+		outline: 1px solid var(--d2l-theme-border-color-emphasized);
 		outline-offset: -1px;
 		padding-block: calc(0.4rem + 1px);
 		padding-inline: calc(0.75rem + 1px) calc(2px + 0.8rem + 1px + 11px + 16px + 1px);
@@ -43,12 +45,12 @@ export const selectStyles = css`
 
 	.d2l-input-select:not([disabled]):hover,
 	.d2l-input-select:not([disabled]):${focusClass} {
-		box-shadow: inset 0 2px 0 2px rgba(177, 185, 190, 0.2); /* corundum */
-		outline: 2px solid var(--d2l-color-celestine);
+		box-shadow: inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) 2px var(--d2l-theme-shadow-inset-color);
+		outline: 2px solid var(--d2l-theme-border-color-focus);
 		outline-offset: -2px;
 	}
 	.d2l-input-select[aria-invalid="true"] {
-		background-image: ${chevron}, ${invalidIcon};
+		background-image: var(--d2l-input-select-chevron-image), var(--d2l-input-invalid-image);
 		background-position: center var(--d2l-inline-end, right) 17px, center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
 		background-repeat: no-repeat, no-repeat;
 		background-size: 11px 7px, 0.8rem 0.8rem;
@@ -56,10 +58,10 @@ export const selectStyles = css`
 	.d2l-input-select[aria-invalid="true"],
 	.d2l-input-select[aria-invalid="true"]:${focusClass},
 	.d2l-input-select[aria-invalid="true"]:hover {
-		outline-color: var(--d2l-color-cinnabar);
+		outline-color: var(--d2l-theme-status-color-error);
 	}
 	.d2l-input-select:disabled {
-		opacity: 0.5;
+		opacity: var(--d2l-theme-opacity-disabled-control);
 	}
 
 	@media (prefers-contrast: more) {
@@ -88,7 +90,7 @@ export const selectStyles = css`
 		}
 
 		.d2l-input-select[aria-invalid="true"] {
-			background-image: ${invalidIcon};
+			background-image: var(--d2l-input-invalid-image);
 			background-position: center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
 			background-repeat: no-repeat;
 			background-size: 0.8rem 0.8rem;
@@ -97,7 +99,7 @@ export const selectStyles = css`
 		.d2l-input-select[aria-invalid="true"],
 		.d2l-input-select[aria-invalid="true"]:${focusClass},
 		.d2l-input-select[aria-invalid="true"]:hover {
-			outline-color: var(--d2l-color-cinnabar);
+			outline-color: var(--d2l-theme-status-color-error);
 		}
 	}
 `;

package/components/inputs/input-styles.js

@@ -1,23 +1,25 @@
-import '../colors/colors.js';
 import { css, unsafeCSS } from 'lit';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
-import { svgToCSS } from '../../helpers/svg-to-css.js';
+import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
 
 const focusClass = unsafeCSS(getFocusPseudoClass());
 
-export const invalidIcon = svgToCSS(`<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-	<path fill="#cd2026" d="M17.79 15.11l-7-14a2 2 0 0 0-3.58 0l-7 14a1.975 1.975 0 0 0 .09 1.94A2 2 0 0 0 2 18h14a1.994 1.994 0 0 0 1.7-.95 1.967 1.967 0 0 0 .09-1.94zM9 16a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 9 16zm.98-4.806a1 1 0 0 1-1.96 0l-.99-5A1 1 0 0 1 8.01 5h1.983a1 1 0 0 1 .98 1.194z"/>
-	<path fill="#FFF" d="M9 16a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 9 16zm.98-4.806a1 1 0 0 1-1.96 0l-.99-5A1 1 0 0 1 8.01 5h1.983a1 1 0 0 1 .98 1.194z"/>
-  </svg>`);
+registerSemanticVariableForSvgImageUrl(
+	'--d2l-input-invalid-image',
+	`<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+		<path fill="var(--d2l-theme-status-color-error)" d="M17.79 15.11l-7-14a2 2 0 0 0-3.58 0l-7 14a1.975 1.975 0 0 0 .09 1.94A2 2 0 0 0 2 18h14a1.994 1.994 0 0 0 1.7-.95 1.967 1.967 0 0 0 .09-1.94zM9 16a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 9 16zm.98-4.806a1 1 0 0 1-1.96 0l-.99-5A1 1 0 0 1 8.01 5h1.983a1 1 0 0 1 .98 1.194z"/>
+		<path fill="var(--d2l-theme-background-color-base)" d="M9 16a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 9 16zm.98-4.806a1 1 0 0 1-1.96 0l-.99-5A1 1 0 0 1 8.01 5h1.983a1 1 0 0 1 .98 1.194z"/>
+	</svg>`
+);
 
 export const inputStyles = css`
 	.d2l-input {
-		background-color: var(--d2l-input-background-color, #ffffff);
+		background-color: var(--d2l-input-background-color, var(--d2l-theme-background-color-base));
 		border-radius: var(--d2l-input-border-radius, 0.3rem);
 		border-style: solid;
-		box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
+		box-shadow: var(--d2l-theme-shadow-inset);
 		box-sizing: border-box;
-		color: var(--d2l-color-ferrite);
+		color: var(--d2l-theme-text-color-static-standard);
 		display: inline-block;
 		font-family: inherit;
 		font-size: 0.8rem;
@@ -37,34 +39,34 @@ export const inputStyles = css`
 	.d2l-input:hover:disabled,
 	.d2l-input:${focusClass}:disabled,
 	[aria-invalid="true"].d2l-input:disabled {
-		border-color: var(--d2l-input-border-color, var(--d2l-color-galena));
+		border-color: var(--d2l-input-border-color, var(--d2l-theme-border-color-emphasized));
 		border-width: 1px;
 		padding: var(--d2l-input-padding, 0.4rem 0.75rem);
 	}
 	.d2l-input::placeholder {
-		color: var(--d2l-color-galena);
+		color: var(--d2l-theme-text-color-static-faint);
 		font-size: 0.8rem;
 		font-weight: 400;
 		opacity: 1; /* Firefox has non-1 default */
 	}
 	.d2l-input::-ms-input-placeholder {
-		color: var(--d2l-color-galena);
+		color: var(--d2l-theme-text-color-static-faint);
 		font-size: 0.8rem;
 		font-weight: 400;
 	}
 	.d2l-input:hover,
 	.d2l-input:${focusClass},
 	.d2l-input-focus {
-		border-color: var(--d2l-color-celestine);
+		border-color: var(--d2l-theme-border-color-focus);
 		border-width: 2px;
 		outline: none;
 		padding: var(--d2l-input-padding-focus, calc(0.4rem - 1px) calc(0.75rem - 1px));
 	}
 	[aria-invalid="true"].d2l-input {
-		border-color: var(--d2l-color-cinnabar);
+		border-color: var(--d2l-theme-status-color-error);
 	}
 	.d2l-input:disabled {
-		opacity: 0.5;
+		opacity: var(--d2l-theme-opacity-disabled-control);
 	}
 	.d2l-input::-webkit-search-cancel-button,
 	.d2l-input::-webkit-search-decoration {
@@ -90,7 +92,7 @@ export const inputStyles = css`
 		padding-block: calc(0.5rem - 1px);
 	}
 	textarea.d2l-input[aria-invalid="true"] {
-		background-image: ${invalidIcon};
+		background-image: var(--d2l-input-invalid-image);
 		background-position: top 12px var(--d2l-inline-end, right) 18px;
 		background-repeat: no-repeat;
 		background-size: 0.8rem 0.8rem;
@@ -109,7 +111,7 @@ export const inputStyles = css`
 	@media (prefers-contrast: more) {
 		[aria-invalid="true"].d2l-input {
 			background-color: Field;
-			border-color: var(--d2l-color-cinnabar);
+			border-color: var(--d2l-theme-status-color-error);
 			box-shadow: none;
 			color: FieldText;
 			forced-color-adjust: none;

package/components/inputs/input-text.js

@@ -1,7 +1,6 @@
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
-import { inputStyles, invalidIcon } from './input-styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
@@ -10,6 +9,7 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { InputInlineHelpMixin } from './input-inline-help.js';
 import { inputLabelStyles } from './input-label-styles.js';
+import { inputStyles } from './input-styles.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { PerfMonitor } from '../../helpers/perfMonitor.js';
@@ -250,7 +250,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 					right: 0;
 				}
 				.d2l-input-unit {
-					color: var(--d2l-color-galena);
+					color: var(--d2l-theme-text-color-static-faint);
 					font-size: 0.7rem;
 					margin-top: 0.05rem;
 				}
@@ -264,10 +264,10 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 					margin-right: 12px;
 				}
 				:host([disabled]) .d2l-input-unit {
-					opacity: 0.5;
+					opacity: var(--d2l-theme-opacity-disabled-control);
 				}
 				.d2l-input-text-invalid-icon {
-					background-image: ${invalidIcon};
+					background-image: var(--d2l-input-invalid-image);
 					background-position: center center;
 					background-repeat: no-repeat;
 					background-size: 0.8rem 0.8rem;

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