@brightspace-ui/labs 2.1.0 → 2.2.0

package/package.json

@@ -5,6 +5,7 @@
   "repository": "https://github.com/BrightspaceUI/labs.git",
   "exports": {
     "./components/accessibility-disability-simulator.js": "./src/components/accessibility-disability-simulator/accessibility-disability-simulator.js",
+    "./components/attribute-picker.js": "./src/components/attribute-picker/attribute-picker.js",
     "./components/checkbox-drawer.js": "./src/components/checkbox-drawer/checkbox-drawer.js",
     "./components/community-button.js": "./src/components/community/community-button.js",
     "./components/community-link.js": "./src/components/community/community-link.js",
@@ -13,7 +14,6 @@
     "./components/opt-out-flyout.js": "./src/components/opt-in-flyout/opt-out-flyout.js",
     "./components/opt-out-reason.js": "./src/components/opt-in-flyout/opt-out-reason.js",
     "./components/pager-numeric.js": "./src/components/pagination/pager-numeric.js",
-    "./components/status-icon.js": "./src/components/status-icon/status-icon.js",
     "./controllers/computed-value.js": "./src/controllers/computed-values/computed-value.js",
     "./controllers/computed-values.js": "./src/controllers/computed-values/computed-values.js",
     "./controllers/language-listener.js": "./src/controllers/language-listener/language-listener.js"
@@ -53,5 +53,5 @@
     "@brightspace-ui/core": "^3",
     "lit": "^3"
   },
-  "version": "2.1.0"
+  "version": "2.2.0"
 }

package/src/components/attribute-picker/README.md

@@ -0,0 +1,30 @@
+# d2l-labs-attribute-picker
+
+The `d2l-labs-attribute-picker` component is an autocompleting dropdown to choose one or more new or pre-existing attributes inline.
+
+## Usage
+
+```html
+<script type="module">
+    import '@brightspace-ui/labs/components/attribute-picker.js';
+</script>
+<d2l-labs-attribute-picker></d2l-labs-attribute-picker>
+```
+
+**Properties:**
+
+| Property | Type | Description |
+|--|--|--|
+| `allow-freeform` | Boolean | When enabled, the user can manually type any attribute they wish. If false, they must select from the dropdown. |
+| `attribute-list` | Array |  An array of string/value pairs representing the attributes currently selected in the picker (eg `[{"name":"shown to user","value":"sent in event"}]`). Only the values are sent in events and the string names are otherwise ignored. |
+| `assignable-attributes` | Array | An array of string/value pairs, just like `attribute-list`, available in the dropdown list |
+| `invalid-tooltip-text` | String (default: At least one attribute must be set) | The text that will appear in the tooltip that informs a user that the state is invalid |
+| `limit` | Number | The maximum length of attribute-list permitted |
+| `required` | Boolean | When true, an error state will appear if no attributes are set. Error state only appear once the user interacts with the component. |
+
+**Events:**
+
+- `d2l-labs-attribute-picker-attributes-changed`: dispatched when an attribute is added or removed from the list of selected attributes. Event `detail` includes:
+  - `attributeList`: an array of the selected attributes, in the order they were selected.
+- `d2l-labs-attribute-picker-limit-reached`: dispatched when a user attempts to add attributes once the limit is hit. Event `detail` includes:
+  - `limit`: the limit that was hit

package/src/components/attribute-picker/attribute-picker-item.js

