@brightspace-ui/core 3.142.2 → 3.143.1

package/components/popover/popover-mixin.js

@@ -6,12 +6,25 @@ import { css, html, nothing } from 'lit';
 import { getComposedActiveElement, getFirstFocusableDescendant, getPreviousFocusableAncestor } from '../../helpers/focus.js';
 import { getComposedParent, isComposedAncestor } from '../../helpers/dom.js';
 import { _offscreenStyleDeclarations } from '../offscreen/offscreen.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
 
+export const positionLocations = Object.freeze({
+	blockEnd: 'block-end',
+	blockStart: 'block-start',
+	inlineEnd: 'inline-end',
+	inlineStart: 'inline-start'
+});
+export const positionSpans = Object.freeze({
+	all: 'all',
+	end: 'end',
+	start: 'start'
+});
+
 const defaultPreferredPosition = {
-	location: 'block-end', // block-start, block-end
-	span: 'all', // start, end, all
+	location: positionLocations.blockEnd,
+	span: positionSpans.all,
 	allowFlip: true
 };
 const minBackdropHeightMobile = 42;
@@ -20,6 +33,12 @@ const pointerLength = 16;
 const pointerRotatedLength = Math.SQRT2 * parseFloat(pointerLength);
 const isSupported = ('popover' in HTMLElement.prototype);
 
