@brightspace-ui/core 2.150.1 → 2.150.3

package/components/inputs/input-date-range.js

@@ -170,8 +170,8 @@ class InputDateRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 	render() {
 		const startDateInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-date-range-start');
 		const endDateInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-date-range-end');
-		const tooltipStart = (this.validationError && !this.startOpened && !this.childErrors.has(startDateInput)) ? html`<d2l-tooltip align="start" announced for="${this._startInputId}" state="error">${this.validationError}</d2l-tooltip>` : null;
-		const tooltipEnd = (this.validationError && !this.endOpened && !this.childErrors.has(endDateInput)) ? html`<d2l-tooltip align="start" announced for="${this._endInputId}" state="error">${this.validationError}</d2l-tooltip>` : null;
+		const tooltipStart = (this.validationError && !this.startOpened && !this.childErrors.has(startDateInput)) ? html`<d2l-tooltip align="start" announced for="${this._startInputId}" state="error" class="vdiff-target">${this.validationError}</d2l-tooltip>` : null;
+		const tooltipEnd = (this.validationError && !this.endOpened && !this.childErrors.has(endDateInput)) ? html`<d2l-tooltip align="start" announced for="${this._endInputId}" state="error" class="vdiff-target">${this.validationError}</d2l-tooltip>` : null;
 		return html`
 			${tooltipStart}
 			${tooltipEnd}
@@ -187,7 +187,7 @@ class InputDateRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 					<d2l-input-date
 						?novalidate="${this.noValidate}"
 						@change="${this._handleChange}"
-						class="d2l-input-date-range-start"
+						class="d2l-input-date-range-start vdiff-target"
 						@d2l-input-date-dropdown-toggle="${this._handleDropdownToggle}"
 						?disabled="${this.disabled}"
 						.forceInvalid=${this.invalid}
@@ -205,7 +205,7 @@ class InputDateRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 					<d2l-input-date
 						?novalidate="${this.noValidate}"
 						@change="${this._handleChange}"
-						class="d2l-input-date-range-end"
+						class="d2l-input-date-range-end vdiff-target"
 						@d2l-input-date-dropdown-toggle="${this._handleDropdownToggle}"
 						?disabled="${this.disabled}"
 						.forceInvalid=${this.invalid}

package/components/inputs/input-date.js

@@ -241,10 +241,11 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		const icon = (this.invalid || this.childErrors.size > 0)
 			? html`<d2l-icon icon="tier1:alert" slot="left" style="${styleMap({ color: 'var(--d2l-color-cinnabar)' })}"></d2l-icon>`
 			: html`<d2l-icon icon="tier1:calendar" slot="left"></d2l-icon>`;
-		const errorTooltip = (this.validationError && !this.opened && this.childErrors.size === 0) ? html`<d2l-tooltip align="start" announced for="${this._inputId}" state="error">${this.validationError}</d2l-tooltip>` : null;
+		const errorTooltip = (this.validationError && !this.opened && this.childErrors.size === 0) ? html`<d2l-tooltip align="start" announced for="${this._inputId}" state="error" class="vdiff-target">${this.validationError}</d2l-tooltip>` : null;
 
 		const dropdownContent = this._dropdownFirstOpened ? html`
 			<d2l-dropdown-content
+				class="vdiff-target"
 				@d2l-dropdown-close="${this._handleDropdownClose}"
 				@d2l-dropdown-open="${this._handleDropdownOpen}"
 				@d2l-dropdown-focus-enter="${this._handleFocusTrapEnter}"
@@ -281,7 +282,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 					aria-invalid="${this.invalid ? 'true' : 'false'}"
 					@blur="${this._handleInputTextBlur}"
 					@change="${this._handleChange}"
-					class="d2l-dropdown-opener"
+					class="d2l-dropdown-opener vdiff-target"
 					instructions="${ifDefined((this._showInfoTooltip && !errorTooltip && !this.invalid && this.childErrors.size === 0 && this._inputTextFocusShowTooltip) ? this.localize(`${this._namespace}.openInstructions`, { format: shortDateFormat }) : undefined)}"
 					description="${ifDefined(this.emptyText ? this.emptyText : undefined)}"
 					?disabled="${this.disabled}"

package/components/list/README.md

@@ -100,7 +100,7 @@ When using `d2l-list`, the `grid` attribute will enable the table-like keyboard
 
 ## List [d2l-list]
 
-The `d2l-list` is the container to create a styled list of items using `d2l-list-item` or `d2l-list-item-button`. It provides the appropriate `list` semantics as well as options for displaying separators, etc.
+The `d2l-list` is the container to create a styled list of items using `d2l-list-item` or `d2l-list-item-button`. It provides the appropriate `list` semantics as well as options for displaying separators, breakpoints for responsiveness, etc.
 
 <!-- docs: demo code properties name:d2l-list display:block autoSize:false size:medium -->
 ```html
@@ -133,6 +133,7 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
 
 | Property | Type | Description |
 |---|---|---|
+| `breakpoints` | Array | Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used. |
 | `drag-multiple` | Boolean | Whether the user can drag multiple items |
 | `grid` | Boolean | Enables keyboard grid for supported list items. See [Accessibility](#accessibility). |
 | `label` | String | 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. |
@@ -146,6 +147,22 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
 - `d2l-list-selection-changes`: dispatched once for a set of selection state changes (ex. select-all); event detail includes an array of objects where each object contains the `key` and `selected` state for each changed item
 <!-- docs: end hidden content -->
 
+### Breakpoints Property
+
+- `breakpoints` (Array): Breakpoints for responsiveness (`[842, 636, 580, 0]`), in pixels. There are four different breakpoints and only the four largest breakpoints will be used. If less breakpoints are used, then skip a middle breakpoint so that the first and last breakpoints will map to the largest and smallest layouts.
+  - Breakpoint 0
+    - Image: max dimensions: `width: 90px` and `height: 52px` and has `18px margin` from the main content;
+    - default break: `x < 580px` where `x` is the width of the component.
+  - Breakpoint 1
+    - Image: max dimensions: `width: 120px` and `height: 71px` and has `20px margin` from the main content;
+    - default break: `581px < x < 636px` where `x` is the width of the component.
+  - Breakpoint 2
+    - Image: max dimensions: `width: 180px` and `height: 102px` and has `20px margin` from the main content;
+    - default break: `637px < x < 842px`  where `x` is the width of the component.
+  - Breakpoint 3
+    - Image: max dimensions: `width: 216px` and `height: 120px` and has `20px margin` from the main content;
+    - default break: `843px < x`  where `x` is the width of the component.
+
 ### Methods
 
 - `getItems()` (Array): returns the list items within the list
@@ -380,7 +397,7 @@ The `d2l-list-controls` component can be placed in the `d2l-list`'s `controls` s
 
 ## List Item [d2l-list-item]
 
-The `d2l-list-item` provides the appropriate `listitem` semantics for children within a list. It also provides some basic layout, breakpoints for responsiveness, a navigation link for the primary action, and selection.
+The `d2l-list-item` provides the appropriate `listitem` semantics for children within a list. It also provides some basic layout, a navigation link for the primary action, and selection.
 
 <!-- docs: demo code properties name:d2l-list-item autoSize:false size:small -->
 ```html
@@ -410,7 +427,6 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 
 | Property | Type | Description |
 |---|---|---|
-| `breakpoints` | Array | Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used. |
 | `draggable` |  Boolean | Whether the item is draggable |
 | `drag-handle-text` | String | The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode. |
 | `drag-target-handle-only` | Boolean | Make the drag target the drag handle only. |
@@ -441,22 +457,6 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 - `d2l-list-item-expand-collapse-toggled`: dispatched when the item's expand/collapse toggle is clicked
 <!-- docs: end hidden content -->
 
-### Breakpoints Property
-
-- `breakpoints` (Array): Breakpoints for responsiveness (`[842, 636, 580, 0]`), in pixels. There are four different breakpoints and only the four largest breakpoints will be used. If less breakpoints are used, then skip a middle breakpoint so that the first and last breakpoints will map to the largest and smallest layouts.
-  - Breakpoint 0
-    - Image: max dimensions: `width: 90px` and `height: 52px` and has `18px margin` from the main content;
-    - default break: `x < 580px` where `x` is the width of the component.
-  - Breakpoint 1
-    - Image: max dimensions: `width: 120px` and `height: 71px` and has `20px margin` from the main content;
-    - default break: `581px < x < 636px` where `x` is the width of the component.
-  - Breakpoint 2
-    - Image: max dimensions: `width: 180px` and `height: 102px` and has `20px margin` from the main content;
-    - default break: `637px < x < 842px`  where `x` is the width of the component.
-  - Breakpoint 3
-    - Image: max dimensions: `width: 216px` and `height: 120px` and has `20px margin` from the main content;
-    - default break: `843px < x`  where `x` is the width of the component.
-
 ## Button List Item [d2l-list-item-button]
 
 The `d2l-list-item-button` provides the same functionality as `d2l-list-item` except with button semantics for its primary action.
@@ -484,7 +484,6 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
 
 | Property | Type | Description |
 |---|---|---|
-| `breakpoints` | Array | Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used. |
 | `button-disabled` | Boolean | Disables the primary action button |
 | `draggable` |  Boolean | Whether the item is draggable |
 | `drag-handle-text` | String | The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode. |

package/components/list/demo/list.html

@@ -162,6 +162,52 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Breakpoints on List</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-list breakpoints="[1170, 391, 0, 0]">
+						<d2l-list-item color="#00ff00">
+							<div style="background: blue; height: 400px; width: 400px;" slot="illustration"></div>
+							<d2l-list-item-content>
+								<div>Introductory Pirate Ipsum</div>
+								<div slot="supporting-info">Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters.</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item>
+							<div style="background: blue; height: 400px; width: 400px;" slot="illustration"></div>
+							<d2l-list-item-content>
+								<div>Introductory Pirate Ipsum</div>
+								<div slot="supporting-info">Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters.</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+					</d2l-list>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Breakpoints on List Item</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-list>
+						<d2l-list-item color="#00ff00" breakpoints="[1170, 391, 0, 0]">
+							<div style="background: blue; height: 400px; width: 400px;" slot="illustration"></div>
+							<d2l-list-item-content>
+								<div>Introductory Pirate Ipsum</div>
+								<div slot="supporting-info">Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters.</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item>
+							<div style="background: blue; height: 400px; width: 400px;" slot="illustration"></div>
+							<d2l-list-item-content>
+								<div>Introductory Pirate Ipsum</div>
+								<div slot="supporting-info">Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters.</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+					</d2l-list>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 
 	</body>

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

@@ -17,7 +17,6 @@ import { ListItemDragDropMixin } from './list-item-drag-drop-mixin.js';
 import { ListItemExpandCollapseMixin } from './list-item-expand-collapse-mixin.js';
 import { ListItemRoleMixin } from './list-item-role-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import ResizeObserver from 'resize-observer-polyfill';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
@@ -39,18 +38,6 @@ function addTabListener() {
 
 let hasDisplayedKeyboardTooltip = false;
 
-const ro = new ResizeObserver(entries => {
-	entries.forEach(entry => {
-		if (!entry || !entry.target || !entry.target.resizedCallback) {
-			return;
-		}
-		entry.target.resizedCallback(entry.contentRect && entry.contentRect.width);
-	});
-});
-
-const defaultBreakpoints = [842, 636, 580, 0];
-const SLIM_COLOR_BREAKPOINT = 400;
-
 /**
  * @property label - The hidden label for the checkbox and expand collapse control
  */
@@ -68,8 +55,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 	static get properties() {
 		return {
 			/**
-			 * Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.
-			 * @type {array}
+			 * @ignore
 			 */
 			breakpoints: { type: Array },
 			/**
@@ -92,7 +78,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			 * @type {'normal'|'none'}
 			 */
 			paddingType: { type: String, attribute: 'padding-type' },
-			_breakpoint: { type: Number },
 			_displayKeyboardTooltip: { type: Boolean },
 			_hasColorSlot: { type: Boolean, reflect: true, attribute: '_has-color-slot' },
 			_hovering: { type: Boolean, reflect: true },
@@ -103,7 +88,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			_highlighting: { type: Boolean, reflect: true },
 			_hasNestedList: { state: true },
 			_siblingHasColor: { state: true },
-			_slimColor: { state: true }
 		};
 	}
 
@@ -219,16 +203,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				border-radius: 6px;
 				flex-grow: 0;
 				flex-shrink: 0;
-				margin-right: 0.9rem;
-				max-height: 2.6rem;
-				max-width: 4.5rem;
+				margin-inline-end: var(--d2l-list-item-illustration-margin-inline-end, 0.9rem);
+				max-height: var(--d2l-list-item-illustration-max-height, 2.6rem);
+				max-width: var(--d2l-list-item-illustration-max-width, 4.5rem);
 				overflow: hidden;
 			}
-			:host([dir="rtl"]) [slot="content"] ::slotted([slot="illustration"]),
-			:host([dir="rtl"]) [slot="content"] .d2l-list-item-illustration > * {
-				margin-left: 0.9rem;
-				margin-right: 0;
-			}
 			[slot="content"] ::slotted(d2l-icon[slot="illustration"]),
 			[slot="content"] .d2l-list-item-illustration d2l-icon {
 				border-radius: 0;
@@ -257,40 +236,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin-right: 0;
 			}
 
-			[data-breakpoint="1"] ::slotted([slot="illustration"]),
-			[data-breakpoint="1"] .d2l-list-item-illustration > * {
-				margin-right: 1rem;
-				max-height: 3.55rem;
-				max-width: 6rem;
-			}
-			:host([dir="rtl"]) [data-breakpoint="1"] ::slotted([slot="illustration"]),
-			:host([dir="rtl"]) [data-breakpoint="1"] .d2l-list-item-illustration > * {
-				margin-left: 1rem;
-				margin-right: 0;
-			}
-			[data-breakpoint="2"] ::slotted([slot="illustration"]),
-			[data-breakpoint="2"] .d2l-list-item-illustration > * {
-				margin-right: 1rem;
-				max-height: 5.1rem;
-				max-width: 9rem;
-			}
-			:host([dir="rtl"]) [data-breakpoint="2"] ::slotted([slot="illustration"]),
-			:host([dir="rtl"]) [data-breakpoint="2"] .d2l-list-item-illustration > * {
-				margin-left: 1rem;
-				margin-right: 0;
-			}
-			[data-breakpoint="3"] ::slotted([slot="illustration"]),
-			[data-breakpoint="3"] .d2l-list-item-illustration > * {
-				margin-right: 1rem;
-				max-height: 6rem;
-				max-width: 10.8rem;
-			}
-			:host([dir="rtl"]) [data-breakpoint="3"] ::slotted([slot="illustration"]),
-			:host([dir="rtl"]) [data-breakpoint="3"] .d2l-list-item-illustration > * {
-				margin-left: 1rem;
-				margin-right: 0;
-			}
-
 			d2l-selection-input {
 				margin: 0.55rem 0.55rem 0.55rem 0;
 			}
@@ -394,13 +339,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			}
 
 			.d2l-list-item-color-inner {
-				border-radius: 6px;
+				border-radius: var(--d2l-list-item-color-border-radius, 6px);
 				height: 100%;
-				width: 6px;
-			}
-			.d2l-list-item-color-inner.d2l-list-item-color-slim {
-				border-radius: 3px;
-				width: 3px;
+				width: var(--d2l-list-item-color-width, 6px);
 			}
 			.d2l-list-item-color-outer {
 				padding: 2px 12px 1px 0;
@@ -437,27 +378,13 @@ export const ListItemMixin = superclass => class extends composeMixins(
 
 	constructor() {
 		super();
-		this.breakpoints = defaultBreakpoints;
 		this.noPrimaryAction = false;
 		this.paddingType = 'normal';
-		this._breakpoint = 0;
 		this._contentId = getUniqueId();
 		this._displayKeyboardTooltip = false;
 		this._hasColorSlot = false;
 		this._hasNestedList = false;
 		this._siblingHasColor = false;
-		this._slimColor = false;
-	}
-
-	get breakpoints() {
-		return this._breakpoints;
-	}
-
-	set breakpoints(value) {
-		const oldValue = this._breakpoints;
-		if (value !== defaultBreakpoints) this._breakpoints = value.sort((a, b) => b - a).slice(0, 4);
-		else this._breakpoints = defaultBreakpoints;
-		this.requestUpdate('breakpoints', oldValue);
 	}
 
 	get color() {
@@ -474,7 +401,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 
 	connectedCallback() {
 		super.connectedCallback();
-		ro.observe(this);
 		if (this.role === 'rowgroup') {
 			addTabListener();
 		}
@@ -483,15 +409,13 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		}
 	}
 
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		ro.unobserve(this);
-	}
+	/** TODO: remove this once usage of breakpoints on d2l-list-item has been moved to the list */
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
 
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		if (changedProperties.has('breakpoints')) {
-			this.resizedCallback(this.offsetWidth);
+		if (changedProperties.has('breakpoints') && this.breakpoints) {
+			const parentList = this.getRootList();
+			if (!parentList.getAttribute('breakpoints')) parentList.breakpoints = this.breakpoints;
 		}
 	}
 
@@ -524,18 +448,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._highlighting = true;
 	}
 
