@brightspace-ui/core 3.149.1 → 3.150.1

package/README.md

@@ -50,6 +50,7 @@ npm install @brightspace-ui/core
   * [Selection](components/selection/): components for selection and bulk actions
   * [Scroll Wrapper](components/scroll-wrapper/): arrows to scroll content horizontally
   * [Skeleton](components/skeleton/): apply low-fidelity skeletons to your application as it loads
+  * [Sort](components/sorting/): menu for adjusting the sort order of data in a list
   * [Status Indicator](components/status-indicator/): status-indicator components
   * [Switch](components/switch/): switch component with on/off semantics
   * [Table](components/table/): table styles, column sorting and overflow handling

package/components/menu/menu-item-radio.js

@@ -7,7 +7,7 @@ import { menuItemSelectableStyles } from './menu-item-selectable-styles.js';
  * A menu item component used for radio selection. Only one radio item in a given d2l-menu may be selected at once (i.e., selecting one option will deselect the other selected "d2l-menu-item-radio" item).
  * @slot supporting - Allows supporting information to be displayed on the right-most side of the menu item
  */
-class MenuItemRadio extends MenuItemRadioMixin(LitElement) {
+export class MenuItemRadio extends MenuItemRadioMixin(LitElement) {
 
 	static get styles() {
 		return menuItemSelectableStyles;

package/components/menu/menu-item-selectable-styles.js

@@ -1,4 +1,3 @@
-import '../colors/colors.js';
 import { css } from 'lit';
 import { menuItemStyles } from './menu-item-styles.js';
 

package/components/sorting/README.md

@@ -0,0 +1,89 @@
+# Sorting
+
+The sort menu allows the user to adjust the sort order of data in a list.
+
+<!-- docs: demo align:flex-start autoOpen:true autoSize:false size:medium -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/sorting/sort.js';
+  import '@brightspace-ui/core/components/sorting/sort-item.js';
+</script>
+<d2l-sort>
+	<d2l-sort-item text="Most Relevant" selected></d2l-sort-item>
+	<d2l-sort-item text="Recently Updated"></d2l-sort-item>
+	<d2l-sort-item text="Highest Rated"></d2l-sort-item>
+</d2l-sort>
+```
+
+## Best Practices
+
+<!-- docs: start best practices -->
+<!-- docs: start dos -->
+* Make the Sort the right-most component in a group of Search, Filters & Sort controls
+* Carefully consider the user’s workflow before adding a reversible order to the sort. Most sort options do not need to be reversible.
+* Write Sort option labels in Title Case
+* Make Sort labels specific rather than general — “Sort: Course Title” is better than “Sort: Alphabetical”.
+<!-- docs: end dos -->
+
+<!-- docs: start donts -->
+* Don’t include an excessive number of sorting options — every additional option increases the cognitive load on the user when making a decision
+* Don’t make phrasings too similar — the first word of the option should be unique (“Last Accessed”, “Enrolment Date”, “Date Pinned”)
+* Don’t use when sorting table data. If the data is presented with table column headers, use [Sortable Column Buttons](../table#d2l-table-col-sort-button) to apply sorting.
+<!-- docs: end donts -->
+<!-- docs: end best practices -->
+
+## Sort [d2l-sort]
+
+The `<d2l-sort>` element is a required wrapper around multiple `<d2l-sort-item>` elements.
+
+<!-- docs: demo code properties name:d2l-sort sandboxTitle:'Sort' align:flex-start autoSize:false size:medium -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/sorting/sort.js';
+  import '@brightspace-ui/core/components/sorting/sort-item.js';
+</script>
+<d2l-sort>
+	<d2l-sort-item text="Most Relevant" value="relevant" selected></d2l-sort-item>
+	<d2l-sort-item text="Recently Updated" value="updated"></d2l-sort-item>
+	<d2l-sort-item text="Highest Rated" value="rating"></d2l-sort-item>
+</d2l-sort>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `disabled` | Boolean | Disables the sort |
+
+### Events
+
+- `d2l-sort-change`: dispatched when the selected sort item changes
+<!-- docs: end hidden content -->
+
+## Sort Item [d2l-sort-item]
+
+The `<d2l-sort-item>` element represents an option within its parent `<d2l-sort>`.
+
+<!-- docs: demo code properties name:d2l-sort-item sandboxTitle:'Sort Item' align:flex-start autoSize:false size:medium -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/sorting/sort.js';
+  import '@brightspace-ui/core/components/sorting/sort-item.js';
+</script>
+<d2l-sort opened>
+	<d2l-sort-item text="Most Relevant" value="relevant" selected></d2l-sort-item>
+	<d2l-sort-item text="Recently Updated" value="updated"></d2l-sort-item>
+	<d2l-sort-item text="Highest Rated" value="rating"></d2l-sort-item>
+</d2l-sort>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `text` | String, required | Option text |
+| `value` | String, required | Value of the option |
+| `selected` | Boolean | Whether this is the selected sort option |
+<!-- docs: end hidden content -->

package/components/sorting/demo/sort.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+			import '../sort.js';
+			import '../sort-item.js';
+		</script>
+	</head>
+	<body unresolved>
+		<d2l-demo-page page-title="Sorting">
+			<h2>Default</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-sort>
+						<d2l-sort-item text="Most Relevant" value="relevant"></d2l-sort-item>
+						<d2l-sort-item text="Recently Updated" value="updated"></d2l-sort-item>
+						<d2l-sort-item text="Highest Rated" value="rating"></d2l-sort-item>
+					</d2l-sort>
+				</template>
+			</d2l-demo-snippet>
+			<h2>Disabled</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-sort disabled>
+						<d2l-sort-item text="Most Relevant" value="relevant"></d2l-sort-item>
+						<d2l-sort-item text="Recently Updated" value="updated"></d2l-sort-item>
+						<d2l-sort-item text="Highest Rated" value="rating"></d2l-sort-item>
+					</d2l-sort>
+				</template>
+			</d2l-demo-snippet>
+		</d2l-demo-page>
+	</body>
+</html>

package/components/sorting/sort-item.js

@@ -0,0 +1,22 @@
+import { MenuItemRadio } from '../menu/menu-item-radio.js';
+
+/**
+ * An item within a <d2l-sort> component.
+ */
+class SortItem extends MenuItemRadio {
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		// handles case where the text loads after initial render
+		if (changedProperties.has('text') && this.selected) {
+			/** @ignore */
+			this.dispatchEvent(new CustomEvent('d2l-sort-item-selected-text-change', {
+				bubbles: true,
+				composed: false
+			}));
+		}
+	}
+
+}
+
+customElements.define('d2l-sort-item', SortItem);

package/components/sorting/sort.js

@@ -0,0 +1,110 @@
+import '../dropdown/dropdown-button-subtle.js';
+import '../dropdown/dropdown-menu.js';
+import '../menu/menu.js';
+import { css, html, LitElement } from 'lit';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+
+/**
+ * Allows the user to adjust the sort order of data in a list.
+ * @slot - Sort item components
+ * @fires d2l-sort-change - Dispatched when the selected sort item changes
+ */
+class Sort extends FocusMixin(LocalizeCoreElement(LitElement)) {
+
+	static properties = {
+		/**
+		 * Disables the sort
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/** @ignore */
+		opened: { type: Boolean, reflect: true },
+		_selectedItemText: { state: true },
+		_selectedItemValue: { state: true },
+	};
+
+	static get styles() {
+		return css`
+			:host {
+				display: inline-block;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			::slotted(:not(d2l-sort-item)) {
+				display: none;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this.disabled = false;
+		this.opened = false;
+		this._selectedItemText = '';
+		this._selectedItemValue = '';
+	}
+
+	static get focusElementSelector() {
+		return 'd2l-dropdown-button-subtle';
+	}
+
+	render() {
+		return html`
+			<d2l-dropdown-button-subtle
+				?disabled="${this.disabled}"
+				text="${this.localize('components.sort.text', { selectedItemText: this._selectedItemText })}">
+				<d2l-dropdown-menu class="vdiff-target" ?opened="${this.opened}">
+					<d2l-menu
+						label="${this.localize('components.sort.label')}"
+						@d2l-menu-item-change="${this.#handleMenuItemChange}">
+						<slot
+							@d2l-sort-item-selected-text-change="${this.#recalculateState}"
+							@slotchange="${this.#handleSlotChange}"></slot>
+					</d2l-menu>
+				</d2l-dropdown-menu>
+			</d2l-dropdown-button-subtle>
+		`;
+	}
+
+	#getItems() {
+		const elems = this.shadowRoot?.querySelector('slot')?.assignedElements();
+		if (!elems) return [];
+		return elems.filter(el => el.tagName === 'D2L-SORT-ITEM');
+	}
+
+	#handleMenuItemChange(e) {
+		if (this._selectedItemValue === e.target.value) return;
+
+		this._selectedItemText = e.target.text;
+		this._selectedItemValue = e.target;
+		this.dispatchEvent(new CustomEvent(
+			'd2l-sort-change', {
+				detail: { value: e.detail.value }
+			}
+		));
+	}
+
+	#handleSlotChange() {
+		this.#recalculateState();
+	}
+
+	#recalculateState() {
+		const items = this.#getItems();
+		if (items.length === 0) return;
+
+		const selectedItems = items.filter(i => i.selected);
+		if (selectedItems.length === 0) {
+			items[0].selected = true;
+			selectedItems.push(items[0]);
+		}
+
+		const selectedItem = selectedItems[selectedItems.length - 1];
+		this._selectedItemText = selectedItem.text;
+		this._selectedItemValue = selectedItem.value;
+	}
+
+}
+
+customElements.define('d2l-sort', Sort);

