@brightspace-ui/core 2.109.0 → 2.110.1

package/components/list/list.js

@@ -183,8 +183,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 	}
 
 	_getItemByIndex(index) {
-		const items = this.getItems();
-		if (index > items.length - 1) return;
+		const items = this.getItems() || [];
 		return items[index];
 	}
 

package/components/paging/pageable-mixin.js

@@ -16,6 +16,7 @@ export const PageableMixin = superclass => class extends CollectionMixin(supercl
 		this._itemShowingCount = 0;
 		this._pageableSubscriberRegistry = new SubscriberRegistryController(this, 'pageable', {
 			onSubscribe: this._updatePageableSubscriber.bind(this),
+			onUnsubscribe: this._clearPageableSubscriber.bind(this),
 			updateSubscribers: this._updatePageableSubscribers.bind(this)
 		});
 	}
@@ -33,6 +34,10 @@ export const PageableMixin = superclass => class extends CollectionMixin(supercl
 		}
 	}
 
+	_clearPageableSubscriber(subscriber) {
+		subscriber._pageableInfo = null;
+	}
+
 	/* must be implemented by consumer */
 	_getItemByIndex(index) { } // eslint-disable-line no-unused-vars
 

package/components/paging/pageable-subscriber-mixin.js

@@ -16,7 +16,7 @@ export const PageableSubscriberMixin = superclass => class extends superclass {
 	constructor() {
 		super();
 
-		this._pageableInfo = { itemCount: null, itemShowingCount: 0 };
+		this._pageableInfo = null;
 		this._pageableEventSubscriber = new EventSubscriberController(this, 'pageable');
 		this._pageableIdSubscriber = new IdSubscriberController(this, 'pageable', { idPropertyName: 'pageableFor' });
 	}

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

@@ -86,7 +86,7 @@ class LoadMore extends PageableSubscriberMixin(FocusMixin(LocalizeCoreElement(Li
 	}
 
 	render() {
-		if (!this.hasMore) return nothing;
+		if (!this.hasMore || !this._pageableInfo) return nothing;
 		const { itemCount, itemShowingCount } = this._pageableInfo;
 
 		return html`
@@ -101,7 +101,7 @@ class LoadMore extends PageableSubscriberMixin(FocusMixin(LocalizeCoreElement(Li
 				${itemCount !== null ? html`
 					<span class="d2l-offscreen">${getSeparator({ nonBreaking: true })}</span>
 					<span class="separator"></span>
-					<span class="info">${this.localize('components.pager-load-more.info', { showingCount: formatNumber(itemShowingCount), totalCount: itemCount, totalCountFormatted: formatNumber(itemCount) })}</span>
+					<span class="info">${this.localize('components.pageable.info-with-total', { countFormatted: formatNumber(itemShowingCount), totalCount: itemCount, totalCountFormatted: formatNumber(itemCount) })}</span>
 				` : nothing}
 			`}
 		</button>

package/components/selection/demo/demo-selection.js

@@ -1,7 +1,8 @@
 import { css, html, LitElement } from 'lit';
+import { PageableMixin } from '../../paging/pageable-mixin.js';
 import { SelectionMixin } from '../selection-mixin.js';
 
-class DemoSelection extends SelectionMixin(LitElement) {
+class DemoBase extends LitElement {
 	static get styles() {
 		return css`
 			:host {
@@ -15,4 +16,20 @@ class DemoSelection extends SelectionMixin(LitElement) {
 		`;
 	}
 }
+
+class DemoSelection extends SelectionMixin(DemoBase) {}
+
+class DemoPageable extends PageableMixin(DemoBase) {
+	_getItemByIndex() {
+		return null;
+	}
+	_getItemShowingCount() {
+		return 3;
+	}
+}
+
+class DemoSelectionPageable extends SelectionMixin(DemoPageable) {}
+
 customElements.define('d2l-demo-selection', DemoSelection);
+customElements.define('d2l-demo-pageable', DemoPageable);
+customElements.define('d2l-demo-selection-pageable', DemoSelectionPageable);

package/components/selection/demo/selection.html

@@ -8,6 +8,7 @@
 			import '../../demo/demo-page.js';
 			import '../../dropdown/dropdown-menu.js';
 			import '../../menu/menu.js';
+			import '../../paging/pager-load-more.js';
 			import '../selection-action.js';
 			import '../selection-action-dropdown.js';
 			import '../selection-action-menu-item.js';
@@ -93,6 +94,45 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Selection controls with pageable + selection</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-selection-pageable item-count="5">
+						<d2l-selection-controls select-all-pages-allowed>
+							<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-controls>
+
+						<ul>
+							<li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>Geography</li>
+							<li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
+							<li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
+						</ul>
+						<d2l-pager-load-more has-more page-size="1"></d2l-pager-load-more>
+					</d2l-demo-selection-pageable>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Selection controls with pageable (no selection)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-pageable item-count="5">
+						<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-controls>
+
+						<ul>
+							<li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>Geography</li>
+							<li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
+							<li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
+						</ul>
+						<d2l-pager-load-more has-more page-size="1"></d2l-pager-load-more>
+					</d2l-demo-pageable>
+				</template>
+			</d2l-demo-snippet>
 
 			<h2>No-sticky selection controls</h2>
 
@@ -120,17 +160,18 @@
 					<div class="d2l-selection-collections">
 						<div class="d2l-selection-collection">
 							Pick Your Toppings
-							<d2l-selection-controls selection-for="collection-1">
+							<d2l-selection-controls selection-for="collection-1" pageable-for="collection-1" select-all-pages-allowed>
 								<d2l-selection-action selection-for="collection-1" text="Add Note" icon="tier1:add-message"></d2l-selection-action>
 							</d2l-selection-controls>
 
-							<d2l-demo-selection id="collection-1">
+							<d2l-demo-selection-pageable id="collection-1" item-count="5">
 								<ul>
 									<li><d2l-selection-input key="let" label="Lettuce" selected></d2l-selection-input>Lettuce</li>
 									<li><d2l-selection-input key="tom" label="Tomato"></d2l-selection-input>Tomato</li>
 									<li><d2l-selection-input key="onion" label="Onion"></d2l-selection-input>Onion</li>
 								</ul>
-							</d2l-demo-selection>
+								<d2l-pager-load-more has-more page-size="1"></d2l-pager-load-more>
+							</d2l-demo-selection-pageable>
 							<d2l-selection-action selection-for="collection-1" text="Save" requires-selection></d2l-selection-action>
 						</div>
 

package/components/selection/selection-controls.js

@@ -4,8 +4,10 @@ import './selection-select-all-pages.js';
 import './selection-summary.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { PageableSubscriberMixin } from '../paging/pageable-subscriber-mixin.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SelectionObserverMixin } from './selection-observer-mixin.js';
 
@@ -13,7 +15,7 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
  * Controls for selection components (e.g. list, table-wrapper) containing select-all, etc.
  * @slot - Responsive container using `d2l-overflow-group` for `d2l-selection-action` elements
  */
-export class SelectionControls extends SelectionObserverMixin(RtlMixin(LocalizeCoreElement(LitElement))) {
+export class SelectionControls extends PageableSubscriberMixin(SelectionObserverMixin(RtlMixin(LocalizeCoreElement(LitElement)))) {
 
 	static get properties() {
 		return {
@@ -33,6 +35,7 @@ export class SelectionControls extends SelectionObserverMixin(RtlMixin(LocalizeC
 			 */
 			selectAllPagesAllowed: { type: Boolean, attribute: 'select-all-pages-allowed' },
 			_hasActions: { state: true },
+			_noSelectionText: { state: true },
 			_scrolled: { type: Boolean, reflect: true }
 		};
 	}
@@ -147,6 +150,18 @@ export class SelectionControls extends SelectionObserverMixin(RtlMixin(LocalizeC
 		if (changedProperties.has('noSticky')) {
 			this._stickyObserverUpdate();
 		}
+		if (changedProperties.has('_pageableInfo')) {
+			this._noSelectionText = this._getNoSelectionText();
+		}
+	}
+
+	_getNoSelectionText() {
+		if (!this._pageableInfo) return null;
+		const { itemShowingCount: count, itemCount: totalCount } = this._pageableInfo;
+
+		return (totalCount === null || count === totalCount)
+			? this.localize('components.pageable.info', { count, countFormatted: formatNumber(count) })
+			: this.localize('components.pageable.info-with-total', { totalCount, countFormatted: formatNumber(count), totalCountFormatted: formatNumber(totalCount) });
 	}
 
 	_getSelectionControlsContainerClasses() {
@@ -166,12 +181,8 @@ export class SelectionControls extends SelectionObserverMixin(RtlMixin(LocalizeC
 
 	_renderSelection() {
 		return html`
-			<d2l-selection-select-all></d2l-selection-select-all>
-			<d2l-selection-summary
-				aria-hidden="true"
-				no-selection-text="${this.localize('components.selection.select-all')}"
-			>
-			</d2l-selection-summary>
+			${this._provider && !this._noSelectAll ? html`<d2l-selection-select-all></d2l-selection-select-all>` : nothing}
+			<d2l-selection-summary no-selection-text="${ifDefined(this._noSelectionText)}"></d2l-selection-summary>
 			${this.selectAllPagesAllowed ? html`<d2l-selection-select-all-pages></d2l-selection-select-all-pages>` : nothing}
 		`;
 	}

package/components/selection/selection-select-all.js

@@ -44,7 +44,7 @@ class SelectAll extends FocusMixin(LocalizeCoreElement(SelectionObserverMixin(Li
 	}
 
 	render() {
-		if (this._provider && this._provider.selectionSingle) return;
+		if (!this._provider || this._provider.selectionSingle) return;
 
 		const summary = (this.selectionInfo.state === SelectionInfo.states.none ? this.localize('components.selection.select-all')
 			: this.localize('components.selection.selected', 'count', this.selectionInfo.keys.length));

package/components/selection/selection-summary.js

@@ -50,7 +50,10 @@ class Summary extends LocalizeCoreElement(SelectionObserverMixin(LitElement)) {
 	}
 
 	_updateSelectSummary() {
-		if (this._provider && this._provider.selectionSingle) return;
+		if (this._provider?.selectionSingle) {
+			this._summary = null;
+			return;
+		}
 
 		let count;
 		if (this._provider && this._provider.selectionCountOverride !== undefined) {
@@ -74,7 +77,7 @@ class Summary extends LocalizeCoreElement(SelectionObserverMixin(LitElement)) {
 				}
 			}
 
-			count = this.selectionInfo.state === SelectionInfo.states.allPages ?
+			count = (this._provider && this.selectionInfo.state === SelectionInfo.states.allPages) ?
 				this._provider.itemCount : this.selectionInfo.keys.length;
 
 			if (this.selectionInfo.state === SelectionInfo.states.none && this.noSelectionText) {

package/components/table/demo/table-test.js

@@ -65,8 +65,8 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 			return a.fruit[this._sortField] - b.fruit[this._sortField];
 		});
 		return html`
-			<d2l-table-wrapper>
-				<d2l-table-controls slot="controls" ?no-sticky="${!this.stickyControls}">
+			<d2l-table-wrapper item-count="500">
+				<d2l-table-controls slot="controls" ?no-sticky="${!this.stickyControls}" select-all-pages-allowed>
 					<d2l-selection-action
 						text="Sticky controls"
 						icon="tier1:${this.stickyControls ? 'check' : 'close-default'}"
@@ -86,14 +86,16 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 							<th scope="col">Country</th>
 							${fruits.map(fruit => this._renderSortButton(fruit))}
 						</tr>
-						${[1, 2].map(() => html`
-							<tr>
-								<th scope="col" sticky></th>
-								${thText.map(text => html`<th scope="col">${text}</th>`)}
-							</tr>
-						`)}
 					</thead>
 					<tbody>
+						<tr class="d2l-table-header">
+							<th scope="col" sticky></th>
+							${thText.map(text => html`<th scope="col">${text}</th>`)}
+						</tr>
+						<tr header>
+							<th scope="col" sticky></th>
+							${thText.map(text => html`<th scope="col">${text}</th>`)}
+						</tr>
 						${sorted.map(row => html`
 							<tr ?selected="${row.selected}" data-name="${row.name}">
 								<th scope="row" sticky>

package/components/table/table-controls.js

@@ -1,6 +1,4 @@
-import '../selection/selection-select-all-pages.js';
-import '../selection/selection-summary.js';
-import { css, html, nothing } from 'lit';
+import { css } from 'lit';
 import { SelectionControls } from '../selection/selection-controls.js';
 
 /**
@@ -30,19 +28,13 @@ class TableControls extends SelectionControls {
 		`];
 	}
 
-	_getSelectionControlsLabel() {
-		return this.localize('components.table-controls.label');
+	constructor() {
+		super();
+		this._noSelectAll = true;
 	}
 
-	_renderSelection() {
-		return html`
-			<d2l-selection-summary
-				aria-hidden="true"
-				no-selection-text="${this.localize('components.selection.select-all')}"
-			>
-			</d2l-selection-summary>
-			${this.selectAllPagesAllowed ? html`<d2l-selection-select-all-pages></d2l-selection-select-all-pages>` : nothing}
-		`;
+	_getSelectionControlsLabel() {
+		return this.localize('components.table-controls.label');
 	}
 }
 

package/components/table/table-wrapper.js

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import '../scroll-wrapper/scroll-wrapper.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { PageableMixin } from '../paging/pageable-mixin.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SelectionMixin } from '../selection/selection-mixin.js';
 
@@ -166,7 +167,7 @@ export const tableStyles = css`
  * @slot - Content to wrap
  * @slot controls - Slot for `d2l-table-controls` to be rendered above the table
  */
-export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
+export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitElement))) {
 
 	static get properties() {
 		return {
@@ -282,6 +283,8 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 	}
 
 	updated(changedProperties) {
+		super.updated(changedProperties);
+
 		// hack: grades/groups/outcomes in the LE use this CSS class on the
 		// body to apply special CSS to the page when tables are sticky
 		// Ideally they should be adding this class to the body.
@@ -335,6 +338,18 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 		});
 	}
 
+	_getItemByIndex(index) {
+		return this._getItems()[index];
+	}
+
+	_getItems() {
+		return this._table?.querySelectorAll(':not(thead) > tr:not(.d2l-table-header):not([header])') || [];
+	}
+
+	_getItemShowingCount() {
+		return this._getItems().length;
+	}
+
 	async _handleControlsChange() {
 		if (this._controls) {
 			await this._controls.updateComplete;
@@ -404,6 +419,7 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 	async _handleTableChange() {
 		await new Promise(resolve => requestAnimationFrame(resolve));
 
+		this._updateItemShowingCount();
 		this._applyClassNames();
 		this._updateStickyTops();
 	}

package/custom-elements.json

@@ -8032,6 +8032,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pageable-for",
+          "description": "Id of the `PageableMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
         {
           "name": "selection-for",
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
@@ -8060,6 +8065,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pageableFor",
+          "attribute": "pageable-for",
+          "description": "Id of the `PageableMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -10251,6 +10262,68 @@
         }
       ]
     },
+    {
+      "name": "d2l-demo-pageable",
+      "path": "./components/selection/demo/demo-selection.js",
+      "attributes": [
+        {
+          "name": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        }
+      ],
+      "properties": [
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        }
+      ]
+    },
+    {
+      "name": "d2l-demo-selection-pageable",
+      "path": "./components/selection/demo/demo-selection.js",
+      "attributes": [
+        {
+          "name": "selection-count-override",
+          "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
+          "type": "number"
+        },
+        {
+          "name": "selection-single",
+          "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        }
+      ],
+      "properties": [
+        {
+          "name": "selectionCountOverride",
+          "attribute": "selection-count-override",
+          "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
+          "type": "number"
+        },
+        {
+          "name": "selectionSingle",
+          "attribute": "selection-single",
+          "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        }
+      ]
+    },
     {
       "name": "d2l-selection-action-dropdown",
       "path": "./components/selection/selection-action-dropdown.js",
@@ -10584,6 +10657,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pageable-for",
+          "description": "Id of the `PageableMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
         {
           "name": "selection-for",
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
@@ -10612,6 +10690,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pageableFor",
+          "attribute": "pageable-for",
+          "description": "Id of the `PageableMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -10941,6 +11025,68 @@
         }
       ]
     },
+    {
+      "name": "d2l-test-pageable",
+      "path": "./components/selection/test/selection-component.js",
+      "attributes": [
+        {
+          "name": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        }
+      ],
+      "properties": [
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        }
+      ]
+    },
+    {
+      "name": "d2l-test-selection-pageable",
+      "path": "./components/selection/test/selection-component.js",
+      "attributes": [
+        {
+          "name": "selection-count-override",
+          "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
+          "type": "number"
+        },
+        {
+          "name": "selection-single",
+          "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        }
+      ],
+      "properties": [
+        {
+          "name": "selectionCountOverride",
+          "attribute": "selection-count-override",
+          "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
+          "type": "number"
+        },
+        {
+          "name": "selectionSingle",
+          "attribute": "selection-single",
+          "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        }
+      ]
+    },
     {
       "name": "d2l-test-skeleton-box",
       "path": "./components/skeleton/demo/skeleton-test-box.js",
@@ -11374,6 +11520,11 @@
           "type": "'default'|'light'",
           "default": "\"default\""
         },
+        {
+          "name": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        },
         {
           "name": "selection-count-override",
           "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
@@ -11418,6 +11569,12 @@
           "type": "'default'|'light'",
           "default": "\"default\""
         },
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        },
         {
           "name": "selectionCountOverride",
           "attribute": "selection-count-override",
@@ -11507,6 +11664,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pageable-for",
+          "description": "Id of the `PageableMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
         {
           "name": "selection-for",
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
@@ -11535,6 +11697,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pageableFor",
+          "attribute": "pageable-for",
+          "description": "Id of the `PageableMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -11584,6 +11752,11 @@
           "type": "'default'|'light'",
           "default": "\"default\""
         },
+        {
+          "name": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        },
         {
           "name": "selection-count-override",
           "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
@@ -11618,6 +11791,12 @@
           "type": "'default'|'light'",
           "default": "\"default\""
         },
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        },
         {
           "name": "selectionCountOverride",
           "attribute": "selection-count-override",

package/lang/ar.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "عنصر نائب",
 	"components.overflow-group.moreActions": "مزيد من الإجراءات",
 	"components.pager-load-more.action": "تحميل {count} إضافي",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} من أصل {totalCountFormatted} من العناصر} other {{showingCount} من أصل {totalCountFormatted} من العناصر}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} من أصل {totalCountFormatted} من العناصر} other {{countFormatted} من أصل {totalCountFormatted} من العناصر}}",
 	"components.pager-load-more.status-loading": "تحميل المزيد من المواد",
 	"components.selection.action-hint": "حدد مادة لتنفيذ هذا الإجراء.",
 	"components.selection.select-all": "تحديد الكل",

package/lang/cy.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Eitem Dalfan",
 	"components.overflow-group.moreActions": "Rhagor o Gamau Gweithredu",
 	"components.pager-load-more.action": "Lwytho {count} Arall",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} o {totalCountFormatted} eitem} other {{showingCount} o {totalCountFormatted} eitem}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} o {totalCountFormatted} eitem} other {{countFormatted} o {totalCountFormatted} eitem}}",
 	"components.pager-load-more.status-loading": "Llwytho rhagor o eitemau",
 	"components.selection.action-hint": "Dewiswch eitem i gyflawni'r weithred hon.",
 	"components.selection.select-all": "Dewis y Cyfan",

package/lang/da.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Pladsholder-element",
 	"components.overflow-group.moreActions": "Flere handlinger",
 	"components.pager-load-more.action": "Indlæs {count} mere",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} af {totalCountFormatted} element} other {{showingCount} af {totalCountFormatted} elementer}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} af {totalCountFormatted} element} other {{countFormatted} af {totalCountFormatted} elementer}}",
 	"components.pager-load-more.status-loading": "Indlæser flere elementer",
 	"components.selection.action-hint": "Vælg et element for at udføre denne handling.",
 	"components.selection.select-all": "Vælg alle",

