@brightspace-ui/core 3.279.1 → 3.280.1

package/components/backdrop/backdrop-loading.js

@@ -34,6 +34,10 @@ class BackdropLoading extends PropertyRequiredMixin(FreshnessMixin(LocalizeCoreE
 	};
 
 	static styles = [css`
+
+		:host {
+			position: absolute;
+		}
 		.backdrop-container {
 			display: none;
 		}
@@ -158,7 +162,7 @@ class BackdropLoading extends PropertyRequiredMixin(FreshnessMixin(LocalizeCoreE
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
 
-		if (changedProperties.has('freshness') && changedProperties.get('freshness') !== undefined) {
+		if (changedProperties.has('freshness')) {
 			this.#clearLiveRegionContent();
 
 			const oldState = changedProperties.get('freshness');
@@ -170,9 +174,9 @@ class BackdropLoading extends PropertyRequiredMixin(FreshnessMixin(LocalizeCoreE
 				this.#setLiveRegionContent(this.localize('components.backdrop-loading.loadingCompleteAnnouncement'));
 			}
 
-			if (oldState === freshness.fresh) {
+			if (oldState === freshness.fresh || (oldState === undefined && this.freshness !== freshness.fresh)) {
 				this.#show();
-			} else if (newState === freshness.fresh) {
+			} else if (oldState !== undefined && newState === freshness.fresh) {
 				this.#fade();
 			} else if (oldState === freshness.loading && newState === freshness.stale) {
 				setTimeout(() => {

package/components/list/list.js

@@ -1,4 +1,6 @@
+import '../backdrop/backdrop-loading.js';
 import { css, html, LitElement } from 'lit';
+import { freshness, FreshnessMixin } from '../../mixins/freshness/freshness-mixin.js';
 import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { SelectionInfo, SelectionMixin } from '../selection/selection-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -10,6 +12,7 @@ const keyCodes = {
 };
 
 export const listSelectionStates = SelectionInfo.states;
+export const listFreshness = freshness;
 
 export const listLayouts = Object.freeze({
 	list: 'list',
@@ -33,7 +36,7 @@ const ro = new ResizeObserver(entries => {
  * @slot pager - Slot for `d2l-pager-load-more` to be rendered below the list
  * @fires d2l-list-items-move - Dispatched when one or more items are moved. See [Event Details: d2l-list-items-move](#event-details%3A-%40d2l-list-items-move).
  */
-class List extends PageableMixin(SelectionMixin(LitElement)) {
+class List extends FreshnessMixin(PageableMixin(SelectionMixin(LitElement))) {
 
 	static properties = {
 		/**
@@ -111,13 +114,13 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 			--d2l-list-item-illustration-max-width: 4.5rem;
 			display: block;
 		}
-		:host([layout="tiles"]) > .d2l-list-content {
+		:host([layout="tiles"]) > div > .d2l-list-content {
 			display: flex;
 			flex-wrap: wrap;
 			gap: 0.9rem;
 			justify-content: normal;
 		}
-		:host(:not([slot="nested"])) > .d2l-list-content {
+		:host(:not([slot="nested"])) > div > .d2l-list-content {
 			padding-bottom: 1px;
 		}
 		:host([hidden]) {
@@ -150,6 +153,17 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 			margin-bottom: calc(6px + 0.4rem); /* controls section margin-bottom + spacing for add-button */
 		}
 
+		.backdrop-loading-container {
+			position: relative;
+		}
+		d2l-backdrop-loading {
+			margin: -12px; /* must match outside-control-container */
+		}
+		:host([extend-separators]) d2l-backdrop-loading,
+		:host([layout="tiles"]) d2l-backdrop-loading {
+			margin: 0; /* must match outside-control-container */
+		}
+
 		::slotted(.d2l-list-tile-break) {
 			display: none;
 		}
@@ -246,12 +260,22 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		return html`
 			<slot name="controls"></slot>
 			<slot name="header"></slot>
-			<div role="${role}" aria-label="${ifDefined(ariaLabel)}" class="d2l-list-content">
-				<slot @keydown="${this._handleKeyDown}" @slotchange="${this._handleSlotChange}"></slot>
+			<div class="backdrop-loading-container">
+				<div id="list-content" role="${role}" aria-label="${ifDefined(ariaLabel)}" class="d2l-list-content">
+					<slot @keydown="${this._handleKeyDown}" @slotchange="${this._handleSlotChange}"></slot>
+				</div>
+				<d2l-backdrop-loading
+					@d2l-backdrop-stale-overlay-action="${this._handleBackdropStaleOverlayAction}"
+					for="list-content"
+					freshness="${this.freshness}"
+					freshness-stale-button-text="${this.freshnessStaleButtonText}"
+					freshness-stale-text="${this.freshnessStaleText}">
+				</d2l-backdrop-loading>
+				${this._renderPagerContainer()}
 			</div>
-			${this._renderPagerContainer()}
 		`;
 	}
+
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
 		if (changedProperties.has('breakpoints') && changedProperties.get('breakpoints') !== undefined) {
@@ -377,6 +401,11 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		return items.length > 0 ? items[0]._getFlattenedListItems().lazyLoadListItems : new Map();
 	}
 
+	_handleBackdropStaleOverlayAction() {
+		/** Dispatched when the action button on the stale overlay is clicked */
+		this.dispatchEvent(new CustomEvent('d2l-list-stale-button-click'));
+	}
+
 	_handleKeyDown(e) {
 		if (!this.grid || this.slot === 'nested' || e.keyCode !== keyCodes.TAB) return;
 		e.preventDefault();

package/components/page/page.js

@@ -215,6 +215,9 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			.supporting-panel.animate .supporting-panel-content {
 				transition: width 400ms cubic-bezier(0, 0.7, 0.5, 1);
 			}
+			.divider.animate {
+				transition: margin 400ms cubic-bezier(0, 0.7, 0.5, 1);
+			}
 			.side-nav-panel.animate.collapsed,
 			.supporting-panel.animate.collapsed {
 				transition: width 400ms cubic-bezier(0, 0.7, 0.5, 1), visibility 0s 400ms;
@@ -376,9 +379,13 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 	}
 
 	#renderDivider(panelKey, label, panelPosition) {
+		const classes = {
+			'divider': true,
+			'animate': this._panelState.getAnimate(panelKey)
+		};
 		return html`
 			<d2l-page-divider-internal
-				class="divider"
+				class="${classMap(classes)}"
 				data-panel-key="${panelKey}"
 				label="${label}"
 				?collapsed="${this._panelState.getCollapsed(panelKey)}"

package/components/selection/selection-mixin.js

@@ -1,5 +1,6 @@
 import { getFirstFocusableDescendant, getLastFocusableDescendant, getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { CollectionMixin } from '../../mixins/collection/collection-mixin.js';
+import { freshness } from '../../mixins/freshness/freshness-mixin.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
 
 const keyCodes = {
@@ -95,6 +96,14 @@ export const SelectionMixin = superclass => class extends CollectionMixin(superc
 		this.removeEventListener('d2l-selection-input-subscribe', this._handleSelectionInputSubscribe);
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+
+		if (changedProperties.has('freshness')) {
+			this._updateSelectionObservers();
+		}
+	}
+
 	getSelectionInfo() {
 		let allEnabledSelected = true;
 		let state = (this._selectionSelectables.size > 0 ? SelectionInfo.states.none : SelectionInfo.states.notSet);
@@ -254,7 +263,10 @@ export const SelectionMixin = superclass => class extends CollectionMixin(superc
 		this._updateObserversRequested = true;
 		setTimeout(() => {
 			const info = this.getSelectionInfo(true);
-			this._selectionObservers.forEach(observer => observer.selectionInfo = info);
+			this._selectionObservers.forEach(observer => {
+				observer.selectionInfo = info;
+				observer.selectionDisabled = (this.freshness === freshness.stale || this.freshness === freshness.loading);
+			});
 			this._updateObserversRequested = false;
 		}, 0);
 	}

package/components/selection/selection-observer-mixin.js

@@ -4,6 +4,12 @@ import { SelectionInfo } from './selection-mixin.js';
 export const SelectionObserverMixin = superclass => class extends superclass {
 
 	static properties = {
+		/**
+		 * Whether selection is disabled (set by the selection component)
+		 * @ignore
+		 * @type {boolean}
+		 */
+		selectionDisabled: { type: Boolean, reflect: true, attribute: 'selection-disabled' },
 		/**
 		 * Id of the `SelectionMixin` component this component wants to observe (if not located within that component)
 		 * @type {string}
@@ -20,6 +26,7 @@ export const SelectionObserverMixin = superclass => class extends superclass {
 
 	constructor() {
 		super();
+		this.selectionDisabled = false;
 		this.selectionInfo = new SelectionInfo();
 		this._provider = null;
 	}

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

@@ -34,6 +34,7 @@ class SelectAllPages extends FocusMixin(LocalizeCoreElement(SelectionObserverMix
 		return html`
 			<d2l-button-subtle
 				@click="${this._handleClick}"
+				?disabled="${this.selectionDisabled}"
 				text="${this.localize('components.selection.select-all-items', { count: this._provider.itemCount, countFormatted: formatNumber(this._provider.itemCount) })}">
 			</d2l-button-subtle>`;
 	}

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

@@ -51,7 +51,7 @@ class SelectAll extends FocusMixin(LocalizeCoreElement(SelectionObserverMixin(Li
 				label-hidden
 				@change="${this.#handleCheckboxChange}"
 				?checked="${this.#getIsChecked()}"
-				?disabled="${this.disabled}"
+				?disabled="${this.disabled || this.selectionDisabled }"
 				description="${ifDefined(this.selectionInfo.state !== SelectionInfo.states.none ? summary : undefined)}"
 				?indeterminate="${this.#getIsIndeterminate()}">
 			</d2l-input-checkbox>

package/custom-elements.json

@@ -9997,6 +9997,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }
@@ -11383,6 +11388,22 @@
           "type": "'list'|'tiles'",
           "default": "\"\\\"list\\\"\""
         },
+        {
+          "name": "freshness-stale-button-text",
+          "description": "The button text in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshness-stale-text",
+          "description": "The text message in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshness",
+          "description": "The freshness of the component data",
+          "type": "'fresh'|'stale'|'loading'",
+          "default": "\"\\\"fresh\\\"\""
+        },
         {
           "name": "item-count",
           "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
@@ -11435,7 +11456,7 @@
         },
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-list-item-color-border-radius: 6px;\\n\\t\\t\\t--d2l-list-item-color-width: 6px;\\n\\t\\t\\t--d2l-list-item-illustration-margin-inline-end: 0.9rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 2.6rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 4.5rem;\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t\\t:host([layout=\\\"tiles\\\"]) > .d2l-list-content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-wrap: wrap;\\n\\t\\t\\tgap: 0.9rem;\\n\\t\\t\\tjustify-content: normal;\\n\\t\\t}\\n\\t\\t:host(:not([slot=\\\"nested\\\"])) > .d2l-list-content {\\n\\t\\t\\tpadding-bottom: 1px;\\n\\t\\t}\\n\\t\\t:host([hidden]) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\tslot[name=\\\"pager\\\"]::slotted(*) {\\n\\t\\t\\tmargin-top: 10px;\\n\\t\\t}\\n\\t\\t:host([extend-separators]) slot[name=\\\"pager\\\"]::slotted(*) {\\n\\t\\t\\tmargin-left: 0.9rem;\\n\\t\\t\\tmargin-right: 0.9rem;\\n\\t\\t}\\n\\t\\t:host([_breakpoint=\\\"1\\\"]) {\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 3.55rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 6rem;\\n\\t\\t}\\n\\t\\t:host([_breakpoint=\\\"2\\\"]) {\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 5.1rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 9rem;\\n\\t\\t}\\n\\t\\t:host([_breakpoint=\\\"3\\\"]) {\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 6rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 10.8rem;\\n\\t\\t}\\n\\t\\t:host([_slim-color]) {\\n\\t\\t\\t--d2l-list-item-color-border-radius: 3px;\\n\\t\\t\\t--d2l-list-item-color-width: 3px;\\n\\t\\t}\\n\\t\\t:host([add-button]) ::slotted([slot=\\\"controls\\\"]) {\\n\\t\\t\\tmargin-bottom: calc(6px + 0.4rem); /* controls section margin-bottom + spacing for add-button */\\n\\t\\t}\\n\\n\\t\\t::slotted(.d2l-list-tile-break) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t:host([layout=\\\"tiles\\\"]) ::slotted(.d2l-list-tile-break) {\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\tflex-basis: 100%;\\n\\t\\t\\theight: 0;\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-list-item-color-border-radius: 6px;\\n\\t\\t\\t--d2l-list-item-color-width: 6px;\\n\\t\\t\\t--d2l-list-item-illustration-margin-inline-end: 0.9rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 2.6rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 4.5rem;\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t\\t:host([layout=\\\"tiles\\\"]) > div > .d2l-list-content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-wrap: wrap;\\n\\t\\t\\tgap: 0.9rem;\\n\\t\\t\\tjustify-content: normal;\\n\\t\\t}\\n\\t\\t:host(:not([slot=\\\"nested\\\"])) > div > .d2l-list-content {\\n\\t\\t\\tpadding-bottom: 1px;\\n\\t\\t}\\n\\t\\t:host([hidden]) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\tslot[name=\\\"pager\\\"]::slotted(*) {\\n\\t\\t\\tmargin-top: 10px;\\n\\t\\t}\\n\\t\\t:host([extend-separators]) slot[name=\\\"pager\\\"]::slotted(*) {\\n\\t\\t\\tmargin-left: 0.9rem;\\n\\t\\t\\tmargin-right: 0.9rem;\\n\\t\\t}\\n\\t\\t:host([_breakpoint=\\\"1\\\"]) {\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 3.55rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 6rem;\\n\\t\\t}\\n\\t\\t:host([_breakpoint=\\\"2\\\"]) {\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 5.1rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 9rem;\\n\\t\\t}\\n\\t\\t:host([_breakpoint=\\\"3\\\"]) {\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 6rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 10.8rem;\\n\\t\\t}\\n\\t\\t:host([_slim-color]) {\\n\\t\\t\\t--d2l-list-item-color-border-radius: 3px;\\n\\t\\t\\t--d2l-list-item-color-width: 3px;\\n\\t\\t}\\n\\t\\t:host([add-button]) ::slotted([slot=\\\"controls\\\"]) {\\n\\t\\t\\tmargin-bottom: calc(6px + 0.4rem); /* controls section margin-bottom + spacing for add-button */\\n\\t\\t}\\n\\n\\t\\t.backdrop-loading-container {\\n\\t\\t\\tposition: relative;\\n\\t\\t}\\n\\t\\td2l-backdrop-loading {\\n\\t\\t\\tmargin: -12px; /* must match outside-control-container */\\n\\t\\t}\\n\\t\\t:host([extend-separators]) d2l-backdrop-loading,\\n\\t\\t:host([layout=\\\"tiles\\\"]) d2l-backdrop-loading {\\n\\t\\t\\tmargin: 0; /* must match outside-control-container */\\n\\t\\t}\\n\\n\\t\\t::slotted(.d2l-list-tile-break) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t:host([layout=\\\"tiles\\\"]) ::slotted(.d2l-list-tile-break) {\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\tflex-basis: 100%;\\n\\t\\t\\theight: 0;\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "addButton",
@@ -11479,6 +11500,25 @@
           "type": "'list'|'tiles'",
           "default": "\"\\\"list\\\"\""
         },
+        {
+          "name": "freshnessStaleButtonText",
+          "attribute": "freshness-stale-button-text",
+          "description": "The button text in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshnessStaleText",
+          "attribute": "freshness-stale-text",
+          "description": "The text message in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshness",
+          "attribute": "freshness",
+          "description": "The freshness of the component data",
+          "type": "'fresh'|'stale'|'loading'",
+          "default": "\"\\\"fresh\\\"\""
+        },
         {
           "name": "itemCount",
           "attribute": "item-count",
@@ -11511,6 +11551,10 @@
           "name": "d2l-list-selection-change",
           "description": "Dispatched when the selection state changes"
         },
+        {
+          "name": "d2l-list-stale-button-click",
+          "description": "Dispatched when the action button on the stale overlay is clicked"
+        },
         {
           "name": "d2l-list-add-button-click",
           "description": "Dispatched when the add button directly before or after the item is clicked. Event detail includes position ('before' or 'after') and key.\nThe `key` belongs to the list item adjacent to where the new item should be positioned.\nThe `position` represents where the new item should be positioned relative to the item with that key."
@@ -13540,7 +13584,7 @@
       "properties": [
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 16; /* To be over sticky content of our core components and the divider */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\t\\t.side-nav-panel-content {\\n\\t\\t\\tfloat: inline-end;\\n\\t\\t}\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers */\\n\\t\\t}\\n\\n\\t\\t.side-nav .divider[collapsed] {\\n\\t\\t\\tmargin-inline-start: 18px;\\n\\t\\t}\\n\\t\\t.supporting .divider[collapsed] {\\n\\t\\t\\tmargin-inline-end: 18px;\\n\\t\\t}\\n\\t\\t.side-nav-panel.collapsed,\\n\\t\\t.supporting-panel.collapsed {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t@media (prefers-reduced-motion: no-preference) {\\n\\t\\t\\t.side-nav-panel.animate,\\n\\t\\t\\t.supporting-panel.animate,\\n\\t\\t\\t.side-nav-panel.animate .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate .supporting-panel-content {\\n\\t\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel.animate.collapsed,\\n\\t\\t\\t.supporting-panel.animate.collapsed {\\n\\t\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1), visibility 0s 400ms;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components and divider */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 16; /* To be over sticky content of our core components and the divider */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\t\\t.side-nav-panel-content {\\n\\t\\t\\tfloat: inline-end;\\n\\t\\t}\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers */\\n\\t\\t}\\n\\n\\t\\t.side-nav .divider[collapsed] {\\n\\t\\t\\tmargin-inline-start: 18px;\\n\\t\\t}\\n\\t\\t.supporting .divider[collapsed] {\\n\\t\\t\\tmargin-inline-end: 18px;\\n\\t\\t}\\n\\t\\t.side-nav-panel.collapsed,\\n\\t\\t.supporting-panel.collapsed {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t@media (prefers-reduced-motion: no-preference) {\\n\\t\\t\\t.side-nav-panel.animate,\\n\\t\\t\\t.supporting-panel.animate,\\n\\t\\t\\t.side-nav-panel.animate .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate .supporting-panel-content {\\n\\t\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.divider.animate {\\n\\t\\t\\t\\ttransition: margin 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel.animate.collapsed,\\n\\t\\t\\t.supporting-panel.animate.collapsed {\\n\\t\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1), visibility 0s 400ms;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components and divider */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "widthType",
@@ -14209,6 +14253,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         },
@@ -14332,6 +14381,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         },
@@ -14473,6 +14527,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         },
@@ -14594,6 +14653,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }
@@ -14744,6 +14808,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }
@@ -14790,6 +14859,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }
@@ -14835,6 +14909,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }
@@ -14850,6 +14929,22 @@
       "name": "d2l-test-selection",
       "path": "./components/selection/test/selection-component.js",
       "attributes": [
+        {
+          "name": "freshness-stale-button-text",
+          "description": "The button text in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshness-stale-text",
+          "description": "The text message in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshness",
+          "description": "The freshness of the component data",
+          "type": "'fresh'|'stale'|'loading'",
+          "default": "\"\\\"fresh\\\"\""
+        },
         {
           "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.",
@@ -14858,6 +14953,25 @@
         }
       ],
       "properties": [
+        {
+          "name": "freshnessStaleButtonText",
+          "attribute": "freshness-stale-button-text",
+          "description": "The button text in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshnessStaleText",
+          "attribute": "freshness-stale-text",
+          "description": "The text message in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshness",
+          "attribute": "freshness",
+          "description": "The freshness of the component data",
+          "type": "'fresh'|'stale'|'loading'",
+          "default": "\"\\\"fresh\\\"\""
+        },
         {
           "name": "selectionNoInputArrowKeyBehaviour",
           "type": "boolean",
@@ -14893,6 +15007,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }
@@ -14920,6 +15039,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }
@@ -16167,6 +16291,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }

package/helpers/dom.js

@@ -84,7 +84,7 @@ export function getComposedChildren(node, predicate = () => true) {
 	if (!node) {
 		return null;
 	}
-	if (node.nodeType !== 1 && node.nodeType !== 9 && node.nodeType !== 11) {
+	if (node.nodeType !== Node.ELEMENT_NODE && node.nodeType !== Node.DOCUMENT_NODE && node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
 		return null;
 	}
 
@@ -94,6 +94,7 @@ export function getComposedChildren(node, predicate = () => true) {
 	if (node.tagName === 'CONTENT') {
 		nodes = node.getDistributedNodes();
 	} else if (node.tagName === 'SLOT') {
+		// note: this is not handling default slot content
 		nodes = node.assignedNodes({ flatten: true });
 	} else {
 		if (node.shadowRoot) {
@@ -103,7 +104,7 @@ export function getComposedChildren(node, predicate = () => true) {
 	}
 
 	for (let i = 0; i < nodes.length; i++) {
-		if (nodes[i].nodeType === 1) {
+		if (nodes[i].nodeType === Node.ELEMENT_NODE) {
 			if (predicate(nodes[i])) {
 				children.push(nodes[i]);
 			}
@@ -243,7 +244,7 @@ export function getFirstVisibleAncestor(node) {
 
 export function querySelectorComposed(node, selector) {
 
-	if (!node || (node.nodeType !== 1 && node.nodeType !== 9 && node.nodeType !== 11)) {
+	if (!node || (node.nodeType !== Node.ELEMENT_NODE && node.nodeType !== Node.DOCUMENT_NODE && node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE)) {
 		throw new TypeError('Invalid node. Must be nodeType document, element or document fragment');
 	}
 	if (typeof selector !== 'string') {

package/helpers/focus.js

@@ -210,7 +210,7 @@ export function getPreviousFocusableAncestor(node, includeHidden, includeTabbabl
 
 export function isFocusable(node, includeHidden, includeTabbablesOnly, includeDisabled) {
 
-	if (!node || node.nodeType !== 1 || (!includeDisabled && node.disabled)) return false;
+	if (!node || node.nodeType !== Node.ELEMENT_NODE || (!includeDisabled && node.disabled)) return false;
 
 	if (includeTabbablesOnly === undefined) includeTabbablesOnly = true;
 

package/package.json

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