@@ -0,0 +1,104 @@
+import '@brightspace-ui/core/components/button/button-icon.js';
+import '@brightspace-ui/core/components/colors/colors.js';
+import '@brightspace-ui/core/components/tooltip/tooltip.js';
+import { css, html, LitElement } from 'lit';
+import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+
+class AttributePickerItem extends LocalizeLabsElement(LitElement) {
+	static get properties() {
+		return {
+			deletable: { type: Boolean, reflect: true },
+			text: { type: String }
+		};
+	}
+
+	static get styles() {
+		return [bodyCompactStyles, css`
+			:host {
+				cursor: pointer;
+				display: inline-block;
+				width: max-content;
+			}
+			:host(:focus-visible) {
+				outline: none;
+			}
+			.d2l-labs-attribute-picker-item-wrapper {
+				align-items: center;
+				background-color: var(--d2l-color-sylvite);
+				border: 1px solid var(--d2l-color-gypsum);
+				border-radius: 0.3rem;
+				display: flex;
+				gap: 0.2rem;
+				padding: 0.25rem;
+				padding-inline: 0.5rem;
+				user-select: none;
+			}
+			:host([deletable]) .d2l-labs-attribute-picker-item-wrapper {
+				padding-bottom: 0.15rem;
+				padding-inline: 0.5rem 0.1rem;
+				padding-top: 0.1rem;
+			}
+			:host(:hover) .d2l-labs-attribute-picker-item-wrapper {
+				background-color: var(--d2l-color-gypsum);
+				border-color: var(--d2l-color-mica);
+				color: var(--d2l-color-ferrite);
+			}
+			:host(:focus) .d2l-labs-attribute-picker-item-wrapper {
+				background-color: var(--d2l-color-celestine);
+				border: 1px solid var(--d2l-color-celestine-minus-1);
+				color: var(--d2l-color-regolith);
+			}
+			.d2l-labs-attribute-picker-item-text {
+				-webkit-box-orient: vertical;
+				display: -webkit-box;
+				-webkit-line-clamp: 1;
+				line-height: normal;
+				max-width: 18rem;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				word-break: break-all;
+			}
+			d2l-tooltip {
+				word-break: break-word;
+			}
+			d2l-button-icon {
+				--d2l-button-icon-background-color-hover: var(--d2l-color-mica);
+				--d2l-button-icon-fill-color: var(--d2l-color-chromite);
+				--d2l-button-icon-fill-color-hover: var(--d2l-color-tungsten);
+				--d2l-button-icon-min-height: 1.2rem;
+				--d2l-button-icon-min-width: 1.2rem;
+			}
+			:host(:focus) d2l-button-icon {
+				--d2l-button-icon-background-color-hover: var(--d2l-color-celestine-plus-1);
+				--d2l-button-icon-fill-color: var(--d2l-color-mica);
+				--d2l-button-icon-fill-color-hover: var(--d2l-color-sylvite);
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.deletable = false;
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this.tabIndex = 0;
+	}
+
+	render() {
+		return html`
+			<div class="d2l-labs-attribute-picker-item-wrapper">
+				<div id="d2l-labs-attribute-picker-item-text" class="d2l-body-compact d2l-labs-attribute-picker-item-text">${this.text}</div>
+				<d2l-button-icon tabindex="-1" text="${this.localize('components:attributePicker:removeValue', 'value', this.text)}" icon="tier1:close-small" ?hidden="${!this.deletable}" @click="${this._onDeleteItem}"></d2l-button-icon>
+			</div>
+			<d2l-tooltip for="d2l-labs-attribute-picker-item-text" position="top" show-truncated-only offset="16">${this.text}</d2l-tooltip>
+		`;
+	}
+
+	_onDeleteItem() {
+		this.dispatchEvent(new CustomEvent('d2l-labs-attribute-picker-item-deleted', { bubbles: true, composed: true }));
+	}
+}
+customElements.define('d2l-labs-attribute-picker-item', AttributePickerItem);

package/src/components/attribute-picker/attribute-picker.js

@@ -0,0 +1,457 @@
+import './attribute-picker-item.js';
+import '@brightspace-ui/core/components/colors/colors.js';
+import '@brightspace-ui/core/components/tooltip/tooltip.js';
+import { css, html, LitElement } from 'lit';
+import { ArrowKeysMixin } from '@brightspace-ui/core/mixins/arrow-keys/arrow-keys-mixin.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { inputStyles } from '@brightspace-ui/core/components/inputs/input-styles.js';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+import { repeat } from 'lit/directives/repeat.js';
+const keyCodes = {
+	ENTER: 13,
+	ESCAPE: 27,
+	BACKSPACE: 8,
+	LEFT: 37,
+	RIGHT: 39,
+	UP: 38,
+	DOWN: 40,
+	DELETE: 46
+};
+
+class AttributePicker extends ArrowKeysMixin(LocalizeLabsElement(LitElement)) {
+	static get properties() {
+		return {
+			/* When true, the user can manually enter any attribute they wish. If false, they must match a value from the dropdown. */
+			allowFreeform: { type: Boolean, attribute: 'allow-freeform', reflect: true },
+
+			/* An array of strings available in the dropdown list */
+			assignableAttributes: { type: Array, attribute: 'assignable-attributes', reflect: true },
+
+			/* An array of strings representing the attributes currently selected in the picker */
+			attributeList: { type: Array, attribute: 'attribute-list', reflect: true },
+
+			/*
+				The text that will appear in the tooltip that informs a user that the state is invalid
+				The default value is: 'At least one attribute must be set'
+			*/
+			invalidTooltipText: { type: String, attribute: 'invalid-tooltip-text', reflect: true },
+
+			/* Required. The label associated with the attribute picker for screen reader users */
+			label: { type: String, reflect: true },
+
+			/* The maximum number of attributes permitted. */
+			limit: { type: Number, attribute: 'limit', reflect: true },
+
+			/* When true, an error state will appear if no attributes are set */
+			required: { type: Boolean, attribute: 'required', reflect: true },
+
+			/* Represents the index of the currently focused attribute. If no attribute is focused, equals -1 */
+			_activeAttributeIndex: { state: true },
+
+			/* Represents the index of the currently focused dropdown list item. If no item is focused, equals -1 */
+			_dropdownIndex: { state: true },
+
+			/* When true, the user currently has focus within the component */
+			_hasFocus: { state: true },
+
+			/* When true, the user has yet to lose focus for the first time, meaning the validation won't be shown until they've lost focus for the first time */
+			_initialFocus: { state: true },
+
+			/* When true, the user currently has focus within the input */
+			_inputFocused: { state: true },
+
+			/* When true, the user has reached the limit of attributes that can be added */
+			_limitReached: { state: true },
+
+			/* The inner text of the input */
+			_text: { state: true }
+		};
+	}
+
+	static get styles() {
+		return [inputStyles, css`
+			:host {
+				display: inline-block;
+				font-size: 0.8rem;
+				width: 100%;
+			}
+			:host:disabled {
+				opacity: 0.5;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			.d2l-attribute-picker-container {
+				padding: 5px;
+			}
+			.d2l-attribute-picker-container:hover,
+			.d2l-attribute-picker-container:focus-within {
+				padding: 4px;
+			}
+			.d2l-attribute-picker-container:focus-within {
+				border: 2px solid var(--d2l-color-celestine);
+			}
+			[aria-invalid="true"].d2l-attribute-picker-container:focus-within {
+				border-color: var(--d2l-color-cinnabar);
+			}
+			.d2l-attribute-picker-content {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 0.2rem;
+			}
+			.d2l-attribute-picker-attribute {
+				height: 1.55rem;
+			}
+			.d2l-attribute-picker-attribute:focus-visible {
+				outline: none;
+			}
+			.d2l-attribute-picker-input {
+				background: transparent;
+				border: none;
+				box-shadow: none;
+				box-sizing: border-box;
+				flex-grow: 1;
+				min-height: 1.55rem;
+				outline: none;
+				padding: 0 !important;
+				width: 4rem;
+			}
+			.d2l-attribute-list {
+				background-color: white;
+				border: 1px solid var(--d2l-color-gypsum);
+				border-radius: 0.3rem;
+				max-height: 7.8rem;
+				overflow-y: auto;
+				padding-left: 0;
+				text-overflow: ellipsis;
+			}
+			.d2l-attribute-picker-li {
+				cursor: pointer;
+				margin: 0;
+				padding: 0.4rem 6rem 0.4rem 0.6rem;
+			}
+			.d2l-attribute-picker-li[aria-selected="true"] {
+				background-color: var(--d2l-color-celestine-plus-2);
+				color: var(--d2l-color-celestine);
+			}
+			.d2l-attribute-picker-absolute-container {
+				margin: 0 0.3rem 0 -0.3rem;
+				position: absolute;
+				width: 100%;
+				z-index: 1;
+			}
+			.d2l-input-text-invalid-icon {
+				background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0wIDBoMjJ2MjJIMHoiLz4KICAgIDxwYXRoIGQ9Ik0xOC44NjQgMTYuNDdMMTIuNjIzIDMuOTg5YTEuNzgzIDEuNzgzIDAgMDAtMy4xOTIgMEwzLjE4OSAxNi40N2ExLjc2MSAxLjc2MSAwIDAwLjA4IDEuNzNjLjMyNS41MjUuODk4Ljc5OCAxLjUxNi43OTloMTIuNDgzYy42MTggMCAxLjE5Mi0uMjczIDEuNTE2LS44LjIzNy0uMzM1LjI2NS0xLjM3LjA4LTEuNzN6IiBmaWxsPSIjQ0QyMDI2IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgIDxwYXRoIGQ9Ik0xMS4wMjcgMTcuMjY0YTEuMzM3IDEuMzM3IDAgMTEwLTIuNjc1IDEuMzM3IDEuMzM3IDAgMDEwIDIuNjc1ek0xMS45IDEyLjk4YS44OTIuODkyIDAgMDEtMS43NDcgMEw5LjI3IDguNTJhLjg5Mi44OTIgMCAwMS44NzQtMS4wNjRoMS43NjhhLjg5Mi44OTIgMCAwMS44NzQgMS4wNjVsLS44ODYgNC40NTh6IiBmaWxsPSIjRkZGIi8+CiAgPC9nPgo8L3N2Zz4K");
+				display: flex;
+				height: 22px;
+				inset-inline-end: 8px;
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				width: 22px;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.attributeList = [];
+		this.assignableAttributes = [];
+		this._text = '';
+		this._activeAttributeIndex = -1;
+		this._dropdownIndex = -1;
+		this._initialFocus = true;
+		this.arrowKeysNoWrap = true;
+		this.arrowKeysDirection = 'leftrightupdown';
+		this._inputFocused = false;
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this.addEventListener('focusin', this._onFocusIn);
+		this.addEventListener('focusout', this._onFocusOut);
+	}
+
+	render() {
+		const comparableText = this._text.trim().toLowerCase();
+		const availableAttributes = this.assignableAttributes.filter(x => this.attributeList.every(a => a.name !== x.name) && (comparableText === '' || x.name?.toLowerCase().includes(comparableText)));
+
+		const isValid = this._initialFocus || !this.required || this.attributeList.length;
+		const ariaInvalid = !isValid ? true : undefined;
+		const ariaRequired = this.required ? true : undefined;
+
+		return html`
+			<div role="application" id="d2l-attribute-picker-container" aria-label="${this.label}" class="d2l-attribute-picker-container d2l-input" aria-invalid="${ifDefined(ariaInvalid)}">
+				${this.arrowKeysContainer(html`
+					<div class="d2l-attribute-picker-content" role="${this.attributeList.length > 0 ? 'list' : ''}">
+						${repeat(this.attributeList, (item) => item.value, (item, index) => html`
+							<d2l-labs-attribute-picker-item class="d2l-attribute-picker-attribute d2l-arrowkeys-focusable"
+								role="listitem"
+								text="${item.name}"
+								.index="${index}"
+								?deletable="${this._hasFocus}"
+								@d2l-labs-attribute-picker-item-deleted="${this._onAttributeRemoved}"
+								@focus="${this._onAttributeFocus}"
+								@keydown="${this._onAttributeKeydown}">
+							</d2l-labs-attribute-picker-item>
+						`)}
+
+						<input class="d2l-attribute-picker-input d2l-arrowkeys-focusable"
+							role="combobox"
+							aria-activedescendant="${this._dropdownIndex > -1 ? `attribute-dropdown-list-item-${this._dropdownIndex}` : ''}"
+							aria-autocomplete="list"
+							aria-expanded="${this._inputFocused}"
+							aria-haspopup="true"
+							aria-invalid="${ifDefined(ariaInvalid)}"
+							aria-label="${this.label}"
+							aria-owns="attribute-dropdown-list"
+							aria-required=${ifDefined(ariaRequired)}
+							enterkeyhint="enter"
+							@blur="${this._onInputBlur}"
+							@focus="${this._onInputFocus}"
+							@keydown="${this._onInputKeydown}"
+							@input="${this._onInputTextChanged}"
+							type="text"
+							.value="${this._text}">
+
+						${(!isValid && !this._inputFocused) ? html`<div class="d2l-input-text-invalid-icon" @click="${this._handleInvalidIconClick}"></div>` : null}
+					</div>
+				`)}
+
+				<div class="d2l-attribute-picker-absolute-container">
+					<ul class="d2l-attribute-list"
+						role="listbox"
+						id="attribute-dropdown-list"
+						?hidden="${!this._inputFocused || !availableAttributes.length}">
+
+						${repeat(availableAttributes, (item) => item.name, (item, listIndex) => html`
+							<li id="attribute-dropdown-list-item-${listIndex}"
+								class="d2l-attribute-picker-li"
+								role="option"
+								aria-label="${this.localize('components:attributePicker:addValue', 'value', item.name)}"
+								aria-selected="${this._dropdownIndex === listIndex}"
+								.text="${item}"
+								.index=${listIndex}
+								@mousemove="${this._onListItemMouseMove}"
+								@mousedown="${this._onListItemTapped}">
+								${item.name}
+							</li>
+						`)}
+					</ul>
+				</div>
+			</div>
+
+			${!isValid ? html`
+				<d2l-tooltip for="d2l-attribute-picker-container" state="error" announced position="top" ?force-show=${this._inputFocused}>${this.invalidTooltipText || this.localize('components:attributePicker:minimumRequirement')}</d2l-tooltip>
+			` : null}
+
+			${this.limit && this._limitReached ? html`
+				<d2l-tooltip for="d2l-attribute-picker-container" position="top" ?force-show=${this._inputFocused}>${this.localize('components:attributePicker:limitReached', { value: this.limit })}</d2l-tooltip>
+			` : null}
+		`;
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has('_activeAttributeIndex')) {
+			const selectedAttributes = this.shadowRoot.querySelectorAll('.d2l-attribute-picker-attribute');
+			if (this._activeAttributeIndex >= 0 && this._activeAttributeIndex < selectedAttributes.length) {
+				selectedAttributes[this._activeAttributeIndex].focus();
+			}
+		}
+
+		if (changedProperties.has('assignableAttributes')) {
+			this._dropdownIndex = -1;
+		}
+	}
+
+	// Returns true or false depending on if the attribute was successfully added. Fires the d2l-attribute-limit-reached event, if necessary.
+	async addAttribute(newAttribute) {
+		if (!newAttribute || this.attributeList.findIndex(attribute => attribute.name === newAttribute.name) >= 0) return false;
+
+		this._limitReached = this.limit && this.attributeList.length >= this.limit;
+		if (this._limitReached) {
+			this.dispatchEvent(new CustomEvent('d2l-labs-attribute-picker-limit-reached', {
+				bubbles: true, composed: true, detail: { limit: this.limit }
+			}));
+			return false;
+		}
+
+		this.attributeList = [...this.attributeList, newAttribute];
+		this._text = '';
+
+		// Wait until we can get the full list of available list items after clearing the text
+		await this.updateComplete;
+		const list = this.shadowRoot.querySelectorAll('li');
+
+		// If we removed the final index of the list, move our index back to compensate
+		if (this._dropdownIndex > -1 && this._dropdownIndex > list.length - 1) {
+			this._dropdownIndex --;
+		}
+
+		this._dispatchAttributeChangedEvent();
+		return true;
+	}
+
+	clearText() {
+		this._text = '';
+	}
+
+	_dispatchAttributeChangedEvent() {
+		this.dispatchEvent(new CustomEvent('d2l-labs-attribute-picker-attributes-changed', {
+			bubbles: true, composed: true, detail: { attributeList: this.attributeList }
+		}));
+	}
+
+	_focusAttribute(index) {
+		index = Math.min(index, this.attributeList.length - 1);
+		const selectedAttributes = this.shadowRoot.querySelectorAll('d2l-labs-attribute-picker-item');
+		if (selectedAttributes.length === 0) {
+			this.shadowRoot.querySelector('.d2l-attribute-picker-input').focus();
+		} else {
+			this._activeAttributeIndex = index;
+			selectedAttributes[index].focus();
+		}
+	}
+
+	_handleInvalidIconClick() {
+		const input = this.shadowRoot.querySelector('input');
+		if (!input) return;
+		this._inputFocused = true;
+		input.focus();
+	}
+
+	_onAttributeFocus(e) {
+		this._activeAttributeIndex = e.target.index;
+	}
+
+	async _onAttributeKeydown(e) {
+		if (e.keyCode === keyCodes.BACKSPACE || e.keyCode === keyCodes.DELETE) {
+			await this._removeAttribute(this._activeAttributeIndex);
+			if ((e.keyCode === keyCodes.BACKSPACE && this._activeAttributeIndex > 0)) {
+				this._activeAttributeIndex--;
+			}
+			this._focusAttribute(this._activeAttributeIndex);
+		}
+		if ((e.keyCode === keyCodes.DOWN || e.keyCode === keyCodes.RIGHT) && this._activeAttributeIndex === this.attributeList.length - 1) {
+			this.shadowRoot.querySelector('.d2l-attribute-picker-input').focus();
+		}
+	}
+
+	async _onAttributeRemoved(e) {
+		const index = e.target.index;
+		if (index !== -1) {
+			await this._removeAttribute(index);
+			this._focusAttribute(index);
+			this._activeAttributeIndex = Math.min(index, this.attributeList.length - 1);
+		}
+	}
+
+	_onFocusIn() {
+		this._hasFocus = true;
+	}
+
+	_onFocusOut() {
+		this._hasFocus = false;
+	}
+
+	_onInputBlur() {
+		this._inputFocused = false;
+		this._initialFocus = false;
+	}
+
+	_onInputFocus() {
+		this._inputFocused = true;
+		this._dropdownIndex = this.shadowRoot.querySelector('li') && !this.allowFreeform ? 0 : -1;
+	}
+
+	async _onInputKeydown(e) {
+		if (this.shadowRoot.querySelector('.d2l-attribute-picker-input').selectionStart !== 0 || e.keyCode === keyCodes.RIGHT || e.keyCode === keyCodes.UP || e.keyCode === keyCodes.DOWN) {
+			e.stopPropagation();
+
+		}
+		switch (e.keyCode) {
+			case keyCodes.ESCAPE: {
+				if (this.allowFreeform) { // Unselect any dropdown item so enter will apply to just the typed text instead
+					this._dropdownIndex = -1;
+				}
+				break;
+			}
+			case keyCodes.BACKSPACE: {
+				if (this.shadowRoot.querySelector('.d2l-attribute-picker-input').selectionStart === 0 && this.attributeList.length > 0) {
+					e.stopPropagation();
+					this._focusAttribute(this.attributeList.length - 1);
+				}
+				break;
+			}
+			case keyCodes.UP: {
+				const assignableCount = this.shadowRoot.querySelectorAll('li').length;
+				if (this._dropdownIndex === -1 || this._dropdownIndex === 0) {
+					this._dropdownIndex = assignableCount - 1;
+				} else {
+					this._dropdownIndex = (this._dropdownIndex - 1) % assignableCount;
+				}
+				await this._updateDropdownFocus();
+				break;
+			}
+			case keyCodes.DOWN: {
+				const assignableCount = this.shadowRoot.querySelectorAll('li').length;
+				this._dropdownIndex = (this._dropdownIndex + 1) % assignableCount;
+				await this._updateDropdownFocus();
+				break;
+			}
+			case keyCodes.ENTER: {
+				const list = this.shadowRoot.querySelectorAll('li');
+				if (this._dropdownIndex !== -1 && this._dropdownIndex < list.length) {
+					await this.addAttribute(list[this._dropdownIndex].text);
+				} else if (this.allowFreeform) {
+					const trimmedAttribute = this._text.trim();
+					if (trimmedAttribute.length === 0) return;
+
+					const comparableAttribute = trimmedAttribute.toLowerCase();
+					if (this.attributeList.map(a => a.name.toLowerCase()).includes(comparableAttribute)) return;
+
+					const matchedIndex = this.assignableAttributes.findIndex(a => a.name.toLowerCase() === comparableAttribute);
+					await this.addAttribute(matchedIndex >= 0 ? this.assignableAttributes[matchedIndex] : {
+						name: trimmedAttribute,
+						value: trimmedAttribute
+					});
+				}
+				await this._updateDropdownFocus();
+				break;
+			}
+		}
+	}
+
+	_onInputTextChanged(e) {
+		this._text = e.target.value;
+		if (this._dropdownIndex >= 0) {
+			this.allowFreeform ? this._dropdownIndex = -1 : this._dropdownIndex = 0;
+		}
+	}
+
+	_onListItemMouseMove(e) {
+		this._dropdownIndex = e.target.index;
+	}
+
+	async _onListItemTapped(e) {
+		await this.addAttribute(e.target.text);
+		e.preventDefault();
+	}
+
+	async _removeAttribute(index) {
+		this.attributeList = this.attributeList.slice(0, index).concat(this.attributeList.slice(index + 1, this.attributeList.length));
+		this._dispatchAttributeChangedEvent();
+		this._limitReached = this.limit && this.attributeList.length >= this.limit;
+		await this.updateComplete;
+	}
+
+	async _updateDropdownFocus() {
+		await this.updateComplete;
+		const items = this.shadowRoot.querySelectorAll('li');
+		if (items.length > 0 && this._dropdownIndex >= 0) {
+			items[this._dropdownIndex].scrollIntoView({ block: 'nearest' });
+		}
+	}
+}
+customElements.define('d2l-labs-attribute-picker', AttributePicker);

package/src/lang/ar.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "لا شيء", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "تمكين قارئ الشاشة وعلامة التبويب في المحتوى", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "نوع المحاكاة:", // Label for the disability simulation options
+	"components:attributePicker:addValue": "انقر لإضافة القيمة {value}", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "لقد بلغت الحد {value} من القيم المحددة", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "يجب تعيين قيمة واحدة على الأقل.", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "انقر فوق، أو اضغط على مسافة للخلف، أو اضغط على مفتاح حذف لإزالة العنصر {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "تم طي خانة الاختيار", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "تم توسيع خانة الاختيار", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "إلغاء",

package/src/lang/cy.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "Dim", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Galluogwch eich darllenydd sgrîn a thab i'r cynnwys", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "Math o efelychiad:", // Label for the disability simulation options
+	"components:attributePicker:addValue": "Cliciwch i ychwanegu'r gwerth {value}", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "Rydych chi wedi cyrraedd terfyn y gwerthoedd a ddewiswyd {value}", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "Rhaid gosod o leiaf un gwerth", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "Cliciwch, pwyswch yn ôl, neu pwyswch y bysell dileu i dynnu’r eitem {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Wedi crebachu blwch ticio", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Wedi ehangu blwch ticio", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Canslo",

package/src/lang/da.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "Ingen", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Aktivér din skærmlæser og fane i indholdet", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "Simulationstype:", // Label for the disability simulation options
+	"components:attributePicker:addValue": "Klik for at tilføje værdi {value}", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "Du har nået grænsen på {value} valgte værdier", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "Der skal angives mindst én værdi", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "Klik, tryk på tilbagetasten, eller tryk på slettasten for at fjerne element {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Afkrydsningsfelt skjult", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Afkrydsningsfelt udvidet", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Annuller",

package/src/lang/de.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "Keine", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Aktivieren Sie Ihre Bildschirmsprachausgabe und tippen Sie den Inhalt an", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "Simulationstyp:", // Label for the disability simulation options
+	"components:attributePicker:addValue": "Klicken Sie, um den Wert {value} hinzuzufügen", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "Sie haben das Limit von {value} ausgewählten Werten erreicht.", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "Mindestens ein Wert muss festgelegt werden", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "Klicken Sie, drücken Sie die Rücktaste, oder drücken Sie die Entfernen-Taste, um das Element {value} zu entfernen", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Kontrollkästchen ausgeblendet", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Kontrollkästchen eingeblendet", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Abbrechen",

package/src/lang/en-gb.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "None", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Enable your screenreader and tab into the content", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "Simulation type:", // Label for the disability simulation options
+	"components:attributePicker:addValue": "Click to add value {value}", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "You've reached the limit of {value} selected values", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "At least one value must be set", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "Click, press backspace, or press delete key to remove item {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Tick box collapsed", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Tick box expanded", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Cancel",

package/src/lang/en.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "None", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Enable your screenreader and tab into the content", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "Simulation type:", // Label for the disability simulation options
+	"components:attributePicker:addValue": "Click to add value {value}", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "You've reached the limit of {value} selected values", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "At least one value must be set", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "Click, press backspace, or press delete key to remove item {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Checkbox collapsed", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Checkbox expanded", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Cancel",

package/src/lang/es-es.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "Ninguno", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Habilite el lector de pantalla y desplácese con el tabulador por el contenido.", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "Tipo de simulación:", // Label for the disability simulation options
+	"components:attributePicker:addValue": "Haga clic para agregar el valor {value}", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "Ha alcanzado el límite de {value} valores seleccionados", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "Se debe establecer al menos un valor.", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "Haga clic, pulse Retroceso o pulse la tecla Supr para eliminar el elemento {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Casilla de verificación contraída", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Casilla de verificación expandida", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Cancelar",

package/src/lang/es.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "Ninguno", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Habilite su lector de pantalla y tableta en el contenido", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "Tipo de simulación:", // Label for the disability simulation options
+	"components:attributePicker:addValue": "Haga clic para agregar el valor {value}", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "Alcanzó el límite de {value} valores seleccionados", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "Se debe definir al menos un valor", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "Haga clic, presione Retroceso o presione la tecla Suprimir para eliminar el elemento {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Casilla de selección contraída", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Casilla de selección expandida", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Cancelar",

package/src/lang/fr-fr.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "Aucune", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Activez votre lecteur d’écran et parcourez le contenu", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "Type de simulation :", // Label for the disability simulation options
+	"components:attributePicker:addValue": "Cliquer pour ajouter la valeur {value}", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "Vous avez atteint la limite de {value} valeurs sélectionnées", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "Au moins une valeur doit être définie", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "Cliquez sur l’élément, appuyez sur la touche Retour arrière ou sur la touche Suppr pour supprimer l’élément {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Case à cocher réduite", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Case à cocher développée", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Annuler",

package/src/lang/fr-on.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "Aucun", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Activez votre lecteur d'écran et utilisez la touche de tabulation pour parcourir le contenu", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "Type de simulation :", // Label for the disability simulation options
+	"components:attributePicker:addValue": "Cliquer pour ajouter la valeur {value}", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "Vous avez atteint la limite de {value} valeurs sélectionnées", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "Au moins une valeur doit être définit", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "Cliquez sur le bouton, appuyez sur retour arrière ou appuyez sur la touche de suppression pour supprimer l’élément {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Case à cocher réduite", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Case à cocher agrandie", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Annuler",

package/src/lang/fr.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "Aucun", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Activez votre lecteur d'écran et utilisez la touche de tabulation pour parcourir le contenu", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "Type de simulation :", // Label for the disability simulation options
+	"components:attributePicker:addValue": "Cliquer pour ajouter la valeur {value}", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "Vous avez atteint la limite de {value} valeurs sélectionnées", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "Au moins une valeur doit être définit", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "Cliquez sur le bouton, appuyez sur retour arrière ou appuyez sur la touche de suppression pour supprimer l’élément {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Case à cocher réduite", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Case à cocher agrandie", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Annuler",

package/src/lang/hi.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "कोई नहीं", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "सामग्री में अपना स्क्रीनरीडर और टैब चालू करें", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "सिम्युलेशन प्रकार:", // Label for the disability simulation options
+	"components:attributePicker:addValue": "मान {value} जोड़ने के लिए क्लिक करें", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "आप {value} चयनित मानों की सीमा तक पहुँच गए हैं", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "कम से कम एक मान सेट होना चाहिए", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "{value} को हटाने के लिए क्लिक करें, बैकस्पेस दबाएँ, या हटाएँ कुंजी को दबाएँ", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "चेकबॉक्स छोटा हो गया", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "चेकबॉक्स बड़ा हो गया", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "कैंसल करें",

package/src/lang/ja.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "なし", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "スクリーンリーダーを有効にして、コンテンツを利用します", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "シミュレーションタイプ: ", // Label for the disability simulation options
+	"components:attributePicker:addValue": "クリックして値 {value} を追加", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "{value} 個の選択した値の上限に達しました", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "少なくとも 1 つの値を設定する必要があります", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "クリックする、Backspace キーを押す、または Delete キーを押すと項目 {value} が削除されます", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "折りたたまれたチェックボックス", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "展開されたチェックボックス", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "キャンセル",

package/src/lang/ko.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "없음", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "스크린 리더를 활성화하고 콘텐츠를 탭합니다", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "시뮬레이션 유형:", // Label for the disability simulation options
+	"components:attributePicker:addValue": "클릭하여 값 {value}을(를) 추가합니다.", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "{value} 선택한 값의 제한에 도달했습니다.", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "하나 이상의 값을 설정해야 합니다.", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "항목 {value}을(를) 제거하려면 클릭하거나, 백스페이스 또는 삭제 키를 누릅니다.", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "확인란이 축소됨", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "확인란이 확장됨", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "취소",

package/src/lang/nl.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "Geen", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Schakel uw schermlezer in en druk op tab om naar de inhoud te gaan", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "Simulatietype:", // Label for the disability simulation options
+	"components:attributePicker:addValue": "Klik om waarde {value} toe te voegen", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "U hebt de limiet van {value} geselecteerde waarden bereikt", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "Er moet ten minste één waarde worden ingesteld", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "Klik, druk op Backspace of druk op de Delete-toets om item {value} te verwijderen", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Selectievakje samengevouwen", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Selectievakje uitgevouwen", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Annuleren",

package/src/lang/pt.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "Nenhuma", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Ative seu leitor de tela e insira o conteúdo", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "Tipo de simulação:", // Label for the disability simulation options
+	"components:attributePicker:addValue": "Clique para adicionar valor {value}", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "Você atingiu o limite de {value} valores selecionados", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "Pelo menos um valor deve ser definido", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "Clique em, pressione Backspace ou pressione a tecla Delete para remover o item {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Caixa de seleção recolhida", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Caixa de seleção expandida", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Cancelar",

package/src/lang/sv.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "Inga", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Aktivera skärmläsaren och använd Tabb till att förflytta dig i innehållet", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "Simuleringstyp:", // Label for the disability simulation options
+	"components:attributePicker:addValue": "Klicka för att lägga till värde {value}", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "Du har nått gränsen på {value} valda värden", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "Minst ett värde måste anges", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "Klicka, tryck på backstegstangenten eller Delete-tangenten för att ta bort objektet {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Komprimerad kryssruta", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Expanderad kryssruta", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Avbryt",

package/src/lang/tr.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "Yok", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Ekran okuyucunuzu etkinleştirin ve içeriğe erişin", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "Simülasyon türü:", // Label for the disability simulation options
+	"components:attributePicker:addValue": "{value} değeri eklemek için tıklayın", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "{value} seçili değer sınırına ulaştınız", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "En az bir değer ayarlanmalıdır", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "Öğe {value} değerini kaldırmak için tıklatın, geri al tuşuna veya sil tuşuna basın", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "Onay kutusu daraltıldı", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Onay kutusu genişletildi", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "İptal et",

package/src/lang/zh-cn.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "无", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "启用屏幕阅读器并按 Tab 键进入内容", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "模拟类型：", // Label for the disability simulation options
+	"components:attributePicker:addValue": "单击以添加值 {value}", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "您已达到所选值 {value} 的限制", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "必须设置至少一个值", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "单击、按退格键或按 Delete 键以移除项目 {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "复选框已折叠", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "复选框已展开", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "取消",

package/src/lang/zh-tw.js

@@ -11,6 +11,10 @@ export default {
 	"components:accessibilityDisabilitySimulator:none": "無", // Disability simulation option that represents having no disability
 	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "啟用畫面閱讀程式並使用 Tab 鍵進入內容", // Alert that prompts the user to use a screenreader and tabbing to view content
 	"components:accessibilityDisabilitySimulator:simulationType": "模擬類型：", // Label for the disability simulation options
+	"components:attributePicker:addValue": "按一下以新增值 {value}", // Label for screen readers to inform user that they can click to add the given value
+	"components:attributePicker:limitReached": "您已達到 {value} 個選取值的限制", //  Tooltip that appears when the user has reach the maximum amount of attributes
+	"components:attributePicker:minimumRequirement": "至少必須設定一個值", // Tooltip that appears when no values have been set and we need to inform the user that this is an invalid state
+	"components:attributePicker:removeValue": "按一下、按下退格鍵或按下刪除鍵以移除項目 {value}", // Label to inform user how they can remove the given value
 	"components:checkboxDrawer:checkboxCollapsed": "核取方塊已摺疊", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "核取方塊已展開", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "取消",

package/src/components/status-icon/README.md

@@ -1,21 +0,0 @@
-# d2l-labs-status-icon
-
-Displays an icon as well as optional text to show the state/status of some feature or tool
-
-## Usage
-
-```html
-<script type="module">
-    import '@brightspace-ui-labs/status-icon/status-icon.js';
-</script>
-<d2l-labs-status-icon state="failure" message="Failure"></d2l-labs-status-icon>
-```
-
-![Status Icons preview](./StatusIconPreview.PNG)
-
-**Properties:**
-
-| Property | Type | Description |
-|--|--|--|
-| `message` | String | Message to be displayed |
-| `state` | String, default: `'failure'` | State of the status. Can be one of  `failure`, `warning`, `success`. |

package/src/components/status-icon/status-icon.js

@@ -1,67 +0,0 @@
-import '@brightspace-ui/core/components/colors/colors.js';
-import '@brightspace-ui/core/components/icons/icon.js';
-import { css, html, LitElement } from 'lit';
-import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
-
-function getIcon(state) {
-	switch (state) {
-		case 'success':
-			return 'tier1:check-circle';
-		case 'warning':
-			return 'tier1:alert';
-		default:
-			return 'tier1:close-circle';
-	}
-}
-
-class StatusIcon extends RtlMixin(LitElement) {
-
-	static get properties() {
-		return {
-			state: { type: String, reflect: true },
-			message: { type: String, reflect: true }
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				align-items: center;
-				display: inline-flex;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			:host,
-			d2l-icon {
-				color: var(--d2l-color-cinnabar);
-			}
-			:host([state="warning"]),
-			:host([state="warning"]) d2l-icon {
-				color: var(--d2l-color-citrine);
-			}
-			:host([state="success"]),
-			:host([state="success"]) d2l-icon {
-				color: var(--d2l-color-olivine);
-			}
-			span {
-				margin-inline-start: 0.4em;
-			}
-		`;
-	}
-
-	constructor() {
-		super();
-		this.state = 'failure';
-	}
-
-	render() {
-		const icon = getIcon(this.state);
-		return html`
-			<d2l-icon icon="${icon}"></d2l-icon>
-			<span>${this.message} </span>
-		`;
-	}
-
-}
-customElements.define('d2l-labs-status-icon', StatusIcon);