@brightspace-ui/core 2.22.1 → 2.23.2

package/components/dialog/dialog-mixin.js

@@ -17,7 +17,9 @@ window.D2L.DialogMixin = window.D2L.DialogMixin || {};
 
 // while implemented in Webkit, native <dialog> focus mangement across slotted content is buggy
 // https://bugs.webkit.org/show_bug.cgi?id=233320
-window.D2L.DialogMixin.hasNative = (window.HTMLDialogElement !== undefined)
+// starting in Chrome 102, all elements inside <dialog>s that are inside shadow roots have null offsetParent
+// https://bugs.chromium.org/p/chromium/issues/detail?id=1331803
+window.D2L.DialogMixin.hasNative = false && (window.HTMLDialogElement !== undefined)
 	&& (navigator.vendor && navigator.vendor.toLowerCase().indexOf('apple') === -1);
 if (window.D2L.DialogMixin.preferNative === undefined) {
 	window.D2L.DialogMixin.preferNative = true;

package/components/filter/README.md

@@ -140,13 +140,13 @@ If you are going to be constructing your dimensions and/or dimension values by i
 import { repeat } from 'lit/directives/repeat.js';
 ...
 return html`<d2l-filter>
-	${repeat(this._dimensions, (dim) => dim.key, dim => html`
-		<d2l-filter-dimension-set key="${dim.key}" text=${dim.text}>
-			${repeat(dim._values, (value) => value.key, value => html`
-				<d2l-filter-dimension-set-value key="${value.kay}" text="${value.text}" ?selected="${value.selected}"></d2l-filter-dimension-set-value>
-			`)}
-		</d2l-filter-dimension-set>
-	`)}
+  ${repeat(this._dimensions, (dim) => dim.key, dim => html`
+    <d2l-filter-dimension-set key="${dim.key}" text=${dim.text}>
+      ${repeat(dim._values, (value) => value.key, value => html`
+        <d2l-filter-dimension-set-value key="${value.kay}" text="${value.text}" ?selected="${value.selected}"></d2l-filter-dimension-set-value>
+      `)}
+    </d2l-filter-dimension-set>
+  `)}
 </d2l-filter>`;
 ```
 
@@ -224,14 +224,74 @@ This component is built to be used alongside the [d2l-filter-dimension-set](#fil
 | `text` | String, required | Text for the value in the list |
 | `selected` | Boolean, default: `false` | Whether the value in the filter is selected or not |
 
+## Tags for Applied Filters [d2l-filter-tags]
 
-## Filter Dimension: Date [d2l-filter-dimension-date]
+A tag-list allowing the user to see (and remove) the currently applied filters. Works with the `d2l-filter`. It supports hooking up to multiple filters.
 
-**Coming Soon!**
+<!-- docs: demo live name:d2l-filter-tags align:start display:block autoSize:false size:medium -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/filter/filter.js';
+  import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
+  import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
+  import '@brightspace-ui/core/components/filter/filter-tags.js';
+</script>
+<style>
+	d2l-filter-tags {
+		max-width: calc(100% - 300px);
+	}
+
+	@media(max-width: 600px) {
+      d2l-filter-tags {
+        display: block;
+        max-width: 100%;
+      }
+	}
+</style>
 
-## Tags for Applied Filters [d2l-filter-tags]
+<d2l-filter-tags filter-ids="core-filter core-filter-2"></d2l-filter-tags>
+
+<d2l-filter id="core-filter">
+  <d2l-filter-dimension-set key="1" text="Dim 1">
+    <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
+  </d2l-filter-dimension-set>
+  <d2l-filter-dimension-set key="2" text="Dim 2">
+    <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
+  </d2l-filter-dimension-set>
+</d2l-filter>
+
+<d2l-filter id="core-filter-2">
+  <d2l-filter-dimension-set key="1" text="Dim 1" value-only-active-filter-text>
+    <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
+  </d2l-filter-dimension-set>
+  <d2l-filter-dimension-set key="2" text="Dim 2" value-only-active-filter-text>
+    <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
+  </d2l-filter-dimension-set>
+</d2l-filter>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `filter-ids` | String, required | Id(s) (space-delimited) of the filter component(s) to subscribe to |
+| `label-text` | String | The text displayed in this component's label |
+<!-- docs: end hidden content -->
+
+## Filter Dimension: Date [d2l-filter-dimension-date]
 
-**This is in progress now! Stable API expected by May.**
+**Coming Soon!**
 
 <!-- docs: start hidden content -->
 ## Future Improvements

package/components/filter/demo/filter-tags.html

@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+			import '../filter.js';
+			import '../filter-dimension-set.js';
+			import '../filter-dimension-set-value.js';
+			import '../filter-tags.js';
+		</script>
+	</head>
+	<body unresolved class="d2l-typography">
+
+		<d2l-demo-page page-title="d2l-filter-tags">
+
+			<div class="d2l-body-compact">
+				Use these d2l-filters to control the applied filters in the demos below. The first filter is set up to send the dimension and value to the subscribers. The second filter only sends the value.
+			</div>
+
+			<d2l-filter id="core-filter">
+				<d2l-filter-dimension-set key="1" text="Dim 1">
+					<d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
+				</d2l-filter-dimension-set>
+				<d2l-filter-dimension-set key="2" text="Dim 2">
+					<d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
+				</d2l-filter-dimension-set>
+			</d2l-filter>
+
+			<d2l-filter id="core-filter-2">
+				<d2l-filter-dimension-set key="1" text="Dim 1" value-only-active-filter-text>
+					<d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
+				</d2l-filter-dimension-set>
+				<d2l-filter-dimension-set key="2" text="Dim 2" value-only-active-filter-text>
+					<d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
+				</d2l-filter-dimension-set>
+			</d2l-filter>
+			<script>
+				const coreFilter = document.querySelector('#core-filter');
+				coreFilter.addEventListener('d2l-filter-dimension-first-open', (e) => {
+					logEvent(e, 'Filter dimension opened!');
+				});
+				coreFilter.addEventListener('d2l-filter-dimension-search', (e) => {
+					logEvent(e, 'Filter dimension searched!');
+				});
+				coreFilter.addEventListener('d2l-filter-change', (e) => {
+					logEvent(e, 'Filter value(s) changed!');
+				});
+				/* eslint-disable no-console */
+				function logEvent(e, text) {
+					console.group(text);
+					console.log('event', e);
+					if (e.detail) console.log('detail', e.detail);
+					console.groupEnd();
+				}
+				/* eslint-enable no-console */
+			</script>
+
+			<h2>Default label and registered to both filters</h2>
+
+			<d2l-demo-snippet>
+				<d2l-filter-tags filter-ids="core-filter core-filter-2"></d2l-filter-tags>
+			</d2l-demo-snippet>
+
+			<h2>Custom label and registered to only the first filter</h2>
+
+			<d2l-demo-snippet>
+				<d2l-filter-tags filter-ids="core-filter" label-text="Filters selected:"></d2l-filter-tags>
+			</d2l-demo-snippet>
+
+		</d2l-demo-page>
+
+	</body>
+</html>

package/components/filter/filter-tags.js

@@ -0,0 +1,144 @@
+import '../colors/colors.js';
+import '../tag-list/tag-list.js';
+import '../tag-list/tag-list-item.js';
+import { css, html, LitElement } from 'lit';
+import { bodyCompactStyles } from '../typography/styles.js';
+import { IdSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { RtlMixin } from '../../mixins/rtl-mixin.js';
+
+/**
+ * A tag-list allowing the user to see (and remove) the currently applied filters.
+ */
+
+const CLEAR_TIMEOUT = 210; /** Corresponds to timeout in _dispatchChangeEvent in filter + 10 ms */
+
+class FilterTags extends RtlMixin(LocalizeCoreElement(LitElement)) {
+	static get properties() {
+		return {
+			/**
+			 * REQUIRED: Id(s) (space-delimited) of the filter component(s) to subscribe to
+			 * @type {string}
+			 */
+			filterIds: { type: String, attribute: 'filter-ids' },
+			/**
+			 * The text displayed in this component's label
+			 * @default "Applied Filters:"
+			 * @type {string}
+			 */
+			label: { type: String }
+		};
+	}
+
+	static get styles() {
+		return [bodyCompactStyles, css`
+			:host {
+				display: inline-block;
+				width: 100%;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+
+			.d2l-filter-tags-wrapper {
+				display: flex;
+			}
+			d2l-tag-list {
+				flex: 1;
+			}
+
+			.d2l-filter-tags-label {
+				display: inline-block;
+				font-weight: bold;
+				margin-right: 0.25rem;
+				padding-top: 0.15rem;
+			}
+			:host([dir="rtl"]) .d2l-filter-tags-label {
+				margin-left: 0.25rem;
+				margin-right: 0;
+			}
+
+			.d2l-filter-tags-none-label {
+				color: var(--d2l-color-corundum);
+				display: inline-block;
+				font-style: italic;
+				padding-top: 0.15rem;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.label = '';
+
+		this._allActiveFilters = new Map();
+		this._filters = new IdSubscriberController(this,
+			{ onUnsubscribe: this._removeLostFilter.bind(this) },
+			{ idPropertyName: 'filterIds' }
+		);
+	}
+
+	render() {
+		let numActiveFilters = 0;
+		const allActiveFilters = Array.from(this._allActiveFilters);
+		const tagListItems = allActiveFilters.map(filter => filter[1].map((value, index) => {
+			numActiveFilters++;
+			return html`
+				<d2l-tag-list-item
+					@d2l-tag-list-item-clear="${this._tagListItemDeleted}"
+					data-filter-id="${filter[0]}"
+					data-index="${index}"
+					text="${value.text}">
+				</d2l-tag-list-item>
+			`;
+		}));
+		let filters = html``;
+		if (numActiveFilters === 0) filters = html`<span class="d2l-filter-tags-none-label d2l-body-compact">${this.localize('components.filter.noActiveFilters')}</span>`;
+		else {
+			filters = html`
+				<d2l-tag-list
+					clearable
+					clear-focus-timeout="${CLEAR_TIMEOUT}"
+					@d2l-tag-list-clear="${this._clearFiltersClicked}"
+					description="${this.label || this.localize('components.filter.activeFilters')}">
+					${tagListItems}
+				</d2l-tag-list>
+			`;
+		}
+
+		return html`
+			<div class="d2l-filter-tags-wrapper">
+				${this.label ? html`<span class="d2l-filter-tags-label d2l-body-compact">${this.label}</span>` : null}
+				${filters}
+			</div>
+		`;
+	}
+
+	updateActiveFilters(filterId, activeFilters) {
+		this._allActiveFilters.set(filterId, activeFilters);
+		this.requestUpdate();
+	}
+
+	_clearFiltersClicked() {
+		this._filters.registries.forEach((filter, index) => {
+			if (index === 0) filter.focus();
+			filter.requestFilterClearAll();
+		});
+	}
+
+	_removeLostFilter(filterId) {
+		this._allActiveFilters.delete(filterId);
+		this.requestUpdate();
+	}
+
+	_tagListItemDeleted(e) {
+		const filterId = e.target.getAttribute('data-filter-id');
+		const filterValueIndex = e.target.getAttribute('data-index');
+		const filterValue = this._allActiveFilters.get(filterId)[filterValueIndex];
+		const filter = this._filters.registries.find(filter => filter.id === filterId);
+		filter.requestFilterValueClear(filterValue.keyObject);
+	}
+
+}
+
+customElements.define('d2l-filter-tags', FilterTags);

package/components/filter/filter.js

@@ -428,6 +428,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._setDimensionChangeEvent(dimension, change, false);
 
 		if (!this._changeEventTimeout) {
+			/** 200 ms timeout used in filter-tags CLEAR_TIMEOUT. If the timeout here changes, update that as well */
 			this._changeEventTimeout = setTimeout(() => {
 				this._dispatchChangeEventNow(false);
 			}, 200);

package/components/focus-trap/focus-trap.js

@@ -16,7 +16,8 @@ class FocusTrap extends FocusMixin(LitElement) {
 			 * Whether the component should trap user focus.
 			 * @type {boolean}
 			 */
-			trap: { type: Boolean }
+			trap: { type: Boolean },
+			_legacyPromptIds: { state: true }
 		};
 	}
 
@@ -35,6 +36,9 @@ class FocusTrap extends FocusMixin(LitElement) {
 		super();
 		this.trap = false;
 		this._handleBodyFocus = this._handleBodyFocus.bind(this);
+		this._handleLegacyPromptOpen = this._handleLegacyPromptOpen.bind(this);
+		this._handleLegacyPromptClose = this._handleLegacyPromptClose.bind(this);
+		this._legacyPromptIds = new Set();
 	}
 
 	static get focusElementSelector() {
@@ -44,15 +48,19 @@ class FocusTrap extends FocusMixin(LitElement) {
 	connectedCallback() {
 		super.connectedCallback();
 		document.body.addEventListener('focus', this._handleBodyFocus, true);
+		document.body.addEventListener('d2l-legacy-prompt-open', this._handleLegacyPromptOpen);
+		document.body.addEventListener('d2l-legacy-prompt-close', this._handleLegacyPromptClose);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		document.body.removeEventListener('focus', this._handleBodyFocus, true);
+		document.body.removeEventListener('d2l-legacy-prompt-open', this._handleLegacyPromptOpen);
+		document.body.removeEventListener('d2l-legacy-prompt-close', this._handleLegacyPromptClose);
 	}
 
 	render() {
-		const tabindex = this.trap ? '0' : undefined;
+		const tabindex = (this.trap && this._legacyPromptIds.size === 0) ? '0' : undefined;
 		return html`
 			<span class="d2l-focus-trap-start" @focusin="${this._handleStartFocusIn}" tabindex="${ifDefined(tabindex)}"></span>
 			<slot></slot>
@@ -72,7 +80,7 @@ class FocusTrap extends FocusMixin(LitElement) {
 	}
 
 	_handleBodyFocus(e) {
-		if (!this.trap) return;
+		if (!this.trap || this._legacyPromptIds.size > 0) return;
 		const container = this._getContainer();
 		const target = e.composedPath()[0];
 		if (isComposedAncestor(container, target)) return;
@@ -95,6 +103,16 @@ class FocusTrap extends FocusMixin(LitElement) {
 		this._focusFirst();
 	}
 
+	_handleLegacyPromptClose(e) {
+		this._legacyPromptIds.delete(e.detail.id);
+		this.requestUpdate();
+	}
+
+	_handleLegacyPromptOpen(e) {
+		this._legacyPromptIds.add(e.detail.id);
+		this.requestUpdate();
+	}
+
 	_handleStartFocusIn(e) {
 		const container = this._getContainer();
 		if (this.shadowRoot && isComposedAncestor(container, e.relatedTarget)) {

package/components/tag-list/README.md

@@ -26,6 +26,10 @@ Tag lists are used to present a list of compact, discrete pieces of information.
 
 The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-item` and adds the appropriate keyboard navigation, list semantics, clearing behaviour and responsive behaviour.
 
+### Clearable
+
+The corresponding `*-clear` event must be listened to for whatever component (`d2l-tag-list` or `d2l-tag-list-item`) has `clearable` on it and that listener must handle individual `d2l-tag-list-item` deletion as well as potentially focus behavior (see individual event descriptions).
+
 <!-- docs: demo live name:d2l-tag-list autoSize:false display:block size:small -->
 ```html
 <script type="module">
@@ -36,6 +40,14 @@ The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-i
     e.target.parentNode.removeChild(e.target);
     console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}, handleFocus: ${e.detail.handleFocus}`);
   });
+
+  document.addEventListener('d2l-tag-list-clear', (e) => {
+    const items = e.target.querySelectorAll('[role="listitem"]');
+    items.forEach((item) => {
+      item.parentNode.removeChild(item);
+    });
+    console.log('d2l-tag-list-clear event dispatched');
+  });
 </script>
 <d2l-tag-list description="Example Tags">
   <d2l-tag-list-item text="Lorem ipsum dolor"></d2l-tag-list-item>

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

@@ -166,9 +166,11 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			handleFocus = listItemParent ? true : false;
 		}
 
