@brightspace-ui/core 3.237.5 → 3.238.0

package/components/backdrop/backdrop-dirty-overlay.js

@@ -0,0 +1,77 @@
+import '../button/button-subtle.js';
+import { css, html, LitElement } from 'lit';
+import { bodyCompactStyles } from '../typography/styles.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
+
+const overlayStyles = css`
+	.action-slot::slotted(*) {
+		display: inline;
+	}
+	:host {
+		align-items: center;
+		border: 1px solid var(--d2l-color-mica);
+		border-radius: 0.3rem;
+		column-gap: 0.75rem;
+		display: block;
+		display: flex;
+		flex-wrap: wrap;
+		padding: 1.2rem 1.5rem;
+	}
+
+	.d2l-backdrop-dirty-overlay {
+		--d2l-focus-ring-offset: 3px;
+		border-radius: 0.3rem;
+		margin: 0;
+	}
+
+	.d2l-backdrop-dirty-overlay-action {
+		vertical-align: top;
+	}
+`;
+
+/**
+ * The `d2l-backdrop-dirty-overlay` component is used to render a dialog with text and an action over another element that needs to be refreshed after user input.
+ */
+class BackdropDirtyOverlay extends LitElement {
+
+	static get properties() {
+		return {
+			/**
+			 * The text displayed on the dirty state overlay.
+			 * @type {string}
+			 */
+			description: { type: String, required: true },
+
+			/**
+			 * The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.
+			 * @type {string}
+			 */
+			action: { type: String, required: true }
+		};
+	}
+
+	static get styles() {
+		return [bodyCompactStyles, overlayStyles, getFocusRingStyles('.d2l-backdrop-dirty-overlay')];
+	}
+
+	render() {
+		return html`
+			<p class="d2l-body-compact d2l-backdrop-dirty-overlay" tabindex="-1">${this.description}</p>
+			<d2l-button-subtle
+				class="d2l-backdrop-dirty-overlay-action"
+				@click=${this.#handleActionClick}
+				h-align="text"
+				text=${this.action}>
+			</d2l-button-subtle>
+		`;
+	}
+	#handleActionClick(e) {
+		e.stopPropagation();
+
+		/** Dispatched when the action button on the overlay is clicked */
+		this.dispatchEvent(new CustomEvent('d2l-backdrop-dirty-overlay-action', { bubbles: true, composed: true }));
+	}
+
+}
+
+customElements.define('d2l-backdrop-dirty-overlay', BackdropDirtyOverlay);

package/components/backdrop/backdrop-loading.js

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
 import '../loading-spinner/loading-spinner.js';
+import './backdrop-dirty-overlay.js';
 import '../offscreen/offscreen.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { getComposedChildren, getComposedParent } from '../../helpers/dom.js';
@@ -14,6 +15,7 @@ const BACKDROP_DELAY_MS = 800;
 const FADE_DURATION_MS = 500;
 const SPINNER_DELAY_MS = FADE_DURATION_MS;
 const LOADING_ANNOUNCEMENT_DELAY = 1000;
+const DIRTY_ANNOUNCEMENT_DELAY = 1000;
 
 const LOADING_SPINNER_SIZE = 50;
 
