@brightspace-ui/core 2.113.0 → 2.114.0

package/components/scroll-wrapper/demo/scroll-wrapper-test.js

@@ -9,7 +9,9 @@ class TestScrollWrapper extends RtlMixin(LitElement) {
 		return {
 			hideActions: { attribute: 'hide-actions', type: Boolean },
 			scroll: { attribute: 'scroll', type: Number },
-			width: { type: Number }
+			splitScrollers: { attribute: 'split-scrollers', type: Boolean },
+			width: { type: Number },
+			_customScrollers: { state: true }
 		};
 	}
 
@@ -22,6 +24,16 @@ class TestScrollWrapper extends RtlMixin(LitElement) {
 				background: linear-gradient(to right, #e66465, #9198e5);
 				height: 100px;
 			}
+			.d2l-scroll-wrapper-gradient-secondary {
+				background: linear-gradient(to left, #e66465, #9198e5);
+				height: 40px;
+				position: relative;
+			}
+			.d2l-scroll-wrapper-gradient-secondary button {
+				inset-inline-end: 0;
+				position: absolute;
+				top: 0;
+			}
 		`;
 	}
 
@@ -29,24 +41,46 @@ class TestScrollWrapper extends RtlMixin(LitElement) {
 		super();
 		this.hideActions = false;
 		this.scroll = 0;
+		this.splitScrollers = false;
 		this.width = 300;
+		this._customScrollers = {};
 	}
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
-		if (this.scroll === 0) return;
-		requestAnimationFrame(() => {
-			this.shadowRoot.querySelector('d2l-scroll-wrapper').scrollDistance(this.scroll, false);
-		});
+		if (this.scroll !== 0) {
+			requestAnimationFrame(() => this.shadowRoot.querySelector('d2l-scroll-wrapper').scrollDistance(this.scroll, false));
+		}
+		if (this.splitScrollers) {
+			this._customScrollers = { primary: this.shadowRoot.querySelector('.primary'), secondary: this.shadowRoot.querySelectorAll('.secondary') };
+		}
 	}
 
 	render() {
 		const style = {
 			width: `${this.width}px`
 		};
-		return html`
-			<d2l-scroll-wrapper ?hide-actions="${this.hideActions}">
+
+		const secondaryScroller = html`
+			<div class="secondary">
+				<div class="d2l-scroll-wrapper-gradient-secondary" style="${styleMap(style)}">
+					Secondary scroller (No mouse scroll)
+					<button>Focus</button>
+				</div>
+			</div>
+		`;
+
+		const contents = this.splitScrollers ? html`
+			${secondaryScroller}
+			<div class="primary">
 				<div class="d2l-scroll-wrapper-gradient" style="${styleMap(style)}"></div>
+			</div>
+			${secondaryScroller}
+		` : html`<div class="d2l-scroll-wrapper-gradient" style="${styleMap(style)}"></div>`;
+
+		return html`
+			<d2l-scroll-wrapper ?hide-actions="${this.hideActions}" .customScrollers="${this._customScrollers}">
+				${contents}
 			</d2l-scroll-wrapper>
 		`;
 	}

package/components/scroll-wrapper/demo/scroll-wrapper.html

@@ -31,6 +31,15 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Split scrollers</h2>
+			<d2l-demo-snippet>
+				<template>
+					<div style="max-width: 700px;">
+						<d2l-test-scroll-wrapper width="1000" split-scrollers></d2l-test-scroll-wrapper>
+					</div>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/scroll-wrapper/scroll-wrapper.js

@@ -2,12 +2,37 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const RTL_MULTIPLIER = navigator.userAgent.indexOf('Edge/') > 0 ? 1 : -1; /* legacy-Edge doesn't reverse scrolling in RTL */
 const SCROLL_AMOUNT = 0.8;
+const PRINT_MEDIA_QUERY_LIST = matchMedia('print');
+
+let focusStyleSheet;
+function getFocusStyleSheet() {
+	if (!focusStyleSheet) {
+		focusStyleSheet = new CSSStyleSheet();
+		focusStyleSheet.replaceSync(css`
+		.d2l-scroll-wrapper-focus:${unsafeCSS(getFocusPseudoClass())} {
+			box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine), 0 2px 12px 0 rgba(0, 0, 0, 0.15);
+			outline: none;
+		}`);
+	}
+	return focusStyleSheet;
+}
+
+function getStyleSheetInsertionPoint(elem) {
+	if (elem.nodeType === Node.DOCUMENT_NODE || elem.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+		if (elem.querySelector('.d2l-scroll-wrapper-focus') !== null) {
+			return elem;
+		}
+	}
+	if (elem.parentNode) {
+		return getStyleSheetInsertionPoint(elem.parentNode);
+	}
+	return null;
+}
 
 /**
  *
@@ -18,6 +43,14 @@ class ScrollWrapper extends RtlMixin(LitElement) {
 
 	static get properties() {
 		return {
+			/**
+			 * An object containing custom primary/secondary scroll containers
+			 * @type {Object}
+			 */
+			customScrollers: {
+				attribute: false,
+				type: Object
+			},
 			/**
 			 * Whether to hide left/right scroll buttons
 			 * @type {boolean}
@@ -31,6 +64,7 @@ class ScrollWrapper extends RtlMixin(LitElement) {
 				reflect: true,
 				type: Boolean
 			},
+			_printMode: { state: true },
 			_scrollbarLeft: {
 				attribute: 'scrollbar-left',
 				reflect: true,
@@ -55,13 +89,8 @@ class ScrollWrapper extends RtlMixin(LitElement) {
 			}
 			.d2l-scroll-wrapper-container {
 				box-sizing: border-box;
-				outline: none;
-				overflow-x: auto;
 				overflow-y: var(--d2l-scroll-wrapper-overflow-y, visible);
 			}
-			.d2l-scroll-wrapper-container:${unsafeCSS(getFocusPseudoClass())} {
-				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine), 0 2px 12px 0 rgba(0, 0, 0, 0.15);
-			}
 			:host([h-scrollbar]) .d2l-scroll-wrapper-container {
 				border-left: 1px dashed var(--d2l-color-mica);
 				border-right: 1px dashed var(--d2l-color-mica);
@@ -121,47 +150,48 @@ class ScrollWrapper extends RtlMixin(LitElement) {
 			:host([scrollbar-left]) .d2l-scroll-wrapper-button-left {
 				display: none;
 			}
-
-			/* hide wrapper visuals from print view */
-			@media print {
-				.d2l-scroll-wrapper-actions {
-					display: none;
-				}
-				.d2l-scroll-wrapper-container {
-					overflow-x: visible;
-				}
-				:host([h-scrollbar]) .d2l-scroll-wrapper-container {
-					border-left: none;
-					border-right: none;
-				}
-			}
 		`;
 	}
 
 	constructor() {
 		super();
+		this.customScrollers = {};
 		this.hideActions = false;
+		this._allScrollers = [];
+		this._baseContainer = null;
 		this._container = null;
 		this._hScrollbar = true;
-		this._resizeObserver = null;
+		this._printMode = PRINT_MEDIA_QUERY_LIST.matches;
+		this._resizeObserver = new ResizeObserver(() => requestAnimationFrame(() => this.checkScrollbar()));
 		this._scrollbarLeft = false;
 		this._scrollbarRight = false;
+		this._syncDriver = null;
+		this._syncDriverTimeout = null;
+		this._checkScrollThresholds = this._checkScrollThresholds.bind(this);
+		this._handlePrintChange = this._handlePrintChange.bind(this);
+		this._synchronizeScroll = this._synchronizeScroll.bind(this);
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		PRINT_MEDIA_QUERY_LIST?.addEventListener('change', this._handlePrintChange);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		if (this._resizeObserver) this._resizeObserver.disconnect();
+		this._disconnectAll();
+		PRINT_MEDIA_QUERY_LIST?.removeEventListener('change', this._handlePrintChange);
 	}
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
-		this._container = this.shadowRoot.querySelector('.d2l-scroll-wrapper-container');
-		this._resizeObserver = new ResizeObserver(() => requestAnimationFrame(() => this.checkScrollbar()));
-		this._resizeObserver.observe(this._container);
+		this._updateScrollTargets();
 	}
 
 	render() {
-		const tabindex = this._hScrollbar ? '0' : undefined;
+		// when printing, just get scroll-wrapper out of the way
+		if (this._printMode) return html`<slot></slot>`;
+
 		const actions = !this.hideActions ? html`
 			<div class="d2l-scroll-wrapper-actions">
 				<div class="d2l-scroll-wrapper-button d2l-scroll-wrapper-button-left" @click="${this._scrollLeft}">
@@ -173,10 +203,17 @@ class ScrollWrapper extends RtlMixin(LitElement) {
 			</div>` : null;
 		return html`
 			${actions}
-			<div class="d2l-scroll-wrapper-container" @scroll="${this._checkScrollThresholds}" tabindex="${ifDefined(tabindex)}"><slot></slot></div>
+			<div class="d2l-scroll-wrapper-container"><slot></slot></div>
 		`;
 	}
 
+	updated(changedProperties) {
+		super.updated(changedProperties);
+
+		if (changedProperties.has('customScrollers')) this._updateScrollTargets();
+		if (changedProperties.has('_hScrollbar')) this._updateTabIndex();
+	}
+
 	checkScrollbar() {
 		if (!this._container) return;
 		this._hScrollbar = this._container.offsetWidth !== this._container.scrollWidth;
@@ -201,12 +238,39 @@ class ScrollWrapper extends RtlMixin(LitElement) {
 
 	_checkScrollThresholds() {
 		if (!this._container) return;
-		const lowerScrollValue = this._container.scrollWidth - this._container.offsetWidth - Math.abs(this._container.scrollLeft);
+		const lowerScrollValue = this._container.scrollWidth - this._baseContainer.offsetWidth - Math.abs(this._container.scrollLeft);
 		this._scrollbarLeft = (this._container.scrollLeft === 0);
 		this._scrollbarRight = (lowerScrollValue <= 0);
 
 	}
 
+	_disconnectAll() {
+		this._resizeObserver?.disconnect();
+
+		if (this._container) {
+			this._container.style.removeProperty('overflow-x');
+			this._container.classList.remove('d2l-scroll-wrapper-focus');
+			this._container.removeAttribute('tabindex');
+			this._container.removeEventListener('scroll', this._synchronizeScroll);
+			this._container.removeEventListener('scroll', this._checkScrollThresholds);
+			this._secondaryScrollers.forEach(element => {
+				element.style.removeProperty('overflow-x');
+				element.removeEventListener('scroll', this._synchronizeScroll);
+			});
+		}
+	}
+
+	async _handlePrintChange() {
+		if (!this._printMode) {
+			this._disconnectAll();
+		}
+		this._printMode = PRINT_MEDIA_QUERY_LIST.matches;
+		if (!this._printMode) {
+			await this.updateComplete;
+			this._updateScrollTargets();
+		}
+	}
+
 	_scrollLeft() {
 		if (!this._container) return;
 		const scrollDistance = this._container.clientWidth * SCROLL_AMOUNT * -1;
@@ -219,6 +283,58 @@ class ScrollWrapper extends RtlMixin(LitElement) {
 		this.scrollDistance(scrollDistance, true);
 	}
 
+	_synchronizeScroll(e) {
+		if (this._syncDriver && e.target !== this._syncDriver) return;
+		if (this._syncDriverTimeout) clearTimeout(this._syncDriverTimeout);
+
+		this._syncDriver = e.target;
+		this._allScrollers.forEach(element => {
+			if (element && element !== e.target) element.scrollLeft = e.target.scrollLeft;
+		});
+		this._syncDriverTimeout = setTimeout(() => this._syncDriver = null, 100);
+	}
+
+	_updateScrollTargets() {
+		this._disconnectAll();
+
+		if (this._printMode) return;
+
+		this._baseContainer = this.shadowRoot.querySelector('.d2l-scroll-wrapper-container');
+		this._container = this.customScrollers?.primary || this._baseContainer;
+		this._secondaryScrollers = this.customScrollers?.secondary || [];
+		if (this._secondaryScrollers.length === undefined) this._secondaryScrollers = [ this._secondaryScrollers ];
+		this._allScrollers = [ this._container, ...this._secondaryScrollers ];
+
+		if (this._container) {
+			this._container.classList.add('d2l-scroll-wrapper-focus');
+			const styleRoot = getStyleSheetInsertionPoint(this._container);
+			if (styleRoot && 'adoptedStyleSheets' in styleRoot) {
+				const sheet = getFocusStyleSheet();
+				if (styleRoot.adoptedStyleSheets.indexOf(sheet) === -1) {
+					styleRoot.adoptedStyleSheets = [...styleRoot.adoptedStyleSheets, sheet];
+				}
+			}
+			this._container.style.overflowX = 'auto';
+			this._resizeObserver.observe(this._container);
+			this._container.addEventListener('scroll', this._checkScrollThresholds);
+			this._updateTabIndex();
+		}
+
+		if (this._secondaryScrollers.length) {
+			this._secondaryScrollers.forEach(element => {
+				element.style.overflowX = 'hidden';
+				element.addEventListener('scroll', this._synchronizeScroll);
+			});
+			this._container.addEventListener('scroll', this._synchronizeScroll);
+			this._synchronizeScroll({ target: this._container });
+		}
+	}
+
+	_updateTabIndex() {
+		if (!this._container) return;
+		if (this._hScrollbar) this._container.tabIndex = 0;
+		else this._container.removeAttribute('tabindex');
+	}
 }
 
 customElements.define('d2l-scroll-wrapper', ScrollWrapper);

package/components/table/demo/table.html

@@ -58,7 +58,7 @@
 			<h2>Default, Sticky columns</h2>
 			<d2l-demo-snippet overflow-hidden>
 				<template>
-					<div style="overflow: auto; width: 300px;">
+					<div style="overflow: auto; width: 400px;">
 						<d2l-test-table type="default" sticky-headers sticky-controls></d2l-test-table>
 					</div>
 				</template>
@@ -67,12 +67,19 @@
 			<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 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>
+
 			<div style="margin-bottom: 1000px;"></div>
 		</d2l-demo-page>
 	</body>

package/components/table/table-wrapper.js

@@ -2,6 +2,7 @@ import '../colors/colors.js';
 import '../scroll-wrapper/scroll-wrapper.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { PageableMixin } from '../paging/pageable-mixin.js';
+import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SelectionMixin } from '../selection/selection-mixin.js';
 
@@ -114,10 +115,35 @@ export const tableStyles = css`
 
 	/* sticky-headers */
 
+	/* all sticky cells */
+	d2l-table-wrapper[sticky-headers] .d2l-table > * > tr > .d2l-table-sticky-cell,
+	d2l-table-wrapper[sticky-headers] .d2l-table > * > tr > [sticky] {
+		position: -webkit-sticky;
+		position: sticky;
+		z-index: 1;
+	}
+	d2l-table-wrapper:not([dir="rtl"])[sticky-headers] .d2l-table > * > tr > .d2l-table-sticky-cell,
+	d2l-table-wrapper:not([dir="rtl"])[sticky-headers] .d2l-table > * > tr > [sticky] {
+		left: 0;
+	}
+	d2l-table-wrapper[dir="rtl"][sticky-headers] .d2l-table > * > tr > .d2l-table-sticky-cell,
+	d2l-table-wrapper[dir="rtl"][sticky-headers] .d2l-table > * > tr > [sticky] {
+		right: 0;
+	}
+
+	/* non-header sticky cells */
+	d2l-table-wrapper[sticky-headers] .d2l-table > * > tr:not([selected]) {
+		background-color: inherit; /* white background so sticky cells layer on top of non-sticky cells */
+	}
+	d2l-table-wrapper[sticky-headers] .d2l-table > tbody > tr:not([header]):not(.d2l-table-header) > .d2l-table-sticky-cell,
+	d2l-table-wrapper[sticky-headers] .d2l-table > tbody > tr:not([header]):not(.d2l-table-header) > [sticky] {
+		background-color: inherit;
+	}
+
 	/* all header cells */
 	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > th,
-	d2l-table-wrapper[sticky-headers] .d2l-table > * > tr.d2l-table-header > *,
-	d2l-table-wrapper[sticky-headers] .d2l-table > * > tr[header] > * {
+	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr.d2l-table-header > *,
+	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr[header] > * {
 		position: -webkit-sticky;
 		position: sticky;
 		z-index: 2;
@@ -126,17 +152,12 @@ export const tableStyles = css`
 	/* header cells that are also sticky */
 	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > th.d2l-table-sticky-cell,
 	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > th[sticky],
-	d2l-table-wrapper[sticky-headers] .d2l-table > * > tr.d2l-table-header > .d2l-table-sticky-cell,
-	d2l-table-wrapper[sticky-headers] .d2l-table > * > tr.d2l-table-header > [sticky],
-	d2l-table-wrapper[sticky-headers] .d2l-table > * > tr[header] > .d2l-table-sticky-cell,
-	d2l-table-wrapper[sticky-headers] .d2l-table > * > tr[header] > [sticky] {
-		left: 0;
+	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr.d2l-table-header > .d2l-table-sticky-cell,
+	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr.d2l-table-header > [sticky],
+	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr[header] > .d2l-table-sticky-cell,
+	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr[header] > [sticky] {
 		z-index: 3;
 	}
-	d2l-table-wrapper[dir="rtl"][sticky-headers] .d2l-table > * > tr > .d2l-table-sticky-cell,
-	d2l-table-wrapper[dir="rtl"][sticky-headers] .d2l-table > * > tr > [sticky] {
-		right: 0;
-	}
 
 	/* 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,
@@ -148,17 +169,20 @@ export const tableStyles = css`
 		right: var(--d2l-table-border-radius-sticky-offset, 0);
 	}
 
-	/* non-header sticky cells */
-	d2l-table-wrapper[sticky-headers] .d2l-table > * > tr:not([selected]) {
-		background-color: inherit; /* white background so sticky cells layer on top of non-sticky cells */
+	/* sticky + scroll-wrapper */
+	d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper] .d2l-table {
+		display: block;
 	}
-	d2l-table-wrapper[sticky-headers] .d2l-table > tbody > tr:not([header]):not(.d2l-table-header) > .d2l-table-sticky-cell,
-	d2l-table-wrapper[sticky-headers] .d2l-table > tbody > tr:not([header]):not(.d2l-table-header) > [sticky] {
-		background-color: inherit;
-		left: 0;
-		position: -webkit-sticky;
+
+	d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper] .d2l-table > thead {
+		display: block;
 		position: sticky;
-		z-index: 1;
+		top: calc(var(--d2l-table-sticky-top, 0px) + var(--d2l-table-border-radius-sticky-offset, 0px));
+		z-index: 2;
+	}
+
+	d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper] .d2l-table > tbody {
+		display: block;
 	}
 `;
 
@@ -190,6 +214,15 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 				reflect: true,
 				type: Boolean
 			},
+			/**
+			 * When used in combo with `sticky-headers`, whether to additionally wrap the table in a scroll-wrapper. Requires sticky headers to be in a separate thead.
+			 * @type {boolean}
+			 */
+			stickyHeadersScrollWrapper: {
+				attribute: 'sticky-headers-scroll-wrapper',
+				reflect: true,
+				type: Boolean
+			},
 			/**
 			 * Type of table style to apply. The "light" style has fewer borders and tighter padding.
 			 * @type {'default'|'light'}
@@ -257,6 +290,7 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		super();
 		this.noColumnBorder = false;
 		this.stickyHeaders = false;
+		this.stickyHeadersScrollWrapper = false;
 		this.type = 'default';
 
 		this._controls = null;
@@ -266,6 +300,7 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		this._table = null;
 		this._tableIntersectionObserver = null;
 		this._tableMutationObserver = null;
+		this._tableScrollers = {};
 	}
 
 	disconnectedCallback() {
@@ -275,14 +310,16 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		this._controlsScrolledMutationObserver?.disconnect();
 		this._tableMutationObserver?.disconnect();
 		this._tableIntersectionObserver?.disconnect();
+		this._tableResizeObserver?.disconnect();
 	}
 
 	render() {
 		const slot = html`<slot @slotchange="${this._handleSlotChange}"></slot>`;
+		const useScrollWrapper = this.stickyHeadersScrollWrapper || !this.stickyHeaders;
 		return html`
 			<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>`}
+			${useScrollWrapper ? html`<d2l-scroll-wrapper .customScrollers="${this._tableScrollers}">${slot}</d2l-scroll-wrapper>` : slot}
 			${this._renderPagerContainer()}
 		`;
 	}
@@ -388,6 +425,10 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		this._table = e.target.assignedNodes({ flatten: true }).find(
 			node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'TABLE' && node.classList.contains('d2l-table'))
 		);