package/components/tag-list/tag-list.js

@@ -194,7 +194,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 				aria-label="${this.description}"
 				class="${classMap(containerClasses)}"
 				role="group"
-				aria-roledescription="${this.localize('components.tag-list.role-description')}"
+				aria-roledescription="${this.localize('components.tag-list.role-description', { count: this._items ? this._items.length : 0 })}"
 				@d2l-tag-list-item-clear="${this._handleItemDeleted}">
 				<slot @slotchange="${this._handleSlotChange}" @focusout="${this._handleSlotFocusOut}" @focusin="${this._handleSlotFocusIn}"></slot>
 				${overflowButton}

package/custom-elements.json

@@ -12965,6 +12965,141 @@
         }
       ]
     },
+    {
+      "name": "d2l-sort-item",
+      "path": "./components/sorting/sort-item.js",
+      "description": "An item within a <d2l-sort> component.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "REQUIRED: The selectable item's value",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "description": "This will set the item to be selected by default",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "description": "REQUIRED: Text displayed by the menu item",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the menu item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "lines",
+          "description": "The number of lines to display before truncating text with an ellipsis. Defaults to 2.",
+          "type": "number",
+          "default": "2"
+        }
+      ],
+      "properties": [
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "REQUIRED: The selectable item's value",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "This will set the item to be selected by default",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Text displayed by the menu item",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the menu item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "lines",
+          "attribute": "lines",
+          "description": "The number of lines to display before truncating text with an ellipsis. Defaults to 2.",
+          "type": "number",
+          "default": "2"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-menu-item-change",
+          "description": "Dispatched when the selected menu item changes"
+        },
+        {
+          "name": "d2l-menu-item-select",
+          "description": "Dispatched when the menu item is selected"
+        },
+        {
+          "name": "d2l-menu-item-visibility-change",
+          "description": "Dispatched when the visibility of the menu item changes"
+        }
+      ],
+      "slots": [
+        {
+          "name": "supporting",
+          "description": "Allows supporting information to be displayed on the right-most side of the menu item"
+        }
+      ]
+    },
+    {
+      "name": "d2l-sort",
+      "path": "./components/sorting/sort.js",
+      "description": "Allows the user to adjust the sort order of data in a list.",
+      "properties": [
+        {
+          "name": "properties",
+          "type": "{ disabled: boolean; opened: { type: BooleanConstructor; reflect: boolean; }; _selectedItemText: { state: boolean; }; _selectedItemValue: { state: boolean; }; }",
+          "default": "{\"disabled\":{\"type\":\"Boolean\",\"reflect\":true},\"opened\":{\"type\":\"Boolean\",\"reflect\":true},\"_selectedItemText\":{\"state\":true},\"_selectedItemValue\":{\"state\":true}}"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "opened",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-sort-change",
+          "description": "Dispatched when the selected sort item changes"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Sort item components"
+        }
+      ]
+    },
     {
       "name": "d2l-status-indicator",
       "path": "./components/status-indicator/status-indicator.js",

package/lang/ar.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "تم تحديد {count}",
 	"components.selection.selected-plus": "تم تحديد {count}+‎",
 	"components.selection-controls.label": "إجراءات التحديد",
+	"components.sort.label": "فرز",
+	"components.sort.text": "فرز: {selectedItemText}",
 	"components.switch.conditions": "يجب استيفاء الشروط",
 	"components.switch.hidden": "مخفي",
 	"components.switch.visible": "مرئي",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "تمت إزالة عنصر قائمة العلامات {value}",
 	"components.tag-list.interactive-label": "قائمة العلامات، {count} من العناصر",
 	"components.tag-list.num-hidden": "زيادة {count} إضافي",
-	"components.tag-list.role-description": "قائمة العلامات",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "إظهار أقل",
 	"components.tag-list.show-more-description": "حدد لإظهار عناصر قائمة العلامات المخفية",
 	"components.tag-list-item.role-description": "العلامة",

package/lang/cy.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} wedi’u dewis.",
 	"components.selection.selected-plus": "{count}+ wedi’u dewis",
 	"components.selection-controls.label": "Camau gweithredu ar gyfer detholiad",
