@brightspace-ui/core 2.75.3 → 2.75.5

package/components/demo/demo-passthrough-mixin.js

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+
+/**
+ * Creates a Lit component that mirrors properties of another, and passes its properties through to
+ * a specific rendered element.
+ *
+ * @param superclass The Lit class to mirror (will copy all its properties).
+ * @param { String } target The element name or other selector string of the element to pass properties to.
+ */
+export const DemoPassthroughMixin = (superclass, target) => class extends LitElement {
+	static get properties() {
+		return Object.fromEntries(superclass.elementProperties);
+	}
+
+	firstUpdated() {
+		this.target = this.shadowRoot.querySelector(target);
+	}
+
+	updated(changedProperties) {
+		const propertyDefinitions = superclass.elementProperties;
+		changedProperties.forEach((_value, key) => {
+			if (propertyDefinitions.get(key)?.attribute !== false) this.target[key] = this[key];
+		});
+	}
+};

package/components/table/README.md

@@ -29,7 +29,7 @@ Tables are used to display tabular data in rows and columns. They can allow user
 ## Responsive Behavior
 If the browser window is too narrow to display the table’s contents, a scroll button appears. This alerts users to overflowing content and provides a way for users to scroll horizontally. The scroll button sticks to the top of the screen so that it's available as long as the table is in the viewport.
 
-<!-- docs: demo name:d2l-test-table size:large -->
+<!-- docs: demo size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/table/demo/table-test.js';
@@ -45,7 +45,7 @@ If the viewport is very narrow — for example, on a mobile device — it may be
 
 The `d2l-table-wrapper` element can be combined with table styles to apply default/light styling, row selection styles, overflow scrolling and sticky headers to native `<table>` elements within your Lit components.
 
-<!-- docs: demo live name:d2l-test-table display:block -->
+<!-- docs: demo live name:d2l-table-wrapper display:block -->
 ```html
 <script type="module">
   import { html, LitElement } from 'lit';
@@ -63,15 +63,7 @@ The `d2l-table-wrapper` element can be combined with table styles to apply defau
     { name: 'Japan', fruit: { 'apples': 8534, 'oranges': 1325, 'bananas': 78382756 }, selected: false }
   ];
 
-  class TestTable extends LitElement {
-
-    static get properties() {
-      return {
-        noColumnBorder: { attribute: 'no-column-border', type: Boolean },
-        type: { type: String },
-        stickyHeaders: { attribute: 'sticky-headers', type: Boolean }
-      };
-    }
+  class SampleTable extends LitElement {
 
     static get styles() {
       return tableStyles;
@@ -81,7 +73,7 @@ The `d2l-table-wrapper` element can be combined with table styles to apply defau
       const type = this.type === 'light' ? 'light' : 'default';
 
       return html`
-        <d2l-table-wrapper ?no-column-border="${this.noColumnBorder}" ?sticky-headers="${this.stickyHeaders}" type="${type}">
+        <d2l-table-wrapper>
           <table class="d2l-table">
             <thead>
               <tr>
@@ -103,9 +95,9 @@ The `d2l-table-wrapper` element can be combined with table styles to apply defau
     }
 
   }
-  customElements.define('d2l-test-table', TestTable);
+  customElements.define('d2l-sample-table', SampleTable);
 </script>
-<d2l-test-table></d2l-test-table>
+<d2l-sample-table></d2l-sample-table>
 ```
 
 <!-- docs: start hidden content -->
@@ -304,7 +296,7 @@ If your table supports row selection, apply the `selected` attribute to `<tr>` r
 
 The `d2l-table-header` component can be placed in the `d2l-table-wrapper`'s `header` slot to provide a selection summary, a slot for `d2l-selection-action`s, and overflow-group behaviour.
 
-<!-- docs: demo live name:d2l-table-header -->
+<!-- docs: demo live name:d2l-table-header display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';
@@ -314,7 +306,7 @@ The `d2l-table-header` component can be placed in the `d2l-table-wrapper`'s `hea
   import { html, LitElement } from 'lit';
   import { tableStyles } from '@brightspace-ui/core/components/table/table-wrapper.js';
 
