@brightspace-ui/core 3.322.0 → 3.324.0

package/components/list/list-item-drag-drop-mixin.js

@@ -1,9 +1,10 @@
 import './list-item-drag-image.js';
 import { css, html, nothing } from 'lit';
-import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
+import { findComposedAncestor, getScrollableAncestor, isComposedAncestor } from '../../helpers/dom.js';
 import { announce } from '../../helpers/announce.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { dragActions } from './list-item-drag-handle.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { SelectionInfo } from '../selection/selection-mixin.js';
@@ -24,6 +25,8 @@ export const dropLocation = moveLocations; // backwards compatibility
 const dropTargetLeaveDelay = 1000; // ms
 const touchHoldDuration = 400; // length of time user needs to hold down touch before dragging occurs
 const scrollSensitivity = 150; // pixels between top/bottom of viewport to scroll for mobile
+const scrollContainerSensitivity = 60; // pixels between top/bottom of scrollable container to scroll for mobile
+const scrollSpeed = 10; // pixels to scroll for mobile
 
 const createDragEvent = (name) => {
 	const event = new Event(name, { bubbles: true });
@@ -427,6 +430,14 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		if (this.shadowRoot) this.shadowRoot.querySelector(`#${this._itemDragId}`).activateKeyboardMode();
 	}
 
