@brightspace-ui/core 3.21.1 → 3.21.3

package/components/filter/filter-dimension-set-date-time-range-value.js

@@ -70,7 +70,7 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 		this._dispatchFilterChangeEvent = false;
 		this._enforceSingleSelection = true;
 		this._filterSetValue = true;
-		this._minWidth = 375;
+		this._minWidth = 390;
 		this._noSearchSupport = true;
 
 		this._handleDateChange = this._handleDateChange.bind(this);

package/components/filter/filter.js

@@ -149,6 +149,9 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				margin-inline-start: -2rem;
 				padding-block: 0.5rem;
 			}
+			d2l-list-item.expanding-content {
+				overflow-y: hidden;
+			}
 
 			.d2l-filter-dimension-set-value-text {
 				-webkit-box-orient: vertical;
@@ -605,7 +608,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		: nothing}
 					</div>
 					${item.additionalContent ? html`
-						<d2l-expand-collapse-content ?expanded="${item.selected}">
+						<d2l-expand-collapse-content 
+							?expanded="${item.selected}" 
+							@d2l-expand-collapse-content-collapse="${this._handleExpandCollapse}"
+							@d2l-expand-collapse-content-expand="${this._handleExpandCollapse}">
 							${item.additionalContent()}
 						</d2l-expand-collapse-content>
 					` : nothing}
@@ -841,6 +847,15 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		));
 	}
 
+	async _handleExpandCollapse(e) {
+		const eventPromise = e.target.expanded ? e.detail.expandComplete : e.detail.collapseComplete;
+		const parentListItem = e.target.closest('d2l-list-item');
+		parentListItem.classList.add('expanding-content');
+
+		await eventPromise;
+		parentListItem.classList.remove('expanding-content');
+	}
+
 	_handleSearch(e) {
 		const dimension = this._getActiveDimension();
 		const searchValue = e.detail.value.trim();

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

@@ -41,65 +41,48 @@ class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)
 			:host([top-margin]) {
 				margin-top: calc(0.9rem - 7px);
 			}
+			:host(:not([display-to])) .d2l-input-date-time-range-to-to {
+				display: none;
+			}
 
+			/* flex case (not wrapped) */
 			.d2l-input-date-time-range-to-container {
+				column-gap: 1.5rem;
 				display: flex;
 				flex-wrap: wrap;
-				margin-bottom: -1.2rem;
 			}
+			:host([display-to]) div:not(.d2l-input-date-time-range-to-container-block).d2l-input-date-time-range-to-container {
+				column-gap: 0.9rem;
+			}
+			.d2l-input-date-time-range-end-container {
+				display: flex;
+			}
+			.d2l-input-date-time-range-end-container ::slotted(*) {
+				align-self: flex-end;
+			}
+
+			/* block case (wrapped) */
 			.d2l-input-date-time-range-to-container-block.d2l-input-date-time-range-to-container {
 				display: block;
+				margin-bottom: -1.2rem;
 			}