package/lang/de.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Platzhalterelement",
 	"components.overflow-group.moreActions": "Weitere Aktionen",
 	"components.pager-load-more.action": "{count} weitere laden",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} von {totalCountFormatted} Element} other {{showingCount} von {totalCountFormatted} Elementen}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} von {totalCountFormatted} Element} other {{countFormatted} von {totalCountFormatted} Elementen}}",
 	"components.pager-load-more.status-loading": "Weitere Elemente werden geladen",
 	"components.selection.action-hint": "Wählen Sie ein Element aus, um diese Aktion auszuführen.",
 	"components.selection.select-all": "Alle auswählen",

package/lang/en-gb.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Placeholder Item",
 	"components.overflow-group.moreActions": "More Actions",
 	"components.pager-load-more.action": "Load {count} More",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} of {totalCountFormatted} item} other {{countFormatted} of {totalCountFormatted} 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",

package/lang/en.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Placeholder Item",
 	"components.overflow-group.moreActions": "More Actions",
 	"components.pager-load-more.action": "Load {count} More",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} of {totalCountFormatted} item} other {{countFormatted} of {totalCountFormatted} 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",

package/lang/es-es.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Elemento de marcador de posición",
 	"components.overflow-group.moreActions": "Más acciones",
 	"components.pager-load-more.action": "Cargar {count} más",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} de {totalCountFormatted} elemento} other {{showingCount} de {totalCountFormatted} elemento}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} de {totalCountFormatted} elemento} other {{countFormatted} de {totalCountFormatted} elemento}}",
 	"components.pager-load-more.status-loading": "Cargando más elementos",
 	"components.selection.action-hint": "Seleccione un elemento para realizar esta acción.",
 	"components.selection.select-all": "Seleccionar todo",

