@brightspace-ui/core 3.227.15 → 3.227.16

package/components/backdrop/backdrop-loading.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import '../loading-spinner/loading-spinner.js';
 import { css, html, LitElement, nothing } from 'lit';
-import { getOffsetParent } from '../../helpers/dom.js';
+import { getComposedChildren, getComposedParent } from '../../helpers/dom.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const BACKDROP_DELAY_MS = 800;
@@ -25,6 +25,11 @@ class LoadingBackdrop extends LitElement {
 			 * @type {boolean}
 			 */
 			shown: { type: Boolean },
+			/**
+			 * Used to identify content that the backdrop should make inert
+			 * @type {boolean}
+			 */
+			for: { type: String },
 			_state: { type: String, reflect: true },
 			_spinnerTop: { state: true }
 		};
@@ -156,6 +161,19 @@ class LoadingBackdrop extends LitElement {
 			this._state = 'hiding';
 		}
 	}
+	#getBackdropTarget() {
+		const parent = getComposedParent(this);
+
+		if (!this.for) { return parent; }
+
+		const targetedChildren = getComposedChildren(
+			parent,
+			(elem) => elem.id === this.for,
+			false
+		);
+
+		return targetedChildren.length === 0 ? parent : targetedChildren[0];
+	}
 	#handleTransitionEnd() {
 		if (this._state === 'hiding') {
 			this.#hide();
@@ -164,14 +182,14 @@ class LoadingBackdrop extends LitElement {
 	#hide() {
 		this._state = 'hidden';
 
-		const containingBlock = getOffsetParent(this);
+		const containingBlock = this.#getBackdropTarget();
 
 		if (containingBlock.dataset.initiallyInert !== '1') containingBlock.removeAttribute('inert');
 	}
 	#show() {
 		this._state = reduceMotion ? 'shown' : 'showing';
 
-		const containingBlock = getOffsetParent(this);
+		const containingBlock = this.#getBackdropTarget();
 
 		if (containingBlock.getAttribute('inert') !== null) containingBlock.dataset.initiallyInert = '1';
 

package/components/collapsible-panel/collapsible-panel-summary-item.js

@@ -29,7 +29,7 @@ class CollapsiblePanelSummaryItem extends SkeletonMixin(LitElement) {
 	static get styles() {
 		return [super.styles, bodySmallStyles, css`
 			:host {
-				color: var(--d2l-color-galena);
+				color: var(--d2l-theme-text-color-static-faint);
 				display: block;
 			}
 			:host([hidden]) {

package/components/collapsible-panel/collapsible-panel.js

@@ -111,7 +111,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(LitElement)) {
 	static get styles() {
 		return [super.styles, heading1Styles, heading2Styles, heading3Styles, heading4Styles, css`
 			:host {
-				--d2l-collapsible-panel-focus-outline: solid 2px var(--d2l-color-celestine);
+				--d2l-collapsible-panel-focus-outline: solid 2px var(--d2l-theme-border-color-focus);
 				--d2l-collapsible-panel-spacing-inline: 0.9rem;
 				--d2l-collapsible-panel-header-spacing: 0.6rem;
 				--d2l-collapsible-panel-transition-time: 0.2s;
@@ -125,16 +125,16 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(LitElement)) {
 				--d2l-collapsible-panel-spacing-inline: 2rem;
 			}
 			.d2l-collapsible-panel {
-				border: 1px solid var(--d2l-color-mica);
+				border: 1px solid var(--d2l-theme-border-color-standard);
 				border-radius: 0.4rem;
 			}
 			:host(:not([expanded]):not([skeleton])) .d2l-collapsible-panel {
 				cursor: pointer;
 			}
 			:host([type="subtle"]) .d2l-collapsible-panel {
-				background-color: white;
+				background-color: var(--d2l-theme-background-color-base);
 				border: none;
-				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
+				box-shadow: var(--d2l-theme-shadow-attached);
 			}
 			:host([type="inline"]) .d2l-collapsible-panel {
 				border-left: none;
@@ -174,7 +174,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(LitElement)) {
 				outline-offset: -2px;
 			}
 			.d2l-collapsible-panel.scrolled .d2l-collapsible-panel-header {
-				background-color: white;
+				background-color: var(--d2l-theme-background-color-base);
 				box-shadow: 0 8px 12px -9px rgba(0, 0, 0, 0.3);
 				position: sticky;
 				top: 0;
@@ -234,7 +234,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(LitElement)) {
 				gap: 0.3rem;
 			}
 			.d2l-collapsible-panel-header-actions::after {
-				border-inline-end: 1px solid var(--d2l-color-mica);
+				border-inline-end: 1px solid var(--d2l-theme-border-color-standard);
 				content: "";
 				display: flex;
 				margin: 0.3rem;
@@ -300,7 +300,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(LitElement)) {
 				/* stylelint-enable */
 			}
 			.d2l-collapsible-panel-divider {
-				border-bottom: 1px solid var(--d2l-color-mica);
+				border-bottom: 1px solid var(--d2l-theme-border-color-standard);
 				margin-inline: var(--d2l-collapsible-panel-spacing-inline);
 				opacity: 1;
 			}

package/components/list/list-item-checkbox-mixin.js

@@ -164,7 +164,6 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 	}
 
 	_renderCheckbox() {
-		/* eslint-disable lit/no-private-properties */
 		return this.selectable ? html`
 			<d2l-selection-input
 				@d2l-selection-change="${this._onCheckboxChange}"
@@ -181,7 +180,6 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 				?skeleton="${this.skeleton}">
 			</d2l-selection-input>
 		` : nothing;
-		/* eslint-enable */
 	}
 
 	_renderCheckboxAction(inner) {

package/components/table/table-wrapper.js

@@ -420,8 +420,10 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 
 	render() {
 		const slot = html`
-			<slot @slotchange="${this._handleSlotChange}"></slot>
-			<d2l-backdrop-loading ?shown=${this.loading}></d2l-backdrop-loading>
+			<div style="position:relative">
+				<slot id="table-slot" @slotchange="${this._handleSlotChange}"></slot>
+				<d2l-backdrop-loading for="table-slot" ?shown=${this.loading}></d2l-backdrop-loading>
+			</div>
 		`;
 		const useScrollWrapper = this.stickyHeadersScrollWrapper || !this.stickyHeaders;
 		return html`

package/custom-elements.json

@@ -191,6 +191,11 @@
       "path": "./components/backdrop/backdrop-loading.js",
       "description": "A component for displaying a semi-transparent backdrop and a loading spinner over the containing element",
       "attributes": [
+        {
+          "name": "for",
+          "description": "Used to identify content that the backdrop should make inert",
+          "type": "boolean"
+        },
         {
           "name": "shown",
           "description": "Used to control whether the loading backdrop is shown",
@@ -199,6 +204,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "for",
+          "attribute": "for",
+          "description": "Used to identify content that the backdrop should make inert",
+          "type": "boolean"
+        },
         {
           "name": "shown",
           "attribute": "shown",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.227.15",
+  "version": "3.227.16",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -57,7 +57,7 @@
     "chalk": "^5",
     "eslint": "^9",
     "eslint-config-brightspace": "^2.0.0",
-    "eslint-plugin-unicorn": "^63",
+    "eslint-plugin-unicorn": "^64",
     "glob-all": "^3",
     "messageformat-validator": "^3.0.0-beta",
     "rollup": "^4",