@brightspace-ui/core 2.16.1 → 2.17.0

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/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.1",
+  "version": "2.17.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",