@brightspace-ui/core 2.10.2 → 2.11.0

package/components/tag-list/demo/tag-list.html

@@ -52,6 +52,25 @@
 				</d2l-tag-list>
 			</d2l-demo-snippet>
 
+			<h2>Clearable Tag List</h2>
+			<d2l-demo-snippet fullscreen>
+				<d2l-tag-list description="A bunch of example tags" clearable>
+					<d2l-tag-list-item text="Example Tag"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Longer Example Tag - much much much much much longer"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Another Example Tag"></d2l-tag-list-item>
+					<d2l-tag-list-item-mixin-consumer name="Custom Tag List Item"></d2l-tag-list-item-mixin-consumer>
+					<d2l-tag-list-item text="Example Tag 5"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example Tag 6"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example Tag 7"></d2l-tag-list-item>
+				</d2l-tag-list>
+				<script>
+					document.addEventListener('d2l-tag-list-item-cleared', (e) => {
+						e.target.parentNode.removeChild(e.target);
+						console.log(`d2l-tag-list-item-cleared event dispatched. Value: ${e.detail.value}, handleFocus: ${e.detail.handleFocus}`);
+					});
+				</script>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

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

@@ -1,13 +1,23 @@
+import '../button/button-icon.js';
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
 import { css, html } from 'lit';
