@brightspace-ui/core 3.274.1 → 3.275.0

package/components/calendar/calendar.js

@@ -481,8 +481,8 @@ class Calendar extends LocalizeCoreElement(LitElement) {
 
 		const weekdayHeaders = calendarData.daysOfWeekIndex.map((index) => html`
 			<th>
-				<abbr class="d2l-body-small" title="${calendarData.descriptor.calendar.days.long[index]}">
-					${calendarData.descriptor.calendar.days.short[index]}
+				<abbr class="d2l-body-small" title="${calendarData.descriptor.calendar.daysStandAlone.wide[index]}">
+					${calendarData.descriptor.calendar.daysStandAlone.abbreviated[index]}
 				</abbr>
 			</th>
 		`);

package/components/empty-state/README.md

@@ -32,16 +32,20 @@ Empty state components are used to convey that there is no data available to be
 
 <!-- docs: start best practices -->
 <!-- docs: start dos -->
-* Use clear language to indicate there is no data available
-* Offer concise guidance about next steps
+* Use an empty state in place of an empty list, table, widget, or page section
+  * Replace the entire content with its empty state; do not show an empty table or list header
 * Include an [Empty State Action](#d2l-empty-state-action-button) or [Link](#d2l-empty-state-action-link) if it can help the user
-* Replace the entire content with its empty state; do not show an empty table or list header
+* Follow our [Writing guidelines]({{ project.assetPath }}/style-elements/writing/#periods)
+  * Use clear language to indicate there is no data available
+  * Offer concise guidance about next steps unless the action or button already provides a next step
+  * If you include an action or button, end your message with a period even if it's a single sentence (this is an exception to the rules for [Periods]({{ project.assetPath }}/style-elements/writing/#periods))
 <!-- docs: end dos -->
 
 <!-- docs: start donts -->
-* Don’t use an empty state as a default state while data is loading
-* Don't leave a section completely empty, or use a skeleton loading screen in place of an empty state component
-* Avoid causing users to believe that they have hit a dead-end when they have not
+* Don’t use an empty state as a default state while data is loading — consider using a [Skeleton Loader or Loading Spinner]({{ project.assetPath }}/components/loading-spinner/#when-should-i-use-the-skeleton-loader-pattern-vs.-a-loading-spinner) instead
+* Avoid having multiple empty state messages caused by the same root issue
+  * The presence of multiple empty states often indicates a special case that can be addressed at the design level
+  * For instance, an underlying error causing no data to be returned or a first-time user who could be guided through creating the data instead of seeing a bunch of empty states
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 

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

@@ -1,4 +1,5 @@
 import '../colors/colors.js';
+import '../icons/icon-custom.js';
 import { css, html, LitElement } from 'lit';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { formatPercent } from '@brightspace-ui/intl';
@@ -6,17 +7,55 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 
 export const DIVIDER_WIDTH = 4;
+export const DIVIDER_HANDLE_SIZE = 30;
 export const KEYBOARD_STEP = 20; // TO DO: Confirm
 export const KEYBOARD_STEP_LARGE = 80; // TO DO: Confirm
 
 const clampedSize = (size, min, max) => Math.max(min, Math.min(size, max));
 
+const ICON_ARROW_COLLAPSE_LEFT = html`
+	<svg width="18" height="18" mirror-in-rtl xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+		<path fill="#494c4e" d="M11.71 13.708c.186-.189.29-.443.29-.708V5.005a1 1 0 0 0-1.71-.705l-4 4a1.013 1.013 0 0 0 0 1.42l4 4a1.01 1.01 0 0 0 1.42-.013"/>
+	</svg>
+`;
+const ICON_ARROW_EXPAND_RIGHT = html`
+	<svg width="18" height="18" mirror-in-rtl xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+		<path fill="#494c4e" d="M6 12.96v-8c0-.4.2-.8.6-.9s.8-.1 1.1.2l4 4c.4.4.4 1 0 1.4l-4 4c-.3.3-.7.4-1.1.2-.4-.1-.6-.5-.6-.9m2-5.6v3.2l1.6-1.6z"/>
+	</svg>
+`;
+const ICON_ARROW_COLLAPSE_RIGHT = html`
+	<svg width="18" height="18" mirror-in-rtl xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+		<path fill="#494c4e" d="m7.712 13.698 4-4a1.01 1.01 0 0 0 0-1.418l-4-4a1 1 0 0 0-1.71.725v7.993a1 1 0 0 0 1.71.7"/>
+	</svg>
+`;
+const ICON_ARROW_EXPAND_LEFT = html`
+	<svg width="18" height="18" mirror-in-rtl xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+		<path fill="#494c4e" d="M12 5.04v8c0 .4-.2.8-.6.9s-.8.1-1.1-.2l-4-4c-.4-.4-.4-1 0-1.4l4-4c.3-.3.7-.4 1.1-.2.4.1.6.5.6.9m-2 5.6v-3.2l-1.6 1.6z"/>
+	</svg>
+`;
+const ICON_ARROW_COLLAPSE_DOWN = html`
+	<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+		<path fill="#494c4e" d="M13.708 6.29A1 1 0 0 0 13 6H5.005A1 1 0 0 0 4.3 7.71l4 4a1.013 1.013 0 0 0 1.42 0l4-4a1.01 1.01 0 0 0-.013-1.42"/>
+	</svg>
+`;
+
+const ICON_ARROW_EXPAND_UP = html`
+	<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+		<path fill="#494c4e" d="M12.96 12h-8c-.4 0-.8-.2-.9-.6s-.1-.8.2-1.1l4-4c.4-.4 1-.4 1.4 0l4 4c.3.3.4.7.2 1.1-.1.4-.5.6-.9.6m-5.6-2h3.2l-1.6-1.6z"/>
+	</svg>
+`;
+
 /**
  * Internal divider used by d2l-page to resize its side-nav and supporting panels.
  */
 class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 
 	static properties = {
+		/**
+		 * Whether the panel/drawer the divider controls is collapsed
+		 * @type {boolean}
+		 */
+		collapsed: { type: Boolean, reflect: true },
 		/**
 		 * Current size of the panel/drawer the divider controls
 		 * @type {number}
@@ -51,6 +90,7 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 
 	static styles = css`
 		:host {
+			display: inline-block;
 			flex: none;
 		}
 		.divider {
@@ -68,11 +108,36 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		}
 
 		.slider {
+			inset-inline-start: -${DIVIDER_HANDLE_SIZE / 2 - DIVIDER_WIDTH / 2}px;
 			outline: none;
 			position: absolute;
 			top: 55px;
 		}
 
+		.divider-handle {
+			align-items: center;
+			background-color: white;
+			border: 1px solid var(--d2l-color-mica);
+			border-radius: 50%;
+			box-sizing: border-box;
+			cursor: pointer;
+			display: flex;
+			height: ${DIVIDER_HANDLE_SIZE}px;
+			justify-content: center;
+			width: ${DIVIDER_HANDLE_SIZE}px;
+		}
+		.divider-handle:hover {
+			background-color: var(--d2l-color-sylvite);
+			border-color: var(--d2l-color-celestine);
+		}
+		.slider:focus .divider-handle {
+			background-color: var(--d2l-color-celestine);
+			border-color: var(--d2l-color-celestine);
+		}
+		.slider:focus .divider-handle .handle-icon {
+			color: white;
+		}
+
 		:host([panel-type="drawer"]) .divider {
 			background-color: var(--d2l-color-celestine);
 			cursor: ns-resize;
@@ -94,6 +159,7 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 	constructor() {
 		super();
 
+		this.collapsed = false;
 		this.currentSize = 0;
 		this.label = '';
 		this.maxSize = 0;
@@ -121,18 +187,34 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 					aria-valuenow="${ifDefined(ariaValues.now)}"
 					aria-valuetext="${ifDefined(ariaValues.text)}"
 					@keydown="${this.#handleKeyDown}">
+					<div class="divider-handle">
+						<d2l-icon-custom class="handle-icon" size="tier1">
+							${this.#getHandleIcon()}
+						</d2l-icon-custom>
+					</div>
 				</div>
 			</div>
 		`;
 	}
 
+	#getHandleIcon() {
+		if (this.panelType === 'panel') {
+			if (this.panelPosition === 'start') {
+				return this.collapsed ? ICON_ARROW_EXPAND_RIGHT : ICON_ARROW_COLLAPSE_LEFT;
+			} else {
+				return this.collapsed ? ICON_ARROW_EXPAND_LEFT : ICON_ARROW_COLLAPSE_RIGHT;
+			}
+		} else if (this.panelType === 'drawer') {
+			return this.collapsed ? ICON_ARROW_EXPAND_UP : ICON_ARROW_COLLAPSE_DOWN;
+		}
+	}
+
 	#handleKeyDown(e) {
 		if (!['Enter', ' ', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(e.key)) return;
 		e.preventDefault();
 
 		if (e.key === 'Enter' || e.key === ' ') {
-			/** @ignore */
-			this.dispatchEvent(new CustomEvent('d2l-page-divider-toggle'));
+			this.#sendToggleEvent();
 			return;
 		}
 
@@ -162,8 +244,17 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 	}
 
 	#handlePointerDown(e) {
+		if (e.button !== 0) return; // Don't collapse when right-clicking to debug
 		e.preventDefault();
 		this.focus();
+
+		const handle = this.shadowRoot.querySelector('.divider-handle');
+		const clickedHandle = handle && handle.contains(e.target);
+
+		// TO DO: Will move to PointerUp once we add dragging ability
+		if (this.collapsed || clickedHandle) {
+			this.#sendToggleEvent();
+		}
 	}
 
 	#sendResizeEvent(requestedSize) {
@@ -174,6 +265,11 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		} }));
 	}
 