package/lang/es.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Elemento de marcador de posición",
 	"components.overflow-group.moreActions": "Más acciones",
 	"components.pager-load-more.action": "Cargar {count} más",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} de {totalCountFormatted} elemento} other {{showingCount} de {totalCountFormatted} elemento}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} de {totalCountFormatted} elemento} other {{countFormatted} de {totalCountFormatted} elemento}}",
 	"components.pager-load-more.status-loading": "Cargando más elementos",
 	"components.selection.action-hint": "Seleccione un elemento para realizar esta acción.",
 	"components.selection.select-all": "Seleccionar todo",

package/lang/fr-fr.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Élément d’espace réservé",
 	"components.overflow-group.moreActions": "Plus d'actions",
 	"components.pager-load-more.action": "Charger {count} supplémentaire(s)",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} sur {totalCountFormatted} élément} other {{showingCount} sur {totalCountFormatted} éléments}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} sur {totalCountFormatted} élément} other {{countFormatted} sur {totalCountFormatted} éléments}}",
 	"components.pager-load-more.status-loading": "Charger plus d’éléments",
 	"components.selection.action-hint": "Sélectionnez un élément pour exécuter cette action.",
 	"components.selection.select-all": "Tout sélectionner",

package/lang/fr.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Élément de paramètre fictif",
 	"components.overflow-group.moreActions": "Plus d'actions",
 	"components.pager-load-more.action": "Charger {count} de plus",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} de {totalCountFormatted} élément} other {{showingCount} de {totalCountFormatted} éléments}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} de {totalCountFormatted} élément} other {{countFormatted} de {totalCountFormatted} éléments}}",
 	"components.pager-load-more.status-loading": "Chargement d'autres d'éléments",
 	"components.selection.action-hint": "Sélectionner un élément pour exécuter cette action.",
 	"components.selection.select-all": "Tout sélectionner",

