@brightspace-ui/core 2.85.9 → 2.86.1

package/components/list/demo/list.html

@@ -84,16 +84,16 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-list grid>
-						<d2l-list-item selectable key="1" label="Introductory Earth Sciences">
+						<d2l-list-item no-primary-action selectable key="1" label="Introductory Earth Sciences">
 							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
 							<div>
 								<d2l-list-item-content>
 									<div>Introductory Earth Sciences</div>
 								</d2l-list-item-content>
 								<d2l-tag-list description="Tags for this course">
-									<d2l-tag-list-item text="Science"></d2l-tag-list-item>
-									<d2l-tag-list-item text="Environment"></d2l-tag-list-item>
-									<d2l-tag-list-item text="Earth"></d2l-tag-list-item>
+									<d2l-tag-list-item text="Science" description="This is a description for the Science tag that is really really really long and will overflow onto the next line."></d2l-tag-list-item>
+									<d2l-tag-list-item text="Environment" description="This is a description for the Environment tag."></d2l-tag-list-item>
+									<d2l-tag-list-item text="Earth" description="This is a description for the Earth tag."></d2l-tag-list-item>
 								</d2l-tag-list>
 							</div>
 							<div slot="actions">
@@ -116,8 +116,8 @@
 									<div>Engineering Materials for Energy Systems</div>
 								</d2l-list-item-content>
 								<d2l-tag-list description="Tags for this course">
-									<d2l-tag-list-item text="Engineering"></d2l-tag-list-item>
-									<d2l-tag-list-item text="Energy Systems"></d2l-tag-list-item>
+									<d2l-tag-list-item text="Engineering" description="This is a description for the Engineering tag."></d2l-tag-list-item>
+									<d2l-tag-list-item text="Energy Systems" description="This is a description for the Energy Systems tag."></d2l-tag-list-item>
 								</d2l-tag-list>
 							</div>
 							<div slot="actions">
@@ -140,9 +140,9 @@
 									<div>Geomorphology and GIS</div>
 								</d2l-list-item-content>
 								<d2l-tag-list description="Tags for this course">
-									<d2l-tag-list-item text="Geology"></d2l-tag-list-item>
-									<d2l-tag-list-item text="GIS"></d2l-tag-list-item>
-									<d2l-tag-list-item text="Earth Sciences"></d2l-tag-list-item>
+									<d2l-tag-list-item text="Geology" description="This is a description for the Geology tag."></d2l-tag-list-item>
+									<d2l-tag-list-item text="GIS" description="This is a description for the GIS tag."></d2l-tag-list-item>
+									<d2l-tag-list-item text="Earth Sciences" description="This is a description for the Earth Sciences tag."></d2l-tag-list-item>
 								</d2l-tag-list>
 							</div>
 							<div slot="actions">

package/components/selection/selection-controls.js

