@brightspace-ui/core 3.142.2 → 3.143.0

package/components/popover/demo/popover.html

@@ -38,7 +38,7 @@
 					<div style="border: 1px solid black; width: 600px;">stuff</div>
 					<div slot="footer">footer content</div>
 				</d2l-test-popover>
-				<script>
+				<script data-demo-hide>
 					window.wireUpPopover(document.currentScript.parentNode);
 				</script>
 			</template>
@@ -51,7 +51,7 @@
 				<d2l-test-popover>
 					<div>1</div>
 				</d2l-test-popover>
-				<script>
+				<script data-demo-hide>
 					window.wireUpPopover(document.currentScript.parentNode);
 				</script>
 			</template>
@@ -64,7 +64,7 @@
 				<d2l-test-popover>
 					<div>Sink me piracy Gold Road.</div>
 				</d2l-test-popover>
-				<script>
+				<script data-demo-hide>
 					window.wireUpPopover(document.currentScript.parentNode);
 				</script>
 			</template>
@@ -77,7 +77,7 @@
 				<d2l-test-popover>
 					<div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
 				</d2l-test-popover>
-				<script>
+				<script data-demo-hide>
 					window.wireUpPopover(document.currentScript.parentNode);
 				</script>
 			</template>
@@ -90,7 +90,7 @@
 				<d2l-test-popover no-pointer>
 					<div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
 				</d2l-test-popover>
-				<script>
+				<script data-demo-hide>
 					window.wireUpPopover(document.currentScript.parentNode);
 				</script>
 			</template>
@@ -103,7 +103,7 @@
 				<d2l-test-popover max-width="1000">
 					<div>Sink me piracy Gold Road quarterdeck wherry and some.</div>
 				</d2l-test-popover>
-				<script>
+				<script data-demo-hide>
 					window.wireUpPopover(document.currentScript.parentNode);
 				</script>
 			</template>
@@ -116,7 +116,7 @@
 				<d2l-test-popover max-width="1000">
 					<div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
 				</d2l-test-popover>
-				<script>
+				<script data-demo-hide>
 					window.wireUpPopover(document.currentScript.parentNode);
 				</script>
 			</template>
@@ -129,7 +129,7 @@
 				<d2l-test-popover min-width="60">
 					<div>1</div>
 				</d2l-test-popover>
-				<script>
+				<script data-demo-hide>
 					window.wireUpPopover(document.currentScript.parentNode);
 				</script>
 			</template>
@@ -138,25 +138,34 @@
 		<h2>Popover (position location)</h2>
 		<d2l-demo-snippet>
 			<template>
-				<d2l-button-subtle text="Open"></d2l-button-subtle>
-				<d2l-test-popover position-location="block-start">
-					<div>Sink me piracy Gold Road.</div>
-				</d2l-test-popover>
-				<script>
-					window.wireUpPopover(document.currentScript.parentNode);
-				</script>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Popover (position span)</h2>
-		<d2l-demo-snippet>
-			<template>
-				<div style="text-align: center;"><d2l-button-subtle text="Open"></d2l-button-subtle></div>
-				<d2l-test-popover position-span="end">
-					<div>Sink me piracy Gold Road.</div>
-				</d2l-test-popover>
-				<script>
-					window.wireUpPopover(document.currentScript.parentNode);
+				<div>
+					<select id="location">
+						<option value="block-start">block-start</option>
+						<option value="block-end" selected>block-end</option>
+						<option value="inline-start">inline-start</option>
+						<option value="inline-end">inline-end</option>
+					</select>
+					<select id="span">
+						<option value="all" selected>all</option>
+						<option value="start">start</option>
+						<option value="end">end</option>
+					</select>
+				</div>
+				<div style="text-align: center;">
+					<d2l-button-subtle text="Open"></d2l-button-subtle>
+					<d2l-test-popover position-location="block-end">
+						<div>Sink me piracy Gold Road.</div>
+					</d2l-test-popover>
+				</div>
+				<script data-demo-hide>
+					const demo = document.currentScript.parentNode;
+					window.wireUpPopover(demo);
+					demo.querySelector('#location').addEventListener('change', e => {
+						demo.querySelector('d2l-test-popover').positionLocation = e.target.value;
+					});
+					demo.querySelector('#span').addEventListener('change', e => {
+						demo.querySelector('d2l-test-popover').positionSpan = e.target.value;
+					});
 				</script>
 			</template>
 		</d2l-demo-snippet>
@@ -174,7 +183,7 @@
 					<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
 					<p>Hardtack hang the jib haul wind booty pillage spike hearties Pirate Round tack yard. Piracy fire ship trysail stern scurvy blow the man down skysail salmagundi lee grog blossom. Hands gabion ho schooner lad ballast keel mutiny square-rigged haul wind.</p>
 				</div>
-				<script>
+				<script data-demo-hide>
 					window.wireUpPopover(document.currentScript.parentNode);
 				</script>
 			</template>
@@ -190,7 +199,7 @@
 						<d2l-button-subtle id="mutations-add-above">Add to Above</d2l-button-subtle>
 					</d2l-test-popover>
 				</div>
-				<script>
+				<script data-demo-hide>
 					window.wireUpPopover(document.currentScript.parentNode);
 
 					document.querySelector('#mutations-add-above').addEventListener('click', e => {
@@ -221,7 +230,7 @@
 					<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
 					<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
 				</d2l-dialog>
-				<script>
+				<script data-demo-hide>
 					document.querySelector('#openDialog1').addEventListener('click', () => {
 						document.querySelector('#dialog1').opened = true;
 					});
@@ -243,7 +252,7 @@
 						<div>Piracy bowsprit Arr shrouds salmagundi scuttle heave down doubloon trysail Jack Ketch. Killick boom Jolly Roger Pieces of Eight crack Jennys tea cup Cat o'nine tails league Privateer topgallant lanyard. Cat o'nine tails coxswain scurvy spirits keelhaul quarterdeck matey nipper scallywag Jolly Roger.</div>
 					</d2l-test-popover>
 				</d2l-test-popover>
-				<script>
+				<script data-demo-hide>
 					document.querySelector('#outerOpener').addEventListener('click', () => {
 						const popover = document.querySelector('#outerPopover');
 						popover.opened = !popover.opened;
@@ -266,7 +275,7 @@
 					<div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
 					<d2l-button-subtle text="Close"></d2l-button-subtle>
 				</d2l-test-popover>
-				<script>
+				<script data-demo-hide>
 					window.wireUpPopover(document.currentScript.parentNode);
 				</script>
 			</template>
@@ -281,7 +290,7 @@
 					<d2l-link href="https://pirateipsum.me/" target="_blank">Pirate Ipsum</d2l-link>
 					<div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
 				</d2l-test-popover>
-				<script>
+				<script data-demo-hide>
 					window.wireUpPopover(document.currentScript.parentNode);
 				</script>
 			</template>

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/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",

package/package.json

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