@brightspace-ui/core 2.59.3 → 2.60.0

package/components/form/form-element-mixin.js

@@ -155,7 +155,7 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		return this.localize('components.form-element.defaultError', { label });
 	}
 
-	/** @ignore */
+	/** @ignore Note: this may be our custom FormElementValidityState or native ValidityState depending on the source. */
 	get validity() {
 		return this._validity;
 	}

package/components/inputs/input-number.js

@@ -306,6 +306,15 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 		return super.validationMessage;
 	}
 
+	/** @ignore */
+	get validity() {
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-text');
+		if (elem && !elem.validity.valid) {
+			return elem.validity;
+		}
+		return super.validity;
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		this.addEventListener('d2l-localize-resources-change', () => {
@@ -331,6 +340,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 				?hide-invalid-icon="${this.hideInvalidIcon}"
 				id="${this._inputId}"
 				input-width="${this.inputWidth}"
+				@invalid-change="${this._handleInvalidChange}"
 				label="${ifDefined(this.label)}"
 				?label-hidden="${this.labelHidden || this.labelledBy}"
 				.labelRequired="${false}"
@@ -464,6 +474,10 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 		}
 	}
 
+	_handleInvalidChange() {
+		this.requestValidate(true);
+	}
+
 	_handleKeyPress(e) {
 		// NOTE: keypress event is deprecated, but keydown fires for ALL keys (including Shift/Tab/etc.)
 		// which makes it hard to selectively supress "not numbers". The "beforeinput" event is

package/components/inputs/input-text.js

@@ -307,7 +307,7 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 	/** @ignore */
 	get validity() {
 		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');
-		if (!elem.validity.valid) {
+		if (elem && !elem.validity.valid) {
 			return elem.validity;
 		}
 		return super.validity;

package/components/list/list-header.js

@@ -1,119 +1,35 @@
-import '../overflow-group/overflow-group.js';
-import '../selection/selection-select-all.js';
-import '../selection/selection-select-all-pages.js';
-import '../selection/selection-summary.js';
-import { css, html, LitElement } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
+import { css } from 'lit';
 import { findComposedAncestor } from '../../helpers/dom.js';
-import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { SelectionHeader } from '../selection/selection-header.js';
 
 /**
  * A header for list components containing select-all, etc.
  * @slot - Responsive container using `d2l-overflow-group` for `d2l-selection-action` elements
  */
-class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
-
+class ListHeader extends SelectionHeader {
 	static get properties() {
 		return {
-			/**
-			 * Whether to render select-all and selection summary
-			 * @type {boolean}
-			 */
-			noSelection: { type: Boolean, attribute: 'no-selection' },
-			/**
-			 * Disables sticky positioning for the header
-			 * @type {boolean}
-			 */
-			noSticky: { type: Boolean, attribute: 'no-sticky' },
-			/**
-			 * Whether all pages can be selected
-			 * @type {boolean}
-			 */
-			selectAllPagesAllowed: { type: Boolean, attribute: 'select-all-pages-allowed' },
-			_hasActions: { state: true },
-			_scrolled: { type: Boolean, reflect: true }
+			_extendSeparator: { state: true }
 		};
 	}
 
 	static get styles() {
-		return css`
+		return [super.styles, css`
 			:host {
-				background-color: var(--d2l-list-header-background-color, white);
-				display: block;
-				position: sticky;
-				top: 0;
+				--d2l-selection-header-background-color: var(--d2l-list-header-background-color);
 				z-index: 6; /* must be greater than d2l-list-item-active-border */
 			}
 			:host([no-sticky]) {
-				background-color: transparent;
-				position: static;
 				z-index: auto;
 			}
-			.d2l-list-header-shadow {
-				transition: box-shadow 200ms ease-out;
-			}
-			:host([_scrolled]) .d2l-list-header-shadow {
-				background-color: var(--d2l-list-header-background-color, white);
-				bottom: -4px;
-				box-shadow: 0 8px 12px -9px rgba(0, 0, 0, 0.3);
-				clip: rect(30px, auto, 200px, auto);
-				height: 40px;
-				position: absolute;
-				width: 100%;
-				z-index: -1;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.d2l-list-header-container {
-				align-items: center;
-				display: flex;
-				margin-bottom: 6px;
-				margin-top: 6px;
-				min-height: 54px;
-			}
-			.d2l-list-header-container-slim {
-				min-height: 36px;
-			}
 			.d2l-list-header-extend-separator {
 				padding: 0 0.9rem;
 			}
-			d2l-selection-select-all {
-				flex: none;
-			}
-			d2l-selection-summary {
-				flex: none;
-				margin-left: 0.9rem;
-			}
-			:host([dir="rtl"]) d2l-selection-summary {
-				margin-left: 0;
-				margin-right: 0.9rem;
-			}
-			d2l-selection-select-all-pages {
-				flex: none;
-				margin-left: 0.45rem;
-			}
-			:host([dir="rtl"]) d2l-selection-select-all-pages {
-				margin-left: 0;
-				margin-right: 0.45rem;
-			}
-			.d2l-list-header-actions {
-				--d2l-overflow-group-justify-content: flex-end;
-				flex: auto;
-				text-align: right;
-			}
-			:host([dir="rtl"]) .d2l-list-header-actions {
-				text-align: left;
-			}
-		`;
+		`];
 	}
 
 	constructor() {
 		super();
-		this.noSelection = false;
-		this.noSticky = false;
-		this.selectAllPagesAllowed = false;
 		this._extendSeparator = false;
 	}
 
@@ -121,40 +37,15 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 		super.connectedCallback();
 
 		const parent = findComposedAncestor(this.parentNode, node => node && node.tagName === 'D2L-LIST');
-		if (!parent) return;
-
-		this._extendSeparator = parent.hasAttribute('extend-separators');
+		if (parent) this._extendSeparator = parent.hasAttribute('extend-separators');
 	}
 
-	render() {
-		const classes = {
-			'd2l-list-header-container': true,
-			'd2l-list-header-container-slim': (!this._hasActions && !this.selectAllPagesAllowed),
+	_getSelectionHeaderContainerClasses() {
+		return {
+			...super._getSelectionHeaderContainerClasses(),
 			'd2l-list-header-extend-separator': this._extendSeparator
 		};
-		return html`
-			<div class="${classMap(classes)}">
-				${this.noSelection ? null : html`
-					<d2l-selection-select-all></d2l-selection-select-all>
-					<d2l-selection-summary
-						aria-hidden="true"
-						class="d2l-list-header-summary"
-						no-selection-text="${this.localize('components.selection.select-all')}">
-					</d2l-selection-summary>
-					${this.selectAllPagesAllowed ? html`<d2l-selection-select-all-pages></d2l-selection-select-all-pages>` : null}
-				`}
-				<div class="d2l-list-header-actions">
-					<d2l-overflow-group opener-type="icon"><slot @slotchange="${this._handleSlotChange}"></slot></d2l-overflow-group>
-				</div>
-			</div>
-			${!this.noSticky ? html`<div class="d2l-list-header-shadow"></div>` : null}
-		`;
-	}
-
-	_handleSlotChange(e) {
-		this._hasActions = (e.target.assignedNodes({ flatten: true }).filter(node => node.nodeType === Node.ELEMENT_NODE).length > 0);
 	}
-
 }
 
 customElements.define('d2l-list-header', ListHeader);

package/components/list/list.js

@@ -106,25 +106,11 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 
 		});
 
-		if (typeof(IntersectionObserver) === 'function') {
-			this._intersectionObserver = new IntersectionObserver(entries => {
-				const slot = this.shadowRoot.querySelector('slot[name="header"]');
-				const header = slot.assignedNodes({ flatten: true }).find(node => {
-					return node.nodeType === Node.ELEMENT_NODE && node.tagName === 'D2L-LIST-HEADER';
-				});
-				if (!header) return;
-				const entry = entries[0];
-				header._scrolled = !entry.isIntersecting;
-			});
-			this._intersectionObserver.observe(this.shadowRoot.querySelector('.d2l-list-top-sentinel'));
-		}
-
 	}
 
 	render() {
 		const role = !this.grid ? 'list' : 'application';
 		return html`
-			<div class="d2l-list-top-sentinel"></div>
 			<div role="${role}" class="d2l-list-container">
 				<slot name="header"></slot>
 				<slot @keydown="${this._handleKeyDown}" @slotchange="${this._handleSlotChange}"></slot>

package/components/selection/README.md

@@ -36,6 +36,7 @@ The `SelectionMixin` defines the `selection-single` attribute that consumers can
 </script>
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';
+  import '@brightspace-ui/core/components/selection/selection-header.js';
   import '@brightspace-ui/core/components/selection/selection-input.js';
   import '@brightspace-ui/core/components/selection/selection-select-all.js';
   import '@brightspace-ui/core/components/selection/selection-summary.js';
@@ -50,8 +51,6 @@ The `SelectionMixin` defines the `selection-single` attribute that consumers can
   }
   li {
     list-style-type: none;
-  }
-  li, .d2l-selection-header, .d2l-selection-header-wrapper {
     align-items: center;
     display: flex;
   }
@@ -62,26 +61,13 @@ The `SelectionMixin` defines the `selection-single` attribute that consumers can
     margin-left: 10px;
     margin-right: 0;
   }
-  .d2l-selection-header-wrapper {
-    flex-wrap: wrap;
-  }
-  .d2l-selection-header {
-    flex: auto;
-  }
-  d2l-selection-summary {
-    flex: none;
-  }
 </style>
 <!-- docs: end hidden content -->
 <d2l-demo-selection>
-  <div class="d2l-selection-header-wrapper">
-    <div class="d2l-selection-header">
-      <d2l-selection-select-all></d2l-selection-select-all>
-      <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>
-    </div>
-    <d2l-selection-summary></d2l-selection-summary>
-  </div>
+  <d2l-selection-header>
+    <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-header>
   <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>
@@ -441,3 +427,58 @@ The `d2l-selection-summary` component may be placed inside the selection control
 | `no-selection-text` | String | Text to display if no items are selected. By default, the "0 selected" message is displayed. |
 | `selection-for` | String | Id of the corresponding `SelectionMixin` component, if not placed within it. |
 <!-- docs: end hidden content -->
+
+## Selection Header [d2l-selection-header]
+
+The `d2l-selection-header` provides a standardized wrapper to display selection information and actions. It includes a select-all checkbox, summary, a slot for `d2l-selection-action`s, and overflow-group behaviour.
+
+When using lists, use the list-specific `d2l-list-header` instead, which extends this component's behaviour.
+
+<!-- docs: demo live name:d2l-selection-header autoSize:false size:medium -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/selection/selection-action.js';
+  import '@brightspace-ui/core/components/selection/selection-header.js';
+  import '@brightspace-ui/core/components/selection/demo/demo-selection.js';
+</script>
+<!-- docs: start hidden content -->
+<style>
+  ul {
+    padding: 0;
+  }
+  li {
+    list-style-type: none;
+    align-items: center;
+    display: flex;
+  }
+  d2l-selection-input {
+    margin-right: 10px;
+  }
+  [dir="rtl"] d2l-selection-input {
+    margin-left: 10px;
+    margin-right: 0;
+  }
+</style>
+<!-- docs: end hidden content -->
+<d2l-demo-selection>
+  <d2l-selection-header>
+    <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-header>
+  <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>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `no-selection` | Boolean | Whether to render select-all and selection summary |
+| `no-sticky` | Boolean | Disables sticky positioning for the header |
+| `select-all-pages-allowed` | Boolean | Whether all pages can be selected |
+<!-- docs: end hidden content -->

package/components/selection/demo/selection.html

@@ -11,6 +11,7 @@
 			import '../selection-action.js';
 			import '../selection-action-dropdown.js';
 			import '../selection-action-menu-item.js';
+			import '../selection-header.js';
 			import '../selection-input.js';
 			import '../selection-select-all.js';
 			import '../selection-summary.js';
@@ -56,22 +57,19 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-demo-selection>
-						<div class="d2l-selection-header">
-							<div style="flex: auto;">
-								<d2l-selection-select-all></d2l-selection-select-all>
-								<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-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>
-							</div>
-							<d2l-selection-summary style="flex: none;"></d2l-selection-summary>
-						</div>
+						<d2l-selection-header>
+							<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-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-header>
+
 						<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>
@@ -86,13 +84,31 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-demo-selection selection-single>
-						<div class="d2l-selection-header">
-							<div style="flex: auto;">
-								<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>
-							</div>
-							<d2l-selection-summary style="flex: none;"></d2l-selection-summary>
-						</div>
+						<d2l-selection-header>
+							<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-header>
+
+						<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>None-sticky selection header</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-selection>
+						<d2l-selection-header 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-header>
+
 						<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>
@@ -109,11 +125,10 @@
 					<div class="d2l-selection-collections">
 						<div class="d2l-selection-collection">
 							Pick Your Toppings
-							<div class="d2l-selection-header">
-								<d2l-selection-select-all selection-for="collection-1"></d2l-selection-select-all>
-								<d2l-selection-action selection-for="collection-1" text="Add Note" icon="tier1:add-message" style="flex: 1; padding: 0 0.5rem;"></d2l-selection-action>
-								<d2l-selection-summary selection-for="collection-1"></d2l-selection-summary>
-							</div>
+							<d2l-selection-header selection-for="collection-1">
+								<d2l-selection-action selection-for="collection-1" text="Add Note" icon="tier1:add-message"></d2l-selection-action>
+							</d2l-selection-header>
+
 							<d2l-demo-selection id="collection-1">
 								<ul>
 									<li><d2l-selection-input key="let" label="Lettuce" selected></d2l-selection-input>Lettuce</li>
@@ -126,11 +141,9 @@
 
 						<div class="d2l-selection-collection">
 							Pick Your Bread
-							<div class="d2l-selection-header">
-								<d2l-selection-select-all selection-for="collection-2"></d2l-selection-select-all>
+							<d2l-selection-header selection-for="collection-2">
 								<d2l-selection-action selection-for="collection-2" text="Add Note" icon="tier1:add-message"></d2l-selection-action>
-								<d2l-selection-summary selection-for="collection-2"></d2l-selection-summary>
-							</div>
+							</d2l-selection-header>
 							<d2l-demo-selection id="collection-2" selection-single>
 								<ul>
 									<li><d2l-selection-input key="it" label="Italian"></d2l-selection-input>Italian</li>

package/components/selection/selection-header.js

@@ -0,0 +1,192 @@
+import '../overflow-group/overflow-group.js';
+import './selection-select-all.js';
+import './selection-select-all-pages.js';
+import './selection-summary.js';
+import { css, html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { SelectionObserverMixin } from './selection-observer-mixin.js';
+
+/**
+ * A header for selection components (e.g. list, table-wrapper) containing select-all, etc.
+ * @slot - Responsive container using `d2l-overflow-group` for `d2l-selection-action` elements
+ */
+export class SelectionHeader extends SelectionObserverMixin(RtlMixin(LocalizeCoreElement(LitElement))) {
+
+	static get properties() {
+		return {
+			/**
+			 * Whether to render select-all and selection summary
+			 * @type {boolean}
+			 */
+			noSelection: { type: Boolean, attribute: 'no-selection' },
+			/**
+			 * Disables sticky positioning for the header
+			 * @type {boolean}
+			 */
+			noSticky: { type: Boolean, attribute: 'no-sticky' },
+			/**
+			 * Whether all pages can be selected
+			 * @type {boolean}
+			 */
+			selectAllPagesAllowed: { type: Boolean, attribute: 'select-all-pages-allowed' },
+			_hasActions: { state: true },
+			_scrolled: { type: Boolean, reflect: true }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				background-color: var(--d2l-selection-header-background-color, white);
+				display: block;
+				position: sticky;
+				top: 0;
+			}
+			:host([no-sticky]) {
+				background-color: transparent;
+				position: static;
+			}
+			@media (prefers-reduced-motion: no-preference) {
+				.d2l-selection-header-shadow {
+					transition: box-shadow 200ms ease-out;
+				}
+			}
+			:host([_scrolled]) .d2l-selection-header-shadow {
+				background-color: var(--d2l-selection-header-background-color, white);
+				bottom: -4px;
+				box-shadow: 0 8px 12px -9px rgba(0, 0, 0, 0.3);
+				clip: rect(30px, auto, 200px, auto);
+				height: 40px;
+				position: absolute;
+				width: 100%;
+				z-index: -1;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			.d2l-selection-header-container {
+				align-items: center;
+				display: flex;
+				margin-bottom: 6px;
+				margin-top: 6px;
+				min-height: 54px;
+			}
+			.d2l-selection-header-container-slim {
+				min-height: 36px;
+			}
+			d2l-selection-select-all {
+				flex: none;
+			}
+			d2l-selection-summary {
+				flex: none;
+				margin-left: 0.9rem;
+			}
+			:host([dir="rtl"]) d2l-selection-summary {
+				margin-left: 0;
+				margin-right: 0.9rem;
+			}
+			d2l-selection-select-all-pages {
+				flex: none;
+				margin-left: 0.45rem;
+			}
+			:host([dir="rtl"]) d2l-selection-select-all-pages {
+				margin-left: 0;
+				margin-right: 0.45rem;
+			}
+			.d2l-selection-header-actions {
+				--d2l-overflow-group-justify-content: flex-end;
+				flex: auto;
+				text-align: right;
+			}
+			:host([dir="rtl"]) .d2l-selection-header-actions {
+				text-align: left;
+			}
+			.d2l-sticky-edge {
+				left: 0;
+				position: absolute;
+				right: 0;
+				top: -1px;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this.noSelection = false;
+		this.noSticky = false;
+		this.selectAllPagesAllowed = false;
+		this._scrolled = false;
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._stickyObserverDisconnect();
+	}
+
+	render() {
+		const classes = this._getSelectionHeaderContainerClasses();
+		return html`
+			<div class="d2l-sticky-edge"></div>
+			<div class="${classMap(classes)}">
+				${this.noSelection ? null : html`
+					<d2l-selection-select-all></d2l-selection-select-all>
+					<d2l-selection-summary
+						aria-hidden="true"
+						no-selection-text="${this.localize('components.selection.select-all')}"
+					>
+					</d2l-selection-summary>
+					${this.selectAllPagesAllowed ? html`<d2l-selection-select-all-pages></d2l-selection-select-all-pages>` : null}
+				`}
+				<div class="d2l-selection-header-actions">
+					<d2l-overflow-group opener-type="icon"><slot @slotchange="${this._handleSlotChange}"></slot></d2l-overflow-group>
+				</div>
+			</div>
+			${!this.noSticky ? html`<div class="d2l-selection-header-shadow"></div>` : null}
+		`;
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+
+		if (changedProperties.has('noSticky')) {
+			this._stickyObserverUpdate();
+		}
+	}
+
+	_getSelectionHeaderContainerClasses() {
+		return {
+			'd2l-selection-header-container': true,
+			'd2l-selection-header-container-slim': (!this._hasActions && !this.selectAllPagesAllowed)
+		};
+	}
+
+	_handleSlotChange(e) {
+		this._hasActions = (e.target.assignedNodes({ flatten: true }).filter(node => node.nodeType === Node.ELEMENT_NODE).length > 0);
+	}
+
+	_stickyObserverDisconnect() {
+		if (this._stickyIntersectionObserver) {
+			this._stickyIntersectionObserver.disconnect();
+			this._stickyIntersectionObserver = undefined;
+			this._scrolled = false;
+		}
+	}
+
+	_stickyObserverUpdate() {
+		this._stickyObserverDisconnect();
+
+		if (!this.noSticky && typeof(IntersectionObserver) === 'function') {
+			this._stickyIntersectionObserver = new IntersectionObserver(([e]) => {
+				this._scrolled = !e.isIntersecting;
+			});
+
+			const target = this.shadowRoot.querySelector('.d2l-sticky-edge');
+			this._stickyIntersectionObserver.observe(target);
+		}
+	}
+
+}
+
+customElements.define('d2l-selection-header', SelectionHeader);

package/components/table/README.md

@@ -18,6 +18,7 @@ Tables are used to display tabular data in rows and columns. They can allow user
   * There are more than just a few dimensions
   * The dimensions need to be sortable
   * The dimensions need to be easily compared across rows (ie- scannable)
+* Specify [column and row headings](https://www.w3.org/WAI/tutorials/tables/) so data is meaningful to screen reader users
 <!-- docs: end dos -->
 
 <!-- docs: start donts -->

package/custom-elements.json

@@ -7337,6 +7337,11 @@
           "description": "Whether all pages can be selected",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "selection-for",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
         }
       ],
       "properties": [
@@ -7361,11 +7366,25 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selectionFor",
+          "attribute": "selection-for",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
+        {
+          "name": "selectionInfo"
+        },
         {
           "name": "documentLocaleSettings",
           "default": "\"getDocumentLocaleSettings()\""
         }
       ],
+      "events": [
+        {
+          "name": "d2l-selection-observer-subscribe"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -9739,6 +9758,83 @@
         }
       ]
     },
+    {
+      "name": "d2l-selection-header",
+      "path": "./components/selection/selection-header.js",
+      "description": "A header for selection components (e.g. list, table-wrapper) containing select-all, etc.",
+      "attributes": [
+        {
+          "name": "no-selection",
+          "description": "Whether to render select-all and selection summary",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "no-sticky",
+          "description": "Disables sticky positioning for the header",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "select-all-pages-allowed",
+          "description": "Whether all pages can be selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selection-for",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "noSelection",
+          "attribute": "no-selection",
+          "description": "Whether to render select-all and selection summary",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "noSticky",
+          "attribute": "no-sticky",
+          "description": "Disables sticky positioning for the header",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selectAllPagesAllowed",
+          "attribute": "select-all-pages-allowed",
+          "description": "Whether all pages can be selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selectionFor",
+          "attribute": "selection-for",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
+        {
+          "name": "selectionInfo"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-selection-observer-subscribe"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Responsive container using `d2l-overflow-group` for `d2l-selection-action` elements"
+        }
+      ]
+    },
     {
       "name": "d2l-selection-input",
       "path": "./components/selection/selection-input.js",

package/package.json

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