-
-			.d2l-input-date-time-range-start-container {
+			.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-start-container {
 				margin-bottom: 1.2rem;
-				margin-right: 1.5rem;
-			}
-			:host([dir="rtl"]) .d2l-input-date-time-range-start-container {
-				margin-left: 1.5rem;
-				margin-right: 0;
+				margin-inline: 0;
 			}
-			:host([display-to]) .d2l-input-date-time-range-start-container {
+			:host([display-to]) .d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-start-container {
 				margin-bottom: 0.6rem;
 			}
-			:host([display-to]) div:not(.d2l-input-date-time-range-to-container-block) > .d2l-input-date-time-range-start-container {
-				margin-right: 0.9rem;
-			}
-			:host([display-to][dir="rtl"]) div:not(.d2l-input-date-time-range-to-container-block) > .d2l-input-date-time-range-start-container {
-				margin-left: 0.9rem;
-				margin-right: 0;
-			}
-			.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-start-container,
-			:host([dir="rtl"]) .d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-start-container {
-				margin-left: 0;
-				margin-right: 0;
-			}
-
-			:host(:not([display-to])) .d2l-input-date-time-range-to-to {
-				display: none;
+			.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-end-container {
+				display: block;
+				margin-bottom: 1.2rem;
 			}
-			.d2l-input-date-time-range-to-to {
+			.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-to-to {
 				display: inline-block;
 				margin-bottom: 0.6rem;
-				margin-right: 0.9rem;
 				margin-top: auto;
 				vertical-align: top;
 			}
-			:host([dir="rtl"]) .d2l-input-date-time-range-to-to {
-				margin-left: 0.9rem;
-				margin-right: 0;
-			}
-
-			.d2l-input-date-time-range-end-container {
-				display: flex;
-				margin-bottom: 1.2rem;
-			}
-			.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-end-container {
-				display: block;
-			}
-			.d2l-input-date-time-range-end-container ::slotted(*) {
-				align-self: flex-end;
-			}
 		`];
 	}
 
@@ -131,10 +114,10 @@ class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)
 				<div class="d2l-input-date-time-range-start-container">
 					<slot name="left"></slot>
 				</div>
-				<div class="d2l-input-date-time-range-end-container">
 					<div class="d2l-body-small d2l-skeletize d2l-input-date-time-range-to-to">
 						${this.localize('components.input-date-time-range-to.to')}
 					</div>
+				<div class="d2l-input-date-time-range-end-container">
 					<slot name="right"></slot>
 				</div>
 			</div>

package/components/meter/meter-circle.js

@@ -56,7 +56,8 @@ class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
 		const dashOffset = 7 * Math.PI * 2 - 10; // approximation perimeter of circle divide by 3 subtract the rounded edges (5 pixels each)
 
 		const primary = this._primary(this.value, this.max) || '';
-		const secondary = this._secondary(this.value, this.max, this.text);
+		const primaryAria = this._primary(this.value, this.max, true) || '';
+		const secondaryAria = this._secondary(this.value, this.max, this.text, true);
 		const textClasses = {
 			'd2l-meter-circle-text-ltr': !this.percent,
 			'd2l-body-standard': true,
@@ -64,7 +65,7 @@ class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
 		};
 
 		return html`
-			<svg viewBox="0 0 48 48" shape-rendering="geometricPrecision" role="img" aria-label="${this._ariaLabel(primary, secondary)}">
+			<svg viewBox="0 0 48 48" shape-rendering="geometricPrecision" role="img" aria-label="${this._ariaLabel(primaryAria, secondaryAria)}">
 				<circle class="d2l-meter-circle-full-bar" cx="24" cy="24" r="21"></circle>
 				<circle
 					class="d2l-meter-circle-progress-bar"

package/components/meter/meter-linear.js

@@ -112,6 +112,8 @@ class MeterLinear extends MeterMixin(RtlMixin(LitElement)) {
 		}
 		const primary = this._primary(this.value, this.max);
 		const secondary = this._secondary(this.value, this.max, this.text);
+		const primaryAria = this._primary(this.value, this.max, true);
+		const secondaryAria = this._secondary(this.value, this.max, this.text, true);
 		const textClasses = {
 			'd2l-meter-linear-text-space-between': !this.textInline && secondary !== this.text,
 			'd2l-body-small': true,
@@ -126,7 +128,7 @@ class MeterLinear extends MeterMixin(RtlMixin(LitElement)) {
 		return html `
 			<div
 				role="img"
-				aria-label="${this._ariaLabel(primary, secondary)}">
+				aria-label="${this._ariaLabel(primaryAria, secondaryAria)}">
 				<div class="d2l-meter-linear-full-bar">
 					<div class="d2l-meter-linear-inner-bar" style="width:${percentage}%;"></div>
 				</div>

package/components/meter/meter-mixin.js

@@ -40,26 +40,31 @@ export const MeterMixin = superclass => class extends LocalizeCoreElement(superc
 	}
 
 	_ariaLabel(primary, secondary) {
-		const mainLabel = this.localize(`${this._namespace}.commaSeperatedAria`, 'term1', primary, 'term2', this.localize(`${this._namespace}.progressIndicator`));
-		return secondary ? this.localize(`${this._namespace}.commaSeperatedAria`, 'term1', secondary, 'term2', mainLabel) : mainLabel;
+		// todo: these should be using CLDR data/patterns instead of translated message fragments
+		// example: https://www.unicode.org/cldr/cldr-aux/charts/37/summary/en.html#4480e9e541ba33de
+		const mainLabel = this.localize(`${this._namespace}.commaSeperatedAria`, { term1: primary, term2: this.localize(`${this._namespace}.progressIndicator`) });
+		return secondary ? this.localize(`${this._namespace}.commaSeperatedAria`, { term1: secondary, term2: mainLabel }) : mainLabel;
 	}
 
-	_primary(value, max) {
+	_primary(value, max, aria = false) {
 		const percentage = max > 0 ? value / max : 0;
+		const key = aria ? 'fractionAria' : 'fraction';
 
 		return this.percent
 			? formatPercent(percentage, { maximumFractionDigits: 0 })
-			: this.localize(`${this._namespace}.fraction`, 'x', value, 'y', max);
+			: this.localize(`${this._namespace}.${key}`, { x: value, y: max });
 	}
 
-	_secondary(value, max, context) {
+	_secondary(value, max, context, aria = false) {
 		if (!context) {
 			return '';
 		}
 
+		const key = aria ? 'fractionAria' : 'fraction';
+
 		const percentage = this.max > 0 ? value / max : 0;
 		context = context.replace('{%}', formatPercent(percentage, { maximumFractionDigits: 0 }));
-		context = context.replace('{x/y}', this.localize(`${this._namespace}.fraction`, 'x', value, 'y', max));
+		context = context.replace('{x/y}', this.localize(`${this._namespace}.${key}`, { x: value, y: max }));
 		context = context.replace('{x}', value);
 		context = context.replace('{y}', max);
 

package/components/meter/meter-radial.js

@@ -61,6 +61,8 @@ class MeterRadial extends MeterMixin(RtlMixin(LitElement)) {
 		const progressFill = percent * lengthOfLine;
 		const primary = this._primary(this.value, this.max);
 		const secondary = this._secondary(this.value, this.max, this.text);
+		const primaryAria = this._primary(this.value, this.max, true) || '';
+		const secondaryAria = this._secondary(this.value, this.max, this.text, true) || '';
 		const secondaryTextElement = this.text ? html`<div class="d2l-body-small d2l-meter-radial-text">${secondary}</div>` : nothing;
 		const textClasses = {
 			'd2l-meter-radial-text-ltr': !this.percent,
@@ -72,7 +74,7 @@ class MeterRadial extends MeterMixin(RtlMixin(LitElement)) {
 			<div
 				class="d2l-meter-radial"
 				role="img"
-				aria-label="${this._ariaLabel(primary, secondary)}">
+				aria-label="${this._ariaLabel(primaryAria, secondaryAria)}">
 				<svg viewBox="0 0 84 46">
 					<path class="d2l-meter-radial-full-bar" d="M5 40a37 35 0 0 1 74 0" />
 					<path

package/components/popover/demo/popover.html

@@ -25,9 +25,9 @@
 					<d2l-button-subtle id="close1" text="Close"></d2l-button-subtle>
 				</d2l-test-popover>
 				<script>
-					const popover = document.querySelector('#popover1');
-					document.querySelector('#open1').addEventListener('click', () => popover.opened = true);
-					document.querySelector('#close1').addEventListener('click', () => popover.opened = false);
+					const popover1 = document.querySelector('#popover1');
+					document.querySelector('#open1').addEventListener('click', () => popover1.opened = !popover1.opened);
+					document.querySelector('#close1').addEventListener('click', () => popover1.opened = false);
 				</script>
 			</template>
 		</d2l-demo-snippet>

package/components/popover/popover-mixin.js

@@ -1,5 +1,7 @@
 import '../colors/colors.js';
 import { css, html } from 'lit';
+import { getComposedActiveElement, getPreviousFocusableAncestor } from '../../helpers/focus.js';
+import { isComposedAncestor } from '../../helpers/dom.js';
 
 const isSupported = ('popover' in HTMLElement.prototype);
 
@@ -15,7 +17,12 @@ export const PopoverMixin = superclass => class extends superclass {
 			 * @type {boolean}
 			 */
 			opened: { type: Boolean, reflect: true },
-			_useNativePopover: { type: Boolean, reflect: true, attribute: 'popover' }
+			/**
+			 * Whether to disable auto-close/light-dismiss
+			 * @type {boolean}
+			 */
+			noAutoClose: { type: Boolean, reflect: true, attribute: 'no-auto-close' },
+			_useNativePopover: { type: String, reflect: true, attribute: 'popover' }
 		};
 	}
 
@@ -62,34 +69,101 @@ export const PopoverMixin = superclass => class extends superclass {
 
 	constructor() {
 		super();
+		this.noAutoClose = false;
 		this.opened = false;
-		this._useNativePopover = isSupported;
+		this._useNativePopover = isSupported ? 'manual' : undefined;
+		this._handleAutoCloseClick = this._handleAutoCloseClick.bind(this);
+		this._handleAutoCloseFocus = this._handleAutoCloseFocus.bind(this);
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
+		if (this.opened) this._addAutoCloseHandlers();
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this._removeAutoCloseHandlers();
 	}
 
 	updated(changedProperties) {
 		super.updated(changedProperties);
 		if (changedProperties.has('opened')) {
 
+			if (this._useNativePopover) {
+				if (this.opened) this.showPopover();
+				else this.hidePopover();
+			}
+
+			this._previousFocusableAncestor = this.opened ? getPreviousFocusableAncestor(this, false, false) : null;
+
 			if (this.opened) {
+				this._opener = getComposedActiveElement();
+				this._addAutoCloseHandlers();
 				this.dispatchEvent(new CustomEvent('d2l-popover-open', { bubbles: true, composed: true }));
 			} else if (changedProperties.get('opened') !== undefined) {
+				this._removeAutoCloseHandlers();
 				this.dispatchEvent(new CustomEvent('d2l-popover-close', { bubbles: true, composed: true }));
 			}
 
-			if (this._useNativePopover) {
-				if (this.opened) this.showPopover();
-				else this.hidePopover();
-			}
+		}
+	}
+
+	_addAutoCloseHandlers() {
+		this.addEventListener('blur', this._handleAutoCloseFocus, { capture: true });
+		document.body.addEventListener('focus', this._handleAutoCloseFocus, { capture: true });
+		document.addEventListener('click', this._handleAutoCloseClick, { capture: true });
+	}
 
+	_close() {
+		const hide = () => {
+			this.opened = false;
+		};
+
+		hide();
+	}
+
+	_handleAutoCloseClick(e) {
+
+		if (!this.opened || this.noAutoClose) return;
+
+		const rootTarget = e.composedPath()[0];
+		if (isComposedAncestor(this.shadowRoot.querySelector('.content'), rootTarget)
+			|| (this._opener !== document.body && isComposedAncestor(this._opener, rootTarget))) {
+			return;
 		}
+
+		this._close();
+	}
+
+	_handleAutoCloseFocus() {
+
+		// todo: try to use relatedTarget instead - this logic is largely copied as-is from dropdown simply to mitigate risk of this fragile code
+		setTimeout(() => {
+			// we ignore focusable ancestors othrwise the popover will close when user clicks empty space inside the popover
+			if (!this.opened
+				|| this.noAutoClose
+				|| !document.activeElement
+				|| document.activeElement === this._previousFocusableAncestor
+				|| document.activeElement === document.body) {
+				return;
+			}
+
+			const activeElement = getComposedActiveElement();
+			if (isComposedAncestor(this.shadowRoot.querySelector('.content'), activeElement)
+				|| activeElement === this._opener) {
+				return;
+			}
+
+			this._close();
+		}, 0);
+
+	}
+
+	_removeAutoCloseHandlers() {
+		this.removeEventListener('blur', this._handleAutoCloseFocus, { capture: true });
+		document.body?.removeEventListener('focus', this._handleAutoCloseFocus, { capture: true }); // DE41322: document.body can be null in some scenarios
+		document.removeEventListener('click', this._handleAutoCloseClick, { capture: true });
 	}
 
 	_renderPopover() {

package/custom-elements.json

@@ -10717,6 +10717,12 @@
       "name": "d2l-test-popover",
       "path": "./components/popover/test/popover.js",
       "attributes": [
+        {
+          "name": "no-auto-close",
+          "description": "Whether to disable auto-close/light-dismiss",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether the popover is open or not",
@@ -10725,6 +10731,13 @@
         }
       ],
       "properties": [
+        {
+          "name": "noAutoClose",
+          "attribute": "no-auto-close",
+          "description": "Whether to disable auto-close/light-dismiss",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",

package/lang/ar.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "العودة إلى القائمة السابقة. يتم عرض {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}، ‏{term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "مؤشر التقدم",
 	"components.more-less.less": "أقل",
 	"components.more-less.more": "المزيد",

package/lang/cy.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Dychwelyd i'r ddewislen flaenorol. Rydych chi'n edrych ar {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Dangosydd Cynnydd",
 	"components.more-less.less": "llai",
 	"components.more-less.more": "mwy",

package/lang/da.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Gå tilbage til forrige menu. Du ser på {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Statusindikator",
 	"components.more-less.less": "færre",
 	"components.more-less.more": "flere",

package/lang/de.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Zum vorherigen Menü zurückkehren. Sie betrachten gerade {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Fortschrittsanzeige",
 	"components.more-less.less": "Weniger",
 	"components.more-less.more": "mehr",

package/lang/en-gb.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Return to previous menu. You are viewing {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Progress Indicator",
 	"components.more-less.less": "less",
 	"components.more-less.more": "more",

package/lang/en.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Return to previous menu. You are viewing {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Progress Indicator",
 	"components.more-less.less": "less",
 	"components.more-less.more": "more",

package/lang/es-es.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Vuelva al menú anterior. Está en {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Indicador de progreso",
 	"components.more-less.less": "menos",
 	"components.more-less.more": "más",

package/lang/es.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Regresar al menú anterior. Está viendo {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Indicador de progreso",
 	"components.more-less.less": "menos",
 	"components.more-less.more": "más",

package/lang/fr-fr.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Revenir au menu précédent. Vous consultez {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Indicateur de progrès",
 	"components.more-less.less": "moins",
 	"components.more-less.more": "plus",

package/lang/fr.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Retour au menu précédent. Vous voyez actuellement {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Indicateur de progrès",
 	"components.more-less.less": "moins",
 	"components.more-less.more": "plus",

package/lang/hi.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "पिछले मेनू पर वापस जाएँ। आप {menuTitle} देख रहे हैं।",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "प्रगति संकेतक",
 	"components.more-less.less": "कम",
 	"components.more-less.more": "अधिक",

package/lang/ja.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "前のメニューに戻ります。{menuTitle} を表示しています。",
 	"components.meter-mixin.commaSeperatedAria": "{term1}、{term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "進捗状況インジケータ",
 	"components.more-less.less": "減らす",
 	"components.more-less.more": "増やす",

package/lang/ko.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "이전 메뉴로 돌아갑니다. {menuTitle}을(를) 보고 있습니다.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "진도 표시기",
 	"components.more-less.less": "축소",
 	"components.more-less.more": "더 보기",

package/lang/nl.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Keer terug naar het vorige menu. U bekijkt {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Voortgangsindicator",
 	"components.more-less.less": "minder",
 	"components.more-less.more": "meer",

package/lang/pt.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Voltar ao menu anterior. Você está visualizando {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Indicador de progresso",
 	"components.more-less.less": "menos",
 	"components.more-less.more": "mais",

package/lang/sv.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Återgå till föregående meny. Du visar {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Förloppsindikator",
 	"components.more-less.less": "mindre",
 	"components.more-less.more": "mer",

package/lang/tr.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Önceki menüye dönün. {menuTitle} başlığını görüntülüyorsunuz.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Gelişim Göstergesi",
 	"components.more-less.less": "daha az",
 	"components.more-less.more": "daha fazla",

package/lang/zh-cn.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "返回至上级菜单。您正在浏览 {menuTitle}。",
 	"components.meter-mixin.commaSeperatedAria": "{term1}、{term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "进度指示符",
 	"components.more-less.less": "更少",
 	"components.more-less.more": "更多",

package/lang/zh-tw.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "返回上一個功能表。您正在檢視 {menuTitle}。",
 	"components.meter-mixin.commaSeperatedAria": "{term1}，{term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "進度指示器",
 	"components.more-less.less": "較少",
 	"components.more-less.more": "較多",

package/package.json

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