+	get _isListItemDragAndDropMixin() {
+		return true;
+	}
+
+	#scrollableContainer;
+	#touchAction = '';
+	#improvedMobileDragAndDropFlag = getFlag('GAUD-10642-improved-mobile-drag-and-drop', true);
+
 	_annoucePositionChange(dragTargetKey, dropTargetKey, dropLocation) {
 		/** Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change). */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-position-change', {
@@ -557,7 +568,20 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 
 	_findListItemFromCoordinates(x, y) {
 		const listNode = findComposedAncestor(this.parentNode, (node) => node && node.tagName === 'D2L-LIST');
-		return listNode.shadowRoot.elementFromPoint(x, y);
+		// remove this if when cleaning 'GAUD-10642-improved-mobile-drag-and-drop'
+		if (!this.#improvedMobileDragAndDropFlag) {
+			return listNode.shadowRoot.elementFromPoint(x, y);
+		}
+
+		// This is to make sure that in Firefox it looks for the list item
+		// in the shadow DOM (if rendered as part of a template)
+		// or in the light DOM (when using the default slot of a parent element)
+		const node = listNode.getRootNode().elementFromPoint(x, y);
+		if (node?._isListItemDragAndDropMixin) {
+			return node;
+		}
+
+		return null;
 	}
 
 	_getKeyboardText() {
@@ -792,6 +816,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	_onTouchCancel() {
 		if (this._touchTimeoutId) clearTimeout(this._touchTimeoutId);
 		this._touchStarted = false;
+		if (this.#improvedMobileDragAndDropFlag) this.#resetScrollableContainer();
 	}
 
 	/**
@@ -800,14 +825,22 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	_onTouchEnd(e) {
 		if (this._touchTimeoutId) clearTimeout(this._touchTimeoutId);
 		if (!this._touchStarted) return;
-		e.preventDefault();
+		if (e.cancelable) e.preventDefault();
 		this._touchStarted = false;
+		// leave the code inside the if when removing 'GAUD-10642-improved-mobile-drag-and-drop'
+		if (this.#improvedMobileDragAndDropFlag) this.#resetScrollableContainer();
 		this._currentTouchListItem = undefined;
 		// simulate drop if over a drop area
 		const touch = e.changedTouches[0];
 		const listItem = this._findListItemFromCoordinates(touch.clientX, touch.clientY);
-		const dropGrid = listItem.shadowRoot.querySelector('.d2l-list-item-drag-drop-grid');
-		if (dropGrid) dropGrid.dispatchEvent(createDragEvent('drop'));
+		// remove the if when cleaning 'GAUD-10642-improved-mobile-drag-and-drop' and leave the else code block
+		if (!this.#improvedMobileDragAndDropFlag) {
+			const dropGrid = listItem.shadowRoot.querySelector('.d2l-list-item-drag-drop-grid');
+			if (dropGrid) dropGrid.dispatchEvent(createDragEvent('drop'));
+		} else if (listItem) {
+			const dropGrid = listItem.shadowRoot.querySelector('.d2l-list-item-drag-drop-grid');
+			if (dropGrid) dropGrid.dispatchEvent(createDragEvent('drop'));
+		}
 		// simulate dragend
 		if (this.shadowRoot)
 			this.shadowRoot.querySelector('.d2l-list-item-drag-area').dispatchEvent(createDragEvent('dragend'));
@@ -823,6 +856,8 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			e.preventDefault();
 		}
 		const touch = e.changedTouches[0];
+		if (this.#improvedMobileDragAndDropFlag) this.#doTouchScroll(touch);
+
 		const listItem = this._findListItemFromCoordinates(touch.clientX, touch.clientY);
 		if (!listItem) return;
 		// simulate host dragenter
@@ -830,6 +865,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			listItem.dispatchEvent(createDragEvent('dragenter'));
 			this._currentTouchListItem = listItem;
 		}
+
 		// get the drop area
 		const dropGrid = listItem.shadowRoot.querySelector('.d2l-list-item-drag-drop-grid');
 		if (!dropGrid) return;
@@ -845,6 +881,8 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				this._currentTouchDropArea = movingOverElem;
 			}
 		}
+		// Delete all of the following code when removing 'GAUD-10642-improved-scroll-in-mobile'
+		if (this.#improvedMobileDragAndDropFlag) return;
 		// scroll the viewport if we've reached the end
 		if (touch.clientY > window.innerHeight / 2 && window.innerHeight - touch.clientY < scrollSensitivity) {
 			// scroll down
@@ -862,6 +900,17 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		// simulate dragstart for touch and hold
 		this._touchTimeoutId = setTimeout(() => {
 			this._touchStarted = true;
+			// leave the code inside the if when removing 'GAUD-10642-improved-mobile-drag-and-drop'
+			if (this.#improvedMobileDragAndDropFlag) {
+				// search for scrollable container
+				this.#scrollableContainer = getScrollableAncestor(this);
+				if (this.#scrollableContainer) {
+					// check if it has the touch-action style already
+					const touchAction = this.#scrollableContainer.style.getPropertyValue('touch-action');
+					if (touchAction && touchAction !== 'none') this.#touchAction = touchAction;
+					this.#scrollableContainer.style.setProperty('touch-action', 'none');
+				}
+			}
 			if (this.shadowRoot)
 				this.shadowRoot.querySelector('.d2l-list-item-drag-area').dispatchEvent(createDragEvent('dragstart'));
 		}, touchHoldDuration);
@@ -933,6 +982,38 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		return this._dropLocation === dropLocation.above ? html`<div class="d2l-list-item-drag-top-marker">${renderTemplate}</div>` : null;
 	}
 
+	#doTouchScroll(touch) {
+		if (!touch || !this.#scrollableContainer) return;
+		if (this.#scrollableContainer === document.body) {
+			this.#handleViewPortTouchScrolling(touch);
+		} else {
+			this.#handleContainerTouchScrolling(touch);
+		}
+	}
+
+	#handleContainerTouchScrolling(touch) {
+		// scroll the viewport if we've reached the end
+		const rect = this.#scrollableContainer.getBoundingClientRect();
+		if (rect.bottom - touch.clientY < scrollContainerSensitivity) {
+			// scroll down
+			this.#scrollableContainer.scrollBy(0, scrollSpeed);
+		} else if (touch.clientY - rect.top < scrollContainerSensitivity) {
+			// scroll up
+			this.#scrollableContainer.scrollBy(0, -scrollSpeed);
+		}
+	}
+
+	#handleViewPortTouchScrolling(touch) {
+		const height = window.innerHeight;
+		if (touch.clientY > height / 2 && height - touch.clientY < scrollSensitivity) {
+			// scroll down
+			window.scrollBy(0, scrollSpeed);
+		} else if (touch.clientY < height / 2 && touch.clientY < scrollSensitivity) {
+			// scroll up
+			window.scrollBy(0, -scrollSpeed);
+		}
+	}
+
 	#onDropEnterHelper(e, isTopHalf, isMiddle) {
 		if (this.dropDisabled) return;
 		e.dataTransfer.dropEffect = 'move';
@@ -954,4 +1035,16 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		const dragState = getDragState();
 		dragState.setActiveDropTarget(this, location);
 	}
+
+	#resetScrollableContainer() {
+		if (this.#scrollableContainer) {
+			if (this.#touchAction) {
+				this.#scrollableContainer.style.setProperty('touch-action', this.#touchAction);
+			} else {
+				this.#scrollableContainer.style.removeProperty('touch-action');
+			}
+			this.#touchAction = '';
+		}
+		this.#scrollableContainer = undefined;
+	}
 };

package/custom-elements.json

@@ -18039,7 +18039,7 @@
         },
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host,\\n\\t\\t:host > d2l-form {\\n\\t\\t\\tbottom: 0;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tright: 0;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t:host([hidden]) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t:host([width-type=\\\"normal\\\"]) .d2l-template-primary-secondary-content,\\n\\t\\t:host([width-type=\\\"normal\\\"]) .d2l-template-primary-secondary-footer {\\n\\t\\t\\tmargin: 0 auto;\\n\\t\\t\\tmax-width: 1230px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-container {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-direction: column;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 2 0 0;\\n\\t\\t\\toverflow-x: hidden;\\n\\t\\t\\ttransition: none;\\n\\t\\t}\\n\\t\\tmain d2l-form-error-summary {\\n\\t\\t\\tmargin-inline: var(--d2l-template-primary-secondary-form-error-inline-margin, 20px);\\n\\t\\t}\\n\\n\\t\\t:host([resizable]) main {\\n\\t\\t\\tflex: 1 0 0;\\n\\t\\t}\\n\\t\\t:host([primary-overflow=\\\"hidden\\\"]) main {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tflex: 1 0 0;\\n\\t\\t\\tmin-width: ${desktopMinSize}px;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tflex: none;\\n\\t\\t\\tmin-width: 0;\\n\\t\\t}\\n\\t\\t[data-animate-resize] .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1), height 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-shadow {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\taside {\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tmin-width: ${desktopMinSize}px;\\n\\t\\t\\toverflow-x: hidden;\\n\\t\\t\\toverflow-y: scroll;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\n\\t\\t/* prevent margin colapse on slotted children */\\n\\t\\taside::before,\\n\\t\\taside::after {\\n\\t\\t\\tcontent: \\\" \\\";\\n\\t\\t\\tdisplay: table;\\n\\t\\t}\\n\\t\\t[data-background-shading=\\\"primary\\\"] > main,\\n\\t\\t[data-background-shading=\\\"secondary\\\"] > .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-collapsed] aside {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t:host([resizable]:not([secondary-first])) aside {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t.d2l-template-primary-secondary-divider-not-resizable {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tflex: none;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\twidth: 1px;\\n\\t\\t\\tz-index: 1;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: calc(50%);\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\twidth: 0.45rem;\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-end, e-resize);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-start, w-resize);\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-background-shading=\\\"secondary\\\"] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbox-shadow: calc(1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-background-shading=\\\"primary\\\"] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbox-shadow: calc(-1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-desktop {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-left,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-left {\\n\\t\\t\\tinset-inline-start: -1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tinset-inline-end: -1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 0.9rem;\\n\\t\\t\\tjustify-content: space-between;\\n\\t\\t\\twidth: 0.25rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: var(--d2l-color-galena);\\n\\t\\t\\tborder-radius: 0.05rem;\\n\\t\\t\\tcontent: \\\"\\\";\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\twidth: 0.1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-right,\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-left {\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t\\t:host(:not([secondary-first])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-left,\\n\\t\\t:host([secondary-first]) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\td2l-icon {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\n\\t\\tfooter {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tpadding: 0.75rem 1rem;\\n\\t\\t\\tz-index: 1; /* ensures the footer box-shadow is over main areas with background colours set */\\n\\t\\t}\\n\\t\\theader {\\n\\t\\t\\tz-index: 14; /* ensures the header box-shadow is over main areas with background colours set, and opt-in on top of sticky header */\\n\\t\\t}\\n\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:focus,\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tbox-shadow: none;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::after,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: var(--d2l-color-ferrite);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\ttransition: background-color 100ms, box-shadow 100ms;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:hover,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\ttransition-delay: 100ms;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar {\\n\\t\\t\\twidth: 8px;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-track {\\n\\t\\t\\tbackground: rgba(255, 255, 255, 0.4);\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-thumb {\\n\\t\\t\\tbackground: var(--d2l-color-galena);\\n\\t\\t\\tborder-radius: 4px;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-thumb:hover {\\n\\t\\t\\tbackground: var(--d2l-color-tungsten);\\n\\t\\t}\\n\\n\\t\\t/* For Firefox */\\n\\t\\t.d2l-template-scroll {\\n\\t\\t\\tscrollbar-color: var(--d2l-color-galena) rgba(255, 255, 255, 0.4);\\n\\t\\t\\tscrollbar-width: thin;\\n\\t\\t}\\n\\n\\t\\t@media (prefers-reduced-motion: reduce) {\\n\\t\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-line::after,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\ttransition: none;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media only screen and (max-width: 767px) {\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tflex-direction: column;\\n\\t\\t\\t}\\n\\n\\t\\t\\tmain {\\n\\t\\t\\t\\tflex: 1 0 0;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tflex: none;\\n\\t\\t\\t}\\n\\t\\t\\taside,\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tmin-width: auto;\\n\\t\\t\\t}\\n\\t\\t\\t[data-is-collapsed] aside {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-desktop {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\t\\t\\t/* Attribute selector is only used to increase specificity */\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\t\\theight: 0.1rem;\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t}\\n\\t\\t\\t:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) [data-is-collapsed] .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tcursor: n-resize;\\n\\t\\t\\t}\\n\\t\\t\\t:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) [data-is-expanded] .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tcursor: s-resize;\\n\\t\\t\\t}\\n\\n\\t\\t\\t/* Attribute selector is only used to increase specificity */\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:hover,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider:hover,\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:focus,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider:focus {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\t\\tborder-radius: 0;\\n\\t\\t\\t\\tbottom: 0.1rem;\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t\\tinset-inline-end: calc(17px + 0.2rem);\\n\\t\\t\\t\\toverflow: hidden;\\n\\t\\t\\t\\ttop: auto;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\talign-items: center;\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\t\\tborder-radius: 0.25rem 0.25rem 0 0;\\n\\t\\t\\t\\tbottom: 0;\\n\\t\\t\\t\\tdisplay: flex;\\n\\t\\t\\t\\tjustify-content: center;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tright: 0;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\theight: 1rem;\\n\\t\\t\\t\\twidth: 2.2rem;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\t\\tbox-shadow: none;\\n\\t\\t\\t\\theight: 1.2rem;\\n\\t\\t\\t\\tinset-inline-end: 17px;\\n\\t\\t\\t\\twidth: 2.6rem;\\n\\t\\t\\t}\\n\\t\\t\\td2l-icon {\\n\\t\\t\\t\\tcolor: white;\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t}\\n\\t\\t\\t${getFocusRingStyles(pseudoClass => `.d2l-template-primary-secondary-divider:${pseudoClass} .d2l-template-primary-secondary-divider-handle-mobile`, { extraStyles: css`right: 0.2rem; box-shadow: 0 0 0 2px #ffffff;` })}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-shadow {\\n\\t\\t\\t\\tbox-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t\\theight: 100%;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t\\tz-index: -1;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t@media print {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\toverflow: visible;\\n\\t\\t\\t\\tposition: relative;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tflex-direction: column;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content,\\n\\t\\t\\t.d2l-template-primary-secondary-content > main,\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\toverflow: visible;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content > main {\\n\\t\\t\\t\\tbackground: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-divider-not-resizable,\\n\\t\\t\\t.d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-container > footer {\\n\\t\\t\\t\\tbox-shadow: none;\\n\\t\\t\\t\\tpadding: 0;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-container,\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\theight: auto;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host,\\n\\t\\t:host > d2l-form {\\n\\t\\t\\tbottom: 0;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tright: 0;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t:host([hidden]) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t:host([width-type=\\\"normal\\\"]) .d2l-template-primary-secondary-content,\\n\\t\\t:host([width-type=\\\"normal\\\"]) .d2l-template-primary-secondary-footer {\\n\\t\\t\\tmargin: 0 auto;\\n\\t\\t\\tmax-width: 1230px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-container {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-direction: column;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 2 0 0;\\n\\t\\t\\toverflow-x: hidden;\\n\\t\\t\\ttransition: none;\\n\\t\\t}\\n\\t\\tmain d2l-form-error-summary {\\n\\t\\t\\tmargin-inline: var(--d2l-template-primary-secondary-form-error-inline-margin, 20px);\\n\\t\\t}\\n\\n\\t\\t:host([resizable]) main {\\n\\t\\t\\tflex: 1 0 0;\\n\\t\\t}\\n\\t\\t:host([primary-overflow=\\\"hidden\\\"]) main {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tflex: 1 0 0;\\n\\t\\t\\tmin-width: ${desktopMinSize}px;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tflex: none;\\n\\t\\t\\tmin-width: 0;\\n\\t\\t}\\n\\t\\t[data-animate-resize] .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1), height 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-shadow {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\taside {\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tmin-width: ${desktopMinSize}px;\\n\\t\\t\\toverflow-x: hidden;\\n\\t\\t\\toverflow-y: scroll;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\n\\t\\t/* prevent margin colapse on slotted children */\\n\\t\\taside::before,\\n\\t\\taside::after {\\n\\t\\t\\tcontent: \\\" \\\";\\n\\t\\t\\tdisplay: table;\\n\\t\\t}\\n\\t\\t[data-background-shading=\\\"primary\\\"] > main,\\n\\t\\t[data-background-shading=\\\"secondary\\\"] > .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-collapsed] aside {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t:host([resizable]:not([secondary-first])) aside {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t.d2l-template-primary-secondary-divider-not-resizable {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tflex: none;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\twidth: 1px;\\n\\t\\t\\tz-index: 1;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: calc(50%);\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\twidth: 0.45rem;\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-end, e-resize);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-start, w-resize);\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-background-shading=\\\"secondary\\\"] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbox-shadow: calc(1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-background-shading=\\\"primary\\\"] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbox-shadow: calc(-1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-desktop {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-left,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-left {\\n\\t\\t\\tinset-inline-start: -1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tinset-inline-end: -1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 0.9rem;\\n\\t\\t\\tjustify-content: space-between;\\n\\t\\t\\twidth: 0.25rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: var(--d2l-color-galena);\\n\\t\\t\\tborder-radius: 0.05rem;\\n\\t\\t\\tcontent: \\\"\\\";\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\twidth: 0.1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-right,\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-left {\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t\\t:host(:not([secondary-first])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-left,\\n\\t\\t:host([secondary-first]) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\td2l-icon {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\n\\t\\tfooter {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tpadding: 0.75rem 1rem;\\n\\t\\t\\tz-index: 1; /* ensures the footer box-shadow is over main areas with background colours set */\\n\\t\\t}\\n\\t\\theader {\\n\\t\\t\\tz-index: 14; /* ensures the header box-shadow is over main areas with background colours set, and opt-in on top of sticky header */\\n\\t\\t}\\n\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:focus,\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tbox-shadow: none;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::after,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: var(--d2l-color-ferrite);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\ttransition: background-color 100ms, box-shadow 100ms;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:hover,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\ttransition-delay: 100ms;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar {\\n\\t\\t\\twidth: 8px;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-track {\\n\\t\\t\\tbackground: rgba(255, 255, 255, 0.4);\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-thumb {\\n\\t\\t\\tbackground: var(--d2l-color-galena);\\n\\t\\t\\tborder-radius: 4px;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-thumb:hover {\\n\\t\\t\\tbackground: var(--d2l-color-tungsten);\\n\\t\\t}\\n\\n\\t\\t/* For Firefox */\\n\\t\\t.d2l-template-scroll {\\n\\t\\t\\tscrollbar-color: var(--d2l-color-galena) rgba(255, 255, 255, 0.4);\\n\\t\\t\\tscrollbar-width: thin;\\n\\t\\t}\\n\\n\\t\\t@media (prefers-reduced-motion: reduce) {\\n\\t\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-line::after,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\ttransition: none;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media only screen and (max-width: 767px) {\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tflex-direction: column;\\n\\t\\t\\t}\\n\\n\\t\\t\\tmain {\\n\\t\\t\\t\\tflex: 1 0 0;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tflex: none;\\n\\t\\t\\t}\\n\\t\\t\\taside,\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tmin-width: auto;\\n\\t\\t\\t}\\n\\t\\t\\t[data-is-collapsed] aside {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-desktop {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t:host([_static-footer]),\\n\\t\\t\\t:host([_static-footer]) > d2l-form {\\n\\t\\t\\t\\tbottom: unset;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-container {\\n\\t\\t\\t\\tmin-height: 100vh;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tdisplay: grid;\\n\\t\\t\\t\\tflex-grow: 1;\\n\\t\\t\\t\\tgrid-template: 1fr auto auto / 1fr;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-content > * {\\n\\t\\t\\t\\tgrid-column: 1/-1;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) main {\\n\\t\\t\\t\\tgrid-row: 1 / -1;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tgrid-row: 2 / 3;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tgrid-row: 3 / 4;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) :not([data-background-shading=\\\"secondary\\\"]) > .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tbackground-color: white;\\n\\t\\t\\t}\\n\\n\\t\\t\\t/* Attribute selector is only used to increase specificity */\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\t\\theight: 0.1rem;\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t}\\n\\t\\t\\t:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) [data-is-collapsed] .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tcursor: n-resize;\\n\\t\\t\\t}\\n\\t\\t\\t:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) [data-is-expanded] .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tcursor: s-resize;\\n\\t\\t\\t}\\n\\n\\t\\t\\t/* Attribute selector is only used to increase specificity */\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:hover,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider:hover,\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:focus,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider:focus {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\t\\tborder-radius: 0;\\n\\t\\t\\t\\tbottom: 0.1rem;\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t\\tinset-inline-end: calc(17px + 0.2rem);\\n\\t\\t\\t\\toverflow: hidden;\\n\\t\\t\\t\\ttop: auto;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\talign-items: center;\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\t\\tborder-radius: 0.25rem 0.25rem 0 0;\\n\\t\\t\\t\\tbottom: 0;\\n\\t\\t\\t\\tdisplay: flex;\\n\\t\\t\\t\\tjustify-content: center;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tright: 0;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\theight: 1rem;\\n\\t\\t\\t\\twidth: 2.2rem;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\t\\tbox-shadow: none;\\n\\t\\t\\t\\theight: 1.2rem;\\n\\t\\t\\t\\tinset-inline-end: 17px;\\n\\t\\t\\t\\twidth: 2.6rem;\\n\\t\\t\\t}\\n\\t\\t\\td2l-icon {\\n\\t\\t\\t\\tcolor: white;\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t}\\n\\t\\t\\t${getFocusRingStyles(pseudoClass => `.d2l-template-primary-secondary-divider:${pseudoClass} .d2l-template-primary-secondary-divider-handle-mobile`, { extraStyles: css`right: 0.2rem; box-shadow: 0 0 0 2px #ffffff;` })}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-shadow {\\n\\t\\t\\t\\tbox-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t\\theight: 100%;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t\\tz-index: -1;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t@media print {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\toverflow: visible;\\n\\t\\t\\t\\tposition: relative;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tflex-direction: column;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content,\\n\\t\\t\\t.d2l-template-primary-secondary-content > main,\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\toverflow: visible;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content > main {\\n\\t\\t\\t\\tbackground: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-divider-not-resizable,\\n\\t\\t\\t.d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-container > footer {\\n\\t\\t\\t\\tbox-shadow: none;\\n\\t\\t\\t\\tpadding: 0;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-container,\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\theight: auto;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "form"

package/helpers/dom.js

@@ -57,6 +57,19 @@ export function findComposedAncestor(node, predicate) {
 	return null;
 }
 
+export function getScrollableAncestor(node) {
+	return findComposedAncestor(node, (el) => {
+		if (el.nodeType !== Node.ELEMENT_NODE) return false;
+		if (el === document.body) return true;
+		const styles = getComputedStyle(el);
+		const overflowY = styles.getPropertyValue('overflow-y');
+		const overflowX = styles.getPropertyValue('overflow-x');
+		const overflow = styles.getPropertyValue('overflow');
+		const overflowValues = ['auto', 'scroll'];
+		return (overflowValues.includes(overflowY) || overflowValues.includes(overflowX) || overflowValues.includes(overflow));
+	});
+}
+
 export function getBoundingAncestor(node) {
 	return findComposedAncestor(node, (node) => {
 		if (node === document.body) return false;

package/package.json

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

package/templates/primary-secondary/primary-secondary.js

@@ -12,6 +12,7 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+const desktopMinHeight = 3 * 44; // Primary/Secondary panels have a min-height of 1/3 of the viewport on mobile view. This threshhold prevents them from being smaller than the recommended WCAG Target size(AAA)
 
 const desktopMinSize = 320;
 
@@ -375,7 +376,7 @@ class MobileMouseResizer extends Resizer {
 			this._wasCollapsed = this.isCollapsed;
 			this.dispatchResizeStart();
 			e.preventDefault();
-			const y = e.clientY - this.contentRect.top;
+			const y = this.#getY(e);
 			this._offset = y - (this.contentRect.height - this.panelSize);
 			this._isDragging = false;
 			this._isResizing = true;
@@ -387,7 +388,7 @@ class MobileMouseResizer extends Resizer {
 		if (!this._isResizing) {
 			return;
 		}
-		const y = e.clientY - this.contentRect.top;
+		const y = this.#getY(e);
 		const secondaryHeight = this.clampMaxHeight(this.contentRect.height - y + this._offset);
 		this._isDragging = true;
 		this.dispatchResize(secondaryHeight, false);
@@ -399,7 +400,7 @@ class MobileMouseResizer extends Resizer {
 		}
 		const expandedCollapseThreshold = this.contentBounds.minHeight * 0.75;
 		const collapsedCollapseThreshold = this.contentBounds.minHeight * 0.1;
-		const y = e.clientY - this.contentRect.top;
+		const y = this.#getY(e);
 		const desiredSecondaryHeight = this.contentRect.height - y + this._offset;
 		if (
 			this._isDragging
@@ -414,6 +415,9 @@ class MobileMouseResizer extends Resizer {
 		this._isResizing = false;
 		this.dispatchResizeEnd();
 	}
+	#getY(e) {
+		return e.clientY + document.documentElement.scrollTop - this.contentRect.top;
+	}
 
 }
 
@@ -595,6 +599,7 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 		 * @type {boolean}
 		 */
 		hasForm: { type: Boolean, attribute: 'has-form' },
+		_staticFooter: { type: Boolean, attribute: '_static-footer', reflect: true },
 		_formErrorSummary: { type: Array },
 		_hasFooter: { state: true },
 		_isCollapsed: { state: true },
@@ -867,6 +872,35 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 			.d2l-template-primary-secondary-divider-handle-desktop {
 				display: none;
 			}
+
+			:host([_static-footer]),
+			:host([_static-footer]) > d2l-form {
+				bottom: unset;
+			}
+			:host([_static-footer]) .d2l-template-primary-secondary-container {
+				min-height: 100vh;
+			}
+			:host([_static-footer]) .d2l-template-primary-secondary-content {
+				display: grid;
+				flex-grow: 1;
+				grid-template: 1fr auto auto / 1fr;
+			}
+			:host([_static-footer]) .d2l-template-primary-secondary-content > * {
+				grid-column: 1/-1;
+			}
+			:host([_static-footer]) main {
+				grid-row: 1 / -1;
+			}
+			:host([_static-footer]) .d2l-template-primary-secondary-divider {
+				grid-row: 2 / 3;
+			}
+			:host([_static-footer]) .d2l-template-primary-secondary-secondary-container {
+				grid-row: 3 / 4;
+			}
+			:host([_static-footer]) :not([data-background-shading="secondary"]) > .d2l-template-primary-secondary-secondary-container {
+				background-color: white;
+			}
+
 			/* Attribute selector is only used to increase specificity */
 			:host([resizable]) .d2l-template-primary-secondary-divider,
 			:host(:not([resizable])) .d2l-template-primary-secondary-divider {
@@ -1009,6 +1043,7 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 		this.widthType = 'fullscreen';
 
 		this._animateResize = false;
+		this._staticFooter = false;
 		this._isCollapsed = false;
 		this._isExpanded = false;
 		this._isMobile = isMobile();
@@ -1151,11 +1186,13 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 			this.shadowRoot.querySelector('.d2l-template-primary-secondary-divider-not-resizable');
 		const desktopDividerSize = divider.offsetWidth;
 		const mobileDividerSize = divider.offsetHeight;
+		const footerSize = this.shadowRoot.querySelector('footer')?.offsetHeight ?? 0;
+		const maxAvailableHeight = !this._staticFooter ? contentRect.height : Math.min(contentRect.height, window.innerHeight - footerSize);
 		return {
 			height: contentRect.height,
 			minWidth: desktopMinSize,
 			maxWidth: contentRect.width - desktopMinSize - desktopDividerSize,
-			minHeight: (contentRect.height - mobileDividerSize) * (1 / 3),
+			minHeight: (maxAvailableHeight - mobileDividerSize) * (1 / 3),
 			maxHeight: (contentRect.height - mobileDividerSize) * (2 / 3),
 			width: contentRect.width
 		};
@@ -1173,6 +1210,9 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 	_onContentResize(entries) {
 		const entry = entries[0];
 		const contentRect = entry.target.getBoundingClientRect();
+		const footerSize = this.shadowRoot.querySelector('footer')?.offsetHeight ?? 0;
+		const headerSize = this.shadowRoot.querySelector('header')?.offsetHeight ?? 0;
+		this._staticFooter = window.innerHeight - footerSize - headerSize < desktopMinHeight;
 		this._contentBounds = this._computeContentBounds(contentRect);
 		this._isMobile = isMobile();