+	"components.sort.label": "Trefnu",
+	"components.sort.text": "Trefnu: {selectedItemText}",
 	"components.switch.conditions": "Rhaid bodloni’r amodau",
 	"components.switch.hidden": "Cudd",
 	"components.switch.visible": "Gweladwy",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Wedi tynnu’r eitem rhestr tag {value}",
 	"components.tag-list.interactive-label": "Rhestr Tag, {count} o eitemau",
 	"components.tag-list.num-hidden": "+ {count} yn rhagor",
-	"components.tag-list.role-description": "Rhestr o Dagiau",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Dangos Llai",
 	"components.tag-list.show-more-description": "Dewis i ddangos eitemau rhestr tag cudd",
 	"components.tag-list-item.role-description": "Tag",

package/lang/da.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} valgt",
 	"components.selection.selected-plus": "{count}+ valgt",
 	"components.selection-controls.label": "Handlinger for valg",
+	"components.sort.label": "Sortér",
+	"components.sort.text": "Sortér: {selectedItemText}",
 	"components.switch.conditions": "Betingelserne skal være opfyldt",
 	"components.switch.hidden": "Skjult",
 	"components.switch.visible": "Synlig",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Fjernede taglisteelement {value}",
 	"components.tag-list.interactive-label": "Tagliste, {count} elementer",
 	"components.tag-list.num-hidden": "+ {count} mere",
