@brightspace-ui/core 3.148.0 → 3.148.2

package/components/dialog/dialog-fullscreen.js

@@ -254,7 +254,7 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
 
 		const content = html`
 			${loading}
-			<div style=${styleMap(slotStyles)}><slot></slot></div>
+			<div style=${styleMap(slotStyles)}><slot @slotchange="${this._handleSlotChange}"></slot></div>
 		`;
 
 		const contentTabIndex = !this.focusableContentElemPresent ? '0' : undefined;
@@ -312,6 +312,10 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
 		this._headerStyle = mediaQueryList.matches ? 'd2l-heading-3' : 'd2l-heading-2';
 	}
 
+	_handleSlotChange() {
+		requestAnimationFrame(() => this._updateFocusableContentElemPresent());
+	}
+
 }
 
 customElements.define('d2l-dialog-fullscreen', DialogFullscreen);

package/components/dialog/dialog-mixin.js

@@ -227,16 +227,10 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
 	_focusFirst() {
 		if (!this.shadowRoot) return;
-		const content = this.shadowRoot.querySelector('.d2l-dialog-content');
-		if (content) {
-			const elementToFocus = this._findAutofocusElement(content) ?? getNextFocusable(content);
-			if (isComposedAncestor(this.shadowRoot.querySelector('.d2l-dialog-content'), elementToFocus)) {
-				this.focusableContentElemPresent = true;
-			}
-			if (isComposedAncestor(this.shadowRoot.querySelector('.d2l-dialog-inner'), elementToFocus)) {
-				this._focusElemOrDescendant(elementToFocus);
-				return;
-			}
+		const elementToFocus = this._updateFocusableContentElemPresent();
+		if (elementToFocus && isComposedAncestor(this.shadowRoot.querySelector('.d2l-dialog-inner'), elementToFocus)) {
+			this._focusElemOrDescendant(elementToFocus);
+			return;
 		}
 		const focusTrap = this.shadowRoot.querySelector('d2l-focus-trap');
 		if (focusTrap) {
@@ -454,6 +448,9 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			if (reduceMotion) await new Promise(resolve => requestAnimationFrame(resolve));
 			else await animPromise;
 
+			// check if focusable content is present in order to set focusableContentElemPresent to true
+			requestAnimationFrame(() => this._updateFocusableContentElemPresent());
+
 			await this.waitForUpdateComplete();
 			await this._updateSize();
 			/** Dispatched when the dialog is opened */
@@ -544,6 +541,17 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		if (isFocusable(focusable)) focusable.focus();
 	}
 
+	_updateFocusableContentElemPresent() {
+		const content = this.shadowRoot?.querySelector('.d2l-dialog-content');
+		if (!content) return null;
+
+		const elementToFocus = this._findAutofocusElement(content) ?? getNextFocusable(content);
+		if (isComposedAncestor(content, elementToFocus)) {
+			this.focusableContentElemPresent = true;
+		}
+		return elementToFocus;
+	}
+
 	_updateOverflow() {
 		if (!this.shadowRoot) return;
 		const content = this.shadowRoot.querySelector('.d2l-dialog-content');

package/components/dialog/dialog.js

@@ -167,7 +167,7 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 
 		const content = html`
 			${loading}
-			<div id="${ifDefined(this._textId)}" style=${styleMap(slotStyles)}><slot></slot></div>
+			<div id="${ifDefined(this._textId)}" style=${styleMap(slotStyles)}><slot @slotchange="${this._handleSlotChange}"></slot></div>
 		`;
 
 		const contentTabIndex = !this.focusableContentElemPresent ? '0' : undefined;
@@ -223,6 +223,10 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 		this.resize();
 	}
 
+	_handleSlotChange() {
+		requestAnimationFrame(() => this._updateFocusableContentElemPresent());
+	}
+
 }
 
 customElements.define('d2l-dialog', Dialog);

package/components/switch/switch-mixin.js

@@ -59,15 +59,14 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 				padding: 0.1rem;
 				vertical-align: middle;
 			}
-			${getFocusRingStyles('.d2l-switch-container')}
+			${getFocusRingStyles('.d2l-switch-container', { extraStyles: css`position: relative;` })}
 			:host([disabled]) .d2l-switch-container {
 				cursor: default;
 				opacity: 0.5;
 			}
 			:host([disabled]) .d2l-switch-container:hover > .d2l-switch-inner,
 			:host([disabled]) .d2l-switch-inner:hover {
-				border-color: var(--d2l-color-ferrite);
-				box-shadow: none;
+				outline: none;
 			}
 			.d2l-switch-inner {
 				background-color: var(--d2l-color-regolith);
@@ -150,7 +149,6 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 				display: none;
 			}
 			.d2l-switch-inner:hover, .switch-hover {
-				border-color: transparent;
 				outline: 2px solid var(--d2l-color-celestine);
 				outline-offset: -2px;
 			}

package/package.json

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