@brightspace-ui/core 3.139.0 → 3.140.1

package/components/button/button-icon.js

@@ -64,17 +64,17 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
 				:host([translucent]) {
 					--d2l-button-icon-background-color: rgba(0, 0, 0, 0.5);
 					--d2l-button-icon-background-color-hover: var(--d2l-color-celestine);
-					--d2l-button-focus-color: white;
-					--d2l-button-focus-offset: -4px;
+					--d2l-focus-ring-color: white;
+					--d2l-focus-ring-offset: -4px;
 					--d2l-button-icon-fill-color: white;
 					--d2l-button-icon-fill-color-hover: white;
 				}
 				:host([theme="dark"]) {
 					--d2l-button-icon-background-color: transparent;
 					--d2l-button-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
-					--d2l-button-focus-color: var(--d2l-color-celestine-plus-1);
 					--d2l-button-icon-fill-color: var(--d2l-color-sylvite);
 					--d2l-button-icon-fill-color-hover: var(--d2l-color-sylvite);
+					--d2l-focus-ring-color: var(--d2l-color-celestine-plus-1);
 				}
 
 				button {

package/components/button/button-move.js

@@ -102,8 +102,8 @@ class ButtonMove extends ThemeMixin(FocusMixin(RtlMixin(LitElement))) {
 				:host([theme="dark"]) {
 					--d2l-button-move-background-color-focus: #000000;
 					--d2l-button-move-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
-					--d2l-button-focus-color: var(--d2l-color-celestine-plus-1);
 					--d2l-icon-fill-color: var(--d2l-color-sylvite);
+					--d2l-focus-ring-color: var(--d2l-color-celestine-plus-1);
 				}
 				button {
 					background-color: transparent;

package/components/button/button-styles.js

@@ -1,6 +1,6 @@
 import '../colors/colors.js';
-import { css, unsafeCSS } from 'lit';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { css } from 'lit';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 
 export const buttonStyles = css`
 	button {
@@ -24,10 +24,7 @@ export const buttonStyles = css`
 		white-space: nowrap;
 		width: auto;
 	}
-	button:${unsafeCSS(getFocusPseudoClass())} {
-		outline: 2px solid var(--d2l-button-focus-color, var(--d2l-color-celestine));
-		outline-offset: var(--d2l-button-focus-offset, 2px);
-	}
+	${getFocusRingStyles('button')}
 	@media (prefers-contrast: more) {
 		button {
 			border: 2px solid transparent;

package/components/button/floating-buttons.js

@@ -4,7 +4,7 @@ import { css, html, LitElement } from 'lit';
 import { getBoundingAncestor, getComposedParent, isComposedAncestor } from '../../helpers/dom.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
 import { getLegacyOffsetParent } from '../../helpers/offsetParent-legacy.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
+import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const mediaQueryList = window.matchMedia('(max-height: 500px)');
@@ -14,7 +14,7 @@ const MINIMUM_TARGET_SIZE = 24;
  * A wrapper component to display floating workflow buttons. When the normal position of the workflow buttons is below the bottom edge of the viewport, they will dock at the bottom edge. When the normal position becomes visible, they will undock.
  * @slot - Content to be displayed in the floating container
  */
-class FloatingButtons extends RtlMixin(LitElement) {
+class FloatingButtons extends LoadingCompleteMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -26,8 +26,7 @@ class FloatingButtons extends RtlMixin(LitElement) {
 			_containerMarginLeft: { attribute: false, type: String },
 			_containerMarginRight: { attribute: false, type: String },
 			_floating: { type: Boolean, reflect: true },
-			_innerContainerLeft: { attribute: false, type: String },
-			_innerContainerRight: { attribute: false, type: String }
+			_innerContainerLeft: { attribute: false, type: String }
 		};
 	}
 
@@ -80,21 +79,14 @@ class FloatingButtons extends RtlMixin(LitElement) {
 			.d2l-floating-buttons-inner-container ::slotted(d2l-button),
 			.d2l-floating-buttons-inner-container ::slotted(button),
 			.d2l-floating-buttons-inner-container ::slotted(.d2l-button) {
+				margin-inline-end: 0.75rem !important;
 				margin-bottom: 0.75rem !important;
-				margin-right: 0.75rem !important;
 			}
 
 			.d2l-floating-buttons-inner-container ::slotted(d2l-overflow-group) {
 				padding-bottom: 0.75rem !important;
 			}
 
-			:host([dir="rtl"]) .d2l-floating-buttons-inner-container ::slotted(d2l-button),
-			:host([dir="rtl"]) .d2l-floating-buttons-inner-container ::slotted(button),
-			:host([dir="rtl"]) .d2l-floating-buttons-inner-container ::slotted(.d2l-button) {
-				margin-left: 0.75rem !important;
-				margin-right: 0 !important;
-			}
-
 			@media (prefers-reduced-motion: reduce) {
 				:host([_floating]:not([always-float])) .d2l-floating-buttons-container {
 					transition: none;
@@ -110,7 +102,6 @@ class FloatingButtons extends RtlMixin(LitElement) {
 		this._containerMarginRight = '';
 		this._floating = false;
 		this._innerContainerLeft = '';
-		this._innerContainerRight = '';
 		this._intersectionObserver = null;
 		this._isIntersecting = false;
 		this._recalculateFloating = this._recalculateFloating.bind(this);
@@ -125,13 +116,15 @@ class FloatingButtons extends RtlMixin(LitElement) {
 		// if browser doesn't support IntersectionObserver, we don't float
 		if (typeof(IntersectionObserver) !== 'function') {
 			this._isIntersecting = true;
+			this.resolveLoadingComplete();
 			return;
 		}
-		this._intersectionObserver = this._intersectionObserver || new IntersectionObserver((entries) => {
-			entries.forEach((entry) => {
+		this._intersectionObserver = this._intersectionObserver || new IntersectionObserver(async(entries) => {
+			for (const entry of entries) {
 				this._isIntersecting = entry.isIntersecting;
-				this._recalculateFloating();
-			});
+				await this._recalculateFloating();
+			}
+			this.resolveLoadingComplete();
 		});
 
 		// observe intersection of a fake sibling element since host is sticky
@@ -164,13 +157,12 @@ class FloatingButtons extends RtlMixin(LitElement) {
 
 	render() {
 		const containerStyle = {
-			marginLeft: this._containerMarginLeft,
-			marginRight: this._containerMarginRight
+			marginInlineStart: this._containerMarginLeft,
+			marginInlineEnd: this._containerMarginRight
 		};
 
 		const innerContainerStyle = {
-			marginLeft: this._innerContainerLeft,
-			marginRight: this._innerContainerRight
+			marginInlineStart: this._innerContainerLeft
 		};
 
 		return html`
@@ -193,7 +185,6 @@ class FloatingButtons extends RtlMixin(LitElement) {
 		this._containerMarginLeft = '';
 		this._containerMarginRight = '';
 		this._innerContainerLeft = '';
-		this._innerContainerRight = '';
 
 		if (!this._floating) return;
 
@@ -218,12 +209,8 @@ class FloatingButtons extends RtlMixin(LitElement) {
 			this._containerMarginRight = `-${containerRight}px`;
 		}
 
-		if (this.dir !== 'rtl') {
-			if (containerLeft !== 0) {
-				this._innerContainerLeft = `${containerLeft}px`;
-			}
-		} else {
-			this._innerContainerRight = `${containerRight}px`;
+		if (containerLeft !== 0) {
+			this._innerContainerLeft = `${containerLeft}px`;
 		}
 
 	}
@@ -251,29 +238,30 @@ class FloatingButtons extends RtlMixin(LitElement) {
 
 	}
 
-	_recalculateFloating() {
-		requestAnimationFrame(() => {
-
-			if (this.alwaysFloat) {
-				this._floating = true;
-				this._calcContainerPosition();
-				return;
-			}
+	async _recalculateFloating() {
+		await new Promise(resolve => requestAnimationFrame(resolve));
 
-			const viewportIsLessThanMinHeight = mediaQueryList.matches;
-			if (viewportIsLessThanMinHeight) {
-				this._floating = false;
-				this._calcContainerPosition();
-				return;
-			}
+		if (this.alwaysFloat) {
+			this._floating = true;
+			this._calcContainerPosition();
+			await this.updateComplete;
+			return;
+		}
 
-			const shouldFloat = !this._isIntersecting;
-			if (shouldFloat !== this._floating) {
-				this._floating = shouldFloat;
-				this._calcContainerPosition();
-			}
+		const viewportIsLessThanMinHeight = mediaQueryList.matches;
+		if (viewportIsLessThanMinHeight) {
+			this._floating = false;
+			this._calcContainerPosition();
+			await this.updateComplete;
+			return;
+		}
 
-		});
+		const shouldFloat = !this._isIntersecting;
+		if (shouldFloat !== this._floating) {
+			this._floating = shouldFloat;
+			this._calcContainerPosition();
+			await this.updateComplete;
+		}
 	}
 
 	_scrollIfFloatObsuringFocus() {

package/components/dialog/dialog-styles.js

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
 import { css } from 'lit';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 
 export const dialogStyles = css`
 
@@ -131,13 +132,7 @@ export const dialogStyles = css`
 		overflow: hidden; /* scrollbar is kept hidden while we update the scroll position to avoid scrollbar flash */
 		padding: 0 30px;
 	}
-
-	.d2l-dialog-content:focus-visible {
-		border-radius: 6px;
-		outline: 2px solid var(--d2l-color-celestine);
-		outline-offset: -2px;
-	}
-
+	${getFocusRingStyles('.d2l-dialog-content', { extraStyles: css`--d2l-focus-ring-offset: -2px; border-radius: 6px;` })}
 	.d2l-dialog-content > div {
 		position: relative; /* make this the positioned parent for absolute positioned elements like d2l-template-primary-secondary */
 	}

package/components/empty-state/empty-state-styles.js

@@ -1,6 +1,6 @@
 import '../colors/colors.js';
-import { css, unsafeCSS } from 'lit';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { css } from 'lit';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 
 export const emptyStateStyles = css`
 
@@ -20,13 +20,11 @@ export const emptyStateStyles = css`
 	.action-slot::slotted(d2l-empty-state-action-link:first-of-type) {
 		display: inline;
 	}
-
-	.d2l-empty-state-description:${unsafeCSS(getFocusPseudoClass())} {
+	.d2l-empty-state-description {
+		--d2l-focus-ring-offset: 3px;
 		border-radius: 0.3rem;
-		outline: 2px solid var(--d2l-color-celestine);
-		outline-offset: 3px;
 	}
-
+	${getFocusRingStyles('.d2l-empty-state-description')}
 `;
 
 export const emptyStateSimpleStyles = css`

package/components/html-block/html-block.js

@@ -1,9 +1,9 @@
 import '../colors/colors.js';
 import { codeStyles, createHtmlBlockRenderer as createCodeRenderer } from '../../helpers/prism.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createHtmlBlockRenderer as createMathRenderer } from '../../helpers/mathjax.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
 import { renderEmbeds } from '../../helpers/embeds.js';
 import { requestInstance } from '../../mixins/provider/provider-mixin.js';
@@ -108,12 +108,11 @@ export const htmlBlockContentStyles = css`
 		color: var(--d2l-color-celestine-minus-1, #004489);
 		text-decoration: underline;
 	}
-	a:${unsafeCSS(getFocusPseudoClass())} {
-		border-radius: 2px;
-		outline: 2px solid var(--d2l-color-celestine, #006fbf);
-		outline-offset: 1px;
-		text-decoration: underline;
+	a {
+		--d2l-focus-ring-offset: 1px;
+		--d2l-focus-ring-color: var(--d2l-color-celestine, #006fbf);
 	}
+	${getFocusRingStyles('a', { extraStyles: css`border-radius: 2px; text-decoration: underline;` })}
 	@media print {
 		a,
 		a:visited,

package/components/inputs/input-color.js

@@ -1,12 +1,12 @@
 import '../dropdown/dropdown.js';
 import '../dropdown/dropdown-content.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { buttonStyles } from '../button/button-styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { getValidHexColor } from '../../helpers/color.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -226,14 +226,7 @@ class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(F
 					outline: none;
 					width: 1.2rem;
 				}
-				.readonly-wrapper:focus {
-					outline: none;
-				}
-				.readonly-wrapper:${unsafeCSS(getFocusPseudoClass())} {
-					outline: 2px solid var(--d2l-color-celestine);
-					outline-offset: 2px;
-				}
-
+				${getFocusRingStyles('.readonly-wrapper')}
 				@media (prefers-contrast: more) {
 					.swatch {
 						border: 1px solid FieldText;

package/components/inputs/input-search.js

@@ -80,7 +80,7 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 					--d2l-button-icon-min-height: 1.5rem;
 					--d2l-button-icon-min-width: 1.5rem;
 					--d2l-button-icon-border-radius: 4px;
-					--d2l-button-focus-offset: 1px;
+					--d2l-focus-ring-offset: 1px;
 					margin-left: 0.3rem;
 					margin-right: 0.3rem;
 				}

package/components/link/link.js

@@ -1,9 +1,9 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
@@ -11,6 +11,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 export const linkStyles = css`
 	.d2l-link, .d2l-link:visited, .d2l-link:active, .d2l-link:link {
+		--d2l-focus-ring-offset: 1px;
 		color: var(--d2l-color-celestine);
 		cursor: pointer;
 		outline-style: none;
@@ -24,12 +25,7 @@ export const linkStyles = css`
 		color: var(--d2l-color-celestine-minus-1);
 		text-decoration: underline;
 	}
-	.d2l-link:${unsafeCSS(getFocusPseudoClass())} {
-		border-radius: 2px;
-		outline: 2px solid var(--d2l-color-celestine);
-		outline-offset: 1px;
-		text-decoration: underline;
-	}
+	${getFocusRingStyles('.d2l-link', { extraStyles: css`border-radius: 2px; text-decoration: underline;` })}
 	.d2l-link.d2l-link-main {
 		font-weight: 700;
 	}

package/components/switch/switch-mixin.js

@@ -1,8 +1,8 @@
 import '../colors/colors.js';
-import { css, html, unsafeCSS } from 'lit';
+import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
@@ -47,6 +47,7 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 			}
 
 			.d2l-switch-container {
+				--d2l-focus-ring-offset: 0;
 				background-color: var(--d2l-switch-container-background-color, #ffffff);
 				border-radius: 1rem;
 				box-sizing: border-box;
@@ -58,9 +59,7 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 				padding: 0.1rem;
 				vertical-align: middle;
 			}
-			.d2l-switch-container:${unsafeCSS(getFocusPseudoClass())} {
-				outline: 2px solid var(--d2l-color-celestine);
-			}
+			${getFocusRingStyles('.d2l-switch-container')}
 			:host([disabled]) .d2l-switch-container {
 				cursor: default;
 				opacity: 0.5;

package/components/tabs/demo/tab-custom.js

@@ -1,5 +1,5 @@
-import { css, html, LitElement, unsafeCSS } from 'lit';
-import { getFocusPseudoClass } from '../../../helpers/focus.js';
+import { css, html, LitElement } from 'lit';
+import { getFocusRingStyles } from '../../../helpers/focus.js';
 import { TabMixin } from '../tab-mixin.js';
 
 class TabCustom extends TabMixin(LitElement) {
@@ -7,6 +7,7 @@ class TabCustom extends TabMixin(LitElement) {
 	static get styles() {
 		const styles = [ css`
 			.d2l-tab-custom-content {
+				--d2l-focus-ring-offset: 0;
 				margin: 0.5rem;
 				overflow: hidden;
 				padding: 0.1rem;
@@ -15,11 +16,10 @@ class TabCustom extends TabMixin(LitElement) {
 			:host(:first-child) .d2l-tab-custom-content {
 				margin-inline-start: 0;
 			}
-			:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-tab-custom-content {
-				border-radius: 0.3rem;
-				color: var(--d2l-color-celestine);
-				outline: 2px solid var(--d2l-color-celestine);
-			}
+			${getFocusRingStyles(
+				pseudoClass => `:host(:${pseudoClass}) .d2l-tab-custom-content`,
+				{ extraStyles: 'border-radius: 0.3rem; color: var(--d2l-color-celestine);' }
+			)}
 		`];
 
 		super.styles && styles.unshift(super.styles);

package/components/tabs/tab.js

@@ -1,8 +1,13 @@
 import { css, html, LitElement, unsafeCSS } from 'lit';
+import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { TabMixin } from './tab-mixin.js';
 
+const focusRingStyles = getFocusRingStyles(
+	pseudoClass => `:host(:${pseudoClass}) .d2l-tab-text-inner-content`,
+	{ extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` }
+);
+
 /**
  * @attr {string} id - REQUIRED: Unique identifier for the tab
  * @fires d2l-tab-content-change - Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent d2l-tabs.
@@ -24,14 +29,11 @@ class Tab extends TabMixin(LitElement) {
 	static get styles() {
 		const styles = [ css`
 			.d2l-tab-text-inner-content {
+				--d2l-focus-ring-offset: 0;
 				display: flex;
 				padding: 0.1rem;
 			}
-			:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-tab-text-inner-content {
-				border-radius: 0.3rem;
-				color: var(--d2l-color-celestine);
-				outline: 2px solid var(--d2l-color-celestine);
-			}
+			${focusRingStyles}
 			:host(:${unsafeCSS(getFocusPseudoClass())}) ::slotted(d2l-icon) {
 				color: var(--d2l-color-celestine);
 			}

package/components/tooltip/tooltip-help.js

@@ -1,10 +1,10 @@
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { bodySmallStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
@@ -48,6 +48,7 @@ class TooltipHelp extends SlottedIconMixin(SkeletonMixin(FocusMixin(LitElement))
 				display: none;
 			}
 			#d2l-tooltip-help-text {
+				--d2l-focus-ring-offset: 0.05rem;
 				align-items: baseline;
 				background: none;
 				border: none;
@@ -66,15 +67,7 @@ class TooltipHelp extends SlottedIconMixin(SkeletonMixin(FocusMixin(LitElement))
 				align-self: center;
 			}
 
-			#d2l-tooltip-help-text:focus {
-				outline-style: none;
-			}
-			#d2l-tooltip-help-text:${unsafeCSS(getFocusPseudoClass())} {
-				border-radius: 0.05rem;
-				outline: 2px solid var(--d2l-color-celestine);
-				outline-offset: 0.05rem;
-				text-underline-offset: 0.1rem;
-			}
+			${getFocusRingStyles('#d2l-tooltip-help-text', { extraStyles: css`border-radius: 0.05rem; text-underline-offset: 0.1rem;` })}
 			:host([inherit-font-style]) #d2l-tooltip-help-text {
 				color: inherit;
 				font-size: inherit;

package/custom-elements.json

@@ -1039,6 +1039,14 @@
           "description": "Indicates to display buttons as always floating",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "loadingComplete",
+          "type": "Promise<any>"
+        },
+        {
+          "name": "resolveLoadingComplete",
+          "type": "() => void"
         }
       ],
       "slots": [

package/helpers/focus.js

@@ -1,3 +1,4 @@
+import { css, unsafeCSS } from 'lit';
 import { getComposedChildren, getComposedParent, getNextAncestorSibling, getPreviousAncestorSibling, isVisible } from './dom.js';
 
 const focusableElements = {
@@ -62,6 +63,20 @@ export function getFocusableDescendants(node, options) {
 export function getFocusPseudoClass() {
 	return isFocusVisibleSupported() ? 'focus-visible' : 'focus';
 }
+export function getFocusRingStyles(selector, { applyOnHover = false, extraStyles = null } = {}) {
+	const selectorDelegate = typeof selector === 'string' ? pseudoClass => `${selector}:${pseudoClass}` : selector;
+	const cssSelector = unsafeCSS(`${selectorDelegate(getFocusPseudoClass())}${applyOnHover ? `, ${selectorDelegate('hover')}` : ''}`);
+	return css`${cssSelector} {
+		${extraStyles ?? css``}
+		outline: 2px solid var(--d2l-focus-ring-color, var(--d2l-color-celestine));
+		outline-offset: var(--d2l-focus-ring-offset, 2px);
+	}
+	@media (prefers-contrast: more) {
+		${cssSelector} {
+			outline-color: var(--d2l-focus-ring-color, Highlight);
+		}
+	}`;
+}
 
 export function getLastFocusableDescendant(node, includeHidden) {
 	const composedChildren = getComposedChildren(node);

package/mixins/interactive/interactive-mixin.js

@@ -1,8 +1,8 @@
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { css, html } from 'lit';
 import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
+import { getFocusRingStyles, getNextFocusable } from '../../helpers/focus.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { getNextFocusable } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../../components/offscreen/offscreen.js';
@@ -26,13 +26,10 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 	}
 
 	static get styles() {
-		return [offscreenStyles, css`
-			.interactive-focusing-toggle {
-				border-radius: 6px;
-				outline: 2px solid var(--d2l-color-celestine);
-				outline-offset: 2px;
-			}
-		`];
+		return [offscreenStyles, getFocusRingStyles(
+			() => '.interactive-focusing-toggle',
+			{ extraStyles: css`border-radius: 6px;` }
+		)];
 	}
 
 	constructor() {

package/package.json

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