-	"components.tag-list.role-description": "Tagliste",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Vis færre",
 	"components.tag-list.show-more-description": "Vælg for at få vist skjulte taglisteelementer",
 	"components.tag-list-item.role-description": "Tag",

package/lang/de.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} ausgewählt",
 	"components.selection.selected-plus": "{count}+ ausgewählt",
 	"components.selection-controls.label": "Aktionen für Auswahl",
+	"components.sort.label": "Sortieren",
+	"components.sort.text": "Sortieren: {selectedItemText}",
 	"components.switch.conditions": "Bedingungen müssen erfüllt sein",
 	"components.switch.hidden": "Ausgeblendet",
 	"components.switch.visible": "Sichtbar",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Element {value} der Tag-Liste wurde entfernt",
 	"components.tag-list.interactive-label": "Tag-Liste, {count} Elemente",
 	"components.tag-list.num-hidden": "+ {count} weitere",
-	"components.tag-list.role-description": "Tag-Liste",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Weniger anzeigen",
 	"components.tag-list.show-more-description": "Wählen Sie diese Option, um ausgeblendete Elemente der Tag-Liste anzuzeigen",
 	"components.tag-list-item.role-description": "Tag",

package/lang/en-gb.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} selected",
 	"components.selection.selected-plus": "{count}+ selected",
 	"components.selection-controls.label": "Actions for selection",
