@brightspace-ui/core 2.80.10 → 2.81.0

package/components/inputs/input-text.js

@@ -1,6 +1,6 @@
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
@@ -460,18 +460,23 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 					<div class="d2l-input-inside-before" @keypress="${this._suppressEvent}">${this.dir === 'rtl' ? unit : ''}<slot name="${firstSlotName}" @slotchange="${this._handleSlotChange}"></slot></div>
 					<div class="d2l-input-inside-after" @keypress="${this._suppressEvent}">${this.dir !== 'rtl' ? unit : ''}<slot name="${lastSlotName}" @slotchange="${this._handleSlotChange}"></slot></div>
 					${ (!isValid && !this.hideInvalidIcon && !this._focused) ? html`<div class="d2l-input-text-invalid-icon" style="${styleMap(invalidIconStyles)}" @click="${this._handleInvalidIconClick}"></div>` : null}
-					${ this.validationError ? html`<d2l-tooltip for=${this._inputId} state="error" align="start">${this.validationError} <span class="d2l-offscreen">${this.description}</span></d2l-tooltip>` : null }
 				</div><div id="after-slot" class="d2l-skeletize" ?hidden="${!this._hasAfterContent}"><slot name="after" @slotchange="${this._handleAfterSlotChange}"></slot></div>
 			</div>
 			${offscreenContainer}
 		`;
+
+		let label = nothing;
 		if (this.label && !this.labelHidden && !this.labelledBy) {
 			const unitLabel = this._getUnitLabel();
-			return html`
-				<label class="d2l-input-label d2l-skeletize" for="${this._inputId}">${this.label}${unitLabel ? html`<span class="d2l-offscreen">${unitLabel}</span>` : ''}</label>
-				${input}`;
+			label = html`<label class="d2l-input-label d2l-skeletize" for="${this._inputId}">${this.label}${unitLabel ? html`<span class="d2l-offscreen">${unitLabel}</span>` : ''}</label>`;
+		}
+
+		let tooltip = nothing;
+		if (this.validationError && !this.skeleton) {
+			tooltip = html`<d2l-tooltip state="error" align="start">${this.validationError} <span class="d2l-offscreen">${this.description}</span></d2l-tooltip>`;
 		}
-		return input;
+
+		return html`${tooltip}${label}${input}`;
 	}
 
 	updated(changedProperties) {

package/components/list/README.md

@@ -156,7 +156,7 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
 
 ## Selection Lists
 
-The `d2l-list` supports selectable items within a list, including both single and multi selection. Selection is enabled when `d2l-list-item`s have the `selectable` attribute. When items are selectable, multiple selection is the default behaviour, however the `selection-single` attribute can be applied to the `d2l-list` to enable single selection. A `d2l-list-header` component can be added to `d2l-list`'s `header` slot to provide select-all and bulk actions.
+The `d2l-list` supports selectable items within a list, including both single and multi selection. Selection is enabled when `d2l-list-item`s have the `selectable` attribute. When items are selectable, multiple selection is the default behaviour, however the `selection-single` attribute can be applied to the `d2l-list` to enable single selection. A `d2l-list-controls` component can be added to `d2l-list`'s `controls` slot to provide select-all and bulk actions.
 
 ### Accessibility Properties
 
@@ -168,16 +168,16 @@ If a `d2l-list-item` is selectable then it should have a `label` attribute that
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
-  import '@brightspace-ui/core/components/list/list-header.js';
+  import '@brightspace-ui/core/components/list/list-controls.js';
   import '@brightspace-ui/core/components/list/list-item.js';
   import '@brightspace-ui/core/components/list/list-item-content.js';
   import '@brightspace-ui/core/components/selection/selection-action.js';
 </script>
 
 <d2l-list style="width: 100%">
-  <d2l-list-header slot="header">
+  <d2l-list-controls slot="controls">
     <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
-  </d2l-list-header>
+  </d2l-list-controls>
   <d2l-list-item selectable key="eth" label="Earth Sciences">
     <d2l-list-item-content>
       <div>Earth Sciences</div>
@@ -207,16 +207,16 @@ If a `d2l-list-item` is expandable then it should have a `label` attribute that
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
-  import '@brightspace-ui/core/components/list/list-header.js';
+  import '@brightspace-ui/core/components/list/list-controls.js';
   import '@brightspace-ui/core/components/list/list-item.js';
   import '@brightspace-ui/core/components/list/list-item-content.js';
   import '@brightspace-ui/core/components/selection/selection-action.js';
 </script>
 
 <d2l-list grid style="width: 100%">
-  <d2l-list-header slot="header">
+  <d2l-list-controls slot="controls">
     <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
-  </d2l-list-header>
+  </d2l-list-controls>
   <d2l-list-item selectable expandable key="expand-1" label="Expandable item #1">
     <d2l-list-item-content>
       <div>Expandable item #1</div>
@@ -325,25 +325,25 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
 <d2l-my-drag-drop-elem style="width: 100%;"></d2l-my-drag-drop-elem>
 ```
 
