@brightspace-ui/core 3.227.14 → 3.227.16

package/components/backdrop/backdrop-loading.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import '../loading-spinner/loading-spinner.js';
 import { css, html, LitElement, nothing } from 'lit';
-import { getOffsetParent } from '../../helpers/dom.js';
+import { getComposedChildren, getComposedParent } from '../../helpers/dom.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const BACKDROP_DELAY_MS = 800;
@@ -25,6 +25,11 @@ class LoadingBackdrop extends LitElement {
 			 * @type {boolean}
 			 */
 			shown: { type: Boolean },
+			/**
+			 * Used to identify content that the backdrop should make inert
+			 * @type {boolean}
+			 */
+			for: { type: String },
 			_state: { type: String, reflect: true },
 			_spinnerTop: { state: true }
 		};
@@ -156,6 +161,19 @@ class LoadingBackdrop extends LitElement {
 			this._state = 'hiding';
 		}
 	}
+	#getBackdropTarget() {
+		const parent = getComposedParent(this);
+
+		if (!this.for) { return parent; }
+
+		const targetedChildren = getComposedChildren(
+			parent,
+			(elem) => elem.id === this.for,
+			false
+		);
+
+		return targetedChildren.length === 0 ? parent : targetedChildren[0];
+	}
 	#handleTransitionEnd() {
 		if (this._state === 'hiding') {
 			this.#hide();
@@ -164,14 +182,14 @@ class LoadingBackdrop extends LitElement {
 	#hide() {
 		this._state = 'hidden';
 
-		const containingBlock = getOffsetParent(this);
+		const containingBlock = this.#getBackdropTarget();
 
 		if (containingBlock.dataset.initiallyInert !== '1') containingBlock.removeAttribute('inert');
 	}
 	#show() {
 		this._state = reduceMotion ? 'shown' : 'showing';
 
-		const containingBlock = getOffsetParent(this);
+		const containingBlock = this.#getBackdropTarget();
 
 		if (containingBlock.getAttribute('inert') !== null) containingBlock.dataset.initiallyInert = '1';
 

package/components/collapsible-panel/collapsible-panel-summary-item.js

@@ -29,7 +29,7 @@ class CollapsiblePanelSummaryItem extends SkeletonMixin(LitElement) {
 	static get styles() {
 		return [super.styles, bodySmallStyles, css`
 			:host {
-				color: var(--d2l-color-galena);
+				color: var(--d2l-theme-text-color-static-faint);
 				display: block;
 			}
 			:host([hidden]) {

package/components/collapsible-panel/collapsible-panel.js

@@ -111,7 +111,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(LitElement)) {
 	static get styles() {
 		return [super.styles, heading1Styles, heading2Styles, heading3Styles, heading4Styles, css`
 			:host {
-				--d2l-collapsible-panel-focus-outline: solid 2px var(--d2l-color-celestine);
+				--d2l-collapsible-panel-focus-outline: solid 2px var(--d2l-theme-border-color-focus);
 				--d2l-collapsible-panel-spacing-inline: 0.9rem;
 				--d2l-collapsible-panel-header-spacing: 0.6rem;
 				--d2l-collapsible-panel-transition-time: 0.2s;
@@ -125,16 +125,16 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(LitElement)) {
 				--d2l-collapsible-panel-spacing-inline: 2rem;
 			}
 			.d2l-collapsible-panel {
-				border: 1px solid var(--d2l-color-mica);
+				border: 1px solid var(--d2l-theme-border-color-standard);
 				border-radius: 0.4rem;
 			}
 			:host(:not([expanded]):not([skeleton])) .d2l-collapsible-panel {
 				cursor: pointer;
 			}
 			:host([type="subtle"]) .d2l-collapsible-panel {
-				background-color: white;
+				background-color: var(--d2l-theme-background-color-base);
 				border: none;
-				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
+				box-shadow: var(--d2l-theme-shadow-attached);
 			}
 			:host([type="inline"]) .d2l-collapsible-panel {
 				border-left: none;
@@ -174,7 +174,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(LitElement)) {
 				outline-offset: -2px;
 			}
 			.d2l-collapsible-panel.scrolled .d2l-collapsible-panel-header {
-				background-color: white;
+				background-color: var(--d2l-theme-background-color-base);
 				box-shadow: 0 8px 12px -9px rgba(0, 0, 0, 0.3);
 				position: sticky;
 				top: 0;
@@ -234,7 +234,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(LitElement)) {
 				gap: 0.3rem;
 			}
 			.d2l-collapsible-panel-header-actions::after {
-				border-inline-end: 1px solid var(--d2l-color-mica);
+				border-inline-end: 1px solid var(--d2l-theme-border-color-standard);
 				content: "";
 				display: flex;
 				margin: 0.3rem;
@@ -300,7 +300,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(LitElement)) {
 				/* stylelint-enable */
 			}
 			.d2l-collapsible-panel-divider {
-				border-bottom: 1px solid var(--d2l-color-mica);
+				border-bottom: 1px solid var(--d2l-theme-border-color-standard);
 				margin-inline: var(--d2l-collapsible-panel-spacing-inline);
 				opacity: 1;
 			}

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

@@ -0,0 +1,142 @@
+import '../../colors/colors.js';
+import { css, html, LitElement } from 'lit';
+import { descriptionListStyles } from '../description-list-wrapper.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+class TestDescriptionList extends LitElement {
+	static get properties() {
+		return {
+			/**
+			 * Width for component to use a stacked layout
+			 * @type {number}
+			 */
+			breakpoint: { type: Number, reflect: true },
+			/**
+			 * Force the component to always use a stacked layout; will override breakpoint attribute
+			 * @type {boolean}
+			 */
+			forceStacked: { type: Boolean, reflect: true, attribute: 'force-stacked' },
+			/**
+			 * @ignore
+			 */
+			type: { type: String, reflect: true },
+		};
+	}
+
+	static get styles() {
+		return [descriptionListStyles, css`
+			.user {
+				align-items: center;
+				display: flex;
+				gap: 0.5rem;
+			}
+			.avatar {
+				align-items: center;
+				background-color: var(--d2l-color-cinnabar-minus-1);
+				border-radius: 0.25rem;
+				color: white;
+				display: flex;
+				font-size: 0.7rem;
+				font-weight: 700;
+				height: 1.5rem;
+				justify-content: center;
+				width: 1.5rem;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.type = 'default';
+	}
+
+	render() {
+		return html`
+			<d2l-dl-wrapper
+				breakpoint="${ifDefined(this.breakpoint)}"
+				?force-stacked="${this.forceStacked}"
+			>
+				${this._renderExample()}
+			</d2l-dl-wrapper>
+		`;
+	}
+
+	_renderExample() {
+		if (this.type === 'default') {
+			return html`
+				<dl>
+					<dt>Course Name</dt>
+					<dd>Brightspace 101B</dd>
+
+					<dt>Course Code</dt>
+					<dd>BSPC 101B</dd>
+
+					<dt>Start Date</dt>
+					<dd>June 14 2022</dd>
+
+					<dt>Semester</dt>
+					<dd>2022 Summer</dd>
+				</dl>
+			`;
+		}
+
+		if (this.type === 'long') {
+			return html`
+					<dl>
+						<dt>Course Code That Represents The Course as a Short String</dt>
+						<dd>A short string that represents the course, often with important information such as section or room number.</dd>
+
+						<dt>Availability Dates</dt>
+						<dd>The start and end date for the course. Learners can't access courses outside these dates.</dd>
+					</dl>
+			`;
+		}
+
+		if (this.type === 'activity-display') {
+			return html`
+				<dl>
+					<dt>Submission type</dt>
+					<dd>File submission</dd>
+
+					<dt>Files allowed per submission</dt>
+					<dd>Unlimited</dd>
+
+					<dt>File extension</dt>
+					<dd>PDF</dd>
+
+					<dt>Allowed Submissions</dt>
+					<dd>Only one submission allowed</dd>
+				</dl>
+			`;
+		}
+
+		if (this.type === 'bulk-course-import') {
+			return html`
+				<dl>
+					<dt>Course code</dt>
+					<dd>fd6b9fd8-29bd-44ef-8322-d6b379b71411</dd>
+
+					<dt>Course name</dt>
+					<dd>Telkom MOMP Course 1</dd>
+
+					<dt>Course ID</dt>
+					<dd>250003</dd>
+				</dl>
+			`;
+		}
+
+		if (this.type === 'slotted') {
+			return html`
+				<dl style="align-items: center">
+					<dt>User</dt>
+					<dd><div class="user"><div class="avatar">JS</div>John Smith</div></dd>
+
+					<dt>Submitted</dt>
+					<dd>Dec 30, 2021 5:34 PM</dd>
+				</dl>
+			`;
+		}
+	}
+}
+
+customElements.define('d2l-test-dl', TestDescriptionList);

package/components/description-list/demo/description-list.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+
+			import './description-list-test.js';
+		</script>
+	</head>
+	<body unresolved>
+		<d2l-demo-page page-title="d2l-description-list">
+
+			<h2>Short</h2>
+			<d2l-demo-snippet full-width>
+				<d2l-test-dl></d2l-test-dl>
+			</d2l-demo-snippet>
+
+			<h2>Long</h2>
+			<d2l-demo-snippet full-width>
+				<d2l-test-dl type="long" breakpoint="300"></d2l-test-dl>
+			</d2l-demo-snippet>
+
+			<h2>Stacked</h2>
+			<d2l-demo-snippet fullscreen>
+				<d2l-test-dl type="long" force-stacked></d2l-test-dl>
+			</d2l-demo-snippet>
+
+			<h2>Activity Display</h2>
+			<d2l-demo-snippet full-width>
+				<d2l-test-dl type="activity-display"></d2l-test-dl>
+			</d2l-demo-snippet>
+
+			<h2>Bulk Course Import</h2>
+			<d2l-demo-snippet full-width>
+				<d2l-test-dl type="bulk-course-import"></d2l-test-dl>
+			</d2l-demo-snippet>
+
+			<h2>Slotted content</h2>
+			<d2l-demo-snippet full-width>
+				<d2l-test-dl type="slotted"></d2l-test-dl>
+			</d2l-demo-snippet>
+
+		</d2l-demo-page>
+	</body>
+</html>

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

@@ -164,7 +164,6 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 	}
 
 	_renderCheckbox() {
-		/* eslint-disable lit/no-private-properties */
 		return this.selectable ? html`
 			<d2l-selection-input
 				@d2l-selection-change="${this._onCheckboxChange}"
@@ -181,7 +180,6 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 				?skeleton="${this.skeleton}">
 			</d2l-selection-input>
 		` : nothing;
-		/* eslint-enable */
 	}
 
 	_renderCheckboxAction(inner) {

package/components/selection/demo/demo-selection.js

@@ -0,0 +1,35 @@
+import { css, html, LitElement } from 'lit';
+import { PageableMixin } from '../../paging/pageable-mixin.js';
+import { SelectionMixin } from '../selection-mixin.js';
+
+class DemoBase extends LitElement {
+	static get styles() {
+		return css`
+			:host {
+				display: block;
+			}
+		`;
+	}
+	render() {
+		return html`
+			<slot></slot>
+		`;
+	}
+}
+
+class DemoSelection extends SelectionMixin(DemoBase) {}
+
+class DemoPageable extends PageableMixin(DemoBase) {
+	_getItemByIndex() {
+		return null;
+	}
+	_getItemShowingCount() {
+		return 3;
+	}
+}
+
+class DemoSelectionPageable extends SelectionMixin(DemoPageable) {}
+
+customElements.define('d2l-demo-selection', DemoSelection);
+customElements.define('d2l-demo-pageable', DemoPageable);
+customElements.define('d2l-demo-selection-pageable', DemoSelectionPageable);

package/components/selection/demo/selection.html

@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+			import '../../dropdown/dropdown-menu.js';
+			import '../../menu/menu.js';
+			import '../../paging/pager-load-more.js';
+			import '../selection-action.js';
+			import '../selection-action-dropdown.js';
+			import '../selection-action-menu-item.js';
+			import '../selection-controls.js';
+			import '../selection-input.js';
+			import '../selection-select-all.js';
+			import '../selection-summary.js';
+			import './demo-selection.js';
+		</script>
+		<style>
+			ul {
+				padding: 0;
+			}
+			li {
+				list-style-type: none;
+			}
+			d2l-selection-input {
+				margin-right: 10px;
+			}
+			[dir="rtl"] d2l-selection-input {
+				margin-left: 10px;
+				margin-right: 0;
+			}
+			.d2l-selection-collections {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+			}
+			.d2l-selection-collection {
+				display: flex;
+				flex-basis: 45%;
+				flex-direction: column;
+			}
+		</style>
+	</head>
+	<body unresolved>
+
+		<d2l-demo-page page-title="Selection Components">
+
+			<h2>Multiple Selection</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-selection>
+						<d2l-selection-controls>
+							<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" max-selection-count="2" requires-selection></d2l-selection-action>
+							<d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
+							<d2l-selection-action-dropdown text="Actions 1" requires-selection>
+								<d2l-dropdown-menu>
+									<d2l-menu label="Actions">
+										<d2l-selection-action-menu-item text="Action 1"></d2l-selection-action-menu-item>
+										<d2l-selection-action-menu-item text="Action 2"></d2l-selection-action-menu-item>
+									</d2l-menu>
+								</d2l-dropdown-menu>
+							</d2l-selection-action-dropdown>
+						</d2l-selection-controls>
+
+						<ul>
+							<li><d2l-selection-input key="geo" label="Geography" selected></d2l-selection-input>Geography</li>
+							<li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
+							<li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
+						</ul>
+					</d2l-demo-selection>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Single Selection</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-selection selection-single>
+						<d2l-selection-controls>
+							<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
+							<d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
+						</d2l-selection-controls>
+
+						<ul>
+							<li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>Geography</li>
+							<li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
+							<li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
+						</ul>
+					</d2l-demo-selection>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Selection controls with pageable + selection</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-selection-pageable item-count="5">
+						<d2l-selection-controls select-all-pages-allowed>
+							<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" max-selection-count="4" requires-selection></d2l-selection-action>
+							<d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
+						</d2l-selection-controls>
+
+						<ul>
+							<li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>Geography</li>
+							<li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
+							<li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
+						</ul>
+						<d2l-pager-load-more has-more page-size="1"></d2l-pager-load-more>
+					</d2l-demo-selection-pageable>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Selection controls with pageable (no selection)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-pageable item-count="5">
+						<d2l-selection-controls>
+							<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
+							<d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
+						</d2l-selection-controls>
+
+						<ul>
+							<li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>Geography</li>
+							<li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
+							<li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
+						</ul>
+						<d2l-pager-load-more has-more page-size="1"></d2l-pager-load-more>
+					</d2l-demo-pageable>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>No-sticky selection controls</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-selection>
+						<d2l-selection-controls no-sticky>
+							<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
+							<d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
+						</d2l-selection-controls>
+
+						<ul>
+							<li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>Geography</li>
+							<li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
+							<li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
+						</ul>
+					</d2l-demo-selection>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Selection Components Outside of Collection</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<div class="d2l-selection-collections">
+						<div class="d2l-selection-collection">
+							Pick Your Toppings
+							<d2l-selection-controls selection-for="collection-1" pageable-for="collection-1" select-all-pages-allowed>
+								<d2l-selection-action selection-for="collection-1" text="Add Note" icon="tier1:add-message"></d2l-selection-action>
+							</d2l-selection-controls>
+
+							<d2l-demo-selection-pageable id="collection-1" item-count="5">
+								<ul>
+									<li><d2l-selection-input key="let" label="Lettuce" selected></d2l-selection-input>Lettuce</li>
+									<li><d2l-selection-input key="tom" label="Tomato"></d2l-selection-input>Tomato</li>
+									<li><d2l-selection-input key="onion" label="Onion"></d2l-selection-input>Onion</li>
+								</ul>
+							</d2l-demo-selection-pageable>
+							<d2l-pager-load-more has-more page-size="1" pageable-for="collection-1"></d2l-pager-load-more>
+							<d2l-selection-action selection-for="collection-1" text="Save" requires-selection></d2l-selection-action>
+						</div>
+
+						<div class="d2l-selection-collection">
+							Pick Your Bread
+							<d2l-selection-controls selection-for="collection-2">
+								<d2l-selection-action selection-for="collection-2" text="Add Note" icon="tier1:add-message"></d2l-selection-action>
+							</d2l-selection-controls>
+							<d2l-demo-selection id="collection-2" selection-single>
+								<ul>
+									<li><d2l-selection-input key="it" label="Italian"></d2l-selection-input>Italian</li>
+									<li><d2l-selection-input key="ww" label="Whole Wheat"></d2l-selection-input>Whole Wheat</li>
+									<li><d2l-selection-input key="herb" label="Herb and Garlic"></d2l-selection-input>Herb and Garlic</li>
+								</ul>
+							</d2l-demo-selection>
+							<d2l-selection-action selection-for="collection-2" text="Save" requires-selection></d2l-selection-action>
+						</div>
+					</div>
+				</template>
+			</d2l-demo-snippet>
+
+		</d2l-demo-page>
+	</body>
+</html>

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

@@ -0,0 +1,271 @@
+import '../table-col-sort-button.js';
+import '../table-col-sort-button-item.js';
+import '../table-controls.js';
+import '../../button/button-icon.js';
+import '../../dropdown/dropdown-button-subtle.js';
+import '../../dropdown/dropdown-context-menu.js';
+import '../../dropdown/dropdown-menu.js';
+import '../../inputs/input-checkbox.js';
+import '../../inputs/input-text.js';
+import '../../menu/menu.js';
+import '../../menu/menu-item.js';
+import '../../paging/pager-load-more.js';
+import '../../selection/selection-action.js';
+import '../../selection/selection-action-dropdown.js';
+import '../../selection/selection-action-menu-item.js';
+import '../../selection/selection-input.js';
+
+import { css, html, nothing } from 'lit';
+import { tableStyles, TableWrapper } from '../table-wrapper.js';
+import { DemoPassthroughMixin } from '../../demo/demo-passthrough-mixin.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+const columns = ['Population', 'Size', 'Elevation'];
+const thText = ['Additional', 'Placeholder', 'Header', 'Row', 'Cells'];
+
+const data = () => [
+	{ name: 'Ottawa, Canada', data: { 'city': 'Ottawa', 'country': 'Canada', 'population': 994837, 'size': 2790, 'elevation': 70, 'latitude': 45.32, 'longitude': -75.71 }, selected: true },
+	{ name: 'Toronto, Canada', data: { 'city': 'Toronto', 'country': 'Canada', 'population': 2930000, 'size': 630, 'elevation': 76, 'latitude': 43.69, 'longitude': -79.41 }, selected: true },
+	{ name: 'Sydney, Australia', data: { 'city': 'Sydney', 'country': 'Australia', 'population': 5312000, 'size': 12368, 'elevation': 3, 'latitude': -33.86, 'longitude': 151.13 }, selected: false },
+	{ name: 'Cairo, Egypt', data: { 'city': 'Cairo', 'country': 'Egypt', 'population': 9540000, 'size': 3085, 'elevation': 23, 'latitude': 30.05, 'longitude': 31.25 }, selected: false },
+	{ name: 'Moscow, Russia', data: { 'city': 'Moscow', 'country': 'Russia', 'population': 12712305, 'size': 2511, 'elevation': 124, 'latitude': 55.70, 'longitude': 35.59 }, selected: false },
+	{ name: 'London, England', data: { 'city': 'London', 'country': 'England', 'population': 8982000, 'size': 1572, 'elevation': 11, 'latitude': 51.49, 'longitude': -0.12 }, selected: false },
+	{ name: 'Tokyo, Japan', data: { 'city': 'Tokyo', 'country': 'Japan', 'population': 13960000, 'size': 2194, 'elevation': 40, 'latitude': 35.68, 'longitude': 139.74 }, selected: false }
+];
+
+const formatter = new Intl.NumberFormat('en-US');
+
+class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper') {
+
+	static get properties() {
+		return {
+			paging: { type: Boolean, reflect: true },
+			multiLine: { type: Boolean, attribute: 'multi-line' },
+			resetOnSort: { type: Boolean, attribute: 'reset-on-sort' },
+			showButtons: { type: Boolean, attribute: 'show-buttons' },
+			stickyControls: { attribute: 'sticky-controls', type: Boolean, reflect: true },
+			visibleBackground: { attribute: 'visible-background', type: Boolean, reflect: true },
+			_data: { state: true },
+			_sortField: { state: true },
+			_sortDesc: { state: true }
+		};
+	}
+
+	static get styles() {
+		return [tableStyles, css`
+			:host {
+				display: block;
+			}
+			:host([visible-background]) {
+				--d2l-table-controls-background-color: #dddddd;
+			}
+			.d2l-table > * > tr > :has(d2l-button-icon),
+			.d2l-table > * > tr > :has(d2l-dropdown-context-menu) {
+				padding-block: 0;
+			}
+			.d2l-table > * > tr > :has(d2l-table-col-sort-button) d2l-button-icon,
+			.d2l-table > * > tr > :has(d2l-table-col-sort-button) d2l-dropdown-context-menu {
+				vertical-align: top;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+
+		this.multiLine = false;
+		this.paging = false;
+		this.showButtons = false;
+		this.stickyControls = false;
+		this.visibleBackground = false;
+		this._data = data();
+		this._sortField = undefined;
+		this._sortDesc = false;
+	}
+
+	render() {
+		return html`
+			<d2l-table-wrapper item-count="${ifDefined(this.paging ? 500 : undefined)}">
+				<d2l-table-controls slot="controls" ?no-sticky="${!this.stickyControls}" select-all-pages-allowed>
+					<d2l-selection-action
+						text="Sticky controls"
+						icon="tier1:${this.stickyControls ? 'check' : 'close-default'}"
+						@d2l-selection-action-click="${this._toggleStickyControls}"
+					></d2l-selection-action>
+					<d2l-selection-action
+						text="Sticky headers"
+						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-table-controls>
+
+				<table class="d2l-table">
+					<thead>
+						${this.multiLine ? html`
+							<tr>
+								<td scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></td>
+								${this._renderDoubleSortButton('City', 'Country')}
+								<th scope="col" colspan="${columns.length + 1}" sticky>
+									Metrics
+								</th>
+							</tr>
+							<tr>
+								<th scope="col" sticky></th>
+								${columns.map(columnHeading => this._renderSortButton(columnHeading))}
+								${this._renderMenuSortButton('Coordinates', ['Latitude', 'Longitude'])}
+							</tr>
+						` : html`
+							<tr>
+								<td scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></td>
+								${this._renderDoubleSortButton('City', 'Country')}
+								${columns.map(columnHeading => this._renderSortButton(columnHeading))}
+								${this._renderMenuSortButton('Coordinates', ['Latitude', 'Longitude'])}
+							</tr>
+						`}
+					</thead>
+					<tbody>
+						<tr class="d2l-table-header">
+							<th scope="col" sticky></th>
+							${thText.map(text => html`<th scope="col">${text}</th>`)}
+						</tr>
+						<tr header>
+							<th scope="col" sticky></th>
+							${thText.map(text => html`
+								<th scope="col">
+									${text}${text === 'Placeholder' && this.showButtons ? html`<d2l-button-icon text="Help" icon="tier1:help"></d2l-button-icon>` : nothing}
+								</th>
+							`)}
+						</tr>
+						${this._data.map(row => html`
+							<tr ?selected="${row.selected}" data-name="${row.name}">
+								<th scope="row" sticky>
+									<d2l-selection-input
+										@d2l-selection-change="${this._selectRow}"
+										?selected="${row.selected}"
+										key="${row.name}"
+										label="${row.name}">
+									</d2l-selection-input>
+								</th>
+								<th scope="row">${row.name}</th>
+								${columns.map(columnHeading => { const val = row.data[columnHeading.toLowerCase()]; return val ? html`<td>${formatter.format(val)}</td>` : null; }) }
+								<td>${[formatter.format(row.data.latitude), formatter.format(row.data.longitude)].join(', ')}</td>
+							</tr>
+						`)}
+					</tbody>
+				</table>
+				${this.paging ? html`<d2l-pager-load-more slot="pager"
+					has-more
+					page-size="3"
+					@d2l-pager-load-more="${this._handlePagerLoadMore}"
+				></d2l-pager-load-more>` : nothing}
+			</d2l-table-wrapper>
+		`;
+	}
+
+	async _handlePagerLoadMore(e) {
+		const pageSize = e.target.pageSize;
+		await new Promise(resolve => setTimeout(resolve, 1000));
+		const startIndex = this._data.length + 1;
+		for (let i = 0; i < pageSize; i++) {
+			this._data.push({ name: `City ${startIndex + i}, Country ${startIndex + i}`, data: { 'city': `City ${startIndex + i}`, 'country': `Country ${startIndex + i}`, 'population': 26320000, 'size': 6340, 'elevation': 4, 'latitude': 3, 'longitude': 3 }, selected: false });
+		}
+		this.requestUpdate();
+		e.detail.complete();
+	}
+
+	_handleSort(e) {
+		const field = e.target.innerText.toLowerCase();
+		const desc = e.target.hasAttribute('desc');
+		this._sortDesc = field === this._sortField ? !desc : false; // if sorting on same field then reverse, otherwise sort ascending
+		this._sortField = field;
+		this._handleSortData();
+	}
+
+	_handleSortComplex(e) {
+		this._sortField = e.target?.getAttribute('data-field');
+		this._sortDesc = e.target?.hasAttribute('data-desc');
+		this._handleSortData();
+	}
+
+	_handleSortData() {
+		this._data = (this.resetOnSort ? data() : this._data).sort((a, b) => {
+			if (this._sortDesc) {
+				if (a.data[this._sortField] > b.data[this._sortField]) return -1;
+				if (a.data[this._sortField] < b.data[this._sortField]) return 1;
+			} else {
+				if (a.data[this._sortField] < b.data[this._sortField]) return -1;
+				if (a.data[this._sortField] > b.data[this._sortField]) return 1;
+			}
+			return 0;
+		});
+	}
+
+	_renderDoubleSortButton(item1, item2) {
+		return html`
+			<th rowspan="${this.multiLine ? 2 : 1}" scope="col">
+				<d2l-table-col-sort-button
+					@click="${this._handleSort}"
+					?desc="${this._sortDesc}"
+					?nosort="${this._sortField !== item1.toLowerCase()}">${item1}</d2l-table-col-sort-button>
+				<d2l-table-col-sort-button
+					@click="${this._handleSort}"
+					?desc="${this._sortDesc}"
+					?nosort="${this._sortField !== item2.toLowerCase()}">${item2}</d2l-table-col-sort-button>
+			</th>
+		`;
+	}
+
+	_renderMenuSortButton(name, items) {
+		const noSort = !items.map(i => i.toLowerCase()).includes(this._sortField?.toLowerCase());
+		return html`
+			<th scope="col">
+				<d2l-table-col-sort-button
+					?desc="${this._sortDesc}"
+					?nosort="${noSort}">
+					<span>${name}</span>${items.map((item, idx) => html`
+					<d2l-table-col-sort-button-item slot="items" text="${item}, ascending" data-field="${item.toLowerCase()}" @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="${idx * 2 + 1}"></d2l-table-col-sort-button-item>
+					<d2l-table-col-sort-button-item slot="items" text="${item}, descending" data-field="${item.toLowerCase()}" data-desc @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="${idx * 2 + 2}"></d2l-table-col-sort-button-item>`)}
+				</d2l-table-col-sort-button>
+			</th>
+		`;
+	}
+
+	_renderSortButton(item) {
+		const noSort = this._sortField !== item.toLowerCase();
+		return html`
+			<th scope="col">
+				<d2l-table-col-sort-button
+					@click="${this._handleSort}"
+					source-type="numbers"
+					?desc="${this._sortDesc}"
+					?nosort="${noSort}">${item}</d2l-table-col-sort-button>
+				${item === 'Size' && this.showButtons ? html`<d2l-dropdown-context-menu text="Help"></d2l-dropdown-context-menu>` : nothing}
+			</th>
+		`;
+	}
+
+	_selectRow(e) {
+		const country = e.target.parentNode.parentNode.dataset.name;
+		const row = this._data.find(row => row.name === country);
+		row.selected = e.target.selected;
+		this.requestUpdate();
+	}
+
+	_toggleLoading() {
+		this.loading = !this.loading;
+	}
+	_toggleStickyControls() {
+		this.stickyControls = !this.stickyControls;
+	}
+
+	_toggleStickyHeaders() {
+		this.stickyHeaders = !this.stickyHeaders;
+	}
+
+}
+customElements.define('d2l-test-table', TestTable);

package/components/table/demo/table.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+			import './table-test.js';
+		</script>
+	</head>
+	<body unresolved>
+
+		<d2l-demo-page page-title="d2l-table">
+
+			<button id="print">Print</button>
+
+			<h2>Default</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-test-table type="default" sticky-controls show-buttons></d2l-test-table>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Default, Sticky</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-test-table type="default" sticky-headers sticky-controls></d2l-test-table>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Light</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-test-table type="light" sticky-controls show-buttons></d2l-test-table>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Light, Sticky</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-test-table type="light" sticky-headers sticky-controls></d2l-test-table>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Default, Paging</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-test-table type="default" sticky-controls paging></d2l-test-table>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Default, Paging, Reset on sort</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-test-table type="default" sticky-controls paging reset-on-sort></d2l-test-table>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Default, Visible controls background</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-test-table type="default" sticky-headers sticky-controls visible-background></d2l-test-table>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Default, Sticky columns</h2>
+			<d2l-demo-snippet overflow-hidden>
+				<template>
+					<div style="overflow: auto; width: 400px;">
+						<d2l-test-table type="default" sticky-headers sticky-controls></d2l-test-table>
+					</div>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Default with Scroll-Wrapper (no sticky)</h2>
+			<d2l-demo-snippet overflow-hidden>
+				<template>
+					<div style="height: 400px; overflow: auto;">
+						<d2l-test-table type="default" sticky-controls style="width: 400px;"></d2l-test-table>
+					</div>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Scroll-wrapper + sticky</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-test-table sticky-headers sticky-controls sticky-headers-scroll-wrapper style="width: 400px;"></d2l-test-table>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Multi-line with scroll-wrapper + sticky</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-test-table multi-line sticky-headers sticky-controls sticky-headers-scroll-wrapper style="width: 400px;"></d2l-test-table>
+				</template>
+			</d2l-demo-snippet>
+
+			<div style="margin-bottom: 1000px;"></div>
+		</d2l-demo-page>
+		<script>
+			document.querySelector('#print').addEventListener('click', () => {
+				window.print();
+			});
+		</script>
+	</body>
+</html>

package/components/table/table-wrapper.js

@@ -420,8 +420,10 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 
 	render() {
 		const slot = html`
-			<slot @slotchange="${this._handleSlotChange}"></slot>
-			<d2l-backdrop-loading ?shown=${this.loading}></d2l-backdrop-loading>
+			<div style="position:relative">
+				<slot id="table-slot" @slotchange="${this._handleSlotChange}"></slot>
+				<d2l-backdrop-loading for="table-slot" ?shown=${this.loading}></d2l-backdrop-loading>
+			</div>
 		`;
 		const useScrollWrapper = this.stickyHeadersScrollWrapper || !this.stickyHeaders;
 		return html`

package/custom-elements.json

@@ -191,6 +191,11 @@
       "path": "./components/backdrop/backdrop-loading.js",
       "description": "A component for displaying a semi-transparent backdrop and a loading spinner over the containing element",
       "attributes": [
+        {
+          "name": "for",
+          "description": "Used to identify content that the backdrop should make inert",
+          "type": "boolean"
+        },
         {
           "name": "shown",
           "description": "Used to control whether the loading backdrop is shown",
@@ -199,6 +204,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "for",
+          "attribute": "for",
+          "description": "Used to identify content that the backdrop should make inert",
+          "type": "boolean"
+        },
         {
           "name": "shown",
           "attribute": "shown",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.227.14",
+  "version": "3.227.16",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -40,6 +40,9 @@
     "!demo",
     "!test",
     "/components/demo",
+    "/components/description-list/demo",
+    "/components/selection/demo",
+    "/components/table/demo",
     "!/components/demo/demo"
   ],
   "author": "D2L Corporation",
@@ -54,7 +57,7 @@
     "chalk": "^5",
     "eslint": "^9",
     "eslint-config-brightspace": "^2.0.0",
-    "eslint-plugin-unicorn": "^63",
+    "eslint-plugin-unicorn": "^64",
     "glob-all": "^3",
     "messageformat-validator": "^3.0.0-beta",
     "rollup": "^4",