@@ -27,15 +29,36 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 	static get properties() {
 		return {
 			/**
-			 * Used to control whether the loading backdrop is shown
-			 * @type {boolean}
+			 * The state of data in the element being overlaid. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed
+			 * @type {'clean'|'dirty'|'loading'}
 			 */
-			shown: { type: Boolean },
+			dataState: {
+				reflect: true,
+				type: String
+			},
 			/**
 			 * Used to identify content that the backdrop should make inert
-			 * @type {boolean}
+			 * @type {string}
 			 */
 			for: { type: String, required: true },
+			/**
+			 * The text displayed on the dirty state overlay when the 'dirty' dataState is set.
+			 * @type {string}
+			 */
+			dirtyText: {
+				reflect: true,
+				attribute: 'dirty-text',
+				type: String
+			},
+			/**
+			 * The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.
+			 * @type {string}
+			 */
+			dirtyButtonText: {
+				reflect: true,
+				attribute: 'dirty-button-text',
+				type: String
+			},
 			_state: { type: String, reflect: true },
 			_spinnerTop: { state: true },
 			_ariaContent: { state: true }
@@ -83,9 +106,28 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 				opacity: 1;
 				transition: opacity ${FADE_DURATION_MS}ms ease-in ${SPINNER_DELAY_MS}ms;
 			}
-
-			:host([_state="hiding"]) .d2l-backdrop,
+			:host([_state="shown"][dataState="dirty"]) d2l-loading-spinner,
 			:host([_state="hiding"]) d2l-loading-spinner {
+				opacity: 0;
+				transition: opacity ${FADE_DURATION_MS}ms ease-out;
+			}
+
+			d2l-backdrop-dirty-overlay {
+				background-color: var(--d2l-theme-backdrop-dialog-color);
+				height: fit-content;
+				justify-content: center;
+				opacity: 0;
+				position: relative;
+				top: 0;
+				z-index: 1000;
+			}
+			:host([_state="shown"]) d2l-backdrop-dirty-overlay {
+				opacity: 1;
+				transition: opacity ${FADE_DURATION_MS}ms ease-in;
+			}
+			:host([_state="shown"][dataState="loading"]) d2l-backdrop-dirty-overlay,
+			:host([_state="hiding"]) d2l-backdrop-dirty-overlay {
+				opacity: 0;
 				transition: opacity ${FADE_DURATION_MS}ms ease-out;
 			}
 
@@ -97,9 +139,10 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 
 	constructor() {
 		super();
-		this.shown = false;
+		this.dataState = 'clean';
 		this._state = 'hidden';
 		this._spinnerTop = 0;
+		this._dirtyDialogTop = 0;
 		this._ariaContent = '';
 	}
 
@@ -111,40 +154,60 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 					html`<div id="visible">
 						<div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#handleTransitionEnd}"></div>
 						<d2l-loading-spinner style=${styleMap({ top: `${this._spinnerTop}px` })} size="${LOADING_SPINNER_SIZE}"></d2l-loading-spinner>
+						${this.#renderDirtyOverlay()}
 					</div>`
 			}
 			<d2l-offscreen style=${styleMap(forcedOffscreenSizelessStyles)} aria-live="polite">${this._ariaContent}</d2l-offscreen>
 		`;
 	}
 	updated(changedProperties) {
+		if (changedProperties.get('_state') && changedProperties.get('_state') === 'hidden')
+		{
+			this.#centerLoadingSpinnerAndDialog();
+		}
+
 		if (changedProperties.has('_state')) {
 			if (this._state === 'showing') {
-				setTimeout(() => {
-					if (this._state === 'showing') this._state = 'shown';
-				}, BACKDROP_DELAY_MS);
+				if (this.dataState === 'loading') {
+					setTimeout(() => {
+						if (this._state === 'showing') this._state = 'shown';
+					}, BACKDROP_DELAY_MS);
+				} else {
+					this._state = 'shown';
+				}
 			}
 		}
-
-		if (changedProperties.has('shown') && (
-			(reduceMotion && this._state === 'shown') || (!reduceMotion && this._state === 'showing')
-		)) {
-			this.#centerLoadingSpinner();
-		}
 	}
 	willUpdate(changedProperties) {
-		if (changedProperties.has('shown')) {
+		if (changedProperties.has('dataState') && changedProperties.get('dataState') !== undefined) {
 			this.#clearLiveArea();
-			if (this.shown) {
+
+			const oldState = changedProperties.get('dataState');
+			const newState = this.dataState;
+
+			// Calculate announcements
+			if (newState === 'loading') {
 				this.#setLiveArea(this.localize('components.backdrop-loading.loadingAnnouncement'), { delay: LOADING_ANNOUNCEMENT_DELAY });
-				this.#show();
-			} else if (changedProperties.get('shown') !== undefined) {
+			} else if (oldState === 'loading' && newState === 'clean') {
 				this.#setLiveArea(this.localize('components.backdrop-loading.loadingCompleteAnnouncement'));
+			} else if (newState === 'dirty') {
+				this.#setLiveArea(this.#renderDirtyOverlay(), { delay: DIRTY_ANNOUNCEMENT_DELAY });
+			}
+
+			// Update backdrop
+			if (oldState === 'clean') {
+				this.#show();
+			} else if (newState === 'clean') {
 				this.#fade();
+			} else if (oldState === 'loading' && newState === 'dirty') {
+				setTimeout(() => {
+					if (this._state === 'showing') this._state = 'shown';
+				}, BACKDROP_DELAY_MS);
 			}
 		}
 	}
 
-	#centerLoadingSpinner() {
+	async #centerLoadingSpinnerAndDialog() {
 		if (this._state === 'hidden') { return; }
 
 		const loadingSpinner = this.shadowRoot.querySelector('d2l-loading-spinner');
@@ -164,7 +227,13 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 		// Adjust for the size of the spinner
 		const spinnerSizeOffset = LOADING_SPINNER_SIZE / 2;
 
+		// Adjust for the size of the dirty dialog
+		await this.shadowRoot.querySelector('d2l-backdrop-dirty-overlay').getUpdateComplete();
+		await this.shadowRoot.querySelector('d2l-empty-state-action-button')?.getUpdateComplete();
+		const dirtyDialogSizeOffset = this.shadowRoot.querySelector('d2l-backdrop-dirty-overlay').getBoundingClientRect().height / 2;
+
 		this._spinnerTop = centeringOffset + topOffset - spinnerSizeOffset;
+		this._dirtyDialogTop = centeringOffset + topOffset - dirtyDialogSizeOffset;
 	}
 
 	#clearLiveArea() {
@@ -190,6 +259,7 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 			this._state = 'hiding';
 		}
 	}
+
 	#getBackdropTarget() {
 		const parent = getComposedParent(this);
 
@@ -203,11 +273,13 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 
 		return targetedChildren[0];
 	}
+
 	#handleTransitionEnd() {
 		if (this._state === 'hiding') {
 			this.#hide();
 		}
 	}
+
 	#hide() {
 		this._state = 'hidden';
 
@@ -215,9 +287,19 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 
 		if (containingBlock.dataset.initiallyInert !== '1') containingBlock.removeAttribute('inert');
 	}
+
+	#renderDirtyOverlay() {
+		return html`<d2l-backdrop-dirty-overlay
+			style=${styleMap({ top: `${this._dirtyDialogTop}px` })}
+			description="${this.dirtyText}"
+			action="${this.dirtyButtonText}"
+		></d2l-backdrop-dirty-overlay>`;
+	}
+
 	#setLiveArea(content, { delay } = {}) {
 		this.announcementTimeout = setTimeout(() => this._ariaContent = content, delay || 0);
 	}
+
 	#show() {
 		this._state = reduceMotion ? 'shown' : 'showing';
 

package/components/colors/colors.js

@@ -113,6 +113,7 @@ const lightVariables = new Map([
 	// figma - undefined
 	['--d2l-theme-backdrop-background-color', '--d2l-color-regolith'],
 	['--d2l-theme-backdrop-opacity', '0.7'],
+	['--d2l-theme-backdrop-dialog-color', '#ffffff'],
 	['--d2l-theme-background-color-interactive-faint-disabled', '#f9fbff80'], /* --d2l-theme-background-color-interactive-faint-default at 50% opacity, remove once color-mix is widely supported */
 	['--d2l-theme-badge-background-color', '--d2l-color-gypsum'],
 	['--d2l-theme-badge-text-color', '--d2l-theme-text-color-static-standard'],
@@ -187,6 +188,7 @@ const darkVariables = new Map([
 	// figma - undefined
 	['--d2l-theme-backdrop-background-color', '--d2l-color-ferrite'],
 	['--d2l-theme-backdrop-opacity', '0.7'],
+	['--d2l-theme-backdrop-dialog-color', '#ffffff'],
 	['--d2l-theme-background-color-interactive-faint-disabled', '#20212280'], /* --d2l-theme-background-color-interactive-faint-default at 50% opacity, remove once color-mix is widely supported */
 	['--d2l-theme-badge-background-color', '#303335'],
 	['--d2l-theme-badge-text-color', '--d2l-theme-text-color-static-standard'],

package/components/table/demo/table-test.js

@@ -14,6 +14,8 @@ import '../../selection/selection-action.js';
 import '../../selection/selection-action-dropdown.js';
 import '../../selection/selection-action-menu-item.js';
 import '../../selection/selection-input.js';
+import '../../inputs/input-radio.js';
+import '../../inputs/input-radio-group.js';
 
 import { css, html, nothing } from 'lit';
 import { tableStyles, TableWrapper } from '../table-wrapper.js';
@@ -81,11 +83,12 @@ class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')
 		this._data = data();
 		this._sortField = undefined;
 		this._sortDesc = false;
+		this.dataState = 'clean';
 	}
 
 	render() {
 		return html`
