@brightspace-ui/core 3.90.0 → 3.92.0

package/components/collapsible-panel/collapsible-panel-group.js

@@ -1,6 +1,7 @@
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { SkeletonGroupMixin } from '../skeleton/skeleton-group-mixin.js';
+import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
 /**
  * A component that renders a container and layout for collapsible panels
@@ -10,7 +11,7 @@ class CollapsiblePanelGroup extends SkeletonGroupMixin(LitElement) {
 
 	static get properties() {
 		return {
-			_panels: { state: true },
+			_spaced: { state: true }
 		};
 	}
 
@@ -32,39 +33,28 @@ class CollapsiblePanelGroup extends SkeletonGroupMixin(LitElement) {
 
 	constructor() {
 		super();
-		this._panels = [];
+		this._panels = new SubscriberRegistryController(this, 'collapsible-panel-group');
+		this._spaced = true;
 	}
 
 	render() {
 		const classes = {
-			spaced: this._panels?.[0]?.type !== 'inline',
+			spaced: this._spaced,
 		};
 
-		return html`<slot class="${classMap(classes)}" @slotchange="${this._handleSlotChange}"></slot>`;
-	}
-
-	async _getPanels() {
-		const slot = this.shadowRoot?.querySelector('slot');
-		if (!slot) return;
-
-		return slot.assignedNodes({ flatten: true }).filter((node) => node.nodeType === Node.ELEMENT_NODE);
-	}
-
-	async _handleSlotChange() {
-		this._panels = await this._getPanels();
-		this._updatePanelAttributes();
+		return html`<slot class="${classMap(classes)}"></slot>`;
 	}
 
 	_updatePanelAttributes() {
-		if (!this._panels || this._panels.length === 0) return;
-
-		if (this._panels[0]?.type !== 'inline') return;
-
-		for (const panel of this._panels) {
-			panel._noBottomBorder = true;
-		}
-
-		this._panels[this._panels.length - 1]._noBottomBorder = false;
+		const panels = this.shadowRoot
+			?.querySelector('slot')
+			?.assignedNodes({ flatten: true })
+			.filter((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName === 'D2L-COLLAPSIBLE-PANEL');
+		if (!panels?.length) return;
+
+		const isInline = panels[0].type === 'inline';
+		this._spaced = !isInline;
+		panels.forEach((p, idx) => p._isLastPanelInGroup = idx === panels.length - 1);
 	}
 }
 

package/components/collapsible-panel/collapsible-panel.js

@@ -4,6 +4,7 @@ import '../expand-collapse/expand-collapse-content.js';
 import { css, html, LitElement } from 'lit';
 import { heading1Styles, heading2Styles, heading3Styles, heading4Styles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { EventSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
@@ -86,7 +87,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			_focused: { state: true },
 			_hasBefore: { state: true },
 			_hasSummary: { state: true },
-			_noBottomBorder: { state: true },
+			_isLastPanelInGroup: { state: true },
 			_scrolled: { state: true },
 		};
 	}
@@ -321,8 +322,15 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 		this.type = 'default';
 		this.noSticky = false;
 		this._focused = false;
+		this._group = undefined;
+		this._groupSubscription = new EventSubscriberController(this, 'collapsible-panel-group', {
+			onSubscribe: (registry) => {
+				this._group = registry;
+				this._group._updatePanelAttributes();
+			}
+		});
 		this._hasSummary = false;
-		this._noBottomBorder = false;
+		this._isLastPanelInGroup = true;
 		this._scrolled = false;
 	}
 
@@ -342,7 +350,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			'has-summary': this._hasSummary,
 			'has-before': this._hasBefore,
 			'scrolled': this._scrolled,
-			'no-bottom-border': this._noBottomBorder,
+			'no-bottom-border': this.type === 'inline' && !this._isLastPanelInGroup,
 		};
 
 		return html`
@@ -378,6 +386,10 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 		if (changedProperties.has('noSticky')) {
 			this._stickyObserverUpdate();
 		}
+
+		if (changedProperties.has('type')) {
+			this._group?._updatePanelAttributes();
+		}
 	}
 
 	_handleActionsClick(e) {

package/components/dropdown/demo/dropdown-positioning.html

@@ -1,14 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
 	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 	<meta charset="UTF-8">
 	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-	<script>
-		const urlParams = new URLSearchParams(window.location.search);
-		window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => (urlParams.get('position') === 'fixed') } } } } };
-	</script>
 	<script type="module">
 		import '../../demo/demo-page.js';
 		import '../../button/button.js';
@@ -19,19 +14,18 @@
 		import '../../table/demo/table-test.js';
 	</script>
 </head>
-
 <body unresolved>
 
-	<d2l-demo-page page-title="d2l-dropdown">
+	<d2l-demo-page page-title="d2l-dropdown (positioning)">
 
 		<h2>Dropdown (in a scrollable container)</h2>
 		<d2l-demo-snippet>
 			<template>
 				<div style="height: 250px; overflow: scroll;">
 					<p>Gabion warp American Main gunwalls cutlass gally cable gibbet jib keel. Trysail chantey swing the lead hempen halter hang the jib chase Jack Tar furl galleon scurvy. Brig splice the main brace provost pink rutters tender heave to Shiver me timbers belaying pin Brethren of the Coast.</p>
-					<d2l-dropdown prefer-fixed-positioning>
+					<d2l-dropdown>
 						<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
-						<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
+						<d2l-dropdown-content max-width="400">
 							<a href="https://youtu.be/9ze87zQFSak">Google</a>
 							<p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
 							<a href="http://www.desire2learn.com">D2L</a>
@@ -56,13 +50,13 @@
 
 		<d2l-demo-snippet>
 			<template>
-				<d2l-dropdown prefer-fixed-positioning>
+				<d2l-dropdown>
 					<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
-					<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
+					<d2l-dropdown-content max-width="400">
 						<p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign.</p>
-						<d2l-dropdown prefer-fixed-positioning>
+						<d2l-dropdown>
 							<d2l-button-subtle class="d2l-dropdown-opener">Open Nested!</d2l-button-subtle>
-							<d2l-dropdown-content max-width="600" align="start" prefer-fixed-positioning>
+							<d2l-dropdown-content max-width="600" align="start">
 								<a href="https://youtu.be/9ze87zQFSak">Google</a>
 								<p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
 								<a href="http://www.desire2learn.com">D2L</a>
@@ -82,9 +76,9 @@
 				<d2l-dialog id="dialog1" title-text="Dialog Title">
 					<div>
 						<p>Bilge tack furl dance the hempen jig fathom weigh anchor mizzen Blimey Jack Ketch flogging. Lee galleon avast schooner long clothes scuppers pinnace bucko deadlights gibbet. Nipper brigantine Buccaneer Gold Road matey gangway booty tender killick Brethren of the Coast.</p>
-						<d2l-dropdown prefer-fixed-positioning>
+						<d2l-dropdown>
 							<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
-							<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
+							<d2l-dropdown-content max-width="400">
 								<a href="https://youtu.be/9ze87zQFSak">Google</a>
 								<p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
 								<a href="http://www.desire2learn.com">D2L</a>
@@ -111,9 +105,9 @@
 			<template>
 				<div>
 					<div id="mutations-above"></div>
-					<d2l-dropdown prefer-fixed-positioning>
+					<d2l-dropdown>
 						<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
-						<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
+						<d2l-dropdown-content max-width="400">
 							<d2l-button-subtle id="mutations-add-above">Add to Above</d2l-button-subtle>
 						</d2l-dropdown-content>
 					</d2l-dropdown>
@@ -129,9 +123,5 @@
 			</template>
 		</d2l-demo-snippet>
 
-		<script>
-			document.querySelector('d2l-demo-page').pageTitle = `d2l-dropdown (${ window.D2L.LP.Web.UI.Flags.Flag('GAUD-131-dropdown-fixed-positioning', false) ? 'fixed' : 'relative' })`;
-		</script>
 </body>
-
 </html>

package/components/dropdown/dropdown-content-mixin.js

@@ -189,14 +189,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				reflect: true,
 				attribute: 'opened-above'
 			},
-			/**
-			 * Temporary.
-			 * @ignore
-			 */
-			preferFixedPositioning: {
-				type: Boolean,
-				attribute: 'prefer-fixed-positioning'
-			},
 			/**
  			* Optionally render a d2l-focus-trap around the dropdown content
 			 * @type {boolean}
@@ -225,11 +217,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				attribute: 'dropdown-content',
 				reflect: true
 			},
-			_fixedPositioning: {
-				type: Boolean,
-				attribute: '_fixed-positioning',
-				reflect: true
-			},
 			_useMobileStyling: {
 				type: Boolean,
 				attribute: 'data-mobile',
@@ -370,12 +357,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		});
 	}
 
-	willUpdate(changedProperties) {
-		if (this._fixedPositioning === undefined || changedProperties.has('preferFixedPositioning')) {
-			this._fixedPositioning = (window.D2L?.LP?.Web?.UI?.Flags.Flag('GAUD-131-dropdown-fixed-positioning', false) && this.preferFixedPositioning);
-		}
-	}
-
 	close() {
 		const hide = () => {
 			this._closing = false;
@@ -460,7 +441,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 	}
 
 	__addRepositionHandlers() {
-		if (!this._fixedPositioning) return;
 
 		const isScrollable = (node, prop) => {
 			const value = window.getComputedStyle(node, null).getPropertyValue(prop);
@@ -722,16 +702,11 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		/* don't let dropdown content horizontally overflow viewport */
 		this._width = null;
 
