@brightspace-ui/core 2.104.2 → 2.106.0

package/components/button/button-move.js

@@ -1,12 +1,14 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { buttonStyles } from './button-styles.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
+import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
 
 const keyCodes = Object.freeze({
 	DOWN: 40,
@@ -31,7 +33,7 @@ export const moveActions = Object.freeze({
 /**
  * A button component that provides a move action via a single button.
  */
-class ButtonMove extends FocusMixin(RtlMixin(LitElement)) {
+class ButtonMove extends ThemeMixin(FocusMixin(RtlMixin(LitElement))) {
 
 	static get properties() {
 		return {
@@ -45,15 +47,35 @@ class ButtonMove extends FocusMixin(RtlMixin(LitElement)) {
 			 */
 			description: { type: String },
 			/**
-			 * Disables the button
+			 * Disables the down interaction
 			 * @type {boolean}
 			 */
-			disabled: { type: Boolean, reflect: true },
+			disabledDown: { type: Boolean, attribute: 'disabled-down', reflect: true },
 			/**
-			 * Tooltip text when disabled
-			 * @type {string}
+			 * Disables the end interaction
+			 * @type {boolean}
+			 */
+			disabledEnd: { type: Boolean, attribute: 'disabled-end', reflect: true },
+			/**
+			 * Disables the home interaction
+			 * @type {boolean}
+			 */
+			disabledHome: { type: Boolean, attribute: 'disabled-home', reflect: true },
+			/**
+			 * Disables the left interaction
+			 * @type {boolean}
 			 */
-			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
+			disabledLeft: { type: Boolean, attribute: 'disabled-left', reflect: true },
+			/**
+			 * Disables the right interaction
+			 * @type {boolean}
+			 */
+			disabledRight: { type: Boolean, attribute: 'disabled-right', reflect: true },
+			/**
+			 * Disables the up interaction
+			 * @type {boolean}
+			 */
+			disabledUp: { type: Boolean, attribute: 'disabled-up', reflect: true },
 			/**
 			 * REQUIRED: Accessible text for the button
 			 * @type {string}
@@ -67,12 +89,22 @@ class ButtonMove extends FocusMixin(RtlMixin(LitElement)) {
 		return [ buttonStyles,
 			css`
 				:host {
+					--d2l-button-move-background-color-focus: #ffffff;
+					--d2l-button-move-icon-background-color-hover: var(--d2l-color-mica);
+					--d2l-button-move-box-shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
+					--d2l-icon-fill-color: var(--d2l-color-tungsten);
 					display: inline-block;
 					line-height: 0;
 				}
 				:host([hidden]) {
 					display: none;
 				}
+				:host([theme="dark"]) {
+					--d2l-button-move-background-color-focus: #000000;
+					--d2l-button-move-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
+					--d2l-button-move-box-shadow-focus: 0 0 0 2px black, 0 0 0 4px var(--d2l-color-celestine-plus-1);
+					--d2l-icon-fill-color: var(--d2l-color-sylvite);
+				}
 				button {
 					background-color: transparent;
 					display: flex;
@@ -90,11 +122,14 @@ class ButtonMove extends FocusMixin(RtlMixin(LitElement)) {
 					width: 0.9rem;
 				}
 				button:focus {
-					background-color: #ffffff;
+					background-color: var(--d2l-button-move-background-color-focus);
 				}
 				button:hover > d2l-icon,
 				button:focus > d2l-icon {
-					background-color: var(--d2l-color-mica);
+					background-color: var(--d2l-button-move-icon-background-color-hover);
+				}
+				button:${unsafeCSS(getFocusPseudoClass())} {
+					box-shadow: var(--d2l-button-move-box-shadow-focus);
 				}
 				.up-icon {
 					border-top-left-radius: 0.3rem;
@@ -124,25 +159,27 @@ class ButtonMove extends FocusMixin(RtlMixin(LitElement)) {
 					right: -0.2rem;
 				}
 
-
 				/* Firefox includes a hidden border which messes up button dimensions */
 				button::-moz-focus-inner {
 					border: 0;
 				}
-				:host([disabled]) button {
-					cursor: default;
-					opacity: 0.5;
-				}
 				button[disabled]:hover > d2l-icon {
 					background-color: transparent;
 				}
+				:host([disabled-up]) .up-icon,
+				:host([disabled-down]) .down-icon {
+					opacity: 0.5;
+				}
+				:host([disabled-up]) .up-layer,
+				:host([disabled-down]) .down-layer {
+					cursor: default;
+				}
 			`
 		];
 	}
 
 	constructor() {
 		super();
-		this.disabled = false;
 		/** @ignore */
 		this.autofocus = false;
 		/** @internal */
@@ -155,24 +192,13 @@ class ButtonMove extends FocusMixin(RtlMixin(LitElement)) {
 		return 'button';
 	}
 
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener('click', this._handleClick, true);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener('click', this._handleClick, true);
-	}
-
 	render() {
 		return html`
 			<button
 				aria-describedby="${ifDefined(this.description ? this._describedById : undefined)}"
-				aria-disabled="${ifDefined(this.disabled && this.disabledTooltip ? 'true' : undefined)}"
 				aria-label="${ifDefined(this.text)}"
 				?autofocus="${this.autofocus}"
-				?disabled="${this.disabled && !this.disabledTooltip}"
+				?disabled="${this.disabledUp && this.disabledDown && this.disabledLeft && this.disabledRight && this.disabledHome && this.disabledEnd}"
 				id="${this._buttonId}"
 				@keydown="${this._handleKeydown}"
 				title="${ifDefined(this.text)}"
@@ -183,7 +209,6 @@ class ButtonMove extends FocusMixin(RtlMixin(LitElement)) {
 				<div class="down-layer" @click="${this._handleDownClick}"></div>
 		</button>
 		${this.description ? html`<span id="${this._describedById}" hidden>${this.description}</span>` : null}
-		${this.disabled && this.disabledTooltip ? html`<d2l-tooltip for="${this._buttonId}">${this.disabledTooltip}</d2l-tooltip>` : ''}
 		`;
 	}
 
@@ -195,48 +220,45 @@ class ButtonMove extends FocusMixin(RtlMixin(LitElement)) {
 		}));
 	}
 
-	_handleClick(e) {
-		if (this.disabled) {
-			e.stopPropagation();
-		}
-	}
-
 	_handleDownClick() {
+		if (this.disabledDown) return;
 		this._dispatchAction(moveActions.down);
 	}
 
 	_handleKeydown(e) {
+
 		let action;
 		switch (e.keyCode) {
 			case keyCodes.UP:
-				action = moveActions.up;
+				if (!this.disabledUp) action = moveActions.up;
 				break;
 			case keyCodes.DOWN:
-				action = moveActions.down;
+				if (!this.disabledDown) action = moveActions.down;
 				break;
 			case keyCodes.LEFT:
-				action = moveActions.left;
+				if (!this.disabledLeft) action = moveActions.left;
 				break;
 			case keyCodes.RIGHT:
-				action = moveActions.right;
+				if (!this.disabledRight) action = moveActions.right;
 				break;
 			case keyCodes.HOME:
-				action = (e.ctrlKey ? moveActions.rootHome : moveActions.home);
+				if (!this.disabledHome) action = (e.ctrlKey ? moveActions.rootHome : moveActions.home);
 				break;
 			case keyCodes.END:
-				action = (e.ctrlKey ? moveActions.rootEnd : moveActions.end);
+				if (!this.disabledEnd) action = (e.ctrlKey ? moveActions.rootEnd : moveActions.end);
 				break;
 			default:
 				return;
 		}
 
-		this._dispatchAction(action);
+		if (action) this._dispatchAction(action);
 		e.preventDefault();
 		e.stopPropagation();
 
 	}
 
 	_handleUpClick() {
+		if (this.disabledUp) return;
 		this._dispatchAction(moveActions.up);
 	}
 

package/components/button/demo/button-move.html

@@ -30,15 +30,7 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-button-move text="Reorder Item" disabled></d2l-button-move>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>Move Button Disabled with Tooltip</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-button-move text="Reorder Item" disabled disabled-tooltip="Optional disabled tooltip"></d2l-button-move>
+					<d2l-button-move text="Reorder Item" disabled-up disabled-down disabled-left disabled-right disabled-home disabled-end></d2l-button-move>
 				</template>
 			</d2l-demo-snippet>
 

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

@@ -169,7 +169,7 @@ class ListDemoNested extends LitElement {
 
 	_renderList(items, nested, includeControls = false, showLoadMore = false) {
 		return html`
-			<d2l-list ?grid="${!this.disableListGrid}" drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}">
+			<d2l-list ?grid="${!this.disableListGrid}" drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}" item-count="${this._items.length}">
 				${ includeControls ? this._renderListControls() : nothing }
 				${repeat(items, item => item.key, item => html`
 					${this._renderListItem(item)}
@@ -268,7 +268,6 @@ class ListDemoNested extends LitElement {
 			<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="${this._remainingItemCount < this._pageSize ? this._remainingItemCount : this._pageSize}">
 			</d2l-pager-load-more>
 		`;

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

@@ -201,7 +201,6 @@ class DemoList extends LitElement {
 				<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>

package/components/list/list.js

@@ -64,8 +64,6 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		this.dragMultiple = false;
 		this.extendSeparators = false;
 		this.grid = false;
-		this._itemsShowingCount = 0;
-		this._itemsShowingTotalCount = 0;
 		this._listItemChanges = [];
 		this._childHasExpandCollapseToggle = false;
 
@@ -77,7 +75,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 
 	connectedCallback() {
 		super.connectedCallback();
-		this.addEventListener('d2l-list-items-showing-count-change', this._handleListItemsShowingCountChange);
+		this.addEventListener('d2l-list-item-showing-count-change', this._handleListItemShowingCountChange);
 		this.addEventListener('d2l-list-item-nested-change', (e) => this._handleListIemNestedChange(e));
 	}
 
@@ -190,13 +188,8 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		return items[index];
 	}
 
-	async _getItemsShowingCount() {
-		if (this.slot === 'nested') return this._itemsShowingCount;
-		else return this._getListItemsShowingTotalCount(false);
-	}
-
-	_getLastItemIndex() {
-		return this._itemsShowingCount - 1;
+	_getItemShowingCount() {
+		return this.getItems().length;
 	}
 
 	_getLazyLoadItems() {
@@ -204,13 +197,6 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		return items.length > 0 ?  items[0]._getFlattenedListItems().lazyLoadListItems : new Map();
 	}
 
-	async _getListItemsShowingTotalCount(refresh) {
-		if (refresh) {
-			this._itemsShowingTotalCount = this.getItems().length;
-		}
-		return this._itemsShowingTotalCount;
-	}
-
 	_handleKeyDown(e) {
 		if (!this.grid || this.slot === 'nested' || e.keyCode !== keyCodes.TAB) return;
 		e.preventDefault();
@@ -236,33 +222,26 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		this._listChildrenUpdatedSubscribers.updateSubscribers();
 	}
 
-	_handleListItemsShowingCountChange() {
+	_handleListItemShowingCountChange() {
 		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;
+		if (this._updateItemShowingCountRequested) return;
+
+		this._updateItemShowingCountRequested = true;
+		setTimeout(() => {
+			this._updateItemShowingCount();
+			this._updateItemShowingCountRequested = 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));
+	_handleSlotChange() {
+		this._updateItemShowingCount();
 
 		/** @ignore */
-		this.dispatchEvent(new CustomEvent('d2l-list-items-showing-count-change', {
+		this.dispatchEvent(new CustomEvent('d2l-list-item-showing-count-change', {
 			bubbles: true,
-			composed: true,
-			detail: { count: this._itemsShowingCount }
+			composed: true
 		}));
 	}
 

package/components/paging/README.md

@@ -7,16 +7,9 @@ The paging components and mixins can be used to provide consistent paging functi
 <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>
+<d2l-pager-load-more has-more page-size="3"></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 -->
-<!-- docs: end best practices -->
-
 ## 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.
@@ -24,10 +17,10 @@ The `d2l-pager-load-more` component can be used in conjunction with pageable com
 See [Pageable Lists](../../components/list/#pageable-lists).
 
 ```html
-<d2l-list>
+<d2l-list item-count="85">
   <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-pager-load-more slot="pager" has-more page-size="10"></d2l-pager-load-more>
 </d2l-list>
 ```
 
@@ -44,7 +37,6 @@ pager.addEventListener('d2l-pager-load-more', e => {
 | 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

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

@@ -27,12 +27,12 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-test-pageable>
+					<d2l-test-pageable item-count="12">
 						<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-pager-load-more id="pager1" slot="pager" has-more page-size="3"></d2l-pager-load-more>
 					</d2l-test-pageable>
 					<script>
 						document.querySelector('#pager1').addEventListener('d2l-pager-load-more', window.handleLoadMore);

package/components/paging/pageable-mixin.js

@@ -1,35 +1,62 @@
+import { CollectionMixin } from '../../mixins/collection/collection-mixin.js';
 import { html } from 'lit';
+import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
-export const PageableMixin = superclass => class extends superclass {
+export const PageableMixin = superclass => class extends CollectionMixin(superclass) {
+
+	static get properties() {
+		return {
+			_itemShowingCount: { state: true },
+		};
+	}
 
 	constructor() {
 		super();
-		this._pageable = true;
+
+		this._itemShowingCount = 0;
+		this._pageableSubscriberRegistry = new SubscriberRegistryController(this, 'pageable', {
+			onSubscribe: this._updatePageableSubscriber.bind(this),
+			updateSubscribers: this._updatePageableSubscribers.bind(this)
+		});
 	}
 
-	/* must be implemented by consumer */
-	_getItemByIndex(index) { } // eslint-disable-line no-unused-vars
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this._updateItemShowingCount();
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+
+		if (changedProperties.has('itemCount') || changedProperties.has('_itemShowingCount')) {
+			this._pageableSubscriberRegistry.updateSubscribers();
+		}
+	}
 
 	/* must be implemented by consumer */
-	async _getItemsShowingCount() { }
+	_getItemByIndex(index) { } // eslint-disable-line no-unused-vars
 
 	/* must be implemented by consumer */
-	_getLastItemIndex() { }
+	_getItemShowingCount() { }
 
-	async _handlePagerSlotChange(e) {
-		this._updatePagerCount(await this._getItemsShowingCount(), e.target);
+	_getLastItemIndex() {
+		return this._itemShowingCount - 1;
 	}
 
 	_renderPagerContainer() {
-		return html`<slot name="pager" @slotchange="${this._handlePagerSlotChange}"></slot>`;
+		return html`<slot name="pager"></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;
-		}
+	_updateItemShowingCount() {
+		this._itemShowingCount = this._getItemShowingCount();
+	}
+
+	_updatePageableSubscriber(subscriber) {
+		subscriber._pageableInfo = { itemShowingCount: this._itemShowingCount, itemCount: this.itemCount };
+	}
+
+	_updatePageableSubscribers(subscribers) {
+		subscribers.forEach(subscriber => this._updatePageableSubscriber(subscriber));
 	}
 
 };

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

@@ -0,0 +1,33 @@
+import { EventSubscriberController, IdSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
+
+export const PageableSubscriberMixin = superclass => class extends superclass {
+
+	static get properties() {
+		return {
+			/**
+			 * Id of the `PageableMixin` component this component wants to observe (if not located within that component)
+			 * @type {string}
+			 */
+			pageableFor: { type: String, reflect: true, attribute: 'pageable-for' },
+			_pageableInfo: { state: true }
+		};
+	}
+
+	constructor() {
+		super();
+
+		this._pageableInfo = { itemCount: null, itemShowingCount: 0 };
+		this._pageableEventSubscriber = new EventSubscriberController(this, 'pageable');
+		this._pageableIdSubscriber = new IdSubscriberController(this, 'pageable', { idPropertyName: 'pageableFor' });
+	}
+
+	async getUpdateComplete() {
+		await super.getUpdateComplete();
+		await (this.pageableFor ? this._pageableIdSubscriber._subscriptionComplete : this._pageableEventSubscriber._subscriptionComplete);
+	}
+
+	_getPageableRegistries() {
+		return this.pageableFor ? this._pageableIdSubscriber.registries : [ this._pageableEventSubscriber.registry ];
+	}
+
+};

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

@@ -2,7 +2,6 @@ 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/focus-mixin.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
@@ -10,6 +9,7 @@ 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';
+import { PageableSubscriberMixin } from './pageable-subscriber-mixin.js';
 
 const nativeFocus = document.createElement('div').focus;
 
@@ -17,7 +17,7 @@ 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(LocalizeCoreElement(LitElement)) {
+class LoadMore extends PageableSubscriberMixin(FocusMixin(LocalizeCoreElement(LitElement))) {
 
 	static get properties() {
 		return {
@@ -26,21 +26,11 @@ class LoadMore extends FocusMixin(LocalizeCoreElement(LitElement)) {
 			 * @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 }
 		};
 	}
@@ -85,9 +75,8 @@ class LoadMore extends FocusMixin(LocalizeCoreElement(LitElement)) {
 	constructor() {
 		super();
 		this.hasMore = false;
-		this.itemCount = -1;
+
 		/** @ignore */
-		this.itemShowingCount = 0;
 		this.pageSize = 50;
 		this._loading = false;
 	}
@@ -97,7 +86,9 @@ class LoadMore extends FocusMixin(LocalizeCoreElement(LitElement)) {
 	}
 
 	render() {
-		if (!this.hasMore) return;
+		if (!this.hasMore) return nothing;
+		const { itemCount, itemShowingCount } = this._pageableInfo;
+
 		return html`
 			${this._loading ? html`
 				<span class="d2l-offscreen" role="alert">${this.localize('components.pager-load-more.status-loading')}</span>
@@ -107,10 +98,10 @@ class LoadMore extends FocusMixin(LocalizeCoreElement(LitElement)) {
 				<d2l-loading-spinner size="24"></d2l-loading-spinner>
 			` : html`
 				<span class="action">${this.localize('components.pager-load-more.action', { count: formatNumber(this.pageSize) })}</span>
-				${this.itemCount > -1 ? html`
+				${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(this.itemShowingCount), totalCount: this.itemCount, totalCountFormatted: formatNumber(this.itemCount) })}</span>
+					<span class="info">${this.localize('components.pager-load-more.info', { showingCount: formatNumber(itemShowingCount), totalCount: itemCount, totalCountFormatted: formatNumber(itemCount) })}</span>
 				` : nothing}
 			`}
 		</button>
@@ -119,7 +110,7 @@ class LoadMore extends FocusMixin(LocalizeCoreElement(LitElement)) {
 
 	async _handleClick() {
 		if (this._loading) return;
-		const pageable = findComposedAncestor(this, node => node._pageable);
+		const pageable = this._getPageableRegistries()[0];
 		if (!pageable) return;
 		const lastItemIndex = pageable._getLastItemIndex();
 

package/components/selection/selection-mixin.js

@@ -1,3 +1,4 @@
+import { CollectionMixin } from '../../mixins/collection/collection-mixin.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const keyCodes = {
@@ -35,15 +36,10 @@ export class SelectionInfo {
 
 }
 
-export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
+export const SelectionMixin = superclass => class extends RtlMixin(CollectionMixin(superclass)) {
 
 	static get properties() {
 		return {
-			/**
-			 * Total number of items. Required when selecting all pages is allowed.
-			 * @type {number}
-			 */
-			itemCount: { type: Number, attribute: 'item-count' },
 			/**
 			 * 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}
@@ -59,7 +55,6 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 
 	constructor() {
 		super();
-		this.itemCount = 0;
 		this.selectionSingle = false;
 		this._selectAllPages = false;
 		this._selectionObservers = new Map();

package/controllers/subscriber/subscriberControllers.js

@@ -9,6 +9,7 @@ class BaseController {
 		this._name = name;
 		this._options = options;
 		this._eventName = `d2l-subscribe-${this._name}`;
+		this._subscriptionComplete = Promise.resolve();
 	}
 }
 
@@ -111,7 +112,12 @@ export class EventSubscriberController extends BaseSubscriber {
 
 	hostConnected() {
 		// delay subscription otherwise import/upgrade order can cause selection mixin to miss event
-		requestAnimationFrame(() => this._subscribe());
+		this._subscriptionComplete = new Promise(resolve => {
+			requestAnimationFrame(() => {
+				this._subscribe();
+				resolve();
+			});
+		});
 	}
 
 	hostDisconnected() {

package/custom-elements.json

@@ -449,20 +449,39 @@
           "type": "string"
         },
         {
-          "name": "disabled-tooltip",
-          "description": "Tooltip text when disabled",
-          "type": "string"
+          "name": "disabled-down",
+          "description": "Disables the down interaction",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled-end",
+          "description": "Disables the end interaction",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled-home",
+          "description": "Disables the home interaction",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled-left",
+          "description": "Disables the left interaction",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled-right",
+          "description": "Disables the right interaction",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled-up",
+          "description": "Disables the up interaction",
+          "type": "boolean"
         },
         {
           "name": "text",
           "description": "REQUIRED: Accessible text for the button",
           "type": "string"
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the button",
-          "type": "boolean",
-          "default": "false"
         }
       ],
       "properties": [
@@ -473,23 +492,46 @@
           "type": "string"
         },
         {
-          "name": "disabledTooltip",
-          "attribute": "disabled-tooltip",
-          "description": "Tooltip text when disabled",
-          "type": "string"
+          "name": "disabledDown",
+          "attribute": "disabled-down",
+          "description": "Disables the down interaction",
+          "type": "boolean"
+        },
+        {
+          "name": "disabledEnd",
+          "attribute": "disabled-end",
+          "description": "Disables the end interaction",
+          "type": "boolean"
+        },
+        {
+          "name": "disabledHome",
+          "attribute": "disabled-home",
+          "description": "Disables the home interaction",
+          "type": "boolean"
+        },
+        {
+          "name": "disabledLeft",
+          "attribute": "disabled-left",
+          "description": "Disables the left interaction",
+          "type": "boolean"
+        },
+        {
+          "name": "disabledRight",
+          "attribute": "disabled-right",
+          "description": "Disables the right interaction",
+          "type": "boolean"
+        },
+        {
+          "name": "disabledUp",
+          "attribute": "disabled-up",
+          "description": "Disables the up interaction",
+          "type": "boolean"
         },
         {
           "name": "text",
           "attribute": "text",
           "description": "REQUIRED: Accessible text for the button",
           "type": "string"
-        },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Disables the button",
-          "type": "boolean",
-          "default": "false"
         }
       ],
       "events": [
@@ -8822,15 +8864,14 @@
           "default": "false"
         },
         {
-          "name": "selection-count-override",
-          "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
+          "name": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
           "type": "number"
         },
         {
-          "name": "item-count",
-          "description": "Total number of items. Required when selecting all pages is allowed.",
-          "type": "number",
-          "default": "0"
+          "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",
@@ -8868,19 +8909,18 @@
           "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": "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": "itemCount",
-          "attribute": "item-count",
-          "description": "Total number of items. Required when selecting all pages is allowed.",
-          "type": "number",
-          "default": "0"
-        },
         {
           "name": "selectionSingle",
           "attribute": "selection-single",
@@ -10017,6 +10057,11 @@
       "path": "./components/paging/pager-load-more.js",
       "description": "A pager component for load-more paging.",
       "attributes": [
+        {
+          "name": "page-size",
+          "description": "The number of additional items to load.",
+          "type": "number"
+        },
         {
           "name": "has-more",
           "description": "Whether there are more items that can be loaded.",
@@ -10024,19 +10069,18 @@
           "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"
+          "name": "pageable-for",
+          "description": "Id of the `PageableMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
         }
       ],
       "properties": [
+        {
+          "name": "pageSize",
+          "attribute": "page-size",
+          "description": "The number of additional items to load.",
+          "type": "number"
+        },
         {
           "name": "hasMore",
           "attribute": "has-more",
@@ -10045,18 +10089,10 @@
           "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"
+          "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": "documentLocaleSettings",
@@ -10072,7 +10108,41 @@
     },
     {
       "name": "d2l-test-pageable",
-      "path": "./components/paging/test/pageable-component.js"
+      "path": "./components/paging/test/pageable-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-pageable-simple",
+      "path": "./components/paging/test/pageable-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-scroll-wrapper",
@@ -10152,12 +10222,6 @@
           "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
           "type": "number"
         },
-        {
-          "name": "item-count",
-          "description": "Total number of items. Required when selecting all pages is allowed.",
-          "type": "number",
-          "default": "0"
-        },
         {
           "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.",
@@ -10172,13 +10236,6 @@
           "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
           "type": "number"
         },
-        {
-          "name": "itemCount",
-          "attribute": "item-count",
-          "description": "Total number of items. Required when selecting all pages is allowed.",
-          "type": "number",
-          "default": "0"
-        },
         {
           "name": "selectionSingle",
           "attribute": "selection-single",
@@ -10801,12 +10858,6 @@
           "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
           "type": "number"
         },
-        {
-          "name": "item-count",
-          "description": "Total number of items. Required when selecting all pages is allowed.",
-          "type": "number",
-          "default": "0"
-        },
         {
           "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.",
@@ -10821,13 +10872,6 @@
           "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
           "type": "number"
         },
-        {
-          "name": "itemCount",
-          "attribute": "item-count",
-          "description": "Total number of items. Required when selecting all pages is allowed.",
-          "type": "number",
-          "default": "0"
-        },
         {
           "name": "selectionSingle",
           "attribute": "selection-single",
@@ -11329,12 +11373,6 @@
           "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
           "type": "number"
         },
-        {
-          "name": "item-count",
-          "description": "Total number of items. Required when selecting all pages is allowed.",
-          "type": "number",
-          "default": "0"
-        },
         {
           "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.",
@@ -11380,13 +11418,6 @@
           "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
           "type": "number"
         },
-        {
-          "name": "itemCount",
-          "attribute": "item-count",
-          "description": "Total number of items. Required when selecting all pages is allowed.",
-          "type": "number",
-          "default": "0"
-        },
         {
           "name": "selectionSingle",
           "attribute": "selection-single",
@@ -11552,12 +11583,6 @@
           "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
           "type": "number"
         },
-        {
-          "name": "item-count",
-          "description": "Total number of items. Required when selecting all pages is allowed.",
-          "type": "number",
-          "default": "0"
-        },
         {
           "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.",
@@ -11593,13 +11618,6 @@
           "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
           "type": "number"
         },
-        {
-          "name": "itemCount",
-          "attribute": "item-count",
-          "description": "Total number of items. Required when selecting all pages is allowed.",
-          "type": "number",
-          "default": "0"
-        },
         {
           "name": "selectionSingle",
           "attribute": "selection-single",

package/mixins/collection/README.md

@@ -0,0 +1,36 @@
+# CollectionMixin
+
+The `CollectionMixin` describes a collection of items like a list or table. It has one attribute, `item-count`, which optionally defines the total number of items in the collection. This may be greater than the number of items currently displayed, and is useful for actions like select-all and paging.
+
+## 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 -->
+<!-- docs: end best practices -->
+
+## Usage
+
+Apply the mixin and access the `itemCount` property as needed. Note that `itemCount` has a default value of `null` to indicate that no count was specified.
+
+```js
+import { CollectionMixin } from '@brightspace-ui/core/mixins/collection-mixin.js';
+
+class MyComponent extends CollectionMixin(LitElement) {
+  render() {
+	const itemCountToDisplay = this.itemCount !== null ? this.itemCount : 'Unspecified';
+	return html`
+		<p>Total number of items: ${itemCountToDisplay}</p>
+		<slot></slot>
+	`;
+  }
+}
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `item-count` | Number | Total number of items. Required when selecting all pages is allowed. |
+<!-- docs: end hidden content -->

package/mixins/collection/collection-mixin.js

@@ -0,0 +1,18 @@
+export const CollectionMixin = superclass => class extends superclass {
+
+	static get properties() {
+		return {
+			/**
+			 * Total number of items. If not specified, features like select-all-pages will be disabled.
+			 * @type {number}
+			 */
+			itemCount: { type: Number, attribute: 'item-count', reflect: true },
+		};
+	}
+
+	constructor() {
+		super();
+		this.itemCount = null;
+	}
+
+};

package/package.json

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