+	"components.sort.label": "Sort",
+	"components.sort.text": "Sort: {selectedItemText}",
 	"components.switch.conditions": "Conditions must be met",
 	"components.switch.hidden": "Hidden",
 	"components.switch.visible": "Visible",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"components.tag-list-item.role-description": "Tag",

package/lang/en.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} selected",
 	"components.selection.selected-plus": "{count}+ selected",
 	"components.selection-controls.label": "Actions for selection",
+	"components.sort.label": "Sort",
+	"components.sort.text": "Sort: {selectedItemText}",
 	"components.switch.conditions": "Conditions must be met",
 	"components.switch.hidden": "Hidden",
 	"components.switch.visible": "Visible",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"components.tag-list-item.role-description": "Tag",

package/lang/es-es.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} seleccionados",
 	"components.selection.selected-plus": "{count}+ seleccionados",
 	"components.selection-controls.label": "Acciones para la selección",
+	"components.sort.label": "Ordenar",
+	"components.sort.text": "Ordenar: {selectedItemText}",
 	"components.switch.conditions": "Deben cumplirse las condiciones",
 	"components.switch.hidden": "Oculto",
 	"components.switch.visible": "Visible",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Se ha eliminado el elemento {value} de la lista de etiquetas",
 	"components.tag-list.interactive-label": "Lista de etiquetas, {count} elementos",
 	"components.tag-list.num-hidden": "+ {count} más",
-	"components.tag-list.role-description": "Lista de etiquetas",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Seleccione esta opción para mostrar los elementos ocultos de la lista de etiquetas",
 	"components.tag-list-item.role-description": "Etiqueta",

package/lang/es.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} seleccionados",
 	"components.selection.selected-plus": "Más de {count} seleccionados",
 	"components.selection-controls.label": "Acciones para la selección",
+	"components.sort.label": "Ordenar",
+	"components.sort.text": "Ordenar: {selectedItemText}",
 	"components.switch.conditions": "Se deben cumplir las condiciones",
 	"components.switch.hidden": "Oculto",
 	"components.switch.visible": "Visible",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Se eliminó el elemento {value} de la lista de etiquetas",
 	"components.tag-list.interactive-label": "Lista de etiquetas, {count} elementos",
 	"components.tag-list.num-hidden": "+ {count} más",
-	"components.tag-list.role-description": "Lista de etiquetas",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Seleccione para mostrar los elementos ocultos de la lista de etiquetas",
 	"components.tag-list-item.role-description": "Etiqueta",

package/lang/fr-fr.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} sélectionnés",
 	"components.selection.selected-plus": "{count}+ sélectionné(e)(s)",
 	"components.selection-controls.label": "Actions pour la sélection",
+	"components.sort.label": "Trier",
+	"components.sort.text": "Trier : {selectedItemText}",
 	"components.switch.conditions": "Les conditions doivent être remplies",
 	"components.switch.hidden": "Masqué",
 	"components.switch.visible": "Visible",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Suppression de l’élément de liste d’étiquettes {value}",
 	"components.tag-list.interactive-label": "Liste d’étiquettes, {count} éléments",
 	"components.tag-list.num-hidden": "{count} de plus",
-	"components.tag-list.role-description": "Liste d’étiquettes",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Afficher moins",
 	"components.tag-list.show-more-description": "Sélectionnez cette option pour afficher les éléments de la liste d’étiquettes masquées",
 	"components.tag-list-item.role-description": "Étiquette",