-	resizedCallback(width) {
-		this._slimColor = (width < SLIM_COLOR_BREAKPOINT);
-
-		const lastBreakpointIndexToCheck = 3;
-		this.breakpoints.some((breakpoint, index) => {
-			if (width >= breakpoint || index > lastBreakpointIndexToCheck) {
-				this._breakpoint = lastBreakpointIndexToCheck - index - (lastBreakpointIndexToCheck - this.breakpoints.length + 1) * index;
-				return true;
-			}
-		});
-	}
-
 	scrollToAndHighlight(alignToTop = true) {
 		this.scrollToItem(alignToTop);
 		setTimeout(() => {
@@ -691,7 +603,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		};
 		const colorClasses = {
 			'd2l-list-item-color-inner': true,
-			'd2l-list-item-color-slim': this._slimColor,
 			'd2l-skeletize': this.color
 		};
 
@@ -704,7 +615,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				@focusin="${this._onFocusIn}"
 				@focusout="${this._onFocusOut}"
 				class="${classMap(classes)}"
-				data-breakpoint="${this._breakpoint}"
 				data-separators="${ifDefined(this._separators)}"
 				?grid-active="${this.role === 'rowgroup'}"
 				?no-primary-action="${this.noPrimaryAction}">

package/components/list/list.js

@@ -3,6 +3,7 @@ import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { SelectionInfo, SelectionMixin } from '../selection/selection-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { PageableMixin } from '../paging/pageable-mixin.js';
+import ResizeObserver from 'resize-observer-polyfill';
 import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
 const keyCodes = {
@@ -10,6 +11,15 @@ const keyCodes = {
 };
 
 export const listSelectionStates = SelectionInfo.states;
+const DEFAULT_BREAKPOINTS = [842, 636, 580, 0];
+const SLIM_COLOR_BREAKPOINT = 400;
+
+const ro = new ResizeObserver(entries => {
+	entries.forEach(entry => {
+		if (!entry?.target?.resizedCallback) return;
+		entry.target.resizedCallback(entry.contentRect?.width);
+	});
+});
 
 /**
  * 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.
@@ -22,6 +32,11 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 
 	static get properties() {
 		return {
+			/**
+			 * Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.
+			 * @type {array}
+			 */
+			breakpoints: { type: Array },
 			/**
 			 * Whether the user can drag multiple items
 			 * @type {boolean}
@@ -47,13 +62,20 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 			 * @type {'all'|'between'|'none'}
 			 * @default "all"
 			 */
-			separators: { type: String, reflect: true }
+			separators: { type: String, reflect: true },
+			_breakpoint: { type: Number, reflect: true },
+			_slimColor: { type: Boolean, reflect: true, attribute: '_slim-color' }
 		};
 	}
 
 	static get styles() {
 		return css`
 			:host {
+				--d2l-list-item-color-border-radius: 6px;
+				--d2l-list-item-color-width: 6px;
+				--d2l-list-item-illustration-margin-inline-end: 0.9rem;
+				--d2l-list-item-illustration-max-height: 2.6rem;
+				--d2l-list-item-illustration-max-width: 4.5rem;
 				display: block;
 			}
 			:host(:not([slot="nested"])) > .d2l-list-content {
@@ -69,11 +91,31 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 				margin-left: 0.9rem;
 				margin-right: 0.9rem;
 			}
+			:host([_breakpoint="1"]) {
+				--d2l-list-item-illustration-margin-inline-end: 1rem;
+				--d2l-list-item-illustration-max-height: 3.55rem;
+				--d2l-list-item-illustration-max-width: 6rem;
+			}
+			:host([_breakpoint="2"]) {
+				--d2l-list-item-illustration-margin-inline-end: 1rem;
+				--d2l-list-item-illustration-max-height: 5.1rem;
+				--d2l-list-item-illustration-max-width: 9rem;
+			}
+			:host([_breakpoint="3"]) {
+				--d2l-list-item-illustration-margin-inline-end: 1rem;
+				--d2l-list-item-illustration-max-height: 6rem;
+				--d2l-list-item-illustration-max-width: 10.8rem;
+			}
+			:host([_slim-color]) {
+				--d2l-list-item-color-border-radius: 3px;
+				--d2l-list-item-color-width: 3px;
+			}
 		`;
 	}
 
 	constructor() {
 		super();
+		this.breakpoints = DEFAULT_BREAKPOINTS;
 		this.dragMultiple = false;
 		this.extendSeparators = false;
 		this.grid = false;
@@ -81,22 +123,39 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		this._childHasColor = false;
 		this._childHasExpandCollapseToggle = false;
 
+		this._breakpoint = 0;
+		this._slimColor = false;
+		this._width = 0;
+
 		this._listChildrenUpdatedSubscribers = new SubscriberRegistryController(this, 'list-child-status', {
 			onSubscribe: this._updateActiveSubscriber.bind(this),
 			updateSubscribers: this._updateActiveSubscribers.bind(this)
 		});
 	}
 
+	get breakpoints() {
+		return this._breakpoints;
+	}
+
+	set breakpoints(value) {
+		const oldValue = this._breakpoints;
+		if (value !== DEFAULT_BREAKPOINTS) this._breakpoints = value.sort((a, b) => b - a).slice(0, 4);
+		else this._breakpoints = DEFAULT_BREAKPOINTS;
+		this.requestUpdate('breakpoints', oldValue);
+	}
+
 	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-property-change', (e) => this._handleListItemPropertyChange(e));
+		ro.observe(this);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._intersectionObserver) this._intersectionObserver.disconnect();
+		ro.unobserve(this);
 	}
 
 	firstUpdated(changedProperties) {
@@ -143,6 +202,13 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		`;
 	}
 
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has('breakpoints') && changedProperties.get('breakpoints') !== undefined) {
+			this.resizedCallback(this.offsetWidth, true);
+		}
+	}
+
 	getItems(slot) {
 		if (!this.shadowRoot) return;
 		if (!slot) slot = this.shadowRoot.querySelector('slot:not([name])');
@@ -198,6 +264,21 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		return new SelectionInfo(keys, selectionInfo.state);
 	}
 
+	resizedCallback(width, breakpointsChanged) {
+		if (this._width === width && !breakpointsChanged) return;
+		this._width = width;
+
+		this._slimColor = (width < SLIM_COLOR_BREAKPOINT);
+
+		const lastBreakpointIndexToCheck = 3;
+		this.breakpoints.some((breakpoint, index) => {
+			if (width >= breakpoint || index > lastBreakpointIndexToCheck) {
+				this._breakpoint = lastBreakpointIndexToCheck - index - (lastBreakpointIndexToCheck - this.breakpoints.length + 1) * index;
+				return true;
+			}
+		});
+	}
+
 	_getItemByIndex(index) {
 		const items = this.getItems() || [];
 		return items[index];

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

@@ -227,6 +227,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		if (this.keyboardTooltipItem && !this.keyboardTooltipShown) {
 			tooltip = html`
 				<d2l-tooltip
+					class="vdiff-target"
 					align="start"
 					@d2l-tooltip-hide="${this._handleKeyboardTooltipHide}"
 					@d2l-tooltip-show="${this._handleKeyboardTooltipShow}"
@@ -236,7 +237,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		} else if (options.hasTruncationTooltip || hasDescription) {
 			const tooltipHeader = hasDescription ? html`<div class="d2l-heading-4">${tagContent}</div>` : tagContent;
 			tooltip = html`
-				<d2l-tooltip for="${this._id}" ?show-truncated-only="${!hasDescription}">
+				<d2l-tooltip class="vdiff-target" for="${this._id}" ?show-truncated-only="${!hasDescription}">
 					${tooltipHeader}
 					${hasDescription ? options.description : nothing}
 				</d2l-tooltip>`;

package/custom-elements.json

@@ -7904,12 +7904,6 @@
           "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
           "type": "string"
         },
