@brightspace-ui/core 3.266.1 → 3.267.1

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

@@ -0,0 +1,154 @@
+import '../colors/colors.js';
+import { css, html, LitElement } from 'lit';
+import { formatPercent } from '@brightspace-ui/intl';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+
+export const DIVIDER_WIDTH = 4;
+const KEYBOARD_STEP = 20; // TO DO: Confirm
+const KEYBOARD_STEP_LARGE = 80; // TO DO: Confirm
+
+const clampedSize = (size, min, max) => Math.max(min, Math.min(size, max));
+
+/**
+ * Internal divider used by d2l-page to resize its side-nav and supporting panels.
+ */
+class PageDivider extends PropertyRequiredMixin(LitElement) {
+
+	static properties = {
+		/**
+		 * Current size of the panel/drawer the divider controls
+		 * @type {number}
+		 */
+		currentSize: { type: Number, attribute: 'current-size' },
+		/**
+		 * REQUIRED: label for the divider
+		 * @type {string}
+		 */
+		label: { type: String, required: true },
+		/**
+		 * Maximum size of the panel/drawer the divider controls
+		 * @type {number}
+		 */
+		maxSize: { type: Number, attribute: 'max-size' },
+		/**
+		 * Minimum size of the panel/drawer the divider controls
+		 * @type {number}
+		 */
+		minSize: { type: Number, attribute: 'min-size' },
+		/**
+		 * Inline position of the panel the divider controls
+		 * @type {'start'|'end'}
+		 */
+		panelPosition: { type: String, attribute: 'panel-position' },
+		/**
+		 * Whether the divider is controlling a left/right panel or a bottom drawer
+		 * @type {'panel'|'drawer'}
+		 */
+		panelType: { type: String, attribute: 'panel-type' }
+	};
+
+	static styles = css`
+		:host {
+			flex: none;
+		}
+		.divider {
+			background-color: var(--d2l-color-gypsum);
+			cursor: ew-resize;
+			height: 100%;
+			outline: none;
+			width: ${DIVIDER_WIDTH}px;
+		}
+		.divider:hover {
+			background-color: var(--d2l-color-mica);
+		}
+		.divider:focus {
+			background-color: var(--d2l-color-celestine);
+		}
+
+		:host([panel-type="drawer"]) .divider {
+			background-color: var(--d2l-color-celestine);
+			cursor: ns-resize;
+			height: ${DIVIDER_WIDTH}px;
+			width: 100%;
+		}
+
+		/* TO DO: Lots more divider styling to come */
+
+	`;
+
+	constructor() {
+		super();
+
+		this.currentSize = 0;
+		this.label = '';
+		this.maxSize = 0;
+		this.minSize = 0;
+		this.panelPosition = 'start';
+		this.panelType = 'panel';
+	}
+
+	render() {
+		const currentSizePercent = formatPercent(Math.round(this.currentSize / this.maxSize) || 0);
+
+		return html`
+			<div
+				class="divider"
+				role="slider"
+				tabindex="0"
+				aria-label="${this.label}"
+				aria-orientation="${this.panelType === 'panel' ? 'horizontal' : 'vertical'}"
+				aria-valuemax="${this.maxSize}"
+				aria-valuemin="0"
+				aria-valuenow="${this.currentSize}"
+				aria-valuetext="${currentSizePercent}"
+				@keydown="${this.#handleKeyDown}">
+			</div>
+		`;
+	}
+
+	#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'));
+			return;
+		}
+
+		if (e.key === 'Home' || e.key === 'End') {
+			this.#sendResizeEvent(e.key === 'Home' ? this.minSize : this.maxSize);
+			return;
+		}
+
+		if (e.key === 'PageUp' || e.key === 'PageDown') {
+			this.#sendResizeEvent(this.currentSize + (e.key === 'PageUp' ? 1 : -1) * KEYBOARD_STEP_LARGE);
+			return;
+		}
+
+		let positiveStepKey;
+		if (this.panelType === 'panel') {
+			if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+			const isRtl = (document.documentElement.getAttribute('dir') === 'rtl');
+			positiveStepKey = (this.panelPosition === 'start') !== isRtl ? 'ArrowRight' : 'ArrowLeft';
+		} else if (this.panelType === 'drawer') {
+			if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
+			positiveStepKey = 'ArrowUp';
+		}
+
+		const step = (e.key === positiveStepKey ? 1 : -1) * KEYBOARD_STEP;
+		const requestedSize = this.currentSize + step;
+		this.#sendResizeEvent(requestedSize);
+	}
+
+	#sendResizeEvent(requestedSize) {
+		const clampedRequestedSize = clampedSize(requestedSize, this.minSize, this.maxSize);
+		/** @ignore */
+		this.dispatchEvent(new CustomEvent('d2l-page-divider-resize', { detail: {
+			requestedSize: clampedRequestedSize
+		} }));
+	}
+
+}
+
+customElements.define('d2l-page-divider-internal', PageDivider);