@@ -26,7 +26,7 @@ export class SelectionControls extends SelectionObserverMixin(RtlMixin(LocalizeC
 			 * Disables sticky positioning for the controls
 			 * @type {boolean}
 			 */
-			noSticky: { type: Boolean, attribute: 'no-sticky' },
+			noSticky: { type: Boolean, attribute: 'no-sticky', reflect: true },
 			/**
 			 * Whether all pages can be selected
 			 * @type {boolean}
@@ -59,6 +59,7 @@ export class SelectionControls extends SelectionObserverMixin(RtlMixin(LocalizeC
 				bottom: -4px;
 				box-shadow: 0 8px 12px -9px rgba(0, 0, 0, 0.3);
 				clip: rect(30px, auto, 200px, auto);
+				display: var(--d2l-selection-controls-shadow-display, block);
 				height: 40px;
 				position: absolute;
 				width: 100%;

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

@@ -15,6 +15,7 @@ import { DemoPassthroughMixin } from '../../demo/demo-passthrough-mixin.js';
 import { RtlMixin } from '../../../mixins/rtl-mixin.js';
 
 const fruits = ['Apples', 'Oranges', 'Bananas'];
+const thText = ['Additional', 'Placeholder', 'Header', 'Row'];
 
 const data = () => [
 	{ name: 'Canada', fruit: { 'apples': 356863, 'oranges': 0, 'bananas': 0 }, selected: true },
@@ -32,6 +33,8 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 
 	static get properties() {
 		return {
+			stickyControls: { attribute: 'sticky-controls', type: Boolean, reflect: true },
+			visibleBackground: { attribute: 'visible-background', type: Boolean, reflect: true },
 			_data: { state: true },
 			_sortField: { attribute: false, type: String },
 			_sortDesc: { attribute: false, type: Boolean }
@@ -43,6 +46,9 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 			:host {
 				display: block;
 			}
+			:host([visible-background]) {
+				--d2l-table-controls-background-color: #dddddd;
+			}
 		`];
 	}
 
@@ -60,45 +66,37 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 		});
 		return html`
 			<d2l-table-wrapper>
-				<d2l-table-controls slot="controls" no-sticky>
-					<d2l-selection-action icon="tier1:plus-default" text="Add" @d2l-selection-action-click="${this._handleAddItem}"></d2l-selection-action>
-					<d2l-selection-action-dropdown text="Move To" requires-selection>
-						<d2l-dropdown-menu>
-							<d2l-menu label="Move To Options">
-								<d2l-menu-item text="Top of Quiz"></d2l-menu-item>
-								<d2l-menu-item text="Bottom of Quiz"></d2l-menu-item>
-								<d2l-menu-item text="Section">
-									<d2l-menu>
-										<d2l-menu-item text="Option 1"></d2l-menu-item>
-										<d2l-menu-item text="Option 2"></d2l-menu-item>
-									</d2l-menu>
-								</d2l-menu-item>
-							</d2l-menu>
-						</d2l-dropdown-menu>
-					</d2l-selection-action-dropdown>
-					<d2l-dropdown-button-subtle text="Actions">
-						<d2l-dropdown-menu>
-							<d2l-menu label="Actions">
-								<d2l-selection-action-menu-item text="Bookmark (requires selection)" requires-selection></d2l-selection-action-menu-item>
-								<d2l-selection-action-menu-item text="Advanced"></d2l-selection-action-menu-item>
-							</d2l-menu>
-						</d2l-dropdown-menu>
-					</d2l-dropdown-button-subtle>
-					<d2l-selection-action icon="tier1:gear" text="Settings" requires-selection></d2l-selection-action>
+				<d2l-table-controls slot="controls" ?no-sticky="${!this.stickyControls}">
+					<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-table-controls>
 
 				<table class="d2l-table">
 					<thead>
 						<tr>
-							<th scope="col"><d2l-selection-select-all></d2l-selection-select-all></th>
+							<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
 							<th scope="col">Country</th>
 							${fruits.map(fruit => this._renderSortButton(fruit))}
 						</tr>
+						${[1, 2].map(() => html`
+							<tr>
+								<th scope="col" sticky></th>
+								${thText.map(text => html`<th scope="col">${text}</th>`)}
+							</tr>
+						`)}
 					</thead>
 					<tbody>
-						${sorted.map((row) => html`
+						${sorted.map(row => html`
 							<tr ?selected="${row.selected}" data-name="${row.name}">
-								<th scope="row">
+								<th scope="row" sticky>
 									<d2l-selection-input
 										@d2l-selection-change="${this._selectRow}"
 										?selected="${row.selected}"
@@ -107,7 +105,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 									</d2l-selection-input>
 								</th>
 								<th scope="row">${row.name}</th>
-								${fruits.map((fruit) => html`<td>${formatter.format(row.fruit[fruit.toLowerCase()])}</td>`)}
+								${fruits.map(fruit => html`<td>${formatter.format(row.fruit[fruit.toLowerCase()])}</td>`)}
 							</tr>
 						`)}
 					</tbody>
@@ -142,5 +140,13 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 		this.requestUpdate();
 	}
 
+	_toggleStickyControls() {
+		this.stickyControls = !this.stickyControls;
+	}
+
+	_toggleStickyHeaders() {
+		this.stickyHeaders = !this.stickyHeaders;
+	}
+
 }
 customElements.define('d2l-test-table', TestTable);

package/components/table/demo/table.html

@@ -16,28 +16,53 @@
 			<h2>Default</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-test-table type="default"></d2l-test-table>
+					<d2l-test-table type="default" sticky-controls></d2l-test-table>
 				</template>
 			</d2l-demo-snippet>
 
 			<h2>Default, Sticky</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-test-table type="default" sticky-headers></d2l-test-table>
+					<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"></d2l-test-table>
+					<d2l-test-table type="light" sticky-controls></d2l-test-table>
 				</template>
 			</d2l-demo-snippet>
 
 			<h2>Light, Sticky</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-test-table type="light" sticky-headers></d2l-test-table>
+					<d2l-test-table type="light" sticky-headers sticky-controls></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: 300px;">
+						<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: 300px; overflow: auto;">
+						<d2l-test-table type="default" sticky-controls style="width: 300px;"></d2l-test-table>
+					</div>
 				</template>
 			</d2l-demo-snippet>
 

package/components/table/table-controls.js

@@ -21,7 +21,8 @@ class TableControls extends SelectionControls {
 		return [super.styles, css`
 			:host {
 				--d2l-selection-controls-background-color: var(--d2l-table-controls-background-color);
-				z-index: 2; /* must be greater than d2l-table rows */
+				--d2l-selection-controls-shadow-display: var(--d2l-table-controls-shadow-display);
+				z-index: 5; /* Must be greater than d2l-table-wrapper and d2l-scroll-wrapper */
 			}
 			:host([no-sticky]) {
 				z-index: auto;

package/components/table/table-wrapper.js

@@ -1,6 +1,6 @@
 import '../colors/colors.js';
 import '../scroll-wrapper/scroll-wrapper.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { SelectionMixin } from '../selection/selection-mixin.js';
 
@@ -119,7 +119,7 @@ export const tableStyles = css`
 	d2l-table-wrapper[sticky-headers] .d2l-table > * > tr[header] > * {
 		position: -webkit-sticky;
 		position: sticky;
-		top: 0;
+		z-index: 2;
 	}
 
 	/* header cells that are also sticky */
@@ -137,21 +137,14 @@ export const tableStyles = css`
 		right: 0;
 	}
 
-	/* first row: offset by size of border-radius so left/right border doesn't show through (default style only) */
-	d2l-table-wrapper[sticky-headers][type="default"] .d2l-table > thead > tr > th,
-	d2l-table-wrapper[sticky-headers][type="default"] .d2l-table > * > tr.d2l-table-header > *,
-	d2l-table-wrapper[sticky-headers][type="default"] .d2l-table > * > tr[header] > * {
-		top: -5px;
-	}
-
 	/* first column that's sticky: offset by size of border-radius so top/bottom border doesn't show through (default style only) */
 	d2l-table-wrapper[sticky-headers][type="default"]:not([dir="rtl"]) .d2l-table > * > tr > .d2l-table-sticky-cell.d2l-table-cell-first,
 	d2l-table-wrapper[sticky-headers][type="default"]:not([dir="rtl"]) .d2l-table > * > tr > [sticky].d2l-table-cell-first {
-		left: -5px;
+		left: var(--d2l-table-border-radius-sticky-offset);
 	}
 	d2l-table-wrapper[sticky-headers][type="default"][dir="rtl"] .d2l-table > * > tr > .d2l-table-sticky-cell.d2l-table-cell-first,
 	d2l-table-wrapper[sticky-headers][type="default"][dir="rtl"] .d2l-table > * > tr > [sticky].d2l-table-cell-first {
-		right: -5px;
+		right: var(--d2l-table-border-radius-sticky-offset);
 	}
 
 	/* non-header sticky cells */
@@ -202,7 +195,8 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 			type: {
 				reflect: true,
 				type: String
-			}
+			},
+			_controlsScrolled: { state: true }
 		};
 	}
 