-			<d2l-table-wrapper item-count="${ifDefined(this.paging ? 500 : undefined)}">
+			<d2l-table-wrapper item-count="${ifDefined(this.paging ? 500 : undefined)}" dirty-text="This text indicates we're in the dirty state" dirty-button-text="Refresh">
 				<d2l-table-controls slot="controls" ?no-sticky="${!this.stickyControls}" select-all-pages-allowed>
 					<d2l-selection-action
 						text="Sticky controls"
@@ -97,11 +100,11 @@ class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')
 						icon="tier1:${this.stickyHeaders ? 'check' : 'close-default'}"
 						@d2l-selection-action-click="${this._toggleStickyHeaders}"
 					></d2l-selection-action>
-					<d2l-selection-action
-						text="Loading"
-						icon="tier1:${this.loading ? 'check' : 'close-default'}"
-						@d2l-selection-action-click="${this._toggleLoading}"
-					></d2l-selection-action>
+					<d2l-input-radio-group style="align-content:center;max-height:42px" label="Date State" horizontal label-hidden name="dataState" @change=${this._handleDataStateChange}>
+						<d2l-input-radio label="Clean" value="clean" ?checked=${this.dataState === 'clean'}></d2l-input-radio>
+						<d2l-input-radio label="Dirty" value="dirty" ?checked=${this.dataState === 'dirty'}></d2l-input-radio>
+						<d2l-input-radio label="Loading" value="loading" ?checked=${this.dataState === 'loading'}></d2l-input-radio>
+					</d2l-input-radio-group>
 				</d2l-table-controls>
 
 				<table class="d2l-table">