+import { announce } from '../../helpers/announce.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { findComposedAncestor } from '../../helpers/dom.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { labelStyles } from '../typography/styles.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
-export const TagListItemMixin = superclass => class extends superclass {
+export const TagListItemMixin = superclass => class extends LocalizeCoreElement(RtlMixin(superclass)) {
 
 	static get properties() {
 		return {
+			/**
+			 * Enables the option to clear a tag list item. The `d2l-tag-list-item-cleared` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.
+			 */
+			clearable: { type: Boolean },
 			/**
 			 * @ignore
 			 */
@@ -26,27 +36,39 @@ export const TagListItemMixin = superclass => class extends superclass {
 				display: none;
 			}
 			.tag-list-item-container {
+				align-items: center;
 				background-color: var(--d2l-color-regolith);
 				border-radius: 6px;
 				box-shadow: inset 0 0 0 1px var(--d2l-color-gypsum), 0 2px 4px rgba(0, 0, 0, 0.03);
 				box-sizing: border-box;
 				color: var(--d2l-color-ferrite);
 				cursor: pointer;
+				display: flex;
 				max-width: 320px;
 				min-width: 0;
 				outline: none;
-				overflow: hidden;
 				padding: 0.25rem 0.6rem;
-				text-overflow: ellipsis;
 				transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
 				white-space: nowrap;
 			}
-			.tag-list-item-container:focus,
-			:host(:hover) .tag-list-item-container:focus {
+			.tag-list-item-container.tag-list-item-container-clearable {
+				padding-right: 0.25rem;
+			}
+			:host([dir="rtl"]) .tag-list-item-container.tag-list-item-container-clearable {
+				padding-left: 0.25rem;
+				padding-right: 0.6rem;
+			}
+			.tag-list-item-content {
+				outline: none;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			:host(:focus) .tag-list-item-container,
+			:host(:focus:hover) .tag-list-item-container {
 				box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), 0 2px 4px rgba(0, 0, 0, 0.03);
 			}
 			:host(:hover) .tag-list-item-container,
-			.tag-list-item-container:focus {
+			:host(:focus) .tag-list-item-container {
 				background-color: var(--d2l-color-sylvite);
 			}
 			:host(:hover) .tag-list-item-container {
@@ -58,11 +80,27 @@ export const TagListItemMixin = superclass => class extends superclass {
 					transition: none;
 				}
 			}
+			.d2l-tag-list-item-clear-button {
+				padding-left: 3px;
+			}
+			:host([dir="rtl"]) .d2l-tag-list-item-clear-button {
+				padding-left: 0;
+				padding-right: 3px;
+			}
+			d2l-button-icon {
+				--d2l-button-icon-fill-color: var(--d2l-color-chromite);
+				--d2l-button-icon-min-height: 1.1rem;
+				--d2l-button-icon-min-width: 1.1rem;
+			}
+			d2l-button-icon:hover {
+				--d2l-button-icon-fill-color: var(--d2l-color-tungsten);
+			}
 		`];
 	}
 
 	constructor() {
 		super();
+		this.clearable = false;
 		/** @ignore */
 		this.role = 'listitem';
 		this._id = getUniqueId();
@@ -71,24 +109,71 @@ export const TagListItemMixin = superclass => class extends superclass {
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
-		const container = this.shadowRoot.querySelector('.tag-list-item-container');
+		const container = this.shadowRoot.querySelector('.tag-list-item-content');
 		this.addEventListener('focus', (e) => {
 			// ignore focus events coming from inside the tag content
-			if (e.composedPath()[0] === this) container.focus();
+			if (e.composedPath()[0] !== this) return;
+			const event = new FocusEvent('focus', { bubbles: true, cancelable: true });
+			container.dispatchEvent(event);
+		});
+		this.addEventListener('blur', () => {
+			const event = new FocusEvent('blur', { bubbles: true, cancelable: true });
+			container.dispatchEvent(event);
 		});
-		this.addEventListener('blur', () => container.blur());
+		this.addEventListener('keydown', this._handleKeydown);
+	}
+
+	handleClearItem(e, clearAll) {
+		if (!this.clearable) return;
+
+		let handleFocus = false;
+		if (e) {
+			const listItemParent = findComposedAncestor(e.composedPath()[0], (node) => node.role === 'listitem');
+			handleFocus = listItemParent ? true : false;
+		}
+
+		if (!clearAll) announce(this.localize('components.tag-list.cleared-item', { value: this.text }));
+
+		/** Dispatched when a user selects to delete a tag list item. The consumer must handle the actual element deletion and focus behaviour if there are no remaining list items. */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-tag-list-item-cleared',
+			{ bubbles: true, composed: true, detail: { value: this.text, handleFocus } }
+		));
+	}
+
+	_handleKeydown(e) {
+		const expectedKey = e.keyCode === 8 || e.keyCode === 46; // backspace or delete
+		if (!this.clearable || !expectedKey) return;
+		e.preventDefault();
+		this.handleClearItem(e);
 	}
 
 	_renderTag(tagContent, hasTruncationTooltip) {
+		const buttonText = typeof tagContent === 'object'
+			? this.localize('components.tag-list.clear', { value: '' })
+			: this.localize('components.tag-list.clear', { value: tagContent });
 		const tooltip = hasTruncationTooltip ? html`
-				<d2l-tooltip for="${this._id}" show-truncated-only>
+				<d2l-tooltip for="${this._id}" offset="20" show-truncated-only>
 					${tagContent}
 				</d2l-tooltip>
 			` : null;
+		const containerClasses = {
+			'd2l-label-text': true,
+			'tag-list-item-container': true,
+			'tag-list-item-container-clearable': this.clearable
+		};
 		return html`
 			${tooltip}
-			<div class="tag-list-item-container d2l-label-text" id="${this._id}" tabindex="-1">
-				${tagContent}
+			<div class="${classMap(containerClasses)}">
+				<div class="tag-list-item-content" id="${this._id}" tabindex="-1">${tagContent}</div>
+				${this.clearable ? html`
+					<d2l-button-icon
+						class="d2l-tag-list-item-clear-button"
+						@click="${this.handleClearItem}"
+						icon="tier1:close-small"
+						tabindex="-1"
+						text="${buttonText}">
+					</d2l-button-icon>` : null}
 			</div>
 		`;
 	}

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

@@ -1,6 +1,8 @@
 import '../button/button-subtle.js';
 import { css, html, LitElement } from 'lit';
+import { announce } from '../../helpers/announce.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -16,10 +18,23 @@ const PAGE_SIZE_LINES = {
 };
 const MARGIN_TOP_RIGHT = 6;
 
+async function filterAsync(arr, callback) {
+	const fail = Symbol();
+	const results = await Promise.all(arr.map(async item => {
+		const callbackResult = await callback(item);
+		return callbackResult ? item : fail;
+	}));
+	return results.filter(i => i !== fail);
+}
+
 class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 
 	static get properties() {
 		return {
+			/**
+			 * Enables the option to clear all inner tag list items. The `d2l-tag-list-item-cleared` event will be dispatched for each list item when the user selects to Clear All. The consumer must handle the actual item deletion.
+			 */
+			clearable: { type: Boolean },
 			/**
 			 * REQUIRED: A description of the tag list for additional accessibility context
 			 * @type {string}
@@ -56,6 +71,12 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 				position: absolute;
 				visibility: hidden;
 			}
+			.d2l-tag-list-clear-button {
+				visibility: hidden;
+			}
+			.d2l-tag-list-clear-button.d2l-tag-list-clear-button-visible {
+				visibility: visible;
+			}
 		`;
 	}
 
@@ -63,7 +84,9 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 		super();
 		/** @ignore */
 		this.arrowKeysDirection = 'leftrightupdown';
+		this.clearable = false;
 		this._chompIndex = 10000;
+		this._clearButtonWidth = 0;
 		this._hasResized = false;
 		this._resizeObserver = null;
 		this._showHiddenTags = false;
@@ -71,6 +94,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		if (this._clearButtonResizeObserver) this._clearButtonResizeObserver.disconnect();
 		if (this._resizeObserver) this._resizeObserver.disconnect();
 		if (this._subtleButtonResizeObserver) this._subtleButtonResizeObserver.disconnect();
 	}
@@ -78,7 +102,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
-		const subtleButton  = this.shadowRoot.querySelector('.d2l-tag-list-hidden-button');
+		const subtleButton = this.shadowRoot.querySelector('.d2l-tag-list-hidden-button');
 		this._subtleButtonResizeObserver = new ResizeObserver(() => {
 			this._subtleButtonWidth = Math.ceil(parseFloat(getComputedStyle(subtleButton).getPropertyValue('width')));
 		});
@@ -87,6 +111,12 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 		const container = this.shadowRoot.querySelector('.tag-list-outer-container');
 		this._resizeObserver = new ResizeObserver((e) => requestAnimationFrame(() => this._handleResize(e)));
 		this._resizeObserver.observe(container);
+
+		const clearButton = this.shadowRoot.querySelector('d2l-button-subtle.d2l-tag-list-clear-button');
+		this._clearButtonResizeObserver = new ResizeObserver(() => {
+			this._clearButtonWidth = Math.ceil(parseFloat(getComputedStyle(clearButton).getPropertyValue('width')));
+		});
+		this._clearButtonResizeObserver.observe(clearButton);
 	}
 
 	render() {
@@ -104,9 +134,9 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 			});
 		}
 
-		let button = null;
+		let overflowButton = null;
 		if (hasHiddenTags) {
-			button = this._showHiddenTags ? html`
+			overflowButton = this._showHiddenTags ? html`
 				<d2l-button-subtle
 					class="d2l-tag-list-button"
 					@click="${this._toggleHiddenTagVisibility}"
@@ -122,11 +152,22 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 				</d2l-button-subtle>
 			`;
 		}
+		const clearableClasses = {
+			'd2l-tag-list-clear-button': true,
+			'd2l-tag-list-clear-button-visible': this.clearable && this._items && this._items.length > 0
+		};
 
 		const list = html`
-			<div role="list" class="tag-list-container" aria-describedby="d2l-tag-list-description">
+			<div role="list" class="tag-list-container" aria-describedby="d2l-tag-list-description" @d2l-tag-list-item-cleared="${this._handleItemDeleted}">
 				<slot @slotchange="${this._handleSlotChange}"></slot>
-				${button}
+				${overflowButton}
+				<d2l-button-subtle
+					class="${classMap(clearableClasses)}"
+					@click="${this._handleClearAll}"
+					slim
+					text="${this.localize('components.tag-list.clear-all')}"
+				>
+				</d2l-button-subtle>
 			</div>
 		`;
 
@@ -154,6 +195,8 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 	_chomp() {
 		if (!this.shadowRoot || !this._lines || !this._itemLayouts) return;
 
+		const clearButtonWidth = this.clearable ? this._clearButtonWidth : 0;
+
 		const showing = {
 			count: 0,
 			width: 0
@@ -187,20 +230,22 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 			}
 		}
 
-		if (!isOverflowing) {
+		if (!isOverflowing && !this.clearable) {
 			this._chompIndex = showing.count;
 			return;
 		}
 
-		// calculate if additional item(s) should be hidden due to subtle button needing space
+		// calculate if additional item(s) should be hidden due to subtle button(s) needing space
 		for (let j = this._itemLayouts.length; j--;) {
-			if ((showing.width + this._subtleButtonWidth) < this._availableWidth) {
+			if ((this.clearable && !isOverflowing && ((showing.width + clearButtonWidth) < this._availableWidth))
+				|| ((showing.width + this._subtleButtonWidth + clearButtonWidth) < this._availableWidth)) {
 				break;
 			}
 			const itemLayoutOverflowing = this._itemLayouts[j];
 			if (itemLayoutOverflowing.trigger !== 'soft-show') {
 				continue;
 			}
+			isOverflowing = true;
 			showing.width -= itemLayoutOverflowing.width;
 			showing.count -= 1;
 		}
@@ -222,15 +267,56 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 		return items.filter(({ isHidden }) => !isHidden);
 	}
 
-	_getTagListItems() {
+	async _getTagListItems() {
 		const slot = this.shadowRoot && this.shadowRoot.querySelector('slot');
 		if (!slot) return;
-		return slot.assignedNodes({ flatten: true }).filter((node) => {
+
+		const results = await filterAsync(slot.assignedNodes({ flatten: true }), async node => {
 			if (node.nodeType !== Node.ELEMENT_NODE) return false;
+			await node.updateComplete;
+
 			const role = node.getAttribute('role');
+			if (role !== 'listitem') return false;
+
+			if (this.clearable) node.setAttribute('clearable', 'clearable');
 			node.removeAttribute('data-is-chomped');
-			return (role === 'listitem');
+
+			return true;
 		});
+		return results;
+	}
+
+	_getVisibleEffectiveChildren() {
+		if (!this.shadowRoot) {
+			return [];
+		}
+
+		const showMoreButton = this.shadowRoot.querySelector('.d2l-tag-list-button') || [];
+		const clearButton = this.shadowRoot.querySelector('.d2l-tag-list-clear-button') || [];
+		return this._items.slice(0, this._chompIndex).concat(showMoreButton).concat(clearButton);
+	}
+
+	_handleClearAll(e) {
+		if (!this._items) return;
+
+		announce(this.localize('components.tag-list.cleared-all'));
+
+		this._items.forEach((item) => {
+			item.handleClearItem(e, true);
+		});
+	}
+
+	_handleItemDeleted(e) {
+		if (!this.clearable) return;
+		if (!e || !e.detail || !e.detail.handleFocus) return;
+
+		const rootTarget = e.composedPath()[0];
+		const children = this._getVisibleEffectiveChildren();
+		const itemIndex = children.indexOf(rootTarget);
+		if (children.length > 1) {
+			if (children[itemIndex - 1]) children[itemIndex - 1].focus();
+			else children[itemIndex + 1].focus();
+		}
 	}
 
 	_handleResize(entries) {
@@ -241,18 +327,20 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 		if (!this._hasResized) {
 			this._hasResized = true;
 			this._handleSlotChange();
+		} else {
+			this._chomp();
 		}
-		this._chomp();
 	}
 
 	_handleSlotChange() {
 		if (!this._hasResized) return;
 
 		requestAnimationFrame(async() => {
-			this._items = this._getTagListItems();
-			if (!this._items || this._items.length === 0) return;
-
-			await Promise.all(this._items.map(item => item.updateComplete));
+			this._items = await this._getTagListItems();
+			if (!this._items || this._items.length === 0) {
+				this._chompIndex = 10000;
+				return;
+			}
 
 			this._itemLayouts = this._getItemLayouts(this._items);
 			this._itemHeight = this._items[0].offsetHeight;

package/custom-elements.json

@@ -9768,6 +9768,12 @@
           "name": "text",
           "description": "REQUIRED: Text to display",
           "type": "string"
+        },
+        {
+          "name": "clearable",
+          "description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-cleared` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -9776,6 +9782,25 @@
           "attribute": "text",
           "description": "REQUIRED: Text to display",
           "type": "string"
+        },
+        {
+          "name": "clearable",
+          "attribute": "clearable",
+          "description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-cleared` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "focus"
+        },
+        {
+          "name": "blur"
+        },
+        {
+          "name": "d2l-tag-list-item-cleared",
+          "description": "Dispatched when a user selects to delete a tag list item. The consumer must handle the actual element deletion and focus behaviour if there are no remaining list items."
         }
       ]
     },