+const getScrollbarWidth = () => {
+	const width = window.innerWidth - document.documentElement.clientWidth;
+	if (width > 0) return width + 1; // 16 when present, but can be 0 even if visible (ex. MacOS depending on settings)
+	else return 0;
+};
+
 export const PopoverMixin = superclass => class extends superclass {
 
 	static get properties() {
@@ -127,6 +146,17 @@ export const PopoverMixin = superclass => class extends superclass {
 				position: absolute;
 				z-index: 1;
 			}
+			:host([_location="block-start"]) .pointer {
+				clip: rect(9px, 21px, 22px, -3px);
+			}
+			:host([_location="inline-start"]) .pointer,
+			:host([_location="inline-end"]) .pointer.pointer-mirror {
+				clip: rect(-3px, 21px, 21px, 10px);
+			}
+			:host([_location="inline-end"]) .pointer,
+			:host([_location="inline-start"]) .pointer.pointer-mirror {
+				clip: rect(-3px, 8px, 21px, -3px);
+			}
 
 			.pointer > div {
 				background-color: var(--d2l-popover-background-color, var(--d2l-popover-default-background-color));
@@ -138,10 +168,6 @@ export const PopoverMixin = superclass => class extends superclass {
 				width: ${pointerLength}px;
 			}
 
-			:host([_location="block-start"]) .pointer {
-				clip: rect(9px, 21px, 22px, -3px);
-			}
-
 			:host([_location="block-start"]) .pointer > div {
 				box-shadow: 4px 4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
 			}
@@ -278,7 +304,10 @@ export const PopoverMixin = superclass => class extends superclass {
 	}
 
 	configure(properties) {
-		this._margin = properties?.margin ?? 18;
+		if (properties?.margin) this._margin = properties.margin;
+		else if (properties?.position?.location === positionLocations.inlineStart
+			|| properties?.position?.location === positionLocations.inlineEnd) this._margin = 0;
+		else this._margin = 18;
 		this._maxHeight = properties?.maxHeight;
 		this._maxWidth = properties?.maxWidth;
 		this._minHeight = properties?.minHeight;
@@ -296,8 +325,8 @@ export const PopoverMixin = superclass => class extends superclass {
 			|| this._preferredPosition?.span !== properties.position?.span
 			|| this._preferredPosition?.allowFlip !== properties.position?.allowFlip) {
 			this._preferredPosition = {
-				location: properties?.position?.location ?? 'block-end',
-				span: properties?.position?.span ?? 'all',
+				location: properties?.position?.location ?? positionLocations.blockEnd,
+				span: properties?.position?.span ?? positionSpans.all,
 				allowFlip: properties?.position?.allowFlip ?? true
 			};
 		}
@@ -371,11 +400,12 @@ export const PopoverMixin = superclass => class extends superclass {
 			};
 
 			// space in viewport
+			const prefersInline = this._preferredPosition.location === positionLocations.inlineStart || this._preferredPosition.location === positionLocations.inlineEnd;
 			const spaceAround = this.#constrainSpaceAround({
 				// allow for opener offset + outer margin
-				above: openerRect.top - this._offset - this._margin,
+				above: openerRect.top - (prefersInline ? 0 : this._offset) - this._margin,
 				// allow for opener offset + outer margin
-				below: window.innerHeight - openerRect.bottom - this._offset - this._margin,
+				below: window.innerHeight - openerRect.bottom - (prefersInline ? 0 : this._offset) - this._margin,
 				// allow for outer margin
 				left: openerRect.left - 20,
 				// allow for outer margin
@@ -398,7 +428,9 @@ export const PopoverMixin = superclass => class extends superclass {
 			if (options.updateHeight) {
 
 				// calculate height available to the popover contents for overflow because that is the only area capable of scrolling
-				const availableHeight = (this._location === 'block-start') ? spaceAround.above : spaceAround.below;
+				const availableHeight = (this._location === positionLocations.inlineStart || this._location === positionLocations.inlineEnd)
+					? (spaceAround.above + spaceAround.below + openerRect.height)
+					: (this._location === positionLocations.blockStart ? spaceAround.above : spaceAround.below);
 
 				if (!this._noAutoFit && availableHeight && availableHeight > 0) {
 					// only apply maximum if it's less than space available and the header/footer alone won't exceed it (content must be visible)
@@ -409,8 +441,6 @@ export const PopoverMixin = superclass => class extends superclass {
 					await this.updateComplete;
 				}
 
-				// todo: handle inline-start and inline-end locations
-
 			}
 
 			/** @ignore */
@@ -434,9 +464,9 @@ export const PopoverMixin = superclass => class extends superclass {
 		const mobileTrayLocation = this._mobile ? this._mobileTrayLocation : null;
 
 		let stylesMap;
-		if (mobileTrayLocation === 'block-end') {
+		if (mobileTrayLocation === positionLocations.blockEnd) {
 			stylesMap = this.#getMobileTrayBlockStyleMaps();
-		} else if (mobileTrayLocation === 'inline-start' || mobileTrayLocation === 'inline-end') {
+		} else if (mobileTrayLocation === positionLocations.inlineStart || mobileTrayLocation === positionLocations.inlineEnd) {
 			stylesMap = this.#getMobileTrayInlineStyleMaps();
 		} else {
 			stylesMap = this.#getStyleMaps();
@@ -478,8 +508,12 @@ export const PopoverMixin = superclass => class extends superclass {
 			}
 		}
 
+		const pointerClasses = {
+			'pointer': true,
+			'pointer-mirror': this._rtl
+		};
 		const pointer = !this._noPointer ? html`
-			<div class="pointer" style="${styleMap(pointerPositionStyles)}">
+			<div class="${classMap(pointerClasses)}" style="${styleMap(pointerPositionStyles)}">
 				<div></div>
 			</div>
 		` : nothing;
@@ -580,9 +614,9 @@ export const PopoverMixin = superclass => class extends superclass {
 	#constrainSpaceAround(spaceAround, spaceRequired, openerRect) {
 		const constrained = { ...spaceAround };
 
-		if ((this._preferredPosition.span === 'end' && !this._rtl) || (this._preferredPosition.span === 'start' && this._rtl)) {
+		if ((this._preferredPosition.span === positionSpans.end && !this._rtl) || (this._preferredPosition.span === positionSpans.start && this._rtl)) {
 			constrained.left = Math.max(0, spaceRequired.width - (openerRect.width + spaceAround.right));
-		} else if ((this._preferredPosition.span === 'end' && this._rtl) || (this._preferredPosition.span === 'start' && !this._rtl)) {
+		} else if ((this._preferredPosition.span === positionSpans.end && this._rtl) || (this._preferredPosition.span === positionSpans.start && !this._rtl)) {
 			constrained.right = Math.max(0, spaceRequired.width - (openerRect.width + spaceAround.left));
 		}
 
@@ -621,28 +655,46 @@ export const PopoverMixin = superclass => class extends superclass {
 			return preferred.location;
 		}
 
-		if (preferred.location === 'block-end') {
-			if (spaceAround.below >= spaceRequired.height) return 'block-end';
-			if (spaceAround.above >= spaceRequired.height) return 'block-start';
+		if (preferred.location === positionLocations.blockEnd) {
+			if (spaceAround.below >= spaceRequired.height) return positionLocations.blockEnd;
+			if (spaceAround.above >= spaceRequired.height) return positionLocations.blockStart;
 			// if auto-fit is enabled, scroll will be enabled for the inner content so it will always fit in the available space so pick the largest space it can be displayed in
-			if (!this.noAutoFit) return spaceAround.above > spaceAround.below ? 'block-start' : 'block-end';
-			if (spaceAroundScroll.below >= spaceRequired.height) return 'block-end';
-			if (spaceAroundScroll.above >= spaceRequired.height) return 'block-start';
+			if (!this.noAutoFit) return spaceAround.above > spaceAround.below ? positionLocations.blockStart : positionLocations.blockEnd;
+			if (spaceAroundScroll.below >= spaceRequired.height) return positionLocations.blockEnd;
+			if (spaceAroundScroll.above >= spaceRequired.height) return positionLocations.blockStart;
 		}
 
-		if (preferred.location === 'block-start') {
-			if (spaceAround.above >= spaceRequired.height) return 'block-start';
-			if (spaceAround.below >= spaceRequired.height) return 'block-end';
+		if (preferred.location === positionLocations.blockStart) {
+			if (spaceAround.above >= spaceRequired.height) return positionLocations.blockStart;
+			if (spaceAround.below >= spaceRequired.height) return positionLocations.blockEnd;
 			// if auto-fit is enabled, scroll will be enabled for the inner content so it will always fit in the available space so pick the largest space it can be displayed in
-			if (!this.noAutoFit) return spaceAround.above > spaceAround.below ? 'block-start' : 'block-end';
-			if (spaceAroundScroll.above >= spaceRequired.height) return 'block-start';
-			if (spaceAroundScroll.below >= spaceRequired.height) return 'block-end';
+			if (!this.noAutoFit) return spaceAround.above > spaceAround.below ? positionLocations.blockStart : positionLocations.blockEnd;
+			if (spaceAroundScroll.above >= spaceRequired.height) return positionLocations.blockStart;
+			if (spaceAroundScroll.below >= spaceRequired.height) return positionLocations.blockEnd;
 		}
 
-		// todo: add location order for inline-start and inline-end
+		if (preferred.location === positionLocations.inlineEnd) {
+			if (this._rtl) {
+				if (spaceAround.left >= spaceRequired.width) return positionLocations.inlineEnd;
+				if (spaceAround.right >= spaceRequired.width) return positionLocations.inlineStart;
+			} else {
+				if (spaceAround.right >= spaceRequired.width) return positionLocations.inlineEnd;
+				if (spaceAround.left >= spaceRequired.width) return positionLocations.inlineStart;
+			}
+		}
+
+		if (preferred.location === positionLocations.inlineStart) {
+			if (this._rtl) {
+				if (spaceAround.right >= spaceRequired.width) return positionLocations.inlineStart;
+				if (spaceAround.left >= spaceRequired.width) return positionLocations.inlineEnd;
+			} else {
+				if (spaceAround.left >= spaceRequired.width) return positionLocations.inlineStart;
+				if (spaceAround.right >= spaceRequired.width) return positionLocations.inlineEnd;
+			}
+		}
 
 		// if auto-fit is disabled and it doesn't fit in the scrollable space above or below, always open down because it can add scrollable space
-		return 'block-end';
+		return positionLocations.blockEnd;
 	}
 
 	#getMobileTrayBlockStyleMaps() {
@@ -743,11 +795,11 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		let inlineEndOverride;
 		let inlineStartOverride;
-		if (this._mobileTrayLocation === 'inline-end') {
+		if (this._mobileTrayLocation === positionLocations.inlineEnd) {
 			// On non-responsive pages, the innerWidth may be wider than the screen,
 			// override right to stick to right of viewport
 			inlineEndOverride = `${Math.max(window.innerWidth - window.screen.width, 0)}px`;
-		} else if (this._mobileTrayLocation === 'inline-start') {
+		} else if (this._mobileTrayLocation === positionLocations.inlineStart) {
 			// On non-responsive pages, the innerWidth may be wider than the screen,
 			// override left to stick to left of viewport
 			inlineStartOverride = `${Math.max(window.innerWidth - window.screen.width, 0)}px`;
@@ -794,33 +846,55 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		const pointerRect = pointer.getBoundingClientRect();
 
-		if (this._preferredPosition.span !== 'all') {
-			const xAdjustment = Math.min(20 + ((pointerRotatedLength - pointerLength) / 2), (openerRect.width - pointerLength) / 2);
-			if (!this._rtl) {
-				if (this._preferredPosition.span === 'end') {
-					position.left = openerRect.left + xAdjustment;
+		if (this._location === positionLocations.blockEnd || this._location === positionLocations.blockStart) {
+
+			if (this._preferredPosition.span !== positionSpans.all) {
+				const xAdjustment = Math.min(20 + ((pointerRotatedLength - pointerLength) / 2), (openerRect.width - pointerLength) / 2);
+				if (!this._rtl) {
+					if (this._preferredPosition.span === positionSpans.end) {
+						position.left = openerRect.left + xAdjustment;
+					} else {
+						position.right = (openerRect.right * -1) + xAdjustment;
+					}
 				} else {
-					position.right = (openerRect.right * -1) + xAdjustment;
+					if (this._preferredPosition.span === positionSpans.end) {
+						position.right = window.innerWidth - openerRect.right + xAdjustment - getScrollbarWidth();
+					} else {
+						position.left = (window.innerWidth - openerRect.left - xAdjustment - getScrollbarWidth()) * -1;
+					}
 				}
 			} else {
-				if (this._preferredPosition.span === 'end') {
-					position.right = window.innerWidth - openerRect.right + xAdjustment;
+				if (!this._rtl) {
+					position.left = openerRect.left + ((openerRect.width - pointerRect.width) / 2);
 				} else {
-					position.left = (window.innerWidth - openerRect.left - xAdjustment) * -1;
+					position.right = window.innerWidth - openerRect.left - ((openerRect.width + pointerRect.width) / 2) - getScrollbarWidth();
 				}
 			}
-		} else {
-			if (!this._rtl) {
-				position.left = openerRect.left + ((openerRect.width - pointerRect.width) / 2);
+
+			if (this._location === positionLocations.blockStart) {
+				position.bottom = window.innerHeight - openerRect.top + this._offset - 8; // 8 minor adjustment to position pointer at edge of content
 			} else {
-				position.right = window.innerWidth - openerRect.left - ((openerRect.width + pointerRect.width) / 2);
+				position.top = openerRect.top + openerRect.height + this._offset - 7; // 7 minor adjustment to position pointer at edge of content
+			}
+
+		} else if (this._location === positionLocations.inlineEnd || this._location === positionLocations.inlineStart) {
+
+			position.top = openerRect.top + (openerRect.height / 2) - (pointerLength / 2);
+
+			if (this._location === positionLocations.inlineStart) {
+				if (!this._rtl) {
+					position.right = (openerRect.left - this._offset + 7) * -1; // 7 minor adjustment to position pointer at edge of content
+				} else {
+					position.left = (window.innerWidth - openerRect.right + 7 - this._offset - getScrollbarWidth()) * -1; // 7 minor adjustment to position pointer at edge of content
+				}
+			} else {
+				if (!this._rtl) {
+					position.left = openerRect.left + openerRect.width + this._offset - 7; // 7 minor adjustment to position pointer at edge of content
+				} else {
+					position.right = window.innerWidth - openerRect.left - 7 + this._offset - getScrollbarWidth(); // 7 minor adjustment to position pointer at edge of content
+				}
 			}
-		}
 
-		if (this._location === 'block-start') {
-			position.bottom = window.innerHeight - openerRect.top + this._offset - 8;
-		} else {
-			position.top = openerRect.top + openerRect.height + this._offset - 7;
 		}
 
 		return position;
@@ -829,79 +903,124 @@ export const PopoverMixin = superclass => class extends superclass {
 	#getPosition(spaceAround, openerRect, contentRect) {
 		const position = {};
 
-		if (this._location === 'block-end' || this._location === 'block-start') {
+		if (this._location === positionLocations.blockEnd || this._location === positionLocations.blockStart) {
 
 			const xAdjustment = this.#getPositionXAdjustment(spaceAround, openerRect, contentRect);
 			if (xAdjustment !== null) {
 				if (!this._rtl) {
 					position.left = openerRect.left + xAdjustment;
 				} else {
-					position.right = window.innerWidth - openerRect.left - openerRect.width + xAdjustment;
+					position.right = window.innerWidth - openerRect.left - openerRect.width + xAdjustment - getScrollbarWidth();
 				}
 			}
 
-			if (this._location === 'block-start') {
+			if (this._location === positionLocations.blockStart) {
 				position.bottom = window.innerHeight - openerRect.top + this._offset;
 			} else {
 				position.top = openerRect.top + openerRect.height + this._offset;
 			}
 
-		}
+		} else if (this._location === positionLocations.inlineEnd || this._location === positionLocations.inlineStart) {
 
-		// todo: add position styles for inline-start and inline-end
+			const yAdjustment = this.#getPositionYAdjustment(spaceAround, openerRect, contentRect);
+			if (yAdjustment !== null) {
+				position.top = openerRect.top + yAdjustment;
+			}
+
+			if (this._location === positionLocations.inlineStart) {
+				if (!this._rtl) {
+					position.right = (openerRect.left - this._offset) * -1;
+				} else {
+					position.left = (window.innerWidth - openerRect.right - this._offset - getScrollbarWidth()) * -1;
+				}
+			} else {
+				if (!this._rtl) {
+					position.left = openerRect.left + openerRect.width + this._offset;
+				} else {
+					position.right = window.innerWidth - openerRect.left + this._offset - getScrollbarWidth();
+				}
+			}
+
+		}
 
 		return position;
 	}
 
 	#getPositionXAdjustment(spaceAround, openerRect, contentRect) {
 
-		if (this._location === 'block-end' || this._location === 'block-start') {
+		if (this._location !== positionLocations.blockEnd && this._location !== positionLocations.blockStart) return null;
+
+		const centerDelta = contentRect.width - openerRect.width;
+		const contentXAdjustment = centerDelta / 2;
 
-			const centerDelta = contentRect.width - openerRect.width;
-			const contentXAdjustment = centerDelta / 2;
+		if (this._preferredPosition.span === positionSpans.all && centerDelta <= 0) {
+			// center with target (opener wider than content)
+			return contentXAdjustment * -1;
+		}
+		if (this._preferredPosition.span === positionSpans.all && spaceAround.left > contentXAdjustment && spaceAround.right > contentXAdjustment) {
+			// center with target (content wider than opener and enough space around)
+			return contentXAdjustment * -1;
+		}
 
-			if (this._preferredPosition.span === 'all' && centerDelta <= 0) {
-				// center with target (opener wider than content)
-				return contentXAdjustment * -1;
+		if (!this._rtl) {
+			if (spaceAround.left < contentXAdjustment) {
+				// slide content right (not enough space to center)
+				return spaceAround.left * -1;
+			} else if (spaceAround.right < contentXAdjustment) {
+				// slide content left (not enough space to center)
+				return (centerDelta * -1) + spaceAround.right;
 			}
-			if (this._preferredPosition.span === 'all' && spaceAround.left > contentXAdjustment && spaceAround.right > contentXAdjustment) {
-				// center with target (content wider than opener and enough space around)
-				return contentXAdjustment * -1;
+		} else {
+			if (spaceAround.left < contentXAdjustment) {
+				// slide content right (not enough space to center)
+				return (centerDelta * -1) + spaceAround.left;
+			} else if (spaceAround.right < contentXAdjustment) {
+				// slide content left (not enough space to center)
+				return spaceAround.right * -1;
 			}
+		}
 
-			if (!this._rtl) {
-				if (spaceAround.left < contentXAdjustment) {
-					// slide content right (not enough space to center)
-					return spaceAround.left * -1;
-				} else if (spaceAround.right < contentXAdjustment) {
-					// slide content left (not enough space to center)
-					return (centerDelta * -1) + spaceAround.right;
-				}
+		if (this._preferredPosition.span !== positionSpans.all) {
+			// shift it (not enough space to align as requested)
+			const shift = Math.min((openerRect.width / 2) - (20 + pointerLength / 2), 0); // 20 ~= 1rem
+			if (this._preferredPosition.span === positionSpans.end) {
+				return shift;
 			} else {
-				if (spaceAround.left < contentXAdjustment) {
-					// slide content right (not enough space to center)
-					return (centerDelta * -1) + spaceAround.left;
-				} else if (spaceAround.right < contentXAdjustment) {
-					// slide content left (not enough space to center)
-					return spaceAround.right * -1;
-				}
+				return openerRect.width - contentRect.width - shift;
 			}
+		}
 
-			if (this._preferredPosition.span !== 'all') {
-				// shift it (not enough space to align as requested)
-				const shift = Math.min((openerRect.width / 2) - (20 + pointerLength / 2), 0); // 20 ~= 1rem
-				if (this._preferredPosition.span === 'end') {
-					return shift;
-				} else {
-					return openerRect.width - contentRect.width - shift;
-				}
-			}
+		return null;
 
+	}
+
+	#getPositionYAdjustment(spaceAround, openerRect, contentRect) {
+
+		if (this._location !== positionLocations.inlineEnd && this._location !== positionLocations.inlineStart) return null;
+
+		const centerDelta = contentRect.height - openerRect.height;
+		const contentYAdjustment = centerDelta / 2;
+
+		if (this._preferredPosition.span === positionSpans.all && centerDelta <= 0) {
+			// center with target (opener taller than content)
+			return contentYAdjustment * -1;
 		}
 
-		// todo: add position styles for inline-start and inline-end
+		if (this._preferredPosition.span === positionSpans.all && spaceAround.above > contentYAdjustment && spaceAround.below > contentYAdjustment) {
+			// center with target (content wider than opener and enough space around)
+			return contentYAdjustment * -1;
+		}
+
+		if (spaceAround.above < contentYAdjustment) {
+			// slide content down (not enough space to center)
+			return spaceAround.above * -1;
+		} else if (spaceAround.below < contentYAdjustment) {
+			// slide content up (not enough space to center)
+			return (centerDelta * -1) + spaceAround.below;
+		}
 
 		return null;
+
 	}
 
 	#getStyleMaps() {

package/components/scroll-wrapper/scroll-wrapper.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
-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 ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
@@ -13,11 +13,10 @@ let focusStyleSheet;
 function getFocusStyleSheet() {
 	if (!focusStyleSheet) {
 		focusStyleSheet = new CSSStyleSheet();
-		focusStyleSheet.replaceSync(css`
-		.d2l-scroll-wrapper-focus:${unsafeCSS(getFocusPseudoClass())} {
-			box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine), 0 2px 12px 0 rgba(0, 0, 0, 0.15);
-			outline: none;
-		}`);
+		focusStyleSheet.replaceSync(getFocusRingStyles(
+			'.d2l-scroll-wrapper-focus',
+			{ extraStyles: css`box-shadow: 0 0 0 2px #ffffff, 0 2px 12px 0 rgba(0, 0, 0, 0.15);` }
+		));
 	}
 	return focusStyleSheet;
 }

package/components/switch/switch-mixin.js

@@ -150,8 +150,9 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 				display: none;
 			}
 			.d2l-switch-inner:hover, .switch-hover {
-				border-color: var(--d2l-color-celestine);
-				box-shadow: 0 0 0 1px var(--d2l-color-celestine) inset;
+				border-color: transparent;
+				outline: 2px solid var(--d2l-color-celestine);
+				outline-offset: -2px;
 			}
 			@media (prefers-reduced-motion: reduce) {
 				.d2l-switch-toggle,

package/components/table/table-col-sort-button.js

@@ -3,10 +3,10 @@ import '../dropdown/dropdown.js';
 import '../dropdown/dropdown-menu.js';
 import '../icons/icon.js';
 import '../menu/menu.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 { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -116,11 +116,7 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 			button:hover {
 				background-color: var(--d2l-color-gypsum);
 			}
-			button:focus-visible,
-			button:${unsafeCSS(getFocusPseudoClass())} {
-				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
-				outline-style: none;
-			}
+			${getFocusRingStyles('button', { extraStyles: css`box-shadow: 0 0 0 2px #ffffff;` })}
 			d2l-icon {
 				margin-inline-start: 0.6rem;
 			}

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

@@ -18,7 +18,7 @@ class TabCustom extends TabMixin(LitElement) {
 			}
 			${getFocusRingStyles(
 				pseudoClass => `:host(:${pseudoClass}) .d2l-tab-custom-content`,
-				{ extraStyles: 'border-radius: 0.3rem; color: var(--d2l-color-celestine);' }
+				{ extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` }
 			)}
 		`];
 

package/components/tabs/tab-internal.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const keyCodes = {
@@ -32,6 +32,7 @@ class Tab extends SkeletonMixin(LitElement) {
 				vertical-align: middle;
 			}
 			.d2l-tab-text {
+				--d2l-focus-ring-offset: 0;
 				margin: 0.5rem;
 				overflow: hidden;
 				padding: 0.1rem;
@@ -67,11 +68,7 @@ class Tab extends SkeletonMixin(LitElement) {
 				margin-inline-start: 0;
 				width: calc(100% - 0.6rem);
 			}
-			:host(:${unsafeCSS(getFocusPseudoClass())}) > .d2l-tab-text {
-				border-radius: 0.3rem;
-				box-shadow: 0 0 0 2px var(--d2l-color-celestine);
-				color: var(--d2l-color-celestine);
-			}
+			${getFocusRingStyles(pseudoClass => `:host(:${pseudoClass}) > .d2l-tab-text`, { extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` })}
 			:host([aria-selected="true"]:focus) {
 				text-decoration: none;
 			}

package/components/tabs/tabs.js

@@ -4,10 +4,10 @@ import '../../helpers/queueMicrotask.js';
 import './tab-internal.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { cssEscape, findComposedAncestor, getOffsetParent } from '../../helpers/dom.js';
+import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -159,9 +159,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 			.d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
 				background-color: var(--d2l-color-gypsum);
 			}
-			.d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
-				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
-			}
+			${getFocusRingStyles('.d2l-tabs-scroll-button')}
 			:host([skeleton]) .d2l-tabs-scroll-button {
 				visibility: hidden;
 			}

package/custom-elements.json

@@ -11519,6 +11519,11 @@
       "name": "d2l-test-popover",
       "path": "./components/popover/test/popover.js",
       "attributes": [
+        {
+          "name": "margin",
+          "description": "Margin to include when computing space available.",
+          "type": "number"
+        },
         {
           "name": "max-height",
           "description": "Max-height. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.",
@@ -11580,6 +11585,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "margin",
+          "attribute": "margin",
+          "description": "Margin to include when computing space available.",
+          "type": "number"
+        },
         {
           "name": "maxHeight",
           "attribute": "max-height",