@brightspace-ui/core 2.16.0 → 2.18.0

package/components/dialog/dialog-confirm.js

@@ -89,7 +89,12 @@ class DialogConfirm extends DialogMixin(LitElement) {
 		const descId = (this.titleText && this.text) ? this._textId : undefined;
 		return this._render(
 			inner,
-			{ labelId: labelId, descId: descId, role: 'alertdialog' }
+			{
+				descId: descId,
+				fullscreenMobile: false,
+				labelId: labelId,
+				role: 'alertdialog'
+			}
 		);
 	}
 

package/components/dialog/dialog-fullscreen.js

@@ -154,11 +154,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					padding-bottom: 15px;
 				}
 
-				.d2l-dialog-header > div > d2l-button-icon {
-					flex: none;
-					margin: -8px -13px 0 15px;
-				}
-
 				.d2l-dialog-footer.d2l-footer-no-content {
 					padding: 0 0 5px 0;
 				}
@@ -171,17 +166,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					height: calc(100% - 1px);
 				}
 
-				:host([dir="rtl"]) .d2l-dialog-header > div > d2l-button-icon {
-					margin-left: -13px;
-					margin-right: 15px;
-				}
-
-				dialog.d2l-dialog-outer,
-				div.d2l-dialog-outer {
-					margin: 0 !important;
-					min-width: calc(var(--d2l-vw, 1vw) * 100);
-					top: 42px;
-				}
 			}
 		`];
 	}
@@ -226,9 +210,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 				: 0;
 			const startTop = mediaQueryList.matches ? 42 : 0;
 			topOverride = iframeTop + startTop;
-		} else if (window.innerWidth <= 615 || (window.innerWidth <= 900 && window.innerHeight <= 420)) {
-			heightOverride.height = `${window.innerHeight - 42 - 2}px`; // render full window height - 42px top padding - 2px border
-			heightOverride.minHeight = heightOverride.height;
 		}
 
 		let loading = null;
@@ -269,7 +250,11 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 		`;
 		return this._render(
 			inner,
-			{ labelId: this._titleId, role: 'dialog' },
+			{
+				fullscreenMobile: true,
+				labelId: this._titleId,
+				role: 'dialog'
+			},
 			topOverride
 		);
 	}

package/components/dialog/dialog-mixin.js

@@ -1,4 +1,5 @@
 import '../focus-trap/focus-trap.js';
+import '../../helpers/viewport-size.js';
 import { allowBodyScroll, preventBodyScroll } from '../backdrop/backdrop.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
@@ -420,6 +421,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			'd2l-dialog-outer-nested': !this._useNative && this._parentDialog,
 			'd2l-dialog-outer-nested-showing': !this._useNative && this._nestedShowing,
 			'd2l-dialog-outer-scroll': this._scroll,
+			'd2l-dialog-fullscreen-mobile': info.fullscreenMobile,
 			'd2l-dialog-fullscreen-within': this._fullscreenWithin !== 0
 		};
 

package/components/dialog/dialog-styles.js

@@ -154,12 +154,29 @@ export const dialogStyles = css`
 		.d2l-dialog-header {
 			padding: 14px 20px 16px 20px;
 		}
+		.d2l-dialog-fullscreen-mobile .d2l-dialog-header > div > d2l-button-icon {
+			margin: -8px -13px 0 15px;
+		}
+		:host([dir="rtl"]) .d2l-dialog-fullscreen-mobile .d2l-dialog-header > div > d2l-button-icon {
+			margin-left: -13px;
+			margin-right: 15px;
+		}
 		.d2l-dialog-content {
 			padding: 0 20px;
 		}
 		.d2l-dialog-footer {
 			padding: 20px 20px 2px 20px;
 		}
+		.d2l-dialog-outer.d2l-dialog-fullscreen-mobile {
+			margin: 0 !important;
+			min-width: calc(var(--d2l-vw, 1vw) * 100);
+			top: 42px;
+		}
+		:host(:not([in-iframe])) dialog.d2l-dialog-outer.d2l-dialog-fullscreen-mobile,
+		:host(:not([in-iframe])) div.d2l-dialog-outer.d2l-dialog-fullscreen-mobile {
+			height: calc(var(--d2l-vh, 1vh) * 100 - 42px);
+			min-height: calc(var(--d2l-vh, 1vh) * 100 - 42px);
+		}
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/components/dialog/dialog.js

@@ -1,6 +1,5 @@
 import '../button/button-icon.js';
 import '../loading-spinner/loading-spinner.js';
-import '../../helpers/viewport-size.js';
 import { AsyncContainerMixin, asyncStates } from '../../mixins/async-container/async-container-mixin.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
@@ -73,30 +72,6 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 				padding: 0 0 5px 0;
 			}
 
-			@media (max-width: 615px), (max-height: 420px) and (max-width: 900px) {
-
-				.d2l-dialog-outer {
-					margin: 0 !important;
-					min-width: calc(var(--d2l-vw, 1vw) * 100);
-					top: 42px;
-				}
-
-				.d2l-dialog-header > div > d2l-button-icon {
-					margin: -8px -13px 0 15px;
-				}
-
-				:host([dir="rtl"]) .d2l-dialog-header > div > d2l-button-icon {
-					margin-left: -13px;
-					margin-right: 15px;
-				}
-
-				:host(:not([in-iframe])) dialog.d2l-dialog-outer,
-				:host(:not([in-iframe])) div.d2l-dialog-outer {
-					height: calc(var(--d2l-vh, 1vh) * 100 - 42px);
-					min-height: calc(var(--d2l-vh, 1vh) * 100 - 42px);
-				}
-			}
-
 		`];
 	}
 