package/components/page/page.js

@@ -1,9 +1,49 @@
-import '../colors/colors.js';
 import '../button/floating-buttons.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { DIVIDER_WIDTH } from './page-divider-internal.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { ProviderMixin } from '../../mixins/provider/provider-mixin.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+const DRAWER_MIN_HEIGHT = 200; // TO DO: Confirm
+const MAIN_MIN_WIDTH = 600; // TO DO: Confirm
+const PANEL_MIN_WIDTH = 320;
+
+class PanelStateController {
+	constructor(host, panelConfigs) {
+		this.#host = host;
+		this.#panels = {};
+		for (const [key, config] of Object.entries(panelConfigs)) {
+			this.#panels[key] = { collapsed: false, size: 0, minSize: config.minSize, maxSize: config.minSize };
+		}
+		host.addController(this);
+	}
+
+	getMaxSize(key) { return this.#panels[key].maxSize; }
+	getMinSize(key) { return this.#panels[key].minSize; }
+	getSize(key) { return this.#panels[key].size; }
+
+	resize(key, requestedSize) {
+		const panel = this.#panels[key];
+		// Clamp requested size to min and max bounds
+		panel.size = Math.max(panel.minSize, Math.min(requestedSize, panel.maxSize));
+		this.#host.requestUpdate();
+	}
+
+	updateMaxSize(key, newMaxSize) {
+		const panel = this.#panels[key];
+		panel.maxSize = newMaxSize;
+
+		if (panel.size > newMaxSize) {
+			this.resize(key, panel.size);
+		}
+	}
+
+	#host;
+	#panels;
+}
 
 /**
  * Component for laying out a page, with header, optional footer and optional navigation or supporting panels
@@ -21,7 +61,10 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		 * @type {'normal'|'wide'|'fullscreen'}
 		 */
 		widthType: { type: String, attribute: 'width-type' },
+		_contentWidth: { state: true },
+		_headerHeight: { state: true },
 		_headerIsSticky: { state: true },
+		_footerHeight: { state: true },
 		_slotVisibility: { state: true }
 	};
 
@@ -76,7 +119,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 		main {
 			flex: 1;
-			min-width: min(400px, 100%); /* Actual min width TBD */
+			min-width: min(${MAIN_MIN_WIDTH}px, 100%);
 		}
 
 		.side-nav-panel,
@@ -87,12 +130,6 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			top: var(--d2l-page-header-height, 0);
 		}
 
-		.divider {
-			background-color: var(--d2l-color-gypsum);
-			flex: none;
-			width: 4px;
-		}
-
 		.footer:not([hidden]),
 		.floating-buttons-container {
 			display: inline;
@@ -115,16 +152,38 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		super();
 
 		this.widthType = 'normal';
+		this._contentWidth = 0;
+		this._headerHeight = 0;
 		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 }
+		});
 		this._slotVisibility = {};
