@brightspace-ui/core 3.12.0 → 3.14.0

package/components/inputs/input-date-range.js

@@ -8,6 +8,7 @@ import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { InteractiveMixin } from '../../mixins/interactive/interactive-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
@@ -32,7 +33,7 @@ export function getShiftedEndDate(startValue, endValue, prevStartValue, inclusiv
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when there is a change to selected start date or selected end date. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar date format (`YYYY-MM-DD`).
  */
-class InputDateRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement))))) {
+class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement)))))) {
 
 	static get properties() {
 		return {
@@ -177,7 +178,7 @@ class InputDateRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 		const endDateInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-date-range-end');
 		const tooltipStart = (this.validationError && !this.startOpened && !this.childErrors.has(startDateInput)) ? html`<d2l-tooltip align="start" announced for="${this._startInputId}" state="error" class="vdiff-target">${this.validationError}</d2l-tooltip>` : null;
 		const tooltipEnd = (this.validationError && !this.endOpened && !this.childErrors.has(endDateInput)) ? html`<d2l-tooltip align="start" announced for="${this._endInputId}" state="error" class="vdiff-target">${this.validationError}</d2l-tooltip>` : null;
-		return html`
+		return this.renderInteractiveContainer(html`
 			${tooltipStart}
 			${tooltipEnd}
 			<d2l-input-fieldset
@@ -230,7 +231,9 @@ class InputDateRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 				</d2l-input-date-time-range-to>
 				<slot slot="inline-help" name="inline-help"></slot>
 			</d2l-input-fieldset>
-		`;
+		`,
+		this.localize('components.input-date-range.interactive-label'),
+		() => { this.shadowRoot.querySelector('d2l-input-date').focus(); });
 	}
 
 	updated(changedProperties) {

package/components/inputs/input-date-time-range.js

@@ -9,6 +9,7 @@ import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { InteractiveMixin } from '../../mixins/interactive/interactive-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
@@ -65,7 +66,7 @@ export function getShiftedEndDateTime(startValue, endValue, prevStartValue, incl
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when there is a change to selected start date-time or selected end date-time. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`).
  */
-class InputDateTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement))))) {
+class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement)))))) {
 
 	static get properties() {
 		return {
@@ -225,7 +226,7 @@ class InputDateTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMi
 
 		const tooltipStart = (this.validationError && !this.startOpened && !this.childErrors.has(startDateTimeInput)) ? html`<d2l-tooltip align="start" announced for="${this._startInputId}" position="bottom" state="error" class="vdiff-target">${this.validationError}</d2l-tooltip>` : null;
 		const tooltipEnd = (this.validationError && !this.endOpened && !this.childErrors.has(endDateTimeInput)) ? html`<d2l-tooltip align="start" announced for="${this._endInputId}" position="bottom" state="error" class="vdiff-target">${this.validationError}</d2l-tooltip>` : null;
-		return html`
+		return this.renderInteractiveContainer(html`
 			${tooltipStart}
 			${tooltipEnd}
 			<d2l-input-fieldset
@@ -287,7 +288,9 @@ class InputDateTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMi
 				</d2l-input-date-time-range-to>
 				<slot slot="inline-help" name="inline-help"></slot>
 			</d2l-input-fieldset>
-		`;
+		`,
+		this.localize('components.input-date-time-range.interactive-label'),
+		() => { this.shadowRoot.querySelector('d2l-input-date-time').focus(); });
 	}
 
 	updated(changedProperties) {

package/lang/ar.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "لا شيء",
 	"components.input-date-range.endDate": "تاريخ الانتهاء",
 	"components.input-date-range.errorBadInput": "يجب أن يكون تاريخ {startLabel} قبل {endLabel}",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "تاريخ البدء",
 	"components.input-date-time-range-to.to": "إلى",
 	"components.input-date-time-range.endDate": "تاريخ الانتهاء",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "يجب أن يكون التاريخ في {minDate} أو بعده",
 	"components.input-date-time.errorOutsideRange": "يجب أن يكون التاريخ بين {minDate} و{maxDate}",
 	"components.input-date-time.time": "الوقت",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "مسح",
 	"components.input-date.errorMaxDateOnly": "يجب أن يكون التاريخ في {maxDate} أو قبله",
 	"components.input-date.errorMinDateOnly": "يجب أن يكون التاريخ في {minDate} أو بعده",

package/lang/cy.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "Dim",
 	"components.input-date-range.endDate": "Dyddiad Dod i Ben",
 	"components.input-date-range.errorBadInput": "Rhaid i {startLabel} fod cyn {endLabel}",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "Dyddiad Dechrau",
 	"components.input-date-time-range-to.to": "i",
 	"components.input-date-time-range.endDate": "Dyddiad Dod i Ben",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "Rhaid i’r dyddiad fod ar neu ar ôl {minDate}",
 	"components.input-date-time.errorOutsideRange": "Rhaid i'r dyddiad fod rhwng {minDate} a {maxDate}",
 	"components.input-date-time.time": "Amser",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "Clirio",
 	"components.input-date.errorMaxDateOnly": "Rhaid i’r dyddiad fod cyn neu ar {maxDate}",
 	"components.input-date.errorMinDateOnly": "Rhaid i’r dyddiad fod ar neu ar ôl {minDate}",

package/lang/da.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "Ingen",
 	"components.input-date-range.endDate": "Slutdato",
 	"components.input-date-range.errorBadInput": "{startLabel} skal være før {endLabel}",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "Startdato",
 	"components.input-date-time-range-to.to": "for",
 	"components.input-date-time-range.endDate": "Slutdato",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "Datoen skal være den {minDate} eller senere",
 	"components.input-date-time.errorOutsideRange": "Datoen skal være mellem {minDate} og {maxDate}",
 	"components.input-date-time.time": "Tid",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "Ryd",
 	"components.input-date.errorMaxDateOnly": "Datoen skal være den {maxDate} eller tidligere",
 	"components.input-date.errorMinDateOnly": "Datoen skal være den {minDate} eller senere",

package/lang/de.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "Keine",
 	"components.input-date-range.endDate": "Enddatum",
 	"components.input-date-range.errorBadInput": "{startLabel} muss vor {endLabel} liegen",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "Startdatum",
 	"components.input-date-time-range-to.to": "bis",
 	"components.input-date-time-range.endDate": "Enddatum",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "Das Datum muss am oder nach dem {minDate} liegen",
 	"components.input-date-time.errorOutsideRange": "Datum muss zwischen {minDate} und {maxDate} liegen",
 	"components.input-date-time.time": "Uhrzeit",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "Löschen",
 	"components.input-date.errorMaxDateOnly": "Das Datum muss am oder vor dem {maxDate} liegen",
 	"components.input-date.errorMinDateOnly": "Das Datum muss am oder nach dem {minDate} liegen",

package/lang/en-gb.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "None",
 	"components.input-date-range.endDate": "End Date",
 	"components.input-date-range.errorBadInput": "{startLabel} must be before {endLabel}",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "Start Date",
 	"components.input-date-time-range-to.to": "to",
 	"components.input-date-time-range.endDate": "End Date",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "Date must be on or after {minDate}",
 	"components.input-date-time.errorOutsideRange": "Date must be between {minDate} and {maxDate}",
 	"components.input-date-time.time": "Time",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "Clear",
 	"components.input-date.errorMaxDateOnly": "Date must be before or on {maxDate}",
 	"components.input-date.errorMinDateOnly": "Date must be on or after {minDate}",

package/lang/en.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "None",
 	"components.input-date-range.endDate": "End Date",
 	"components.input-date-range.errorBadInput": "{startLabel} must be before {endLabel}",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "Start Date",
 	"components.input-date-time-range-to.to": "to",
 	"components.input-date-time-range.endDate": "End Date",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "Date must be on or after {minDate}",
 	"components.input-date-time.errorOutsideRange": "Date must be between {minDate} and {maxDate}",
 	"components.input-date-time.time": "Time",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "Clear",
 	"components.input-date.errorMaxDateOnly": "Date must be before or on {maxDate}",
 	"components.input-date.errorMinDateOnly": "Date must be on or after {minDate}",

package/lang/es-es.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "Ninguno",
 	"components.input-date-range.endDate": "Fecha final",
 	"components.input-date-range.errorBadInput": "{startLabel} debe ser anterior a {endLabel}",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "Fecha de inicio",
 	"components.input-date-time-range-to.to": "para",
 	"components.input-date-time-range.endDate": "Fecha final",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "La fecha debe ser {minDate} o posterior",
 	"components.input-date-time.errorOutsideRange": "La fecha debe estar entre el {minDate} y el {maxDate}",
 	"components.input-date-time.time": "Tiempo",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "Borrar",
 	"components.input-date.errorMaxDateOnly": "La fecha debe ser {maxDate} o anterior",
 	"components.input-date.errorMinDateOnly": "La fecha debe ser {minDate} o posterior",

package/lang/es.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "Ninguno",
 	"components.input-date-range.endDate": "Fecha final",
 	"components.input-date-range.errorBadInput": "{startLabel} debe estar antes de {endLabel}",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "Fecha de inicio",
 	"components.input-date-time-range-to.to": "hasta",
 	"components.input-date-time-range.endDate": "Fecha final",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "La fecha debe ser {minDate} o posterior",
 	"components.input-date-time.errorOutsideRange": "La fecha debe estar entre {minDate} y {maxDate}",
 	"components.input-date-time.time": "Hora",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "Borrar",
 	"components.input-date.errorMaxDateOnly": "La fecha debe ser {maxDate} o anterior",
 	"components.input-date.errorMinDateOnly": "La fecha debe ser {minDate} o posterior",

package/lang/fr-fr.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "Aucune",
 	"components.input-date-range.endDate": "Date de fin",
 	"components.input-date-range.errorBadInput": "{startLabel} doit être antérieur à {endLabel}",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "Date de début",
 	"components.input-date-time-range-to.to": "à",
 	"components.input-date-time-range.endDate": "Date de fin",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "La date doit être égale ou postérieure au {minDate}",
 	"components.input-date-time.errorOutsideRange": "La date doit être comprise entre {minDate} et {maxDate}",
 	"components.input-date-time.time": "Heure",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "Effacer",
 	"components.input-date.errorMaxDateOnly": "La date doit être antérieure ou égale au {maxDate}",
 	"components.input-date.errorMinDateOnly": "La date doit être égale ou postérieure au {minDate}",

package/lang/fr.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "Aucun",
 	"components.input-date-range.endDate": "Date de fin",
 	"components.input-date-range.errorBadInput": "{startLabel} doit précéder {endLabel}",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "Date du début",
 	"components.input-date-time-range-to.to": "à",
 	"components.input-date-time-range.endDate": "Date de fin",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "La date doit être {minDate} ou une date ultérieure",
 	"components.input-date-time.errorOutsideRange": "La date doit être comprise entre {minDate} et {maxDate}",
 	"components.input-date-time.time": "Heure",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "Effacer",
 	"components.input-date.errorMaxDateOnly": "La date doit être {maxDate} ou une date antérieure",
 	"components.input-date.errorMinDateOnly": "La date doit être {minDate} ou une date ultérieure",

package/lang/hi.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "कोई नहीं",
 	"components.input-date-range.endDate": "समाप्ति तारीख़",
 	"components.input-date-range.errorBadInput": "{startLabel} {endLabel} से पहले का होना चाहिए",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "प्रारंभ तारीख़",
 	"components.input-date-time-range-to.to": "प्रति",
 	"components.input-date-time-range.endDate": "समाप्ति तारीख़",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "तारीख, {minDate} या उससे बाद की होनी चाहिए",
 	"components.input-date-time.errorOutsideRange": "तारीख़ {minDate} और {maxDate} के बीच होनी चाहिए",
 	"components.input-date-time.time": "समय",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "साफ़ करें",
 	"components.input-date.errorMaxDateOnly": "तारीख, {maxDate} या उससे पहले की होनी चाहिए",
 	"components.input-date.errorMinDateOnly": "तारीख, {minDate} या उससे बाद की होनी चाहिए",

package/lang/ja.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "なし",
 	"components.input-date-range.endDate": "終了日",
 	"components.input-date-range.errorBadInput": "{startLabel} は {endLabel} より前にする必要があります",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "開始日",
 	"components.input-date-time-range-to.to": "～",
 	"components.input-date-time-range.endDate": "終了日",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "日付は {minDate} 以降にする必要があります",
 	"components.input-date-time.errorOutsideRange": "日付は {minDate} から {maxDate} の間にする必要があります",
 	"components.input-date-time.time": "時刻",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "クリア",
 	"components.input-date.errorMaxDateOnly": "日付は {maxDate} 以前にする必要があります",
 	"components.input-date.errorMinDateOnly": "日付は {minDate} 以降にする必要があります",

package/lang/ko.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "없음",
 	"components.input-date-range.endDate": "종료일",
 	"components.input-date-range.errorBadInput": "{startLabel}은(는) {endLabel} 앞에 있어야 합니다",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "시작일",
 	"components.input-date-time-range-to.to": "~",
 	"components.input-date-time-range.endDate": "종료일",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "날짜는 {minDate} 또는 그 이후여야 합니다",
 	"components.input-date-time.errorOutsideRange": "날짜는 {minDate}와 {maxDate} 사이여야 합니다.",
 	"components.input-date-time.time": "시간",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "지우기",
 	"components.input-date.errorMaxDateOnly": "날짜는 {maxDate} 또는 그 이전이어야 합니다",
 	"components.input-date.errorMinDateOnly": "날짜는 {minDate} 또는 그 이후여야 합니다",

package/lang/nl.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "Geen",
 	"components.input-date-range.endDate": "Einddatum",
 	"components.input-date-range.errorBadInput": "{startLabel} moet voor {endLabel} liggen",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "Startdatum",
 	"components.input-date-time-range-to.to": "tot",
 	"components.input-date-time-range.endDate": "Einddatum",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "Datum moet op of na {minDate} liggen",
 	"components.input-date-time.errorOutsideRange": "Datum moet tussen {minDate} en {maxDate} liggen",
 	"components.input-date-time.time": "Tijd",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "Wissen",
 	"components.input-date.errorMaxDateOnly": "Datum moet voor of op {maxDate} liggen",
 	"components.input-date.errorMinDateOnly": "Datum moet op of na {minDate} liggen",

package/lang/pt.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "Nenhum",
 	"components.input-date-range.endDate": "Data final",
 	"components.input-date-range.errorBadInput": "{startLabel} precisa ser anterior a {endLabel}",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "Data de início",
 	"components.input-date-time-range-to.to": "a",
 	"components.input-date-time-range.endDate": "Data final",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "A data deve ser igual ou posterior a {minDate}",
 	"components.input-date-time.errorOutsideRange": "A data precisa estar entre {minDate} e {maxDate}",
 	"components.input-date-time.time": "Hora",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "Limpar",
 	"components.input-date.errorMaxDateOnly": "A data deve ser anterior ou igual a {maxDate}",
 	"components.input-date.errorMinDateOnly": "A data deve ser igual ou posterior a {minDate}",

package/lang/sv.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "Inga",
 	"components.input-date-range.endDate": "Slutdatum",
 	"components.input-date-range.errorBadInput": "{startLabel} måste vara före {endLabel}",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "Startdatum",
 	"components.input-date-time-range-to.to": "till",
 	"components.input-date-time-range.endDate": "Slutdatum",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "Datumet måste vara {minDate} eller senare",
 	"components.input-date-time.errorOutsideRange": "Datumet ska vara mellan {minDate} och {maxDate}",
 	"components.input-date-time.time": "Tid",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "Rensa",
 	"components.input-date.errorMaxDateOnly": "Datumet måste vara {maxDate} eller tidigare",
 	"components.input-date.errorMinDateOnly": "Datumet måste vara {minDate} eller senare",

package/lang/tr.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "Yok",
 	"components.input-date-range.endDate": "Bitiş Tarihi",
 	"components.input-date-range.errorBadInput": "{startLabel}, {endLabel} tarihinden önce olmalıdır",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "Başlangıç Tarihi",
 	"components.input-date-time-range-to.to": "Kime",
 	"components.input-date-time-range.endDate": "Bitiş Tarihi",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "Tarih, {minDate} veya sonraki bir tarih olmalıdır",
 	"components.input-date-time.errorOutsideRange": "Tarih, {minDate} ile {maxDate} arasında olmalıdır",
 	"components.input-date-time.time": "Saat",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "Temizle",
 	"components.input-date.errorMaxDateOnly": "Tarih, {maxDate} veya önceki bir tarih olmalıdır",
 	"components.input-date.errorMinDateOnly": "Tarih, {minDate} veya sonraki bir tarih olmalıdır",

package/lang/zh-cn.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "无",
 	"components.input-date-range.endDate": "结束日期",
 	"components.input-date-range.errorBadInput": "{startLabel} 必须早于 {endLabel}",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "开始日期",
 	"components.input-date-time-range-to.to": "至",
 	"components.input-date-time-range.endDate": "结束日期",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "日期必须晚于或等于 {minDate}",
 	"components.input-date-time.errorOutsideRange": "日期必须介于 {minDate} 和 {maxDate} 之间",
 	"components.input-date-time.time": "时间",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "清除",
 	"components.input-date.errorMaxDateOnly": "日期必须早于或等于 {maxDate}",
 	"components.input-date.errorMinDateOnly": "日期必须晚于或等于 {minDate}",

package/lang/zh-tw.js

@@ -43,6 +43,7 @@ export default {
 	"components.input-color.none": "無",
 	"components.input-date-range.endDate": "結束日期",
 	"components.input-date-range.errorBadInput": "{startLabel} 必須早於 {endLabel}",
+	"components.input-date-range.interactive-label": "Date range input",
 	"components.input-date-range.startDate": "開始日期",
 	"components.input-date-time-range-to.to": "至",
 	"components.input-date-time-range.endDate": "結束日期",
@@ -53,6 +54,7 @@ export default {
 	"components.input-date-time.errorMinDateOnly": "日期必須晚於 {minDate} 或為當日",
 	"components.input-date-time.errorOutsideRange": "日期必須介於 {minDate} 與 {maxDate} 之間",
 	"components.input-date-time.time": "時間",
+	"components.input-date-time-range.interactive-label": "Date and time range input",
 	"components.input-date.clear": "清除",
 	"components.input-date.errorMaxDateOnly": "日期必須早於 {maxDate} 或為當日",
 	"components.input-date.errorMinDateOnly": "日期必須晚於 {minDate} 或為當日",

package/mixins/interactive/interactive-mixin.js

@@ -1,3 +1,4 @@
+import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { css, html } from 'lit';
 import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -7,11 +8,6 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../../components/offscreen/offscreen.js';
 import { RtlMixin } from '../rtl/rtl-mixin.js';
 
-const keyCodes = {
-	ENTER: 13,
-	ESCAPE: 27
-};
-
 export function isInteractiveDescendant(node) {
 	if (!node) return false;
 	return !!findComposedAncestor(node, node => {
@@ -41,6 +37,7 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 
 	constructor() {
 		super();
+		this._dismissibleId = null;
 		this._focusingToggle = false;
 		this._hasInteractiveAncestor = false;
 		this._interactive = false;
@@ -55,6 +52,14 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 		this._hasInteractiveAncestor = (parentGrid !== null);
 	}
 
+	disconnectedCallback() {
+		super.disconnectedCallback();
+
+		if (!this._dismissibleId) return;
+		clearDismissible(this._dismissibleId);
+		this._dismissibleId = null;
+	}
+
 	focus() {
 		if (!this.shadowRoot) return;
 		if (this._hasInteractiveAncestor && !this._interactive) this.shadowRoot.querySelector('.interactive-toggle').focus();
@@ -97,20 +102,29 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 
 	_handleInteractiveContentFocusIn() {
 		this._interactive = true;
+		this._dismissibleId = setDismissible(async() => {
+			await this._handleInteractiveExit();
+		});
 	}
 
 	_handleInteractiveContentFocusOut(e) {
 		if (isComposedAncestor(this.shadowRoot.querySelector('.interactive-container-content'), e.relatedTarget)) return;
 		// focus moved out of the interactive content
 		this._interactive = false;
+		if (this._dismissibleId) {
+			clearDismissible(this._dismissibleId);
+			this._dismissibleId = null;
+		}
+	}
+
+	async _handleInteractiveExit() {
+		this._interactive = false;
+		await this.updateComplete;
+		this.shadowRoot.querySelector('.interactive-toggle').focus();
 	}
 
 	async _handleInteractiveKeyDown(e) {
-		if (this._interactive && e.keyCode === keyCodes.ESCAPE) {
-			this._interactive = false;
-			await this.updateComplete;
-			this.shadowRoot.querySelector('.interactive-toggle').focus();
-		}
+		if (this._interactive && e.keyCode === 9) e.stopPropagation(); // tab
 	}
 
 	_handleInteractiveToggleBlur() {
@@ -129,9 +143,7 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 
 	async _handleInteractiveTrapEndFocus() {
 		// focus moved to trap-end either forwards from contents or backwards from outside - focus interactive toggle
-		this._interactive = false;
-		await this.updateComplete;
-		this.shadowRoot.querySelector('.interactive-toggle').focus();
+		await this._handleInteractiveExit();
 	}
 
 	async _handleInteractiveTrapStartFocus(e) {
@@ -141,9 +153,7 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 			if (nextFocusable) nextFocusable.focus();
 		} else {
 			// focus moved to trap-start backwards from within contents - toggle to non-interactive and apply focus
-			this._interactive = false;
-			await this.updateComplete;
-			this.shadowRoot.querySelector('.interactive-toggle').focus();
+			await this._handleInteractiveExit();
 		}
 	}
 

package/package.json

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