package/lang/hi.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "प्लेसहोल्डर आइटम",
 	"components.overflow-group.moreActions": "अधिक क्रियाएँ",
 	"components.pager-load-more.action": "{count} और लोड करें",
-	"components.pager-load-more.info": "{totalCount, plural, one {{totalCountFormatted} में से {showingCount} आइटम} other {{totalCountFormatted} में से {showingCount} आइटम}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{totalCountFormatted} में से {countFormatted} आइटम} other {{totalCountFormatted} में से {countFormatted} आइटम}}",
 	"components.pager-load-more.status-loading": "और आइटम लोड करना",
 	"components.selection.action-hint": "यह कार्रवाई निष्पादित करने के लिए कोई आइटम का चयन करें।",
 	"components.selection.select-all": "सभी का चयन करें",

package/lang/ja.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "プレースホルダの項目",
 	"components.overflow-group.moreActions": "その他のアクション",
 	"components.pager-load-more.action": "さらに {count} 件を読み込む",
-	"components.pager-load-more.info": "{totalCount, plural, other {{showingCount}/{totalCountFormatted} 個の項目}}",
+	"components.pageable.info": "{count, plural, other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, other {{countFormatted}/{totalCountFormatted} 個の項目}}",
 	"components.pager-load-more.status-loading": "さらに項目を読み込み中",
 	"components.selection.action-hint": "このアクションを実行するための項目を選択します。",
 	"components.selection.select-all": "すべて選択",