+		this.#handleWindowResizeBound = this.#handleWindowResize.bind(this);
 		this.#resizeObserver = new ResizeObserver(entries => {
 			for (const entry of entries) {
 				if (entry.target.classList.contains('header')) {
-					const height = this._headerIsSticky ? entry.target.offsetHeight : 0;
+					this._headerHeight = entry.target.offsetHeight;
+
+					const height = this._headerIsSticky ? this._headerHeight : 0;
 					this.style.setProperty('--d2l-page-header-height', `${height}px`);
+					this._panelState.updateMaxSize('supporting-mobile', this.#getMaxDrawerHeight());
 				} else if (entry.target.classList.contains('footer')) {
-					const height = entry.target.classList.contains('fixed-footer') ? entry.target.offsetHeight : 0;
-					this.style.setProperty('--d2l-page-footer-height', `${height}px`);
+					this._footerHeight = entry.target.classList.contains('fixed-footer') ? entry.target.offsetHeight : 0;
+
+					this.style.setProperty('--d2l-page-footer-height', `${this._footerHeight}px`);
+					this._panelState.updateMaxSize('supporting-mobile', this.#getMaxDrawerHeight());
+				} else if (entry.target.classList.contains('content')) {
+					this._contentWidth = entry.contentRect.width;
+
+					const newMaxWidth = this.#getMaxPanelWidth();
+					this._panelState.updateMaxSize('side-nav', newMaxWidth);
+					this._panelState.updateMaxSize('supporting', newMaxWidth);
+
+					// TO DO: Collapse panel if needed
 				}
 			}
 		});
