@brightspace-ui/core 2.3.3 → 2.6.0

package/components/dropdown/dropdown.js

@@ -23,7 +23,7 @@ class Dropdown extends DropdownOpenerMixin(LitElement) {
 	getOpenerElement() {
 		if (!this.shadowRoot) return undefined;
 		return this.shadowRoot.querySelector('slot')
-			.assignedNodes()
+			.assignedNodes({ flatten: true })
 			.filter(node => node.classList && node.classList.contains('d2l-dropdown-opener'))[0];
 	}
 

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/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-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
@@ -161,6 +178,8 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 
 	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>

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/tag-list.js

@@ -1,7 +1,22 @@
+import '../button/button-subtle.js';
 import { css, html, LitElement } from 'lit';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
-class TagList extends ArrowKeysMixin(LitElement) {
+const PAGE_SIZE = {
+	medium: 600,
+	large: 970
+};
+const PAGE_SIZE_LINES = {
+	large: 1,
+	medium: 2,
+	small: 3
+};
+const MARGIN_TOP_HEIGHT = 6;
+
+class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -9,7 +24,9 @@ class TagList extends ArrowKeysMixin(LitElement) {
 			 * REQUIRED: A description of the tag list for additional accessibility context
 			 * @type {string}
 			 */
-			description: { type: String }
+			description: { type: String },
+			_chompIndex: { type: Number },
+			_showHiddenTags: { type: Boolean }
 		};
 	}
 
@@ -28,9 +45,17 @@ class TagList extends ArrowKeysMixin(LitElement) {
 				padding: 0;
 				position: relative;
 			}
-			::slotted(*) {
+			::slotted(*),
+			d2l-button-subtle {
 				margin: 6px 6px 0 0;
 			}
+			::slotted([data-is-chomped]) {
+				display: none !important;
+			}
+			.d2l-tag-list-hidden-button {
+				position: absolute;
+				visibility: hidden;
+			}
 		`;
 	}
 
@@ -38,28 +63,71 @@ class TagList extends ArrowKeysMixin(LitElement) {
 		super();
 		/** @ignore */
 		this.arrowKeysDirection = 'leftrightupdown';
+		this._chompIndex = 10000;
 		this._items = [];
+		this._resizeObserver = null;
+		this._showHiddenTags = false;
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._resizeObserver) this._resizeObserver.disconnect();
 	}
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
-		requestAnimationFrame(() => {
-			this._items = this._getTagListItems();
-			this._items.forEach((item, index) => {
-				item.setAttribute('tabIndex', index === 0 ? 0 : -1);
-			});
-		});
+		const container = this.shadowRoot.querySelector('.tag-list-outer-container');
+		this._resizeObserver = new ResizeObserver((e) => requestAnimationFrame(() => this._handleResize(e)));
+		this._resizeObserver.observe(container);
 	}
 
 	render() {
+		let hiddenCount = 0;
+		let hasHiddenTags = false;
+		this._items.forEach((element, index) => {
+			if (index >= this._chompIndex) hasHiddenTags = true;
+			if (!this._showHiddenTags && index >= this._chompIndex) {
+				hiddenCount++;
+				element.setAttribute('data-is-chomped', '');
+			} else {
+				element.removeAttribute('data-is-chomped');
+			}
+		});
+
+		let button = null;
+		if (hasHiddenTags) {
+			button = this._showHiddenTags ? html`
+				<d2l-button-subtle
+					class="d2l-tag-list-button"
+					@click="${this._toggleHiddenTagVisibility}"
+					slim
+					text="${this.localize('components.tag-list.show-less')}">
+				</d2l-button-subtle>
+			` : html`
+				<d2l-button-subtle
+					class="d2l-tag-list-button"
+					@click="${this._toggleHiddenTagVisibility}"
+					slim
+					text="${this.localize('components.tag-list.num-hidden', { count: hiddenCount })}">
+				</d2l-button-subtle>
+			`;
+		}
+
 		const list = html`
 			<div role="list" class="tag-list-container" aria-describedby="d2l-tag-list-description">
-				<slot></slot>
+				<slot @slotchange="${this._handleSlotChange}"></slot>
+				${button}
 			</div>
 		`;
+
+		const outerContainerStyles = {
+			maxHeight: this._showHiddenTags ? undefined : `${(this._itemHeight + MARGIN_TOP_HEIGHT) * this._lines}px`
+		};
+
 		return html`
-			<div role="application">
+			<div role="application" class="tag-list-outer-container" style="${styleMap(outerContainerStyles)}">
+				<d2l-button-subtle aria-hidden="true" slim text="${this.localize('components.tag-list.num-hidden', { count: '##' })}" class="d2l-tag-list-hidden-button"></d2l-button-subtle>
 				${this.arrowKeysContainer(list)}
 				<div id="d2l-tag-list-description" hidden>${this.description}</div>
 			</div>
@@ -67,13 +135,87 @@ class TagList extends ArrowKeysMixin(LitElement) {
 	}
 
 	async arrowKeysFocusablesProvider() {
-		return this._items;
+		return this._showHiddenTags ? this._items : this._items.slice(0, this._chompIndex);
 	}
 
 	focus() {
 		if (this._items.length > 0) this._items[0].focus();
 	}
 
+	_chomp() {
+		if (!this.shadowRoot || !this._lines || !this._itemLayouts) return;
+
+		const subtleButton  = this.shadowRoot.querySelector('.d2l-tag-list-hidden-button');
+		const subtleButtonWidth = Math.ceil(parseFloat(getComputedStyle(subtleButton).getPropertyValue('width')));
+
+		const showing = {
+			count: 0,
+			width: 0
+		};
+
+		/**
+		 * _lines is determined by page width in _handleResize function
+		 * For each line we calculate the max items that can fit in that width, then go to the next line
+		 * If on the last line there is/are item(s) that won't fit in the width, we mark them as soft-hide and set isOverflowing
+		 */
+		let isOverflowing = false;
+		let overflowingIndex = 0;
+		for (let k = 1; k <= this._lines; k++) {
+			showing.width = 0;
+
+			for (let i = overflowingIndex; i < this._itemLayouts.length; i++) {
+				const itemLayout = this._itemLayouts[i];
+
+				if (!isOverflowing && showing.width + itemLayout.width < this._availableWidth) {
+					showing.width += itemLayout.width;
+					showing.count += 1;
+					itemLayout.trigger = 'soft-show';
+				} else if (k < this._lines) {
+					overflowingIndex = i;
+					break;
+				} else {
+					isOverflowing = true;
+					itemLayout.trigger = 'soft-hide';
+				}
+			}
+
+		}
+
+		if (!isOverflowing) {
+			this._chompIndex = showing.count;
+			return;
+		}
+
+		// calculate if additional item(s) should be hidden due to subtle button needing space
+		for (let j = this._itemLayouts.length; j--;) {
+			if ((showing.width + subtleButtonWidth) < this._availableWidth) {
+				break;
+			}
+			const itemLayoutOverflowing = this._itemLayouts[j];
+			if (itemLayoutOverflowing.trigger !== 'soft-show') {
+				continue;
+			}
+			showing.width -= itemLayoutOverflowing.width;
+			showing.count -= 1;
+		}
+		this._chompIndex = showing.count;
+	}
+
+	_getItemLayouts(filteredNodes) {
+		const items = filteredNodes.map((node) => {
+			const computedStyles = window.getComputedStyle(node);
+
+			return {
+				isHidden: computedStyles.display === 'none',
+				width: Math.ceil(parseFloat(computedStyles.width) || 0)
+					+ parseInt(computedStyles.marginRight) || 0
+					+ parseInt(computedStyles.marginLeft) || 0
+			};
+		});
+
+		return items.filter(({ isHidden }) => !isHidden);
+	}
+
 	_getTagListItems() {
 		const slot = this.shadowRoot && this.shadowRoot.querySelector('slot');
 		if (!slot) return;
@@ -84,6 +226,38 @@ class TagList extends ArrowKeysMixin(LitElement) {
 		});
 	}
 
+	_handleResize(entries) {
+		this._availableWidth = Math.ceil(entries[0].contentRect.width);
+		if (this._availableWidth >= PAGE_SIZE.large) this._lines = PAGE_SIZE_LINES.large;
+		else if (this._availableWidth < PAGE_SIZE.large && this._availableWidth >= PAGE_SIZE.medium) this._lines = PAGE_SIZE_LINES.medium;
+		else this._lines = PAGE_SIZE_LINES.small;
+		this._chomp();
+	}
+
+	_handleSlotChange() {
+		requestAnimationFrame(() => {
+			this._items = this._getTagListItems();
+			this._itemLayouts = this._getItemLayouts(this._items);
+
+			if (this._items.length === 0) return;
+			this._itemHeight = this._items[0].offsetHeight;
+			this._items.forEach((item, index) => {
+				item.setAttribute('tabIndex', index === 0 ? 0 : -1);
+			});
+			this._chomp();
+		});
+	}
+
+	async _toggleHiddenTagVisibility() {
+		this._showHiddenTags = !this._showHiddenTags;
+
+		if (!this.shadowRoot) return;
+
+		await this.updateComplete;
+		const button = this.shadowRoot.querySelector('.d2l-tag-list-button');
+		if (button) button.focus();
+	}
+
 }
 
 customElements.define('d2l-tag-list', TagList);