@@ -212,6 +206,7 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 				--d2l-table-border: 1px solid var(--d2l-table-border-color);
 				--d2l-table-border-color: var(--d2l-color-mica);
 				--d2l-table-border-radius: 0.3rem;
+				--d2l-table-border-radius-sticky-offset: calc(1px - var(--d2l-table-border-radius));
 				--d2l-table-cell-height: 41px; /* min-height to be 62px including border */
 				--d2l-table-cell-padding: 0.5rem 1rem;
 				--d2l-table-cell-padding-alt: calc(0.5rem - 1px) 1rem 0.5rem 1rem;
@@ -225,12 +220,31 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 				display: none;
 			}
 			:host([type="light"]) {
+				--d2l-table-border-radius: 0rem; /* stylelint-disable-line length-zero-no-unit */
+				--d2l-table-border-radius-sticky-offset: 0rem; /* stylelint-disable-line length-zero-no-unit */
 				--d2l-table-cell-height: 1.15rem; /* min-height to be 48px including border */
 				--d2l-table-cell-padding: 0.6rem;
 				--d2l-table-cell-padding-alt: calc(0.6rem - 1px) 0.6rem 0.6rem 0.6rem;
 				--d2l-table-border-color: var(--d2l-color-gypsum);
 				--d2l-table-header-background-color: #ffffff;
 			}
