@brightspace-ui/core 3.266.1 → 3.267.0

package/components/list/list-item-checkbox-mixin.js

@@ -1,5 +1,6 @@
 import '../selection/selection-input.js';
 import { css, html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { isInteractiveInListItemComposedPath } from './list-item-mixin.js';
 import { SelectionInfo } from '../selection/selection-mixin.js';
@@ -57,6 +58,9 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 			:host([selection-disabled]) [slot="control-action"] [slot="content"] {
 				pointer-events: all;
 			}
+			:host([layout="tile"]) .bump-inline {
+				margin-inline-start: 2rem !important;
+			}
 		` ];
 
 		super.styles && styles.unshift(super.styles);
@@ -164,6 +168,9 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 	}
 
 	_renderCheckbox() {
+		const classes = {
+			'bump-inline': this._keyboardActive
+		};
 		return this.selectable ? html`
 			<d2l-selection-input
 				@d2l-selection-change="${this._onCheckboxChange}"
@@ -177,7 +184,8 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 				@mouseenter="${this._onMouseEnterSelection}"
 				@mouseleave="${this._onMouseLeaveSelection}"
 				?selected="${this.selected}"
-				?skeleton="${this.skeleton}">
+				?skeleton="${this.skeleton}"
+				class=${classMap(classes)}>
 			</d2l-selection-input>
 		` : nothing;
 	}

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

@@ -311,12 +311,32 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				width: 100%;
 				z-index: 1;
 			}
+
 			.d2l-list-item-drag-bottom-marker {
 				bottom: -6px;
 			}
 			.d2l-list-item-drag-top-marker {
 				top: -6px;
 			}
+
+			:host([layout="tile"]) .d2l-list-item-drag-bottom-marker,
+			:host([layout="tile"]) .d2l-list-item-drag-top-marker {
+				height: 100%;
+				width: auto;
+			}
+
+			:host([layout="tile"]) .d2l-list-item-drag-bottom-marker {
+				/* The gap between the cards plus half the width of the marker  */
+				inset-inline-end: calc(-0.9rem + 3px);
+				bottom: 0;
+			}
+			:host([layout="tile"]) .d2l-list-item-drag-top-marker {
+				/* The gap between the cards plus half the width of the marker  */
+				inset-inline-start: calc(-0.9rem + 3px);
+				top: 0;
+			}
+
+
 			.d2l-list-item-drag-area {
 				cursor: move;
 				height: 100%;
@@ -326,6 +346,11 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				grid-template-columns: 100%;
 				grid-template-rows: 1rem 1fr 1fr 1rem;
 			}
+			:host([layout="tile"]) .d2l-list-item-drag-drop-grid {
+				display: grid;
+				grid-template-columns: 1rem 1fr 1fr 1rem;
+				grid-template-rows: 100%;
+			}
 			:host([_drop-location="7"]) {
 				z-index: 1; /* drop target border must render on top of next adjacent border */
 			}
@@ -344,6 +369,10 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				d2l-list-item-drag-handle {
 					opacity: 0;
 				}
+				:host([layout="tile"][draggable]) d2l-list-item-drag-handle {
+					opacity: 1;
+				}
+
 				:host([selected]) d2l-list-item-drag-handle,
 				:host([current]) d2l-list-item-drag-handle,
 				:host([_drag-handle-show-always]) d2l-list-item-drag-handle,
@@ -858,6 +887,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				?disabled="${this.keyboardDragDisabled}"
 				text="${ifDefined(this.dragHandleText)}"
 				keyboard-text-info="${ifDefined(this._keyboardTextInfo)}"
+				layout="${this.layout}"
 				@focusin="${this._onFocusinDragHandle}"
 				@focusout="${this._onFocusoutDragHandle}"
 				@d2l-list-item-drag-handle-action="${this._onDragHandleActions}">

package/components/list/list-item-drag-handle.js

@@ -38,6 +38,9 @@ export const dragActions = Object.freeze({
 });
 
 let hasDisplayedKeyboardTooltip = false;
+export const resetDisplayedTooltip = () => {
+	hasDisplayedKeyboardTooltip = false;
+};
 
 /**
  * @fires d2l-list-item-drag-handle-action - Dispatched when an action performed on the drag handle
@@ -61,6 +64,10 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(LitElement)) {
 			 * @type {string}
 			 */
 			text: { type: String },
+			/**
+			 * When layout = tile, the drag handle become horizontal
+			 */
+			layout: { type: String },
 			_displayKeyboardTooltip: { type: Boolean },
 			_keyboardActive: { type: Boolean }
 		};
@@ -117,6 +124,12 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(LitElement)) {
 			d2l-button-move {
 				pointer-events: auto; /* required since ancestors may set point-events: none; (see generic layout) */
 			}
+
+			:host([layout="tile"]) {
+				align-items: center;
+				display: flex;
+				height: 39px;
+			}
 		`];
 	}
 