@@ -167,6 +170,10 @@ class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')
 		`;
 	}
 
+	_handleDataStateChange(e) {
+		this.dataState = e.detail.value;
+	}
+
 	async _handlePagerLoadMore(e) {
 		const pageSize = e.target.pageSize;
 		await new Promise(resolve => setTimeout(resolve, 1000));
@@ -256,9 +263,6 @@ class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')
 		this.requestUpdate();
 	}
 
-	_toggleLoading() {
-		this.loading = !this.loading;
-	}
 	_toggleStickyControls() {
 		this.stickyControls = !this.stickyControls;
 	}

package/components/table/table-wrapper.js

@@ -8,8 +8,11 @@ import { getFlag } from '../../helpers/flags.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { isPopoverSupported } from '../popover/popover-mixin.js';
 import { PageableMixin } from '../paging/pageable-mixin.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 import { SelectionMixin } from '../selection/selection-mixin.js';
 
+const enableStickyScrollyFix = getFlag('table-sticky-scrolly-fix', true);
+
 export const tableStyles = css`
 	.d2l-table {
 		border-collapse: separate; /* needed to override reset stylesheets */
@@ -264,7 +267,7 @@ const SELECTORS = {
  * @slot controls - Slot for `d2l-table-controls` to be rendered above the table
  * @slot pager - Slot for `d2l-pager-load-more` to be rendered below the table
  */
-export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
+export class TableWrapper extends PropertyRequiredMixin(PageableMixin(SelectionMixin(LitElement))) {
 
 	static get properties() {
 		return {
@@ -311,13 +314,39 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 				type: Boolean,
 			},
 			/**
-			 * Whether or not to display a loading backdrop. Set this property when the content in the table is being refreshed.
-			 * @type {boolean}
+			 * The state of data in the table. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed
+			 * @type {'clean'|'dirty'|'loading'}
 			 */
-			loading: {
+			dataState: {
 				reflect: true,
-				type: Boolean
+				type: String
+			},
+			/**
+			 * The text displayed on the dirty state overlay when the 'dirty' dataState is set.
+			 * @type {string}
+			 */
+			dirtyText: {
+				reflect: true,
+				attribute: 'dirty-text',
+				required: {
+					dependentProps: ['dataState'],
+					validator: (_value, elem, hasValue) => hasValue || elem.dataState !== 'dirty'
+				},
+				type: String
 			},
+			/**
+			 * The text displayed on the button dirty state overlay when the 'dirty' dataState is set.
+			 * @type {string}
+			 */
+			dirtyButtonText: {
+				reflect: true,
+				attribute: 'dirty-button-text',
+				required: {
+					dependentProps: ['dataState'],
+					validator: (_value, elem, hasValue) => hasValue || elem.dataState !== 'dirty'
+				},
+				type: String
+			}
 		};
 	}
 
@@ -388,7 +417,10 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 		this._tableIntersectionObserver = null;
 		this._tableMutationObserver = null;
 		this._tableScrollers = {};
-		this.loading = false;
+		this.dataState = 'clean';
+
+		this.dirtyText = null;
+		this.dirtyButtonText = null;
 
 		this._excludeStickyColumnsFromScrollCalculations = getFlag('GAUD-9530-exclude-sticky-columns-from-scroll-calculations', false);
 	}
@@ -422,7 +454,7 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 		const slot = html`
 			<div style="position:relative">
 				<slot id="table-slot" @slotchange="${this._handleSlotChange}"></slot>
-				<d2l-backdrop-loading for="table-slot" ?shown=${this.loading}></d2l-backdrop-loading>
+				<d2l-backdrop-loading @d2l-backdrop-dirty-overlay-action=${this._handleDirtyButton} for="table-slot" dataState=${this.dataState} dirty-text="${this.dirtyText}" dirty-button-text="${this.dirtyButtonText}"></d2l-backdrop-loading>
 			</div>
 		`;
 		const useScrollWrapper = this.stickyHeadersScrollWrapper || !this.stickyHeaders;
@@ -447,6 +479,10 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 		}
 	}
 