@@ -167,7 +142,7 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 
 		if (!this._titleId) this._titleId = getUniqueId();
 		const inner = html`
-			<div class="d2l-dialog-inner"  style=${styleMap(heightOverride)}>
+			<div class="d2l-dialog-inner" style=${styleMap(heightOverride)}>
 				<div class="d2l-dialog-header">
 					<div>
 						<h2 id="${this._titleId}" class="d2l-heading-3">${this.titleText}</h2>
@@ -184,7 +159,12 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 		const descId = (this.describeContent) ? this._textId : undefined;
 		return this._render(
 			inner,
-			{ labelId: this._titleId, descId: descId, role: 'dialog' },
+			{
+				descId: descId,
+				fullscreenMobile: true,
+				labelId: this._titleId,
+				role: 'dialog'
+			},
 			topOverride
 		);
 	}

package/components/html-block/README.md

@@ -79,25 +79,23 @@ Examples are provided to display how user-authored math can be embedded within y
   import '@brightspace-ui/core/tools/mathjax-test-context.js';
 </script>
 <d2l-html-block>
-  <div class="mathml-container">
-    <math xmlns="http://www.w3.org/1998/Math/MathML">
-      <msqrt>
-        <mn>3</mn>
-        <mi>x</mi>
-        <mo>&#x2212;</mo>
-        <mn>1</mn>
-      </msqrt>
-      <mo>+</mo>
-      <mo stretchy="false">(</mo>
-      <mn>1</mn>
-      <mo>+</mo>
+  <math xmlns="http://www.w3.org/1998/Math/MathML">
+    <msqrt>
+      <mn>3</mn>
       <mi>x</mi>
-      <msup>
-        <mo stretchy="false">)</mo>
-        <mn>2</mn>
-      </msup>
-    </math>
-  </div>
+      <mo>&#x2212;</mo>
+      <mn>1</mn>
+    </msqrt>
+    <mo>+</mo>
+    <mo stretchy="false">(</mo>
+    <mn>1</mn>
+    <mo>+</mo>
+    <mi>x</mi>
+    <msup>
+      <mo stretchy="false">)</mo>
+      <mn>2</mn>
+    </msup>
+  </math>
 </d2l-html-block>
 ```
 
@@ -110,9 +108,7 @@ Examples are provided to display how user-authored math can be embedded within y
   import '@brightspace-ui/core/tools/mathjax-test-context.js';
 </script>
 <d2l-html-block>
-  <div class="latex-container">
     $$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