package/lang/ko.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "자리표시자 항목",
 	"components.overflow-group.moreActions": "추가 작업",
 	"components.pager-load-more.action": "{count}개 더 로드",
-	"components.pager-load-more.info": "{totalCount, plural, other {{totalCountFormatted}개 항목 중 {showingCount}개}}",
+	"components.pageable.info": "{count, plural, other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, other {{totalCountFormatted}개 항목 중 {countFormatted}개}}",
 	"components.pager-load-more.status-loading": "더 많은 항목 로드",
 	"components.selection.action-hint": "이 작업을 수행할 항목을 선택하십시오.",
 	"components.selection.select-all": "모두 선택",

package/lang/nl.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Item tijdelijke aanduiding",
 	"components.overflow-group.moreActions": "Meer acties",
 	"components.pager-load-more.action": "Laad nog {count} extra",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} van {totalCountFormatted} artikel} other {{showingCount} van {totalCountFormatted} artikelen}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} van {totalCountFormatted} artikel} other {{countFormatted} van {totalCountFormatted} artikelen}}",
 	"components.pager-load-more.status-loading": "Er worden meer items geladen",
 	"components.selection.action-hint": "Selecteer een item om deze actie uit te voeren.",
 	"components.selection.select-all": "Alles selecteren",

package/lang/pt.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Item de espaço reservado",
 	"components.overflow-group.moreActions": "Mais ações",
 	"components.pager-load-more.action": "Carregar mais {count}",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} de {totalCountFormatted} item} other {{showingCount} de {totalCountFormatted} itens}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} de {totalCountFormatted} item} other {{countFormatted} de {totalCountFormatted} itens}}",
 	"components.pager-load-more.status-loading": "Carregando mais itens",
 	"components.selection.action-hint": "Selecione um item para realizar esta ação.",
 	"components.selection.select-all": "Selecionar tudo",

