@brightspace-ui/core 2.5.0 → 2.6.2

package/components/filter/filter.js

@@ -398,7 +398,8 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				@d2l-list-selection-change="${this._handleChangeSetDimension}"
 				extend-separators
 				grid
-				?selection-single="${dimension.selectionSingle}">
+				?selection-single="${dimension.selectionSingle}"
+				separators="between">
 				${dimension.values.map(item => html`
 					<d2l-list-item
 						?hidden="${item.hidden}"

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

@@ -167,7 +167,7 @@ class ListDemoDragAndDrop extends LitElement {
 		await this.updateComplete;
 
 		if (e.detail.keyboardActive) {
-			requestAnimationFrame(() => {
+			setTimeout(() => {
 				if (!this.shadowRoot) return;
 				const newItem = this.shadowRoot.querySelector('d2l-list').getListItemByKey(sourceListItems[0].key);
 				newItem.activateDragHandle();

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

@@ -11,9 +11,22 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 			:host {
 				--d2l-list-item-content-text-color: var(--d2l-color-celestine);
 			}
-			:host d2l-list-item-generic-layout.d2l-focusing,
-			:host d2l-list-item-generic-layout.d2l-hovering {
-				background-color: var(--d2l-color-regolith);
+			[slot="outside-control-container"] {
+				margin: 0 -12px;
+			}
+			:host([_hovering]) [slot="control-container"]::before,
+			:host([_hovering]) [slot="control-container"]::after,
+			:host([_focusing]) [slot="control-container"]::before,
+			:host([_focusing]) [slot="control-container"]::after {
+				border-top-color: transparent;
+			}
+			:host(:not([disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"],
+			:host(:not([disabled]):not([skeleton])[_focusing]) [slot="outside-control-container"] {
+				background-color: white;
+				border-color: #b6cbe8; /* celestine alpha 0.3 */
+			}
+			:host(:not([disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"] {
+				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 			}
 			button {
 				background-color: transparent;

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

@@ -318,10 +318,17 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				grid-template-columns: 100%;
 				grid-template-rows: 1rem 1fr 1fr 1rem;
 			}
-			:host([_drop-location="7"]) d2l-list-item-generic-layout {
+			:host([_drop-location="7"]) {
+				z-index: 1; /* drop target border must render on top of next adjacent border */
+			}
+			:host([_drop-location="7"]) [slot="outside-control-container"] {
+				border: 2px solid var(--d2l-color-celestine);
 				border-radius: 6px;
-				outline: 2px solid var(--d2l-color-celestine);
 			}
+			:host([_drop-location="7"]) [slot="control-container"]::after {
+				border-color: transparent;
+			}
+
 			@media only screen and (hover: hover), only screen and (pointer: fine) {
 				d2l-list-item-drag-handle {
 					opacity: 0;

package/components/list/list-item-drag-handle.js

@@ -262,23 +262,12 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		}
 	}
 
-	_onInactiveKeyDown(e) {
-		if (e.type === 'click' || e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE) {
-			e.preventDefault();
-		}
-	}
-
-	_onPreventDefault(e) {
-		e.preventDefault();
-	}
-
 	_renderDragger() {
 		return html`
 			<button
 				class="d2l-list-item-drag-handle-dragger-button"
 				@click="${this._onInactiveKeyboard}"
-				@keyup="${this._onInactiveKeyboard}"
-				@keydown="${this._onInactiveKeyDown}"
+				@keydown="${this._onInactiveKeyboard}"
 				aria-label="${this._defaultLabel}"
 				?disabled="${this.disabled}">
 				<d2l-icon icon="tier1:dragger" class="d2l-button-icon"></d2l-icon>
@@ -295,8 +284,7 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				@focusin="${this._onFocusInKeyboardButton}"
 				@focusout="${this._onFocusOutKeyboardButton}"
 				id="${this._buttonId}"
-				@keydown="${this._onPreventDefault}"
-				@keyup="${this._onActiveKeyboard}">
+				@keydown="${this._onActiveKeyboard}">
 				<d2l-icon icon="tier1:arrow-toggle-up" @click="${this._dispatchActionUp}" class="d2l-button-icon"></d2l-icon>
 				<d2l-icon icon="tier1:arrow-toggle-down" @click="${this._dispatchActionDown}" class="d2l-button-icon"></d2l-icon>
 			</button>

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

@@ -37,6 +37,11 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 
 	static get properties() {
 		return {
+			/**
+			 * How to align content in the nested slot
+			 * @type {'content'|'control'}
+			 */
+			alignNested: { type: String, reflect: true, attribute: 'align-nested' },
 			/**
 			 * @ignore
 			 */
@@ -68,8 +73,11 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-column: content-start / end;
 				grid-row: nested-start / nested-end;
 			}
+			:host([align-nested="control"]) ::slotted([slot="nested"]) {
+				grid-column: control-start / end;
+			}
 			:host(.d2l-dragging-over) ::slotted([slot="nested"]) {
-				z-index: 6;
+				z-index: 6; /* must be greater than item's drop-target to allow dropping onto items within nested list  */
 			}
 
 			::slotted([slot="drop-target"]) {
@@ -129,12 +137,21 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-column: content-start / end;
 				z-index: 3;
 			}
+
+			::slotted([slot="outside-control-container"]) {
+				grid-column: start / end;
+				grid-row: 1 / 2;
+			}
+			::slotted([slot="control-container"]) {
+				grid-column: control-start / end;
+				grid-row: 1 / 2;
+			}
 		`;
 	}
 
 	constructor() {
 		super();
-
+		this.alignNested = 'content';
 		this._preventFocus = {
 			handleEvent(event) {
 				// target content slot only for now - can add others later
@@ -155,12 +172,13 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 
 	firstUpdated() {
 		this.addEventListener('keydown', this._onKeydown.bind(this));
-		this.addEventListener('keyup', this._onKeyup.bind(this));
 		this.addEventListener('focusin', this._setFocusInfo.bind(this));
 	}
 
 	render() {
 		return html`
+			<slot name="control-container"></slot>
+			<slot name="outside-control-container"></slot>
 			<slot name="drop-target"></slot>
 			<slot name="content-action" class="d2l-cell" data-cell-num="5"></slot>
 			<slot name="outside-control-action" class="d2l-cell" data-cell-num="1"></slot>
@@ -389,30 +407,6 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 	}
 
 	_onKeydown(event) {
-		if (!this.gridActive) return;
-		let preventDefault = true;
-		switch (event.keyCode) {
-			case keyCodes.ENTER:
-			case keyCodes.SPACE:
-			case keyCodes.RIGHT:
-			case keyCodes.LEFT:
-			case keyCodes.UP:
-			case keyCodes.DOWN:
-			case keyCodes.HOME:
-			case keyCodes.END:
-			case keyCodes.PAGEUP:
-			case keyCodes.PAGEDOWN:
-				break;
-			default:
-				preventDefault = false;
-		}
-		if (preventDefault) {
-			event.preventDefault();
-			event.stopPropagation();
-		}
-	}
-
-	_onKeyup(event) {
 		if (!this.gridActive) return;
 		let node = null;
 		let preventDefault = true;

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

@@ -21,9 +21,19 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 			:host([action-href]:not([action-href=""])) {
 				--d2l-list-item-content-text-color: var(--d2l-color-celestine);
 			}
-			:host([action-href]:not([action-href=""]):not([skeleton])) d2l-list-item-generic-layout.d2l-focusing,
-			:host([action-href]:not([action-href=""]):not([skeleton])) d2l-list-item-generic-layout.d2l-hovering {
-				background-color: var(--d2l-color-regolith);
+			:host([action-href]:not([action-href=""])[_hovering]) [slot="control-container"]::before,
+			:host([action-href]:not([action-href=""])[_hovering]) [slot="control-container"]::after,
+			:host([action-href]:not([action-href=""])[_focusing]) [slot="control-container"]::before,
+			:host([action-href]:not([action-href=""])[_focusing]) [slot="control-container"]::after {
+				border-top-color: transparent;
+			}
+			:host(:not([disabled]):not([skeleton])[action-href]:not([action-href=""])[_hovering]) [slot="outside-control-container"],
+			:host(:not([disabled]):not([skeleton])[action-href]:not([action-href=""])[_focusing]) [slot="outside-control-container"] {
+				background-color: white;
+				border-color: #b6cbe8; /* celestine alpha 0.3 */
+			}
+			:host(:not([disabled]):not([skeleton])[action-href]:not([action-href=""])[_hovering]) [slot="outside-control-container"] {
+				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 			}
 			a[href] {
 				display: block;

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

@@ -73,11 +73,10 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			_displayKeyboardTooltip: { type: Boolean },
 			_dropdownOpen: { type: Boolean, attribute: '_dropdown-open', reflect: true },
 			_fullscreenWithin: { type: Boolean, attribute: '_fullscreen-within', reflect: true },
-			_hoveringPrimaryAction: { type: Boolean },
-			_focusing: { type: Boolean },
-			_focusingPrimaryAction: { type: Boolean },
-			_highlight: { type: Boolean },
-			_highlighting: { type: Boolean },
+			_hovering: { type: Boolean, reflect: true },
+			_focusing: { type: Boolean, reflect: true },
+			_highlight: { type: Boolean, reflect: true },
+			_highlighting: { type: Boolean, reflect: true },
 			_tooltipShowing: { type: Boolean, attribute: '_tooltip-showing', reflect: true }
 		};
 	}
@@ -87,12 +86,12 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		const styles = [ css`
 			:host {
 				display: block;
-				margin-top: -1px;
 				position: relative;
 			}
 			:host[hidden] {
 				display: none;
 			}
+
 			:host([_tooltip-showing]),
 			:host([_dropdown-open]) {
 				z-index: 10; /* must be greater than adjacent selected items */
@@ -101,12 +100,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				position: fixed; /* required for Safari */
 				z-index: 1000; /* must be greater than floating workflow buttons */
 			}
-			:host(:first-child) d2l-list-item-generic-layout[data-separators="between"] {
-				border-top: 1px solid transparent;
-			}
-			:host(:last-child) d2l-list-item-generic-layout[data-separators="between"] {
-				border-bottom: 1px solid transparent;
-			}
+
 			:host([dragging]) d2l-list-item-generic-layout {
 				filter: grayscale(75%);
 				opacity: 0.4;
@@ -114,18 +108,44 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			:host([dragging]) .d2l-list-item-drag-image {
 				background: white;
 			}
-			d2l-list-item-generic-layout {
-				border-bottom: 1px solid var(--d2l-color-mica);
+
+			[slot="control-container"] {
+				position: relative;
+			}
+			:host(:first-of-type) [slot="control-container"]::before,
+			[slot="control-container"]::after {
 				border-top: 1px solid var(--d2l-color-mica);
+				content: "";
+				left: 4px;
+				position: absolute;
+				width: calc(100% - 8px);
+			}
+			:host(:first-of-type) [slot="control-container"]::before {
+				top: 0;
 			}
+			[slot="control-container"]::after {
+				bottom: -2px;
+			}
+
+			:host(:first-of-type[_separators="between"]) [slot="control-container"]::before,
+			:host(:last-of-type[_separators="between"]) [slot="control-container"]::after,
+			:host([_separators="none"]) [slot="control-container"]::before,
+			:host([_separators="none"]) [slot="control-container"]::after,
+			:host([selectable][_hovering]) [slot="control-container"]::before,
+			:host([selectable][_hovering]) [slot="control-container"]::after,
+			:host([selectable][_focusing]) [slot="control-container"]::before,
+			:host([selectable][_focusing]) [slot="control-container"]::after,
+			:host([selected]) [slot="control-container"]::before,
+			:host([selected]) [slot="control-container"]::after,
+			:host(:first-of-type[_nested]) [slot="control-container"]::before {
+				border-top-color: transparent;
+			}
+
 			:host([padding-type="none"]) d2l-list-item-generic-layout {
 				border-bottom: 0;
 				border-top: 0;
 			}
-			d2l-list-item-generic-layout[data-separators="none"] {
-				border-bottom: 1px solid transparent;
-				border-top: 1px solid transparent;
-			}
+
 			.d2l-list-item-content-extend-separators > [slot="control"] {
 				width: 3rem;
 			}
@@ -143,8 +163,8 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			.d2l-list-item-content ::slotted(*) {
 				margin-top: 0.05rem;
 			}
-			.d2l-list-item-content.d2l-hovering,
-			.d2l-list-item-content.d2l-focusing {
+			:host([_hovering]) .d2l-list-item-content,
+			:host([_focusing]) .d2l-list-item-content {
 				--d2l-list-item-content-text-color: var(--d2l-color-celestine);
 				--d2l-list-item-content-text-decoration: underline;
 			}
@@ -157,7 +177,11 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			[slot="content"] {
 				display: flex;
 				justify-content: stretch;
-				padding: 0.55rem 0;
+				padding: 0.55rem 0.55rem 0.55rem 0;
+			}
+			:host([dir="rtl"]) [slot="content"] {
+				padding-left: 0.55rem;
+				padding-right: 0;
 			}
 			:host([slim]) [slot="content"] { /* TODO, remove */
 				padding-bottom: 0.35rem;
@@ -171,6 +195,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				padding-bottom: 0;
 				padding-top: 0;
 			}
+
 			[slot="content"] ::slotted([slot="illustration"]),
 			[slot="content"] .d2l-list-item-illustration * {
 				border-radius: 6px;
@@ -272,56 +297,57 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			:host([dir="rtl"]) .d2l-list-item-content-extend-separators d2l-selection-input {
 				margin-right: 0.9rem;
 			}
-			:host([selectable]:not([disabled]):not([skeleton])) d2l-list-item-generic-layout.d2l-focusing,
-			:host([selectable]:not([disabled]):not([skeleton])) d2l-list-item-generic-layout.d2l-hovering {
-				background-color: var(--d2l-color-regolith);
-			}
-			:host([selected]:not([disabled])) d2l-list-item-generic-layout {
-				background-color: #f3fbff;
+
+			[slot="outside-control-container"] {
+				border: 1px solid transparent;
+				border-radius: 6px;
+				margin: 0 -12px;
 			}
-			:host([selected]:not([disabled])) d2l-list-item-generic-layout,
-			:host([selected]:not([disabled])) d2l-list-item-generic-layout.d2l-focusing {
-				border-color: #79b5df;
+			.d2l-list-item-content-extend-separators [slot="outside-control-container"] {
+				border-radius: 0;
 			}
-			:host([selected]:not([disabled])) .d2l-list-item-active-border,
-			:host([selected]:not([disabled])) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border,
-			:host(:not([disabled])) .d2l-list-item-highlight + .d2l-list-item-active-border {
-				background-color: #79b5df;
-				bottom: 0;
-				height: 1px;
-				position: absolute;
-				width: 100%;
-				z-index: 5;
+			:host([draggable]) [slot="outside-control-container"],
+			.d2l-list-item-content-extend-separators [slot="outside-control-container"] {
+				margin: 0;
 			}
 
-			.d2l-list-item-highlight {
-				transition: background-color 400ms linear, border-color 400ms linear;
+			:host(:not([disabled]):not([skeleton])[selected]) [slot="outside-control-container"],
+			:host(:not([disabled]):not([skeleton])[selectable][_hovering]) [slot="outside-control-container"],
+			:host(:not([disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"] {
+				background-color: white;
+				border-color: #b6cbe8; /* celestine alpha 0.3 */
 			}
-			.d2l-list-item-highlight + .d2l-list-item-active-border {
-				transition: background-color 400ms linear;
+			:host(:not([disabled]):not([skeleton])[selectable][_hovering]) [slot="outside-control-container"] {
+				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 			}
-			d2l-list-item-generic-layout.d2l-list-item-highlighting,
-			:host([selectable]:not([disabled]):not([skeleton])) d2l-list-item-generic-layout.d2l-list-item-highlighting.d2l-focusing,
-			:host([selectable]:not([disabled]):not([skeleton])) d2l-list-item-generic-layout.d2l-list-item-highlighting.d2l-hovering {
-				background-color: var(--d2l-color-celestine-plus-2);
-				border-color: var(--d2l-color-celestine);
+			:host(:not([disabled]):not([skeleton])[selected]) [slot="outside-control-container"] {
+				background-color: #f3fbff;
+			}
+
+			:host(:not([disabled]):not([skeleton])[padding-type="none"]) [slot="outside-control-container"] {
+				border-color: transparent;
+				margin: 0;
 			}
-			:host(:not([disabled])) d2l-list-item-generic-layout.d2l-list-item-highlighting + .d2l-list-item-active-border {
-				background-color: var(--d2l-color-celestine);
+
+			:host([_highlight]) [slot="outside-control-container"] {
+				transition: background-color 400ms linear, border-color 400ms linear;
+			}
+			:host([_highlight]:first-of-type) [slot="control-container"]::before,
+			:host([_highlight]) [slot="control-container"]::after {
+				transition: border-color 400ms linear;
 			}
-			:host([selected]:not([disabled])) d2l-list-item-generic-layout.d2l-list-item-highlighting {
+			:host([_highlighting]) [slot="outside-control-container"],
+			:host(:not([disabled]):not([skeleton])[_hovering][_highlighting]) [slot="outside-control-container"],
+			:host(:not([disabled]):not([skeleton])[_focusing][_highlighting]) [slot="outside-control-container"],
+			:host(:not([disabled]):not([skeleton])[selected][_highlighting]) [slot="outside-control-container"] {
 				background-color: var(--d2l-color-celestine-plus-2);
 				border-color: var(--d2l-color-celestine);
 			}
-			:host([selected]:not([disabled])) .d2l-list-item-highlighting + .d2l-list-item-active-border,
-			:host([selected]:not([disabled])) d2l-list-item-generic-layout.d2l-list-item-highlighting.d2l-focusing + .d2l-list-item-active-border {
-				background-color: var(--d2l-color-celestine);
+			:host([_highlighting]:first-of-type) [slot="control-container"]::before,
+			:host([_highlighting]) [slot="control-container"]::after {
+				border-color: transparent;
 			}
 
-			:host([_fullscreen-within]) .d2l-list-item-active-border,
-			:host([_fullscreen-within]) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border {
-				display: none;
-			}
 			d2l-tooltip > div {
 				font-weight: 700;
 			}
@@ -395,7 +421,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 
 	async highlight() {
 		if (this._highlight) return;
-		const elem = this.shadowRoot.querySelector('d2l-list-item-generic-layout');
+		const elem = this.shadowRoot.querySelector('[slot="outside-control-container"]');
 		this._highlight = true;
 		await this.updateComplete;
 		elem.addEventListener('transitionend', () => {
@@ -485,19 +511,11 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		hasDisplayedKeyboardTooltip = true;
 	}
 
-	_onFocusInPrimaryAction() {
-		this._focusingPrimaryAction = true;
-	}
-
 	_onFocusOut() {
 		this._focusing = false;
 		this._displayKeyboardTooltip = false;
 	}
 
-	_onFocusOutPrimaryAction() {
-		this._focusingPrimaryAction = false;
-	}
-
 	_onFullscreenWithin(e) {
 		if (e.detail.state) this._fullscreenWithinCount += 1;
 		else this._fullscreenWithinCount -= 1;
@@ -509,7 +527,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 	}
 
 	_onMouseEnterPrimaryAction() {
-		this._hoveringPrimaryAction = true;
 		this._hovering = true;
 	}
 
@@ -518,7 +535,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 	}
 
 	_onMouseLeavePrimaryAction() {
-		this._hoveringPrimaryAction = false;
 		this._hovering = false;
 	}
 
@@ -526,23 +542,15 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		const classes = {
 			'd2l-visible-on-ancestor-target': true,
 			'd2l-list-item-content-extend-separators': this._extendSeparators,
-			'd2l-list-item-highlight': this._highlight,
-			'd2l-list-item-highlighting': this._highlighting,
-			'd2l-focusing': this._focusing,
-			'd2l-hovering': this._hovering,
 			'd2l-dragging-over': this._draggingOver
 		};
-		const contentClasses = {
-			'd2l-list-item-content': true,
-			'd2l-hovering': this._hoveringPrimaryAction,
-			'd2l-focusing': this._focusingPrimaryAction
-		};
 
 		const primaryAction = this._renderPrimaryAction ? this._renderPrimaryAction(this._contentId) : null;
 		const tooltipForId = (primaryAction ? this._primaryActionId : (this.selectable ? this._checkboxId : null));
 
 		const innerView = html`
 			<d2l-list-item-generic-layout
+				align-nested="${ifDefined(this.draggable && this.selectable ? 'control' : undefined)}"
 				@focusin="${this._onFocusIn}"
 				@focusout="${this._onFocusOut}"
 				@d2l-fullscreen-within="${this._onFullscreenWithin}"
@@ -550,9 +558,11 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				data-breakpoint="${this._breakpoint}"
 				data-separators="${ifDefined(this._separators)}"
 				?grid-active="${this.role === 'rowgroup'}">
+				<div slot="outside-control-container"></div>
 				${this._renderDropTarget()}
 				${this._renderDragHandle(this._renderOutsideControl)}
 				${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
+				<div slot="control-container"></div>
 				${this.selectable ? html`
 				<div slot="control">${this._renderCheckbox()}</div>
 				<div slot="control-action"
@@ -562,14 +572,12 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				</div>` : nothing }
 				${primaryAction ? html`
 				<div slot="content-action"
-					@focusin="${this._onFocusInPrimaryAction}"
-					@focusout="${this._onFocusOutPrimaryAction}"
 					@mouseenter="${this._onMouseEnterPrimaryAction}"
 					@mouseleave="${this._onMouseLeavePrimaryAction}">
 						${primaryAction}
 				</div>` : nothing}
 				<div slot="content"
-					class="${classMap(contentClasses)}"
+					class="d2l-list-item-content"
 					id="${this._contentId}">
 					<slot name="illustration" class="d2l-list-item-illustration">${illustration}</slot>
 					<slot>${content}</slot>
@@ -584,7 +592,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 					<slot name="nested" @slotchange="${this._onNestedSlotChange}">${nested}</slot>
 				</div>
 			</d2l-list-item-generic-layout>
-			<div class="d2l-list-item-active-border"></div>
 		`;
 
 		return html`

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

@@ -7,10 +7,17 @@ export const ListItemRoleMixin = superclass => class extends superclass {
 			/**
 			 * @ignore
 			 */
-			role: { type: String, reflect: true }
+			role: { type: String, reflect: true },
+			_nested: { type: Boolean, reflect: true },
+			_separators: { type: String, reflect: true }
 		};
 	}
 
+	constructor() {
+		super();
+		this._nested = false;
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 
@@ -20,6 +27,7 @@ export const ListItemRoleMixin = superclass => class extends superclass {
 		const separators = parent.getAttribute('separators');
 
 		this.role = parent.hasAttribute('grid') ? 'rowgroup' : 'listitem';
+		this._nested = (parent.slot === 'nested');
 		this._separators = separators || undefined;
 		this._extendSeparators = parent.hasAttribute('extend-separators');
 	}

package/components/tag-list/README.md

@@ -1,6 +1,5 @@
-
 # Tag List
-*This component is in progress and the api is not yet stable.*
+*This component is in progress. The API is generally stable but the ability to clear tags is currently a WIP.*
 
 Tag lists are used to present a list of compact, discrete pieces of information.
 
@@ -12,9 +11,14 @@ Tag lists are used to present a list of compact, discrete pieces of information.
 </script>
 
 <d2l-tag-list description="Example Tags">
-  <d2l-tag-list-item text="Tag"></d2l-tag-list-item>
-  <d2l-tag-list-item text="Another Tag"></d2l-tag-list-item>
-  <d2l-tag-list-item text="A Third Very Very Very Long Tag"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Lorem ipsum dolor"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Reprehenderit in voluptate velit esse"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Sit amet"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Duis aute irure"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Excepteur sint"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Cillum"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Saunt in culpa"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Laboris nisi"></d2l-tag-list-item>
 </d2l-tag-list>
 ```
 
@@ -30,9 +34,10 @@ The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-i
 </script>
 
 <d2l-tag-list description="Example Tags">
-  <d2l-tag-list-item text="Tag"></d2l-tag-list-item>
-  <d2l-tag-list-item text="Another Tag"></d2l-tag-list-item>
-  <d2l-tag-list-item text="A Third Very Very Very Long Tag"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Lorem ipsum dolor"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Reprehenderit in voluptate velit esse"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Sit amet"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Duis aute irure"></d2l-tag-list-item>
 </d2l-tag-list>
 ```
 

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

@@ -26,6 +26,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 			 */
 			description: { type: String },
 			_chompIndex: { type: Number },
+			_lines: { type: Number },
 			_showHiddenTags: { type: Boolean }
 		};
 	}
@@ -122,7 +123,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 		`;
 
 		const outerContainerStyles = {
-			maxHeight: this._showHiddenTags ? undefined : `${(this._itemHeight + MARGIN_TOP_HEIGHT) * this._lines}px`
+			maxHeight: (this._showHiddenTags || !this._lines) ? undefined : `${(this._itemHeight + MARGIN_TOP_HEIGHT) * this._lines}px`
 		};
 
 		return html`

package/custom-elements.json

@@ -4918,7 +4918,8 @@
           "type": "number"
         },
         {
-          "name": "trailingZeroes"
+          "name": "trailingZeroes",
+          "type": "boolean"
         },
         {
           "name": "value",
@@ -7091,6 +7092,12 @@
           "name": "grid-active",
           "description": "Specifies whether the grid is active or not",
           "type": "boolean"
+        },
+        {
+          "name": "align-nested",
+          "description": "How to align content in the nested slot",
+          "type": "'content'|'control'",
+          "default": "\"content\""
         }
       ],
       "properties": [
@@ -7099,6 +7106,13 @@
           "attribute": "grid-active",
           "description": "Specifies whether the grid is active or not",
           "type": "boolean"
+        },
+        {
+          "name": "alignNested",
+          "attribute": "align-nested",
+          "description": "How to align content in the nested slot",
+          "type": "'content'|'control'",
+          "default": "\"content\""
         }
       ],
       "slots": [
@@ -8309,7 +8323,7 @@
     {
       "name": "d2l-overflow-group",
       "path": "./components/overflow-group/overflow-group.js",
-      "description": "A component that can be used to display a set of buttons, links or menus that will be put into a dropdown menu when they no longer fit on the first line of their container",
+      "description": "\nA component that can be used to display a set of buttons, links or menus that will be put into a dropdown menu when they no longer fit on the first line of their container",
       "attributes": [
         {
           "name": "auto-show",
@@ -8436,7 +8450,7 @@
     {
       "name": "d2l-scroll-wrapper",
       "path": "./components/scroll-wrapper/scroll-wrapper.js",
-      "description": "Wraps content which may overflow its horizontal boundaries, providing left/right scroll buttons.",
+      "description": "\nWraps content which may overflow its horizontal boundaries, providing left/right scroll buttons.",
       "attributes": [
         {
           "name": "hide-actions",

package/package.json

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

package/tools/mathjax-test-context.js

@@ -0,0 +1,4 @@
+document.documentElement.dataset.mathjaxContext = JSON.stringify({
+	outputScale: 1.1,
+	renderLatex: true
+});