+		this._tableScrollers = (this.stickyHeadersScrollWrapper && this.stickyHeaders) ? {
+			primary: this._table?.querySelector('tbody'),
+			secondary: this._table?.querySelector('thead'),
+		} : {};
 
 		// observes mutations to <table>'s direct children and also
 		// its subtree (rows or cells added/removed to any descendant)
@@ -397,6 +438,7 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 			childList: true,
 			subtree: true
 		});
+		this._tableResizeObserver?.disconnect();
 
 		if (!this._table) return;
 
@@ -418,6 +460,9 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 			this._tableIntersectionObserver.observe(this._table);
 		}
 
+		if (!this._tableResizeObserver) this._tableResizeObserver = new ResizeObserver(() => this._syncColumnWidths());
+		this._tableResizeObserver.observe(this._table);
+
 		this._handleTableChange();
 	}
 
@@ -426,6 +471,7 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 
 		this._updateItemShowingCount();
 		this._applyClassNames();
+		this._syncColumnWidths();
 		this._updateStickyTops();
 	}
 
@@ -438,12 +484,35 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		if (target) this[observerName].observe(target, options);
 	}
 
+	_syncColumnWidths() {
+		if (!this._table || !this.stickyHeaders || !this.stickyHeadersScrollWrapper) return;
+
+		const head = this._table.querySelector('thead');
+		const body = this._table.querySelector('tbody');
+		if (!head || !body) return;
+
+		const firstRowHead = head.rows[0];
+		const firstRowBody = body.rows[0];
+		if (!firstRowHead || !firstRowBody || firstRowHead.cells.length !== firstRowBody.cells.length) return;
+
+		for (let i = 0; i < firstRowHead.cells.length; i++) {
+			const headCell = firstRowHead.cells[i];
+			const bodyCell = firstRowBody.cells[i];
+
+			if (headCell.clientWidth > bodyCell.clientWidth) {
+				bodyCell.style.minWidth = getComputedStyle(headCell).width;
+			} else if (headCell.clientWidth < bodyCell.clientWidth) {
+				headCell.style.minWidth = getComputedStyle(bodyCell).width;
+			}
+		}
+	}
+
 	_updateStickyTops() {
 		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`);
 
-		if (!this._table || !this.stickyHeaders) return;
+		if (!this._table || !this.stickyHeaders || this.stickyHeadersScrollWrapper) return;
 
 		const stickyRows = Array.from(this._table.querySelectorAll('tr.d2l-table-header, tr[header], thead tr'));
 		stickyRows.forEach(r => {

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

@@ -2,6 +2,7 @@ import '../button/button-icon.js';
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
 import { css, html, nothing } from 'lit';
+import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
 import { heading4Styles, labelStyles } from '../typography/styles.js';
 import { announce } from '../../helpers/announce.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -30,7 +31,10 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			 * @ignore
 			 */
 			keyboardTooltipItem: { type: Boolean, attribute: 'keyboard-tooltip-item' },
-			_displayKeyboardTooltip: { state: true }
+			/**
+			 * @ignore
+			 */
+			keyboardTooltipShown: { type: Boolean, attribute: 'keyboard-tooltip-shown' }
 		};
 	}
 
@@ -127,9 +131,8 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		this.clearable = false;
 		/** @ignore */
 		this.keyboardTooltipItem = false;
-		this._displayKeyboardTooltip = false;
+		this.keyboardTooltipShown = false;
 		this._id = getUniqueId();
-		this._keyboardTooltipShown = false;
 	}
 
 	firstUpdated(changedProperties) {
@@ -140,17 +143,26 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		this.addEventListener('focus', async(e) => {
 			// ignore focus events coming from inside the tag content
 			if (e.composedPath()[0] !== this) return;
+			const tagList = findComposedAncestor(this, elem => elem.tagName === 'D2L-TAG-LIST');
+			if (this.keyboardTooltipItem && this.keyboardTooltipShown && !isComposedAncestor(tagList, e.relatedTarget)) {
+				const arrows = this.localize('components.tag-list-item.tooltip-arrow-keys');
+				const arrowsDescription = this.localize('components.tag-list-item.tooltip-arrow-keys-desc');
+
+				let message = `${arrows} - ${arrowsDescription}`;
+				if (this.clearable) {
+					const del = this.localize('components.tag-list-item.tooltip-delete-key');
+					const delDescription = this.localize('components.tag-list-item.tooltip-delete-key-desc');
+					message += `; ${del} - ${delDescription}`;
+				}
+
+				announce(message);
+			}
 
-			this._displayKeyboardTooltip = (this.keyboardTooltipItem && !this._keyboardTooltipShown);
 			await this.updateComplete;
 
 			container.focus();
 		});
 
-		this.addEventListener('blur', () => {
-			this._displayKeyboardTooltip = false;
-		});
-
 		this.addEventListener('keydown', this._handleKeydown);
 	}
 
@@ -167,11 +179,10 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 	}
 
 	_handleKeyboardTooltipHide() {
-		if (this._keyboardTooltipShown) this._displayKeyboardTooltip = false;
+		this.keyboardTooltipShown = true;
 	}
 
 	_handleKeyboardTooltipShow() {
-		this._keyboardTooltipShown = true;
 		/** @ignore */
 		this.dispatchEvent(new CustomEvent(
 			'd2l-tag-list-item-tooltip-show',
@@ -181,7 +192,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 
 	_handleKeydown(e) {
 		const openKeys = e.keyCode === keyCodes.SPACE || e.keyCode === keyCodes.ENTER;
-		if (this._displayKeyboardTooltip && openKeys) this._displayKeyboardTooltip = false;
+		if (this.keyboardTooltipItem && !this.keyboardTooltipShown && openKeys) this.keyboardTooltipShown = true;
 
 		const clearKeys = e.keyCode === keyCodes.BACKSPACE || e.keyCode === keyCodes.DELETE;
 		if (!this.clearable || !clearKeys) return;
@@ -194,7 +205,9 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			<div class="d2l-tag-list-item-tooltip-title-key">${this.localize('components.tag-list-item.tooltip-title')}</div>
 			<ul>
 				<li><span class="d2l-tag-list-item-tooltip-title-key">${this.localize('components.tag-list-item.tooltip-arrow-keys')}</span> - ${this.localize('components.tag-list-item.tooltip-arrow-keys-desc')}</li>
-				<li><span class="d2l-tag-list-item-tooltip-title-key">${this.localize('components.tag-list-item.tooltip-delete-key')}</span> - ${this.localize('components.tag-list-item.tooltip-delete-key-desc')}</li>
+				${this.clearable ? html`
+					<li><span class="d2l-tag-list-item-tooltip-title-key">${this.localize('components.tag-list-item.tooltip-delete-key')}</span> - ${this.localize('components.tag-list-item.tooltip-delete-key-desc')}</li>
+				` : nothing}
 			</ul>
 		`;
 	}
