@brightspace-ui/core 2.33.0 → 2.34.0

package/components/list/README.md

@@ -158,6 +158,12 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
 
 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.
 
+## 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.
+
+
+
 ### Accessibility Properties
 
 If a `d2l-list-item` is selectable then it should have a `label` attribute that corresponds to the hidden label for the checkbox.
@@ -516,7 +522,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);

package/components/paging/README.md

@@ -0,0 +1,55 @@
+# Paging
+
+The paging components and mixins can be used to provide consistent paging functionality.
+
+<!-- docs: demo -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/paging/pager-load-more.js';
+</script>
+<d2l-pager-load-more has-more page-size="3" item-count="15"></d2l-pager-load-more>
+```
+
+## Best Practices
+<!-- docs: start best practices -->
+<!-- docs: start dos -->
+* Consider the performance impact of acquiring the optional total `item-count`. The `item-count` provides useful context for the user, but counting large numbers of rows can be detrimental to performance. As a very general guide, when the total number of rows that needs to be counted is < 50,000, it's not a performance concern.
+<!-- docs: end dos -->
+
+## Load More Paging [d2l-pager-load-more]
+
+The `d2l-pager-load-more` component can be used in conjunction with pageable components such as `d2l-list` to provide load-more paging functionality. The pager will dispatch the `d2l-pager-load-more` when clicked, and then the consumer handles the 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 [Pageable Lists](../../components/list/#pageable-lists).
+
+```html
+<d2l-list>
+  <d2l-list-item ...></d2l-list-item>
+  <d2l-list-item ...></d2l-list-item>
+  <d2l-pager-load-more slot="pager" has-more page-size="10" item-count="85"></d2l-pager-load-more>
+</d2l-list>
+```
+
+```javascript
+pager.addEventListener('d2l-pager-load-more', e => {
+  // load more items
+ ...
+
+  e.detail.complete();
+});
+```
+
+<!-- docs: start hidden content -->
+### Properties
+| Property | Type | Description |
+|---|---|---|
+| `has-more` | Boolean, default: `false` | Whether there are more items that can be loaded. |
+| `item-count` | Number | Total number of items. If not specified, neither it nor the count of items showing will be displayed. |
+| `page-size` | Number, default: 50 | The number of additional items to load. |
+
+### Events
+
+| Event | Description |
+|---|---|
+| `d2l-pager-load-more` | Dispatched when the user clicks the Load More button. The `pageSize` can be accessed from the event `target`. The consumer must call the `complete()` method on the event detail to signal completion after the new items have been loaded. |
+<!-- docs: end hidden content -->

package/components/paging/demo/pager-load-more.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+			import '../test/pageable-component.js';
+			import '../pager-load-more.js';
+		</script>
+		<style>
+			a {
+				outline: none;
+				text-decoration: none;
+			}
+			a:focus {
+				text-decoration: underline;
+			}
+		</style>
+	</head>
+	<body unresolved>
+
+		<d2l-demo-page page-title="Paging Components">
+
+			<h2>Load More Pager</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-test-pageable>
+						<ul>
+							<li><a href="https://some-website">item 1</a></li>
+							<li><a href="https://some-website">item 2</a></li>
+						</ul>
+						<d2l-pager-load-more id="pager1" slot="pager" has-more page-size="3" item-count="12"></d2l-pager-load-more>
+					</d2l-test-pageable>
+					<script>
+						document.querySelector('#pager1').addEventListener('d2l-pager-load-more', window.handleLoadMore);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Load More Pager (no item count)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-test-pageable>
+						<ul>
+							<li><a href="https://some-website">item 1</a></li>
+							<li><a href="https://some-website">item 2</a></li>
+						</ul>
+						<d2l-pager-load-more id="pager2" slot="pager" has-more page-size="3"></d2l-pager-load-more>
+					</d2l-test-pageable>
+					<script>
+						document.querySelector('#pager2').addEventListener('d2l-pager-load-more', window.handleLoadMore);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
+		</d2l-demo-page>
+
+		<script>
+			const ITEM_COUNT = 12;
+			window.handleLoadMore = e => {
+				// fake delay
+				setTimeout(() => {
+					const list = e.target.parentNode.querySelector('ul');
+					let remainingCount = ITEM_COUNT - list.children.length;
+					const numberToLoad = remainingCount < e.target.pageSize ? remainingCount : e.target.pageSize;
+					for (let i = 0; i < numberToLoad; i++) {
+						const newItem = list.lastElementChild.cloneNode(true);
+						newItem.querySelector('a').textContent = `item ${list.children.length + 1}`;
+						list.appendChild(newItem);
+					}
+					if (list.children.length === ITEM_COUNT) {
+						e.target.hasMore = false;
+					} else {
+						remainingCount = ITEM_COUNT - list.children.length;
+						if (remainingCount < e.target.pageSize) e.target.pageSize = remainingCount;
+					}
+					e.detail.complete();
+				}, 1000);
+			};
+		</script>
+	</body>
+</html>

package/components/paging/pageable-mixin.js

@@ -0,0 +1,35 @@
+import { html } from 'lit';
+
+export const PageableMixin = superclass => class extends superclass {
+
+	constructor() {
+		super();
+		this._pageable = true;
+	}
+
+	/* must be implemented by consumer */
+	_getItemByIndex(index) { } // eslint-disable-line no-unused-vars
+
+	/* must be implemented by consumer */
+	async _getItemsShowingCount() { }
+
+	/* must be implemented by consumer */
+	_getLastItemIndex() { }
+
+	async _handlePagerSlotChange(e) {
+		this._updatePagerCount(await this._getItemsShowingCount(), e.target);
+	}
+
+	_renderPagerContainer() {
+		return html`<slot name="pager" @slotchange="${this._handlePagerSlotChange}"></slot>`;
+	}
+
+	_updatePagerCount(count, slot) {
+		if (!slot) slot = this.shadowRoot.querySelector('slot[name="pager"]');
+		const elements = slot.assignedElements({ flatten: true });
+		if (elements.length > 0) {
+			elements[0].itemShowingCount = count;
+		}
+	}
+
+};

package/components/paging/pager-load-more.js

@@ -0,0 +1,146 @@
+import '../colors/colors.js';
+import '../loading-spinner/loading-spinner.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { buttonStyles } from '../button/button-styles.js';
+import { findComposedAncestor } from '../../helpers/dom.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
+import { getFirstFocusableDescendant } from '../../helpers/focus.js';
+import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
+import { labelStyles } from '../typography/styles.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { offscreenStyles } from '../offscreen/offscreen.js';
+
+const nativeFocus = document.createElement('div').focus;
+
+/**
+ *  A pager component for load-more paging.
+ * @fires d2l-pager-load-more - Dispatched when the user clicks the load-more button. Consumers must call the provided "complete" method once items have been loaded.
+ */
+class LoadMore extends FocusMixin(FocusVisiblePolyfillMixin(LocalizeCoreElement(LitElement))) {
+
+	static get properties() {
+		return {
+			/**
+			 * Whether there are more items that can be loaded.
+			 * @type {boolean}
+			 */
+			hasMore: { type: Boolean, attribute: 'has-more', reflect: true },
+			/**
+			 * Total number of items. If not specified, neither it nor the count of items showing will be displayed.
+			 * @type {number}
+			 */
+			itemCount: { type: Number, attribute: 'item-count', reflect: true },
+			/**
+			 * The number of additional items to load.
+			 * @type {number}
+			 */
+			pageSize: { type: Number, attribute: 'page-size', reflect: true },
+			/**
+			 * The number of items showing. Assigned by PageableMixin.
+			 * @ignore
+			 */
+			itemShowingCount: { attribute: false, type: Number },
+			_loading: { state: true }
+		};
+	}
+
+	static get styles() {
+		return [ buttonStyles, labelStyles, offscreenStyles, css`
+			:host {
+				display: block;
+			}
+			:host(:not([has-more])),
+			:host([hidden]) {
+				display: none;
+			}
+			button {
+				align-items: center;
+				background-color: var(--d2l-color-regolith);
+				border: 1px solid var(--d2l-color-sylvite);
+				display: flex;
+				gap: 0.5rem;
+				justify-content: center;
+				width: 100%;
+			}
+			button:hover {
+				background-color: var(--d2l-color-sylvite);
+				border-color: var(--d2l-color-gypsum);
+			}
+			.action {
+				color: var(--d2l-color-celestine);
+			}
+			.separator {
+				border-right: 1px solid var(--d2l-color-mica);
+				height: 0.8rem;
+			}
+			.info {
+				color: var(--d2l-color-galena);
+				font-weight: 400;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.hasMore = false;
+		this.itemCount = -1;
+		/** @ignore */
+		this.itemShowingCount = 0;
+		this.pageSize = 50;
+		this._loading = false;
+	}
+
+	static get focusElementSelector() {
+		return 'button';
+	}
+
+	render() {
+		if (!this.hasMore) return;
+		return html`<button ?disabled="${this._loading}" class="d2l-label-text" @click="${this._handleClick}" type="button">
+			${this._loading ? html`
+				<span class="d2l-offscreen" role="alert">${this.localize('components.pager-load-more.status-loading')}</span>
+				<d2l-loading-spinner size="24"></d2l-loading-spinner>
+			` : html`
+				<span class="action">${this.localize('components.pager-load-more.action', { count: this.pageSize })}</span>
+				${this.itemCount > -1 ? html`
+					<span class="d2l-offscreen">${getSeparator({ nonBreaking: true })}</span>
+					<span class="separator"></span>
+					<span class="info">${this.localize('components.pager-load-more.info', { showingCount: this.itemShowingCount, totalCount: this.itemCount })}</span>
+				` : nothing}
+			`}
+		</button>
+		`;
+	}
+
+	async _handleClick() {
+		const pageable = findComposedAncestor(this, node => node._pageable);
+		if (!pageable) return;
+		const lastItemIndex = pageable._getLastItemIndex();
+
+		await new Promise(resolve => {
+			this._loading = true;
+			this.dispatchEvent(new CustomEvent('d2l-pager-load-more', {
+				bubbles: false,
+				composed: false,
+				detail: { complete: resolve }
+			}));
+		});
+		this._loading = false;
+
+		const item = pageable._getItemByIndex(lastItemIndex + 1);
+
+		if (!item) return;
+		if (item.updateComplete) await item.updateComplete;
+
+		if (item.focus !== nativeFocus) {
+			requestAnimationFrame(() => item.focus());
+		} else {
+			const firstFocusable = getFirstFocusableDescendant(item);
+			if (firstFocusable) firstFocusable.focus();
+		}
+	}
+
+}
+
+customElements.define('d2l-pager-load-more', LoadMore);