-  </div>
 </d2l-html-block>
 ```
 

package/components/html-block/demo/html-block.html

@@ -110,6 +110,18 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>HTML Block (inline)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<span>Here's an inline html-block:</span>
+					<d2l-html-block inline>
+						I'm inline!
+					</d2l-html-block>
+					<span>Pretty cool!</span>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>HTML Block (large font)</h2>
 
 			<d2l-demo-snippet>

package/components/html-block/html-block.js

@@ -136,6 +136,10 @@ class HtmlBlock extends RtlMixin(LitElement) {
 			 * @type {Boolean}
 			 */
 			compact: { type: Boolean },
+			/**
+			 * Whether to display the HTML in inline mode
+			 */
+			inline: { type: Boolean },
 			/**
 			 * Whether to disable deferred rendering of the user-authored HTML. Do *not* set this
 			 * unless your HTML relies on script executions that may break upon stamping.
@@ -155,12 +159,14 @@ class HtmlBlock extends RtlMixin(LitElement) {
 				position: relative;
 				text-align: left;
 			}
-			:host([hidden]) {
-				display: none;
-			}
+			:host([hidden]),
 			:host([no-deferred-rendering]) div.d2l-html-block-rendered {
 				display: none;
 			}
+			:host([inline]),
+			:host([inline]) div.d2l-html-block-rendered {
+				display: inline;
+			}
 			:host([dir="rtl"]) {
 				text-align: right;
 			}
@@ -170,6 +176,7 @@ class HtmlBlock extends RtlMixin(LitElement) {
 	constructor() {
 		super();
 		this.compact = false;
+		this.inline = false;
 		this.noDeferredRendering = false;
 
 		const rendererContextAttributes = getRenderers().reduce((attrs, currentRenderer) => {

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

@@ -10,6 +10,13 @@ import { labelStyles } from '../typography/styles.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
+const keyCodes = {
+	BACKSPACE: 8,
+	DELETE: 46,
+	ENTER: 13,
+	SPACE: 32
+};
+
 export const TagListItemMixin = superclass => class extends LocalizeCoreElement(RtlMixin(superclass)) {
 
 	static get properties() {
@@ -22,7 +29,12 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			/**
 			 * @ignore
 			 */
-			role: { type: String, reflect: true }
+			keyboardTooltipItem: { type: Boolean, attribute: 'keyboard-tooltip-item' },
+			/**
+			 * @ignore
+			 */
+			role: { type: String, reflect: true },
+			_displayKeyboardTooltip: { type: Boolean }
 		};
 	}
 
@@ -48,7 +60,6 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 				max-width: 320px;
 				min-width: 0;
 				outline: none;
-				padding: 0.25rem 0.6rem;
 				transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
 				white-space: nowrap;
 			}
@@ -57,11 +68,12 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			}
 			:host([dir="rtl"]) .tag-list-item-container.tag-list-item-container-clearable {
 				padding-left: 0.25rem;
-				padding-right: 0.6rem;
+				padding-right: 0;
 			}
 			.tag-list-item-content {
 				outline: none;
 				overflow: hidden;
+				padding: 0.25rem 0.6rem;
 				text-overflow: ellipsis;
 			}
 			:host(:focus-visible) .tag-list-item-container,
@@ -82,9 +94,12 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 				}
 			}
 			.d2l-tag-list-item-clear-button {
+				margin-left: -0.6rem;
 				padding-left: 3px;
 			}
 			:host([dir="rtl"]) .d2l-tag-list-item-clear-button {
+				margin-left: 0;
+				margin-right: -0.6rem;
 				padding-left: 0;
 				padding-right: 3px;
 			}
@@ -96,6 +111,15 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			d2l-button-icon:hover {
 				--d2l-button-icon-fill-color: var(--d2l-color-tungsten);
 			}
+			d2l-tooltip ul {
+				list-style: none;
+				margin-bottom: 0;
+				margin-top: 0.2rem;
+				padding: 0;
+			}
+			.d2l-tag-list-item-tooltip-title-key {
+				font-weight: 600;
+			}
 		`];
 	}
 
@@ -103,21 +127,30 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		super();
 		this.clearable = false;
 		/** @ignore */
+		this.keyboardTooltipItem = false;
+		/** @ignore */
 		this.role = 'listitem';
+		this._displayKeyboardTooltip = false;
 		this._id = getUniqueId();
+		this._tooltipShown = false;
 	}
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
 		const container = this.shadowRoot.querySelector('.tag-list-item-content');