package/lang/fr.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} sélectionné(s)",
 	"components.selection.selected-plus": "{count}+ sélectionné",
 	"components.selection-controls.label": "Actions à sélectionner",
+	"components.sort.label": "Trier",
+	"components.sort.text": "Trier : {selectedItemText}",
 	"components.switch.conditions": "Les conditions doivent être remplies",
 	"components.switch.hidden": "Masqué",
 	"components.switch.visible": "Visible",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Élément {value} de la liste des balises supprimé",
 	"components.tag-list.interactive-label": "Liste des balises, {count} éléments",
 	"components.tag-list.num-hidden": "+ {count} de plus",
-	"components.tag-list.role-description": "Liste des balises",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Afficher moins",
 	"components.tag-list.show-more-description": "Sélectionnez cette option pour afficher les éléments de la liste des balises cachées",
 	"components.tag-list-item.role-description": "Marquer",

package/lang/haw.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} koho",
 	"components.selection.selected-plus": "{count}+ i koho ʻia",
 	"components.selection-controls.label": "Nā hana no ke koho",
+	"components.sort.label": "Hoʻokaʻawale",
+	"components.sort.text": "Hoʻokaʻawale: {selectedItemText}",
 	"components.switch.conditions": "Pono e hoʻokō i nā kūlana",
 	"components.switch.hidden": "Huna",
 	"components.switch.visible": "ʻIke ʻia",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Wehe ʻia ka helu helu helu {value}",
 	"components.tag-list.interactive-label": "Papa inoa inoa, {count} mau mea",
 	"components.tag-list.num-hidden": "+ {count} hou aku",
-	"components.tag-list.role-description": "Papa inoa inoa",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Hōʻike liʻiliʻi",
 	"components.tag-list.show-more-description": "E koho e hōʻike i nā mea papa inoa inoa huna",
 	"components.tag-list-item.role-description": "Tag",

package/lang/hi.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} चयनित",
 	"components.selection.selected-plus": "{count} से अधिक चयनित",
 	"components.selection-controls.label": "चयन के लिए क्रियाएँ",
+	"components.sort.label": "सॉर्ट करें",
+	"components.sort.text": "सॉर्ट करें: {selectedItemText}",
 	"components.switch.conditions": "शर्तें पूरी होनी चाहिए",
 	"components.switch.hidden": "छुपा हुआ",
 	"components.switch.visible": "दृश्यमान",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "टैग लिस्ट आइटम {value} हटाए गए",
 	"components.tag-list.interactive-label": "टैग लिस्ट, {count} आइटम",
 	"components.tag-list.num-hidden": "+ {count} और",
-	"components.tag-list.role-description": "टैग सूची",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "कम दिखाएँ",
 	"components.tag-list.show-more-description": "छिपे हुए टैग लिस्ट आइटम दिखाने के लिए चुनें",
 	"components.tag-list-item.role-description": "टैग",

package/lang/ja.js