+	#hasIntersected = false;
+
+	#noScrollWidthTimeout = null;
+
 	_applyClassNames() {
 		if (!this._table) return;
 
@@ -545,6 +581,11 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 		this._handleControlsChange();
 	}
 
+	_handleDirtyButton() {
+		/** Dispatched when the action button on the dirty overlay is clicked */
+		this.dispatchEvent(new CustomEvent('d2l-table-dirty-button-clicked'));
+	}
+
 	_handlePopoverClose(e) {
 		this._updateStickyAncestor(e.target, false);
 	}
@@ -581,6 +622,7 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 				this._tableIntersectionObserver = new IntersectionObserver((entries) => {
 					entries.forEach((entry) => {
 						if (entry.isIntersecting) {
+							this.#hasIntersected = true;
 							this._handleTableChange();
 						}
 					});
@@ -647,11 +689,20 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 		const head = this._table.querySelector('thead');
 		const body = this._table.querySelector('tbody');
 
-		const maxScrollWidth = Math.max(head?.scrollWidth, body?.scrollWidth);
-		setTimeout(() => {
-			this._noScrollWidth = this.clientWidth === maxScrollWidth;
-		});
-		if (!head || !body || !this._table || !this.stickyHeaders || !this.stickyHeadersScrollWrapper || this._noScrollWidth) return;
+		if (enableStickyScrollyFix) {
+			clearTimeout(this.#noScrollWidthTimeout);
+			this.#noScrollWidthTimeout = setTimeout(() => {
+				const maxScrollWidth = Math.max(head?.scrollWidth, body?.scrollWidth);
+				this._noScrollWidth = (maxScrollWidth <= this.clientWidth);
+			});
+			if (!head || !body || !this.stickyHeaders || !this.stickyHeadersScrollWrapper || this._noScrollWidth || !this.#hasIntersected) return;
+		} else {
+			const maxScrollWidth = Math.max(head?.scrollWidth, body?.scrollWidth);
+			setTimeout(() => {
+				this._noScrollWidth = this.clientWidth === maxScrollWidth;
+			});
+			if (!head || !body || !this._table || !this.stickyHeaders || !this.stickyHeadersScrollWrapper || this._noScrollWidth) return;
+		}
 
 		const candidateRowHeadCells = [];
 

package/components/tabs/tab-mixin.js

@@ -39,11 +39,16 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 			:host {
 				box-sizing: border-box;
 				display: inline-block;
-				max-width: 200px;
+				max-width: 10rem;
 				outline: none;
 				position: relative;
 				vertical-align: middle;
 			}
+			@container tabs-container (width >= 615px) {
+				:host {
+					max-width: min(20rem, 40%);
+				}
+			}
 			:host([hidden]) {
 				display: none;
 			}

package/components/tabs/tabs.js

@@ -60,6 +60,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 			:host {
 				--d2l-tabs-background-color: var(--d2l-theme-background-color-base);
 				box-sizing: border-box;
+				container: tabs-container / inline-size;
 				display: block;
 				margin-bottom: 1.2rem;
 			}

package/custom-elements.json

@@ -186,6 +186,43 @@
         }
       ]
     },