+	#sendToggleEvent() {
+		/** @ignore */
+		this.dispatchEvent(new CustomEvent('d2l-page-divider-toggle'));
+	}
+
 }
 
 customElements.define('d2l-page-divider-internal', PageDivider);

package/components/page/page.js

@@ -21,6 +21,7 @@ class PanelStateController {
 		host.addController(this);
 	}
 
+	getCollapsed(key) { return this.#panels[key].collapsed; }
 	getMaxSize(key) { return this.#panels[key].maxSize; }
 	getMinSize(key) { return this.#panels[key].minSize; }
 	getSize(key) { return this.#panels[key].size; }
@@ -32,6 +33,12 @@ class PanelStateController {
 		this.#host.requestUpdate();
 	}
 
+	setCollapsed(key, collapsed) {
+		const panel = this.#panels[key];
+		panel.collapsed = collapsed;
+		this.#host.requestUpdate();
+	}
+
 	updateMaxSize(key, newMaxSize) {
 		const panel = this.#panels[key];
 		panel.maxSize = newMaxSize;
@@ -102,7 +109,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 		.header {
 			position: relative;
-			z-index: 15; /* To be over sticky content of our core components */
+			z-index: 16; /* To be over sticky content of our core components and the divider */
 		}
 
 		.page.header-sticky .header {
@@ -144,6 +151,10 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			overflow: clip auto;
 		}
 
+		.divider {
+			z-index: 15; /* To be over d2l-page-* panel headers */
+		}
+
 		.footer:not([hidden]),
 		.floating-buttons-container {
 			display: inline;
@@ -154,7 +165,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			inset: auto 0 0;
 			padding-block-start: 0.75rem;
 			position: fixed;
-			z-index: 10; /* To be over sticky content of our core components */
+			z-index: 15; /* To be over sticky content of our core components and divider */
 		}
 		.footer-contents {
 			margin-inline: var(--d2l-page-margin-inline, 0);
@@ -277,8 +288,10 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		this._panelState.resize(panelKey, e.detail.requestedSize);
 	};
 
-	#handleDividerToggle() {
-		// TO DO
+	#handleDividerToggle(e) {
+		const panelKey = e.target.dataset.panelKey;
+		const collapsed = !this._panelState.getCollapsed(panelKey);
+		this._panelState.setCollapsed(panelKey, collapsed);
 	};
 
 	#handleSlotVisibilityChange(e) {
@@ -302,6 +315,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 				class="divider"
 				data-panel-key="${panelKey}"
 				label="${label}"
+				?collapsed="${this._panelState.getCollapsed(panelKey)}"
 				current-size="${this._panelState.getSize(panelKey)}"
 				max-size="${this._panelState.getMaxSize(panelKey)}"
 				min-size="${this._panelState.getMinSize(panelKey)}"

package/custom-elements.json

@@ -13112,6 +13112,12 @@
       "path": "./components/page/page-divider-internal.js",
       "description": "Internal divider used by d2l-page to resize its side-nav and supporting panels.",
       "attributes": [
+        {
+          "name": "collapsed",
+          "description": "Whether the panel/drawer the divider controls is collapsed",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "current-size",
           "description": "Current size of the panel/drawer the divider controls",
@@ -13152,13 +13158,20 @@
       "properties": [
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\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\\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\\n\\t\\t.slider {\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 55px;\\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\\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 divider 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\\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\\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-sylvite);\\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);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle .handle-icon {\\n\\t\\t\\tcolor: white;\\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\\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 divider styling to come */\\n\\n\\t`\""
         },
         {
           "name": "focusElementSelector",
           "type": "string",
           "default": "\".slider\""
         },
+        {
+          "name": "collapsed",
+          "attribute": "collapsed",
+          "description": "Whether the panel/drawer the divider controls is collapsed",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "currentSize",
           "attribute": "current-size",
@@ -13527,7 +13540,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: 15; /* To be over sticky content of our core components */\\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.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\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\\toverflow: clip auto;\\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: 10; /* To be over sticky content of our core components */\\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: 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.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\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\\toverflow: clip auto;\\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.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": "widthType",

package/package.json

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