@@ -152,7 +165,9 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(LitElement)) {
 	get _defaultLabel() {
 		const namespace = 'components.list-item-drag-handle';
 		const defaultLabel = this.localize(`${namespace}.${'default'}`, 'name', this.text);
-		const keyboardTextLabel = this.localize(`${namespace}.${'keyboard'}`, 'currentPosition', this.keyboardTextInfo && this.keyboardTextInfo.currentPosition, 'size', this.keyboardTextInfo && this.keyboardTextInfo.count);
+		const keyboardTextLabel = this.layout !== 'tile'
+			? this.localize(`${namespace}.${'keyboard'}`, 'currentPosition', this.keyboardTextInfo && this.keyboardTextInfo.currentPosition, 'size', this.keyboardTextInfo && this.keyboardTextInfo.count)
+			: this.localize(`${namespace}.${'side-to-side.keyboard'}`, 'currentPosition', this.keyboardTextInfo && this.keyboardTextInfo.currentPosition, 'size', this.keyboardTextInfo && this.keyboardTextInfo.count);
 		return this._keyboardActive ? keyboardTextLabel : defaultLabel;
 	}
 
@@ -182,6 +197,20 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(LitElement)) {
 
 		const isRtl = document.documentElement.getAttribute('dir') === 'rtl';
 
+		if (this.layout === 'tile') {
+			if (!isRtl) {
+				if (e.detail.action === moveActions.right)
+					e.detail.action = moveActions.down;
+				if (e.detail.action === moveActions.left)
+					e.detail.action = moveActions.up;
+			} else {
+				if (e.detail.action === moveActions.right)
+					e.detail.action = moveActions.up;
+				if (e.detail.action === moveActions.left)
+					e.detail.action = moveActions.down;
+			}
+		}
+
 		let action = null;
 		switch (e.detail.action) {
 			case moveActions.up:
@@ -299,19 +328,25 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(LitElement)) {
 				id="${this._buttonId}"
 				@keydown="${this._onMoveButtonKeydown}"
 				@mousedown="${this._onMoveButtonMouseDown}"
-				text="${this._defaultLabel}">
+				text="${this._defaultLabel}"
+				?side-to-side="${this.layout === 'tile'}">
 			</d2l-button-move>
 			${this._displayKeyboardTooltip ? html`<d2l-tooltip class="vdiff-target" align="start" announced for="${this._buttonId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;
 	}
 
 	_renderTooltipContent() {
+		const namespace = 'components.list-item-drag-handle-tooltip';
+		const controlNamespace = this.layout === 'tile'
+			? `${namespace}.side-to-side`
+			: namespace;
+
 		return html`
-			<div>${this.localize('components.list-item-drag-handle-tooltip.title')}</div>
+			<div>${this.localize(`${namespace}.title`)}</div>
 			<ul>
-				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.enter-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.enter-desc')}</li>
-				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.up-down-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.up-down-desc')}</li>
-				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.left-right-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.left-right-desc')}</li>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize(`${namespace}.enter-key`)}</span> - ${this.localize(`${namespace}.enter-desc`)}</li>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize(`${namespace}.up-down-key`)}</span> - ${this.localize(`${controlNamespace}.up-down-desc`)}</li>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize(`${namespace}.left-right-key`)}</span> - ${this.localize(`${controlNamespace}.left-right-desc`)}</li>
 			</ul>
 		`;
 	}

package/components/list/list-item-generic-layout.js

@@ -65,8 +65,7 @@ class ListItemGenericLayout extends LitElement {
 			/**
 			 * @ignore
 			 */
-			layout: { type: String, reflect: true }
-
+			layout: { type: String, reflect: true },
 		};
 	}
 
@@ -216,7 +215,21 @@ class ListItemGenericLayout extends LitElement {
 
 			:host([layout="tile"]) {
 				grid-template-columns:
-					[start control-start] minmax(0, min-content)
+					[start outside-control-start] minmax(0, 26px)
+					[outside-control-end control-start] minmax(0, min-content)
+					[control-end actions-start] minmax(0, auto)
+					[actions-end end];
+				grid-template-rows:
+					[start header-start] minmax(0, min-content)
+					[header-end content-start] auto
+					[content-end end];
+				height: 100%;
+			}
+
+			:host([layout="tile"]:not([is-draggable])) {
+				grid-template-columns:
+					[start outside-control-start] 0
+					[outside-control-end control-start] minmax(0, min-content)
 					[control-end actions-start] minmax(0, auto)
 					[actions-end end];
 				grid-template-rows:
@@ -258,14 +271,22 @@ class ListItemGenericLayout extends LitElement {
 				grid-row: content-start / content-end;
 			}
 
+			:host([layout="tile"]) ::slotted([slot="outside-control"]) {
+				grid-column: outside-control-start / outside-control-end;
+				grid-row: start / start;
+				width: min-content;
+			}
+
+			:host([layout="tile"]) ::slotted([slot="outside-control-action"]) {
+				grid-column: start / end;
+				grid-row: start / start;
+			}
+
 			:host(:not([layout="tile"])) slot[name="header"],
 			:host([layout="tile"]) slot[name="add-top"],
 			:host([layout="tile"]) slot[name="control-container"],
 			:host([layout="tile"]) slot[name="before-content"],
-			:host([layout="tile"]) slot[name="outside-control"],
-			:host([layout="tile"]) slot[name="outside-control-action"],
 			:host([layout="tile"]) slot[name="expand-collapse"],
-			:host([layout="tile"]) slot[name="drop-target"],
 			:host([layout="tile"]) slot[name="nested"],
 			:host([layout="tile"]) slot[name="add"] {
 				display: none;

package/components/list/list-item-link-mixin.js

@@ -35,6 +35,10 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 			:host([action-href]:not([action-href=""])) [slot="outside-control-action"] {
 				grid-column-end: control-end;
 			}
+
+			:host([action-href]:not([action-href=""])[layout="tile"]) [slot="outside-control-action"] {
+				grid-column-end: end;
+			}
 		` ];
 
 		super.styles && styles.unshift(super.styles);

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

@@ -163,6 +163,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				background: white;
 			}
 
+			:host([dragging][layout="tile"]) d2l-list-item-generic-layout {
+				filter: grayscale(75%);
+				opacity: 0.4;
+			}
+
 			[slot="control-container"] {
 				pointer-events: none;
 				position: relative;
@@ -333,6 +338,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin: 0.25rem 0.3rem;
 			}
 
+			:host([layout="tile"]) d2l-list-item-drag-handle {
+				margin-block: 0;
+				margin-inline: 0.3rem 0;
+			}
+
 			[slot="outside-control-container"] {
 				border: 1px solid transparent;
 				border-radius: 6px;
@@ -474,6 +484,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				transform: translateY(-10px);
 				transition: opacity 200ms ease-out, transform 0ms ease-out 300ms;
 			}
+
 			:host([layout="tile"][_selection-when-interacted]) [slot="control"]:hover,
 			:host([layout="tile"][_selection-when-interacted][_focusing]) [slot="control"],
 			:host([layout="tile"][_selection-when-interacted][_force-show-selection]) [slot="control"],
@@ -484,6 +495,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				transition: opacity 200ms ease-out, transform 200ms ease-out;
 			}
 
