@brightspace-ui/core 2.33.0 → 2.34.2

package/components/backdrop/backdrop.js

@@ -3,6 +3,8 @@ import { css, html, LitElement } from 'lit';
 import { cssEscape, getComposedChildren, getComposedParent, isVisible } from '../../helpers/dom.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 
+export const BACKDROP_ROLE = 'd2l-backdrop-role';
+
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 
 const scrollKeys = [];
@@ -159,7 +161,7 @@ function hideAccessible(target) {
 			if (child.hasAttribute('d2l-backdrop-hidden')) continue;
 
 			const role = child.getAttribute('role');
-			if (role) child.setAttribute('d2l-backdrop-role', role);
+			if (role) child.setAttribute(BACKDROP_ROLE, role);
 			child.setAttribute('role', 'presentation');
 
 			if (child.nodeName === 'FORM' || child.nodeName === 'A') {
@@ -200,10 +202,10 @@ export function preventBodyScroll() {
 function showAccessible(elems) {
 	for (let i = 0; i < elems.length; i++) {
 		const elem = elems[i];
-		const role = elem.getAttribute('d2l-backdrop-role');
+		const role = elem.getAttribute(BACKDROP_ROLE);
 		if (role) {
 			elem.setAttribute('role', role);
-			elem.removeAttribute('d2l-backdrop-role');
+			elem.removeAttribute(BACKDROP_ROLE);
 		} else {
 			elem.removeAttribute('role');
 		}

package/components/list/README.md

@@ -193,6 +193,10 @@ If a `d2l-list-item` is selectable then it should have a `label` attribute that
 </d2l-list>
 ```
 
+## Pageable Lists
+
+Load-More paging functionality can be implemented in lists by placing a `d2l-pager-load-more` in `d2l-list`'s `pager` slot. The consumer must handle the `d2l-pager-load-more` event by loading more items, updating the pager state, and signalling completion by calling `complete()` on the event detail. Focus will be automatically moved on the first new item once complete. See [Paging](../../components/paging) for more details.
+
 ## Drag & Drop Lists
 
 The `d2l-list` supports drag & drop.
@@ -516,7 +520,7 @@ This event includes a detail object with helper methods attached to it.
 <!-- docs: start hidden content -->
 ## Future Improvements
 
-- Paging: integration with "load more", "scroll" and "numeric" paging mechanisms
+- Paging: integration with "scroll" and "numeric" paging mechanisms
 
 Looking for an enhancement not listed here? Create a GitHub issue!
 <!-- docs: end hidden content -->

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

@@ -0,0 +1,233 @@
+/* eslint-disable indent */
+import '../../button/button-icon.js';
+import '../../dropdown/dropdown-button-subtle.js';
+import '../../dropdown/dropdown-menu.js';
+import '../../dropdown/dropdown-more.js';
+import '../../menu/menu.js';
+import '../../menu/menu-item.js';
+import '../../paging/pager-load-more.js';
+import '../../selection/selection-action.js';
+import '../../selection/selection-action-dropdown.js';
+import '../../selection/selection-action-menu-item.js';
+import '../../tooltip/tooltip.js';
+import '../list-header.js';
+import '../list-item-content.js';
+import '../list-item.js';
+import '../list.js';
+import { css, html, LitElement } from 'lit';
+import { getUniqueId } from '../../../helpers/uniqueId.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+const items = [{
+	key: '1',
+	primaryText: 'Introductory Earth Sciences',
+	supportingText: 'This course explores the geological process of the Earth\'s interior and surface. These include volcanism, earthquakes, mountains...',
+	imgSrc: 'https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg',
+	dropNested: true,
+	items: [{
+		key: '1-1',
+		primaryText: 'Glaciation',
+		supportingText: 'Nesting Allowed',
+		imgSrc: 'https://s.brightspace.com/course-images/images/bf648978-6637-4fdc-815b-81572c436c0e/tile-high-density-max-size.jpg',
+		dropNested: true,
+		items: []
+	}, {
+		key: '1-2',
+		primaryText: 'Weathering',
+		supportingText: 'Nesting Allowed',
+		imgSrc: 'https://s.brightspace.com/course-images/images/50f91ba6-7c25-482a-bd71-1c4b7c8d2154/tile-high-density-min-size.jpg',
+		dropNested: true,
+		items: []
+	}, {
+		key: '1-3',
+		primaryText: 'Volcanism',
+		supportingText: 'Nesting Allowed',
+		imgSrc: 'https://s.brightspace.com/course-images/images/5eb2371d-6099-4c8d-8aad-075f357012a2/tile-high-density-min-size.jpg',
+		dropNested: true,
+		items: []
+	}]
+}, {
+	key: '2',
+	primaryText: 'Engineering Materials for Energy Systems',
+	supportingText: 'Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.',
+	imgSrc: 'https://s.brightspace.com/course-images/images/c87d778f-e5f1-442b-8ac7-5d1a3d7ca725/tile-high-density-max-size.jpg',
+	items: [{
+		key: '2-1',
+		primaryText: 'Contaminant Transport',
+		supportingText: 'No Nesting Allowed',
+		imgSrc: 'https://s.brightspace.com/course-images/images/824fffa1-86a6-4489-84ba-91edfbc1dcc4/tile-high-density-min-size.jpg',
+		dropNested: false,
+		items: []
+	}, {
+		key: '2-2',
+		primaryText: 'Modelling Flow in Fractured Media',
+		supportingText: 'No Nesting Allowed',
+		imgSrc: 'https://s.brightspace.com/course-images/images/e18c92a4-b996-444f-84b5-988874feccac/tile-high-density-min-size.jpg',
+		dropNested: false,
+		items: []
+	}]
+}, {
+	key: '3',
+	primaryText: 'Geomorphology and GIS',
+	supportingText: 'Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow\'s nest rutters.',
+	imgSrc: 'https://s.brightspace.com/course-images/images/2f035317-5014-4095-82c8-e29f34c7f99e/tile-high-density-max-size.jpg',
+	items: [{
+		key: '3-1',
+		primaryText: 'Carbon & Nitrogen Cycling',
+		supportingText: 'Nesting Allowed',
+		imgSrc: 'https://s.brightspace.com/course-images/images/623b420b-a305-4762-8af8-598f0e72e956/tile-high-density-min-size.jpg',
+		dropNested: true,
+		items: []
+	}, {
+		key: '3-2',
+		primaryText: 'Wetland Engineering',
+		supportingText: 'Nesting Allowed',
+		imgSrc: 'https://s.brightspace.com/course-images/images/26102577-8f2a-4e24-84b5-19d76decbc7a/tile-high-density-min-size.jpg',
+		dropNested: true,
+		items: []
+	}]
+}, {
+	key: '4',
+	primaryText: 'Pedagogy Case Studies',
+	supportingText: 'Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to. Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors.',
+	imgSrc: 'https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg',
+	items: []
+}, {
+	key: '5',
+	primaryText: 'Introduction to Painting',
+	supportingText: 'Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits. Bring a spring upon her cable holystone blow the man down spanker.',
+	imgSrc: 'https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg',
+	items: []
+}, {
+	key: '6',
+	primaryText: 'Analytical Chemistry',
+	supportingText: 'Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.',
+	imgSrc: 'https://s.brightspace.com/course-images/images/85f865dd-4c73-49c5-8809-c872256f7715/tile-high-density-max-size.jpg',
+	items: []
+}, {
+	key: '7',
+	primaryText: 'Plant Biology',
+	supportingText: 'Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker.',
+	imgSrc: 'https://s.brightspace.com/course-images/images/61f07ae4-4686-4019-8146-1604cb8ae9bf/tile-high-density-max-size.jpg',
+	items: []
+}];
+
+class DemoList extends LitElement {
+
+	static get properties() {
+		return {
+			grid: { type: Boolean },
+			_lastItemLoadedIndex: { state: true }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				display: block;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			img {
+				height: 500px;
+				object-fit: cover;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this.items = JSON.parse(JSON.stringify(items));
+		this._lastItemLoadedIndex = 2;
+		this._pageSize = 2;
+	}
+
+	render() {
+		const loadedItems = this.items.slice(0, this._lastItemLoadedIndex + 1);
+		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-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-list-header>
+				${repeat(loadedItems, item => item.key, item => {
+					const tooltipButtonId = getUniqueId();
+					return html`
+						<d2l-list-item href="http://www.d2l.com" key="${item.key}" label="${item.primaryText}" selectable>
+							<img slot="illustration" src="${item.imgSrc}">
+							<d2l-list-item-content>
+								<div>${item.primaryText}</div>
+								<div slot="supporting-info">${item.supportingText}</div>
+							</d2l-list-item-content>
+							<div slot="actions">
+								<d2l-button-icon id="${tooltipButtonId}" text="My Button" icon="tier1:preview"></d2l-button-icon>
+								<d2l-tooltip for="${tooltipButtonId}">Preview</d2l-tooltip>
+								<d2l-dropdown-more text="Open!">
+									<d2l-dropdown-menu>
+										<d2l-menu label="Astronomy">
+											<d2l-menu-item text="Introduction"></d2l-menu-item>
+											<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
+										</d2l-menu>
+									</d2l-dropdown-menu>
+								</d2l-dropdown-more>
+							</div>
+						</d2l-list-item>
+					`;
+				})}
+				<d2l-pager-load-more slot="pager"
+					@d2l-pager-load-more="${this._handlePagerLoadMore}"
+					?has-more="${this._lastItemLoadedIndex < this.items.length - 1}"
+					item-count="${this.items.length}"
+					page-size="${remainingItemCount < this._pageSize ? remainingItemCount : this._pageSize}">
+				</d2l-pager-load-more>
+			</d2l-list>
+		`;
+	}
+
+	_handleAddItem() {
+		const newKey = getUniqueId();
+		this.items.push({
+			key: newKey,
+			primaryText: `New Item ${newKey}`,
+			supportingText: 'Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.',
+			imgSrc: 'https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg',
+			items: []
+		});
+		this.requestUpdate();
+	}
+
+	_handlePagerLoadMore(e) {
+		// mock delay consumers might have
+		setTimeout(() => {
+			this._lastItemLoadedIndex += this._pageSize;
+			e.detail.complete();
+		}, 2000);
+
+	}
+
+}
+customElements.define('d2l-demo-list', DemoList);

package/components/list/demo/list.html

@@ -7,21 +7,17 @@
 		<script type="module">
 			import '../../button/button-icon.js';
 			import '../../demo/demo-page.js';
-			import '../../dropdown/dropdown-button-subtle.js';
 			import '../../dropdown/dropdown-menu.js';
 			import '../../dropdown/dropdown-more.js';
 			import '../../menu/menu.js';
 			import '../../menu/menu-item.js';
-			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-item-content.js';
 			import '../list-item.js';
 			import '../list.js';
 			import '../../tag-list/tag-list.js';
 			import '../../tag-list/tag-list-item.js';
+			import './demo-list.js';
 		</script>
 		<style>
 			img {
@@ -71,108 +67,7 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-list id="allFeatures" item-count="50">
-						<d2l-list-header slot="header" select-all-pages-allowed>
-							<d2l-selection-action icon="tier1:plus-default" text="Add"></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-item>
-										</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-list-header>
-						<d2l-list-item href="http://www.d2l.com" 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>
-							<d2l-list-item-content>
-								<div>Introductory Earth Sciences</div>
-								<div slot="supporting-info">This course explores the geological process of the Earth's interior and surface. These include volcanism, earthquakes, mountains...</div>
-							</d2l-list-item-content>
-							<div slot="actions">
-								<d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
-								<d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
-								<d2l-dropdown-more text="Open!">
-									<d2l-dropdown-menu>
-										<d2l-menu label="Astronomy">
-											<d2l-menu-item text="Introduction"></d2l-menu-item>
-											<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
-										</d2l-menu>
-									</d2l-dropdown-menu>
-								</d2l-dropdown-more>
-							</div>
-						</d2l-list-item>
-						<d2l-list-item href="http://www.d2l.com" selectable key="2" selected label="Engineering Materials for Energy Systems">
-							<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
-							<d2l-list-item-content>
-								<div>Engineering Materials for Energy Systems</div>
-								<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
-							</d2l-list-item-content>
-							<div slot="actions">
-								<d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
-								<d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
-								<d2l-dropdown-more text="Open!">
-									<d2l-dropdown-menu>
-										<d2l-menu label="Astronomy">
-											<d2l-menu-item text="Introduction"></d2l-menu-item>
-											<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
-										</d2l-menu>
-									</d2l-dropdown-menu>
-								</d2l-dropdown-more>
-							</div>
-						</d2l-list-item>
-						<d2l-list-item href="http://www.d2l.com" selectable key="3" label="Geomorphology and GIS">
-							<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
-							<d2l-list-item-content>
-								<div>Geomorphology and GIS</div>
-								<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
-							</d2l-list-item-content>
-							<div slot="actions">
-								<d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
-								<d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
-								<d2l-dropdown-more text="Open!">
-									<d2l-dropdown-menu>
-										<d2l-menu label="Astronomy">
-											<d2l-menu-item text="Introduction"></d2l-menu-item>
-											<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
-										</d2l-menu>
-									</d2l-dropdown-menu>
-								</d2l-dropdown-more>
-							</div>
-						</d2l-list-item>
-					</d2l-list>
-					<script>
-						let newItemCount = 0;
-						document.querySelector('d2l-selection-action[text="Add"]').addEventListener('d2l-selection-action-click', () => {
-							const item = document.createElement('d2l-list-item');
-							item.selectable = true;
-							item.key = `${++newItemCount}`;
-							item.label = 'New Item';
-							item.innerHTML = `
-								<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
-								<d2l-list-item-content>
-									<div>New Item ${newItemCount}</div>
-									<div slot="supporting-info">Supporting Info</div>
-								</d2l-list-item-content>
-							`;
-							document.querySelector('#allFeatures').appendChild(item);
-						});
-					</script>
+					<d2l-demo-list></d2l-demo-list>
 				</template>
 			</d2l-demo-snippet>
 
@@ -180,65 +75,7 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-list grid>
-						<d2l-list-item href="http://www.d2l.com" 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>
-							<d2l-list-item-content>
-								<div>Introductory Earth Sciences</div>
-								<div slot="supporting-info">This course explores the geological process of the Earth's interior and surface. These include volcanism, earthquakes, mountains...</div>
-							</d2l-list-item-content>
-							<div slot="actions">
-								<d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
-								<d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
-								<d2l-dropdown-more text="Open!">
-									<d2l-dropdown-menu>
-										<d2l-menu label="Astronomy">
-											<d2l-menu-item text="Introduction"></d2l-menu-item>
-											<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
-										</d2l-menu>
-									</d2l-dropdown-menu>
-								</d2l-dropdown-more>
-							</div>
-						</d2l-list-item>
-						<d2l-list-item href="http://www.d2l.com" selectable key="2" selected label="Engineering Materials for Energy Systems">
-							<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
-							<d2l-list-item-content>
-								<div>Engineering Materials for Energy Systems</div>
-								<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
-							</d2l-list-item-content>
-							<div slot="actions">
-								<d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
-								<d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
-								<d2l-dropdown-more text="Open!">
-									<d2l-dropdown-menu>
-										<d2l-menu label="Astronomy">
-											<d2l-menu-item text="Introduction"></d2l-menu-item>
-											<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
-										</d2l-menu>
-									</d2l-dropdown-menu>
-								</d2l-dropdown-more>
-							</div>
-						</d2l-list-item>
-						<d2l-list-item href="http://www.d2l.com" selectable key="3" label="Geomorphology and GIS">
-							<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
-							<d2l-list-item-content>
-								<div>Geomorphology and GIS</div>
-								<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
-							</d2l-list-item-content>
-							<div slot="actions">
-								<d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
-								<d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
-								<d2l-dropdown-more text="Open!">
-									<d2l-dropdown-menu>
-										<d2l-menu label="Astronomy">
-											<d2l-menu-item text="Introduction"></d2l-menu-item>
-											<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
-										</d2l-menu>
-									</d2l-dropdown-menu>
-								</d2l-dropdown-more>
-							</div>
-						</d2l-list-item>
-					</d2l-list>
+					<d2l-demo-list grid></d2l-demo-list>
 				</template>
 			</d2l-demo-snippet>
 
@@ -247,7 +84,7 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-list grid>
-						<d2l-list-item no-primary-action selectable key="1" label="Introductory Earth Sciences">
+						<d2l-list-item 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>

package/components/list/list-item-generic-layout.js

@@ -530,6 +530,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 		if (!this.gridActive) return;
 		const slot = (e.path || e.composedPath()).find(node =>
 			node.nodeName === 'SLOT' && node.classList.contains('d2l-cell'));
+		if (!slot) return;
 		this._cellNum = parseInt(slot.getAttribute('data-cell-num'));
 		this._cellFocusedItem = this._getFocusedItemPosition(e.target);
 	}

package/components/list/list.js

@@ -1,6 +1,7 @@
 import { css, html, LitElement } from 'lit';
 import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { SelectionInfo, SelectionMixin } from '../selection/selection-mixin.js';
+import { PageableMixin } from '../paging/pageable-mixin.js';
 
 const keyCodes = {
 	TAB: 9
@@ -12,9 +13,10 @@ 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 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).
  */
-class List extends SelectionMixin(LitElement) {
+class List extends PageableMixin(SelectionMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -50,6 +52,9 @@ class List extends SelectionMixin(LitElement) {
 			:host([hidden]) {
 				display: none;
 			}
+			slot[name="pager"]::slotted(*) {
+				margin-top: 12px;
+			}
 		`;
 	}
 
@@ -58,9 +63,16 @@ class List extends SelectionMixin(LitElement) {
 		this.dragMultiple = false;
 		this.extendSeparators = false;
 		this.grid = false;
+		this._itemsShowingCount = 0;
+		this._itemsShowingTotalCount = 0;
 		this._listItemChanges = [];
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener('d2l-list-items-showing-count-change', this._handleListItemsShowingCountChange);
+	}
+
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._intersectionObserver) this._intersectionObserver.disconnect();
@@ -115,14 +127,15 @@ class List extends SelectionMixin(LitElement) {
 			<div class="d2l-list-top-sentinel"></div>
 			<div role="${role}" class="d2l-list-container">
 				<slot name="header"></slot>
-				<slot @keydown="${this._handleKeyDown}"></slot>
+				<slot @keydown="${this._handleKeyDown}" @slotchange="${this._handleSlotChange}"></slot>
+				${this._renderPagerContainer()}
 			</div>
 		`;
 	}
 
-	getItems() {
+	getItems(slot) {
 		if (!this.shadowRoot) return;
-		const slot = this.shadowRoot.querySelector('slot:not([name])');
+		if (!slot) slot = this.shadowRoot.querySelector('slot:not([name])');
 		if (!slot) return [];
 		return slot.assignedNodes({ flatten: true }).filter((node) => {
 			return node.nodeType === Node.ELEMENT_NODE && (node.role === 'rowgroup' || node.role === 'listitem');
@@ -175,6 +188,35 @@ class List extends SelectionMixin(LitElement) {
 		return new SelectionInfo(keys, selectionInfo.state);
 	}
 
+	_getItemByIndex(index) {
+		const items = this.getItems();
+		if (index > items.length - 1) return;
+		return items[index];
+	}
+
+	async _getItemsShowingCount() {
+		if (this.slot === 'nested') return this._itemsShowingCount;
+		else return this._getListItemsShowingTotalCount(false);
+	}
+
+	_getLastItemIndex() {
+		return this._itemsShowingCount - 1;
+	}
+
+	async _getListItemsShowingTotalCount(refresh) {
+		if (refresh) {
+			this._itemsShowingTotalCount = await this.getItems().reduce(async(count, item) => {
+				await item.updateComplete;
+				if (item._selectionProvider) {
+					return (await count + await item._selectionProvider._getListItemsShowingTotalCount(true));
+				} else {
+					return await count;
+				}
+			}, this._itemsShowingCount);
+		}
+		return this._itemsShowingTotalCount;
+	}
+
 	_handleKeyDown(e) {
 		if (!this.grid || this.slot === 'nested' || e.keyCode !== keyCodes.TAB) return;
 		e.preventDefault();
@@ -184,6 +226,36 @@ class List extends SelectionMixin(LitElement) {
 		if (focusable) focusable.focus();
 	}
 
+	_handleListItemsShowingCountChange() {
+		if (this.slot === 'nested') return;
+
+		// debounce the updates for first render case
+		if (this._updateItemsShowingTotalCountRequested) return;
+
+		this._updateItemsShowingTotalCountRequested = true;
+		setTimeout(async() => {
+			const oldCount = this._itemsShowingTotalCount;
+			const newCount = await this._getListItemsShowingTotalCount(true);
+			if (oldCount !== newCount) this._updatePagerCount(newCount);
+			this._updateItemsShowingTotalCountRequested = false;
+		}, 0);
+	}
+
+	async _handleSlotChange(e) {
+		const items = this.getItems(e.target);
+		if (this._itemsShowingCount === items.length) return;
+		this._itemsShowingCount = items.length;
+
+		this._updatePagerCount(await this._getListItemsShowingTotalCount(true));
+
+		/** @ignore */
+		this.dispatchEvent(new CustomEvent('d2l-list-items-showing-count-change', {
+			bubbles: true,
+			composed: true,
+			detail: { count: this._itemsShowingCount }
+		}));
+	}
+
 }
 
 customElements.define('d2l-list', List);