@brightspace-ui/core 3.40.0 → 3.40.1

package/components/collapsible-panel/collapsible-panel.js

@@ -178,15 +178,24 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 				margin-inline-start: 0.75rem;
 			}
 
-			.d2l-collapsible-panel.focused {
-				outline: var(--d2l-collapsible-panel-focus-outline);
-			}
+			.d2l-collapsible-panel.focused,
 			:host([expanded]) .d2l-collapsible-panel.focused .d2l-collapsible-panel-header {
 				outline: var(--d2l-collapsible-panel-focus-outline);
 			}
+			@supports selector(:has(a, b)) {
+				.d2l-collapsible-panel.focused,
+				:host([expanded]) .d2l-collapsible-panel.focused .d2l-collapsible-panel-header {
+					outline: none;
+				}
+				.d2l-collapsible-panel.focused:has(:focus-visible),
+				:host([expanded]) .d2l-collapsible-panel.focused:has(:focus-visible) .d2l-collapsible-panel-header {
+					outline: var(--d2l-collapsible-panel-focus-outline);
+				}
+			}
 			:host([expanded]) .d2l-collapsible-panel {
 				outline: none;
 			}
+
 			.d2l-collapsible-panel-header-primary {
 				align-items: center;
 				display: flex;
@@ -218,6 +227,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 				align-self: self-start;
 				background-color: transparent;
 				border: none;
+				cursor: pointer;
 				margin-inline-end: var(--d2l-collapsible-panel-spacing-inline);
 				order: 1;
 				outline: none;
@@ -338,8 +348,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 				<d2l-expand-collapse-content
 					?expanded="${this.expanded}"
 					@d2l-expand-collapse-content-collapse="${this._handleExpandCollapse}"
-					@d2l-expand-collapse-content-expand="${this._handleExpandCollapse}"
-				>
+					@d2l-expand-collapse-content-expand="${this._handleExpandCollapse}">
 					<div class="d2l-collapsible-panel-content">
 						<slot></slot>
 					</div>
@@ -505,7 +514,9 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 	_toggleExpand() {
 		if (this.skeleton) return;
 		this.expanded = !this.expanded;
+		this.focus();
 	}
+
 }
 
 customElements.define('d2l-collapsible-panel', CollapsiblePanel);

package/components/collapsible-panel/demo/collapsible-panel.html

@@ -113,7 +113,7 @@
 			<d2l-demo-snippet>
 					<d2l-collapsible-panel panel-title="Session: January 1, 2021: 10:00 AM" expand-collapse-label="Session on January 1">
 						<d2l-icon icon="tier3:assignments" slot="before"></d2l-icon>
-						<d2l-button-icon slot="actions" icon="tier1:fullscreen"></d2l-button-icon><d2l-button-icon slot="actions" icon="tier1:download"></d2l-button-icon><d2l-dropdown-more slot="actions">
+						<d2l-button-icon slot="actions" icon="tier1:fullscreen" text="Fullscreen"></d2l-button-icon><d2l-button-icon slot="actions" icon="tier1:download" text="Download"></d2l-button-icon><d2l-dropdown-more slot="actions" text="More">
 							<d2l-dropdown-menu>
 								<d2l-menu>
 									<d2l-menu-item text="Duplicate"></d2l-menu-item>
@@ -134,7 +134,7 @@
 			<h2>With long title</h2>
 			<d2l-demo-snippet>
 					<d2l-collapsible-panel panel-title="https://en.wikipedia.org/wiki/William_Thomson,_1st_Baron_Kelvin (the guy who invented absolute zero and some other cool thermodynamics stuff)" expand-collapse-label="Session on January 1">
-						<d2l-button-icon slot="actions" icon="tier1:fullscreen"></d2l-button-icon><d2l-button-icon slot="actions" icon="tier1:download"></d2l-button-icon><d2l-dropdown-more slot="actions">
+						<d2l-button-icon slot="actions" icon="tier1:fullscreen" text="Fullscreen"></d2l-button-icon><d2l-button-icon slot="actions" icon="tier1:download" text="Download"></d2l-button-icon><d2l-dropdown-more slot="actions" text="More">
 							<d2l-dropdown-menu>
 								<d2l-menu>
 									<d2l-menu-item text="Duplicate"></d2l-menu-item>
@@ -205,5 +205,14 @@
 					</d2l-collapsible-panel>
 			</d2l-demo-snippet>
 		</d2l-demo-page>
+
+		<script>
+			document.body.addEventListener('d2l-collapsible-panel-expand', e => {
+				console.log('d2l-collapsible-panel-expand', e);
+			}, true);
+			document.body.addEventListener('d2l-collapsible-panel-collapse', e => {
+				console.log('d2l-collapsible-panel-collapse', e);
+			}, true);
+		</script>
 	</body>
 </html>

package/components/dialog/dialog-fullscreen.js

@@ -287,7 +287,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
-		if (changedProperties.has('width')) this._width = Math.max(1170, this.width);
+		this._width = Math.max(1170, this.width); // Always enforce limit
 	}
 
 	_abort() {

package/components/list/README.md

@@ -169,7 +169,7 @@ The `add-button` attribute inserts the `d2l-button-add` component above and belo
 
 Adding new items to the list is handled entirely by consumers by listening for the `d2l-list-add-button-click` event. A simple example scenario is below.
 
-<!-- docs: demo code display:block -->
+<!-- docs: demo code display:block sandboxTitle:'List - Add Button'-->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
@@ -275,7 +275,7 @@ If a `d2l-list-item` is selectable then it should have a `label` attribute that
 
 ### Example
 
-<!-- docs: demo code display:block autoSize:false size:medium -->
+<!-- docs: demo code display:block autoSize:false size:medium sandboxTitle:'List - Selection'-->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
@@ -314,7 +314,7 @@ If a `d2l-list-item` is expandable then it should have a `label` attribute that
 
 ### Expandable List Example
 
-<!-- docs: demo code display:block autoSize:false size:medium -->
+<!-- docs: demo code display:block autoSize:false size:medium sandboxTitle:'List - Expandable'-->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
@@ -383,7 +383,7 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
 
 ### Example
 
-<!-- docs: demo code display:block autoSize:false size:medium -->
+<!-- docs: demo code display:block autoSize:false size:medium sandboxTitle:'List - Drag & Drop'-->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';

package/package.json

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