-  class MyTableWithHeaderElem extends LitElement {
+  class SampleTableWithHeader extends LitElement {
 
     static get properties() {
       return {
@@ -369,9 +361,9 @@ The `d2l-table-header` component can be placed in the `d2l-table-wrapper`'s `hea
     }
 
   }
-  customElements.define('d2l-my-table-with-header-elem', MyTableWithHeaderElem);
+  customElements.define('d2l-sample-table-with-header', SampleTableWithHeader);
 </script>
-<d2l-my-table-with-header-elem></d2l-my-table-with-header-elem>
+<d2l-sample-table-with-header></d2l-sample-table-with-header>
 ```
 
 <!-- docs: start hidden content -->

package/components/table/demo/table-test.js

@@ -9,9 +9,10 @@ import '../../selection/selection-action-dropdown.js';
 import '../../selection/selection-action-menu-item.js';
 import '../../selection/selection-input.js';
 
-import { css, html, LitElement } from 'lit';
+import { css, html } from 'lit';
+import { tableStyles, TableWrapper } from '../table-wrapper.js';
+import { DemoPassthroughMixin } from '../../demo/demo-passthrough-mixin.js';
 import { RtlMixin } from '../../../mixins/rtl-mixin.js';
-import { tableStyles } from '../table-wrapper.js';
 
 const fruits = ['Apples', 'Oranges', 'Bananas'];
 
@@ -27,25 +28,10 @@ const data = () => [
 
 const formatter = new Intl.NumberFormat('en-US');
 
-class TestTable extends RtlMixin(LitElement) {
+class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')) {
 
 	static get properties() {
 		return {
-			/**
-			 * Hides the column borders on "default" table type
-			 * @type {boolean}
-			 */
-			noColumnBorder: { attribute: 'no-column-border', type: Boolean },
-			/**
-			 * Type of table style to apply
-			 * @type {'default'|'light'}
-			 */
-			type: { type: String },
-			/**
-			 * Whether header row is sticky
-			 * @type {boolean}
-			 */
-			stickyHeaders: { attribute: 'sticky-headers', type: Boolean },
 			_data: { state: true },
 			_sortField: { attribute: false, type: String },
 			_sortDesc: { attribute: false, type: Boolean }
@@ -62,15 +48,10 @@ class TestTable extends RtlMixin(LitElement) {
 
 	constructor() {
 		super();
-		this.noColumnBorder = false;
-		this.sortDesc = false;
-		this.stickyHeaders = false;
-		this.type = 'default';
 		this._data = data();
 	}
 
 	render() {
-		const type = this.type === 'light' ? 'light' : 'default';
 		const sorted = this._data.sort((a, b) => {
 			if (this._sortDesc) {
 				return b.fruit[this._sortField] - a.fruit[this._sortField];
@@ -78,7 +59,7 @@ class TestTable extends RtlMixin(LitElement) {
 			return a.fruit[this._sortField] - b.fruit[this._sortField];
 		});
 		return html`
-			<d2l-table-wrapper ?no-column-border="${this.noColumnBorder}" ?sticky-headers="${this.stickyHeaders}" type="${type}">
+			<d2l-table-wrapper>
 				<d2l-table-header slot="header" no-sticky>
 					<d2l-selection-action icon="tier1:plus-default" text="Add" @d2l-selection-action-click="${this._handleAddItem}"></d2l-selection-action>
 					<d2l-selection-action-dropdown text="Move To" requires-selection>

package/components/table/table-header.js

@@ -7,6 +7,16 @@ import { SelectionHeader } from '../selection/selection-header.js';
  * A header for table components containing a selection summary and selection actions.
  */
 class TableHeader extends SelectionHeader {
+	static get properties() {
+		return {
+			/**
+			 * Whether to render the selection summary
+			 * @type {boolean}
+			 */
+			noSelection: { type: Boolean, attribute: 'no-selection' }
+		};
+	}
+
 	_renderSelection() {
 		return html`
 			<d2l-selection-summary

package/custom-elements.json

@@ -10601,15 +10601,32 @@
         },
         {
           "name": "sticky-headers",
-          "description": "Whether header row is sticky",
+          "description": "Whether the header row is sticky. Useful for long tables to \"stick\" the header row in place as the user scrolls.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "type",
-          "description": "Type of table style to apply",
+          "description": "Type of table style to apply. The \"light\" style has fewer borders and tighter padding.",
           "type": "'default'|'light'",
           "default": "\"default\""
+        },
+        {
+          "name": "selection-count-override",
+          "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
+          "type": "number"
+        },
+        {
+          "name": "item-count",
+          "description": "Total number of items. Required when selecting all pages is allowed.",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "selection-single",
+          "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -10620,24 +10637,49 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "sortDesc",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "stickyHeaders",
           "attribute": "sticky-headers",
-          "description": "Whether header row is sticky",
+          "description": "Whether the header row is sticky. Useful for long tables to \"stick\" the header row in place as the user scrolls.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "type",
           "attribute": "type",
-          "description": "Type of table style to apply",
+          "description": "Type of table style to apply. The \"light\" style has fewer borders and tighter padding.",
           "type": "'default'|'light'",
           "default": "\"default\""
+        },
+        {
+          "name": "selectionCountOverride",
+          "attribute": "selection-count-override",
+          "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
+          "type": "number"
+        },
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. Required when selecting all pages is allowed.",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "selectionSingle",
+          "attribute": "selection-single",
+          "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Content to wrap"
+        },
+        {
+          "name": "header",
+          "description": "Slot for `d2l-table-header` to be rendered above the table"
         }
       ]
     },
@@ -10689,7 +10731,7 @@
       "attributes": [
         {
           "name": "no-selection",
-          "description": "Whether to render select-all and selection summary",
+          "description": "Whether to render the selection summary",
           "type": "boolean",
           "default": "false"
         },
@@ -10715,7 +10757,7 @@
         {
           "name": "noSelection",
           "attribute": "no-selection",
-          "description": "Whether to render select-all and selection summary",
+          "description": "Whether to render the selection summary",
           "type": "boolean",
           "default": "false"
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.75.3",
+  "version": "2.75.5",
   "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

@@ -46,16 +46,22 @@ class Resizer {
 	constructor() {
 		this.contentRect = null;
 		this.contentBounds = null;
+		this.isCollapsed = false;
 		this.isMobile = false;
-		this.panelSize = 0;
 		this.isRtl = false;
+		this.panelSize = 0;
 		this.secondaryFirst = false;
+		this._wasCollapsed = false;
 	}
 
 	clampHeight(height) {
 		return clamp(height, this.contentBounds.minHeight, this.contentBounds.maxHeight);
 	}
 
+	clampMaxHeight(height) {
+		return Math.min(height, this.contentBounds.maxHeight);
+	}
+
 	clampWidth(width) {
 		return clamp(width, this.contentBounds.minWidth, this.contentBounds.maxWidth);
 	}
@@ -155,17 +161,18 @@ class DesktopMouseResizer extends Resizer {
 		this._onMouseDown = this._onMouseDown.bind(this);
 		this._onTouchMove = this._onTouchMove.bind(this);
 		this._onMouseMove = this._onMouseMove.bind(this);
-		this._onResizeEnd = this._onResizeEnd.bind(this);
+		this._onMouseUp = this._onMouseUp.bind(this);
+		this._onTouchEnd = this._onTouchEnd.bind(this);
 		this._target = null;
 	}
 
 	connect(target) {
 		target.addEventListener('touchstart', this._onTouchStart);
 		target.addEventListener('touchmove', this._onTouchMove);
-		target.addEventListener('touchend', this._onResizeEnd);
+		target.addEventListener('touchend', this._onTouchEnd);
 		target.addEventListener('mousedown', this._onMouseDown);
 		window.addEventListener('mousemove', this._onMouseMove);
-		window.addEventListener('mouseup', this._onResizeEnd);
+		window.addEventListener('mouseup', this._onMouseUp);
 		this._target = target;
 	}
 
@@ -173,14 +180,18 @@ class DesktopMouseResizer extends Resizer {
 		if (this._target) {
 			this._target.removeEventListener('touchstart', this._onTouchStart);
 			this._target.removeEventListener('touchmove', this._onTouchMove);
-			this._target.removeEventListener('touchend', this._onResizeEnd);
+			this._target.removeEventListener('touchend', this._onTouchEnd);
 			this._target.removeEventListener('mousedown', this._onMouseDown);
 		}
 		window.removeEventListener('mousemove', this._onMouseMove);
-		window.removeEventListener('mouseup', this._onResizeEnd);
+		window.removeEventListener('mouseup', this._onMouseUp);
 		this._target = null;
 	}
 
+	_clampMaxWidth(width) {
+		return Math.min(width, this.contentBounds.maxWidth);
+	}
+
 	_computeContentX(clientX) {
 		const x = clientX - this.contentRect.left;
 		// The direction of the container is flipped if exactly one of isRtl and secondaryFirst is true
@@ -190,6 +201,7 @@ class DesktopMouseResizer extends Resizer {
 	_onMouseDown(e) {
 		if (!this.isMobile) {
 			e.preventDefault();
+			this._wasCollapsed = this.isCollapsed;
 			this._resizeStart(e.clientX);
 		}
 	}
@@ -201,11 +213,19 @@ class DesktopMouseResizer extends Resizer {
 		this._resize(e.clientX);
 	}
 
-	_onResizeEnd() {
-		if (this._isResizing) {
-			this._isResizing = false;
-			this.dispatchResizeEnd();
+	_onMouseUp(e) {
+		if (!this._isResizing) {
+			return;
 		}
+		this._resizeEnd(e.clientX);
+	}
+
+	_onTouchEnd(e) {
+		if (!this._isResizing) {
+			return;
+		}
+		const touch = e.changedTouches[0].clientX;
+		this._resizeEnd(touch);
 	}
 
 	_onTouchMove(e) {
@@ -215,27 +235,39 @@ class DesktopMouseResizer extends Resizer {
 		const touch = e.touches[0];
 		this._resize(touch.clientX);
 	}
-
 	_onTouchStart(e) {
 		if (!this.isMobile) {
-			e.preventDefault();
+			if (e.cancelable) e.preventDefault();
+			this._wasCollapsed = this.isCollapsed;
 			const touch = e.touches[0];
 			this._resizeStart(touch.clientX);
 		}
 	}
-
 	_resize(clientX) {
-		let actualSecondaryWidth;
 		const x = this._computeContentX(clientX);
-		const collapseThreshold = this.contentBounds.minWidth / 2;
+		const secondaryWidth = x + this._offset;
+		this.dispatchResize(this._clampMaxWidth(secondaryWidth), false);
+	}
+
+	_resizeEnd(clientX) {
+		if (!this._isResizing) {
+			return;
+		}
+		const expandedCollapseThreshold = this.contentBounds.minWidth * 0.75;
+		const collapsedCollapseThreshold = this.contentBounds.minWidth * 0.1;
+		const x = this._computeContentX(clientX);
 		const desiredSecondaryWidth = x + this._offset;
-		if (desiredSecondaryWidth < collapseThreshold) {
-			actualSecondaryWidth = 0;
-		} else {
-			actualSecondaryWidth = this.clampWidth(desiredSecondaryWidth);
+		if (
+			(this._wasCollapsed && desiredSecondaryWidth < collapsedCollapseThreshold)
+			|| (!this._wasCollapsed && desiredSecondaryWidth < expandedCollapseThreshold)
+		) {
+			this.dispatchResize(0, true);
+		}
+		else if (desiredSecondaryWidth < this.contentBounds.minWidth) {
+			this.dispatchResize(this.contentBounds.minWidth, true);
 		}
-		const animateResize = desiredSecondaryWidth < actualSecondaryWidth || actualSecondaryWidth === 0;
-		this.dispatchResize(actualSecondaryWidth, animateResize);
+		this._isResizing = false;
+		this.dispatchResizeEnd();
 	}
 
 	_resizeStart(clientX) {
@@ -326,6 +358,7 @@ class MobileMouseResizer extends Resizer {
 
 	_onMouseDown(e) {
 		if (this.isMobile) {
+			this._wasCollapsed = this.isCollapsed;
 			this.dispatchResizeStart();
 			e.preventDefault();
 			const y = e.clientY - this.contentRect.top;
@@ -340,24 +373,29 @@ class MobileMouseResizer extends Resizer {
 			return;
 		}
 		const y = e.clientY - this.contentRect.top;
+		const secondaryHeight = this.clampMaxHeight(this.contentRect.height - y + this._offset);
+		this.dispatchResize(secondaryHeight, false);
+	}
 
-		let actualSecondaryHeight;
-		const collapseThreshold = this.contentBounds.minHeight / 2;
+	_onMouseUp(e) {
+		if (!this._isResizing) {
+			return;
+		}
+		const expandedCollapseThreshold = this.contentBounds.minHeight * 0.75;
+		const collapsedCollapseThreshold = this.contentBounds.minHeight * 0.1;
+		const y = e.clientY - this.contentRect.top;
 		const desiredSecondaryHeight = this.contentRect.height - y + this._offset;
-		if (desiredSecondaryHeight < collapseThreshold) {
-			actualSecondaryHeight = 0;
-		} else {
-			actualSecondaryHeight = this.clampHeight(desiredSecondaryHeight);
+		if (
+			(this._wasCollapsed && desiredSecondaryHeight < collapsedCollapseThreshold)
+			|| (!this._wasCollapsed && desiredSecondaryHeight < expandedCollapseThreshold)
+		) {
+			if (desiredSecondaryHeight > 0) this.dispatchResize(0, true);
 		}
-		const animateResize = desiredSecondaryHeight < actualSecondaryHeight || actualSecondaryHeight === 0;
-		this.dispatchResize(actualSecondaryHeight, animateResize);
-	}
-
-	_onMouseUp() {
-		if (this._isResizing) {
-			this._isResizing = false;
-			this.dispatchResizeEnd();
+		else if (desiredSecondaryHeight < this.contentBounds.minHeight) {
+			this.dispatchResize(this.contentBounds.minHeight, true);
 		}
+		this._isResizing = false;
+		this.dispatchResizeEnd();
 	}
 
 }
@@ -365,52 +403,72 @@ class MobileMouseResizer extends Resizer {
 class MobileTouchResizer extends Resizer {
 	constructor() {
 		super();
+		this.isExpanded = false;
+		this._wasExpanded = false;
 		this._onResizeStart = this._onResizeStart.bind(this);
 		this._onTouchMove = this._onTouchMove.bind(this);
 		this._onResizeEnd = this._onResizeEnd.bind(this);
-		this._target = null;
+		this._targetDivider = null;
+		this._targetSecondary = null;
 	}
 
-	connect(target) {
-		target.addEventListener('touchstart', this._onResizeStart);
-		target.addEventListener('touchmove', this._onTouchMove);
-		target.addEventListener('touchend', this._onResizeEnd);
-		this._target = target;
+	connect(targetDivider, targetSecondary) {
+		targetDivider.addEventListener('touchstart', this._onResizeStart);
+		targetDivider.addEventListener('touchmove', this._onTouchMove);
+		targetDivider.addEventListener('touchend', this._onResizeEnd);
+		this._targetDivider = targetDivider;
+
+		targetSecondary.addEventListener('touchstart', this._onResizeStart);
+		targetSecondary.addEventListener('touchmove', this._onTouchMove);
+		targetSecondary.addEventListener('touchend', this._onResizeEnd);
+		this._targetSecondary = targetSecondary;
 	}
 
 	disconnect() {
-		if (this._target) {
-			this._target.removeEventListener('touchstart', this._onResizeStart);
-			this._target.removeEventListener('touchmove', this._onTouchMove);
-			this._target.removeEventListener('touchend', this._onResizeEnd);
+		if (this._targetDivider) {
+			this._targetDivider.removeEventListener('touchstart', this._onResizeStart);
+			this._targetDivider.removeEventListener('touchmove', this._onTouchMove);
+			this._targetDivider.removeEventListener('touchend', this._onResizeEnd);
 		}
-		this._target = null;
-	}
+		this._targetDivider = null;
 
-	_computeTouchDirection() {
-		const oldest = this._touches[0];
-		const newest = this._touches[this._touches.length - 1];
-		if (oldest === newest) {
-			return 0;
+		if (this._targetSecondary) {
+			this._targetSecondary.removeEventListener('touchstart', this._onResizeStart);
+			this._targetSecondary.removeEventListener('touchmove', this._onTouchMove);
+			this._targetSecondary.removeEventListener('touchend', this._onResizeEnd);
 		}
-		return newest - oldest;
+		this._targetSecondary = null;
 	}
 
 	_onResizeEnd() {
-		if (this._isResizing) {
-			if (this.panelSize > this.contentBounds.minHeight && this.panelSize < this.contentBounds.maxHeight) {
-				let secondaryHeight;
-				const touchDirection = this._computeTouchDirection();
-				if (touchDirection >= 0) {
-					secondaryHeight = this.contentBounds.minHeight;
-				} else {
-					secondaryHeight = this.contentBounds.maxHeight;
-				}
-				this.dispatchResize(secondaryHeight, true);
-			}
-			this._isResizing = false;
-			this.dispatchResizeEnd();
+		if (!this._isResizing) {
+			return;
+		}
+		let secondaryHeight;
+		const expandedShrinkThreshold = this.contentBounds.minHeight + (this.contentBounds.maxHeight - this.contentBounds.minHeight) * 0.9;
+		const expandThreshold = this.contentBounds.minHeight + (this.contentBounds.maxHeight - this.contentBounds.minHeight) * 0.1;
+		const collapseThreshold = this.contentBounds.minHeight * 0.9;
+		const collapsedExpandThreshold = this.contentBounds.minHeight * 0.1;
+		if (
+			(!this._wasCollapsed && this.panelSize < collapseThreshold)
+			|| (this._wasCollapsed && this.panelSize < collapsedExpandThreshold)
+		) {
+			secondaryHeight = 0;
+		}
+		else if (
+			(this._wasExpanded && this.panelSize < expandedShrinkThreshold)
+			|| (this._wasCollapsed && this.panelSize < expandThreshold)
+			|| (!this._wasExpanded && !this._wasCollapsed && this.panelSize < expandThreshold && this.panelSize > collapseThreshold)
+		) {
+			secondaryHeight = this.contentBounds.minHeight;
 		}
+		else {
+			secondaryHeight = this.contentBounds.maxHeight;
+		}
+		this.dispatchResize(secondaryHeight, true);
+
+		this._isResizing = false;
+		this.dispatchResizeEnd();
 	}
 
 	_onResizeStart(e) {
@@ -421,6 +479,8 @@ class MobileTouchResizer extends Resizer {
 			this._isResizing = true;
 			this._touches = [];
 			this._trackTouch(touch);
+			this._wasCollapsed = this.isCollapsed;
+			this._wasExpanded = this.isExpanded;
 		}
 	}
 
@@ -431,18 +491,19 @@ class MobileTouchResizer extends Resizer {
 		const touch = e.touches[0];
 		const curTouch = touch.screenY;
 		const delta = curTouch - this._prevTouch;
-		const curScroll = this._target.scrollTop;
+		const isScrollingDivider = this._targetDivider.contains(e.target);
+		const curScroll = this._targetSecondary.scrollTop;
 		this._trackTouch(touch);
 
 		let isScrollable;
 		let secondaryHeight = this.panelSize;
 		if (delta > 0) {
-			if (curScroll === 0) {
-				secondaryHeight = this.clampHeight(this.panelSize - delta);
+			if (isScrollingDivider ||  curScroll === 0) {
+				secondaryHeight = this.clampMaxHeight(this.panelSize - delta);
 			}
 			isScrollable = curScroll > 0;
 		} else if (delta < 0) {
-			secondaryHeight = this.clampHeight(this.panelSize - delta);
+			secondaryHeight = this.clampMaxHeight(this.panelSize - delta);
 			isScrollable = secondaryHeight === this.contentBounds.maxHeight;
 		}
 		if (!isScrollable && e.cancelable) {
@@ -594,7 +655,15 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 				background-color: var(--d2l-color-gypsum);
 			}
 			:host([resizable]) [data-is-collapsed] aside {
-				display: none;
+				visibility: hidden;
+			}
+			:host([resizable]:not([dir="rtl"]):not([secondary-first])) aside,
+			:host([resizable][dir="rtl"][secondary-first]) aside {
+				float: left;
+			}
+			:host([resizable][dir="rtl"]:not([secondary-first])) aside,
+			:host([resizable]:not([dir="rtl"])[secondary-first]) aside {
+				float: right;
 			}
 			.d2l-template-primary-secondary-divider {
 				background-color: var(--d2l-color-mica);
@@ -672,10 +741,12 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 			.d2l-template-primary-secondary-divider.focus-visible .d2l-template-primary-secondary-divider-handle-left {
 				display: block;
 			}
-			:host(:not([dir="rtl"])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-left {
+			:host(:not([dir="rtl"]):not([secondary-first])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-left,
+			:host([dir="rtl"][secondary-first]) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-left {
 				display: none;
 			}
-			:host([dir="rtl"]) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right {
+			:host(:not([dir="rtl"])[secondary-first]) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right,
+			:host([dir="rtl"]:not([secondary-first])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right {
 				display: none;
 			}
 			d2l-icon {
@@ -974,7 +1045,7 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 								</d2l-icon-custom>
 							</div>
 							<div class="d2l-template-primary-secondary-divider-handle-mobile">
-								${size === 0 ? html`<d2l-icon icon="tier1:chevron-up"></d2l-icon>` : html`<d2l-icon icon="tier1:chevron-down"></d2l-icon>`}
+								<d2l-icon icon=${size === 0 ? 'tier1:chevron-up' : 'tier1:chevron-down'}></d2l-icon>
 							</div>
 						</div>
 					</div>
@@ -989,6 +1060,14 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 
 	updated(changedProperties) {
 		super.updated(changedProperties);
+		if (changedProperties.has('_isCollapsed')) {
+			this._desktopMouseResizer.isCollapsed = this._isCollapsed;
+			this._mobileMouseResizer.isCollapsed = this._isCollapsed;
+			this._mobileTouchResizer.isCollapsed = this._isCollapsed;
+		}
+		if (changedProperties.has('_isExpanded')) {
+			this._mobileTouchResizer.isExpanded = this._isExpanded;
+		}
 		if (changedProperties.has('_size')) {
 			if (this.storageKey) {
 				const key = computeSizeKey(this.storageKey);
@@ -1003,16 +1082,20 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 			this._desktopKeyboardResizer.secondaryFirst = this.secondaryFirst;
 			this._desktopMouseResizer.secondaryFirst = this.secondaryFirst;
 		}
-		if (!this._secondary) {
-			this._secondary = this.shadowRoot.querySelector('aside');
+		if (!this._divider) {
 			this._divider = this.shadowRoot.querySelector('.d2l-template-primary-secondary-divider');
 		}
+		if (changedProperties.has('_isMobile') && this._isMobile) {
+			this._secondary = this.shadowRoot.querySelector('aside');
+			if (this._divider.isConnected && this._secondary.isConnected) {
+				this._mobileTouchResizer.connect(this._divider, this._secondary);
+			}
+		}
 		if (this._divider.isConnected && !this._hasConnectedResizers) {
 			this._desktopKeyboardResizer.connect(this._divider);
 			this._desktopMouseResizer.connect(this._divider);
 			this._mobileKeyboardResizer.connect(this._divider);
 			this._mobileMouseResizer.connect(this._divider);
-			this._mobileTouchResizer.connect(this._secondary);
 			this._hasConnectedResizers = true;
 		}
 	}