@brightspace-ui/core 2.105.0 → 2.107.0

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

@@ -8864,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",
@@ -8910,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",
@@ -10059,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.",
@@ -10066,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",
@@ -10087,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",
@@ -10114,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",
@@ -10194,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.",
@@ -10214,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",
@@ -10843,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.",
@@ -10863,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",
@@ -11371,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.",
@@ -11422,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",
@@ -11594,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.",
@@ -11635,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/mixins/localize/README.md

@@ -1,135 +1,84 @@
-# Localization Mixins
+# LocalizeMixin
 
-The `LocalizeMixin` and `LocalizeStaticMixin` allow you to localize text in your components and have it displayed to the user in their preferred language.
-
-## Providing Resources
-
-Your component must provide resources by either implementing a `resources` getter for local resources, or a `localizeConfig` getter to fetch resources asynchronously. The `importFunc` method of `localizeConfig` will be called with lowercase languages in preferential order.
+The `LocalizeMixin` allows text in components to be displayed in the user's preferred language.
 
 ## Language Resources
 
-Resources should be key-value JSON objects, where the keys are lowercase strings and the values are in [ICU Message Syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) format.
+Resources are stored as key-value JSON objects.
 
-The ICU Message Syntax supports some cool features, such as: [simple arguments](https://formatjs.io/docs/core-concepts/icu-syntax/#simple-argument), the [`{select}` format](https://formatjs.io/docs/core-concepts/icu-syntax/#select-format) and [pluralization](https://formatjs.io/docs/core-concepts/icu-syntax/#plural-format).
+### Keys
 
-**Note:** Avoid using the ICU Message Syntax number, date and time formatting functionality. D2L allows our users to customize how these are localized, so use [@brightspace-ui/intl](https://github.com/BrightspaceUI/intl)'s `formatNumber`, `formatDate` and `formatTime` instead.
-
-Example:
+The key should succinctly and uniquely describe the text being localized. `camelCase` is recommended, although `snake_case` and `kebab-case` are also supported.
 
-```javascript
-{
-  "hello": "Hello {firstName}!",
-  "goodbye": "Goodbye."
-}
-```
+For large projects, terms may be grouped using the `:` character. For example: `parentGroup:subGroup:termName`.
 
-Always provide language resources for base languages (e.g. `en`, `fr`, `pt`, etc.). That way, if the user prefers a regional language (e.g. `pt-br`) that isn't recognized, it can fall back to the base language.
+### Values
 
-### Static vs. Dynamic Resources
+Term values must conform to the [ICU Message Syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) format. It supports features such as: [simple arguments](https://formatjs.io/docs/core-concepts/icu-syntax/#simple-argument), the [`{select}` format](https://formatjs.io/docs/core-concepts/icu-syntax/#select-format) and [pluralization](https://formatjs.io/docs/core-concepts/icu-syntax/#plural-format).
 
-For components with local resources, use the `LocalizeStaticMixin` and implement a `static` `resources` getter that returns the local resources synchronously. To get resources asynchronously, use the `LocalizeMixin` and implement a `static` `localizeConfig` getter that returns details about where to find your resources.
+> **Note:** Avoid using the ICU Message Syntax number, date and time formatting functionality. Brightspace allows customization of how these are localized, so use [@brightspace-ui/intl](https://github.com/BrightspaceUI/intl)'s `formatNumber`, `formatDate` and `formatTime` instead.
 
-#### Example 1: Static Resources
+### Files
 
-If your component has a small number of translations, it may make sense to store them locally within the component in a constant.
+Store localization resources in their own directory with nothing else in it. There should be one JavaScript file for each supported locale.
 
 ```javascript
-import { LocalizeStaticMixin } from '@brightspace-ui/core/mixins/localize/localize-mixin.js';
-
-class MyComponent extends LocalizeStaticMixin(LitElement) {
-
-  static get resources() {
-    return {
-      'en': {
-        hello: 'Hello {firstName}!'
-      },
-      'fr': {
-        hello: 'Bonjour {firstName}!'
-      },
-      ...
-    };
-  }
-
-}
+// en.js
+export default {
+  "hello": "Hello {firstName}!"
+};
 ```
-#### Example 2: Dynamically Imported Resources
-
-This approach is better for components with many language resources. By importing them dynamically, only the resources for the requested language are actually fetched and downloaded.
-
-Store your resources in individual files, one for each language:
 ```javascript
-// en.js
+// fr.js
 export default {
-  'hello': 'Hello {firstName}!'
+  "hello": "Bonjour {firstName}!"
 };
 ```
 
-**Note:** To avoid accidental imports and errors, your resource files should have a dedicated directory with nothing else in it.
+Always provide language resources for base languages (e.g. `en`, `fr`, `pt`). That way, if the user prefers a regional language (e.g. `pt-br`) that isn't recognized, it can fall back to the base language (`pt`).
+
+## Using `LocalizeMixin`
+
+The component should import and extend `LocalizeMixin`:
 
-Then create your `localizeConfig` getter:
 ```javascript
 import { LocalizeMixin } from '@brightspace-ui/core/mixins/localize/localize-mixin.js';
 
 class MyComponent extends LocalizeMixin(LitElement) {
 
-  static get localizeConfig() {
-    return {
-       // Import path must be relative
-      importFunc: async lang => (await import(`../lang/${lang}.js`)).default,
-      // Optionally enable OSLO
-      osloCollection: '@d2l\\my-project\\myComponent',
-    };
-  }
 }
 ```
-Occasionally, it may be desirable to localize based on the user's browser settings. To do this, add `useBrowserLangs: true` to your `localizeConfig` object. This option should only be used if *all* supported *locales* have corresponding files named with their 4-character locale code, and all supported *languages*, in addition, have 2-character files. (e.g. `en-us.js`, `en-ca.js` and `en.js`)
 
-If your build system does not support variable dynamic imports, you'll need to manually set up imports for each supported language:
+Implement a static getter for `localizeConfig` that defines `importFunc()`. It will be passed a language which can subsequently be dynamically imported from the location of the component's resources.
+
+The dynamic import path must be relative.
 
 ```javascript
 static get localizeConfig() {
   return {
-    importFunc: async lang => {
-      switch (lang) {
-        case 'en':
-          return (await import('./locales/en.js')).default;
-        case 'fr':
-          return (await import('./locales/fr.js')).default;
-        ...
-      }
-    }
+    importFunc: async lang => (await import(`../lang/${lang}.js`)).default,
   };
 }
 ```
 
-**Note:** If using `LocalizeCoreElement` or a mixin that utilizes `LocalizeCoreElement` as well as `LocalizeMixin` or a mixin that uses `LocalizeMixin`, `LocalizeMixin` **must** appear before `LocalizeCoreElement` in the chain. For example:
-
-```javascript
-import { LocalizeCoreElement } from '@brightspace-ui/core/helpers/localize-core-element.js';
-import { LocalizeMixin } from '@brightspace-ui/core/mixins/localize/localize-mixin.js';
-
-class MyComponent extends LocalizeMixin(LocalizeCoreElement(LitElement)) {
-  ...
-}
-```
-
-## `localize()`
+### `localize()`
 
-Once your localization resources are available, the `localize()` method is used to localize a piece of text in your `render()` method.
+The `localize()` method is used to localize a piece of text in the component's `render()` method.
 
-If your localized string contains arguments, pass them as a key-value object as the 2nd parameter:
+If the localized string contains arguments, pass them as a key-value object as the 2nd parameter:
 
 ```javascript
 render() {
-  return html`<p>${this.localize('hello', { firstName: 'Mary' })}</p>`;
+  const message = this.localize('hello', { firstName: 'Mary' });
+  return html`<p>${message}</p>`;
 }
 ```
 
-## `localizeHTML()`
+### `localizeHTML()`
 
 Rich formatting can be included in localization resources and safely converted to HTML with the `localizeHTML()` method.
 
-### Basic Formatting
+#### Basic Formatting
 
 The following formatting elements are supported out-of-the-box:
 
@@ -144,7 +93,19 @@ Remember that `<strong>` is for content of greater importance (browsers show thi
 
 Similarly `<em>` *emphasizes* a particular piece of text (browsers show this visually using italics), whereas `<i>` only italicizes the text visually without emphasis.
 
-### Links
+Example:
+
+```json
+{
+  "myTerm": "This is <b>bold</b> but <em>not</em> all that <strong>important</strong>."
+}
+```
+
+```javascript
+this.localizeHTML('myTerm');
+```
+
+#### Links
 
 To wrap text in [a link](../../components/link/), define a unique tag in the localization resource:
 
@@ -164,7 +125,7 @@ this.localizeHTML('myTerm', {
 });
 ```
 
-### Help Tooltips
+#### Help Tooltips
 
 To use a [help tooltip](../../components/tooltip/), define a unique tag in the localization resource in addition to the tooltip's text:
 
@@ -175,7 +136,7 @@ To use a [help tooltip](../../components/tooltip/), define a unique tag in the l
 }
 ```
 
-Then import `generateTooltipHelp` and pass it the tooltip term value:
+Then import `generateTooltipHelp` and pass it the tooltip contents value:
 
 ```javascript
 import { generateTooltipHelp } from '@brightspace-ui/core/mixins/localize/localize-mixin.js';
@@ -184,3 +145,38 @@ this.localizeHTML('octopus', {
   tooltip: generateTooltipHelp({ contents: this.localize('cephalopodTooltip') })
 });
 ```
+
+## Off-Stack Language Overrides
+
+To enable OSLO, map the project's localization resources to a language collection in Brightspace by defining `osloCollection` in `localizeConfig`:
+
+```javascript
+static get localizeConfig() {
+  return {
+    osloCollection: '@d2l\\my-project\\myComponent',
+  };
+}
+```
+
+> **Important:** When defining language resource keys, avoid using the Full Stop (`.`) character for grouping. OSLO does not support it.
+
+## Advanced
+
+### Chaining `LocalizeMixin`
+
+If combining `LocalizeMixin` with `LocalizeCoreElement` (or a mixin that uses `LocalizeCoreElement`), `LocalizeMixin` **must** appear before `LocalizeCoreElement` in the chain.
+
+```javascript
+import { LocalizeCoreElement } from '@brightspace-ui/core/helpers/localize-core-element.js';
+import { LocalizeMixin } from '@brightspace-ui/core/mixins/localize/localize-mixin.js';
+
+class MyComponent extends LocalizeMixin(LocalizeCoreElement(LitElement)) {
+  ...
+}
+```
+
+### Ignoring the Brightspace Language
+
+Occasionally, it may be desirable to localize based on the browser's language instead of the language in Brightspace.
+
+To do this, define `useBrowserLangs` as `true` in `localizeConfig`. This option should only be used if all supported locales have corresponding files named with their 4-character and 2-character locale codes (e.g. `en-us.js`, `en-ca.js` and `en.js`).

package/mixins/localize/localize-mixin.js

@@ -230,31 +230,6 @@ export const LocalizeMixin = superclass => class extends _LocalizeMixinBase(supe
 
 };
 
-export const LocalizeStaticMixin = superclass => class extends _LocalizeMixinBase(superclass) {
-
-	static async getLocalizeResources(langs) {
-		let resolvedLang = fallbackLang;
-		const resolvedResources = Object.assign({}, this.resources[fallbackLang]);
-
-		langs.reverse().forEach((lang) => {
-			if (this.resources[lang]) {
-				resolvedLang = lang;
-				Object.assign(resolvedResources, this.resources[lang]);
-			}
-		});
-
-		return {
-			language: resolvedLang,
-			resources: resolvedResources
-		};
-	}
-
-	static get resources() {
-		return { 'en': {} };
-	}
-
-};
-
 export const allowedTags = Object.freeze(['d2l-link', 'd2l-tooltip-help', 'p', 'br', 'b', 'strong', 'i', 'em']);
 
 const markupError = `localizeHTML() rich-text replacements must use localizeMarkup templates with only the following allowed elements: ${allowedTags}. For more information, see: https://github.com/BrightspaceUI/core/blob/main/mixins/localize/`;

package/package.json

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