@@ -164,6 +164,8 @@ export default {
 	"components.selection.selected": "{count} 個を選択済み",
 	"components.selection.selected-plus": "{count} 個以上を選択済み",
 	"components.selection-controls.label": "選択のアクション",
+	"components.sort.label": "並べ替え",
+	"components.sort.text": "並べ替え: {selectedItemText}",
 	"components.switch.conditions": "条件が一致する必要があります",
 	"components.switch.hidden": "非表示",
 	"components.switch.visible": "表示",
@@ -199,7 +201,11 @@ export default {
 	"components.tag-list.cleared-item": "タグリスト項目 {value} を削除しました",
 	"components.tag-list.interactive-label": "タグリスト、{count} 項目",
 	"components.tag-list.num-hidden": "+ {count} 件追加",
-	"components.tag-list.role-description": "タグリスト",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "少なく表示",
 	"components.tag-list.show-more-description": "選択すると、非表示のタグリスト項目が表示されます",
 	"components.tag-list-item.role-description": "タグ",

package/lang/ko.js

@@ -164,6 +164,8 @@ export default {
 	"components.selection.selected": "{count}개 선택됨",
 	"components.selection.selected-plus": "{count}+개 선택됨",
 	"components.selection-controls.label": "선택 작업",
+	"components.sort.label": "정렬",
+	"components.sort.text": "정렬: {selectedItemText}",
 	"components.switch.conditions": "조건을 충족해야 합니다",
 	"components.switch.hidden": "숨김",
 	"components.switch.visible": "표시",
@@ -199,7 +201,11 @@ export default {
 	"components.tag-list.cleared-item": "태그 목록 항목 {value}을(를) 제거했습니다",
 	"components.tag-list.interactive-label": "태그 목록, {count}개 항목",
 	"components.tag-list.num-hidden": "{count}개 더",
-	"components.tag-list.role-description": "태그 목록",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "간단히 표시",
 	"components.tag-list.show-more-description": "숨겨진 태그 목록 항목을 표시하려면 선택합니다",
 	"components.tag-list-item.role-description": "태그",

package/lang/mi.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} kua tīpakohia",
 	"components.selection.selected-plus": "{count}+ kua tīpakohia",
 	"components.selection-controls.label": "Ngā mahinga mō te tīpakonga",
+	"components.sort.label": "Kōmaka",
+	"components.sort.text": "Kōmaka: {selectedItemText}",
 	"components.switch.conditions": "Me tutuki ngā here",
 	"components.switch.hidden": "Hunaia",
 	"components.switch.visible": "Ka taea te kite",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Kua tangohia te tūemi rārangi tūtohu {value}",
 	"components.tag-list.interactive-label": "Rārangi Tūtohu, {count} tūemi",
 	"components.tag-list.num-hidden": "+ {count} anō",
-	"components.tag-list.role-description": "Rārangi Tūtohu",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Whakaaturia mai kia iti iho",
 	"components.tag-list.show-more-description": "Tīpakohia hei whakaatu i ngā tūemi rārangi tūtohu hunahuna",
 	"components.tag-list-item.role-description": "Tūtohu",

package/lang/nl.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} geselecteerd",
 	"components.selection.selected-plus": "Meer dan {count} geselecteerd",
 	"components.selection-controls.label": "Acties voor selectie",
+	"components.sort.label": "Sorteren",
+	"components.sort.text": "Sorteren: {selectedItemText}",
 	"components.switch.conditions": "Er moet aan de voorwaarden worden voldaan",
 	"components.switch.hidden": "Verborgen",
 	"components.switch.visible": "Zichtbaar",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Item {value} op de labellijst is verwijderd",
 	"components.tag-list.interactive-label": "Labellijst, {count} items",
 	"components.tag-list.num-hidden": "+ {count} extra",
-	"components.tag-list.role-description": "Labellijst",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Minder weergeven",
 	"components.tag-list.show-more-description": "Selecteer deze optie om verborgen items op labellijsten weer te geven",
 	"components.tag-list-item.role-description": "Label",

package/lang/pt.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} selecionados",
 	"components.selection.selected-plus": "Mais de {count} selecionados",
 	"components.selection-controls.label": "Ações para seleção",
+	"components.sort.label": "Classificar",
+	"components.sort.text": "Classificação: {selectedItemText}",
 	"components.switch.conditions": "As condições devem ser atendidas",
 	"components.switch.hidden": "Oculto",
 	"components.switch.visible": "Visível",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Item {value} da lista de etiquetas removido",
 	"components.tag-list.interactive-label": "Lista de marcas, {count} itens",
 	"components.tag-list.num-hidden": "+ {count} mais",
-	"components.tag-list.role-description": "Lista de marcas",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Selecione para mostrar itens ocultos da lista de etiquetas",
 	"components.tag-list-item.role-description": "Marca",

package/lang/sv.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} valda",
 	"components.selection.selected-plus": "Över {count} valda",
 	"components.selection-controls.label": "Åtgärder för val",