-		const openerPosition = window.getComputedStyle(opener, null).getPropertyValue('position'); // todo: cleanup when switched to fixed positioning
 		const boundingContainer = getBoundingAncestor(target.parentNode);
-		const boundingContainerRect = boundingContainer.getBoundingClientRect(); // todo: cleanup when switched to fixed positioning
 		const scrollHeight = boundingContainer.scrollHeight;
 
 		await this.updateComplete;
 
-		// position check in case consuming app (LMS) has overriden position to make content absolute wrt document
-		const bounded = (!this._fixedPositioning && openerPosition === 'relative' && boundingContainer !== document.documentElement);
-
 		const adjustPosition = async() => {
 
 			const targetRect = target.getBoundingClientRect();
@@ -745,45 +720,21 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				width: contentRect.width
 			};
 
-			let spaceAround;
-			let spaceAroundScroll;
-			if (bounded) {
-
-				spaceAround = this._constrainSpaceAround({
-					// allow for target offset + outer margin
-					above: targetRect.top - boundingContainerRect.top - this._verticalOffset - outerMarginTopBottom,
-					// allow for target offset + outer margin
-					below: boundingContainerRect.bottom - targetRect.bottom - this._verticalOffset - outerMarginTopBottom,
-					// allow for outer margin
-					left: targetRect.left - boundingContainerRect.left - 20,
-					// allow for outer margin
-					right: boundingContainerRect.right - targetRect.right - 20
-				}, spaceRequired, targetRect);
-
-				spaceAroundScroll = this._constrainSpaceAround({
-					above: targetRect.top - boundingContainerRect.top + boundingContainer.scrollTop,
-					below: scrollHeight - targetRect.bottom + boundingContainerRect.top - boundingContainer.scrollTop
-				}, spaceRequired, targetRect);
-
-			} else {
-
-				spaceAround = this._constrainSpaceAround({
-					// allow for target offset + outer margin
-					above: targetRect.top - this._verticalOffset - outerMarginTopBottom,
-					// allow for target offset + outer margin
-					below: window.innerHeight - targetRect.bottom - this._verticalOffset - outerMarginTopBottom,
-					// allow for outer margin
-					left: targetRect.left - 20,
-					// allow for outer margin
-					right: document.documentElement.clientWidth - targetRect.right - 15
-				}, spaceRequired, targetRect);
-
-				spaceAroundScroll = this._constrainSpaceAround({
-					above: targetRect.top + document.documentElement.scrollTop,
-					below: scrollHeight - targetRect.bottom - document.documentElement.scrollTop
-				}, spaceRequired, targetRect);
-
-			}
+			const spaceAround = this._constrainSpaceAround({
+				// allow for target offset + outer margin
+				above: targetRect.top - this._verticalOffset - outerMarginTopBottom,
+				// allow for target offset + outer margin
+				below: window.innerHeight - targetRect.bottom - this._verticalOffset - outerMarginTopBottom,
+				// allow for outer margin
+				left: targetRect.left - 20,
+				// allow for outer margin
+				right: document.documentElement.clientWidth - targetRect.right - 15
+			}, spaceRequired, targetRect);
+
+			const spaceAroundScroll = this._constrainSpaceAround({
+				above: targetRect.top + document.documentElement.scrollTop,
+				below: scrollHeight - targetRect.bottom - document.documentElement.scrollTop
+			}, spaceRequired, targetRect);
 
 			if (options.updateAboveBelow) {
 				this.openedAbove = this._getOpenedAbove(spaceAround, spaceAroundScroll, spaceRequired);
@@ -813,7 +764,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		};
 
 		const scrollWidth = Math.max(header.scrollWidth, content.scrollWidth, footer.scrollWidth);