@@ -9787,6 +9812,12 @@
           "name": "description",
           "description": "REQUIRED: A description of the tag list for additional accessibility context",
           "type": "string"
+        },
+        {
+          "name": "clearable",
+          "description": "Enables the option to clear all inner tag list items. The `d2l-tag-list-item-cleared` event will be dispatched for each list item when the user selects to Clear All. The consumer must handle the actual item deletion.",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -9796,6 +9827,13 @@
           "description": "REQUIRED: A description of the tag list for additional accessibility context",
           "type": "string"
         },
+        {
+          "name": "clearable",
+          "attribute": "clearable",
+          "description": "Enables the option to clear all inner tag list items. The `d2l-tag-list-item-cleared` event will be dispatched for each list item when the user selects to Clear All. The consumer must handle the actual item deletion.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "arrowKeysDirection",
           "type": "string",
@@ -9815,6 +9853,12 @@
         {
           "name": "name",
           "type": "string"
+        },
+        {
+          "name": "clearable",
+          "description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-cleared` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -9822,6 +9866,25 @@
           "name": "name",
           "attribute": "name",
           "type": "string"
+        },
+        {
+          "name": "clearable",
+          "attribute": "clearable",
+          "description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-cleared` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "focus"
+        },
+        {
+          "name": "blur"
+        },
+        {
+          "name": "d2l-tag-list-item-cleared",
+          "description": "Dispatched when a user selects to delete a tag list item. The consumer must handle the actual element deletion and focus behaviour if there are no remaining list items."
         }
       ]
     },