package/custom-elements.json

@@ -7091,6 +7091,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 +7105,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": [

package/lang/ar.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "إمكانية الرؤية",
 	"components.tabs.next": "التمرير إلى الأمام",
 	"components.tabs.previous": "التمرير إلى الخلف",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "تقسيم العرض القابل للضبط",
 	"templates.primary-secondary.keyboardHorizontal": "السهم المتّجه إلى اليسار أو إلى اليمين لضبط حجم لوحات العرض",
 	"templates.primary-secondary.keyboardVertical": "السهم المتّجه إلى الأعلى أو إلى الأسفل لضبط حجم لوحات العرض"

package/lang/cy.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Gwelededd",
 	"components.tabs.next": "Sgrolio Ymlaen",
 	"components.tabs.previous": "Sgrolio Yn Ôl",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Gwedd Hollt Addasadwy",
 	"templates.primary-secondary.keyboardHorizontal": "Saeth i'r chwith neu'r dde i addasu maint y paneli gweld",
 	"templates.primary-secondary.keyboardVertical": "Saeth i fyny neu i lawr i addasu maint y paneli gweld"

package/lang/da.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Synlighed",
 	"components.tabs.next": "Rul frem",
 	"components.tabs.previous": "Rul tilbage",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Justerbar delt visning",
 	"templates.primary-secondary.keyboardHorizontal": "Pil til venstre eller højre for at justere størrelsen på visningspaneler",
 	"templates.primary-secondary.keyboardVertical": "Pil op eller ned for at justere størrelsen på visningspaneler"