-		if (!clearAll) announce(this.localize('components.tag-list.cleared-item', { value: this.text }));
+		if (clearAll) return;
 
-		/** 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. */
+		announce(this.localize('components.tag-list.cleared-item', { value: this.text }));
+
+		/** Dispatched when a user selects to delete an individual 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-clear',
 			{ bubbles: true, composed: true, detail: { value: this.text, handleFocus } }

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

@@ -34,8 +34,14 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		return {
 			/**
 			 * Enables the option to clear all inner tag list items. The `d2l-tag-list-item-clear` 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}
 			 */
 			clearable: { type: Boolean },
+			/**
+			 * ADVANCED: When an item is `clearable`, optionally add a timeout before the focus happens on clear. This is useful if the consumer has some operations that will reload the list items prior to wanting focus to occur.
+			 * @type {number}
+			 */
+			clearFocusTimeout: { type: Number, attribute: 'clear-focus-timeout' },
 			/**
 			 * REQUIRED: A description of the tag list for additional accessibility context
 			 * @type {string}
@@ -88,6 +94,8 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		/** @ignore */
 		this.arrowKeysDirection = 'leftrightupdown';
 		this.clearable = false;
+		this.clearFocusTimeout = 0;
+
 		this._chompIndex = 10000;
 		this._clearButtonHeight = 0;
 		this._clearButtonWidth = 0;