-## List Header [d2l-list-header]
+## List Controls [d2l-list-controls]
 
-The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot to provide a select-all checkbox, summary, a slot for `d2l-selection-action`s, and overflow-group behaviour.
+The `d2l-list-controls` component can be placed in the `d2l-list`'s `controls` slot to provide a select-all checkbox, summary, a slot for `d2l-selection-action`s, and overflow-group behaviour.
 
-<!-- docs: demo live name:d2l-list-header autoSize:false size:medium -->
+<!-- docs: demo live name:d2l-list-controls autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
-  import '@brightspace-ui/core/components/list/list-header.js';
+  import '@brightspace-ui/core/components/list/list-controls.js';
   import '@brightspace-ui/core/components/list/list-item.js';
   import '@brightspace-ui/core/components/list/list-item-content.js';
   import '@brightspace-ui/core/components/selection/selection-action.js';
 </script>
 
 <d2l-list style="width: 100%">
-  <d2l-list-header slot="header">
+  <d2l-list-controls slot="controls">
     <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
     <d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
-  </d2l-list-header>
+  </d2l-list-controls>
   <d2l-list-item selectable key="eth" label="Earth Sciences">
     <d2l-list-item-content>
       <div>Earth Sciences</div>
@@ -365,7 +365,7 @@ The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot
 | Property | Type | Description |
 |---|---|---|
 | `no-selection` | Boolean | Whether to render select-all and selection summary |
-| `no-sticky` | Boolean | Disables sticky positioning for the header |
+| `no-sticky` | Boolean | Disables sticky positioning for the controls |
 | `select-all-pages-allowed` | Boolean | Whether all pages can be selected |
 <!-- docs: end hidden content -->
 

package/components/list/demo/demo-list-nested-lazy-load.js

@@ -1,7 +1,7 @@
 import '../list-item-content.js';
 import '../list-item.js';
 import '../list.js';
-import '../list-header.js';
+import '../list-controls.js';
 import '../../selection/selection-action.js';
 import { html, LitElement, nothing } from 'lit';
 import { getUniqueId } from '../../../helpers/uniqueId.js';