package/lang/ar.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "إمكانية الرؤية",
 	"components.tabs.next": "التمرير إلى الأمام",
 	"components.tabs.previous": "التمرير إلى الخلف",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "تقسيم العرض القابل للضبط",

package/lang/cy.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "Gwelededd",
 	"components.tabs.next": "Sgrolio Ymlaen",
 	"components.tabs.previous": "Sgrolio Yn Ôl",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Gwedd Hollt Addasadwy",

package/lang/da.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "Synlighed",
 	"components.tabs.next": "Rul frem",
 	"components.tabs.previous": "Rul tilbage",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Justerbar delt visning",

package/lang/de.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "Sichtbarkeit",
 	"components.tabs.next": "Weiterblättern",
 	"components.tabs.previous": "Zurückblättern",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Anpassbare geteilte Ansicht",

package/lang/en.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "Visibility",
 	"components.tabs.next": "Scroll Forward",
 	"components.tabs.previous": "Scroll Backward",
+	"components.tag-list.clear": "Click, press backspace, or press delete key to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Adjustable Split View",

package/lang/es-es.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "Visibilidad",
 	"components.tabs.next": "Desplazarse hacia delante",
 	"components.tabs.previous": "Desplazarse hacia atrás",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Vista dividida ajustable",

package/lang/es.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "Visibilidad",
 	"components.tabs.next": "Desplazarse hacia adelante",
 	"components.tabs.previous": "Desplazarse hacia atrás",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
