@brightspace-ui/core 2.118.3 → 2.118.4

package/components/collapsible-panel/README.md

@@ -87,7 +87,7 @@ The collapsible panel is a container that can show or hide additional content. I
 
 ## Collapsible Panel [d2l-collapsible-panel]
 
-The `d2l-collapsible-panel` element is a container that provides specific layout slots such as `header`, `summary`, `actions`, and a default slot for the expanded content.
+The `d2l-collapsible-panel` element is a container that provides specific layout slots such as `before`, `header`, `summary`, `actions`, and a default slot for the expanded content.
 
 <!-- docs: demo live name:d2l-collapsible-panel -->
 ```html
@@ -205,7 +205,7 @@ Use an inline collapsible panel to progressively disclose sections of a complex
 ## Summary Items [d2l-collapsible-panel-summary-item]
 An optional summary can help the user understand what’s inside the collapsible panel without having to expand it. This can be helpful if the user needs more than the heading to explain what’s inside.
 
-<!-- docs: demo -->
+<!-- docs: demo live name:d2l-collapsible-panel-summary-item -->
 ```html
 <script type="module">
 import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';

package/package.json

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

@@ -24,7 +24,9 @@ const keyCodes = Object.freeze({
 	LEFT: 37,
 	UP: 38,
 	RIGHT: 39,
-	DOWN: 40
+	DOWN: 40,
+	ENTER: 13,
+	SPACE: 32
 });
 
 function isMobile() {
@@ -303,27 +305,36 @@ class MobileKeyboardResizer extends Resizer {
 		if (!this.isMobile) {
 			return;
 		}
-		if (e.keyCode !== keyCodes.UP && e.keyCode !== keyCodes.DOWN) {
+		if (e.keyCode !== keyCodes.UP && e.keyCode !== keyCodes.DOWN && e.keyCode !== keyCodes.ENTER && e.keyCode !== keyCodes.SPACE) {
 			return;
 		}
 		let secondaryHeight;
-		if (this.panelSize === 0) {
-			if (e.keyCode === keyCodes.UP) {
-				secondaryHeight = this.contentBounds.minHeight;
+		if (e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE) {
+			if (this.panelSize === 0) {
+				secondaryHeight = this._restoreSize || this.contentBounds.minHeight;
 			} else {
+				this._restoreSize = this.panelSize;
 				secondaryHeight = 0;
 			}
 		} else {
-			const delta = (this.contentBounds.maxHeight - this.contentBounds.minHeight) / (this._steps - 1);
-			const direction = e.keyCode === keyCodes.UP ? 1 : -1;
-			const desiredHeight = this.panelSize + delta * direction;
-			const desiredSteppedHeight = this.contentBounds.minHeight + delta * Math.round((desiredHeight - this.contentBounds.minHeight) / delta);
-
-			const actualSecondaryHeight = this.clampHeight(desiredSteppedHeight);
-			if (desiredSteppedHeight < actualSecondaryHeight) {
-				secondaryHeight = 0;
+			if (this.panelSize === 0) {
+				if (e.keyCode === keyCodes.UP) {
+					secondaryHeight = this.contentBounds.minHeight;
+				} else {
+					secondaryHeight = 0;
+				}
 			} else {
-				secondaryHeight = actualSecondaryHeight;
+				const delta = (this.contentBounds.maxHeight - this.contentBounds.minHeight) / (this._steps - 1);
+				const direction = e.keyCode === keyCodes.UP ? 1 : -1;
+				const desiredHeight = this.panelSize + delta * direction;
+				const desiredSteppedHeight = this.contentBounds.minHeight + delta * Math.round((desiredHeight - this.contentBounds.minHeight) / delta);
+
+				const actualSecondaryHeight = this.clampHeight(desiredSteppedHeight);
+				if (desiredSteppedHeight < actualSecondaryHeight) {
+					secondaryHeight = 0;
+				} else {
+					secondaryHeight = actualSecondaryHeight;
+				}
 			}
 		}
 		this.dispatchResize(secondaryHeight, true);