+			:host([layout="tile"][draggable][tile-header]) [slot="control"] {
+				margin: 0.25rem 0;
+			}
+
 			@media (prefers-reduced-motion: reduce) {
 				:host([layout="tile"][_selection-when-interacted]) [slot="control"] {
 					transform: none;
@@ -587,6 +602,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host([layout="tile"]) d2l-selection-input {
 				margin: 0;
 			}
+
+			:host([layout="tile"][draggable]) d2l-selection-input {
+				margin: auto;
+				margin-inline-start: 0.3rem;
+			}
 			:host([layout="tile"]:not([tile-header])) d2l-selection-input {
 				--d2l-input-checkbox-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
 				--d2l-input-radio-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
@@ -724,6 +744,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			this._hasListItemContent = !!this.shadowRoot.querySelector('slot:not([name])').assignedElements({ flatten: true })
 				.find(elem => elem.tagName === 'D2L-LIST-ITEM-CONTENT');
 		}
+		if (this.draggable) {
+			this.tileHeader = true;
+		}
 	}
 
 	focus() {
@@ -975,6 +998,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				data-separators="${ifDefined(this._separators)}"
 				indentation="${ifDefined(this.indentation)}"
 				?grid-active="${this.role === 'row'}"
+				?selectable="${this.selectable}"
+				?is-draggable="${this.draggable}"
 				layout="${this.layout}"
 				?no-primary-action="${this.noPrimaryAction}">
 				${this._showAddButton && this.first ? html`
@@ -1038,10 +1063,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			</d2l-list-item-generic-layout>
 		`;
 
+		const isDraggableTile = this.draggable && this.layout === 'tile';
+
 		return html`
-			${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
+			${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker ?vertical="${isDraggableTile}"></d2l-list-item-placement-marker>`)}
 			${this.draggable ? html`<div class="d2l-list-item-drag-image">${innerView}</div>` : innerView}
-			${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
+			${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker ?vertical="${isDraggableTile}"></d2l-list-item-placement-marker>`)}
 			${this._displayKeyboardTooltip && tooltipForId ? html`<d2l-tooltip align="start" announced for="${tooltipForId}" for-type="descriptor">${this.localizeHTML('components.list.keyboard')}</d2l-tooltip>` : ''}
 			${this.draggable ? this._renderDragMultipleImage() : nothing}
 		`;

package/components/list/list-item-placement-marker.js

@@ -3,25 +3,44 @@ import { css, html, LitElement } from 'lit';
 
 class ListItemPlacementMarker extends LitElement {
 
+	static properties = {
+		vertical: { type: Boolean, reflect: true }
+	};
+
 	static get styles() {
 		return css`
 			:host {
 				display: block;
 			}
 
+			:host([vertical]) {
+				height: 100%;
+			}
+
 			:host([hidden]) {
 				display: none;
 			}
 
+			:host([vertical]) .d2l-list-drag-marker-line {
+				height: 100%;
+				margin: -1px 0;
+				width: 12px;
+			}
+
 			.d2l-list-drag-marker-line {
 				height: 12px;
-				margin-left: -1px;
-				margin-right: -1px;
+				margin-inline: -1px;
 				stroke: var(--d2l-color-celestine);
 				stroke-width: 3px;
 				width: 100%;
 			}
 
+			:host([vertical]) .d2l-list-drag-marker-linecap {
+				height: 4px;
+				margin-inline: 0 -2px;
+				width: 12px;
+			}
+
 			.d2l-list-drag-marker-linecap {
 				fill: var(--d2l-color-celestine);
 				height: 12px;
@@ -30,6 +49,11 @@ class ListItemPlacementMarker extends LitElement {
 				width: 4px;
 			}
 
+			:host([vertical]) .d2l-list-drag-marker-circle {
+				margin-inline: 0 0;
+			}
+
+
 			.d2l-list-drag-marker-circle {
 				fill: none;
 				height: 12px;
@@ -43,10 +67,37 @@ class ListItemPlacementMarker extends LitElement {
 				display: flex;
 				flex-wrap: nowrap;
 			}
+
+			:host([vertical]) .d2l-list-drag-marker {
+				flex-direction: column;
+				height: 100%;
+			}
 		`;
 	}
 
+	constructor() {
+		super();
+		this.vertical = false;
+	}
+
 	render() {
+
+		if (this.vertical) {
+			return html`
+			<div class="d2l-list-drag-marker">
+				<svg class="d2l-list-drag-marker-circle">
+					<circle cx="50%" cy="50%" r="3.8px"/>
+				</svg>
+				<svg class="d2l-list-drag-marker-line">
+					<line x1="50%" y1="0" x2="50%" y2="100%" />
+				</svg>
+				<svg class="d2l-list-drag-marker-linecap">
+					<circle cx="50%" cy="50%" r="1.5px"/>
+				</svg>
+			</div>
+		`;
+		}
+
 		return html`
 			<div class="d2l-list-drag-marker">
 				<svg class="d2l-list-drag-marker-circle">

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);