-		this.addEventListener('focus', (e) => {
+		this.addEventListener('focus', async(e) => {
 			// ignore focus events coming from inside the tag content
 			if (e.composedPath()[0] !== this) return;
+
+			this._displayKeyboardTooltip = (this.keyboardTooltipItem && !this._tooltipShown);
+			await this.updateComplete;
+
 			/** @ignore */
 			container.dispatchEvent(new FocusEvent('focus', { bubbles: false, cancelable: true }));
 		});
 		this.addEventListener('blur', () => {
+			this._displayKeyboardTooltip = false;
 			/** @ignore */
 			container.dispatchEvent(new FocusEvent('blur', { bubbles: false, cancelable: true }));
 		});
@@ -143,28 +176,52 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 	}
 
 	_handleKeydown(e) {
-		const expectedKey = e.keyCode === 8 || e.keyCode === 46; // backspace or delete
-		if (!this.clearable || !expectedKey) return;
+		const openKeys = e.keyCode === keyCodes.SPACE || e.keyCode === keyCodes.ENTER;
+		if (this._displayKeyboardTooltip && openKeys) this._displayKeyboardTooltip = false;
+
+		const clearKeys = e.keyCode === keyCodes.BACKSPACE || e.keyCode === keyCodes.DELETE;
+		if (!this.clearable || !clearKeys) return;
 		e.preventDefault();
 		this.handleClearItem(e);
 	}
 
+	_handleTooltipHide() {
+		if (this._tooltipShown) this._displayKeyboardTooltip = false;
+	}
+
+	_handleTooltipShow() {
+		this._tooltipShown = true;
+		/** @ignore */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-tag-list-item-tooltip-show',
+			{ bubbles: true, composed: true }
+		));
+	}
+
 	_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}" offset="20" show-truncated-only>
+		const tooltipTagOverflow = hasTruncationTooltip ? html`
+				<d2l-tooltip for="${this._id}" show-truncated-only>
 					${tagContent}
 				</d2l-tooltip>
 			` : null;
+		const tooltipKeyboardInstructions = this._displayKeyboardTooltip ? html`
+			<d2l-tooltip
+				align="start"
+				@d2l-tooltip-hide="${this._handleTooltipHide}"
+				@d2l-tooltip-show="${this._handleTooltipShow}"
+				for="${this._id}">
+					${this._renderTooltipContent()}
+			</d2l-tooltip>` : null;
 		const containerClasses = {
 			'd2l-label-text': true,
 			'tag-list-item-container': true,
 			'tag-list-item-container-clearable': this.clearable
 		};
 		return html`
-			${tooltip}
+			${tooltipKeyboardInstructions || tooltipTagOverflow}
 			<div class="${classMap(containerClasses)}">
 				<div class="tag-list-item-content" id="${this._id}" tabindex="-1">${tagContent}</div>
 				${this.clearable ? html`
@@ -179,4 +236,14 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		`;
 	}
 
+	_renderTooltipContent() {
+		return html`
+			<div class="d2l-tag-list-item-tooltip-title-key">${this.localize('components.tag-list-item.tooltip-title')}</div>
+			<ul>
+				<li><span class="d2l-tag-list-item-tooltip-title-key">${this.localize('components.tag-list-item.tooltip-arrow-keys')}</span> - ${this.localize('components.tag-list-item.tooltip-arrow-keys-desc')}</li>
+				<li><span class="d2l-tag-list-item-tooltip-title-key">${this.localize('components.tag-list-item.tooltip-delete-key')}</span> - ${this.localize('components.tag-list-item.tooltip-delete-key-desc')}</li>
+			</ul>
+		`;
+	}
+
 };

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

@@ -93,6 +93,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		this._clearButtonWidth = 0;
 		this._contentReady = false;
 		this._hasResized = false;
+		this._hasShownKeyboardTooltip = false;
 		this._itemHeight = 0;
 		this._listContainerObserver = null;
 		this._resizeObserver = null;
@@ -177,7 +178,13 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		};
 
 		const list = html`
-			<div role="list" class="${classMap(containerClasses)}" aria-label="${this.description}" @d2l-tag-list-item-clear="${this._handleItemDeleted}">
+			<div
+				aria-label="${this.description}"
+				class="${classMap(containerClasses)}"
+				role="list"
+				@d2l-tag-list-item-clear="${this._handleItemDeleted}"
+				@d2l-tag-list-item-tooltip-show="${this._handleKeyboardTooltipShown}"
+			>
 				<slot @slotchange="${this._handleSlotChange}"></slot>
 				${overflowButton}
 				<d2l-button-subtle
@@ -206,7 +213,6 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 				if (this._items && this._items.length > 0) this._items[0].focus();
 			}
 		);
-
 	}
 
 	async arrowKeysFocusablesProvider() {
@@ -299,6 +305,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 
 			if (this.clearable) node.setAttribute('clearable', 'clearable');
 			node.removeAttribute('data-is-chomped');
+			node.removeAttribute('keyboard-tooltip-item');
 
 			return true;
 		});
@@ -339,6 +346,10 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		}
 	}
 