package/lang/de.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Sichtbarkeit",
 	"components.tabs.next": "Weiterblättern",
 	"components.tabs.previous": "Zurückblättern",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Anpassbare geteilte Ansicht",
 	"templates.primary-secondary.keyboardHorizontal": "Pfeil nach links oder rechts, um die Größe der Ansichtsbereiche anzupassen",
 	"templates.primary-secondary.keyboardVertical": "Pfeil nach oben oder unten, um die Größe der Ansichtsbereiche anzupassen"

package/lang/en.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Visibility",
 	"components.tabs.next": "Scroll Forward",
 	"components.tabs.previous": "Scroll Backward",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Adjustable Split View",
 	"templates.primary-secondary.keyboardHorizontal": "Arrow left or right to adjust the size of the view panels",
 	"templates.primary-secondary.keyboardVertical": "Arrow up or down to adjust the size of the view panels"

package/lang/es-es.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Visibilidad",
 	"components.tabs.next": "Desplazarse hacia delante",
 	"components.tabs.previous": "Desplazarse hacia atrás",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Vista dividida ajustable",
 	"templates.primary-secondary.keyboardHorizontal": "Flecha hacia la izquierda o la derecha para ajustar el tamaño de los paneles de visualización",
 	"templates.primary-secondary.keyboardVertical": "Flecha hacia arriba o abajo para ajustar el tamaño de los paneles de visualización"

package/lang/es.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Visibilidad",
 	"components.tabs.next": "Desplazarse hacia adelante",
 	"components.tabs.previous": "Desplazarse hacia atrás",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Pantalla dividida ajustable",
 	"templates.primary-secondary.keyboardHorizontal": "Utilice la flecha izquierda o derecha para ajustar el tamaño de los paneles de visualización",
 	"templates.primary-secondary.keyboardVertical": "Utilice la flecha hacia arriba o hacia abajo para ajustar el tamaño de los paneles de visualización"

package/lang/fr-fr.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Visibilité",
 	"components.tabs.next": "Faire défiler vers l'avant",
 	"components.tabs.previous": "Faire défiler vers l'arrière",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Vue fractionnée réglable",
 	"templates.primary-secondary.keyboardHorizontal": "Flèche vers la gauche ou vers la droite pour régler la taille des panneaux d’affichage",
 	"templates.primary-secondary.keyboardVertical": "Flèche vers le haut ou vers le bas pour régler la taille des panneaux d’affichage"