@@ -326,6 +334,12 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 	_handleClearAll(e) {
 		if (!this._items) return;
 
+		/** Dispatched when a user selects to delete all tag list items. The consumer must handle the actual element deletion and focus behaviour. */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-tag-list-clear',
+			{ bubbles: true, composed: true }
+		));
+
 		announce(this.localize('components.tag-list.cleared-all'));
 
 		this._items.forEach((item) => {
@@ -340,10 +354,11 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		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();
-		}
+
+		if (children.length <= 1) return;
+		const focusableElem = children[itemIndex - 1] || children[itemIndex + 1];
+
+		setTimeout(() => focusableElem.focus(), this.clearFocusTimeout);
 	}
 
 	_handleKeyboardTooltipShown() {

package/custom-elements.json

@@ -3154,6 +3154,38 @@
         }
       ]
     },
+    {
+      "name": "d2l-filter-tags",
+      "path": "./components/filter/filter-tags.js",
+      "attributes": [
+        {
+          "name": "filter-ids",
+          "description": "REQUIRED: Id(s) (space-delimited) of the filter component(s) to subscribe to",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "The text displayed in this component's label",
+          "type": "string",
+          "default": "\"\\\"Applied Filters:\\\"\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "filterIds",
+          "attribute": "filter-ids",
+          "description": "REQUIRED: Id(s) (space-delimited) of the filter component(s) to subscribe to",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "The text displayed in this component's label",
+          "type": "string",
+          "default": "\"\\\"Applied Filters:\\\"\""
+        }
+      ]
+    },
     {
       "name": "d2l-filter",
       "path": "./components/filter/filter.js",
@@ -9875,7 +9907,7 @@
       "events": [
         {
           "name": "d2l-tag-list-item-clear",
-          "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."
+          "description": "Dispatched when a user selects to delete an individual tag list item. The consumer must handle the actual element deletion and focus behaviour if there are no remaining list items."
         }
       ]
     },