+			:host([sticky-headers]) {
+				--d2l-table-controls-shadow-display: none;
+			}
+			.d2l-sticky-headers-backdrop {
+				position: sticky;
+				top: calc(var(--d2l-table-sticky-top) + var(--d2l-table-border-radius));
+				width: 100%;
+				z-index: 2; /* Must sit under d2l-table sticky-headers but over sticky columns and regular cells */
+			}
+			.d2l-sticky-headers-backdrop::after {
+				background-color: var(--d2l-table-controls-background-color, white);
+				bottom: 0;
+				content: "";
+				position: absolute;
+				top: calc(-7px - var(--d2l-table-border-radius)); /* 6px for the d2l-table-controls margin-bottom, 1px overlap to fix zoom issues */
+				width: 100%;
+			}
 		`;
 	}
 
@@ -239,6 +253,12 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 		this.noColumnBorder = false;
 		this.stickyHeaders = false;
 		this.type = 'default';
+
+		this._controls = null;
+		this._controlsMutationObserver = null;
+		this._controlsScrolled = false;
+		this._controlsScrolledMutationObserver = null;
+		this._table = null;
 		this._tableIntersectionObserver = null;
 		this._tableMutationObserver = null;
 	}
@@ -246,14 +266,17 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 
-		if (this._tableMutationObserver) this._tableMutationObserver.disconnect();
-		if (this._tableIntersectionObserver) this._tableIntersectionObserver.disconnect();
+		this._controlsMutationObserver?.disconnect();
+		this._controlsScrolledMutationObserver?.disconnect();
+		this._tableMutationObserver?.disconnect();
+		this._tableIntersectionObserver?.disconnect();
 	}
 
 	render() {
 		const slot = html`<slot @slotchange="${this._handleSlotChange}"></slot>`;
 		return html`
