@brightspace-ui/core 3.73.0 → 3.74.0

package/components/backdrop/README.md

@@ -1,6 +1,6 @@
 # Backdrops
 
-The `d2l-backdrop` element is a web component to display a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying `role="presentation"` and `aria-hidden="true"`.
+The `d2l-backdrop` element displays a semi-transparent backdrop behind a specified sibling target element. It also hides elements other than the target from assistive technologies by applying `aria-hidden="true"`.
 
 ## Backdrop [d2l-backdrop]
 
@@ -9,7 +9,6 @@ The `d2l-backdrop` element is a web component to display a semi-transparent back
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/backdrop/backdrop.js';
-  import '@brightspace-ui/core/components/switch/switch.js';
 
   const backdrop = document.querySelector('d2l-backdrop');
   document.querySelector('#target > d2l-button').addEventListener('click', () => {
@@ -36,3 +35,11 @@ The `d2l-backdrop` element is a web component to display a semi-transparent back
 | `shown` | Boolean | Used to control whether the backdrop is shown |
 | `slow-transition` | Boolean | Increases the fade transition time to 1200ms (default is 200ms) |
 <!-- docs: end hidden content -->
+
+### Focus Management
+
+Elements with `aria-hidden` applied (as well as their descendants) are completely hidden from assistive technologies. It's therefore very important that the element with active focus be within the backdrop target.
+
+**When showing a backdrop**: first move focus inside the target, then set the `shown` attribute on the backdrop.
+
+**When hiding a backdrop**: first remove the `shown` attribute on the backdrop, then if appropriate move focus outside the target.

package/components/backdrop/backdrop.js

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
-import { cssEscape, getComposedChildren, getComposedParent, isVisible } from '../../helpers/dom.js';
+import { cssEscape, getComposedChildren, getComposedParent, isComposedAncestor, isVisible } from '../../helpers/dom.js';
+import { getComposedActiveElement } from '../../helpers/focus.js';
 
 const BACKDROP_HIDDEN = 'data-d2l-backdrop-hidden';
 const BACKDROP_ARIA_HIDDEN = 'data-d2l-backdrop-aria-hidden';
@@ -12,7 +13,7 @@ const modals = new Set();
 let scrollOverflow = null;
 
 /**
- * A component for displaying a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying 'role="presentation"' and 'aria-hidden="true"'.
+ * A component for displaying a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying 'aria-hidden="true"'.
  */
 class Backdrop extends LitElement {
 
@@ -85,10 +86,8 @@ class Backdrop extends LitElement {
 	disconnectedCallback() {
 		// allow body scrolling, show hidden elements, if backdrop is removed from the DOM
 		allowBodyScroll(this);
-		if (this._hiddenElements) {
-			showAccessible(this._hiddenElements);
-			this._hiddenElements = null;
-		}
+		showAccessible(this._hiddenElements);
+		this._hiddenElements = null;
 		this._state = null;
 		super.disconnectedCallback();
 	}
@@ -106,7 +105,12 @@ class Backdrop extends LitElement {
 
 			if (this._state === null) {
 				preventBodyScroll(this);
-				this._hiddenElements = hideAccessible(this.parentNode.querySelector(`#${cssEscape(this.forTarget)}`));
+				const target = this.parentNode.querySelector(`#${cssEscape(this.forTarget)}`);
+				// aria-hidden elements cannot have focus, so wait for focus to be within target
+				waitForFocusWithinTarget(target, Date.now() + 200).then(() => {
+					if (!this.shown || this._state !== 'showing') return;
+					this._hiddenElements = hideAccessible(target);
+				});
 			}
 			this._state = 'showing';
 
@@ -188,6 +192,7 @@ function hideAccessible(target) {
 }
 
 function showAccessible(elems) {
+	if (!elems) return;
 	for (let i = 0; i < elems.length; i++) {
 		const elem = elems[i];
 		if (elem.hasAttribute(BACKDROP_ARIA_HIDDEN)) {
@@ -200,4 +205,18 @@ function showAccessible(elems) {
 	}
 }
 
+async function waitForFocusWithinTarget(target, expireTime) {
+
+	if (Date.now() > expireTime) return;
+
+	const activeElem = getComposedActiveElement();
+	const targetIsAncestor = isComposedAncestor(target, activeElem);
+
+	if (targetIsAncestor) return;
+
+	await new Promise(resolve => requestAnimationFrame(resolve));
+	return waitForFocusWithinTarget(target, expireTime);
+
+}
+
 customElements.define('d2l-backdrop', Backdrop);

package/components/inputs/demo/input-date.html

@@ -26,10 +26,10 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Min and Max Value</h2>
+			<h2>Min and Max Value, Required</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-date label="Date" max-value="2018-09-30" min-value="2018-08-27" value="2018-09-08"></d2l-input-date>
+					<d2l-input-date label="Date" max-value="2018-09-30" min-value="2018-08-27" value="2018-08-27" required></d2l-input-date>
 				</template>
 			</d2l-demo-snippet>
 

package/components/inputs/input-date.js

@@ -89,7 +89,9 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			_formattedValue: { type: String },
 			_inputTextFocusShowTooltip: { type: Boolean },
 			_showInfoTooltip: { type: Boolean },
-			_shownValue: { type: String }
+			_shownValue: { type: String },
+			_showRevertInstructions: { state: true },
+			_showRevertTooltip: { state: true }
 		};
 	}
 
@@ -159,10 +161,11 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		this._inputId = getUniqueId();
 		this._inputTextFocusMouseup = false;
 		this._inputTextFocusShowTooltip = true; // true by default so hover triggers tooltip
-		this._namespace = 'components.input-date';
 		this._openCalendarOnly = false;
 		this._openedOnKeydown = false;
 		this._showInfoTooltip = true;
+		this._showRevertInstructions = false;
+		this._showRevertTooltip = false;
 		this._shownValue = '';
 
 		this._dateTimeDescriptor = getDateTimeDescriptor();
@@ -183,11 +186,11 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			const minDate = this.minValue ? formatDate(getDateFromISODate(this.minValue), { format: 'medium' }) : null;
 			const maxDate = this.maxValue ? formatDate(getDateFromISODate(this.maxValue), { format: 'medium' }) : null;
 			if (minDate && maxDate) {
-				return this.localize(`${this._namespace}.errorOutsideRange`, { minDate, maxDate });
+				return this.localize('components.input-date.errorOutsideRange', { minDate, maxDate });
 			} else if (maxDate) {
-				return this.localize(`${this._namespace}.errorMaxDateOnly`, { maxDate });
+				return this.localize('components.input-date.errorMaxDateOnly', { maxDate });
 			} else if (this.minValue) {
-				return this.localize(`${this._namespace}.errorMinDateOnly`, { minDate });
+				return this.localize('components.input-date.errorMinDateOnly', { minDate });
 			}
 		}
 		return super.validationMessage;
@@ -237,12 +240,17 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		const formattedWideDate = formatISODateInUserCalDescriptor('2323-12-23');
 		const shortDateFormat = (this._dateTimeDescriptor.formats.dateFormats.short).toUpperCase();
 
-		const clearButton = !this.required ? html`<d2l-button-subtle text="${this.localize(`${this._namespace}.clear`)}" @click="${this._handleClear}"></d2l-button-subtle>` : null;
-		const nowButton = this.hasNow ? html`<d2l-button-subtle text="${this.localize(`${this._namespace}.now`)}" @click="${this._handleSetToNow}"></d2l-button-subtle>` : null;
+		const clearButton = !this.required ? html`<d2l-button-subtle text="${this.localize('components.input-date.clear')}" @click="${this._handleClear}"></d2l-button-subtle>` : null;
+		const nowButton = this.hasNow ? html`<d2l-button-subtle text="${this.localize('components.input-date.now')}" @click="${this._handleSetToNow}"></d2l-button-subtle>` : null;
 		const icon = (this.invalid || this.childErrors.size > 0)
 			? html`<d2l-icon icon="tier1:alert" slot="left" style="${styleMap({ color: 'var(--d2l-color-cinnabar)' })}"></d2l-icon>`
 			: html`<d2l-icon icon="tier1:calendar" slot="left"></d2l-icon>`;
-		const errorTooltip = (this.validationError && !this.opened && this.childErrors.size === 0) ? html`<d2l-tooltip align="start" announced for="${this._inputId}" state="error" class="vdiff-target">${this.validationError}</d2l-tooltip>` : null;
+
+		const tooltip = this._getErrorTooltip() || this._getRevertTooltip(shortDateFormat);
+
+		const inputTextInstructions = (this._showInfoTooltip && !tooltip && !this.invalid && this.childErrors.size === 0 && this._inputTextFocusShowTooltip)
+			? this.localize('components.input-date.openInstructions', { format: shortDateFormat })
+			: undefined;
 
 		const dropdownContent = this._dropdownFirstOpened ? html`
 			<d2l-dropdown-content
@@ -265,7 +273,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 					min-value="${ifDefined(this.minValue)}"
 					selected-value="${ifDefined(this._shownValue)}">
 					<div class="d2l-calendar-slot-buttons">
-						<d2l-button-subtle text="${this.localize(`${this._namespace}.today`)}" @click="${this._handleSetToToday}"></d2l-button-subtle>
+						<d2l-button-subtle text="${this.localize('components.input-date.today')}" @click="${this._handleSetToToday}"></d2l-button-subtle>
 						${nowButton}
 						${clearButton}
 					</div>
@@ -276,7 +284,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 				<div>${formattedWideDate}</div>
 				<div>${shortDateFormat}</div>
 			</div>
-			${errorTooltip}
+			${tooltip}
 			<d2l-dropdown ?disabled="${this.disabled || this.skeleton}" no-auto-open ?prefer-fixed-positioning="${this.preferFixedPositioning}">
 				<d2l-input-text
 					?novalidate="${this.noValidate}"
@@ -284,7 +292,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 					@blur="${this._handleInputTextBlur}"
 					@change="${this._handleChange}"
 					class="d2l-dropdown-opener vdiff-target"
-					instructions="${ifDefined((this._showInfoTooltip && !errorTooltip && !this.invalid && this.childErrors.size === 0 && this._inputTextFocusShowTooltip) ? this.localize(`${this._namespace}.openInstructions`, { format: shortDateFormat }) : undefined)}"
+					instructions="${ifDefined(inputTextInstructions)}"
 					?disabled="${this.disabled}"
 					@focus="${this._handleInputTextFocus}"
 					@keydown="${this._handleKeydown}"
@@ -349,15 +357,62 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		this._dropdown.close();
 	}
 
+	_getErrorTooltip() {
+		if (!this.validationError || this.opened || this.childErrors.size > 0) return null;
+
+		const message = (this._showRevertTooltip || this._showRevertInstructions)
+			? html`
+				<div>${this.localize('components.input-date.revert', { label: this.label })}</div>
+				<br>
+				<div>${this.validationError}</div>`
+			: this.validationError;
+
+		return html`
+			<d2l-tooltip 
+				align="start" 
+				announced 
+				class="vdiff-target" 
+				for="${this._inputId}"
+				?force-show="${this._showRevertTooltip}"
+				state="error">
+				${message}
+			</d2l-tooltip>
+		`;
+	}
+
+	_getRevertTooltip(shortDateFormat) {
+		if (this.opened || this.invalid || (!this._showRevertInstructions && !this._showRevertTooltip)) return null;
+
+		const revertMessage = this.localize('components.input-date.revert', { label: this.label });
+		const secondaryMessage = this._showRevertInstructions
+			? this.localize('components.input-date.openInstructions', { format: shortDateFormat })
+			: this.localize('components.input-date.useDateFormat', { format: shortDateFormat });
+
+		return html`
+			<d2l-tooltip 
+				align="start" 
+				announced 
+				class="vdiff-target" 
+				for="${this._inputId}"
+				?force-show="${this._showRevertTooltip}">
+				<div>${revertMessage}</div>
+				<br>
+				<div>${secondaryMessage}</div>
+			</d2l-tooltip>
+		`;
+	}
+
 	_handleBlur() {
 		this._showInfoTooltip = true;
 		this.requestValidate(true);
 	}
 
 	async _handleChange() {
+		this._showRevertTooltip = false;
 		const value = this._textInput.value;
+		const isNewVal = value !== this.value;
 		if (!value && !this.required) {
-			if (value !== this.value) {
+			if (isNewVal) {
 				await this._updateValueDispatchEvent('');
 				if (this._calendar) {
 					await this.updateComplete;
@@ -373,6 +428,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			await this._updateValueDispatchEvent(formatDateInISO({ year: date.getFullYear(), month: (parseInt(date.getMonth()) + 1), date: date.getDate() }));
 		} catch {
 			// leave value the same when invalid input
+			if (isNewVal) this._showRevertTooltip = true;
 		}
 		this._setFormattedValue(); // keep out here in case parseDate is same date, e.g., user adds invalid text to end of parseable date
 		if (this._calendar) {
@@ -390,6 +446,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 	}
 
 	async _handleDateSelected(e) {
+		this._showRevertTooltip = false;
 		const value = e.target.selectedValue;
 		await this._updateValueDispatchEvent(value);
 		if (this._dropdown) {
@@ -448,9 +505,15 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 	_handleInputTextBlur() {
 		this._inputTextFocusMouseup = false;
 		this._inputTextFocusShowTooltip = true;
+		this._showRevertInstructions = false;
 	}
 
-	_handleInputTextFocus() {
+	async _handleInputTextFocus() {
+		if (this._showRevertTooltip) {
+			this._showRevertTooltip = false;
+			await this.updateComplete;
+			this._showRevertInstructions = true;
+		}
 		this._formattedValue = this._shownValue ? formatISODateInUserCalDescriptor(this._shownValue) : '';
 
 		// hide tooltip when focus, wait to see if click happened, then show

package/custom-elements.json

@@ -189,7 +189,7 @@
     {
       "name": "d2l-backdrop",
       "path": "./components/backdrop/backdrop.js",
-      "description": "A component for displaying a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying 'role=\"presentation\"' and 'aria-hidden=\"true\"'.",
+      "description": "A component for displaying a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying 'aria-hidden=\"true\"'.",
       "attributes": [
         {
           "name": "for-target",

package/lang/ar.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "يجب أن يكون التاريخ بين {minDate} و{maxDate}",
 	"components.input-date.openInstructions": "استخدم تنسيق التاريخ {format}. انتقل إلى الأسفل أو اضغط على Enter للوصول إلى التقويم المصغّر.",
 	"components.input-date.now": "الآن",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "اليوم",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "يقبل هذا الحقل قيم الأعداد الصحيحة فقط (بدون أعداد عشرية)",
 	"components.input-number.hintDecimalDuplicate": "يوجد عدد عشري في هذا الرقم",
 	"components.input-number.hintDecimalIncorrectComma": "لإضافة عدد عشري، استخدم حرف الفاصلة \",\"",

package/lang/cy.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "Rhaid i'r dyddiad fod rhwng {minDate} a {maxDate}",
 	"components.input-date.openInstructions": "Defnyddio fformat dyddiad {format}. Pwyswch saeth i lawr neu Enter i gael mynediad at galendr bach.",
 	"components.input-date.now": "Nawr",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Heddiw",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "Mae'r maes hwn yn derbyn gwerthoedd cyfanrif yn unig (dim degolion)",
 	"components.input-number.hintDecimalDuplicate": "Mae degol eisoes yn y nifer hwn",
 	"components.input-number.hintDecimalIncorrectComma": "I ychwanegu degol defnyddiwch y nod coma \",”",

package/lang/da.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "Datoen skal være mellem {minDate} og {maxDate}",
 	"components.input-date.openInstructions": "Brug datoformatet {format}. Tryk på Pil ned eller Enter for at få adgang til minikalender.",
 	"components.input-date.now": "Nu",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "I dag",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "Dette felt accepterer kun heltalsværdier (ingen decimaler)",
 	"components.input-number.hintDecimalDuplicate": "Der er allerede en decimal i dette tal",
 	"components.input-number.hintDecimalIncorrectComma": "Hvis du vil tilføje en decimal, skal du bruge komma-tegnet \",\"",

package/lang/de.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "Datum muss zwischen {minDate} und {maxDate} liegen",
 	"components.input-date.openInstructions": "Das Datumsformat {format} verwenden. Minikalender durch Abwärtspfeil oder durch Drücken der Eingabetaste aufrufen.",
 	"components.input-date.now": "Jetzt",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Heute",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "Dieses Feld akzeptiert nur Ganzzahlen (keine Dezimalstellen)",
 	"components.input-number.hintDecimalDuplicate": "Diese Zahl enthält bereits eine Dezimale",
 	"components.input-number.hintDecimalIncorrectComma": "Verwenden Sie zum Hinzufügen einer Dezimalstelle das Komma \",“",

package/lang/en-gb.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "Date must be between {minDate} and {maxDate}",
 	"components.input-date.openInstructions": "Use date format {format}. Arrow down or press enter to access mini-calendar.",
 	"components.input-date.now": "Now",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Today",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "This field only accepts integer values (no decimals)",
 	"components.input-number.hintDecimalDuplicate": "There's already a decimal in this number",
 	"components.input-number.hintDecimalIncorrectComma": "To add a decimal use the comma \",\" character",

package/lang/en.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "Date must be between {minDate} and {maxDate}",
 	"components.input-date.openInstructions": "Use date format {format}. Arrow down or press enter to access mini-calendar.",
 	"components.input-date.now": "Now",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Today",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "This field only accepts integer values (no decimals)",
 	"components.input-number.hintDecimalDuplicate": "There's already a decimal in this number",
 	"components.input-number.hintDecimalIncorrectComma": "To add a decimal use the comma \",\" character",

package/lang/es-es.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "La fecha debe estar entre el {minDate} y el {maxDate}",
 	"components.input-date.openInstructions": "Usar formato de fecha {format}. Use la fecha hacia abajo o pulse Intro para acceder al minicalendario.",
 	"components.input-date.now": "Ahora",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Hoy",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "Este campo sólo acepta valores enteros (sin decimales)",
 	"components.input-number.hintDecimalDuplicate": "Ya hay un decimal en este número",
 	"components.input-number.hintDecimalIncorrectComma": "Para agregar un decimal, utilice la coma \",\"",

package/lang/es.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "La fecha debe estar entre {minDate} y {maxDate}",
 	"components.input-date.openInstructions": "Utilice el formato de fecha {format}. Presione la flecha hacia abajo o Intro para acceder al minicalendario.",
 	"components.input-date.now": "Ahora",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Hoy",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "Este campo solo acepta valores enteros (sin decimales)",
 	"components.input-number.hintDecimalDuplicate": "Ya hay un decimal en este número",
 	"components.input-number.hintDecimalIncorrectComma": "Para agregar un decimal, use el carácter coma (“,”)",

package/lang/fr-fr.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "La date doit être comprise entre {minDate} et {maxDate}",
 	"components.input-date.openInstructions": "Utiliser le format de date {format}. Utilisez la flèche vers le bas ou appuyez sur Entrée pour accéder au mini-calendrier.",
 	"components.input-date.now": "Maintenant",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Aujourd’hui",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "Ce champ accepte uniquement les valeurs entières (pas de décimales)",
 	"components.input-number.hintDecimalDuplicate": "Il existe déjà une décimale dans ce nombre",
 	"components.input-number.hintDecimalIncorrectComma": "Pour ajouter une décimale, utilisez la virgule « , »",

package/lang/fr.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "La date doit être comprise entre {minDate} et {maxDate}",
 	"components.input-date.openInstructions": "Utiliser le format de date {format}. Utiliser la flèche vers le bas ou la touche d'entrée pour accéder au mini-calendrier.",
 	"components.input-date.now": "Maintenant",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Aujourd'hui",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "Ce champ accepte uniquement les valeurs entières (sans décimales)",
 	"components.input-number.hintDecimalDuplicate": "Ce nombre comporte déjà une décimale",
 	"components.input-number.hintDecimalIncorrectComma": "Pour ajouter une décimale, utilisez la virgule « , »",

package/lang/hi.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "तारीख़ {minDate} और {maxDate} के बीच होनी चाहिए",
 	"components.input-date.openInstructions": "तारीख़ फ़ॉर्मेट {format} का उपयोग करें। लघु-कैलेंडर तक पहुँचने के लिए तीर नीचे या एंटर दबाएँ।",
 	"components.input-date.now": "अभी",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "आज",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "यह फ़ील्ड केवल पूर्णांक मानों (कोई दशमलव नहीं) को स्वीकार करती है",
 	"components.input-number.hintDecimalDuplicate": "इस संख्या में पहले से ही कोई दशमलव है",
 	"components.input-number.hintDecimalIncorrectComma": "दशमलव जोड़ने के लिए, अल्पविराम \",\" वर्ण उपयोग करें",

package/lang/ja.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "日付は {minDate} から {maxDate} の間にする必要があります",
 	"components.input-date.openInstructions": "日付形式 {format} を使用します。ミニカレンダーにアクセスするには下矢印を使うか Enter を押します。",
 	"components.input-date.now": "現在",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "今日",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "このフィールドには整数値のみ入力できます（小数不可）。",
 	"components.input-number.hintDecimalDuplicate": "この数値にはすでに小数があります",
 	"components.input-number.hintDecimalIncorrectComma": "小数を追加するには、カンマ「,」文字を使用します",

package/lang/ko.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "날짜는 {minDate}와 {maxDate} 사이여야 합니다.",
 	"components.input-date.openInstructions": "{format} 날짜 형식을 사용하십시오. 미니 달력에 접근하려면 아래쪽 화살표를 누르거나 Enter 키를 누르십시오.",
 	"components.input-date.now": "현재",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "오늘",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "이 필드는 정수 값만 허용합니다(소수점 없음)",
 	"components.input-number.hintDecimalDuplicate": "이 숫자에 이미 소수점이 있습니다",
 	"components.input-number.hintDecimalIncorrectComma": "소수점을 추가하려면 쉼표 \",\" 문자를 사용합니다",

package/lang/nl.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "Datum moet tussen {minDate} en {maxDate} liggen",
 	"components.input-date.openInstructions": "Gebruik datumnotatie {format}. Gebruik Pijl omlaag of druk op Enter om de mini-agenda te openen.",
 	"components.input-date.now": "Nu",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Vandaag",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "Dit veld accepteert alleen gehele getallen (geen decimalen)",
 	"components.input-number.hintDecimalDuplicate": "Dit getal bevat al een decimaal",
 	"components.input-number.hintDecimalIncorrectComma": "Als u een decimaal wilt toevoegen, gebruikt u het teken ','",

package/lang/pt.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "A data precisa estar entre {minDate} e {maxDate}",
 	"components.input-date.openInstructions": "Adote o formato de data {format}. Use a tecla de seta para baixo ou pressione Enter para acessar o minicalendário.",
 	"components.input-date.now": "Agora",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Hoje",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "Este campo aceita apenas valores inteiros (não decimais)",
 	"components.input-number.hintDecimalDuplicate": "Já existe um decimal neste número",
 	"components.input-number.hintDecimalIncorrectComma": "Para adicionar um decimal, use o caractere vírgula “,”",

package/lang/sv.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "Datumet ska vara mellan {minDate} och {maxDate}",
 	"components.input-date.openInstructions": "Använd datumformatet {format}. Om du vill visa minikalendern trycker du på nedåtpil eller Enter.",
 	"components.input-date.now": "Nu",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Idag",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "I det här fältet accepteras endast heltalsvärden (inga decimaler)",
 	"components.input-number.hintDecimalDuplicate": "Det finns redan en decimal i det här talet",
 	"components.input-number.hintDecimalIncorrectComma": "Om du vill lägga till en decimal använder du kommatecknet \",\"",

package/lang/tr.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "Tarih, {minDate} ile {maxDate} arasında olmalıdır",
 	"components.input-date.openInstructions": "{format} tarih formatını kullanın. Küçük takvime erişmek için aşağı okunu kullanın veya enter tuşuna basın.",
 	"components.input-date.now": "Şimdi",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Bugün",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "Bu alanda yalnızca tam sayı değerleri kabul edilir (ondalık sayı kabul edilmez)",
 	"components.input-number.hintDecimalDuplicate": "Bu sayıda zaten bir ondalık var",
 	"components.input-number.hintDecimalIncorrectComma": "Ondalık sayı eklemek için virgül \",\" karakterini kullanın",

package/lang/zh-cn.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "日期必须介于 {minDate} 和 {maxDate} 之间",
 	"components.input-date.openInstructions": "使用日期格式 {format}。利用向下箭头键或按 Enter 键访问迷你日历。",
 	"components.input-date.now": "现在",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "今天",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "此字段只接受整数值（无小数）",
 	"components.input-number.hintDecimalDuplicate": "此数中已有一个小数",
 	"components.input-number.hintDecimalIncorrectComma": "要添加小数，请使用逗号“,”字符",

package/lang/zh-tw.js

@@ -69,7 +69,9 @@ export default {
 	"components.input-date.errorOutsideRange": "日期必須介於 {minDate} 與 {maxDate} 之間",
 	"components.input-date.openInstructions": "使用日期格式 {format}。按向下箭頭，或按下「Enter」以存取迷你行事曆。",
 	"components.input-date.now": "立即",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "今天",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "此欄位僅接受整數值 (無小數位數)",
 	"components.input-number.hintDecimalDuplicate": "這個數字已經有一個小數位數",
 	"components.input-number.hintDecimalIncorrectComma": "若要新增小數位數，請使用逗號「,」字元",

package/package.json

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