+	_handleKeyboardTooltipShown() {
+		this._hasShownKeyboardTooltip = true;
+	}
+
 	async _handleResize(entries) {
 		this._availableWidth = Math.floor(entries[0].contentRect.width);
 		if (this._availableWidth >= PAGE_SIZE.large) this._lines = PAGE_SIZE_LINES.large;
@@ -370,6 +381,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		});
 		this._chomp();
 		this._contentReady = true;
+		if (!this._hasShownKeyboardTooltip) this._items[0].setAttribute('keyboard-tooltip-item', 'keyboard-tooltip-item');
 	}
 
 	async _toggleHiddenTagVisibility(e) {

package/custom-elements.json

@@ -3503,6 +3503,12 @@
           "type": "Boolean",
           "default": "false"
         },
+        {
+          "name": "inline",
+          "description": "Whether to display the HTML in inline mode",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "no-deferred-rendering",
           "description": "Whether to disable deferred rendering of the user-authored HTML. Do *not* set this\nunless your HTML relies on script executions that may break upon stamping.",
@@ -3518,6 +3524,13 @@
           "type": "Boolean",
           "default": "false"
         },
+        {
+          "name": "inline",
+          "attribute": "inline",
+          "description": "Whether to display the HTML in inline mode",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "noDeferredRendering",
           "attribute": "no-deferred-rendering",

package/lang/ar.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "زيادة {count} إضافي",
 	"components.tag-list.show-less": "إظهار أقل",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "تقسيم العرض القابل للضبط",
 	"templates.primary-secondary.keyboardHorizontal": "السهم المتّجه إلى اليسار أو إلى اليمين لضبط حجم لوحات العرض",
 	"templates.primary-secondary.keyboardVertical": "السهم المتّجه إلى الأعلى أو إلى الأسفل لضبط حجم لوحات العرض"

package/lang/cy.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} yn rhagor",
 	"components.tag-list.show-less": "Dangos Llai",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "Gwedd Hollt Addasadwy",
 	"templates.primary-secondary.keyboardHorizontal": "Saeth i'r chwith neu'r dde i addasu maint y paneli gweld",
 	"templates.primary-secondary.keyboardVertical": "Saeth i fyny neu i lawr i addasu maint y paneli gweld"

package/lang/da.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} mere",
 	"components.tag-list.show-less": "Vis færre",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "Justerbar delt visning",
 	"templates.primary-secondary.keyboardHorizontal": "Pil til venstre eller højre for at justere størrelsen på visningspaneler",
 	"templates.primary-secondary.keyboardVertical": "Pil op eller ned for at justere størrelsen på visningspaneler"

package/lang/de.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} weitere",
 	"components.tag-list.show-less": "Weniger anzeigen",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "Anpassbare geteilte Ansicht",
 	"templates.primary-secondary.keyboardHorizontal": "Pfeil nach links oder rechts, um die Größe der Ansichtsbereiche anzupassen",
 	"templates.primary-secondary.keyboardVertical": "Pfeil nach oben oder unten, um die Größe der Ansichtsbereiche anzupassen"

package/lang/en.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "Adjustable Split View",
 	"templates.primary-secondary.keyboardHorizontal": "Arrow left or right to adjust the size of the view panels",
 	"templates.primary-secondary.keyboardVertical": "Arrow up or down to adjust the size of the view panels"

package/lang/es-es.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} más",
 	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "Vista dividida ajustable",
 	"templates.primary-secondary.keyboardHorizontal": "Flecha hacia la izquierda o la derecha para ajustar el tamaño de los paneles de visualización",
 	"templates.primary-secondary.keyboardVertical": "Flecha hacia arriba o abajo para ajustar el tamaño de los paneles de visualización"

package/lang/es.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} más",
 	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "Pantalla dividida ajustable",
 	"templates.primary-secondary.keyboardHorizontal": "Utilice la flecha izquierda o derecha para ajustar el tamaño de los paneles de visualización",
 	"templates.primary-secondary.keyboardVertical": "Utilice la flecha hacia arriba o hacia abajo para ajustar el tamaño de los paneles de visualización"

package/lang/fr-fr.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "{count} de plus",
 	"components.tag-list.show-less": "Afficher moins",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "Vue fractionnée réglable",
 	"templates.primary-secondary.keyboardHorizontal": "Flèche vers la gauche ou vers la droite pour régler la taille des panneaux d’affichage",
 	"templates.primary-secondary.keyboardVertical": "Flèche vers le haut ou vers le bas pour régler la taille des panneaux d’affichage"