package/lang/fr.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Visibilité",
 	"components.tabs.next": "Défilement avant",
 	"components.tabs.previous": "Défilement arrière",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Vue partagée réglable",
 	"templates.primary-secondary.keyboardHorizontal": "Utiliser la flèche vers la gauche ou vers la droite pour régler la taille des volets d'affichage",
 	"templates.primary-secondary.keyboardVertical": "Flèche vers le haut ou vers le bas pour régler la taille des volets d'affichage"

package/lang/hi.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "दृश्यता",
 	"components.tabs.next": "आगे स्क्रॉल करें",
 	"components.tabs.previous": "पीछे स्क्रॉल करें",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "समायोजन योग्य विभाजन दृश्य",
 	"templates.primary-secondary.keyboardHorizontal": "दृश्य पैनल्स का आकार समायोजित करने के लिए तीर बाएँ या दाएँ करें",
 	"templates.primary-secondary.keyboardVertical": "दृश्य पैनल्स का आकार समायोजित करने के लिए तीर ऊपर या नीचे करें"

package/lang/ja.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "表示",
 	"components.tabs.next": "前方にスクロール",
 	"components.tabs.previous": "後方にスクロール",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "調整可能な分割ビュー",
 	"templates.primary-secondary.keyboardHorizontal": "左矢印または右矢印を使用して、ビューパネルのサイズを調整します",
 	"templates.primary-secondary.keyboardVertical": "上矢印または下矢印を使用して、ビューパネルのサイズを調整します"

package/lang/ko.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "표시여부",
 	"components.tabs.next": "앞으로 스크롤",
 	"components.tabs.previous": "뒤로 스크롤",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "조정 가능한 분할 보기",
 	"templates.primary-secondary.keyboardHorizontal": "왼쪽 또는 오른쪽 화살표로 보기 패널의 크기 조정",
 	"templates.primary-secondary.keyboardVertical": "위 또는 아래 화살표로 보기 패널의 크기 조정"

package/lang/nl.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Zichtbaarheid",
 	"components.tabs.next": "Naar voren scrollen",
 	"components.tabs.previous": "Naar achteren scrollen",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Instelbare gesplitste weergave",
 	"templates.primary-secondary.keyboardHorizontal": "Pijl naar links of rechts om de grootte van de weergavevensters aan te passen",
 	"templates.primary-secondary.keyboardVertical": "Pijl omhoog of omlaag om de grootte van de weergavevensters aan te passen"

package/lang/pt.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Visibilidade",
 	"components.tabs.next": "Ir para frente",
 	"components.tabs.previous": "Ir para trás",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Exibição dividida ajustável",
 	"templates.primary-secondary.keyboardHorizontal": "Use a seta para a esquerda ou para a direita para ajustar o tamanho dos painéis de exibição",
 	"templates.primary-secondary.keyboardVertical": "Use a seta para cima ou para baixo para ajustar o tamanho dos painéis de exibição"

package/lang/sv.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Synlighet",
 	"components.tabs.next": "Bläddra framåt",
 	"components.tabs.previous": "Bläddra bakåt",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Justerbar delad vy",
 	"templates.primary-secondary.keyboardHorizontal": "Pil vänster eller höger för att justera storleken på vypaneler",
 	"templates.primary-secondary.keyboardVertical": "Pil upp eller ned för att justera storleken på vypaneler"

package/lang/tr.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Görünürlük",
 	"components.tabs.next": "İleri Kaydır",
 	"components.tabs.previous": "Geri Kaydır",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Ayarlanabilir Bölünmüş Görüntü",
 	"templates.primary-secondary.keyboardHorizontal": "Görüntü panellerinin boyutunu ayarlamak için sol veya sağ okları kullanın",
 	"templates.primary-secondary.keyboardVertical": "Görüntü panellerinin boyutunu ayarlamak için yukarı veya aşağı okları kullanın"

package/lang/zh-cn.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "可见性",
 	"components.tabs.next": "向前滚动",
 	"components.tabs.previous": "向后滚动",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "可调分屏视图",
 	"templates.primary-secondary.keyboardHorizontal": "向左或向右箭头可调整视图面板的大小",
 	"templates.primary-secondary.keyboardVertical": "向上或向下箭头可调整视图面板的大小"

package/lang/zh-tw.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "能見度",
 	"components.tabs.next": "向前捲動",
 	"components.tabs.previous": "向後捲動",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "可調整的分割檢視",
 	"templates.primary-secondary.keyboardHorizontal": "向左或向右箭頭可調整檢視面板的大小",
 	"templates.primary-secondary.keyboardVertical": "向上或向下箭頭可調整檢視面板的大小"

package/package.json

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