@brightspace-ui/core 3.90.0 → 3.91.0

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

@@ -1,6 +1,7 @@
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { SkeletonGroupMixin } from '../skeleton/skeleton-group-mixin.js';
+import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
 /**
  * A component that renders a container and layout for collapsible panels
@@ -10,7 +11,7 @@ class CollapsiblePanelGroup extends SkeletonGroupMixin(LitElement) {
 
 	static get properties() {
 		return {
-			_panels: { state: true },
+			_spaced: { state: true }
 		};
 	}
 
@@ -32,39 +33,28 @@ class CollapsiblePanelGroup extends SkeletonGroupMixin(LitElement) {
 
 	constructor() {
 		super();
-		this._panels = [];
+		this._panels = new SubscriberRegistryController(this, 'collapsible-panel-group');
+		this._spaced = true;
 	}
 
 	render() {
 		const classes = {
-			spaced: this._panels?.[0]?.type !== 'inline',
+			spaced: this._spaced,
 		};
 
-		return html`<slot class="${classMap(classes)}" @slotchange="${this._handleSlotChange}"></slot>`;
-	}
-
-	async _getPanels() {
-		const slot = this.shadowRoot?.querySelector('slot');
-		if (!slot) return;
-
-		return slot.assignedNodes({ flatten: true }).filter((node) => node.nodeType === Node.ELEMENT_NODE);
-	}
-
-	async _handleSlotChange() {
-		this._panels = await this._getPanels();
-		this._updatePanelAttributes();
+		return html`<slot class="${classMap(classes)}"></slot>`;
 	}
 
 	_updatePanelAttributes() {
-		if (!this._panels || this._panels.length === 0) return;
-
-		if (this._panels[0]?.type !== 'inline') return;
-
-		for (const panel of this._panels) {
-			panel._noBottomBorder = true;
-		}
-
-		this._panels[this._panels.length - 1]._noBottomBorder = false;
+		const panels = this.shadowRoot
+			?.querySelector('slot')
+			?.assignedNodes({ flatten: true })
+			.filter((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName === 'D2L-COLLAPSIBLE-PANEL');
+		if (!panels?.length) return;
+
+		const isInline = panels[0].type === 'inline';
+		this._spaced = !isInline;
+		panels.forEach((p, idx) => p._isLastPanelInGroup = idx === panels.length - 1);
 	}
 }
 

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

@@ -4,6 +4,7 @@ import '../expand-collapse/expand-collapse-content.js';
 import { css, html, LitElement } from 'lit';
 import { heading1Styles, heading2Styles, heading3Styles, heading4Styles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { EventSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
@@ -86,7 +87,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			_focused: { state: true },
 			_hasBefore: { state: true },
 			_hasSummary: { state: true },
-			_noBottomBorder: { state: true },
+			_isLastPanelInGroup: { state: true },
 			_scrolled: { state: true },
 		};
 	}
@@ -321,8 +322,15 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 		this.type = 'default';
 		this.noSticky = false;
 		this._focused = false;
+		this._group = undefined;
+		this._groupSubscription = new EventSubscriberController(this, 'collapsible-panel-group', {
+			onSubscribe: (registry) => {
+				this._group = registry;
+				this._group._updatePanelAttributes();
+			}
+		});
 		this._hasSummary = false;
-		this._noBottomBorder = false;
+		this._isLastPanelInGroup = true;
 		this._scrolled = false;
 	}
 
@@ -342,7 +350,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			'has-summary': this._hasSummary,
 			'has-before': this._hasBefore,
 			'scrolled': this._scrolled,
-			'no-bottom-border': this._noBottomBorder,
+			'no-bottom-border': this.type === 'inline' && !this._isLastPanelInGroup,
 		};
 
 		return html`
@@ -378,6 +386,10 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 		if (changedProperties.has('noSticky')) {
 			this._stickyObserverUpdate();
 		}
+
+		if (changedProperties.has('type')) {
+			this._group?._updatePanelAttributes();
+		}
 	}
 
 	_handleActionsClick(e) {

package/package.json

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