+	"components.tag-list.clear-all": "Clear All",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Pantalla dividida ajustable",

package/lang/fr-fr.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "Visibilité",
 	"components.tabs.next": "Faire défiler vers l'avant",
 	"components.tabs.previous": "Faire défiler vers l'arrière",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Vue fractionnée réglable",

package/lang/fr.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "Visibilité",
 	"components.tabs.next": "Défilement avant",
 	"components.tabs.previous": "Défilement arrière",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Vue partagée réglable",

package/lang/hi.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "दृश्यता",
 	"components.tabs.next": "आगे स्क्रॉल करें",
 	"components.tabs.previous": "पीछे स्क्रॉल करें",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "समायोजन योग्य विभाजन दृश्य",

package/lang/ja.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "表示",
 	"components.tabs.next": "前方にスクロール",
 	"components.tabs.previous": "後方にスクロール",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "調整可能な分割ビュー",

package/lang/ko.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "표시여부",
 	"components.tabs.next": "앞으로 스크롤",
 	"components.tabs.previous": "뒤로 스크롤",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "조정 가능한 분할 보기",

package/lang/nl.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "Zichtbaarheid",
 	"components.tabs.next": "Naar voren scrollen",
 	"components.tabs.previous": "Naar achteren scrollen",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Instelbare gesplitste weergave",

package/lang/pt.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "Visibilidade",
 	"components.tabs.next": "Ir para frente",
 	"components.tabs.previous": "Ir para trás",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Exibição dividida ajustável",

package/lang/sv.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "Synlighet",
 	"components.tabs.next": "Bläddra framåt",
 	"components.tabs.previous": "Bläddra bakåt",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Justerbar delad vy",

package/lang/tr.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "Görünürlük",
 	"components.tabs.next": "İleri Kaydır",
 	"components.tabs.previous": "Geri Kaydır",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Ayarlanabilir Bölünmüş Görüntü",

package/lang/zh-cn.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "可见性",
 	"components.tabs.next": "向前滚动",
 	"components.tabs.previous": "向后滚动",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "可调分屏视图",

package/lang/zh-tw.js

@@ -95,6 +95,10 @@ export default {
 	"components.switch.visibility": "能見度",
 	"components.tabs.next": "向前捲動",
 	"components.tabs.previous": "向後捲動",
+	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
+	"components.tag-list.cleared-all": "Removed all tag list items",
+	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "可調整的分割檢視",

package/package.json

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