+	"components.sort.label": "Sortera",
+	"components.sort.text": "Sortera: {selectedItemText}",
 	"components.switch.conditions": "Villkoren måste uppfyllas",
 	"components.switch.hidden": "Dold",
 	"components.switch.visible": "Synlig",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Ta bort tagglistobjektet {value}",
 	"components.tag-list.interactive-label": "Tagglista, {count} objekt",
 	"components.tag-list.num-hidden": "+ {count} till",
-	"components.tag-list.role-description": "Tagglista",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Visa färre",
 	"components.tag-list.show-more-description": "Välj för att visa dolda tagglistobjekt",
 	"components.tag-list-item.role-description": "Tagg",

package/lang/tr.js

@@ -172,6 +172,8 @@ export default {
 	"components.selection.selected": "{count} öğe seçildi",
 	"components.selection.selected-plus": "{count}+ öğe seçildi",
 	"components.selection-controls.label": "Seçim için eylemler",
+	"components.sort.label": "Sırala",
+	"components.sort.text": "Sırala: {selectedItemText}",
 	"components.switch.conditions": "Koşullar karşılanmalıdır",
 	"components.switch.hidden": "Gizli",
 	"components.switch.visible": "Görünür",
@@ -207,7 +209,12 @@ export default {
 	"components.tag-list.cleared-item": "Kaldırılan etiket listesi öğesi {value}",
 	"components.tag-list.interactive-label": "Etiket Listesi, {count} öğe",
 	"components.tag-list.num-hidden": "+{count} tane daha",
-	"components.tag-list.role-description": "Etiket Listesi",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			one {Tag List with {count} item}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "Daha Azını Göster",
 	"components.tag-list.show-more-description": "Gizli etiket listesi öğelerini göstermek için seçin",
 	"components.tag-list-item.role-description": "Etiket",

package/lang/zh-cn.js

@@ -164,6 +164,8 @@ export default {
 	"components.selection.selected": "已选 {count}",
 	"components.selection.selected-plus": "已选 + {count}",
 	"components.selection-controls.label": "针对所选内容的操作",
+	"components.sort.label": "排序",
+	"components.sort.text": "排序：{selectedItemText}",
 	"components.switch.conditions": "必须符合条件",
 	"components.switch.hidden": "隐藏",
 	"components.switch.visible": "可见",
@@ -199,7 +201,11 @@ export default {
 	"components.tag-list.cleared-item": "已移除标签列表项目 {value}",
 	"components.tag-list.interactive-label": "标签列表，{count} 个项目",
 	"components.tag-list.num-hidden": "+ {count} 个",
-	"components.tag-list.role-description": "标签列表",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "显示更少",
 	"components.tag-list.show-more-description": "选择以显示隐藏的标签列表项目",
 	"components.tag-list-item.role-description": "标记",

package/lang/zh-tw.js

@@ -165,6 +165,8 @@ export default {
 	"components.selection.selected": "已選取 {count} 個",
 	"components.selection.selected-plus": "已選取 {count}+ 個",
 	"components.selection-controls.label": "選擇的動作",
+	"components.sort.label": "排序",
+	"components.sort.text": "排序：{selectedItemText}",
 	"components.switch.conditions": "必須符合條件",
 	"components.switch.hidden": "隱藏",
 	"components.switch.visible": "可見",
@@ -200,7 +202,11 @@ export default {
 	"components.tag-list.cleared-item": "已移除標記清單項目 {value}",
 	"components.tag-list.interactive-label": "標記清單，{count} 個項目",
 	"components.tag-list.num-hidden": "還有 {count} 個",
-	"components.tag-list.role-description": "標記列表",
+	"components.tag-list.role-description":
+		`{count, plural,
+			=0 {Tag List with 0 items}
+			other {Tag List with {count} items}
+		}`,
 	"components.tag-list.show-less": "顯示更少",
 	"components.tag-list.show-more-description": "選取以顯示隱藏的標記清單項目",
 	"components.tag-list-item.role-description": "標記",

package/package.json

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