@brightspace-ui/core 3.239.0 → 3.240.0

package/components/colors/colors.js

@@ -129,7 +129,12 @@ const lightVariables = new Map([
 	['--d2l-theme-shadow-attached', '0 2px 4px 0 rgba(0, 0, 0, 0.03)'],
 	['--d2l-theme-shadow-attached-block-start', '0 2px 4px 0 rgba(0, 0, 0, 0.03)'],
 	['--d2l-theme-shadow-attached-block-end', '0 -2px 4px 0 rgba(0, 0, 0, 0.03)'],
-	['--d2l-theme-shadow-floating', '0 2px 12px 0 rgba(0, 0, 0, 0.15)'],
+	['--d2l-theme-shadow-floating-offset-x', '0'],
+	['--d2l-theme-shadow-floating-offset-y', '2px'],
+	['--d2l-theme-shadow-floating-blur-radius', '12px'],
+	['--d2l-theme-shadow-floating-spread-radius', '0'],
+	['--d2l-theme-shadow-floating-color', 'rgba(0, 0, 0, 0.15)'],
+	['--d2l-theme-shadow-floating', 'var(--d2l-theme-shadow-floating-offset-x) var(--d2l-theme-shadow-floating-offset-y) var(--d2l-theme-shadow-floating-blur-radius) var(--d2l-theme-shadow-floating-spread-radius) var(--d2l-theme-shadow-floating-color)'],
 	['--d2l-theme-shadow-inset-offset-x', '0'],
 	['--d2l-theme-shadow-inset-offset-y', '2px'],
 	['--d2l-theme-shadow-inset-blur-radius', '0'],
@@ -204,7 +209,12 @@ const darkVariables = new Map([
 	['--d2l-theme-shadow-attached', '0 2px 4px 0 rgba(0, 0, 0, 0.85)'],
 	['--d2l-theme-shadow-attached-block-start', '0 2px 4px 0 rgba(0, 0, 0, 0.85)'],
 	['--d2l-theme-shadow-attached-block-end', '0 -2px 4px 0 rgba(0, 0, 0, 0.85)'],
-	['--d2l-theme-shadow-floating', '0 2px 12px 0 rgba(0, 0, 0, 0.85)'],
+	['--d2l-theme-shadow-floating-offset-x', '0'],
+	['--d2l-theme-shadow-floating-offset-y', '2px'],
+	['--d2l-theme-shadow-floating-blur-radius', '12px'],
+	['--d2l-theme-shadow-floating-spread-radius', '0'],
+	['--d2l-theme-shadow-floating-color', 'rgba(0, 0, 0, 0.85)'],
+	['--d2l-theme-shadow-floating', 'var(--d2l-theme-shadow-floating-offset-x) var(--d2l-theme-shadow-floating-offset-y) var(--d2l-theme-shadow-floating-blur-radius) var(--d2l-theme-shadow-floating-spread-radius) var(--d2l-theme-shadow-floating-color)'],
 	['--d2l-theme-shadow-inset-offset-x', '0'],
 	['--d2l-theme-shadow-inset-offset-y', '2px'],
 	['--d2l-theme-shadow-inset-blur-radius', '0'],

package/components/dialog/dialog-confirm.js

@@ -2,6 +2,8 @@ import { _generateResetStyles, heading3Styles } from '../typography/styles.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
+import { getFlag } from '../../helpers/flags.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -35,11 +37,25 @@ class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 				max-width: 420px;
 			}
 
-			.d2l-dialog-content > div {
+			.d2l-dialog-header > h2 {
+				margin: 0;
+				width: fit-content;
+			}
+
+			${getFocusRingStyles(pseudoClass => `.d2l-dialog-content:${pseudoClass} > div`, { extraStyles: css`
+
+				--d2l-focus-ring-offset: -1px; border-radius: 6px;`
+			})}
+			.d2l-dialog-content:focus,
+			.d2l-dialog-content:focus-visible {
+				outline: none;
+			}
+
+			.d2l-dialog-content {
 				padding-top: 30px;
 			}
 
-			.d2l-dialog-header + .d2l-dialog-content > div {
+			.d2l-dialog-header + .d2l-dialog-content {
 				padding-top: 0;
 			}
 
@@ -64,7 +80,7 @@ class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 					top: 0;
 				}
 
-				.d2l-dialog-content > div {
+				.d2l-dialog-content {
 					padding-top: 20px;
 				}
 
@@ -76,21 +92,37 @@ class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 	constructor() {
 		super();
 		this.critical = false;
+		this.preferNative = getFlag('GAUD-9644-prefer-native-confirm-dialogs', false);
 		this._criticalLabelId = getUniqueId();
 		this._textId = getUniqueId();
 		this._titleId = getUniqueId();
 	}
 
 	render() {
-		const contentTabIndex = !this.focusableContentElemPresent ? '0' : undefined;
+		let contentTabIndex = undefined;
+		let titleTabIndex = undefined;
+		let contentAutofocus = false;
+		let titleAutofocus = false;
+		if (this._useNative) {
+			if (this.titleText) {
+				titleTabIndex = '-1';
+				titleAutofocus = true;
+			} else {
+				contentTabIndex = '-1';
+				contentAutofocus = true;
+			}
+		} else {
+			contentTabIndex = !this.focusableContentElemPresent ? '0' : undefined;
+		}
+
 		const inner = html`
 			${this.critical ? html`<div id="${this._criticalLabelId}" hidden>${this.localize('components.dialog.critical')}</div>` : nothing}
 			<div class="d2l-dialog-inner">
 				${this.titleText ? html`
 					<div class="d2l-dialog-header">
-						<div><h2 id="${this._titleId}" class="d2l-heading-3">${this.titleText}</h2></div>
+						<h2 id="${this._titleId}" class="d2l-heading-3" tabindex="${ifDefined(titleTabIndex)}" ?autofocus="${titleAutofocus}">${this.titleText}</h2>
 					</div>` : null}
-				<div id="${this._textId}" class="d2l-dialog-content" tabindex="${ifDefined(contentTabIndex)}">
+				<div id="${this._textId}" class="d2l-dialog-content" tabindex="${ifDefined(contentTabIndex)}" ?autofocus="${contentAutofocus}">
 					<div>${this.text ? this.text.split('\n').map(line => html`<p>${line}</p>`) : null}</div>
 				</div>
 				<div class="d2l-dialog-footer">
@@ -113,7 +145,7 @@ class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 	}
 
 	_focusInitial() {
-		if (!this.shadowRoot) return;
+		if (!this.shadowRoot || this._useNative) return;
 		const footer = this.shadowRoot.querySelector('.d2l-dialog-footer-slot');
 		const nodes = footer.assignedNodes();
 		for (let i = 0; i < nodes.length; i++) {

package/components/dialog/dialog-fullscreen.js

@@ -193,6 +193,7 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
 		super();
 		this.async = false;
 		this.noPadding = false;
+		this.preferNative = false;
 		this._autoSize = false;
 		this._hasFooterContent = false;
 		this._icon = 'tier1:close-large-thick';

package/components/dialog/dialog-mixin.js

@@ -19,10 +19,7 @@ window.D2L.DialogMixin = window.D2L.DialogMixin || {};
 // https://bugs.webkit.org/show_bug.cgi?id=233320
 // starting in Chrome 102, all elements inside <dialog>s that are inside shadow roots have null offsetParent
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1331803
-window.D2L.DialogMixin.hasNative = false;
-if (window.D2L.DialogMixin.preferNative === undefined) {
-	window.D2L.DialogMixin.preferNative = true;
-}
+window.D2L.DialogMixin.hasNative = (window.HTMLDialogElement !== undefined);
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const abortAction = 'abort';
@@ -44,6 +41,11 @@ export const DialogMixin = superclass => class extends superclass {
 			 * ADVANCED: Opt out of dialog content scrolling
 			 */
 			noContentScroll: { type: Boolean, attribute: 'no-content-scroll', reflect: true },
+			/**
+			 * @ignore
+			 * Do NOT use this
+			 */
+			preferNative: { type: Boolean, attribute: 'prefer-native' },
 			/**
 			 * The optional title for the dialog
 			 */
@@ -72,6 +74,7 @@ export const DialogMixin = superclass => class extends superclass {
 		this.focusableContentElemPresent = false;
 		this.noContentScroll = false;
 		this.opened = false;
+		this.preferNative = false;
 		this._autoSize = true;
 		this._dialogId = getUniqueId();
 		this._fullscreenWithin = 0;
@@ -91,7 +94,6 @@ export const DialogMixin = superclass => class extends superclass {
 		this._top = 0;
 		this._updateOverflow = this._updateOverflow.bind(this);
 		this._updateSize = this._updateSize.bind(this);
-		this._useNative = (window.D2L.DialogMixin.hasNative && window.D2L.DialogMixin.preferNative);
 		this._width = 0;
 	}
 
@@ -127,6 +129,13 @@ export const DialogMixin = superclass => class extends superclass {
 		}
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (this.#useNativeInitialized) return;
+		this._useNative = (window.D2L.DialogMixin.hasNative && this.preferNative);
+		this.#useNativeInitialized = true;
+	}
+
 	open() {
 		if (this.opened) return;
 		this.opened = true;
@@ -155,6 +164,8 @@ export const DialogMixin = superclass => class extends superclass {
 		await Promise.all(composedChildren.map(child => waitForElem(child, predicate)));
 	}
 
+	#useNativeInitialized = false;
+
 	_addHandlers() {
 		window.addEventListener('resize', this._updateSize);
 		this.addEventListener('touchstart', this._handleTouchStart);
@@ -387,7 +398,7 @@ export const DialogMixin = superclass => class extends superclass {
 		return abortEvent.defaultPrevented;
 	}
 
-	_open() {
+	async _open() {
 		if (!this.opened) return;
 
 		this._opener = getComposedActiveElement();
@@ -411,6 +422,8 @@ export const DialogMixin = superclass => class extends superclass {
 		});
 
 		if (this._useNative) {
+			this._state = 'showing';
+			await this.updateComplete;
 			dialog.showModal();
 		}
 
@@ -432,7 +445,7 @@ export const DialogMixin = superclass => class extends superclass {
 			}, 0);
 
 			await this._updateSize();
-			this._state = 'showing';
+			if (!this._useNative) this._state = 'showing';
 			await this.updateComplete;
 
 			// edge case: no children were focused, try again after one redraw

package/components/dialog/dialog.js

@@ -103,6 +103,7 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 		this.critical = false;
 		this.describeContent = false;
 		this.fullHeight = false;
+		this.preferNative = false;
 		this.width = 600;
 		this._criticalLabelId = getUniqueId();
 		this._handleResize = this._handleResize.bind(this);

package/components/dropdown/dropdown-button.js

@@ -40,7 +40,7 @@ class DropdownButton extends DropdownOpenerMixin(LitElement) {
 				width: 0.8rem;
 			}
 			:host([primary]) d2l-icon {
-				color: white;
+				color: var(--d2l-theme-text-color-static-inverted);
 			}
 			d2l-button {
 				width: 100%;

package/components/popover/popover-mixin.js

@@ -82,11 +82,11 @@ export const PopoverMixin = superclass => class extends superclass {
 		return css`
 			:host {
 				--d2l-popover-default-animation-name: d2l-popover-animation;
-				--d2l-popover-default-background-color: #ffffff;
-				--d2l-popover-default-border-color: var(--d2l-color-mica);
+				--d2l-popover-default-background-color: var(--d2l-theme-background-color-base);
+				--d2l-popover-default-border-color: var(--d2l-theme-border-color-standard);
 				--d2l-popover-default-border-radius: 0.3rem;
-				--d2l-popover-default-foreground-color: var(--d2l-color-ferrite);
-				--d2l-popover-default-shadow-color: rgba(0, 0, 0, 0.15);
+				--d2l-popover-default-foreground-color: var(--d2l-theme-text-color-static-standard);
+				--d2l-popover-default-shadow-color: var(--d2l-theme-shadow-floating-color);
 				background-color: transparent; /* override popover default */
 				border: none; /* override popover */
 				box-sizing: border-box;
@@ -131,7 +131,7 @@ export const PopoverMixin = superclass => class extends superclass {
 				background-color: var(--d2l-popover-background-color, var(--d2l-popover-default-background-color));
 				border: 1px solid var(--d2l-popover-border-color, var(--d2l-popover-default-border-color));
 				border-radius: var(--d2l-popover-border-radius, var(--d2l-popover-default-border-radius));
-				box-shadow: 0 2px 12px 0 var(--d2l-popover-shadow-color, var(--d2l-popover-default-shadow-color));
+				box-shadow: var(--d2l-theme-shadow-floating-offset-x) var(--d2l-theme-shadow-floating-offset-y) var(--d2l-theme-shadow-floating-blur-radius) var(--d2l-theme-shadow-floating-spread-radius) var(--d2l-popover-shadow-color, var(--d2l-popover-default-shadow-color));
 				box-sizing: border-box;
 				display: flex;
 				max-width: 370px;
@@ -170,7 +170,7 @@ export const PopoverMixin = superclass => class extends superclass {
 				background-color: var(--d2l-popover-background-color, var(--d2l-popover-default-background-color));
 				border: 1px solid var(--d2l-popover-border-color, var(--d2l-popover-default-border-color));
 				border-radius: 0.1rem;
-				box-shadow: -4px -4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
+				box-shadow: -4px -4px 12px -5px var(--d2l-theme-shadow-floating-color);
 				height: ${pointerLength}px;
 				outline: var(--d2l-popover-outline-width, 0) solid var(--d2l-popover-outline-color, transparent);
 				transform: rotate(45deg);
@@ -178,7 +178,7 @@ export const PopoverMixin = superclass => class extends superclass {
 			}
 
 			:host([_location="block-start"]) .pointer > div {
-				box-shadow: 4px 4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
+				box-shadow: 4px 4px 12px -5px var(--d2l-theme-shadow-floating-color);
 			}
 
 			@keyframes d2l-popover-animation {

package/custom-elements.json

@@ -2548,6 +2548,10 @@
           "description": "Whether or not the dialog is open",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "preferNative",
+          "default": "false"
         }
       ],
       "events": [
@@ -2667,6 +2671,11 @@
           "description": "Whether or not the dialog is open",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "preferNative",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [
@@ -2816,6 +2825,11 @@
           "description": "Whether or not the dialog is open",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "preferNative",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [

package/package.json

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