@brightspace-ui/core 2.171.3 → 2.172.1

package/components/button/button-add.js

@@ -38,9 +38,13 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 	static get styles() {
 		return css`
 			:host {
-				--d2l-button-add-animation-delay: 50ms;
+				--d2l-button-add-animation-delay: 0ms;
 				--d2l-button-add-animation-duration: 200ms;
 				--d2l-button-add-hover-focus-color: var(--d2l-color-celestine-minus-1);
+				--d2l-button-add-line-color: var(--d2l-color-mica);
+			}
+			:host([mode="icon-when-interacted"]) {
+				--d2l-button-add-animation-delay: 50ms;
 			}
 			button {
 				align-items: center;
@@ -54,13 +58,18 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 				justify-content: center;
 				outline: none;
 				padding: 0;
+				position: relative;
 				user-select: none;
 				white-space: nowrap;
 				width: 100%;
+				z-index: 1; /* needed for button-add to have expected hover behaviour in list (hover from below, tooltip position) */
+			}
+			:host([mode="icon-when-interacted"]) button {
+				height: 7px;
 			}
 
 			.line {
-				background: var(--d2l-color-mica);
+				background: var(--d2l-button-add-line-color);
 				height: 1px;
 				margin: 3px 0;
 				width: 100%;
@@ -93,11 +102,12 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 
 			button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
 				border-radius: 0.3rem;
-				box-shadow: 0 0 0 3px var(--d2l-button-add-hover-focus-color);
+				box-shadow: 0 0 0 2px var(--d2l-button-add-hover-focus-color);
 			}
 			:host([mode="icon-when-interacted"]) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text,
 			:host([mode="icon"]) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
-				padding: 0.1rem;
+				border-radius: 0.2rem;
+				padding: 0.15rem;
 			}
 
 			@media (prefers-reduced-motion: no-preference) {
@@ -117,9 +127,6 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 				:host([dir="rtl"]) button:focus .line-start {
 					animation-name: line-end-animation;
 				}
-				button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
-					transition: all var(--d2l-button-add-animation-duration) ease-in;
-				}
 
 				@keyframes line-start-animation {
 					0% {
@@ -151,8 +158,6 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 		this.mode = MODE.ICON;
 
 		this._buttonId = getUniqueId();
-		this._hasFocus = false;
-		this._hasHover = false;
 	}
 
 	static get focusElementSelector() {
@@ -162,12 +167,13 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 	render() {
 		const text = this.text || this.localize('components.button-add.addItem');
 		const id = !this.mode !== MODE.ICON_AND_TEXT ? this._buttonId : undefined;
+		const offset = this.mode === MODE.ICON_WHEN_INTERACTED ? 23 : 18;
 
 		const content = this.mode !== MODE.ICON_AND_TEXT
 			? html`<d2l-button-add-icon-text ?visible-on-ancestor="${this.mode === MODE.ICON_WHEN_INTERACTED}" animation-type="opacity"></d2l-button-add-icon-text>`
 			: html`<d2l-button-add-icon-text text="${text}"></d2l-button-add-icon-text>`;
 		const tooltip = this.mode !== MODE.ICON_AND_TEXT
-			? html`<d2l-tooltip class="vdiff-target" delay="100" offset="18" for="${this._buttonId}" for-type="label">${text}</d2l-tooltip>`
+			? html`<d2l-tooltip class="vdiff-target" delay="100" offset="${offset}" for="${this._buttonId}" for-type="label">${text}</d2l-tooltip>`
 			: nothing;
 
 		return html`
@@ -217,8 +223,8 @@ class ButtonAddIconText extends VisibleOnAncestorMixin(LitElement) {
 				padding-inline-end: 0.2rem;
 			}
 			:host(:not([text])) svg {
-				margin: -0.3rem; /** hover/click target */
-				padding: 0.3rem; /** hover/click target */
+				margin: -0.15rem; /** hover/click target */
+				padding: 0.15rem; /** hover/click target */
 			}
 
 			span {

package/components/dropdown/dropdown-menu.js

@@ -171,6 +171,7 @@ class DropdownMenu extends ThemeMixin(DropdownContentMixin(LitElement)) {
 			return;
 		}
 		this._initializingHeight = true;
+		this._closeRadio = false;
 
 		const menu = this.__getMenuElement();
 

package/components/list/demo/demo-list.js

@@ -16,6 +16,7 @@ import '../list-item.js';
 import '../list.js';
 import { css, html, LitElement } from 'lit';
 import { getUniqueId } from '../../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 const items = [{
@@ -116,6 +117,7 @@ class DemoList extends LitElement {
 
 	static get properties() {
 		return {
+			addButton: { type: Boolean, attribute: 'add-button' },
 			grid: { type: Boolean },
 			extendSeparators: { type: Boolean, attribute: 'extend-separators' },
 			_lastItemLoadedIndex: { state: true }
@@ -148,8 +150,14 @@ class DemoList extends LitElement {
 	render() {
 		const loadedItems = this.items.slice(0, this._lastItemLoadedIndex + 1);
 		const remainingItemCount = this.items.length - loadedItems.length;
+		const addButtonText = this.addButton ? 'Add New Item' : undefined;
 		return html`
-			<d2l-list ?grid="${this.grid}" item-count="${this.items.length}" ?extend-separators="${this.extendSeparators}">
+			<d2l-list
+				?grid="${this.grid}"
+				item-count="${this.items.length}"
+				?extend-separators="${this.extendSeparators}"
+				?add-button="${this.addButton}"
+				add-button-text="${ifDefined(addButtonText)}">
 				<d2l-list-controls slot="controls" select-all-pages-allowed>
 					<d2l-selection-action icon="tier1:plus-default" text="Add" @d2l-selection-action-click="${this._handleAddItem}"></d2l-selection-action>
 					<d2l-selection-action-dropdown text="Move To" requires-selection>

package/components/list/demo/list-drag-and-drop-position.js

@@ -9,6 +9,7 @@ class ListDemoDragAndDropPosition extends LitElement {
 
 	static get properties() {
 		return {
+			addButton: { type: Boolean, attribute: 'add-button' },
 			list: { type: Array },
 			// below are for demonstration only
 			grid: { type: Boolean },
@@ -66,8 +67,13 @@ class ListDemoDragAndDropPosition extends LitElement {
 	}
 
 	render() {
+		const addButtonText = this.addButton ? 'Add New Item' : undefined;
 		return html`
-			<d2l-list ?grid="${this.grid}" @d2l-list-item-position-change="${this._moveItems}">
+			<d2l-list
+				?grid="${this.grid}"
+				@d2l-list-item-position-change="${this._moveItems}"
+				?add-button="${this.addButton}"
+				add-button-text="${ifDefined(addButtonText)}">
 				${repeat(this.list, (item) => item.key, (item) => html`
 					<d2l-list-item
 						key="${ifDefined(item.key)}"

package/components/list/demo/list-drag-and-drop.html

@@ -22,6 +22,14 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Add Button</h2>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-drag-and-drop-position add-button selectable></d2l-demo-list-drag-and-drop-position>
+			</template>
+		</d2l-demo-snippet>
+
 		<h2>Move Event</h2>
 
 		<d2l-demo-snippet>

package/components/list/demo/list-item-actions.html

@@ -24,11 +24,11 @@
 
 		<d2l-demo-page page-title="d2l-list-item (actions)">
 
-			<h2>No Action</h2>
+			<h2>No Action, Add Button</h2>
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-list>
+					<d2l-list add-button>
 						<d2l-list-item>
 							<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
 						</d2l-list-item>
@@ -46,7 +46,7 @@
 
 			<d2l-demo-snippet id="link-demo">
 				<template>
-					<d2l-list>
+					<d2l-list add-button>
 						<d2l-list>
 							<d2l-list-item href="http://www.d2l.com">
 								<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>

package/components/list/demo/list.html

@@ -37,7 +37,7 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-list>
+					<d2l-list add-button>
 						<d2l-list-item>
 							<d2l-list-item-content>
 								<div>Identify categories of physical activities</div>
@@ -79,6 +79,22 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>List with add button</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-list add-button></d2l-demo-list>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>List with add button, grid, extended separators</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-list add-button grid extend-separators></d2l-demo-list>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>List with Interactive Content</h2>
 
 			<d2l-demo-snippet>

package/components/list/list-controls.js

@@ -52,6 +52,10 @@ export class ListControls extends SelectionControls {
 		if (this._extendSeparator) this.style.setProperty('--d2l-selection-controls-padding', '0px');
 	}
 
+	updateParentHasAddButon() {
+		// N/A
+	}
+
 	updateSiblingHasChildren() {
 		// TODO: implement this in order to have consistent spacing when nested items
 	}

package/components/list/list-item-drag-drop-mixin.js

@@ -542,6 +542,8 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			this._dispatchListItemsMove(dragState.dragTargets, dragState.dropTarget, dragState.dropLocation, false);
 
 		}
+		const nodeImage = this.shadowRoot.querySelector('.d2l-list-item-drag-image') || this;
+		if (nodeImage) nodeImage.classList.remove('dragging');
 
 		clearDragState();
 	}
@@ -632,6 +634,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		} else {
 			if (this.shadowRoot) {
 				const nodeImage = this.shadowRoot.querySelector('.d2l-list-item-drag-image') || this;
+				nodeImage.classList.add('dragging');
 				e.dataTransfer.setDragImage(nodeImage, 50, 50);
 			}
 		}

package/components/list/list-item-generic-layout.js

@@ -69,7 +69,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 					[control-end content-start] minmax(0, auto)
 					[content-end actions-start] minmax(0, min-content)
 					[end actions-end];
-				grid-template-rows: [main-start] [main-end nested-start] [nested-end];
+				grid-template-rows: [main-start] [main-end add-start] [add-end nested-start] [nested-end];
 			}
 
 			:host([align-nested="control"]) ::slotted([slot="nested"]) {
@@ -171,6 +171,10 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-column: content-start / end;
 				grid-row: nested-start / nested-end;
 			}
+			::slotted([slot="add"]) {
+				grid-column: color-start / end;
+				grid-row: add;
+			}
 		`;
 	}
 
@@ -218,6 +222,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			<slot name="actions" class="d2l-cell" data-cell-num="7"></slot>
 
 			<slot name="drop-target"></slot>
+			<slot name="add" class="d2l-cell" data-cell-num="9"></slot>
 			<slot name="nested"></slot>
 		`;
 	}

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

@@ -1,3 +1,4 @@
+import '../button/button-add.js';
 import '../colors/colors.js';
 import './list-item-generic-layout.js';
 import './list-item-placement-marker.js';
@@ -74,6 +75,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			 * @type {'normal'|'none'}
 			 */
 			paddingType: { type: String, attribute: 'padding-type' },
+			_addButtonText: { state: true },
 			_displayKeyboardTooltip: { type: Boolean },
 			_hasColorSlot: { type: Boolean, reflect: true, attribute: '_has-color-slot' },
 			_hovering: { type: Boolean, reflect: true },
@@ -82,6 +84,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			_focusingPrimaryAction: { type: Boolean, attribute: '_focusing-primary-action', reflect: true },
 			_highlight: { type: Boolean, reflect: true },
 			_highlighting: { type: Boolean, reflect: true },
+			_showAddButton: { type: Boolean, attribute: '_show-add-button', reflect: true },
 			_hasNestedList: { state: true },
 			_siblingHasColor: { state: true },
 		};
@@ -139,6 +142,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host([_focusing-primary-action]) [slot="control-container"]::after,
 			:host([selected]:not([selection-disabled]):not([skeleton])) [slot="control-container"]::before,
 			:host([selected]:not([selection-disabled]):not([skeleton])) [slot="control-container"]::after,
+			:host([_show-add-button]) [slot="control-container"]::after,
 			:host(:first-of-type[_nested]) [slot="control-container"]::before {
 				border-top-color: transparent;
 			}
@@ -267,7 +271,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 
 			:host([_has-color-slot]) .d2l-list-item-content-extend-separators [slot="outside-control-container"],
 			:host([dir="rtl"][_has-color-slot]) .d2l-list-item-content-extend-separators [slot="outside-control-container"] {
-				margin: 0 !important;
+				margin-inline-end: 0 !important;
+				margin-inline-start: 0 !important;
 			}
 
 			:host(:not([draggable])[_has-color-slot]) [slot="outside-control-container"] {
@@ -287,6 +292,14 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				border-color: #b6cbe8; /* celestine alpha 0.3 */
 				margin-bottom: -1px;
 			}
+			:host([_hovering-primary-action]) d2l-button-add,
+			:host([_hovering-selection]) d2l-button-add,
+			:host([_focusing-primary-action]) d2l-button-add,
+			:host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) d2l-button-add,
+			:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) d2l-button-add,
+			:host(:not([selection-disabled]):not([skeleton])[selected]) d2l-button-add {
+				--d2l-button-add-line-color: #b6cbe8;
+			}
 			:host([_hovering-primary-action]) [slot="outside-control-container"],
 			:host([_hovering-selection]) [slot="outside-control-container"] {
 				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@@ -366,6 +379,18 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin-left: 0;
 				margin-right: -6px;
 			}
+
+			[slot="add"] {
+				margin-bottom: -4px;
+				margin-top: -3px;
+			}
+			:host([draggable][selectable][_hovering]) [slot="add"],
+			:host([draggable][selectable][_focusing]) [slot="add"] {
+				padding-inline-end: 6px;
+			}
+			.dragging [slot="add"] {
+				display: none;
+			}
 		`];
 
 		super.styles && styles.unshift(super.styles);
@@ -453,6 +478,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		else this.scrollIntoView({ behavior: 'smooth', block: alignToTop ? 'start' : 'end' });
 	}
 
+	updateParentHasAddButon(addButton, addButtonText) {
+		this._addButtonText = addButtonText;
+		this._showAddButton = addButton;
+	}
+
 	updateSiblingHasColor(siblingHasColor) {
 		this._siblingHasColor = siblingHasColor;
 	}
@@ -523,6 +553,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		}
 	}
 
+	_handleButtonAddClick() {
+		/** @ignore */
+		this.dispatchEvent(new CustomEvent('d2l-list-item-add-button-click', { bubbles: true }));
+	}
+
 	_isListItem(node) {
 		if (!node) node = this;
 		return node.role === 'rowgroup' || node.role === 'listitem';
@@ -595,6 +630,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color)) ? 'control' : undefined;
 		const primaryAction = ((!this.noPrimaryAction && this._renderPrimaryAction) ? this._renderPrimaryAction(this._contentId) : null);
 		const tooltipForId = (primaryAction ? this._primaryActionId : (this.selectable ? this._checkboxId : null));
+		const addButtonText = this._addButtonText || this.localize('components.list-item.addItem');
 		const innerView = html`
 			<d2l-list-item-generic-layout
 				align-nested="${ifDefined(alignNested)}"
@@ -646,6 +682,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					class="d2l-list-item-actions-container">
 					<slot name="actions" class="d2l-list-item-actions">${actions}</slot>
 				</div>
+				${this._showAddButton ? html`
+				<div slot="add">
+					<d2l-button-add text="${addButtonText}" mode="icon-when-interacted" @click="${this._handleButtonAddClick}"></d2l-button-add>
+				</div>
+				` : nothing}
 				${this._renderNested(nested)}
 			</d2l-list-item-generic-layout>
 		`;

package/components/list/list.js

@@ -32,6 +32,16 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 
 	static get properties() {
 		return {
+			/**
+			 * When true, show the inline add button after each list item.
+			 * @type {boolean}
+			 */
+			addButton: { type: Boolean, reflect: true, attribute: 'add-button' },
+			/**
+			 * Text to show in label tooltip on inline add button. Defaults to "Add Item".
+			 * @type {string}
+			 */
+			addButtonText: { type: String, reflect: true, attribute: 'add-button-text' },
 			/**
 			 * Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.
 			 * @type {array}
@@ -115,6 +125,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 
 	constructor() {
 		super();
+		this.addButton = false;
 		this.breakpoints = DEFAULT_BREAKPOINTS;
 		this.dragMultiple = false;
 		this.extendSeparators = false;
@@ -147,8 +158,9 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener('d2l-list-item-showing-count-change', this._handleListItemShowingCountChange);
-		this.addEventListener('d2l-list-item-nested-change', (e) => this._handleListIemNestedChange(e));
+		this.addEventListener('d2l-list-item-nested-change', (e) => this._handleListItemNestedChange(e));
 		this.addEventListener('d2l-list-item-property-change', (e) => this._handleListItemPropertyChange(e));
+		this.addEventListener('d2l-list-item-add-button-click', (e) => this._handleListItemAddButtonClick(e));
 		ro.observe(this);
 	}
 
@@ -161,7 +173,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		// check if list items are expandable on first render so we adjust sibling spacing appropriately
-		this._handleListIemNestedChange();
+		this._handleListItemNestedChange();
 		this.addEventListener('d2l-list-item-selected', e => {
 
 			// batch the changes from select-all and nested lists
@@ -207,6 +219,9 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		if (changedProperties.has('breakpoints') && changedProperties.get('breakpoints') !== undefined) {
 			this.resizedCallback(this.offsetWidth, true);
 		}
+		if (changedProperties.has('add-button') || changedProperties.has('add-button-text')) {
+			this._listChildrenUpdatedSubscribers.updateSubscribers();
+		}
 	}
 
 	getItems(slot) {
@@ -302,7 +317,13 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		if (focusable) focusable.focus();
 	}
 
-	_handleListIemNestedChange(e) {
+	_handleListItemAddButtonClick(e) {
+		e.stopPropagation();
+		/** Dispatched when the add button directly after the item is clicked. Event detail includes the key of the item directly above where the add button was clicked. */
+		this.dispatchEvent(new CustomEvent('d2l-list-add-button-click', { detail: { key: e.target.key } }));
+	}
+
+	_handleListItemNestedChange(e) {
 		if (e) {
 			e.stopPropagation();
 		}
@@ -327,7 +348,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 				this._listChildrenUpdatedSubscribers.updateSubscribers();
 			} else {
 				// if color has had its value removed then need to loop through all the items to determine if there are still others with colors
-				this._handleListIemNestedChange(e);
+				this._handleListItemNestedChange(e);
 			}
 		}
 	}
@@ -358,12 +379,14 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 	_updateActiveSubscriber(subscriber) {
 		subscriber.updateSiblingHasChildren(this._childHasExpandCollapseToggle);
 		subscriber.updateSiblingHasColor(this._childHasColor);
+		subscriber.updateParentHasAddButon(this.addButton, this.addButtonText);
 	}
 
 	_updateActiveSubscribers(subscribers) {
 		subscribers.forEach(subscriber => {
 			subscriber.updateSiblingHasChildren(this._childHasExpandCollapseToggle);
 			subscriber.updateSiblingHasColor(this._childHasColor);
+			subscriber.updateParentHasAddButon(this.addButton, this.addButtonText);
 		});
 	}
 

package/custom-elements.json

@@ -7848,6 +7848,10 @@
       "name": "d2l-demo-list",
       "path": "./components/list/demo/demo-list.js",
       "attributes": [
+        {
+          "name": "add-button",
+          "type": "boolean"
+        },
         {
           "name": "grid",
           "type": "boolean"
@@ -7859,6 +7863,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "addButton",
+          "attribute": "add-button",
+          "type": "boolean"
+        },
         {
           "name": "grid",
           "attribute": "grid",
@@ -7879,6 +7888,10 @@
       "name": "d2l-demo-list-drag-and-drop-position",
       "path": "./components/list/demo/list-drag-and-drop-position.js",
       "attributes": [
+        {
+          "name": "add-button",
+          "type": "boolean"
+        },
         {
           "name": "grid",
           "type": "boolean"
@@ -7898,6 +7911,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "addButton",
+          "attribute": "add-button",
+          "type": "boolean"
+        },
         {
           "name": "grid",
           "attribute": "grid",
@@ -9006,6 +9024,11 @@
       "path": "./components/list/list.js",
       "description": "A container for a styled list of items (\"d2l-list-item\"). It provides the appropriate \"list\" semantics as well as options for displaying separators, etc.",
       "attributes": [
+        {
+          "name": "add-button-text",
+          "description": "Text to show in label tooltip on inline add button. Defaults to \"Add Item\".",
+          "type": "string"
+        },
         {
           "name": "label",
           "description": "Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.",
@@ -9017,6 +9040,12 @@
           "type": "'all'|'between'|'none'",
           "default": "\"\\\"all\\\"\""
         },
+        {
+          "name": "add-button",
+          "description": "When true, show the inline add button after each list item.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "breakpoints",
           "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
@@ -9059,6 +9088,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "addButtonText",
+          "attribute": "add-button-text",
+          "description": "Text to show in label tooltip on inline add button. Defaults to \"Add Item\".",
+          "type": "string"
+        },
         {
           "name": "label",
           "attribute": "label",
@@ -9072,6 +9107,13 @@
           "type": "'all'|'between'|'none'",
           "default": "\"\\\"all\\\"\""
         },
+        {
+          "name": "addButton",
+          "attribute": "add-button",
+          "description": "When true, show the inline add button after each list item.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "breakpoints",
           "attribute": "breakpoints",
@@ -9132,6 +9174,10 @@
         {
           "name": "d2l-list-selection-change",
           "description": "Dispatched when the selection state changes"
+        },
+        {
+          "name": "d2l-list-add-button-click",
+          "description": "Dispatched when the add button directly after the item is clicked. Event detail includes the key of the item directly above where the add button was clicked."
         }
       ],
       "slots": [

package/lang/ar.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "يفتح في نافذة جديدة.",
 	"components.list.keyboard": "استخدم <b>مفاتيح الأسهم</b> لنقل التركيز داخل هذه القائمة، أو <b>صفحة إلى الأعلى/الأسفل</b> للتحرك إلى الأعلى أو الأسفل بمقدار 5",
 	"components.list-controls.label": "إجراءات القائمة",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "إعادة ترتيب إجراء المادة لـ {name}",
 	"components.list-item-drag-handle.keyboard": "إعادة ترتيب المواد، الموضع الحالي {currentPosition} من أصل {size}. لنقل هذه المادة، اضغط على السهم المتجه إلى أعلى أو السهم المتجه إلى أسفل.",
 	"components.list-item-drag-handle-tooltip.title": "عناصر التحكم بلوحة المفاتيح لإعادة الترتيب:",

package/lang/cy.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "Yn agor mewn ffenestr newydd",
 	"components.list.keyboard": "Defnyddiwch y <b>bysellau saeth</b> i symud ffocws y tu mewn i'r rhestr hon, neu <b>tudalen i fyny/i lawr</b> i symud i fyny neu i lawr erbyn 5",
 	"components.list-controls.label": "Camau gweithredu ar gyfer rhestr",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "Aildrefnu gweithred eitem ar gyfer {name}",
 	"components.list-item-drag-handle.keyboard": "Aildrefnu eitemau, safle presennol {currentPosition} allan o {size}. I symud yr eitem hon, pwyswch y saeth i fyny neu'r saeth i lawr.",
 	"components.list-item-drag-handle-tooltip.title": "Rheolaethau bysellfwrdd ar gyfer aildrefnu:",

package/lang/da.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "Åbnes i et nyt vindue.",
 	"components.list.keyboard": "Brug <b>piletasterne</b> til at flytte fokus inden for denne liste, eller <b>page up/down</b> til at flytte op eller ned med 5",
 	"components.list-controls.label": "Handlinger for liste",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "Omarranger elementhandling for {name}",
 	"components.list-item-drag-handle.keyboard": "Omarranger element, aktuel position {currentPosition} ud af {size}. For at flytte dette element skal du trykke på pil op eller pil ned.",
 	"components.list-item-drag-handle-tooltip.title": "Tastaturkontrolelementer for omorganisering:",

package/lang/de.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "Wird in einem neuen Fenster geöffnet.",
 	"components.list.keyboard": "Verwenden Sie die <b>Pfeiltasten</b>, um den Fokus innerhalb dieser Liste zu verschieben, oder die Tasten <b>Bild hoch/Bild runter</b>, um ihn um 5 Zeilen hinauf oder hinunter zu verschieben",
 	"components.list-controls.label": "Aktionen für Liste",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "Elementaktion für {name} neu anordnen",
 	"components.list-item-drag-handle.keyboard": "Elemente neu anordnen; aktuelle Position: {currentPosition} von {size}. Drücken Sie zum Bewegen dieses Elements auf den Pfeil nach oben oder den Pfeil nach unten.",
 	"components.list-item-drag-handle-tooltip.title": "Tastatursteuerelemente für Neuanordnung:",

package/lang/en-gb.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "Opens in a new window.",
 	"components.list.keyboard": "Use <b>arrow keys</b> to move focus inside this list, or <b>page up/down</b> to move up or down by 5",
 	"components.list-controls.label": "Actions for list",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "Reorder item action for {name}",
 	"components.list-item-drag-handle.keyboard": "Reorder item, current position {currentPosition} out of {size}. To move this item, press up or down arrows.",
 	"components.list-item-drag-handle-tooltip.title": "Keyboard Controls for Reordering:",

package/lang/en.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "Opens in a new window.",
 	"components.list.keyboard": "Use <b>arrow keys</b> to move focus inside this list, or <b>page up/down</b> to move up or down by 5",
 	"components.list-controls.label": "Actions for list",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "Reorder item action for {name}",
 	"components.list-item-drag-handle.keyboard": "Reorder item, current position {currentPosition} out of {size}. To move this item, press up or down arrows.",
 	"components.list-item-drag-handle-tooltip.title": "Keyboard Controls for Reordering:",

package/lang/es-es.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "Se abre en una ventana nueva.",
 	"components.list.keyboard": "Utilice las <b>teclas de flecha</b> para mover el enfoque dentro de esta lista, o <b>avanzar/retroceder página</b> para saltar cinco elementos hacia arriba o hacia abajo",
 	"components.list-controls.label": "Acciones para la lista",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "Reordenar acción de elemento para {name}",
 	"components.list-item-drag-handle.keyboard": "Reordenar elementos, posición actual {currentPosition} de {size}. Para mover este elemento, pulse las flechas arriba o abajo.",
 	"components.list-item-drag-handle-tooltip.title": "Controles del teclado para reordenar:",

package/lang/es.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "Se abre en una ventana nueva.",
 	"components.list.keyboard": "Use las <b>teclas de flecha</b> para mover el enfoque dentro de esta lista o <b>avance/retroceda la página</b> para mover hacia arriba o hacia abajo en 5",
 	"components.list-controls.label": "Acciones para la lista",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "Acción de reordenar elemento de {name}",
 	"components.list-item-drag-handle.keyboard": "Reordenar elemento, posición actual {currentPosition} de {size}. Para mover este elemento, presione las flechas hacia arriba o hacia abajo.",
 	"components.list-item-drag-handle-tooltip.title": "Controles del teclado para el reordenamiento:",

package/lang/fr-fr.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "S’ouvre dans une nouvelle fenêtre.",
 	"components.list.keyboard": "Utilisez les <b>touches fléchées</b> pour vous concentrer sur cette liste, ou <b>faites défiler la page vers le haut/bas</b> pour la faire défiler de 5",
 	"components.list-controls.label": "Actions pour la liste",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "Action de réorganisation de l'élément pour {name}",
 	"components.list-item-drag-handle.keyboard": "Réordonner les éléments, position actuelle {currentPosition} sur {size}. Pour déplacer cet élément, appuyez sur les flèches vers le haut ou vers le bas.",
 	"components.list-item-drag-handle-tooltip.title": "Commandes du clavier pour la réorganisation :",

package/lang/fr.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "Ouvre une nouvelle fenêtre.",
 	"components.list.keyboard": "Utiliser les <b>touches fléchées</b> pour parcourir cette liste ou les touches <b>page up/down</b> pour monter ou descendre 5 éléments à la fois.",
 	"components.list-controls.label": "Actions pour la liste",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "Réordonner l'action de l'élément pour {name}",
 	"components.list-item-drag-handle.keyboard": "Réorganiser les éléments, position actuelle {currentPosition} de {size}. Pour déplacer cet élément, utilisez les flèches vers le haut et vers le bas.",
 	"components.list-item-drag-handle-tooltip.title": "Commandes du clavier pour la réorganisation :",

package/lang/hi.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "एक नई विंडो में खुलता है।",
 	"components.list.keyboard": "फ़ोकस को इस लिस्ट में ले जाने के लिए <b>तीर वाली बटनों</b> अथवा 5 के ज़रिए ऊपर या नीचे जाने के लिए <b>पेज ऊपर/नीचे</b> बटनों का उपयोग करें",
 	"components.list-controls.label": "सूची के लिए क्रियाएँ",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "{name} के लिए आइटम कार्रवाई का क्रम बदलें",
 	"components.list-item-drag-handle.keyboard": "आइटम का क्रम बदलें, {size} में से वर्तमान स्थिति {currentPosition} इस आइटम को ले जाने के लिए, ऊपर या नीचे तीर दबाएँ।",
 	"components.list-item-drag-handle-tooltip.title": "क्रम बदलने के लिए कीबोर्ड नियंत्रण:",

package/lang/ja.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "新規ウィンドウで開きます。",
 	"components.list.keyboard": "<b>方向キー</b>を使用して、このリスト内のフォーカスを移動するか、<b>page up/down</b> キーを使用して上下に 5 つずつ移動します",
 	"components.list-controls.label": "リストのアクション",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "{name} の項目並べ替えアクション",
 	"components.list-item-drag-handle.keyboard": "項目の並べ替え、現在の位置 {currentPosition}、サイズ {size}。この項目を移動するには、上矢印または下矢印を押します。",
 	"components.list-item-drag-handle-tooltip.title": "並べ替え用のキーボードコントロール:",

package/lang/ko.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "새 창에서 열립니다.",
 	"components.list.keyboard": "<b>화살표 키</b>를 사용하여 이 목록 내에서 포커스를 이동하거나 <b>페이지 업/다운</b>을 사용하여 위 또는 아래로 5개씩 이동합니다.",
 	"components.list-controls.label": "목록에 대한 작업",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "{name}에 대한 항목 작업 재정렬",
 	"components.list-item-drag-handle.keyboard": "전체 {size}에서 현재 위치 {currentPosition} 항목 재정렬 이 항목을 이동하라면 위쪽 또는 아래쪽 화살표를 누르십시오.",
 	"components.list-item-drag-handle-tooltip.title": "재정렬을 위한 키보드 컨트롤:",

package/lang/nl.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "Wordt geopend in een nieuw venster.",
 	"components.list.keyboard": "Navigeer binnen deze lijst met behulp van de <b>pijltjestoetsen</b> of gebruik <b>pagina omhoog/omlaag</b> om steeds vijf plekken omhoog of omlaag te bewegen",
 	"components.list-controls.label": "Acties voor lijst",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "Itemactie voor {name} opnieuw rangschikken",
 	"components.list-item-drag-handle.keyboard": "Items opnieuw rangschikken, huidige positie {currentPosition} van {size}. Als u dit item wilt verplaatsen, drukt u op de pijl omhoog of omlaag.",
 	"components.list-item-drag-handle-tooltip.title": "Toetsenbordknoppen voor opnieuw ordenen:",

package/lang/pt.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "Abre em uma nova janela.",
 	"components.list.keyboard": "Use <b>teclas de seta</b> para mover o foco dentro dessa lista, ou <b>página acima/abaixo</b> para subir ou descer 5",
 	"components.list-controls.label": "Ações para a lista",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "Reordenar ação de item para {name}",
 	"components.list-item-drag-handle.keyboard": "Reordenar item, posição atual {currentPosition} de {size}. Para mover este item, pressione as setas para cima ou para baixo.",
 	"components.list-item-drag-handle-tooltip.title": "Controles do teclado para reordenação:",

package/lang/sv.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "Öppnas i ett nytt fönster.",
 	"components.list.keyboard": "Använd <b>piltangenterna</b> för att flytta fokus i listan eller <b>Page Up/Down</b> för att gå fem upp eller ned",
 	"components.list-controls.label": "Åtgärder för lista",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "Åtgärd för att ändra ordning på objekt för {name}",
 	"components.list-item-drag-handle.keyboard": "Flytta objekt. Aktuell position: {currentPosition} av {size}. Om du vill flytta det här objektet trycker du på uppåt- eller nedåtpilen.",
 	"components.list-item-drag-handle-tooltip.title": "Tangentbordskontroller för omsortering:",

package/lang/tr.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "Yeni bir pencerede açılır.",
 	"components.list.keyboard": "Odağı bu listenin içine taşımak için <b>ok tuşlarını</b>, beşer beşer yukarı veya aşağı gitmek için ise <b>sayfa yukarı/aşağı</b> tuşlarını kullanın",
 	"components.list-controls.label": "Liste için eylemler",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "{name} için öğe eylemini yeniden sırala",
 	"components.list-item-drag-handle.keyboard": "Öğeyi yeniden sırala, mevcut konum {currentPosition} / {size}. Bu öğeyi taşımak için yukarı veya aşağı oklara basın.",
 	"components.list-item-drag-handle-tooltip.title": "Yeniden Sıralama için Klavye Kontrolleri:",

package/lang/zh-cn.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "在新窗口中打开。",
 	"components.list.keyboard": "使用<b>箭头键</b>在此列表中移动焦点，或使用<b>上/下翻页</b>以 5 个列表项为幅度进行上移或下移",
 	"components.list-controls.label": "针对列表的操作",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "对 {name} 的项目操作重新排序",
 	"components.list-item-drag-handle.keyboard": "对项目重新排序，当前位置 {currentPosition} 超出 {size}。要移动此项目，请按向上或向下箭头。",
 	"components.list-item-drag-handle-tooltip.title": "用于重新排序的键盘控制键：",

package/lang/zh-tw.js

@@ -70,6 +70,7 @@ export default {
 	"components.link.open-in-new-window": "在新視窗中開啟。",
 	"components.list.keyboard": "使用<b>方向鍵</b>在此清單內移動焦點，或使用<b>頁面上捲/下捲</b>向上或向下移動 5 個項目",
 	"components.list-controls.label": "清單的動作",
+	"components.list-item.addItem": "Add Item",
 	"components.list-item-drag-handle.default": "重新排序 {name} 的項目動作",
 	"components.list-item-drag-handle.keyboard": "重新排序項目，目前位置 {currentPosition}，總共為 {size}。若要移除這個項目，請按向上或向下箭頭。",
 	"components.list-item-drag-handle-tooltip.title": "重新排序的鍵盤控制項：",

package/package.json

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

package/templates/primary-secondary/demo/integration.html

@@ -53,7 +53,7 @@
 			<div slot="controls" style="background-color: #dddddd;">I'm in the <b>controls</b> slot of the <b>d2l-template-primary-secondary</b> component!</div>
 			<div slot="primary">
 
-				<d2l-list item-count="50" extend-separators>
+				<d2l-list item-count="50" extend-separators add-button>
 					<d2l-list-controls slot="controls" select-all-pages-allowed>
 						<d2l-selection-action id="openMainDialog" icon="tier1:plus-default" text="Add"></d2l-selection-action>
 						<d2l-selection-action-dropdown text="Move To" requires-selection>