@@ -133,16 +192,24 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		});
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		window.addEventListener('resize', this.#handleWindowResizeBound);
+	}
+
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#resizeObserver.disconnect();
+		window.removeEventListener('resize', this.#handleWindowResizeBound);
 	}
 
 	firstUpdated() {
 		const header = this.shadowRoot.querySelector('.header');
 		const footer = this.shadowRoot.querySelector('.footer');
+		const content = this.shadowRoot.querySelector('.content');
 		if (header) this.#resizeObserver.observe(header);
 		if (footer) this.#resizeObserver.observe(footer);
+		if (content) this.#resizeObserver.observe(content);
 	}
 
 	render() {
@@ -164,14 +231,69 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		`;
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('_contentWidth') && changedProperties.get('_contentWidth') === 0 && this._contentWidth > 0) {
+			this.#initializePanelSizes();
+		}
+	}
+
+	#handleWindowResizeBound;
 	#resizeObserver;
 
+	#getMaxDrawerHeight() {
+		const reservedSpace = this._headerHeight + this._footerHeight + DIVIDER_WIDTH;
+		return Math.max(DRAWER_MIN_HEIGHT, window.innerHeight - reservedSpace);
+	}
+
+	#getMaxPanelWidth() {
+		const reservedSpace = MAIN_MIN_WIDTH + DIVIDER_WIDTH;
+		return Math.max(PANEL_MIN_WIDTH, this._contentWidth - reservedSpace);
+	}
+
+	#handleDividerResize(e) {
+		const panelKey = e.target.dataset.panelKey;
+		this._panelState.resize(panelKey, e.detail.requestedSize);
+	};
+
+	#handleDividerToggle() {
+		// TO DO
+	};
+
 	#handleSlotVisibilityChange(e) {
 		const key = e.target.name;
 		const nodes = e.target.assignedNodes();
 		this._slotVisibility = { ...this._slotVisibility, [key]: nodes.length !== 0 };
 	}
 
+	#handleWindowResize() {
+		this._panelState.updateMaxSize('supporting-mobile', this.#getMaxDrawerHeight());
+	};
+
+	#initializePanelSizes() {
+		const defaultWidth = Math.floor(this._contentWidth / 3);
+		const defaultHeight = Math.floor(window.innerHeight / 2);
+
+		this._panelState.resize('side-nav', defaultWidth);
+		this._panelState.resize('supporting', defaultWidth);
+		this._panelState.resize('supporting-mobile', defaultHeight);
+	}
+
+	#renderDivider(panelKey, label, panelPosition) {
+		return html`
+			<d2l-page-divider-internal
+				data-panel-key="${panelKey}"
+				label="${label}"
+				current-size="${this._panelState.getSize(panelKey)}"
+				max-size="${this._panelState.getMaxSize(panelKey)}"
+				min-size="${this._panelState.getMinSize(panelKey)}"
+				panel-position="${ifDefined(panelPosition)}"
+				@d2l-page-divider-resize="${this.#handleDividerResize}"
+				@d2l-page-divider-toggle="${this.#handleDividerToggle}"
+			></d2l-page-divider-internal>
+		`;
+	}
+
 	#renderFloatingButtons(footerContents) {
 		// Floating buttons needs to be wrapped as it spawns a sibling element that should be cleaned up as one by Lit
 		return html`
@@ -208,21 +330,23 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		return html`
 			<nav
 				class="side-nav-panel"
+				style=${styleMap({ width: `${this._panelState.getSize('side-nav')}px` })}
 				?hidden="${!this._slotVisibility['side-nav']}"
 				aria-label="${this.localize('components.page.side-nav-label')}">
 				<slot name="side-nav" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
 			</nav>
 			${!this._slotVisibility['side-nav'] ? nothing :
-				html`<div class="divider"></div>`}
+				this.#renderDivider('side-nav', this.localize('components.page.side-nav-divider-label'), 'start')}
 		`;
 	}
 
 	#renderSupportingPanel() {
 		return html`
 			${!this._slotVisibility['supporting'] ? nothing :
-				html`<div class="divider"></div>`}
+				this.#renderDivider('supporting', this.localize('components.page.supporting-divider-label'), 'end')}
 			<aside
 				class="supporting-panel"
+				style=${styleMap({ width: `${this._panelState.getSize('supporting')}px` })}
 				?hidden="${!this._slotVisibility['supporting']}"
 				aria-label="${this.localize('components.page.supporting-panel-label')}">
 				<slot name="supporting" @slotchange="${this.#handleSlotVisibilityChange}"></slot>

package/custom-elements.json

@@ -4984,7 +4984,7 @@
       "properties": [
         {
           "name": "styles",
-          "type": "CSSResult[]",
+          "type": "(string | CSSResult)[]",
           "default": "[\"inputStyles\",\"inputLabelStyles\"]"
         },
         {
@@ -9056,6 +9056,18 @@
           "name": "selectable",
           "type": "boolean"
         },
+        {
+          "name": "tiles",
+          "type": "boolean"
+        },
+        {
+          "name": "tile-header",
+          "type": "boolean"
+        },
+        {
+          "name": "actions",
+          "type": "boolean"
+        },
         {
           "name": "list",
           "type": "array",
@@ -9083,6 +9095,26 @@
           "attribute": "selectable",
           "type": "boolean"
         },
+        {
+          "name": "tiles",
+          "attribute": "tiles",
+          "type": "boolean"
+        },
+        {
+          "name": "tileHeader",
+          "attribute": "tile-header",
+          "type": "boolean"
+        },
+        {
+          "name": "actions",
+          "attribute": "actions",
+          "type": "boolean"
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"css`\\n\\t\\t.actions-containter {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 100%;\\n\\t\\t}\\n\\t`\""
+        },
         {
           "name": "list",
           "attribute": "list",
@@ -9862,6 +9894,11 @@
           "description": "The drag-handle label for assistive technology",
           "type": "string"
         },
+        {
+          "name": "layout",
+          "description": "When layout = tile, the drag handle become horizontal",
+          "type": "string"
+        },
         {
           "name": "disabled",
           "description": "Disables the handle",
@@ -9882,6 +9919,12 @@
           "description": "The drag-handle label for assistive technology",
           "type": "string"
         },
+        {
+          "name": "layout",
+          "attribute": "layout",
+          "description": "When layout = tile, the drag handle become horizontal",
+          "type": "string"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -10386,7 +10429,19 @@
     },
     {
       "name": "d2l-list-item-placement-marker",
-      "path": "./components/list/list-item-placement-marker.js"
+      "path": "./components/list/list-item-placement-marker.js",
+      "properties": [
+        {
+          "name": "properties",
+          "type": "{ vertical: { type: BooleanConstructor; reflect: boolean; }; }",
+          "default": "{\"vertical\":{\"type\":\"Boolean\",\"reflect\":true}}"
+        },
+        {
+          "name": "vertical",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
     },
     {
       "name": "d2l-list-item",
@@ -12352,6 +12407,53 @@
         }
       ]
     },
+    {
+      "name": "d2l-page-divider-internal",
+      "path": "./components/page/page-divider-internal.js",
+      "description": "Internal divider used by d2l-page to resize its side-nav and supporting panels.",
+      "properties": [
+        {
+          "name": "properties",
+          "type": "{ currentSize: number; label: string; maxSize: number; minSize: number; panelPosition: \"start\" | \"end\"; panelType: \"panel\" | \"drawer\"; }",
+          "default": "{\"currentSize\":{\"type\":\"Number\",\"attribute\":\"current-size\"},\"label\":{\"type\":\"String\",\"required\":true},\"maxSize\":{\"type\":\"Number\",\"attribute\":\"max-size\"},\"minSize\":{\"type\":\"Number\",\"attribute\":\"min-size\"},\"panelPosition\":{\"type\":\"String\",\"attribute\":\"panel-position\"},\"panelType\":{\"type\":\"String\",\"attribute\":\"panel-type\"}}"
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "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-gypsum);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\toutline: none;\\n\\t\\t\\twidth: ${DIVIDER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t}\\n\\t\\t.divider:focus {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\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/* TO DO: Lots more divider styling to come */\\n\\n\\t`\""
+        },
+        {
+          "name": "currentSize",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "maxSize",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "minSize",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "panelPosition",
+          "type": "string",
+          "default": "\"start\""
+        },
+        {
+          "name": "panelType",
+          "type": "string",
+          "default": "\"panel\""
+        }
+      ]
+    },
     {
       "name": "d2l-page-footer",
       "path": "./components/page/page-footer.js",
@@ -12663,13 +12765,13 @@
       "properties": [
         {
           "name": "properties",
-          "type": "{ widthType: \"normal\" | \"wide\" | \"fullscreen\"; _headerIsSticky: { state: boolean; }; _slotVisibility: { state: boolean; }; }",
-          "default": "{\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_headerIsSticky\":{\"state\":true},\"_slotVisibility\":{\"state\":true}}"
+          "type": "{ widthType: \"normal\" | \"wide\" | \"fullscreen\"; _contentWidth: { state: boolean; }; _headerHeight: { state: boolean; }; _headerIsSticky: { state: boolean; }; _footerHeight: { state: boolean; }; _slotVisibility: { ...; }; }",
+          "default": "{\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_contentWidth\":{\"state\":true},\"_headerHeight\":{\"state\":true},\"_headerIsSticky\":{\"state\":true},\"_footerHeight\":{\"state\":true},\"_slotVisibility\":{\"state\":true}}"
         },
         {
           "name": "styles",
           "type": "CSSResult",
-          "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\\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\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(400px, 100%); /* Actual min width TBD */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\theight: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tflex: none;\\n\\t\\t\\twidth: 4px;\\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: 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\\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\\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-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\theight: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\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`\""
         },
         {
           "name": "widthType",

package/lang/ar.js

@@ -135,10 +135,13 @@ export default {
 	"components.list-item.addItem": "إضافة عنصر",
 	"components.list-item-drag-handle.default": "إعادة ترتيب إجراء المادة لـ {name}",
 	"components.list-item-drag-handle.keyboard": "قم بإعادة ترتيب العنصر، الموضع الحالي {currentPosition} من {size}. لنقل هذا العنصر، اضغط على سهما لأعلى أو لأسفل.",
+	"components.list-item-drag-handle.side-to-side.keyboard": "Reorder item, current position {currentPosition} out of {size}. To move this item, press left or right arrows.",
 	"components.list-item-drag-handle-tooltip.enter-desc": "تبديل وضع إعادة ترتيب لوحة المفاتيح.",
 	"components.list-item-drag-handle-tooltip.enter-key": "إدخال",
 	"components.list-item-drag-handle-tooltip.left-right-desc": "غيِّر مستوى التداخل.",
 	"components.list-item-drag-handle-tooltip.left-right-key": "يسار/يمين",
+	"components.list-item-drag-handle-tooltip.side-to-side.left-right-desc": "Move item left or right in the list.",
+	"components.list-item-drag-handle-tooltip.side-to-side.up-down-desc": "Move item left or right in the list.",
 	"components.list-item-drag-handle-tooltip.title": "عناصر التحكم بلوحة المفاتيح لإعادة الترتيب:",
 	"components.list-item-drag-handle-tooltip.up-down-desc": "نقل المادة إلى الأعلى أو الأسفل في القائمة.",
 	"components.list-item-drag-handle-tooltip.up-down-key": "أعلى/أسفل",
@@ -153,7 +156,9 @@ export default {
 	"components.object-property-list.item-placeholder-text": "عنصر نائب",
 	"components.overflow-group.moreActions": "مزيد من الإجراءات",
 	"components.page.header-nav-label": "الرئيسية",
+	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "جانبية",
+	"components.page.supporting-divider-label": "Supporting Panel Divider",
 	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,

package/lang/ca.js

@@ -135,10 +135,13 @@ export default {
 	"components.list-item.addItem": "Afegeix element",
 	"components.list-item-drag-handle.default": "Acció de reordenar l’element per a {name}",
 	"components.list-item-drag-handle.keyboard": "Reordenar element, posició actual {currentPosition} de {size}. Per moure aquest element, premeu les fletxes amunt o avall.",
+	"components.list-item-drag-handle.side-to-side.keyboard": "Reorder item, current position {currentPosition} out of {size}. To move this item, press left or right arrows.",
 	"components.list-item-drag-handle-tooltip.enter-desc": "Canviar el mode de reordenació del teclat.",
 	"components.list-item-drag-handle-tooltip.enter-key": "Introduir",
 	"components.list-item-drag-handle-tooltip.left-right-desc": "Canviar el nivell d’anidament.",
 	"components.list-item-drag-handle-tooltip.left-right-key": "Esquerra/Dreta",
+	"components.list-item-drag-handle-tooltip.side-to-side.left-right-desc": "Move item left or right in the list.",
+	"components.list-item-drag-handle-tooltip.side-to-side.up-down-desc": "Move item left or right in the list.",
 	"components.list-item-drag-handle-tooltip.title": "Controls del teclat per reordenar:",
 	"components.list-item-drag-handle-tooltip.up-down-desc": "Mou l’element amunt o avall a la llista.",
 	"components.list-item-drag-handle-tooltip.up-down-key": "Amunt/Avall",
@@ -153,7 +156,9 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Element de marcador de posició",
 	"components.overflow-group.moreActions": "Més accions",
 	"components.page.header-nav-label": "Principal",
+	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Lateral",
+	"components.page.supporting-divider-label": "Supporting Panel Divider",
 	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,

package/lang/cy.js

@@ -135,10 +135,13 @@ export default {
 	"components.list-item.addItem": "Ychwanegu Eitem",
 	"components.list-item-drag-handle.default": "Aildrefnu gweithred eitem ar gyfer {name}",
 	"components.list-item-drag-handle.keyboard": "Aildrefnu eitemau, safle presennol {currentPosition} allan o {size}. I symud yr eitem hon, pwyswch y saeth i fyny neu’r saeth i lawr.",
+	"components.list-item-drag-handle.side-to-side.keyboard": "Reorder item, current position {currentPosition} out of {size}. To move this item, press left or right arrows.",
 	"components.list-item-drag-handle-tooltip.enter-desc": "Toglo’r modd aildrefnu bysellfwrdd.",
 	"components.list-item-drag-handle-tooltip.enter-key": "Nodi",
 	"components.list-item-drag-handle-tooltip.left-right-desc": "Newid y lefel nythu.",
 	"components.list-item-drag-handle-tooltip.left-right-key": "Chwith/De",
+	"components.list-item-drag-handle-tooltip.side-to-side.left-right-desc": "Move item left or right in the list.",
+	"components.list-item-drag-handle-tooltip.side-to-side.up-down-desc": "Move item left or right in the list.",
 	"components.list-item-drag-handle-tooltip.title": "Rheolaethau bysellfwrdd ar gyfer aildrefnu:",
 	"components.list-item-drag-handle-tooltip.up-down-desc": "Symud yr eitem i fyny neu i lawr yn y rhestr.",
 	"components.list-item-drag-handle-tooltip.up-down-key": "I Fyny/I Lawr",
@@ -153,7 +156,9 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Eitem Dalfan",
 	"components.overflow-group.moreActions": "Rhagor o Gamau Gweithredu",
 	"components.page.header-nav-label": "Prif",
+	"components.page.side-nav-divider-label": "Side Navigation Divider",
 	"components.page.side-nav-label": "Ochr",
+	"components.page.supporting-divider-label": "Supporting Panel Divider",
 	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,