@brightspace-ui/core 3.254.2 → 3.256.0

package/components/backdrop/backdrop-loading.js

@@ -3,16 +3,11 @@ import '../loading-spinner/loading-spinner.js';
 import './backdrop-dirty-overlay.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { getComposedChildren, getComposedParent } from '../../helpers/dom.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { getFlag } from '../../helpers/flags.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { offscreenStyles } from '../offscreen/offscreen.js';
 
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-const OffSCREEN_SIZELESS = getFlag('d2l-offscreen-sizeless', true);
-
 const BACKDROP_DELAY_MS = 800;
 const FADE_DURATION_MS = 500;
 const SPINNER_DELAY_MS = FADE_DURATION_MS;
@@ -139,7 +134,7 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 			@media (prefers-reduced-motion: reduce) {
 				* { transition: none; }
 			}
-		`, offscreenStyles];
+		`];
 	}
 
 	constructor() {
@@ -152,18 +147,26 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 	}
 
 	render() {
-		const forcedOffscreenSizelessStyles = OffSCREEN_SIZELESS ? {} : { height: '0px', width: '0px' };
-		const dirtyStateVisible = this._state !== 'hidden' && this.dataState === 'dirty';
+		const backdropVisible = this._state !== 'hidden';
 
 		return html`
-			${this._state === 'hidden' ? nothing :
+			${backdropVisible ?
 					html`<div id="visible">
 						<div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#handleTransitionEnd}"></div>
 						<d2l-loading-spinner style=${styleMap({ top: `${this._spinnerTop}px` })} size="${LOADING_SPINNER_SIZE}"></d2l-loading-spinner>
-					</div>`
+					</div>` : nothing
 			}
