@brightspace-ui/core 3.287.4 → 3.288.0

package/components/button/button-toggle.js

@@ -39,16 +39,16 @@ class ButtonToggle extends LitElement {
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
-		if (this._focusOnFirstRender) {
-			this._focusOnFirstRender = false;
+		if (this.#focusOnFirstRender) {
+			this.#focusOnFirstRender = false;
 			this.focus();
 		}
 	}
 
 	render() {
 		return html`
-			<slot @click="${this._handleNotPressedClick}" name="not-pressed"></slot>
-			<slot @click="${this._handlePressedClick}" name="pressed"></slot>
+			<slot @click="${this.#handleNotPressedClick}" name="not-pressed"></slot>
+			<slot @click="${this.#handlePressedClick}" name="pressed"></slot>
 		`;
 	}
 
@@ -63,7 +63,7 @@ class ButtonToggle extends LitElement {
 
 	focus() {
 		if (!this.hasUpdated) {
-			this._focusOnFirstRender = true;
+			this.#focusOnFirstRender = true;
 			return;
 		}
 
@@ -75,28 +75,30 @@ class ButtonToggle extends LitElement {
 		elem.focus();
 	}
 
-	async _handleClick(pressed) {
+	#focusOnFirstRender = false;
+
+	async #handleClick(pressed) {
 		const beforeToggleEvent = new CustomEvent('d2l-button-toggle-before-change', {
 			detail: {
-				update: (newPressed) => this._updatePressedState(newPressed)
+				update: (newPressed) => this.#updatePressedState(newPressed)
 			},
 			cancelable: true
 		});
 		this.dispatchEvent(beforeToggleEvent);
 		if (beforeToggleEvent.defaultPrevented) return;
 
-		this._updatePressedState(pressed);
+		this.#updatePressedState(pressed);
 	}
 
-	_handleNotPressedClick() {
-		this._handleClick(true);
+	#handleNotPressedClick() {
+		this.#handleClick(true);
 	}
 
-	_handlePressedClick() {
-		this._handleClick(false);
+	#handlePressedClick() {
+		this.#handleClick(false);
 	}
 
-	async _updatePressedState(newPressed) {
+	async #updatePressedState(newPressed) {
 		this.pressed = newPressed;
 		await this.updateComplete;
 		this.focus();

package/components/page/page.js

@@ -14,10 +14,19 @@ const DRAWER_MIN_HEIGHT = 200; // TO DO: Confirm
 export const MAIN_MIN_WIDTH = 600; // TO DO: Confirm
 export const PANEL_MIN_WIDTH = 320;
 
+const DIVIDER_GUTTER_WIDTH = 18;
+
 export const SIDE_NAV_DEFAULT_WIDTH = 334;
 export const supportingDefaultWidth = contentWidth => Math.floor(contentWidth / 3);
+export const supportingOverlayDefaultWidth = contentWidth => Math.min(400, Math.floor(0.9 * (contentWidth - DIVIDER_WIDTH - DIVIDER_GUTTER_WIDTH)));
 export const supportingMobileDefaultHeight = fullHeight => Math.floor(fullHeight / 2);
 
+const OVERLAY_MODE_BREAKPOINT = 929;
+const MOBILE_MODE_BREAKPOINT = 767;
+
+const overlayModeQuery = window.matchMedia(`(max-width: ${OVERLAY_MODE_BREAKPOINT}px)`);
+const mobileModeQuery = window.matchMedia(`(max-width: ${MOBILE_MODE_BREAKPOINT}px)`);
+
 class PanelStateController {
 	constructor(host, panelConfigs) {
 		this.#host = host;
@@ -25,7 +34,8 @@ class PanelStateController {
 		for (const [key, config] of Object.entries(panelConfigs)) {
 			this.#panels[key] = {
 				animate: false,
-				collapsed: false,
+				collapsed: config.collapsed,
+				restoreCollapsed: !config.collapsed,
 				size: 0,
 				minSize: config.minSize,
 				maxSize: config.minSize
@@ -56,7 +66,7 @@ class PanelStateController {
 			if (stored) {
 				const storedSize = parseInt(stored.size);
 				this.resize(key, isFinite(storedSize) ? storedSize : defaults[key]);
-				if (stored.collapsed) panel.collapsed = true;
+				if (panel.restoreCollapsed && stored.collapsed) panel.collapsed = true;
 			} else {
 				this.resize(key, defaults[key]);
 			}
@@ -92,7 +102,7 @@ class PanelStateController {
 		panel.maxSize = newMaxSize;
 
 		if (panel.size > newMaxSize) {
-			this.resize(key, panel.size);
+			this.resize(key, panel.size, { animate: true });
 		}
 	}
 
@@ -122,9 +132,11 @@ class PanelStateController {
 
 		try {
 			state[panelKey] = {
-				size: this.#panels[panelKey].size,
-				collapsed: this.#panels[panelKey].collapsed
+				size: this.#panels[panelKey].size
 			};
+			if (this.#panels[panelKey].restoreCollapsed) {
+				state[panelKey].collapsed = this.#panels[panelKey].collapsed;
+			}
 			localStorage.setItem(fullKey, JSON.stringify(state));
 		} catch {
 			// Do nothing if storage quota exceeded or using private browsing mode of an old Safari version
@@ -159,6 +171,8 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		_headerHeight: { state: true },
 		_headerIsSticky: { state: true },
 		_footerHeight: { state: true },
+		_inOverlayMode: { state: true },
+		_inMobileMode: { state: true },
 		_slotVisibility: { state: true }
 	};
 
@@ -183,12 +197,12 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			--d2l-page-footer-max-width: 100%;
 		}
 
-		@media (max-width: 929px) {
+		@media (max-width: ${OVERLAY_MODE_BREAKPOINT}px) {
 			:host {
 				--d2l-page-padding: 24px;
 			}
 		}
-		@media (max-width: 767px) {
+		@media (max-width: ${MOBILE_MODE_BREAKPOINT}px) {
 			:host {
 				--d2l-page-padding: 18px;
 			}
@@ -262,10 +276,10 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		}
 
 		.side-nav-panel.collapsed {
-			padding-inline-end: 18px;
+			padding-inline-end: ${DIVIDER_GUTTER_WIDTH}px;
 		}
 		.supporting-panel.collapsed {
-			padding-inline-start: 18px;
+			padding-inline-start: ${DIVIDER_GUTTER_WIDTH}px;
 		}
 		.side-nav-panel.collapsed .side-nav-panel-content,
 		.supporting-panel.collapsed .supporting-panel-content {
@@ -315,9 +329,11 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		this._headerIsSticky = false;
 		this._footerHeight = 0;
 		this._panelState = new PanelStateController(this, {
-			'side-nav': { minSize: PANEL_MIN_WIDTH },
-			'supporting': { minSize: PANEL_MIN_WIDTH },
-			'supporting-mobile': { minSize: DRAWER_MIN_HEIGHT }
+			'side-nav': { collapsed: false, minSize: PANEL_MIN_WIDTH },
+			'side-nav-overlay': { collapsed: true, minSize: PANEL_MIN_WIDTH },
+			'supporting': { collapsed: false, minSize: PANEL_MIN_WIDTH },
+			'supporting-overlay': { collapsed: true, minSize: PANEL_MIN_WIDTH },
+			'supporting-mobile': { collapsed: false, minSize: DRAWER_MIN_HEIGHT }
 		});
 		this._slotVisibility = {};
 		this.#resizeObserver = new ResizeObserver(entries => {
@@ -341,7 +357,9 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 					this._panelState.updateMaxSize('side-nav', newMaxWidth);
 					this._panelState.updateMaxSize('supporting', newMaxWidth);
 
-					// TO DO: Collapse panel if needed
+					const newMaxOverlayWidth = this.#getMaxPanelOverlayWidth();
+					this._panelState.updateMaxSize('side-nav-overlay', newMaxOverlayWidth);
+					this._panelState.updateMaxSize('supporting-overlay', newMaxOverlayWidth);
 				}
 			}
 		});
@@ -363,12 +381,20 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 	connectedCallback() {
 		super.connectedCallback();
 		window.addEventListener('resize', this.#handleWindowResize);
+
+		this._inOverlayMode = overlayModeQuery.matches;
+		overlayModeQuery.addEventListener('change', this.#handleOverlayModeChange);
+		this._inMobileMode = mobileModeQuery.matches;
+		mobileModeQuery.addEventListener('change', this.#handleMobileModeChange);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#resizeObserver.disconnect();
 		window.removeEventListener('resize', this.#handleWindowResize);
+
+		overlayModeQuery.removeEventListener('change', this.#handleOverlayModeChange);
+		mobileModeQuery.removeEventListener('change', this.#handleMobileModeChange);
 	}
 
 	firstUpdated() {
@@ -381,6 +407,9 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 	}
 
 	render() {
+		const sideNavPanelKey = this._inOverlayMode ? 'side-nav-overlay' : 'side-nav';
+		const supportingPanelKey = this._inMobileMode ? 'supporting-overlay' : (this._inOverlayMode ? 'supporting-overlay' : 'supporting'); // TO DO: Switch to supporting-mobile
+
 		const pageClasses = {
 			'page': true,
 			'header-sticky': this._headerIsSticky
@@ -394,9 +423,9 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			<div class="${classMap(pageClasses)}">
 				${this.#renderHeader()}
 				<div class="${classMap(contentClasses)}">
-					${this.#renderSideNavPanel()}
+					${this.#renderSideNavPanel(sideNavPanelKey)}
 					<main><slot></slot></main>
-					${this.#renderSupportingPanel()}
+					${this.#renderSupportingPanel(supportingPanelKey)}
 				</div>
 				${this.#renderFooter()}
 			</div>
@@ -413,6 +442,16 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 	#resizeObserver;
 	#stateStorageKey;
 
+	#handleMobileModeChange = (e) => {
+		// TO DO: Collapse supporting panel if needed
+		this._inMobileMode = e.matches;
+	};
+
+	#handleOverlayModeChange = (e) => {
+		// TO DO: Collapse side-nav and supporting panel if needed
+		this._inOverlayMode = e.matches;
+	};
+
 	#handleWindowResize = () => {
 		this._panelState.updateMaxSize('supporting-mobile', this.#getMaxDrawerHeight());
 	};
@@ -422,6 +461,11 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		return Math.max(DRAWER_MIN_HEIGHT, window.innerHeight - reservedSpace);
 	}
 
+	#getMaxPanelOverlayWidth() {
+		const reservedSpace = MAIN_MIN_WIDTH + DIVIDER_WIDTH; // TO DO: Update when overlay styles added
+		return Math.max(PANEL_MIN_WIDTH, this._contentWidth - reservedSpace);
+	}
+
 	#getMaxPanelWidth() {
 		const reservedSpace = MAIN_MIN_WIDTH + DIVIDER_WIDTH;
 		return Math.max(PANEL_MIN_WIDTH, this._contentWidth - reservedSpace);
@@ -447,7 +491,9 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 	#initializePanelSizes() {
 		this._panelState.initialize({
 			'side-nav': SIDE_NAV_DEFAULT_WIDTH,
+			'side-nav-overlay': SIDE_NAV_DEFAULT_WIDTH,
 			'supporting': supportingDefaultWidth(this._contentWidth),
+			'supporting-overlay': supportingOverlayDefaultWidth(this._contentWidth),
 			'supporting-mobile': supportingMobileDefaultHeight(window.innerHeight)
 		});
 	}
@@ -509,43 +555,43 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		`;
 	}
 
-	#renderSideNavPanel() {
+	#renderSideNavPanel(panelKey) {
 		const classes = {
 			'side-nav-panel': true,
-			'animate': this._panelState.getAnimate('side-nav'),
-			'collapsed': this._panelState.getCollapsed('side-nav')
+			'animate': this._panelState.getAnimate(panelKey),
+			'collapsed': this._panelState.getCollapsed(panelKey)
 		};
 		return html`
 			<nav class="side-nav" aria-label="${this.localize('components.page.side-nav-label')}">
 				<div
 					class="${classMap(classes)}"
-					style=${styleMap({ width: `${this._panelState.getSize('side-nav')}px` })}
+					style=${styleMap({ width: `${this._panelState.getSize(panelKey)}px` })}
 					?hidden="${!this._slotVisibility['side-nav']}">
-					<div class="side-nav-panel-content" style=${styleMap({ width: `${this._panelState.getTrueSize('side-nav')}px` })}>
+					<div class="side-nav-panel-content" style=${styleMap({ width: `${this._panelState.getTrueSize(panelKey)}px` })}>
 						<slot name="side-nav" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
 					</div>
 				</div>
 				${!this._slotVisibility['side-nav'] ? nothing :
-					this.#renderDivider('side-nav', this.localize('components.page.side-nav-divider-label'), 'start')}
+					this.#renderDivider(panelKey, this.localize('components.page.side-nav-divider-label'), 'start')}
 			</nav>
 		`;
 	}
 
-	#renderSupportingPanel() {
+	#renderSupportingPanel(panelKey) {
 		const classes = {
 			'supporting-panel': true,
-			'animate': this._panelState.getAnimate('supporting'),
-			'collapsed': this._panelState.getCollapsed('supporting')
+			'animate': this._panelState.getAnimate(panelKey),
+			'collapsed': this._panelState.getCollapsed(panelKey)
 		};
 		return html`
 			<aside class="supporting" aria-label="${this.localize('components.page.supporting-label')}">
 				${!this._slotVisibility['supporting'] ? nothing :
-					this.#renderDivider('supporting', this.localize('components.page.supporting-divider-label'), 'end')}
+					this.#renderDivider(panelKey, this.localize('components.page.supporting-divider-label'), 'end')}
 				<div
 					class="${classMap(classes)}"
-					style=${styleMap({ width: `${this._panelState.getSize('supporting')}px` })}
+					style=${styleMap({ width: `${this._panelState.getSize(panelKey)}px` })}
 					?hidden="${!this._slotVisibility['supporting']}">
-					<div class="supporting-panel-content" style=${styleMap({ width: `${this._panelState.getTrueSize('supporting')}px` })}>
+					<div class="supporting-panel-content" style=${styleMap({ width: `${this._panelState.getTrueSize(panelKey)}px` })}>
 						<slot name="supporting" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
 					</div>
 				</div>

package/custom-elements.json

@@ -13147,7 +13147,7 @@
       "properties": [
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t.full-nav-header {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 90px;\\n\\t\\t}\\n\\t\\t.full-nav-header-left {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex: 0 1 auto;\\n\\t\\t\\tgap: 5px;\\n\\t\\t\\theight: 100%;\\n\\t\\t}\\n\\t\\t.full-nav-header-spacer {\\n\\t\\t\\tflex: 1 1 auto;\\n\\t\\t\\tmin-width: 30px;\\n\\t\\t}\\n\\t\\t.full-nav-header-right {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex: 0 0 auto;\\n\\t\\t\\theight: 100%;\\n\\t\\t}\\n\\t\\t.full-nav-header-right d2l-page-header-button {\\n\\t\\t\\tmargin-inline: 15px;\\n\\t\\t}\\n\\t\\t.full-nav-logo {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tborder-radius: 4px;\\n\\t\\t\\tcolor: white;\\n\\t\\t\\tfont-size: 0.8rem;\\n\\t\\t\\tfont-weight: 700;\\n\\t\\t\\tpadding: 8px 14px;\\n\\t\\t}\\n\\t\\t.full-nav-footer-inner {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-wrap: wrap;\\n\\t\\t\\tgap: 20px;\\n\\t\\t}\\n\\t\\t.full-nav-footer-link {\\n\\t\\t\\tborder-bottom: 4px solid transparent;\\n\\t\\t\\tcolor: var(--d2l-color-ferrite);\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tpadding: 8px 0;\\n\\t\\t\\ttext-decoration: none;\\n\\t\\t}\\n\\t\\t.full-nav-footer-link:hover,\\n\\t\\t.full-nav-footer-link:focus-visible {\\n\\t\\t\\tborder-bottom-color: var(--d2l-color-celestine);\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t.full-nav-header {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 90px;\\n\\t\\t}\\n\\t\\t.full-nav-header-left {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex: 0 1 auto;\\n\\t\\t\\tgap: 5px;\\n\\t\\t\\theight: 100%;\\n\\t\\t}\\n\\t\\t.full-nav-header-course {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tgap: 5px;\\n\\t\\t}\\n\\t\\t.full-nav-header-spacer {\\n\\t\\t\\tflex: 1 1 auto;\\n\\t\\t\\tmin-width: 30px;\\n\\t\\t}\\n\\t\\t.full-nav-header-right {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex: 0 0 auto;\\n\\t\\t\\theight: 100%;\\n\\t\\t}\\n\\t\\t.full-nav-header-alerts {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 100%;\\n\\t\\t}\\n\\t\\t.full-nav-header-alerts-combined {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t.full-nav-header-right d2l-page-header-button {\\n\\t\\t\\tmargin-inline: 15px;\\n\\t\\t}\\n\\t\\t.full-nav-logo {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tborder-radius: 4px;\\n\\t\\t\\tcolor: white;\\n\\t\\t\\tfont-size: 0.8rem;\\n\\t\\t\\tfont-weight: 700;\\n\\t\\t\\tpadding: 8px 14px;\\n\\t\\t}\\n\\t\\t.full-nav-footer-inner {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tgap: 20px;\\n\\t\\t}\\n\\t\\t.full-nav-footer-links {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex: 0 1 auto;\\n\\t\\t\\tgap: 20px;\\n\\t\\t\\tmin-width: 0;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t.full-nav-footer-inner d2l-button-icon {\\n\\t\\t\\tflex: 0 0 auto;\\n\\t\\t}\\n\\t\\t.full-nav-footer-link {\\n\\t\\t\\tborder-bottom: 4px solid transparent;\\n\\t\\t\\tcolor: var(--d2l-color-ferrite);\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tpadding: 8px 0;\\n\\t\\t\\ttext-decoration: none;\\n\\t\\t}\\n\\t\\t.full-nav-footer-link:hover,\\n\\t\\t.full-nav-footer-link:focus-visible {\\n\\t\\t\\tborder-bottom-color: var(--d2l-color-celestine);\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t@media (max-width: 615px) {\\n\\t\\t\\t.full-nav-header-alerts {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\t\\t\\t.full-nav-header-alerts-combined {\\n\\t\\t\\t\\tdisplay: inline-flex;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 400px) {\\n\\t\\t\\t.full-nav-header-course {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t`\""
         }
       ]
     },
@@ -13589,7 +13589,7 @@
       "properties": [
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 16; /* To be over sticky content of our core components and the divider */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\t\\t.side-nav-panel-content {\\n\\t\\t\\tfloat: inline-end;\\n\\t\\t}\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel.collapsed {\\n\\t\\t\\tpadding-inline-end: 18px;\\n\\t\\t}\\n\\t\\t.supporting-panel.collapsed {\\n\\t\\t\\tpadding-inline-start: 18px;\\n\\t\\t}\\n\\t\\t.side-nav-panel.collapsed .side-nav-panel-content,\\n\\t\\t.supporting-panel.collapsed .supporting-panel-content {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t@media (prefers-reduced-motion: no-preference) {\\n\\t\\t\\t.side-nav-panel.animate,\\n\\t\\t\\t.supporting-panel.animate,\\n\\t\\t\\t.side-nav-panel.animate .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate .supporting-panel-content {\\n\\t\\t\\t\\ttransition:\\n\\t\\t\\t\\t\\twidth 400ms cubic-bezier(0, 0.7, 0.5, 1),\\n\\t\\t\\t\\t\\tpadding 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel.animate.collapsed .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate.collapsed .supporting-panel-content {\\n\\t\\t\\t\\ttransition:\\n\\t\\t\\t\\t\\twidth 400ms cubic-bezier(0, 0.7, 0.5, 1),\\n\\t\\t\\t\\t\\tvisibility 0s 400ms;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components and divider */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: ${OVERLAY_MODE_BREAKPOINT}px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: ${MOBILE_MODE_BREAKPOINT}px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 16; /* To be over sticky content of our core components and the divider */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\t\\t.side-nav-panel-content {\\n\\t\\t\\tfloat: inline-end;\\n\\t\\t}\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel.collapsed {\\n\\t\\t\\tpadding-inline-end: ${DIVIDER_GUTTER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.supporting-panel.collapsed {\\n\\t\\t\\tpadding-inline-start: ${DIVIDER_GUTTER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.side-nav-panel.collapsed .side-nav-panel-content,\\n\\t\\t.supporting-panel.collapsed .supporting-panel-content {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t@media (prefers-reduced-motion: no-preference) {\\n\\t\\t\\t.side-nav-panel.animate,\\n\\t\\t\\t.supporting-panel.animate,\\n\\t\\t\\t.side-nav-panel.animate .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate .supporting-panel-content {\\n\\t\\t\\t\\ttransition:\\n\\t\\t\\t\\t\\twidth 400ms cubic-bezier(0, 0.7, 0.5, 1),\\n\\t\\t\\t\\t\\tpadding 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel.animate.collapsed .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate.collapsed .supporting-panel-content {\\n\\t\\t\\t\\ttransition:\\n\\t\\t\\t\\t\\twidth 400ms cubic-bezier(0, 0.7, 0.5, 1),\\n\\t\\t\\t\\t\\tvisibility 0s 400ms;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components and divider */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "stateStorageKey",

package/package.json

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