@@ -209,7 +222,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		const hasDescription = !!options.description;
 
 		let tooltip = nothing;
-		if (this._displayKeyboardTooltip) {
+		if (this.keyboardTooltipItem && !this.keyboardTooltipShown) {
 			tooltip = html`
 				<d2l-tooltip
 					align="start"

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

@@ -355,7 +355,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 	}
 
 	_handleKeyboardTooltipShown() {
-		this._hasShownKeyboardTooltip = true;
+		if (!this._hasShownKeyboardTooltip) this._hasShownKeyboardTooltip = true;
 	}
 
 	async _handleResize() {
@@ -398,7 +398,8 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		this._chomp();
 
 		this._contentReady = true;
-		if (!this._hasShownKeyboardTooltip) this._items[0].setAttribute('keyboard-tooltip-item', 'keyboard-tooltip-item');
+		this._items[0].setAttribute('keyboard-tooltip-item', true);
+		if (this._hasShownKeyboardTooltip) this._items[0].setAttribute('keyboard-tooltip-shown', true);
 	}
 
 	async _toggleHiddenTagVisibility(e) {

package/custom-elements.json

@@ -10168,6 +10168,11 @@
           "type": "number",
           "default": "0"
         },
+        {
+          "name": "split-scrollers",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "width",
           "type": "number",
@@ -10187,6 +10192,12 @@
           "type": "number",
           "default": "0"
         },
+        {
+          "name": "splitScrollers",
+          "attribute": "split-scrollers",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "width",
           "attribute": "width",
@@ -10208,6 +10219,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "customScrollers",
+          "description": "An object containing custom primary/secondary scroll containers",
+          "type": "Object",
+          "default": "{}"
+        },
         {
           "name": "hideActions",
           "attribute": "hide-actions",
@@ -11525,6 +11542,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "sticky-headers-scroll-wrapper",
+          "description": "When used in combo with `sticky-headers`, whether to additionally wrap the table in a scroll-wrapper. Requires sticky headers to be in a separate thead.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "type",
           "description": "Type of table style to apply. The \"light\" style has fewer borders and tighter padding.",
@@ -11581,6 +11604,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "stickyHeadersScrollWrapper",
+          "attribute": "sticky-headers-scroll-wrapper",
+          "description": "When used in combo with `sticky-headers`, whether to additionally wrap the table in a scroll-wrapper. Requires sticky headers to be in a separate thead.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "type",
           "attribute": "type",
@@ -11780,6 +11810,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "sticky-headers-scroll-wrapper",
+          "description": "When used in combo with `sticky-headers`, whether to additionally wrap the table in a scroll-wrapper. Requires sticky headers to be in a separate thead.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "type",
           "description": "Type of table style to apply. The \"light\" style has fewer borders and tighter padding.",
@@ -11818,6 +11854,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "stickyHeadersScrollWrapper",
+          "attribute": "sticky-headers-scroll-wrapper",
+          "description": "When used in combo with `sticky-headers`, whether to additionally wrap the table in a scroll-wrapper. Requires sticky headers to be in a separate thead.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "type",
           "attribute": "type",
@@ -12089,6 +12132,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "keyboardTooltipShown",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "documentLocaleSettings",
           "default": "\"getDocumentLocaleSettings()\""
@@ -12194,6 +12242,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "keyboardTooltipShown",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "documentLocaleSettings",
           "default": "\"getDocumentLocaleSettings()\""

package/package.json

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