-			<div aria-live="polite" class="${classMap({ 'd2l-offscreen': !dirtyStateVisible })}" style="${styleMap(dirtyStateVisible ? {} : forcedOffscreenSizelessStyles)}">
-				${this.dataState === 'dirty' ? this.#renderDirtyOverlay() : this._ariaContent}
+			<div aria-live="polite" id="d2l-live-region">
+				${backdropVisible ?
+					html`<d2l-backdrop-dirty-overlay
+						style=${styleMap({ top: `${this._dirtyDialogTop}px` })}
+						description="${this.dirtyText}"
+						action="${this.dirtyButtonText}"
+						?inert=${this.dataState !== 'dirty'}
+					></d2l-backdrop-dirty-overlay>` : nothing }
+				<d2l-offscreen>
+					${this._ariaContent}
+				</d2l-offscreen>
 			</div>
 		`;
 	}
@@ -257,7 +260,7 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 	#fade() {
 		let hideImmediately = reduceMotion || this._state === 'showing';
 		if (this._state === 'shown') {
-			const currentOpacity = getComputedStyle(this.shadowRoot.querySelector('.backdrop')).opacity;
+			const currentOpacity = getComputedStyle(this.shadowRoot.querySelector('#d2l-live-region')).opacity;
 			hideImmediately ||= (currentOpacity === '0');
 		}
 
@@ -296,14 +299,6 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 		if (containingBlock.dataset.initiallyInert !== '1') containingBlock.removeAttribute('inert');
 	}
 
-	#renderDirtyOverlay() {
-		return html`<d2l-backdrop-dirty-overlay
-			style=${styleMap({ top: `${this._dirtyDialogTop}px` })}
-			description="${this.dirtyText}"
-			action="${this.dirtyButtonText}"
-		></d2l-backdrop-dirty-overlay>`;
-	}
-
 	#setLiveArea(content, { delay } = {}) {
 		this.announcementTimeout = setTimeout(() => this._ariaContent = content, delay || 0);
 	}

package/components/form/docs/form-element-container-mixin.md

@@ -0,0 +1,28 @@
+# FormElementContainerMixin
+
+Extending `FormElementContainerMixin` will allow a custom element's children (native or [custom](./form-element-mixin.md)) to participate in the parent `<d2l-form>`.
+
+## Usage
+
+Simply extend the `FormElementContainerMixin`:
+
+```javascript
+import { FormElementContainerMixin } from '@brightspace-ui/core/form/form-element-container-mixin.js';
+
+class MyCustomFormElementContainer extends FormElementContainerMixin(LitElement) {
+	render() {
+		html`
+			<d2l-input-text
+				label="First Name"
+				name="first-name"
+				required></d2l-input-text>
+			<d2l-input-text
+				label="Last Name"
+				name="last-name"
+				required></d2l-input-text>
+		`;
+	}
+}
+
+customElements.define('my-custom-form-element-container', MyCustomFormElementContainer);
+```

package/components/form/form-element-container-mixin.js

@@ -0,0 +1,8 @@
+/**
+ * When applied to a custom element, form elements within will participate in the form.
+ */
+export const FormElementContainerMixin = superClass => class extends superClass {
+	get isCustomFormElementContainer() {
+		return true;
+	}
+};

package/components/form/form-helper.js

@@ -15,24 +15,34 @@ export const isElement = (node) => node && node.nodeType === Node.ELEMENT_NODE;
 
 export const isCustomElement = (node) => isElement(node) && node.nodeName.indexOf('-') !== -1;
 
-export const isCustomFormElement = (node) => isCustomElement(node) && !!node.formAssociated;
+export const isCustomFormElement = (node) => isCustomElement(node) && Boolean(node.formAssociated);
+
+export const isCustomFormElementContainer = (node) => isCustomElement(node) && Boolean(node.isCustomFormElementContainer);
 
 export const isNativeFormElement = (node) => {
 	if (!isElement(node)) {
 		return false;
 	}
 	const nodeName = node.nodeName.toLowerCase();
-	return !!formElements[nodeName];
+	return Boolean(formElements[nodeName]);
+};
+
+const getElementChildren = (elem) => {
+	if (isCustomFormElementContainer(elem)) {
+		return elem.shadowRoot.children;
+	}
+
+	return elem.tagName === 'SLOT' && ['primary', 'secondary'].includes(elem.name) ? elem.assignedNodes() : elem.children;
 };
 
-const _findFormElementsHelper = (ele, eles, isFormElementPredicate, visitChildrenPredicate) => {
-	if (isNativeFormElement(ele) || isCustomFormElement(ele) || isFormElementPredicate(ele)) {
-		eles.push(ele);
+const _findFormElementsHelper = (elem, elems, isFormElementPredicate, visitChildrenPredicate) => {
+	if (isNativeFormElement(elem) || isCustomFormElement(elem) || isFormElementPredicate(elem)) {
+		elems.push(elem);
 	}
-	if (visitChildrenPredicate(ele)) {
-		const children = ele.tagName === 'SLOT' && ['primary', 'secondary'].includes(ele.name) ? ele.assignedNodes() : ele.children;
+	if (visitChildrenPredicate(elem)) {
+		const children = getElementChildren(elem);
 		for (const child of children) {
-			_findFormElementsHelper(child, eles, isFormElementPredicate, visitChildrenPredicate);
+			_findFormElementsHelper(child, elems, isFormElementPredicate, visitChildrenPredicate);
 		}
 	}
 };

package/components/page/page-header-custom.js

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import '../skip-nav/skip-nav-main.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { getNextFocusable } from '../../helpers/focus.js';
 
 export const isWindows = window.navigator.userAgent.indexOf('Windows') > -1;
@@ -17,6 +18,11 @@ class PageHeaderCustom extends LitElement {
 
 	static get properties() {
 		return {
+			/**
+			 * When set, the bottom slot will be a "d2l-visible-on-ancestor-target"
+			 * @type {boolean}
+			 */
+			bottomIsVisibleOnAncestorTarget: { type: Boolean, attribute: 'bottom-is-visible-on-ancestor-target' },
 			/**
 			 * Whether to render a skip nav link
 			 * @type {boolean}
@@ -132,6 +138,7 @@ class PageHeaderCustom extends LitElement {
 
 	constructor() {
 		super();
+		this.bottomIsVisibleOnAncestorTarget = false;
 		this.hasSkipNav = false;
 		this._hasBottom = false;
 	}
@@ -187,8 +194,12 @@ class PageHeaderCustom extends LitElement {
 	}
 
 	#renderBottom() {
+		const bottomClasses = {
+			bottom: true,
+			'd2l-visible-on-ancestor-target': this.bottomIsVisibleOnAncestorTarget
+		};
 		return html`
-			<div class="bottom" ?hidden="${!this._hasBottom}">
+			<div class="${classMap(bottomClasses)}" ?hidden="${!this._hasBottom}">
 				<div class="max-width">
 					<div class="padding">
 						<slot name="bottom" @slotchange="${this.#handleBottomSlotChange}"></slot>

package/custom-elements.json

@@ -4967,6 +4967,21 @@
         }
       ]
     },
+    {
+      "name": "d2l-custom-form-element-container",
+      "path": "./components/form/demo/custom-form-element-container.js",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[\"inputStyles\",\"inputLabelStyles\"]"
+        },
+        {
+          "name": "isCustomFormElementContainer",
+          "type": "boolean"
+        }
+      ]
+    },
     {
       "name": "d2l-form-demo",
       "path": "./components/form/demo/form-demo.js"
@@ -12444,6 +12459,12 @@
       "path": "./components/page/page-header-custom.js",
       "description": "Generic page header layout component",
       "attributes": [
+        {
+          "name": "bottom-is-visible-on-ancestor-target",
+          "description": "When set, the bottom slot will be a \"d2l-visible-on-ancestor-target\"",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "has-skip-nav",
           "description": "Whether to render a skip nav link",
@@ -12452,6 +12473,13 @@
         }
       ],
       "properties": [
+        {
+          "name": "bottomIsVisibleOnAncestorTarget",
+          "attribute": "bottom-is-visible-on-ancestor-target",
+          "description": "When set, the bottom slot will be a \"d2l-visible-on-ancestor-target\"",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "hasSkipNav",
           "attribute": "has-skip-nav",

package/package.json

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