@@ -9893,6 +9925,12 @@
           "description": "Enables the option to clear all inner tag list items. The `d2l-tag-list-item-clear` 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": "clear-focus-timeout",
+          "description": "ADVANCED: When an item is `clearable`, optionally add a timeout before the focus happens on clear. This is useful if the consumer has some operations that will reload the list items prior to wanting focus to occur.",
+          "type": "number",
+          "default": "0"
         }
       ],
       "properties": [
@@ -9909,6 +9947,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "clearFocusTimeout",
+          "attribute": "clear-focus-timeout",
+          "description": "ADVANCED: When an item is `clearable`, optionally add a timeout before the focus happens on clear. This is useful if the consumer has some operations that will reload the list items prior to wanting focus to occur.",
+          "type": "number",
+          "default": "0"
+        },
         {
           "name": "arrowKeysDirection",
           "type": "string",
@@ -9919,6 +9964,12 @@
           "type": "boolean",
           "default": "false"
         }
+      ],
+      "events": [
+        {
+          "name": "d2l-tag-list-clear",
+          "description": "Dispatched when a user selects to delete all tag list items. The consumer must handle the actual element deletion and focus behaviour."
+        }
       ]
     },
     {
@@ -9953,7 +10004,7 @@
       "events": [
         {
           "name": "d2l-tag-list-item-clear",
-          "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."
+          "description": "Dispatched when a user selects to delete an individual 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

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "إغلاق مربع الحوار هذا",
 	"components.dropdown.close": "إغلاق",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "مسح",
 	"components.filter.clearAll": "مسح الكل",
 	"components.filter.clearAllAnnounce": "جارٍ مسح كل عوامل التصفية",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "يتم تحميل عوامل التصفية",
 	"components.filter.filterCountDescription": "{number, plural, zero {لم يتم تطبيق عوامل تصفية.} one {تم تطبيق عامل تصفية واحد.} other {{number} من عوامل التصفية التي تم تطبيقها.}}",
 	"components.filter.filters": "عوامل التصفية",
+	"components.filter.noActiveFilters": "لا توجد عوامل تصفية نشطة",
 	"components.filter.noFilters": "ما من عوامل تصفية متوفرة",
 	"components.filter.searchResults": "{number, plural, zero {ما من نتائج بحث} one {نتيجة بحث واحدة} other {{number} من نتائج البحث}}",
 	"components.filter.singleDimensionDescription": "التصفية حسب: {filterName}",

package/lang/cy.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "Cau'r dialog hwn",
 	"components.dropdown.close": "Cau",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "Clirio",
 	"components.filter.clearAll": "Clirio’r Cyfan",
 	"components.filter.clearAllAnnounce": "Wrthi’n clirio’r holl hidlwyr",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "Wrthi’n llwytho hidlyddion",
 	"components.filter.filterCountDescription": "{number, plural, zero {Dim hildwyr wedi'u gweithredu.} one {1 hidlydd wedi'i weithredu.} other {{number} hidlydd wedi'u gweithredu.}}",
 	"components.filter.filters": "Hidlyddion",
+	"components.filter.noActiveFilters": "Dim hidlwyr gweithredol",
 	"components.filter.noFilters": "Dim hidlyddion ar gael",
 	"components.filter.searchResults": "{number, plural, zero {Dim canlyniadau chwilio} one {1 canlyniad chwilio} other {{number} canlyniad chwilio}}",
 	"components.filter.singleDimensionDescription": "Hidlo yn ôl: {filterName}",

package/lang/da.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "Luk denne dialogboks",
 	"components.dropdown.close": "Luk",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "Ryd",
 	"components.filter.clearAll": "Ryd alle",
 	"components.filter.clearAllAnnounce": "Rydder alle filtre",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "Indlæser filtre",
 	"components.filter.filterCountDescription": "{number, plural, =0 {Ingen filtre anvendt.} one {1 filter anvendt.} other {{number} filtre anvendt.}}",
 	"components.filter.filters": "Filtre",
+	"components.filter.noActiveFilters": "Ingen aktive filtre",
 	"components.filter.noFilters": "Ingen tilgængelige filtre",
 	"components.filter.searchResults": "{number, plural, =0 {Ingen søgeresultater} one {1 søgeresultat} other {{number} søgeresultater}}",
 	"components.filter.singleDimensionDescription": "Filtrer efter: {filterName}",

package/lang/de.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "Dieses Dialogfeld schließen",
 	"components.dropdown.close": "Schließen",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "Löschen",
 	"components.filter.clearAll": "Alle löschen",
 	"components.filter.clearAllAnnounce": "Alle Filter werden gelöscht",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "Filter werden geladen",
 	"components.filter.filterCountDescription": "{number, plural, =0 {Keine Filter angewendet.} one {1 Filter angewendet.} other {{number} Filter angewendet.}}",
 	"components.filter.filters": "Filter",
+	"components.filter.noActiveFilters": "Keine Filter aktiv",
 	"components.filter.noFilters": "Keine verfügbaren Filter",
 	"components.filter.searchResults": "{number, plural, =0 {Keine Suchergebnisse} one {1 Suchergebnis} other {{number} Suchergebnisse}}",
 	"components.filter.singleDimensionDescription": "Filtern nach: {filterName}",

package/lang/en.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "Close this dialog",
 	"components.dropdown.close": "Close",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "Clear",
 	"components.filter.clearAll": "Clear All",
 	"components.filter.clearAllAnnounce": "Clearing all filters",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "Loading filters",
 	"components.filter.filterCountDescription": "{number, plural, =0 {No filters applied.} one {{number} filter applied.} other {{number} filters applied.}}",
 	"components.filter.filters": "Filters",
+	"components.filter.noActiveFilters": "No active filters",
 	"components.filter.noFilters": "No available filters",
 	"components.filter.searchResults": "{number, plural, =0 {No search results} one {{number} search result} other {{number} search results}}",
 	"components.filter.singleDimensionDescription": "Filter by: {filterName}",

package/lang/es-es.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "Cerrar este cuadro de diálogo",
 	"components.dropdown.close": "Cerrar",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "Borrar",
 	"components.filter.clearAll": "Borrar todo",
 	"components.filter.clearAllAnnounce": "Borrando todos los filtros",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "Cargando filtros",
 	"components.filter.filterCountDescription": "{number, plural, =0 {Sin filtros aplicados.} one {1 filtro aplicado.} other {{number} filtros aplicados.}}",
 	"components.filter.filters": "Filtros",
+	"components.filter.noActiveFilters": "No hay filtros activos",
 	"components.filter.noFilters": "No hay filtros disponibles",
 	"components.filter.searchResults": "{number, plural, =0 {No hay resultados de búsqueda} one {1 resultado de búsqueda} other {{number} resultados de búsqueda}}",
 	"components.filter.singleDimensionDescription": "Filtrar por: {filterName}",

package/lang/es.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "Cerrar este cuadro de diálogo",
 	"components.dropdown.close": "Cerrar",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "Borrar",
 	"components.filter.clearAll": "Borrar todo",
 	"components.filter.clearAllAnnounce": "Borrando todos los filtros",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "Cargando filtros",
 	"components.filter.filterCountDescription": "{number, plural, =0 {Sin filtros aplicados.} one {1 filtro aplicado.} other {{number} filtros aplicados.}}",
 	"components.filter.filters": "Filtros",
+	"components.filter.noActiveFilters": "No hay filtros activos",
 	"components.filter.noFilters": "No hay filtros disponibles",
 	"components.filter.searchResults": "{number, plural, =0 {No se encontraron resultados de búsqueda} one {1 resultado de búsqueda} other {{number} resultados de búsqueda}}",
 	"components.filter.singleDimensionDescription": "Filtrar por: {filterName}",

package/lang/fr-fr.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "Fermer cette boîte de dialogue",
 	"components.dropdown.close": "Fermer",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "Effacer",
 	"components.filter.clearAll": "Tout effacer",
 	"components.filter.clearAllAnnounce": "Suppression de tous les filtres",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "Chargement des filtres",
 	"components.filter.filterCountDescription": "{number, plural, =0 {Aucun filtre appliqué.} one {1 filtre appliqué.} other {{number} filtres appliqués.}}",
 	"components.filter.filters": "Filtres",
+	"components.filter.noActiveFilters": "Aucun filtre actif",
 	"components.filter.noFilters": "Aucun filtre disponible",
 	"components.filter.searchResults": "{number, plural, =0 {Aucun résultat de recherche} one {1 résultat de recherche} other {{number} résultats de recherche}}",
 	"components.filter.singleDimensionDescription": "Filtrer par : {filterName}",

package/lang/fr.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "Fermer cette boîte de dialogue",
 	"components.dropdown.close": "Fermer",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "Effacer",
 	"components.filter.clearAll": "Effacer tout",
 	"components.filter.clearAllAnnounce": "Effacement de tous les filtres en cours",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "Chargement des filtres",
 	"components.filter.filterCountDescription": "{number, plural, =0 {Aucun filtre appliqué.} one {1 filtre appliqué.} other {{number} filtres appliqués.}}",
 	"components.filter.filters": "Filtres",
+	"components.filter.noActiveFilters": "Aucun filtre actif",
 	"components.filter.noFilters": "Aucun filtre disponible",
 	"components.filter.searchResults": "{number, plural, =0 {Aucun résultat de recherche} one {1 résultat de recherche} other {{number} résultats de recherche}}",
 	"components.filter.singleDimensionDescription": "Filtrer par : {filterName}",

package/lang/hi.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "यह संवाद बंद करें",
 	"components.dropdown.close": "बंद करें",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "साफ़ करें",
 	"components.filter.clearAll": "सभी साफ़ करें",
 	"components.filter.clearAllAnnounce": "सभी फिल्टर साफ़ किए जा रहे हैं",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "फिल्टर्स लोड किए जा रहे हैं",
 	"components.filter.filterCountDescription": "{number, plural, =0 {कोई फ़िल्टर लागू नहीं किए गए} one {1 फ़िल्टर लागू किया गया।} other {{number} फ़िल्टर्स लागू किए गए।}}",
 	"components.filter.filters": "फ़िल्टर्स",
+	"components.filter.noActiveFilters": "कोई सक्रिय फ़िल्टर नहीं हैं",
 	"components.filter.noFilters": "कोई उपलब्ध फ़िल्टर्स नहीं",
 	"components.filter.searchResults": "{number, plural, =0 {कोई खोज परिणाम नहीं} one {1 खोज परिणाम} other {{number} खोज परिणाम}}",
 	"components.filter.singleDimensionDescription": "इसके अनुसार फ़िल्टर करें: {filterName}",

package/lang/ja.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "このダイアログを閉じる",
 	"components.dropdown.close": "閉じる",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "クリア",
 	"components.filter.clearAll": "すべてをクリア",
 	"components.filter.clearAllAnnounce": "すべてのフィルタのクリア",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "フィルタのロード中",
 	"components.filter.filterCountDescription": "{number, plural, =0 {フィルタは適用されていません。} other {{number} 個のフィルタが適用されています。}}",
 	"components.filter.filters": "フィルタ",
+	"components.filter.noActiveFilters": "アクティブフィルタなし",
 	"components.filter.noFilters": "使用可能なフィルタはありません",
 	"components.filter.searchResults": "{number, plural, =0 {検索結果なし} other {{number} 件の検索結果}}",
 	"components.filter.singleDimensionDescription": "フィルタ条件: {filterName}",

package/lang/ko.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "이 대화 상자 닫기",
 	"components.dropdown.close": "닫기",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "지우기",
 	"components.filter.clearAll": "모두 지우기",
 	"components.filter.clearAllAnnounce": "모든 필터 지우기",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "필터 로드 중",
 	"components.filter.filterCountDescription": "{number, plural, =0 {적용된 필터 없음.} other {{number}개 필터 적용됨.}}",
 	"components.filter.filters": "개 필터",
+	"components.filter.noActiveFilters": "활성 필터가 없음",
 	"components.filter.noFilters": "사용 가능한 필터가 없습니다",
 	"components.filter.searchResults": "{number, plural, =0 {검색 결과 없음} other {{number}개 검색 결과}}",
 	"components.filter.singleDimensionDescription": "필터 기준: {filterName}",

package/lang/nl.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "Dit dialoogvenster sluiten",
 	"components.dropdown.close": "Sluiten",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "Wissen",
 	"components.filter.clearAll": "Alles wissen",
 	"components.filter.clearAllAnnounce": "Alle filters wissen",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "Laden van filters",
 	"components.filter.filterCountDescription": "{number, plural, =0 {Geen filters toegepast.} one {1 filter toegepast.} other {{number} filters toegepast.}}",
 	"components.filter.filters": "Filters", // mfv-translated
+	"components.filter.noActiveFilters": "Geen actieve filters",
 	"components.filter.noFilters": "Geen beschikbare filters",
 	"components.filter.searchResults": "{number, plural, =0 {Geen zoekresultaten} one {1 zoekresultaat} other {{number} zoekresultaten}}",
 	"components.filter.singleDimensionDescription": "Filter op {filterName}",

package/lang/pt.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "Fechar esta caixa de diálogo",
 	"components.dropdown.close": "Fechar",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "Limpar",
 	"components.filter.clearAll": "Limpar tudo",
 	"components.filter.clearAllAnnounce": "Limpando todos os filtros",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "Carregar filtros",
 	"components.filter.filterCountDescription": "{number, plural, =0 {Nenhum filtro aplicado.} one {1 filtro aplicado.} other {{number} filtros aplicados.}}",
 	"components.filter.filters": "Filtros",
+	"components.filter.noActiveFilters": "Nenhum filtro ativo",
 	"components.filter.noFilters": "Não há filtros disponíveis",
 	"components.filter.searchResults": "{number, plural, =0 {Sem resultados para a pesquisa} one {1 resultado para a pesquisa} other {{number} resultados para a pesquisa}}",
 	"components.filter.singleDimensionDescription": "Filtrar por: {filterName}",

package/lang/sv.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "Stäng dialogrutan",
 	"components.dropdown.close": "Stäng",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "Rensa",
 	"components.filter.clearAll": "Rensa alla",
 	"components.filter.clearAllAnnounce": "Rensar alla filter",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "Läser in filter",
 	"components.filter.filterCountDescription": "{number, plural, =0 {Inga filter tillämpade.} one {1 filter tillämpat.} other {{number} filter tillämpade.}}",
 	"components.filter.filters": "Filter",
+	"components.filter.noActiveFilters": "Inga aktiva filter",
 	"components.filter.noFilters": "Inga tillgängliga filter",
 	"components.filter.searchResults": "{number, plural, =0 {Inga sökresultat} one {1 sökresultat} other {{number} sökresultat}}",
 	"components.filter.singleDimensionDescription": "Filtrera efter: {filterName}",

package/lang/tr.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "Bu iletişim kutusunu kapat",
 	"components.dropdown.close": "Kapat",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "Temizle",
 	"components.filter.clearAll": "Tümünü Temizle",
 	"components.filter.clearAllAnnounce": "Tüm filtreler temizleniyor",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "Filtreler yükleniyor",
 	"components.filter.filterCountDescription": "{number, plural, =0 {Filtre uygulanmadı.} one {1 filtre uygulandı.} other {{number} filtre uygulandı.}}",
 	"components.filter.filters": "Filtre",
+	"components.filter.noActiveFilters": "Etkin filtre yok",
 	"components.filter.noFilters": "Uygun filtre yok",
 	"components.filter.searchResults": "{number, plural, =0 {Arama sonucu yok} one {1 arama sonucu} other {{number} arama sonucu}}",
 	"components.filter.singleDimensionDescription": "Filtreleme ölçütü: {filterName}",

package/lang/zh-cn.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "关闭此对话框",
 	"components.dropdown.close": "关闭",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "清除",
 	"components.filter.clearAll": "全部清除",
 	"components.filter.clearAllAnnounce": "清除所有筛选器",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "正在加载筛选器",
 	"components.filter.filterCountDescription": "{number, plural, =0 {未应用筛选器。} other {已应用 {number} 个筛选器。}}",
 	"components.filter.filters": "个筛选条件",
+	"components.filter.noActiveFilters": "没有活动的筛选器",
 	"components.filter.noFilters": "无可用筛选器",
 	"components.filter.searchResults": "{number, plural, =0 {无搜索结果} other {{number} 个搜索结果}}",
 	"components.filter.singleDimensionDescription": "筛选依据：{filterName}",

package/lang/zh-tw.js

@@ -9,6 +9,7 @@ export default {
 	"components.count-badge.plus" : "{number}+",
 	"components.dialog.close": "關閉此對話方塊",
 	"components.dropdown.close": "關閉",
+	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "清除",
 	"components.filter.clearAll": "全部清除",
 	"components.filter.clearAllAnnounce": "正在清除所有篩選器",
@@ -20,6 +21,7 @@ export default {
 	"components.filter.loading": "正在載入篩選條件",
 	"components.filter.filterCountDescription": "{number, plural, =0 {未套用篩選條件。} other {已套用 {number} 項篩選條件。}}",
 	"components.filter.filters": "篩選器",
+	"components.filter.noActiveFilters": "沒有啟用中的篩選器",
 	"components.filter.noFilters": "沒有可用的篩選條件",
 	"components.filter.searchResults": "{number, plural, =0 {無搜尋結果} other {{number} 個搜尋結果}}",
 	"components.filter.singleDimensionDescription": "按此條件篩選：{filterName}",

package/package.json

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