package/lang/sv.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Platshållarobjekt",
 	"components.overflow-group.moreActions": "Fler åtgärder",
 	"components.pager-load-more.action": "Läs in {count} till",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} av {totalCountFormatted} objekt} other {{showingCount} av {totalCountFormatted} objekt}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} av {totalCountFormatted} objekt} other {{countFormatted} av {totalCountFormatted} objekt}}",
 	"components.pager-load-more.status-loading": "Läser in fler objekt",
 	"components.selection.action-hint": "Välj ett objekt för att utföra åtgärden.",
 	"components.selection.select-all": "Välj alla",

package/lang/tr.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Yer Tutucu Öğesi",
 	"components.overflow-group.moreActions": "Daha Fazla Eylem",
 	"components.pager-load-more.action": "{count} Tane Daha Yükle",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} / {totalCountFormatted} öğe} other {{showingCount} / {totalCountFormatted} öğe}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} / {totalCountFormatted} öğe} other {{countFormatted} / {totalCountFormatted} öğe}}",
 	"components.pager-load-more.status-loading": "Daha fazla öğe yükleniyor",
 	"components.selection.action-hint": "Bu eylemi gerçekleştirebilmek için bir öğe seçin.",
 	"components.selection.select-all": "Tümünü Seç",

package/lang/zh-cn.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "占位符项目",
 	"components.overflow-group.moreActions": "更多操作",
 	"components.pager-load-more.action": "再加载 {count} 个",
-	"components.pager-load-more.info": "{totalCount, plural, other {{showingCount}/{totalCountFormatted} 项}}",
+	"components.pageable.info": "{count, plural, other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, other {{countFormatted}/{totalCountFormatted} 项}}",
 	"components.pager-load-more.status-loading": "加载更多项目",
 	"components.selection.action-hint": "选择一个项目后才能执行此操作。",
 	"components.selection.select-all": "全选",

package/lang/zh-tw.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "預留位置項目",
 	"components.overflow-group.moreActions": "其他動作",
 	"components.pager-load-more.action": "再載入 {count} 個",
-	"components.pager-load-more.info": "{totalCount, plural, other {{showingCount} 項，共 {totalCountFormatted} 項}}",
+	"components.pageable.info": "{count, plural, other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, other {{countFormatted} 項，共 {totalCountFormatted} 項}}",
 	"components.pager-load-more.status-loading": "正在載入更多項目",
 	"components.selection.action-hint": "選取項目以執行此動作。",
 	"components.selection.select-all": "全選",

package/package.json

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