@brightspace-ui/core 2.184.6 → 2.185.0

package/components/form/form.js

@@ -51,7 +51,7 @@ class Form extends FormMixin(LitElement) {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		/** @ignore */
-		this.dispatchEvent(new CustomEvent('d2l-form-disconnected'));
+		this.dispatchEvent(new CustomEvent('d2l-form-disconnect'));
 		this._isSubForm = false;
 	}
 
@@ -85,11 +85,15 @@ class Form extends FormMixin(LitElement) {
 		const errorMap = new Map();
 		const formElements = this._findFormElements();
 		for (const ele of formElements) {
-			if (this._hasSubForm(ele)) {
-				const form = this._getSubForm(ele);
-				if (!form.noNesting) {
-					const formErrors = await form.validate();
-					errorMap.set(ele, formErrors);
+			if (this._hasSubForms(ele)) {
+				const forms = this._getSubForms(ele);
+				for (const form of forms) {
+					if (!form.noNesting) {
+						const formErrors = await form.validate();
+						for (const [key, val] of formErrors) {
+							errorMap.set(key, val);
+						}
+					}
 				}
 			} else {
 				const eleErrors = await this._validateFormElement(ele, true);
@@ -112,16 +116,16 @@ class Form extends FormMixin(LitElement) {
 	}
 
 	_findFormElements() {
-		const isFormElementPredicate = ele => this._hasSubForm(ele);
-		const visitChildrenPredicate = ele => !this._hasSubForm(ele);
+		const isFormElementPredicate = ele => this._hasSubForms(ele);
+		const visitChildrenPredicate = ele => !this._hasSubForms(ele);
 		return findFormElements(this, isFormElementPredicate, visitChildrenPredicate);
 	}
 
-	_getSubForm(ele) {
+	_getSubForms(ele) {
 		return this._nestedForms.get(ele);
 	}
 
-	_hasSubForm(ele) {
+	_hasSubForms(ele) {
 		return this._nestedForms.has(ele);
 	}
 
@@ -136,13 +140,27 @@ class Form extends FormMixin(LitElement) {
 		e.stopPropagation();
 		e.preventDefault();
 		const form = e.composedPath()[0];
-		this._nestedForms.set(e.target, form);
+
+		if (!this._nestedForms.has(e.target)) {
+			this._nestedForms.set(e.target, []);
+		}
+		this._nestedForms.get(e.target).push(form);
 
 		const onFormDisconnect = () => {
 			form.removeEventListener('d2l-form-disconnect', onFormDisconnect);
-			this._nestedForms.delete(e.target);
+			if (this._nestedForms.has(e.target)) {
+				const forms = this._nestedForms.get(e.target);
+				const index = forms.indexOf(form);
+				if (index > -1) {
+					forms.splice(index, 1);
+				}
+				if (forms.length === 0) {
+					this._nestedForms.delete(e.target);
+				}
+			}
 		};
 		form.addEventListener('d2l-form-disconnect', onFormDisconnect);
+
 	}
 
 	async _submitData(submitter) {
@@ -154,11 +172,13 @@ class Form extends FormMixin(LitElement) {
 			const eleData = getFormElementData(ele, submitter);
 			if (isCustomFormElement(ele) || isNativeFormElement(ele)) {
 				formData = { ...formData, ...eleData };
-			} else if (this._hasSubForm(ele)) {
-				const form = this._getSubForm(ele);
-				if (!form.noNesting) {
-					form._submitData(submitter);
-				}
+			} else if (this._hasSubForms(ele)) {
+				const forms = this._getSubForms(ele);
+				forms.forEach(form => {
+					if (!form.noNesting) {
+						form._submitData(submitter);
+					}
+				});
 			}
 		}
 		/** Dispatched when the form is submitted. The form data can be obtained from the `detail`'s `formData` property. */

package/components/tooltip/tooltip.js

@@ -946,7 +946,8 @@ class Tooltip extends RtlMixin(LitElement) {
 			if (logAccessibilityWarning && !isInteractive && !this.announced) {
 				console.warn(
 					'd2l-tooltip may be being used in a non-accessible manner; it should be attached to interactive elements like \'a\', \'button\',' +
-					'\'input\'', '\'select\', \'textarea\' or static / custom elements if a role has been set and the element is focusable.'
+					'\'input\'', '\'select\', \'textarea\' or static / custom elements if a role has been set and the element is focusable.',
+					this._target
 				);
 				logAccessibilityWarning = false;
 			}

package/lang/ar.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "مسافة للخلف/حذف",
 	"components.tag-list-item.tooltip-delete-key-desc": "حذف العلامة المركّز عليها",
 	"components.tag-list-item.tooltip-title": "عناصر التحكم في لوحة المفاتيح",
-	"templates.primary-secondary.adjustableSplitView": "تقسيم العرض القابل للضبط",
-	"templates.primary-secondary.keyboardHorizontal": "السهم المتّجه إلى اليسار أو إلى اليمين لضبط حجم لوحات العرض",
-	"templates.primary-secondary.keyboardVertical": "السهم المتّجه إلى الأعلى أو إلى الأسفل لضبط حجم لوحات العرض"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/cy.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "Yn ôl/Dileu",
 	"components.tag-list-item.tooltip-delete-key-desc": "Dileu’r tag â ffocws",
 	"components.tag-list-item.tooltip-title": "Rheolyddion Bysellfwrdd",
-	"templates.primary-secondary.adjustableSplitView": "Gwedd Hollt Addasadwy",
-	"templates.primary-secondary.keyboardHorizontal": "Saeth i'r chwith neu'r dde i addasu maint y paneli gweld",
-	"templates.primary-secondary.keyboardVertical": "Saeth i fyny neu i lawr i addasu maint y paneli gweld"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/da.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "Tilbage/Slet",
 	"components.tag-list-item.tooltip-delete-key-desc": "Slet det fokuserede tag",
 	"components.tag-list-item.tooltip-title": "Kontrolelementer på tastaturet",
-	"templates.primary-secondary.adjustableSplitView": "Justerbar delt visning",
-	"templates.primary-secondary.keyboardHorizontal": "Pil til venstre eller højre for at justere størrelsen på visningspaneler",
-	"templates.primary-secondary.keyboardVertical": "Pil op eller ned for at justere størrelsen på visningspaneler"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/de.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "Rücktaste/Entfernen",
 	"components.tag-list-item.tooltip-delete-key-desc": "Ausgewählten Tag löschen",
 	"components.tag-list-item.tooltip-title": "Tastatursteuerung",
-	"templates.primary-secondary.adjustableSplitView": "Anpassbare geteilte Ansicht",
-	"templates.primary-secondary.keyboardHorizontal": "Pfeil nach links oder rechts, um die Größe der Ansichtsbereiche anzupassen",
-	"templates.primary-secondary.keyboardVertical": "Pfeil nach oben oder unten, um die Größe der Ansichtsbereiche anzupassen"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/en-gb.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
 	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
 	"components.tag-list-item.tooltip-title": "Keyboard Controls",
-	"templates.primary-secondary.adjustableSplitView": "Adjustable Split View",
-	"templates.primary-secondary.keyboardHorizontal": "Arrow left or right to adjust the size of the view panels",
-	"templates.primary-secondary.keyboardVertical": "Arrow up or down to adjust the size of the view panels"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/en.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
 	"components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
 	"components.tag-list-item.tooltip-title": "Keyboard Controls",
-	"templates.primary-secondary.adjustableSplitView": "Adjustable Split View",
-	"templates.primary-secondary.keyboardHorizontal": "Arrow left or right to adjust the size of the view panels",
-	"templates.primary-secondary.keyboardVertical": "Arrow up or down to adjust the size of the view panels"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/es-es.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "Retroceso/Eliminar",
 	"components.tag-list-item.tooltip-delete-key-desc": "Eliminar la etiqueta seleccionada",
 	"components.tag-list-item.tooltip-title": "Controles del teclado",
-	"templates.primary-secondary.adjustableSplitView": "Vista dividida ajustable",
-	"templates.primary-secondary.keyboardHorizontal": "Flecha hacia la izquierda o la derecha para ajustar el tamaño de los paneles de visualización",
-	"templates.primary-secondary.keyboardVertical": "Flecha hacia arriba o abajo para ajustar el tamaño de los paneles de visualización"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/es.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "Retroceso/Suprimir",
 	"components.tag-list-item.tooltip-delete-key-desc": "Eliminar la etiqueta enfocada",
 	"components.tag-list-item.tooltip-title": "Controles del teclado",
-	"templates.primary-secondary.adjustableSplitView": "Pantalla dividida ajustable",
-	"templates.primary-secondary.keyboardHorizontal": "Utilice la flecha izquierda o derecha para ajustar el tamaño de los paneles de visualización",
-	"templates.primary-secondary.keyboardVertical": "Utilice la flecha hacia arriba o hacia abajo para ajustar el tamaño de los paneles de visualización"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/fr-fr.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "Retour arrière/Supprimer",
 	"components.tag-list-item.tooltip-delete-key-desc": "Supprimez l’étiquette ciblée",
 	"components.tag-list-item.tooltip-title": "Commandes du clavier",
-	"templates.primary-secondary.adjustableSplitView": "Vue fractionnée réglable",
-	"templates.primary-secondary.keyboardHorizontal": "Flèche vers la gauche ou vers la droite pour régler la taille des panneaux d’affichage",
-	"templates.primary-secondary.keyboardVertical": "Flèche vers le haut ou vers le bas pour régler la taille des panneaux d’affichage"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/fr.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "Retour arrière/suppression",
 	"components.tag-list-item.tooltip-delete-key-desc": "Supprimer la balise ciblée",
 	"components.tag-list-item.tooltip-title": "Commandes du clavier",
-	"templates.primary-secondary.adjustableSplitView": "Vue partagée réglable",
-	"templates.primary-secondary.keyboardHorizontal": "Utiliser la flèche vers la gauche ou vers la droite pour régler la taille des volets d'affichage",
-	"templates.primary-secondary.keyboardVertical": "Flèche vers le haut ou vers le bas pour régler la taille des volets d'affichage"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/hi.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "बैकस्पेस/हटाएँ",
 	"components.tag-list-item.tooltip-delete-key-desc": "फ़ोकिस किए हुए टैग को हटाएँ",
 	"components.tag-list-item.tooltip-title": "कीबोर्ड कंट्रोल",
-	"templates.primary-secondary.adjustableSplitView": "समायोजन योग्य विभाजन दृश्य",
-	"templates.primary-secondary.keyboardHorizontal": "दृश्य पैनल्स का आकार समायोजित करने के लिए तीर बाएँ या दाएँ करें",
-	"templates.primary-secondary.keyboardVertical": "दृश्य पैनल्स का आकार समायोजित करने के लिए तीर ऊपर या नीचे करें"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/ja.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "Backspace キー／Delete キー",
 	"components.tag-list-item.tooltip-delete-key-desc": "フォーカスされたタグを削除します",
 	"components.tag-list-item.tooltip-title": "キーボードコントロール",
-	"templates.primary-secondary.adjustableSplitView": "調整可能な分割ビュー",
-	"templates.primary-secondary.keyboardHorizontal": "左矢印または右矢印を使用して、ビューパネルのサイズを調整します",
-	"templates.primary-secondary.keyboardVertical": "上矢印または下矢印を使用して、ビューパネルのサイズを調整します"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/ko.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "백스페이스/삭제",
 	"components.tag-list-item.tooltip-delete-key-desc": "포커스된 태그를 삭제합니다",
 	"components.tag-list-item.tooltip-title": "키보드 컨트롤",
-	"templates.primary-secondary.adjustableSplitView": "조정 가능한 분할 보기",
-	"templates.primary-secondary.keyboardHorizontal": "왼쪽 또는 오른쪽 화살표로 보기 패널의 크기 조정",
-	"templates.primary-secondary.keyboardVertical": "위 또는 아래 화살표로 보기 패널의 크기 조정"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/nl.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "Backspace/Verwijderen",
 	"components.tag-list-item.tooltip-delete-key-desc": "Verwijder de gerichte tag",
 	"components.tag-list-item.tooltip-title": "Bedieningselementen op het toetsenbord",
-	"templates.primary-secondary.adjustableSplitView": "Instelbare gesplitste weergave",
-	"templates.primary-secondary.keyboardHorizontal": "Pijl naar links of rechts om de grootte van de weergavevensters aan te passen",
-	"templates.primary-secondary.keyboardVertical": "Pijl omhoog of omlaag om de grootte van de weergavevensters aan te passen"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/pt.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "Retroceder/Excluir",
 	"components.tag-list-item.tooltip-delete-key-desc": "Excluir a marca de foco",
 	"components.tag-list-item.tooltip-title": "Controles do teclado",
-	"templates.primary-secondary.adjustableSplitView": "Exibição dividida ajustável",
-	"templates.primary-secondary.keyboardHorizontal": "Use a seta para a esquerda ou para a direita para ajustar o tamanho dos painéis de exibição",
-	"templates.primary-secondary.keyboardVertical": "Use a seta para cima ou para baixo para ajustar o tamanho dos painéis de exibição"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/sv.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "Backstegstangenten/Delete-tangenten",
 	"components.tag-list-item.tooltip-delete-key-desc": "Ta bort den fokuserade taggen",
 	"components.tag-list-item.tooltip-title": "Tangentbordskontroller",
-	"templates.primary-secondary.adjustableSplitView": "Justerbar delad vy",
-	"templates.primary-secondary.keyboardHorizontal": "Pil vänster eller höger för att justera storleken på vypaneler",
-	"templates.primary-secondary.keyboardVertical": "Pil upp eller ned för att justera storleken på vypaneler"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/tr.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "Geri Al/Sil",
 	"components.tag-list-item.tooltip-delete-key-desc": "Odaklanılan etiketi sil",
 	"components.tag-list-item.tooltip-title": "Klavye Kontrolleri",
-	"templates.primary-secondary.adjustableSplitView": "Ayarlanabilir Bölünmüş Görüntü",
-	"templates.primary-secondary.keyboardHorizontal": "Görüntü panellerinin boyutunu ayarlamak için sol veya sağ okları kullanın",
-	"templates.primary-secondary.keyboardVertical": "Görüntü panellerinin boyutunu ayarlamak için yukarı veya aşağı okları kullanın"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/zh-cn.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "退格键/Delete 键",
 	"components.tag-list-item.tooltip-delete-key-desc": "删除具有焦点的标签",
 	"components.tag-list-item.tooltip-title": "键盘控制",
-	"templates.primary-secondary.adjustableSplitView": "可调分屏视图",
-	"templates.primary-secondary.keyboardHorizontal": "向左或向右箭头可调整视图面板的大小",
-	"templates.primary-secondary.keyboardVertical": "向上或向下箭头可调整视图面板的大小"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/lang/zh-tw.js

@@ -123,7 +123,6 @@ export default {
 	"components.tag-list-item.tooltip-delete-key": "退格/刪除",
 	"components.tag-list-item.tooltip-delete-key-desc": "刪除對焦標記",
 	"components.tag-list-item.tooltip-title": "鍵盤控制項",
-	"templates.primary-secondary.adjustableSplitView": "可調整的分割檢視",
-	"templates.primary-secondary.keyboardHorizontal": "向左或向右箭頭可調整檢視面板的大小",
-	"templates.primary-secondary.keyboardVertical": "向上或向下箭頭可調整檢視面板的大小"
+	"templates.primary-secondary.divider": "Secondary panel divider",
+	"templates.primary-secondary.secondary-panel": "Secondary panel"
 };

package/package.json

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

package/templates/primary-secondary/primary-secondary.js

@@ -4,9 +4,8 @@ import '../../components/icons/icon.js';
 import '../../components/offscreen/offscreen.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { formatPercent } from '@brightspace-ui/intl';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
-import { getUniqueId } from '../../helpers/uniqueId.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
@@ -591,7 +590,8 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 			_isCollapsed: { type: Boolean, attribute: false },
 			_isExpanded: { type: Boolean, attribute: false },
 			_isMobile: { type: Boolean, attribute: false },
-			_size: { type: Number, attribute: false }
+			_size: { type: Number, attribute: false },
+			_sizeAsPercent: { state: true }
 		};
 	}
 
@@ -681,7 +681,8 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 			:host([resizable]:not([dir="rtl"])[secondary-first]) aside {
 				float: right;
 			}
-			.d2l-template-primary-secondary-divider {
+			.d2l-template-primary-secondary-divider,
+			.d2l-template-primary-secondary-divider-not-resizable {
 				background-color: var(--d2l-color-mica);
 				flex: none;
 				outline: none;
@@ -991,9 +992,8 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 		this._isCollapsed = false;
 		this._isExpanded = false;
 		this._isMobile = isMobile();
-
-		this._keyboardDescId = getUniqueId();
 		this._hasConnectedResizers = false;
+		this._sizeAsPercent = 0;
 	}
 
 	disconnectedCallback() {
@@ -1018,24 +1018,19 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 	}
 
 	render() {
-		let tabindex;
 		const size = this._size ?? 0;
 		const secondaryPanelStyles = {};
 		if (this._isResizable()) {
 			secondaryPanelStyles[this._isMobile ? 'height' : 'width'] = `${size}px`;
-			tabindex = 0;
 		}
-		const separatorVal = size && Math.round(size);
-		const separatorMax = this._contentBounds && Math.round(this._isMobile ? this._contentBounds.maxHeight : this._contentBounds.maxWidth);
 		const scrollClasses = {
 			'd2l-template-scroll': isWindows
 		};
-		const keyboardHelpText = this._isMobile ? this.localize('templates.primary-secondary.keyboardVertical') : this.localize('templates.primary-secondary.keyboardHorizontal');
 		const primarySection = html`<main class="${classMap(scrollClasses)}"><slot name="primary"></slot></main>`;
 		const secondarySection = html`
 			<div style=${styleMap(secondaryPanelStyles)} class="d2l-template-primary-secondary-secondary-container" @transitionend=${this._onTransitionEnd}>
 				<div class="d2l-template-primary-secondary-divider-shadow"></div>
-				<aside class="${classMap(scrollClasses)}">
+				<aside class="${classMap(scrollClasses)}" aria-label="${this.localize('templates.primary-secondary.secondary-panel')}">
 					<slot name="secondary"></slot>
 				</aside>
 			</div>`;
@@ -1044,27 +1039,7 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 				<header><slot name="header"></slot></header>
 				<div class="d2l-template-primary-secondary-content" data-background-shading="${this.backgroundShading}" ?data-animate-resize=${this._animateResize} ?data-is-collapsed=${this._isCollapsed} ?data-is-expanded=${this._isExpanded}>
 					${this.secondaryFirst && !this._isMobile ? secondarySection : primarySection}
-					<d2l-offscreen id="${this._keyboardDescId}">${keyboardHelpText}</d2l-offscreen>
-					<div tabindex="${ifDefined(tabindex)}" class="d2l-template-primary-secondary-divider" role=separator aria-label="${this.localize('templates.primary-secondary.adjustableSplitView')}" aria-describedby="${this._keyboardDescId}" aria-orientation=${this._isMobile ? 'horizontal' : 'vertical'} aria-valuenow="${ifDefined(separatorVal)}" aria-valuemax="${ifDefined(separatorMax)}">
-						<div class="d2l-template-primary-secondary-divider-handle" @click=${this._onHandleTap} @mousedown=${this._onHandleTapStart}>
-							<div class="d2l-template-primary-secondary-divider-handle-desktop">
-								<d2l-icon-custom size="tier1" class="d2l-template-primary-secondary-divider-handle-left">
-									<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
-										<path transform="rotate(90 9.004714965820312,9.000227928161623)" d="m13.708,6.29a1.006,1.006 0 0 0 -0.708,-0.29l-7.995,0a1,1 0 0 0 -0.705,1.71l4,4a1.013,1.013 0 0 0 1.42,0l4,-4a1.01,1.01 0 0 0 -0.013,-1.42l0.001,0z" fill="#494c4e"/>
-									</svg>
-								</d2l-icon-custom>
-								<div class="d2l-template-primary-secondary-divider-handle-line"></div>
-								<d2l-icon-custom size="tier1" class="d2l-template-primary-secondary-divider-handle-right">
-									<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
-										<path transform="rotate(-90 9.004714965820314,9.000227928161621)" d="m13.708,6.29a1.006,1.006 0 0 0 -0.708,-0.29l-7.995,0a1,1 0 0 0 -0.705,1.71l4,4a1.013,1.013 0 0 0 1.42,0l4,-4a1.01,1.01 0 0 0 -0.013,-1.42l0.001,0z" fill="#494c4e"/>
-									</svg>
-								</d2l-icon-custom>
-							</div>
-							<div class="d2l-template-primary-secondary-divider-handle-mobile">
-								<d2l-icon icon=${size === 0 ? 'tier1:chevron-up' : 'tier1:chevron-down'}></d2l-icon>
-							</div>
-						</div>
-					</div>
+					${this._renderDivider()}
 					${this.secondaryFirst && !this._isMobile ? primarySection : secondarySection}
 				</div>
 				<footer ?hidden="${!this._hasFooter}">
@@ -1126,19 +1101,24 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 		for (const resizer of this._resizers) {
 			resizer.panelSize = val;
 		}
+		this._sizeAsPercent = Math.round((val / (this._isMobile ? this._contentBounds?.height : this._contentBounds?.width)) * 100) || 0;
 		this.requestUpdate('_size', oldSize);
 	}
 
 	_computeContentBounds(contentRect) {
 		if (!this.shadowRoot) return;
-		const divider = this.shadowRoot.querySelector('.d2l-template-primary-secondary-divider');
+		const divider = this._isResizable() ?
+			this.shadowRoot.querySelector('.d2l-template-primary-secondary-divider') :
+			this.shadowRoot.querySelector('.d2l-template-primary-secondary-divider-not-resizable');
 		const desktopDividerSize = divider.offsetWidth;
 		const mobileDividerSize = divider.offsetHeight;
 		return {
+			height: contentRect.height,
 			minWidth: desktopMinSize,
 			maxWidth: contentRect.width - desktopMinSize - desktopDividerSize,
 			minHeight: (contentRect.height - mobileDividerSize) * (1 / 3),
-			maxHeight: (contentRect.height - mobileDividerSize) * (2 / 3)
+			maxHeight: (contentRect.height - mobileDividerSize) * (2 / 3),
+			width: contentRect.width
 		};
 	}
 
@@ -1175,7 +1155,9 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 				if (this._isMobile) {
 					this._size = this._contentBounds.minHeight;
 				} else if (this.shadowRoot) {
-					const divider = this.shadowRoot.querySelector('.d2l-template-primary-secondary-divider');
+					const divider = this._isResizable() ?
+						this.shadowRoot.querySelector('.d2l-template-primary-secondary-divider') :
+						this.shadowRoot.querySelector('.d2l-template-primary-secondary-divider-not-resizable');
 					const desktopDividerSize = contentRect.width - divider.offsetWidth;
 					this._size = Math.max(desktopMinSize, desktopDividerSize * (1 / 3));
 				}
@@ -1249,6 +1231,50 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 		}
 		this._animateResize = false;
 	}
+
+	_renderDivider() {
+
+		const size = this._size ?? 0;
+		const separatorMax = Math.round(
+			this._isMobile ?
+				(this._contentBounds?.maxHeight / this._contentBounds?.height) * 100 :
+				(this._contentBounds?.maxWidth / this._contentBounds?.width) * 100
+		) || 100;
+
+		return html`
+			<div class="d2l-template-primary-secondary-divider-not-resizable" ?hidden="${this._isResizable()}"></div>
+			<div class="d2l-template-primary-secondary-divider"
+				tabindex="0"
+				role="slider"
+				aria-label="${this.localize('templates.primary-secondary.divider')}"
+				aria-orientation="${this._isMobile ? 'vertical' : 'horizontal'}"
+				aria-valuemax="${separatorMax}"
+				aria-valuenow="${this._sizeAsPercent}"
+				aria-valuemin="0"
+				aria-valuetext="${formatPercent(this._sizeAsPercent / 100)}"
+				?hidden="${!this._isResizable()}">
+				<div class="d2l-template-primary-secondary-divider-handle" @click=${this._onHandleTap} @mousedown=${this._onHandleTapStart}>
+					<div class="d2l-template-primary-secondary-divider-handle-desktop">
+						<d2l-icon-custom size="tier1" class="d2l-template-primary-secondary-divider-handle-left">
+							<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
+								<path transform="rotate(90 9.004714965820312,9.000227928161623)" d="m13.708,6.29a1.006,1.006 0 0 0 -0.708,-0.29l-7.995,0a1,1 0 0 0 -0.705,1.71l4,4a1.013,1.013 0 0 0 1.42,0l4,-4a1.01,1.01 0 0 0 -0.013,-1.42l0.001,0z" fill="#494c4e"/>
+							</svg>
+						</d2l-icon-custom>
+						<div class="d2l-template-primary-secondary-divider-handle-line"></div>
+						<d2l-icon-custom size="tier1" class="d2l-template-primary-secondary-divider-handle-right">
+							<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
+								<path transform="rotate(-90 9.004714965820314,9.000227928161621)" d="m13.708,6.29a1.006,1.006 0 0 0 -0.708,-0.29l-7.995,0a1,1 0 0 0 -0.705,1.71l4,4a1.013,1.013 0 0 0 1.42,0l4,-4a1.01,1.01 0 0 0 -0.013,-1.42l0.001,0z" fill="#494c4e"/>
+							</svg>
+						</d2l-icon-custom>
+					</div>
+					<div class="d2l-template-primary-secondary-divider-handle-mobile">
+						<d2l-icon icon=${size === 0 ? 'tier1:chevron-up' : 'tier1:chevron-down'}></d2l-icon>
+					</div>
+				</div>
+			</div>
+		`;
+
+	}
 }
 
 customElements.define('d2l-template-primary-secondary', TemplatePrimarySecondary);