@brightspace-ui/core 3.314.3 → 3.314.5

package/components/page/page-divider-internal.js

@@ -96,7 +96,8 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		 * Whether the divider is controlling a left/right panel or a bottom drawer
 		 * @type {'panel'|'drawer'}
 		 */
-		panelType: { type: String, attribute: 'panel-type' }
+		panelType: { type: String, attribute: 'panel-type' },
+		_active: { state: true }
 	};
 
 	static styles = css`
@@ -115,7 +116,8 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		.divider:hover {
 			background-color: var(--d2l-color-corundum);
 		}
-		.divider:focus-within {
+		.divider:focus-within,
+		.divider.active {
 			background-color: var(--d2l-color-celestine);
 		}
 		:host([panel-position="start"]) .divider.collapsed,
@@ -150,11 +152,13 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 			background-color: var(--d2l-color-gypsum);
 			border-color: var(--d2l-color-celestine);
 		}
-		.slider:focus .divider-handle {
+		.slider:focus .divider-handle,
+		.divider.active .divider-handle {
 			background-color: var(--d2l-color-celestine-minus-1);
 			border-color: var(--d2l-color-celestine-minus-1);
 		}
-		.slider:focus .divider-handle .handle-icon {
+		.slider:focus .divider-handle .handle-icon,
+		.divider.active .divider-handle .handle-icon {
 			color: white;
 		}
 
@@ -173,7 +177,8 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		.divider-arrow d2l-icon-custom {
 			color: var(--d2l-color-celestine);
 		}
-		.divider:focus-within .divider-arrow:not([hidden]) {
+		.divider:focus-within .divider-arrow:not([hidden]),
+		.divider.active .divider-arrow:not([hidden]) {
 			display: flex;
 		}
 		.divider-arrow:hover {
@@ -228,11 +233,20 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		this.minSize = 0;
 		this.panelPosition = 'start';
 		this.panelType = 'panel';
+
+		this._active = false;
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener('pointerdown', this.#handleDocumentPointerDown, { capture: true });
+		this._active = false;
 	}
 
 	render() {
 		const dividerClasses = {
 			divider: true,
+			active: this._active,
 			collapsed: this.currentSize <= this.collapsedSize,
 			maxed: this.currentSize === this.maxSize
 		};
@@ -273,11 +287,27 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		`;
 	}
 
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has('_active')) {
+			if (this._active) {
+				document.addEventListener('pointerdown', this.#handleDocumentPointerDown, { capture: true });
+			} else if (changedProperties.get('_active')) {
+				document.removeEventListener('pointerdown', this.#handleDocumentPointerDown, { capture: true });
+			}
+		}
+	}
+
 	#clickedArrow;
 	#clickedHandle = false;
 	#draggedDivider = false;
 	#dragStats;
 
+	#handleDocumentPointerDown = (e) => {
+		if (e.composedPath().includes(this)) return;
+		this._active = false;
+	};
+
 	#handlePointerMove = (e) => {
 		if (!this.#dragStats || e.pointerId !== this.#dragStats.pointerId) return;
 		const delta = this.panelType === 'panel' ? (e.clientX - this.#dragStats.startX) : (e.clientY - this.#dragStats.startY);
@@ -401,6 +431,13 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		const path = e.composedPath();
 		this.#clickedHandle = path.some(el => el.classList?.contains('divider-handle'));
 		this.#clickedArrow = path.find(el => el.classList?.contains('divider-arrow'));
+
+		// iOS clears focus on the slider once the tap completes, so we use a
+		// persistent `active` state to keep focus styles applied and the arrows visible.
+		if (e.pointerType === 'touch') {
+			this._active = true;
+		}
+
 		if (this.#clickedArrow) return; // Arrows don't support dragging
 
 		const startSize = this.collapsed ? this.collapsedSize : this.currentSize;

package/components/page/page.js

@@ -345,8 +345,8 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			z-index: 14; /* To be over d2l-page-main panel header and sticky content of our core components */
 		}
 		@media (max-width: ${OVERLAY_MODE_BREAKPOINT}px) {
-			.content.scrimmed {
-				overflow: clip;
+			.content.has-panels {
+				overflow-x: clip; /* Needed for iOS to properly calculate content size, not only for scrimming */
 			}
 			.side-nav-panel {
 				flex-shrink: 0;
@@ -458,8 +458,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		};
 		const contentClasses = {
 			'content': true,
-			'has-panels': this._slotVisibility['side-nav'] || this._slotVisibility['supporting'],
-			'scrimmed': showScrim
+			'has-panels': this._slotVisibility['side-nav'] || this._slotVisibility['supporting']
 		};
 
 		return html`

package/custom-elements.json

@@ -13400,7 +13400,7 @@
       "properties": [
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tflex: none;\\n\\t\\t}\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\ttouch-action: none;\\n\\t\\t\\twidth: ${DIVIDER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-corundum);\\n\\t\\t}\\n\\t\\t.divider:focus-within {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t:host([panel-position=\\\"start\\\"]) .divider.collapsed,\\n\\t\\t:host([panel-position=\\\"end\\\"]) .divider.maxed {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-end, e-resize);\\n\\t\\t}\\n\\t\\t:host([panel-position=\\\"start\\\"]) .divider.maxed,\\n\\t\\t:host([panel-position=\\\"end\\\"]) .divider.collapsed {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-start, w-resize);\\n\\t\\t}\\n\\n\\t\\t.slider {\\n\\t\\t\\tinset-inline-start: -${DIVIDER_HANDLE_SIZE / 2 - DIVIDER_WIDTH / 2}px;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 55px;\\n\\t\\t}\\n\\n\\t\\t.divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tborder: 1px solid var(--d2l-color-mica);\\n\\t\\t\\tborder-radius: 50%;\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\twidth: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t}\\n\\t\\t.divider-handle:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle .handle-icon {\\n\\t\\t\\tcolor: white;\\n\\t\\t}\\n\\n\\t\\t.divider-arrow {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: rgba(255, 255, 255, 0.5);\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\theight: 24px;\\n\\t\\t\\tinset-block-start: max(50%, 97px); /* Do not hide behind slider on short screens */\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttransform: translateY(-50%);\\n\\t\\t\\twidth: 24px;\\n\\t\\t}\\n\\t\\t.divider-arrow d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.divider:focus-within .divider-arrow:not([hidden]) {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t}\\n\\t\\t.divider-arrow:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t.divider-arrow:hover d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.divider-arrow.start {\\n\\t\\t\\tborder-end-start-radius: 6px;\\n\\t\\t\\tborder-start-start-radius: 6px;\\n\\t\\t\\tinset-inline-end: 100%;\\n\\t\\t}\\n\\t\\t.divider-arrow.end {\\n\\t\\t\\tborder-end-end-radius: 6px;\\n\\t\\t\\tborder-start-end-radius: 6px;\\n\\t\\t\\tinset-inline-start: 100%;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\theight: ${DIVIDER_WIDTH}px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider.collapsed {\\n\\t\\t\\tcursor: n-resize;\\n\\t\\t}\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider.maxed {\\n\\t\\t\\tcursor: s-resize;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .slider {\\n\\t\\t\\tinset-inline-end: 18px;\\n\\t\\t\\ttop: auto;\\n\\t\\t}\\n\\n\\t\\t/* TO DO: Lots more drawer styling to come */\\n\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tflex: none;\\n\\t\\t}\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\ttouch-action: none;\\n\\t\\t\\twidth: ${DIVIDER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-corundum);\\n\\t\\t}\\n\\t\\t.divider:focus-within,\\n\\t\\t.divider.active {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t:host([panel-position=\\\"start\\\"]) .divider.collapsed,\\n\\t\\t:host([panel-position=\\\"end\\\"]) .divider.maxed {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-end, e-resize);\\n\\t\\t}\\n\\t\\t:host([panel-position=\\\"start\\\"]) .divider.maxed,\\n\\t\\t:host([panel-position=\\\"end\\\"]) .divider.collapsed {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-start, w-resize);\\n\\t\\t}\\n\\n\\t\\t.slider {\\n\\t\\t\\tinset-inline-start: -${DIVIDER_HANDLE_SIZE / 2 - DIVIDER_WIDTH / 2}px;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 55px;\\n\\t\\t}\\n\\n\\t\\t.divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tborder: 1px solid var(--d2l-color-mica);\\n\\t\\t\\tborder-radius: 50%;\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\twidth: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t}\\n\\t\\t.divider-handle:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle,\\n\\t\\t.divider.active .divider-handle {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle .handle-icon,\\n\\t\\t.divider.active .divider-handle .handle-icon {\\n\\t\\t\\tcolor: white;\\n\\t\\t}\\n\\n\\t\\t.divider-arrow {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: rgba(255, 255, 255, 0.5);\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\theight: 24px;\\n\\t\\t\\tinset-block-start: max(50%, 97px); /* Do not hide behind slider on short screens */\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttransform: translateY(-50%);\\n\\t\\t\\twidth: 24px;\\n\\t\\t}\\n\\t\\t.divider-arrow d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.divider:focus-within .divider-arrow:not([hidden]),\\n\\t\\t.divider.active .divider-arrow:not([hidden]) {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t}\\n\\t\\t.divider-arrow:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t.divider-arrow:hover d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.divider-arrow.start {\\n\\t\\t\\tborder-end-start-radius: 6px;\\n\\t\\t\\tborder-start-start-radius: 6px;\\n\\t\\t\\tinset-inline-end: 100%;\\n\\t\\t}\\n\\t\\t.divider-arrow.end {\\n\\t\\t\\tborder-end-end-radius: 6px;\\n\\t\\t\\tborder-start-end-radius: 6px;\\n\\t\\t\\tinset-inline-start: 100%;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\theight: ${DIVIDER_WIDTH}px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider.collapsed {\\n\\t\\t\\tcursor: n-resize;\\n\\t\\t}\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider.maxed {\\n\\t\\t\\tcursor: s-resize;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .slider {\\n\\t\\t\\tinset-inline-end: 18px;\\n\\t\\t\\ttop: auto;\\n\\t\\t}\\n\\n\\t\\t/* TO DO: Lots more drawer styling to come */\\n\\n\\t`\""
         },
         {
           "name": "focusElementSelector",
@@ -13794,7 +13794,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: ${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\\tposition: relative;\\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\\tposition: relative;\\n\\t\\t}\\n\\t\\t.content.has-panels main {\\n\\t\\t\\tmax-width: calc(100% - ${DIVIDER_WIDTH}px - ${DIVIDER_GUTTER_WIDTH}px);\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, calc(100% - ${DIVIDER_WIDTH}px - ${DIVIDER_GUTTER_WIDTH}px));\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\t\\t.side-nav[hidden],\\n\\t\\t.supporting[hidden] {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\tbackground-color: white;\\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\\n\\t\\t/* Overlay Mode */\\n\\t\\t.scrim {\\n\\t\\t\\tbackground-color: var(--d2l-color-regolith);\\n\\t\\t\\tinset: 0;\\n\\t\\t\\topacity: 0.7;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tz-index: 14; /* To be over d2l-page-main panel header and sticky content of our core components */\\n\\t\\t}\\n\\t\\t@media (max-width: ${OVERLAY_MODE_BREAKPOINT}px) {\\n\\t\\t\\t.content.scrimmed {\\n\\t\\t\\t\\toverflow: clip;\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel {\\n\\t\\t\\t\\tflex-shrink: 0;\\n\\t\\t\\t}\\n\\t\\t\\t.supporting {\\n\\t\\t\\t\\tdisplay: flex;\\n\\t\\t\\t\\tinset-block: 0;\\n\\t\\t\\t\\tinset-inline-end: 0;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers and sticky content of our core components */\\n\\t\\t\\t}\\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\\tposition: relative;\\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\\tposition: relative;\\n\\t\\t}\\n\\t\\t.content.has-panels main {\\n\\t\\t\\tmax-width: calc(100% - ${DIVIDER_WIDTH}px - ${DIVIDER_GUTTER_WIDTH}px);\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, calc(100% - ${DIVIDER_WIDTH}px - ${DIVIDER_GUTTER_WIDTH}px));\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\t\\t.side-nav[hidden],\\n\\t\\t.supporting[hidden] {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\tbackground-color: white;\\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\\n\\t\\t/* Overlay Mode */\\n\\t\\t.scrim {\\n\\t\\t\\tbackground-color: var(--d2l-color-regolith);\\n\\t\\t\\tinset: 0;\\n\\t\\t\\topacity: 0.7;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tz-index: 14; /* To be over d2l-page-main panel header and sticky content of our core components */\\n\\t\\t}\\n\\t\\t@media (max-width: ${OVERLAY_MODE_BREAKPOINT}px) {\\n\\t\\t\\t.content.has-panels {\\n\\t\\t\\t\\toverflow-x: clip; /* Needed for iOS to properly calculate content size, not only for scrimming */\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel {\\n\\t\\t\\t\\tflex-shrink: 0;\\n\\t\\t\\t}\\n\\t\\t\\t.supporting {\\n\\t\\t\\t\\tdisplay: flex;\\n\\t\\t\\t\\tinset-block: 0;\\n\\t\\t\\t\\tinset-inline-end: 0;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers and sticky content of our core components */\\n\\t\\t\\t}\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "stateStorageKey",

package/package.json

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