-		const availableWidth = (bounded ? boundingContainerRect.width - 60 : window.innerWidth - 40);
+		const availableWidth = window.innerWidth - 40;
 		this._width = (availableWidth > scrollWidth ? scrollWidth : availableWidth) ;
 
 		await this.updateComplete;
@@ -822,8 +773,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 	}
 
 	__removeRepositionHandlers() {
-		if (!this._fixedPositioning) return;
-
 		this._scrollablesObserved?.forEach(node => {
 			node.removeEventListener('scroll', this.__reposition);
 		});
@@ -1112,7 +1061,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 
 	_getPointerPosition(targetRect) {
 		const position = {};
-		if (!this._fixedPositioning) return position;
 
 		const pointer = this.__getPointer();
 		if (!pointer) return position;
@@ -1146,28 +1094,20 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		const position = {};
 		const isRTL = this.getAttribute('dir') === 'rtl';
 		const positionXAdjustment = this._getPositionXAdjustment(spaceAround, targetRect, contentRect);
-		if (this._fixedPositioning) {
-			if (positionXAdjustment !== null) {
-				if (!isRTL) {
-					position.left = targetRect.left + positionXAdjustment;
-				} else {
-					position.right = window.innerWidth - targetRect.left - targetRect.width + positionXAdjustment;
-				}
-			}
-			if (this.openedAbove) {
-				position.bottom = window.innerHeight - targetRect.top + this._verticalOffset;
+
+		if (positionXAdjustment !== null) {
+			if (!isRTL) {
+				position.left = targetRect.left + positionXAdjustment;
 			} else {
-				position.top = targetRect.top + targetRect.height + this._verticalOffset;
+				position.right = window.innerWidth - targetRect.left - targetRect.width + positionXAdjustment;
 			}
+		}
+		if (this.openedAbove) {
+			position.bottom = window.innerHeight - targetRect.top + this._verticalOffset;
 		} else {
-			if (positionXAdjustment !== null) {
-				if (!isRTL) {
-					position.left = positionXAdjustment;
-				} else {
-					position.right = positionXAdjustment;
-				}
-			}
+			position.top = targetRect.top + targetRect.height + this._verticalOffset;
 		}
+
 		return position;
 	}
 

package/components/dropdown/dropdown-content-styles.js

@@ -3,7 +3,6 @@ import { _offscreenStyleDeclarations } from '../offscreen/offscreen.js';
 import { css } from 'lit';
 
 const pointerLength = 16;
-const pointerRotatedLength = Math.SQRT2 * parseFloat(pointerLength);
 
 export const dropdownContentStyles = css`
 
@@ -18,16 +17,12 @@ export const dropdownContentStyles = css`
 		color: var(--d2l-dropdown-foreground-color);
 		display: none;
 		left: 0;
-		position: absolute;
+		position: fixed;
 		text-align: left;
-		top: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
+		top: 0;
 		width: 100%;
 		z-index: 998; /* position on top of floating buttons */
 	}
-	:host([_fixed-positioning]) {
-		position: fixed;
-		top: 0;
-	}
 
 	:host([theme="dark"]) {
 		--d2l-dropdown-above-animation-name: d2l-dropdown-above-animation-dark;
@@ -46,7 +41,7 @@ export const dropdownContentStyles = css`
 
 	:host([opened-above]) {
 		animation: var(--d2l-dropdown-above-animation-name) 300ms ease;
-		bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
+		bottom: 0;
 		top: auto;
 	}
 
@@ -57,39 +52,16 @@ export const dropdownContentStyles = css`
 
 	:host([data-mobile][opened-above]:not([mobile-tray])) {
 		animation: var(--d2l-dropdown-above-animation-name) 300ms ease;
-		bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
-		top: auto;
-	}
-
-	:host([_fixed-positioning][opened-above]),
-	:host([_fixed-positioning][data-mobile][opened-above]:not([mobile-tray])) {
 		bottom: 0;
+		top: auto;
 	}
 
 	.d2l-dropdown-content-pointer {
 		clip: rect(-5px, 21px, 8px, -7px);
 		display: inline-block;
-		left: calc(50% - 7px); /* todo: cleanup when switched to fixed positioning */
 		position: absolute;
-		top: -7px; /* todo: cleanup when switched to fixed positioning */
 		z-index: 1;
 	}
-	:host([_fixed-positioning][dir="rtl"]) .d2l-dropdown-content-pointer {
-		left: auto;
-	}
-
-	:host([align="start"]) .d2l-dropdown-content-pointer,
-	:host([align="end"][dir="rtl"]) .d2l-dropdown-content-pointer {
-		/* todo: cleanup when switched to fixed positioning */
-		left: min(calc(1rem + ${(pointerRotatedLength - pointerLength) / 2}px), calc(50% - ${pointerLength / 2}px)); /* 1rem corresponds to .d2l-dropdown-content-container padding */
-		right: auto;
-	}
-	:host([align="end"]) .d2l-dropdown-content-pointer,
-	:host([align="start"][dir="rtl"]) .d2l-dropdown-content-pointer {
-		/* todo: cleanup when switched to fixed positioning */
-		left: auto;
-		right: min(calc(1rem + ${(pointerRotatedLength - pointerLength) / 2}px), calc(50% - ${pointerLength / 2}px)); /* 1rem corresponds to .d2l-dropdown-content-container padding */
-	}
 
 	.d2l-dropdown-content-pointer > div {
 		background-color: var(--d2l-dropdown-background-color);
@@ -103,13 +75,10 @@ export const dropdownContentStyles = css`
 	}
 
 	:host([opened-above]) .d2l-dropdown-content-pointer {
-		bottom: -8px;
+		bottom: auto;
 		clip: rect(9px, 21px, 22px, -3px);
 		top: auto;
 	}
-	:host([_fixed-positioning][opened-above]) .d2l-dropdown-content-pointer {
-		bottom: auto;
-	}
 
 	:host([opened-above]) .d2l-dropdown-content-pointer > div {
 		box-shadow: 4px 4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */

package/components/dropdown/dropdown-opener-mixin.js

@@ -51,19 +51,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 				type: Boolean,
 				attribute: 'open-on-hover'
 			},
-			/**
-			 * Temporary.
-			 * @ignore
-			 */
-			preferFixedPositioning: {
-				type: Boolean,
-				attribute: 'prefer-fixed-positioning'
-			},
-			_fixedPositioning: {
-				type: Boolean,
-				attribute: '_fixed-positioning',
-				reflect: true,
-			},
 			_isHovering: { type: Boolean },
 			_isOpenedViaClick: { type: Boolean },
 			_isFading: { type: Boolean }
@@ -98,7 +85,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this.addEventListener('mouseenter', this.__onMouseEnter);
 		this.addEventListener('mouseleave', this.__onMouseLeave);
 
-		if (this._fixedPositioning && this.dropdownOpened) {
+		if (this.dropdownOpened) {
 			intersectionObserver.observe(this);
 		}
 		if (this.openOnHover) {
@@ -114,9 +101,8 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this.removeEventListener('mouseenter', this.__onMouseEnter);
 		this.removeEventListener('mouseleave', this.__onMouseLeave);
 
-		if (this._fixedPositioning) {
-			intersectionObserver.unobserve(this);
-		}
+		intersectionObserver.unobserve(this);
+
 		if (this.openOnHover) {
 			document.body.removeEventListener('mouseup', this._onOutsideClick);
 		}
@@ -148,12 +134,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		}
 	}
 
-	willUpdate(changedProperties) {
-		if (this._fixedPositioning === undefined || changedProperties.has('preferFixedPositioning')) {
-			this._fixedPositioning = (window.D2L?.LP?.Web?.UI?.Flags.Flag('GAUD-131-dropdown-fixed-positioning', false) && this.preferFixedPositioning);
-		}
-	}
-
 	/* used by open-on-hover option */
 	async closeDropdown(fadeOut) {
 		this.dropdownOpened = false;
@@ -219,9 +199,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	}
 
 	__onClosed() {
-		if (this._fixedPositioning) {
-			intersectionObserver.unobserve(this);
-		}
+		intersectionObserver.unobserve(this);
 
 		const opener = this.getOpenerElement();
 		if (!opener) {
@@ -303,9 +281,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		opener.setAttribute('active', 'true');
 		this._isFading = false;
 
-		if (this._fixedPositioning) {
-			intersectionObserver.observe(this);
-		}
+		intersectionObserver.observe(this);
 	}
 
 	__onOpenerMouseUp(e) {

package/components/dropdown/dropdown-opener-styles.js

@@ -5,9 +5,6 @@ export const dropdownOpenerStyles = css`
 		display: inline-block;
 		outline: none;
 		overflow: visible;
-		position: relative;
-	}
-	:host([_fixed-positioning]) {
 		position: static;
 	}
 	:host([hidden]) {

package/components/filter/demo/filter.html

@@ -15,9 +15,6 @@
 		import './filter-search-demo.js';
 		import './filter-load-more-demo.js';
 	</script>
-	<script>
-		window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } }; // TODO: remove with GAUD-131-dropdown-fixed-positioning flag clean up
-	</script>
 	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0">
     <meta charset="UTF-8">
 </head>

package/components/filter/filter-dimension-set-date-time-range-value.js

@@ -144,7 +144,6 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 				inclusive-date-range
 				label="${this.localize('components.filter-dimension-set-date-time-range-value.text')}"
 				label-hidden
-				prefer-fixed-positioning
 				start-value="${ifDefined(this.startValue ? getLocalDateTimeFromUTCDateTime(this.startValue) : undefined)}"
 			></d2l-input-date-range>`
 			: html`<d2l-input-date-time-range
@@ -153,7 +152,6 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 				end-value="${ifDefined(this.endValue)}"
 				label="${this.localize('components.filter-dimension-set-date-time-range-value.text')}"
 				label-hidden
-				prefer-fixed-positioning
 				start-value="${ifDefined(this.startValue)}"
 			></d2l-input-date-time-range>
 		`;

package/components/filter/filter.js

@@ -219,7 +219,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			/* Needed to "undo" the menu-item style for multiple dimensions */
 			d2l-hierarchical-view {
 				cursor: auto;
-				overflow: auto; /* remove with GAUD-131-dropdown-fixed-positioning flag clean up */
 			}
 
 			d2l-loading-spinner {
@@ -287,7 +286,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 					no-padding-header
 					no-padding
 					?opened="${this.opened}"
-					prefer-fixed-positioning
 					?trap-focus="${!this._isDimensionEmpty(this._dimensions[0])}">
 					${header}
 					${dimensions}
@@ -301,7 +299,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 					mobile-breakpoint="768"
 					no-padding-header
 					?opened="${this.opened}"
-					prefer-fixed-positioning
 					trap-focus>
 					${header}
 					<d2l-menu label="${this.localize('components.filter.filters')}">
@@ -326,8 +323,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				@d2l-dropdown-open="${this._handleDropdownOpen}"
 				@d2l-dropdown-position="${this._stopPropagation}"
 				class="vdiff-target"
-				?disabled="${this.disabled}"
-				prefer-fixed-positioning>
+				?disabled="${this.disabled}">
 				<d2l-button-subtle
 					class="d2l-dropdown-opener"
 					description="${description}"

package/components/inputs/input-date-range.js

@@ -93,11 +93,6 @@ class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormEleme
 			 * @type {string}
 			 */
 			minValue: { attribute: 'min-value', reflect: true, type: String },
-			/**
-			 * Temporary.
-			 * @ignore
-			 */
-			preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
 			/**
 			 * Indicates that values are required
 			 * @type {boolean}
@@ -203,7 +198,6 @@ class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormEleme
 						max-value="${ifDefined(this.maxValue)}"
 						min-value="${ifDefined(this.minValue)}"
 						?opened="${this.startOpened}"
-						?prefer-fixed-positioning="${this.preferFixedPositioning}"
 						?required="${this.required}"
 						?skeleton="${this.skeleton}"
 						slot="left"
@@ -222,7 +216,6 @@ class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormEleme
 						max-value="${ifDefined(this.maxValue)}"
 						min-value="${ifDefined(this.minValue)}"
 						?opened="${this.endOpened}"
-						?prefer-fixed-positioning="${this.preferFixedPositioning}"
 						?required="${this.required}"
 						?skeleton="${this.skeleton}"
 						slot="right"

package/components/inputs/input-date-time-range.js

@@ -131,11 +131,6 @@ class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormE
 			 * @type {string}
 			 */
 			minValue: { attribute: 'min-value', reflect: true, type: String },
-			/**
-			 * Temporary.
-			 * @ignore
-			 */
-			preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
 			/**
 			 * Indicates that values are required
 			 * @type {boolean}
@@ -254,7 +249,6 @@ class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormE
 							max-value="${ifDefined(this.maxValue)}"
 							min-value="${ifDefined(this.minValue)}"
 							?opened="${this.startOpened}"
-							?prefer-fixed-positioning="${this.preferFixedPositioning}"
 							?required="${this.required}"
 							?skeleton="${this.skeleton}"
 							time-default-value="startOfDay"
@@ -277,7 +271,6 @@ class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormE
 							max-value="${ifDefined(this.maxValue)}"
 							min-value="${ifDefined(this.minValue)}"
 							?opened="${this.endOpened}"
-							?prefer-fixed-positioning="${this.preferFixedPositioning}"
 							?required="${this.required}"
 							?skeleton="${this.skeleton}"
 							time-default-value="endOfDay"

package/components/inputs/input-date-time.js

@@ -76,11 +76,6 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 			 * @type {boolean}
 			 */
 			opened: { type: Boolean },
-			/**
-			 * Temporary.
-			 * @ignore
-			 */
-			preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
 			/**
 			 * Indicates that a value is required
 			 * @type {boolean}
@@ -253,7 +248,6 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 				label-hidden
 				.labelRequired="${false}"
 				max-height="430"
-				?prefer-fixed-positioning="${this.preferFixedPositioning}"
 				?required="${this.required}"
 				?skeleton="${this.skeleton}"
 				.value="${parsedValue}">
@@ -283,7 +277,6 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 						max-value="${ifDefined(this._maxValueLocalized)}"
 						min-value="${ifDefined(this._minValueLocalized)}"
 						?opened="${dateOpened}"
-						?prefer-fixed-positioning="${this.preferFixedPositioning}"
 						?required="${this.required}"
 						?skeleton="${this.skeleton}"
 						style="${styleMap(dateStyle)}"

package/components/inputs/input-date.js

@@ -68,11 +68,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			 * @type {boolean}
 			 */
 			opened: { type: Boolean, reflect: true },
-			/**
-			 * Temporary.
-			 * @ignore
-			 */
-			preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
 			/**
 			 * Indicates that a value is required
 			 * @type {boolean}
@@ -264,8 +259,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 				trap-focus
 				no-auto-focus
 				mobile-tray="bottom"
-				no-padding
-				?prefer-fixed-positioning="${this.preferFixedPositioning}">
+				no-padding>
 				<d2l-calendar
 					@d2l-calendar-selected="${this._handleDateSelected}"
 					label="${ifDefined(this.label)}"
@@ -285,7 +279,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 				<div>${shortDateFormat}</div>
 			</div>
 			${tooltip}
-			<d2l-dropdown ?disabled="${this.disabled || this.skeleton}" no-auto-open ?prefer-fixed-positioning="${this.preferFixedPositioning}">
+			<d2l-dropdown ?disabled="${this.disabled || this.skeleton}" no-auto-open>
 				<d2l-input-text
 					?novalidate="${this.noValidate}"
 					aria-invalid="${this.invalid ? 'true' : 'false'}"

package/components/inputs/input-time-range.js

@@ -95,11 +95,6 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 			 * @type {boolean}
 			 */
 			labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
-			/**
-			 * Temporary.
-			 * @ignore
-			 */
-			preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
 			/**
 			 * Indicates that values are required
 			 * @type {boolean}
@@ -253,7 +248,6 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 						label="${startLabel}"
 						?label-hidden="${this.childLabelsHidden}"
 						?opened="${this.startOpened}"
-						?prefer-fixed-positioning="${this.preferFixedPositioning}"
 						?required="${this.required}"
 						?skeleton="${this.skeleton}"
 						slot="left"
@@ -272,7 +266,6 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 						label="${endLabel}"
 						?label-hidden="${this.childLabelsHidden}"
 						?opened="${this.endOpened}"
-						?prefer-fixed-positioning="${this.preferFixedPositioning}"
 						?required="${this.required}"
 						?skeleton="${this.skeleton}"
 						slot="right"

package/components/inputs/input-time.js

@@ -154,11 +154,6 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 			 * @type {boolean}
 			 */
 			opened: { type: Boolean },
-			/**
-			 * Temporary.
-			 * @ignore
-			 */
-			preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
 			/**
 			 * Indicates that a value is required
 			 * @type {boolean}
@@ -342,7 +337,7 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 				class="${this.label && !this.labelHidden && !this.labelledBy ? 'd2l-input-label d2l-skeletize' : 'd2l-offscreen'}"
 				for="${this._dropdownId}-input"
 				id="${this._dropdownId}-label">${this.label}</label>
-			<d2l-dropdown class="d2l-skeletize" ?disabled="${disabled}" ?prefer-fixed-positioning="${this.preferFixedPositioning}">
+			<d2l-dropdown class="d2l-skeletize" ?disabled="${disabled}">
 				<input
 					aria-invalid="${this.invalid ? 'true' : 'false'}"
 					aria-controls="${this._dropdownId}"
@@ -366,8 +361,7 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 					no-padding-footer
 					max-height="${ifDefined(this.maxHeight)}"
 					min-width="195"
-					?opened="${opened}"
-					?prefer-fixed-positioning="${this.preferFixedPositioning}">
+					?opened="${opened}">
 					<d2l-menu
 						aria-labelledby="${this._dropdownId}-label"
 						class="d2l-input-time-menu"

package/components/popover/popover-mixin.js

@@ -20,9 +20,6 @@ const pointerLength = 16;
 const pointerRotatedLength = Math.SQRT2 * parseFloat(pointerLength);
 const isSupported = ('popover' in HTMLElement.prototype);
 
-// eslint-disable-next-line no-console
-console.log('Popover', isSupported);
-
 export const PopoverMixin = superclass => class extends superclass {
 
 	static get properties() {

package/components/table/demo/table.html

@@ -8,9 +8,6 @@
 			import '../../demo/demo-page.js';
 			import './table-test.js';
 		</script>
-		<script>
-			window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } }; // TODO: remove with GAUD-131-dropdown-fixed-positioning flag clean up
-		</script>
 	</head>
 	<body unresolved>
 

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

@@ -184,9 +184,9 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 				<slot></slot>${iconView}
 			</button><span id="${this._describedById}" hidden>${buttonDescription}</span>${sortedView}`;
 		if (this._hasDropdownItems) {
-			return html`<d2l-dropdown prefer-fixed-positioning>
+			return html`<d2l-dropdown>
 					${button}
-					<d2l-dropdown-menu no-pointer align="start" vertical-offset="0" prefer-fixed-positioning>
+					<d2l-dropdown-menu no-pointer align="start" vertical-offset="4">
 						<d2l-menu @d2l-table-col-sort-button-item-change="${this._handleTablColSortButtonItemChange}">
 							<slot name="items" @slotchange="${this._handleSlotChange}"></slot>
 						</d2l-menu>

package/package.json

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