+    {
+      "name": "d2l-backdrop-dirty-overlay",
+      "path": "./components/backdrop/backdrop-dirty-overlay.js",
+      "description": "The `d2l-backdrop-dirty-overlay` component is used to render a dialog with text and an action over another element that needs to be refreshed after user input.",
+      "attributes": [
+        {
+          "name": "description",
+          "description": "The text displayed on the dirty state overlay.",
+          "type": "string"
+        },
+        {
+          "name": "action",
+          "description": "The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "The text displayed on the dirty state overlay.",
+          "type": "string"
+        },
+        {
+          "name": "action",
+          "attribute": "action",
+          "description": "The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.",
+          "type": "string"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-backdrop-dirty-overlay-action",
+          "description": "Dispatched when the action button on the overlay is clicked"
+        }
+      ]
+    },
     {
       "name": "d2l-backdrop-loading",
       "path": "./components/backdrop/backdrop-loading.js",
@@ -194,13 +231,23 @@
         {
           "name": "for",
           "description": "Used to identify content that the backdrop should make inert",
-          "type": "boolean"
+          "type": "string"
         },
         {
-          "name": "shown",
-          "description": "Used to control whether the loading backdrop is shown",
-          "type": "boolean",
-          "default": "false"
+          "name": "dirty-text",
+          "description": "The text displayed on the dirty state overlay when the 'dirty' dataState is set.",
+          "type": "string"
+        },
+        {
+          "name": "dirty-button-text",
+          "description": "The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.",
+          "type": "string"
+        },
+        {
+          "name": "dataState",
+          "description": "The state of data in the element being overlaid. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed",
+          "type": "'clean'|'dirty'|'loading'",
+          "default": "\"clean\""
         }
       ],
       "properties": [
@@ -208,14 +255,26 @@
           "name": "for",
           "attribute": "for",
           "description": "Used to identify content that the backdrop should make inert",
-          "type": "boolean"
+          "type": "string"
         },
         {
-          "name": "shown",
-          "attribute": "shown",
-          "description": "Used to control whether the loading backdrop is shown",
-          "type": "boolean",
-          "default": "false"
+          "name": "dirtyText",
+          "attribute": "dirty-text",
+          "description": "The text displayed on the dirty state overlay when the 'dirty' dataState is set.",
+          "type": "string"
+        },
+        {
+          "name": "dirtyButtonText",
+          "attribute": "dirty-button-text",
+          "description": "The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.",
+          "type": "string"
+        },
+        {
+          "name": "dataState",
+          "attribute": "dataState",
+          "description": "The state of data in the element being overlaid. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed",
+          "type": "'clean'|'dirty'|'loading'",
+          "default": "\"clean\""
         }
       ]
     },