-			<slot name="controls"></slot>
+			<slot name="controls" @slotchange="${this._handleControlsSlotChange}"></slot>
+			${this.stickyHeaders && this._controlsScrolled ? html`<div class="d2l-sticky-headers-backdrop"></div>` : nothing}
 			${this.stickyHeaders ? slot : html`<d2l-scroll-wrapper>${slot}</d2l-scroll-wrapper>`}
 		`;
 	}
@@ -269,15 +292,11 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 		}
 	}
 
-	async _applyClassNames(table) {
-
-		// wait until start of next frame to read
-		await new Promise(resolve => {
-			requestAnimationFrame(resolve);
-		});
+	_applyClassNames() {
+		if (!this._table) return;
 
 		// offsetParent causes reflow/paint so do them all at once
-		const rows = Array.from(table.rows);
+		const rows = Array.from(this._table.rows);
 		let firstRow = null;
 		let lastRow = null;
 		rows.forEach((r) => {
@@ -286,13 +305,9 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 			lastRow = r;
 		});
 
-		const topHeader = table.querySelector('tr.d2l-table-header:first-child th:not([rowspan]), tr[header]:first-child th:not([rowspan]), thead tr:first-child th:not([rowspan])');
-		const topHeaderHeight = topHeader ? topHeader.clientHeight : -1;
-
 		let prevRow = null;
 		let skipFirst = 0;
 		rows.forEach((r) => {
-
 			const isHeader = r.parentNode.tagName === 'THEAD' || r.classList.contains('d2l-table-header') || r.hasAttribute('header');
 			const isSelected = r.hasAttribute('selected');
 
@@ -317,40 +332,54 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 
 			prevRow = r;
 			skipFirst = Math.max(0, --skipFirst);
-
 		});
+	}
 
-		if (this.stickyHeaders && topHeaderHeight > -1) {
-			const offset = this.type === 'default' ? -3 : 1; // default: -5px top + 2px border, light: 0 top + 1px border
-			const ths = Array.from(table.querySelectorAll('tr.d2l-table-header:not(:first-child) th, tr[header]:not(:first-child) th, thead tr:not(:first-child) th'));
-			ths.forEach((th) => {
-				th.style.top = `${topHeaderHeight + offset}px`;
-			});
+	async _handleControlsChange() {
+		if (this._controls) {
+			await this._controls.updateComplete;
+			await new Promise(resolve => requestAnimationFrame(resolve));
 		}
 
+		this._handleControlsScrolledChange();
+		this._updateStickyTops();
 	}
 
-	_handleSlotChange(e) {
+	_handleControlsScrolledChange() {
+		this._controlsScrolled = this._controls?._scrolled;
+	}
+
+	_handleControlsSlotChange(e) {
+		this._controls = e.target.assignedNodes({ flatten: true })[0];
 
-		const table = e.target.assignedNodes({ flatten: true }).find(
+		this._registerMutationObserver('_controlsMutationObserver', this._handleControlsChange.bind(this), this._controls, {
+			attributes: true,
+			attributeFilter: ['hidden', 'no-sticky'],
+		});
+		this._registerMutationObserver('_controlsScrolledMutationObserver', this._handleControlsScrolledChange.bind(this), this._controls, {
+			attributes: true,
+			attributeFilter: ['_scrolled'],
+		});
+
+		this._handleControlsChange();
+	}
+
+	_handleSlotChange(e) {
+		this._table = e.target.assignedNodes({ flatten: true }).find(
 			node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'TABLE' && node.classList.contains('d2l-table'))
 		);
-		if (!table) return;
 
 		// observes mutations to <table>'s direct children and also
 		// its subtree (rows or cells added/removed to any descendant)
-		if (this._tableMutationObserver === null) {
-			this._tableMutationObserver = new MutationObserver(() => this._applyClassNames(table, 0));
-		} else {
-			this._tableMutationObserver.disconnect();
-		}
-		this._tableMutationObserver.observe(table, {
+		this._registerMutationObserver('_tableMutationObserver', this._handleTableChange.bind(this), this._table, {
 			attributes: true, /* required for legacy-Edge, otherwise attributeFilter throws a syntax error */
 			attributeFilter: ['selected'],
 			childList: true,
 			subtree: true
 		});
 
+		if (!this._table) return;
+
 		// observes when visibility of <table> changes to catch cases
 		// where table is initially hidden (which would cause first/last
 		// row classes to be unset) but then becomes shown
@@ -359,19 +388,53 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 				this._tableIntersectionObserver = new IntersectionObserver((entries) => {
 					entries.forEach((entry) => {
 						if (entry.isIntersecting) {
-							this._applyClassNames(table);
+							this._handleTableChange();
 						}
 					});
 				});
 			} else {
 				this._tableIntersectionObserver.disconnect();
 			}
-			this._tableIntersectionObserver.observe(table);
+			this._tableIntersectionObserver.observe(this._table);
+		}
+
+		this._handleTableChange();
+	}
+
+	async _handleTableChange() {
+		await new Promise(resolve => requestAnimationFrame(resolve));
+
+		this._applyClassNames();
+		this._updateStickyTops();
+	}
+
+	_registerMutationObserver(observerName, callback, target, options) {
+		if (this[observerName]) {
+			this[observerName].disconnect();
+		} else if (target) {
+			this[observerName] = new MutationObserver(callback);
 		}
+		if (target) this[observerName].observe(target, options);
+	}
+
+	_updateStickyTops() {
+		if (!this._table || !this.stickyHeaders) return;
+
+		const hasStickyControls = this._controls && !this._controls.noSticky;
+		let rowTop = hasStickyControls ? this._controls.offsetHeight + 6 : 0; // +6 for the internal `margin-bottom`.
+		this.style.setProperty('--d2l-table-sticky-top', `${rowTop}px`);
 
-		this._applyClassNames(table);
+		const stickyRows = Array.from(this._table.querySelectorAll('tr.d2l-table-header, tr[header], thead tr'));
+		stickyRows.forEach(r => {
+			const thTop = hasStickyControls ? `${rowTop}px` : `calc(${rowTop}px + var(--d2l-table-border-radius-sticky-offset))`;
+			const ths = Array.from(r.querySelectorAll('th'));
+			ths.forEach(th => th.style.top = thTop);
 
+			const rowHeight = r.querySelector('th:not([rowspan])')?.offsetHeight || 0;
+			rowTop += rowHeight;
+		});
 	}
+
 }
 
 customElements.define('d2l-table-wrapper', TableWrapper);

package/components/tooltip/demo/tooltip.html

@@ -71,9 +71,13 @@
 		<h2>Tooltip (info)</h2>
 		<d2l-demo-snippet>
 			<template>
-				<d2l-button id="tooltip-info">Hover for Info</d2l-button>
-				<d2l-tooltip for="tooltip-info">
-					Your info message will display here
+				<d2l-button id="tooltip-preview">Preview</d2l-button>
+				<d2l-tooltip for="tooltip-preview">
+					Tooltip for the Preview button.
+				</d2l-tooltip>
+				<d2l-button id="tooltip-settings">Settings</d2l-button>
+				<d2l-tooltip for="tooltip-settings">
+					Tooltip for the Settings button.
 				</d2l-tooltip>
 			</template>
 		</d2l-demo-snippet>
@@ -163,7 +167,6 @@
 					<d2l-tooltip for="link-long" show-truncated-only>
 						Very Very Very Very Long Text - this tooltip will show because the text is truncating.
 					</d2l-tooltip>
-
 				</div>
 			</template>
 		</d2l-demo-snippet>

package/components/tooltip/tooltip.js

@@ -430,6 +430,8 @@ class Tooltip extends RtlMixin(LitElement) {
 		this._onTargetTouchStart = this._onTargetTouchStart.bind(this);
 		this._onTargetTouchEnd = this._onTargetTouchEnd.bind(this);
 
+		this._onTooltipShowOther = this._onTooltipShowOther.bind(this);
+
 		this.announced = false;
 		this.closeOnClick = false;
 		this.delay = 300;
@@ -474,6 +476,7 @@ class Tooltip extends RtlMixin(LitElement) {
 		super.disconnectedCallback();
 		this._removeListeners();
 		window.removeEventListener('resize', this._onTargetResize);
+		document.body.removeEventListener('d2l-tooltip-show', this._onTooltipShowOther);
 		clearDismissible(this._dismissibleId);
 		delayTimeoutId = null;
 		this._dismissibleId = null;
@@ -859,6 +862,11 @@ class Tooltip extends RtlMixin(LitElement) {
 		}, 500);
 	}
 
+	_onTooltipShowOther() {
+		// only allow one tooltip showing at a time
+		this.hide();
+	}
+
 	_removeListeners() {
 		if (!this._target) {
 			return;
@@ -889,6 +897,9 @@ class Tooltip extends RtlMixin(LitElement) {
 			this.dispatchEvent(new CustomEvent(
 				'd2l-tooltip-show', { bubbles: true, composed: true }
 			));
+
+			document.body.addEventListener('d2l-tooltip-show', this._onTooltipShowOther, true);
+
 			if (this.announced && !this._isInteractive(this._target)) announce(this.innerText);
 		} else {
 			this.setAttribute('aria-hidden', 'true');
@@ -899,6 +910,8 @@ class Tooltip extends RtlMixin(LitElement) {
 			this.dispatchEvent(new CustomEvent(
 				'd2l-tooltip-hide', { bubbles: true, composed: true }
 			));
+
+			document.body.removeEventListener('d2l-tooltip-show', this._onTooltipShowOther, true);
 		}
 	}
 

package/custom-elements.json

@@ -11015,6 +11015,14 @@
       "name": "d2l-test-table",
       "path": "./components/table/demo/table-test.js",
       "attributes": [
+        {
+          "name": "sticky-controls",
+          "type": "boolean"
+        },
+        {
+          "name": "visible-background",
+          "type": "boolean"
+        },
         {
           "name": "no-column-border",
           "description": "Hides the column borders on \"default\" table type",
@@ -11052,6 +11060,16 @@
         }
       ],
       "properties": [
+        {
+          "name": "stickyControls",
+          "attribute": "sticky-controls",
+          "type": "boolean"
+        },
+        {
+          "name": "visibleBackground",
+          "attribute": "visible-background",
+          "type": "boolean"
+        },
         {
           "name": "noColumnBorder",
           "attribute": "no-column-border",

package/package.json

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