package/lang/fr.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} de plus",
 	"components.tag-list.show-less": "Afficher moins",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "Vue partagée réglable",
 	"templates.primary-secondary.keyboardHorizontal": "Utiliser la flèche vers la gauche ou vers la droite pour régler la taille des volets d'affichage",
 	"templates.primary-secondary.keyboardVertical": "Flèche vers le haut ou vers le bas pour régler la taille des volets d'affichage"

package/lang/hi.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} और",
 	"components.tag-list.show-less": "कम दिखाएँ",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "समायोजन योग्य विभाजन दृश्य",
 	"templates.primary-secondary.keyboardHorizontal": "दृश्य पैनल्स का आकार समायोजित करने के लिए तीर बाएँ या दाएँ करें",
 	"templates.primary-secondary.keyboardVertical": "दृश्य पैनल्स का आकार समायोजित करने के लिए तीर ऊपर या नीचे करें"

package/lang/ja.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} 件追加",
 	"components.tag-list.show-less": "少なく表示",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "調整可能な分割ビュー",
 	"templates.primary-secondary.keyboardHorizontal": "左矢印または右矢印を使用して、ビューパネルのサイズを調整します",
 	"templates.primary-secondary.keyboardVertical": "上矢印または下矢印を使用して、ビューパネルのサイズを調整します"

package/lang/ko.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "{count}개 더",
 	"components.tag-list.show-less": "간단히 표시",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "조정 가능한 분할 보기",
 	"templates.primary-secondary.keyboardHorizontal": "왼쪽 또는 오른쪽 화살표로 보기 패널의 크기 조정",
 	"templates.primary-secondary.keyboardVertical": "위 또는 아래 화살표로 보기 패널의 크기 조정"

package/lang/nl.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} extra",
 	"components.tag-list.show-less": "Minder weergeven",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "Instelbare gesplitste weergave",
 	"templates.primary-secondary.keyboardHorizontal": "Pijl naar links of rechts om de grootte van de weergavevensters aan te passen",
 	"templates.primary-secondary.keyboardVertical": "Pijl omhoog of omlaag om de grootte van de weergavevensters aan te passen"

package/lang/pt.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} mais",
 	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "Exibição dividida ajustável",
 	"templates.primary-secondary.keyboardHorizontal": "Use a seta para a esquerda ou para a direita para ajustar o tamanho dos painéis de exibição",
 	"templates.primary-secondary.keyboardVertical": "Use a seta para cima ou para baixo para ajustar o tamanho dos painéis de exibição"

package/lang/sv.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} till",
 	"components.tag-list.show-less": "Visa färre",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "Justerbar delad vy",
 	"templates.primary-secondary.keyboardHorizontal": "Pil vänster eller höger för att justera storleken på vypaneler",
 	"templates.primary-secondary.keyboardVertical": "Pil upp eller ned för att justera storleken på vypaneler"

package/lang/tr.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "+{count} tane daha",
 	"components.tag-list.show-less": "Daha Azını Göster",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "Ayarlanabilir Bölünmüş Görüntü",
 	"templates.primary-secondary.keyboardHorizontal": "Görüntü panellerinin boyutunu ayarlamak için sol veya sağ okları kullanın",
 	"templates.primary-secondary.keyboardVertical": "Görüntü panellerinin boyutunu ayarlamak için yukarı veya aşağı okları kullanın"

package/lang/zh-cn.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} 个",
 	"components.tag-list.show-less": "显示更少",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "可调分屏视图",
 	"templates.primary-secondary.keyboardHorizontal": "向左或向右箭头可调整视图面板的大小",
 	"templates.primary-secondary.keyboardVertical": "向上或向下箭头可调整视图面板的大小"

package/lang/zh-tw.js

@@ -104,6 +104,11 @@ export default {
 	"components.tag-list.num-hidden": "還有 {count} 個",
 	"components.tag-list.show-less": "顯示更少",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
+	"components.tag-list-item.tooltip-title": "Keyboard Controls",
 	"templates.primary-secondary.adjustableSplitView": "可調整的分割檢視",
 	"templates.primary-secondary.keyboardHorizontal": "向左或向右箭頭可調整檢視面板的大小",
 	"templates.primary-secondary.keyboardVertical": "向上或向下箭頭可調整檢視面板的大小"

package/package.json

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