@@ -14176,10 +14235,20 @@
           "default": "\"default\""
         },
         {
-          "name": "loading",
-          "description": "Whether or not to display a loading backdrop. Set this property when the content in the table is being refreshed.",
-          "type": "boolean",
-          "default": "false"
+          "name": "dataState",
+          "description": "The state of data in the table. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed",
+          "type": "'clean'|'dirty'|'loading'",
+          "default": "\"clean\""
+        },
+        {
+          "name": "dirty-text",
+          "description": "The text displayed on the dirty state overlay when the 'dirty' dataState is set.",
+          "type": "string"
+        },
+        {
+          "name": "dirty-button-text",
+          "description": "The text displayed on the button dirty state overlay when the 'dirty' dataState is set.",
+          "type": "string"
         },
         {
           "name": "item-count",
@@ -14258,11 +14327,23 @@
           "default": "\"default\""
         },
         {
-          "name": "loading",
-          "attribute": "loading",
-          "description": "Whether or not to display a loading backdrop. Set this property when the content in the table is being refreshed.",
-          "type": "boolean",
-          "default": "false"
+          "name": "dataState",
+          "attribute": "dataState",
+          "description": "The state of data in the table. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed",
+          "type": "'clean'|'dirty'|'loading'",
+          "default": "\"clean\""
+        },
+        {
+          "name": "dirtyText",
+          "attribute": "dirty-text",
+          "description": "The text displayed on the dirty state overlay when the 'dirty' dataState is set.",
+          "type": "string"
+        },
+        {
+          "name": "dirtyButtonText",
+          "attribute": "dirty-button-text",
+          "description": "The text displayed on the button dirty state overlay when the 'dirty' dataState is set.",
+          "type": "string"
         },
         {
           "name": "itemCount",
@@ -14283,6 +14364,12 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "d2l-table-dirty-button-clicked",
+          "description": "Dispatched when the action button on the dirty overlay is clicked"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -14600,10 +14687,20 @@
           "default": "\"default\""
         },
         {
-          "name": "loading",
-          "description": "Whether or not to display a loading backdrop. Set this property when the content in the table is being refreshed.",
-          "type": "boolean",
-          "default": "false"
+          "name": "dataState",
+          "description": "The state of data in the table. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed",
+          "type": "'clean'|'dirty'|'loading'",
+          "default": "\"clean\""
+        },
+        {
+          "name": "dirty-text",
+          "description": "The text displayed on the dirty state overlay when the 'dirty' dataState is set.",
+          "type": "string"
+        },
+        {
+          "name": "dirty-button-text",
+          "description": "The text displayed on the button dirty state overlay when the 'dirty' dataState is set.",
+          "type": "string"
         },
         {
           "name": "item-count",
@@ -14647,11 +14744,23 @@
           "default": "\"default\""
         },
         {
-          "name": "loading",
-          "attribute": "loading",
-          "description": "Whether or not to display a loading backdrop. Set this property when the content in the table is being refreshed.",
-          "type": "boolean",
-          "default": "false"
+          "name": "dataState",
+          "attribute": "dataState",
+          "description": "The state of data in the table. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed",
+          "type": "'clean'|'dirty'|'loading'",
+          "default": "\"clean\""
+        },
+        {
+          "name": "dirtyText",
+          "attribute": "dirty-text",
+          "description": "The text displayed on the dirty state overlay when the 'dirty' dataState is set.",
+          "type": "string"
+        },
+        {
+          "name": "dirtyButtonText",
+          "attribute": "dirty-button-text",
+          "description": "The text displayed on the button dirty state overlay when the 'dirty' dataState is set.",
+          "type": "string"
         },
         {
           "name": "itemCount",
@@ -14672,6 +14781,12 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "d2l-table-dirty-button-clicked",
+          "description": "Dispatched when the action button on the dirty overlay is clicked"
+        }
+      ],
       "slots": [
         {
           "name": "",

package/mixins/property-required/property-required-mixin.js

@@ -40,7 +40,7 @@ export const PropertyRequiredMixin = dedupeMixin(superclass => class extends sup
 	updated(changedProperties) {
 		super.updated(changedProperties);
 		this._requiredProperties.forEach((value, name) => {
-			const doValidate = changedProperties.has(name) || value.dependentProps.includes(name);
+			const doValidate = changedProperties.has(name) || value.dependentProps.find((prop) => changedProperties.has(prop));
 			if (doValidate) this._validateRequiredProperty(name);
 		});
 	}
@@ -79,6 +79,7 @@ export const PropertyRequiredMixin = dedupeMixin(superclass => class extends sup
 		if (!this._requiredProperties.has(name) || !this.isConnected) return;
 
 		const info = this._requiredProperties.get(name);
+		if (!info.timeout) return;
 		clearTimeout(info.timeout);
 		info.timeout = null;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.237.5",
+  "version": "3.238.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -57,7 +57,7 @@
     "@web/dev-server": "^0.4",
     "chalk": "^5",
     "eslint": "^9",
-    "eslint-config-brightspace": "^2.0.0",
+    "eslint-config-brightspace": "^3",
     "eslint-plugin-unicorn": "^64",
     "glob-all": "^3",
     "messageformat-validator": "^3.0.0-beta",