-        {
-          "name": "breakpoints",
-          "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
-          "type": "array",
-          "default": "[842,636,580,0]"
-        },
         {
           "name": "no-primary-action",
           "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
@@ -8006,13 +8000,6 @@
           "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
           "type": "string"
         },
-        {
-          "name": "breakpoints",
-          "attribute": "breakpoints",
-          "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
-          "type": "array",
-          "default": "[842,636,580,0]"
-        },
         {
           "name": "noPrimaryAction",
           "attribute": "no-primary-action",
@@ -8258,12 +8245,6 @@
           "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
           "type": "string"
         },
-        {
-          "name": "breakpoints",
-          "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
-          "type": "array",
-          "default": "[842,636,580,0]"
-        },
         {
           "name": "no-primary-action",
           "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
@@ -8367,13 +8348,6 @@
           "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
           "type": "string"
         },
-        {
-          "name": "breakpoints",
-          "attribute": "breakpoints",
-          "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
-          "type": "array",
-          "default": "[842,636,580,0]"
-        },
         {
           "name": "noPrimaryAction",
           "attribute": "no-primary-action",
@@ -8741,12 +8715,6 @@
           "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
           "type": "string"
         },
-        {
-          "name": "breakpoints",
-          "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
-          "type": "array",
-          "default": "[842,636,580,0]"
-        },
         {
           "name": "no-primary-action",
           "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
@@ -8855,13 +8823,6 @@
           "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
           "type": "string"
         },
-        {
-          "name": "breakpoints",
-          "attribute": "breakpoints",
-          "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
-          "type": "array",
-          "default": "[842,636,580,0]"
-        },
         {
           "name": "noPrimaryAction",
           "attribute": "no-primary-action",
@@ -9025,6 +8986,12 @@
           "type": "'all'|'between'|'none'",
           "default": "\"\\\"all\\\"\""
         },
+        {
+          "name": "breakpoints",
+          "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
+          "type": "array",
+          "default": "[842,636,580,0]"
+        },
         {
           "name": "drag-multiple",
           "description": "Whether the user can drag multiple items",
@@ -9074,6 +9041,13 @@
           "type": "'all'|'between'|'none'",
           "default": "\"\\\"all\\\"\""
         },
+        {
+          "name": "breakpoints",
+          "attribute": "breakpoints",
+          "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
+          "type": "array",
+          "default": "[842,636,580,0]"
+        },
         {
           "name": "dragMultiple",
           "attribute": "drag-multiple",

package/package.json

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