@@ -87,7 +87,7 @@ class ListDemoNestedLazyLoad extends LitElement {
 	_renderList(items, nested, includeHeader = false) {
 		return html`
 			<d2l-list grid drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}">
-				${ includeHeader ? this._renderListHeader() : nothing }
+				${ includeHeader ? this._renderListControls() : nothing }
 				${repeat(items, item => item.key, item => html`
 					${this._renderListItem(item)}
 				`)}
@@ -95,12 +95,12 @@ class ListDemoNestedLazyLoad extends LitElement {
 		`;
 	}
 
-	_renderListHeader() {
+	_renderListControls() {
 		return html`
-			<d2l-list-header slot="header">
+			<d2l-list-controls slot="controls">
 				<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 				<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
-			</d2l-list-header>
+			</d2l-list-controls>
 		`;
 	}
 

package/components/list/demo/demo-list-nested.js

@@ -7,7 +7,7 @@ import '../../dropdown/dropdown-more.js';
 import '../../menu/menu.js';
 import '../../menu/menu-item.js';
 import '../../paging/pager-load-more.js';
-import '../list-header.js';
+import '../list-controls.js';
 import '../../selection/selection-action.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -25,7 +25,7 @@ class ListDemoNested extends LitElement {
 			disableExpandFeature: { type: Boolean, attribute: 'disable-expand-feature' },
 			expanded: { type: Boolean },
 			includeSecondaryActions: { type: Boolean, attribute: 'include-secondary-actions' },
-			includeListHeader: { type: Boolean, attribute: 'include-list-header' },
+			includeListControls: { type: Boolean, attribute: 'include-list-controls' },
 			includeActionHref: { type: Boolean, attribute: 'include-action-href' },
 			useButtonListItem: { type: Boolean, attribute: 'use-button-item' },
 			showLoadMore: { type: Boolean, attribute: 'show-load-more' },
@@ -60,7 +60,7 @@ class ListDemoNested extends LitElement {
 	render() {
 		return html`
 			<div @d2l-list-items-move="${this._handleListItemsMove}">
-				${this._renderList(this._loadedItems, false, this.includeListHeader, this.showLoadMore)}
+				${this._renderList(this._loadedItems, false, this.includeListControls, this.showLoadMore)}
 			</div>
 		`;
 	}
@@ -167,10 +167,10 @@ class ListDemoNested extends LitElement {
 			</d2l-list-item-content>`;
 	}
 
-	_renderList(items, nested, includeHeader = false, showLoadMore = false) {
+	_renderList(items, nested, includeControls = false, showLoadMore = false) {
 		return html`
 			<d2l-list ?grid="${!this.disableListGrid}" drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}">
-				${ includeHeader ? this._renderListHeader() : nothing }
+				${ includeControls ? this._renderListControls() : nothing }
 				${repeat(items, item => item.key, item => html`
 					${this._renderListItem(item)}
 					${this._renderListItemButton(item)}
@@ -180,12 +180,12 @@ class ListDemoNested extends LitElement {
 		`;
 	}
 
-	_renderListHeader() {
+	_renderListControls() {
 		return html`
-			<d2l-list-header slot="header">
+			<d2l-list-controls slot="controls">
 				<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 				<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
-			</d2l-list-header>
+			</d2l-list-controls>
 		`;
 	}
 

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

@@ -10,7 +10,7 @@ import '../../selection/selection-action.js';
 import '../../selection/selection-action-dropdown.js';
 import '../../selection/selection-action-menu-item.js';
 import '../../tooltip/tooltip.js';
-import '../list-header.js';
+import '../list-controls.js';
 import '../list-item-content.js';
 import '../list-item.js';
 import '../list.js';
@@ -148,7 +148,7 @@ class DemoList extends LitElement {
 		const remainingItemCount = this.items.length - loadedItems.length;
 		return html`
 			<d2l-list ?grid="${this.grid}" item-count="${this.items.length}">
-				<d2l-list-header slot="header" select-all-pages-allowed>
+				<d2l-list-controls slot="controls" select-all-pages-allowed>
 					<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>
@@ -173,7 +173,7 @@ class DemoList extends LitElement {
 						</d2l-dropdown-menu>
 					</d2l-dropdown-button-subtle>
 					<d2l-selection-action icon="tier1:gear" text="Settings" requires-selection></d2l-selection-action>
-				</d2l-list-header>
+				</d2l-list-controls>
 				${repeat(loadedItems, item => item.key, item => {
 					const tooltipButtonId = getUniqueId();
 					return html`

package/components/list/demo/list-expand-collapse.html

@@ -24,7 +24,7 @@
 					expanded
 					include-action-href
 					include-secondary-actions
-					include-list-header></d2l-demo-list-nested>
+					include-list-controls></d2l-demo-list-nested>
 			</template>
 		</d2l-demo-snippet>
 
@@ -50,7 +50,7 @@
 					expandable
 					expanded
 					include-secondary-actions
-					include-list-header
+					include-list-controls
 					disable-list-grid></d2l-demo-list-nested>
 			</template>
 		</d2l-demo-snippet>
@@ -85,7 +85,7 @@
 					selectable
 					expandable
 					include-secondary-actions
-					include-list-header
+					include-list-controls
 					use-button-item></d2l-demo-list-nested>
 			</template>
 		</d2l-demo-snippet>

package/components/list/demo/list-item-actions.html

@@ -13,7 +13,7 @@
 			import '../../menu/menu-item.js';
 			import '../../selection/selection-action.js';
 			import '../../tooltip/tooltip.js';
-			import '../list-header.js';
+			import '../list-controls.js';
 			import '../list-item-button.js';
 			import '../list-item-content.js';
 			import '../list-item.js';
@@ -149,10 +149,10 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-list>
-						<d2l-list-header slot="header">
+						<d2l-list-controls slot="controls">
 							<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
-						</d2l-list-header>
+						</d2l-list-controls>
 						<d2l-list-item selectable key="1" label="Introductory Earth Sciences">
 							<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
 						</d2l-list-item>
@@ -171,10 +171,10 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-list selection-single>
-						<d2l-list-header slot="header">
+						<d2l-list-controls slot="controls">
 							<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
-						</d2l-list-header>
+						</d2l-list-controls>
 						<d2l-list-item selectable key="1" label="Introductory Earth Sciences">
 							<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
 						</d2l-list-item>
@@ -193,13 +193,13 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-list>
-						<d2l-list-header slot="header">
+						<d2l-list-controls slot="controls">
 							<d2l-selection-action icon="tier1:tag-hollow" text="Tag" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:share" text="Share" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
-						</d2l-list-header>
+						</d2l-list-controls>
 						<d2l-list-item selectable key="1" label="Introductory Earth Sciences">
 							<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
 						</d2l-list-item>
@@ -218,7 +218,7 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-list>
-						<d2l-list-header slot="header"></d2l-list-header>
+						<d2l-list-controls slot="controls"></d2l-list-controls>
 						<d2l-list-item selectable key="1" label="Introductory Earth Sciences">
 							<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
 						</d2l-list-item>
@@ -237,10 +237,10 @@
 			<d2l-demo-snippet id="selection-link-demo">
 				<template>
 					<d2l-list>
-						<d2l-list-header slot="header">
+						<d2l-list-controls slot="controls">
 							<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
-						</d2l-list-header>
+						</d2l-list-controls>
 						<d2l-list-item href="http://www.d2l.com" selectable key="1" label="Introductory Earth Sciences">
 							<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
 						</d2l-list-item>
@@ -264,10 +264,10 @@
 			<d2l-demo-snippet id="selection-button-demo">
 				<template>
 					<d2l-list>
-						<d2l-list-header slot="header">
+						<d2l-list-controls slot="controls">
 							<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
-						</d2l-list-header>
+						</d2l-list-controls>
 						<d2l-list-item-button selectable key="1" label="Introductory Earth Sciences">
 							<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
 						</d2l-list-item-button>
@@ -291,10 +291,10 @@
 			<d2l-demo-snippet id="grid-link-demo">
 				<template>
 					<d2l-list grid>
-						<d2l-list-header slot="header">
+						<d2l-list-controls slot="controls">
 							<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
-						</d2l-list-header>
+						</d2l-list-controls>
 						<d2l-list-item href="http://www.d2l.com" selectable key="1" label="Introductory Earth Sciences">
 							<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
 							<div slot="actions">
@@ -327,10 +327,10 @@
 			<d2l-demo-snippet id="grid-button-demo">
 				<template>
 					<d2l-list grid>
-						<d2l-list-header slot="header">
+						<d2l-list-controls slot="controls">
 							<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
-						</d2l-list-header>
+						</d2l-list-controls>
 						<d2l-list-item-button selectable key="1" label="Introductory Earth Sciences">
 							<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
 							<div slot="actions">

package/components/list/demo/list-item-scroll.html

@@ -18,7 +18,7 @@
 		</script>
 		<style>
 			html {
-				--d2l-list-header-background-color: #f1f5fb;
+				--d2l-list-controls-background-color: #f1f5fb;
 			}
 			.container {
 				height: 400px;
@@ -80,7 +80,7 @@
 										Use <code>alignToTop=false</code> to avoid the issue.
 									</p>
 								</div>
-						
+
 								<d2l-list>
 									<d2l-list-item selectable key="1" label="Introductory Earth Sciences">
 										<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>

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

@@ -14,7 +14,7 @@
 			import '../list-item-content.js';
 			import './list-item-custom.js';
 			import '../list-item.js';
-			import '../list-header.js';
+			import '../list-controls.js';
 			import '../list.js';
 			import '../../menu/menu.js';
 			import '../../menu/menu-item.js';
@@ -31,10 +31,10 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-list grid>
-						<d2l-list-header slot="header">
+						<d2l-list-controls slot="controls">
 							<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
-						</d2l-list-header>
+						</d2l-list-controls>
 						<d2l-list-item selectable key="L1-1" label="Label for L1-1">
 							<d2l-list-item-content>
 								<div>Earth Sciences (L1)</div>
@@ -123,10 +123,10 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-list grid>
-						<d2l-list-header slot="header">
+						<d2l-list-controls slot="controls">
 							<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
-						</d2l-list-header>
+						</d2l-list-controls>
 						<d2l-demo-list-item-custom key="L1-1"></d2l-demo-list-item-custom>
 						<d2l-demo-list-item-custom key="L1-2"></d2l-demo-list-item-custom>
 						<d2l-demo-list-item-custom key="L1-3"></d2l-demo-list-item-custom>

package/components/list/list-controls.js

@@ -0,0 +1,54 @@
+import { css } from 'lit';
+import { findComposedAncestor } from '../../helpers/dom.js';
+import { SelectionControls } from '../selection/selection-controls.js';
+
+/**
+ * Controls for list components containing select-all, etc.
+ */
+export class ListControls extends SelectionControls {
+	static get properties() {
+		return {
+			_extendSeparator: { state: true }
+		};
+	}
+
+	static get styles() {
+		return [super.styles, css`
+			:host {
+				--d2l-selection-controls-background-color: var(--d2l-list-controls-background-color, var(--d2l-list-header-background-color));
+				z-index: 6; /* must be greater than d2l-list-item-active-border */
+			}
+			:host([no-sticky]) {
+				z-index: auto;
+			}
+			.d2l-list-controls-extend-separator {
+				padding: 0 0.9rem;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this._extendSeparator = false;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+
+		const parent = findComposedAncestor(this.parentNode, node => node && node.tagName === 'D2L-LIST');
+		if (parent) this._extendSeparator = parent.hasAttribute('extend-separators');
+	}
+
+	_getSelectionControlsContainerClasses() {
+		return {
+			...super._getSelectionControlsContainerClasses(),
+			'd2l-list-controls-extend-separator': this._extendSeparator
+		};
+	}
+
+	_getSelectionControlsLabel() {
+		return this.localize('components.list-controls.label');
+	}
+}
+
+customElements.define('d2l-list-controls', ListControls);

package/components/list/list-header.js

@@ -1,54 +1,5 @@
-import { css } from 'lit';
-import { findComposedAncestor } from '../../helpers/dom.js';
-import { SelectionHeader } from '../selection/selection-header.js';
+import { ListControls } from './list-controls.js';
 
-/**
- * A header for list components containing select-all, etc.
- */
-class ListHeader extends SelectionHeader {
-	static get properties() {
-		return {
-			_extendSeparator: { state: true }
-		};
-	}
-
-	static get styles() {
-		return [super.styles, css`
-			:host {
-				--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]) {
-				z-index: auto;
-			}
-			.d2l-list-header-extend-separator {
-				padding: 0 0.9rem;
-			}
-		`];
-	}
-
-	constructor() {
-		super();
-		this._extendSeparator = false;
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-
-		const parent = findComposedAncestor(this.parentNode, node => node && node.tagName === 'D2L-LIST');
-		if (parent) this._extendSeparator = parent.hasAttribute('extend-separators');
-	}
-
-	_getSelectionHeaderContainerClasses() {
-		return {
-			...super._getSelectionHeaderContainerClasses(),
-			'd2l-list-header-extend-separator': this._extendSeparator
-		};
-	}
-
-	_getSelectionHeaderLabel() {
-		return this.localize('components.list-header.label');
-	}
-}
+class ListHeader extends ListControls {}
 
 customElements.define('d2l-list-header', ListHeader);

package/components/list/list.js

@@ -13,7 +13,7 @@ export const listSelectionStates = SelectionInfo.states;
 /**
  * A container for a styled list of items ("d2l-list-item"). It provides the appropriate "list" semantics as well as options for displaying separators, etc.
  * @slot - Slot for list items (ex. `d2l-list-item`, `d2l-list-item-button`, or custom items)
- * @slot header - Slot for `d2l-list-header` to be rendered above the list
+ * @slot controls - Slot for `d2l-list-controls` to be rendered above the list
  * @slot pager - Slot for `d2l-pager-load-more` to be rendered below the list
  * @fires d2l-list-items-move - Dispatched when one or more items are moved. See [Event Details: d2l-list-items-move](#event-details%3A-%40d2l-list-items-move).
  */
@@ -121,6 +121,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 	render() {
 		const role = !this.grid ? 'list' : 'application';
 		return html`
+			<slot name="controls"></slot>
 			<slot name="header"></slot>
 			<div role="${role}">
 				<slot @keydown="${this._handleKeyDown}" @slotchange="${this._handleSlotChange}"></slot>

package/components/selection/README.md

@@ -36,7 +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-controls.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';
@@ -64,10 +64,10 @@ The `SelectionMixin` defines the `selection-single` attribute that consumers can
 </style>
 <!-- docs: end hidden content -->
 <d2l-demo-selection>
-  <d2l-selection-header>
+  <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-header>
+  </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>
@@ -308,7 +308,7 @@ The `d2l-selection-select-all` component may be placed inside the selection cont
       margin-right: 15px;
     }
     #other-list {
-      margin-left: 0;   
+      margin-left: 0;
     }
   }
 </style>
@@ -429,17 +429,17 @@ The `d2l-selection-summary` component may be placed inside the selection control
 | `selection-for` | String | Id of the corresponding `SelectionMixin` component, if not placed within it. |
 <!-- docs: end hidden content -->
 
-## Selection Header [d2l-selection-header]
+## Selection Controls [d2l-selection-controls]
 
-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.
+The `d2l-selection-controls` 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.
+When using lists, use the list-specific `d2l-list-controls` instead, which extends this component's behaviour.
 
-<!-- docs: demo live name:d2l-selection-header display:block -->
+<!-- docs: demo live name:d2l-selection-controls display:block -->
 ```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/selection-controls.js';
   import '@brightspace-ui/core/components/selection/selection-input.js';
   import '@brightspace-ui/core/components/selection/demo/demo-selection.js';
 </script>
@@ -463,10 +463,10 @@ When using lists, use the list-specific `d2l-list-header` instead, which extends
 </style>
 <!-- docs: end hidden content -->
 <d2l-demo-selection>
-  <d2l-selection-header>
+  <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-header>
+  </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>
@@ -481,6 +481,6 @@ When using lists, use the list-specific `d2l-list-header` instead, which extends
 | Property | Type | Description |
 |---|---|---|
 | `no-selection` | Boolean | Whether to render select-all and selection summary |
-| `no-sticky` | Boolean | Disables sticky positioning for the header |
+| `no-sticky` | Boolean | Disables sticky positioning for the controls |
 | `select-all-pages-allowed` | Boolean | Whether all pages can be selected |
 <!-- docs: end hidden content -->