package/custom-elements.json

@@ -6533,6 +6533,26 @@
         }
       ]
     },
+    {
+      "name": "d2l-demo-list",
+      "path": "./components/list/demo/demo-list.js",
+      "attributes": [
+        {
+          "name": "grid",
+          "type": "boolean"
+        }
+      ],
+      "properties": [
+        {
+          "name": "grid",
+          "attribute": "grid",
+          "type": "boolean"
+        },
+        {
+          "name": "items"
+        }
+      ]
+    },
     {
       "name": "d2l-demo-list-drag-and-drop-position",
       "path": "./components/list/demo/list-drag-and-drop-position.js",
@@ -7633,6 +7653,10 @@
         {
           "name": "header",
           "description": "Slot for `d2l-list-header` to be rendered above the list"
+        },
+        {
+          "name": "pager",
+          "description": "Slot for `d2l-pager-load-more` to be rendered below the list"
         }
       ]
     },
@@ -8637,6 +8661,64 @@
         }
       ]
     },
+    {
+      "name": "d2l-pager-load-more",
+      "path": "./components/paging/pager-load-more.js",
+      "description": "A pager component for load-more paging.",
+      "attributes": [
+        {
+          "name": "has-more",
+          "description": "Whether there are more items that can be loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "item-count",
+          "description": "Total number of items. If not specified, neither it nor the count of items showing will be displayed.",
+          "type": "number",
+          "default": "-1"
+        },
+        {
+          "name": "page-size",
+          "description": "The number of additional items to load.",
+          "type": "number",
+          "default": "50"
+        }
+      ],
+      "properties": [
+        {
+          "name": "hasMore",
+          "attribute": "has-more",
+          "description": "Whether there are more items that can be loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. If not specified, neither it nor the count of items showing will be displayed.",
+          "type": "number",
+          "default": "-1"
+        },
+        {
+          "name": "pageSize",
+          "attribute": "page-size",
+          "description": "The number of additional items to load.",
+          "type": "number",
+          "default": "50"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-pager-load-more",
+          "description": "Dispatched when the user clicks the load-more button. Consumers must call the provided \"complete\" method once items have been loaded."
+        }
+      ]
+    },
+    {
+      "name": "d2l-test-pageable",
+      "path": "./components/paging/test/pageable-component.js"
+    },
     {
       "name": "d2l-test-scroll-wrapper",
       "path": "./components/scroll-wrapper/demo/scroll-wrapper-test.js",

package/lang/ar.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "أقل",
 	"components.more-less.more": "المزيد",
 	"components.overflow-group.moreActions": "مزيد من الإجراءات",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "حدد مادة لتنفيذ هذا الإجراء.",
 	"components.selection.select-all": "تحديد الكل",
 	"components.selection.select-all-items": "تحديد كل المواد الـ {count}.",

package/lang/cy.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "llai",
 	"components.more-less.more": "mwy",
 	"components.overflow-group.moreActions": "Rhagor o Gamau Gweithredu",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Dewiswch eitem i gyflawni'r weithred hon.",
 	"components.selection.select-all": "Dewis y Cyfan",
 	"components.selection.select-all-items": "Dewis Pob {count} Eitem",

package/lang/da.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "færre",
 	"components.more-less.more": "flere",
 	"components.overflow-group.moreActions": "Flere handlinger",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Vælg et element for at udføre denne handling.",
 	"components.selection.select-all": "Vælg alle",
 	"components.selection.select-all-items": "Vælg alle {count} elementer",

package/lang/de.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "Weniger",
 	"components.more-less.more": "mehr",
 	"components.overflow-group.moreActions": "Weitere Aktionen",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Wählen Sie ein Element aus, um diese Aktion auszuführen.",
 	"components.selection.select-all": "Alle auswählen",
 	"components.selection.select-all-items": "Alle {count} Elemente auswählen",

package/lang/en.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "less",
 	"components.more-less.more": "more",
 	"components.overflow-group.moreActions": "More Actions",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Select an item to perform this action.",
 	"components.selection.select-all": "Select All",
 	"components.selection.select-all-items": "Select All {count} Items",

package/lang/es-es.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "menos",
 	"components.more-less.more": "más",
 	"components.overflow-group.moreActions": "Más acciones",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Seleccione un elemento para realizar esta acción.",
 	"components.selection.select-all": "Seleccionar todo",
 	"components.selection.select-all-items": "Seleccione los {count} elementos",

package/lang/es.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "menos",
 	"components.more-less.more": "más",
 	"components.overflow-group.moreActions": "Más acciones",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Seleccione un elemento para realizar esta acción.",
 	"components.selection.select-all": "Seleccionar todo",
 	"components.selection.select-all-items": "Seleccione todos los {count} elementos",

package/lang/fr-fr.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "moins",
 	"components.more-less.more": "plus",
 	"components.overflow-group.moreActions": "Plus d'actions",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Sélectionnez un élément pour exécuter cette action.",
 	"components.selection.select-all": "Tout sélectionner",
 	"components.selection.select-all-items": "Sélectionner tous les {count} éléments",

package/lang/fr.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "moins",
 	"components.more-less.more": "plus",
 	"components.overflow-group.moreActions": "Plus d'actions",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Sélectionner un élément pour exécuter cette action.",
 	"components.selection.select-all": "Tout sélectionner",
 	"components.selection.select-all-items": "Sélectionner tous les {count} éléments",

package/lang/hi.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "कम",
 	"components.more-less.more": "अधिक",
 	"components.overflow-group.moreActions": "अधिक क्रियाएँ",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "यह कार्रवाई निष्पादित करने के लिए कोई आइटम का चयन करें।",
 	"components.selection.select-all": "सभी का चयन करें",
 	"components.selection.select-all-items": "सभी {count} आइटम चुनें।",

package/lang/ja.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "減らす",
 	"components.more-less.more": "増やす",
 	"components.overflow-group.moreActions": "その他のアクション",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "このアクションを実行するための項目を選択します。",
 	"components.selection.select-all": "すべて選択",
 	"components.selection.select-all-items": "{count} 個の項目をすべて選択",

package/lang/ko.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "축소",
 	"components.more-less.more": "더 보기",
 	"components.overflow-group.moreActions": "추가 작업",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "이 작업을 수행할 항목을 선택하십시오.",
 	"components.selection.select-all": "모두 선택",
 	"components.selection.select-all-items": "{count}개 항목을 모두 선택하십시오.",

package/lang/nl.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "minder",
 	"components.more-less.more": "meer",
 	"components.overflow-group.moreActions": "Meer acties",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Selecteer een item om deze actie uit te voeren.",
 	"components.selection.select-all": "Alles selecteren",
 	"components.selection.select-all-items": "Alle {count} records selecteren",

package/lang/pt.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "menos",
 	"components.more-less.more": "mais",
 	"components.overflow-group.moreActions": "Mais ações",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Selecione um item para realizar esta ação.",
 	"components.selection.select-all": "Selecionar tudo",
 	"components.selection.select-all-items": "Selecione todos os {count} itens",

package/lang/sv.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "mindre",
 	"components.more-less.more": "mer",
 	"components.overflow-group.moreActions": "Fler åtgärder",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Välj ett objekt för att utföra åtgärden.",
 	"components.selection.select-all": "Välj alla",
 	"components.selection.select-all-items": "Välj alla {count} objekt",

package/lang/tr.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "daha az",
 	"components.more-less.more": "daha fazla",
 	"components.overflow-group.moreActions": "Daha Fazla Eylem",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Bu eylemi gerçekleştirebilmek için bir öğe seçin.",
 	"components.selection.select-all": "Tümünü Seç",
 	"components.selection.select-all-items": "{count} Öğenin Tamamını Seç",

package/lang/zh-cn.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "更少",
 	"components.more-less.more": "更多",
 	"components.overflow-group.moreActions": "更多操作",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "选择一个项目后才能执行此操作。",
 	"components.selection.select-all": "全选",
 	"components.selection.select-all-items": "选择全部 {count} 个项目",

package/lang/zh-tw.js

@@ -91,6 +91,9 @@ export default {
 	"components.more-less.less": "較少",
 	"components.more-less.more": "較多",
 	"components.overflow-group.moreActions": "其他動作",
+	"components.pager-load-more.action": "Load {count} More",
+	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "選取項目以執行此動作。",
 	"components.selection.select-all": "全選",
 	"components.selection.select-all-items": "選取所有 {count} 個項目",

package/package.json

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