@magic-spells/collapsible-content 1.1.0 → 1.2.0

package/src/collapsible-content.js

@@ -2,35 +2,34 @@ import './collapsible-content.css';
 
 const DEFAULT_SPEED = 900; // px per second
 const MIN_DURATION = 0.25; // seconds
-const MAX_DURATION = 1.0; // seconds
+const MAX_DURATION = 0.8; // seconds
+
+// hidden hook the content element uses to report a state change to its component
+const NOTIFY = Symbol('collapsible:notify');
+
+// named accordion groups — group attribute value -> Set of components
+const namedGroups = new Map();
+
+// <collapsible-group> element -> Set of components that joined it
+const elementGroups = new WeakMap();
+
+/**
+ * Optional ancestor element that links components without a shared group name.
+ * Add the `exclusive` attribute to make opening one item close the others.
+ */
+class CollapsibleGroup extends HTMLElement {}
 
 /**
  * Custom element that creates a collapsible/expandable component with proper accessibility
  */
 class CollapsibleComponent extends HTMLElement {
-	static #groups = new Map();
-
-	static #addToGroup(name, instance) {
-		if (!CollapsibleComponent.#groups.has(name)) {
-			CollapsibleComponent.#groups.set(name, new Set());
-		}
-		CollapsibleComponent.#groups.get(name).add(instance);
-	}
-
-	static #removeFromGroup(name, instance) {
-		const group = CollapsibleComponent.#groups.get(name);
-		if (group) {
-			group.delete(instance);
-			if (group.size === 0) CollapsibleComponent.#groups.delete(name);
-		}
-	}
-
 	static get observedAttributes() {
 		return ['group'];
 	}
 
 	#handleClick;
 	#abortController;
+	#groupElement = null;
 
 	/**
 	 * Initializes the component and sets up references to child elements
@@ -45,10 +44,7 @@ class CollapsibleComponent extends HTMLElement {
 
 		// define click handler — content is source of truth
 		_.#handleClick = () => {
-			const wasCollapsed = _.content.collapsed;
-			_.content.collapsed = !wasCollapsed;
-			_.button.setAttribute('aria-expanded', !_.content.collapsed);
-			if (wasCollapsed) _.#closeSiblings();
+			_.content.collapsed = !_.content.collapsed;
 		};
 	}
 
@@ -59,6 +55,13 @@ class CollapsibleComponent extends HTMLElement {
 	connectedCallback() {
 		const _ = this;
 
+		// (re)join a group on every connect — a DOM move runs disconnect then connect,
+		// and attributeChangedCallback only fires on a real attribute change.
+		// Both registries are Sets, so re-adding on first connect is a no-op.
+		const name = _.#groupName;
+		if (name) _.#addToNamedGroup(name);
+		else _.#joinGroupElement();
+
 		// initialize element references once
 		_.button = _.querySelector('button');
 		_.content = _.querySelector('collapsible-content');
@@ -112,8 +115,16 @@ class CollapsibleComponent extends HTMLElement {
 
 	attributeChangedCallback(name, oldValue, newValue) {
 		if (name !== 'group') return;
-		if (oldValue) CollapsibleComponent.#removeFromGroup(oldValue, this);
-		if (newValue) CollapsibleComponent.#addToGroup(newValue, this);
+		const _ = this;
+
+		// an empty group="" counts as no name
+		if (oldValue) _.#removeFromNamedGroup(oldValue);
+		if (newValue) _.#addToNamedGroup(newValue);
+
+		// an explicit group name wins over any ancestor <collapsible-group>
+		if (!_.isConnected) return;
+		if (newValue) _.#leaveGroupElement();
+		else _.#joinGroupElement();
 	}
 
 	/**
@@ -122,26 +133,108 @@ class CollapsibleComponent extends HTMLElement {
 	 */
 	disconnectedCallback() {
 		const _ = this;
-		const group = _.getAttribute('group');
-		if (group) CollapsibleComponent.#removeFromGroup(group, _);
+		const name = _.#groupName;
+		if (name) _.#removeFromNamedGroup(name);
+		_.#leaveGroupElement();
 		if (_.#abortController) {
 			_.#abortController.abort();
 			_.#abortController = null;
 		}
 	}
 
-	#closeSiblings() {
+	/**
+	 * Whether the panel is currently expanded
+	 * @returns {boolean}
+	 */
+	get open() {
+		return !!this.content && !this.content.collapsed;
+	}
+
+	set open(value) {
+		if (this.content) this.content.collapsed = !value;
+	}
+
+	/** Expands the panel (no-op if already expanded) */
+	show() {
+		this.open = true;
+	}
+
+	/** Collapses the panel (no-op if already collapsed) */
+	hide() {
+		this.open = false;
+	}
+
+	/** Toggles the panel */
+	toggle() {
+		this.open = !this.open;
+	}
+
+	/**
+	 * Reports a state change coming from the content element
+	 * @param {CollapsibleContent} content - the content element that changed
+	 * @param {boolean} open - the new expanded state
+	 */
+	[NOTIFY](content, open) {
 		const _ = this;
-		const groupName = _.getAttribute('group');
-		if (!groupName) return;
-		const group = CollapsibleComponent.#groups.get(groupName);
+		if (_.content !== content) return;
+
+		if (_.button) _.button.setAttribute('aria-expanded', String(open));
+		if (open) _.#closeSiblings();
+
+		_.dispatchEvent(
+			new CustomEvent('collapsible:toggle', {
+				bubbles: true,
+				composed: true,
+				detail: { open, content },
+			})
+		);
+	}
+
+	/** Group name, with an empty group="" normalized to null */
+	get #groupName() {
+		return this.getAttribute('group') || null;
+	}
+
+	#addToNamedGroup(name) {
+		if (!namedGroups.has(name)) namedGroups.set(name, new Set());
+		namedGroups.get(name).add(this);
+	}
+
+	#removeFromNamedGroup(name) {
+		const group = namedGroups.get(name);
 		if (!group) return;
-		for (const sibling of group) {
+		group.delete(this);
+		if (group.size === 0) namedGroups.delete(name);
+	}
+
+	#joinGroupElement() {
+		const _ = this;
+		const element = _.closest('collapsible-group');
+		if (!element) return;
+		if (!elementGroups.has(element)) elementGroups.set(element, new Set());
+		elementGroups.get(element).add(_);
+		_.#groupElement = element;
+	}
+
+	#leaveGroupElement() {
+		const _ = this;
+		if (!_.#groupElement) return;
+		elementGroups.get(_.#groupElement)?.delete(_);
+		_.#groupElement = null;
+	}
+
+	#closeSiblings() {
+		const _ = this;
+		const name = _.#groupName;
+		let siblings = null;
+		if (name) siblings = namedGroups.get(name);
+		else if (_.#groupElement?.hasAttribute('exclusive'))
+			siblings = elementGroups.get(_.#groupElement);
+		if (!siblings) return;
+
+		for (const sibling of siblings) {
 			if (sibling === _) continue;
-			if (!sibling.content.collapsed) {
-				sibling.content.collapsed = true;
-				sibling.button.setAttribute('aria-expanded', 'false');
-			}
+			if (sibling.content && !sibling.content.collapsed) sibling.content.collapsed = true;
 		}
 	}
 }
@@ -150,9 +243,14 @@ class CollapsibleComponent extends HTMLElement {
  * Custom element that provides animated collapsible content
  */
 class CollapsibleContent extends HTMLElement {
+	static get observedAttributes() {
+		return ['open'];
+	}
+
 	#handleTransitionEnd;
 	#abortController;
-	#animating = false;
+	#ready = false;
+	#selfWrite = false;
 
 	/**
 	 * Initializes the content element and binds event handlers
@@ -166,7 +264,6 @@ class CollapsibleContent extends HTMLElement {
 			if (event.target !== _) return;
 			if (event.propertyName !== 'height') return;
 
-			_.#animating = false;
 			_.style.removeProperty('--collapsible-duration');
 
 			// remove the inline height to allow dynamic content changes
@@ -189,6 +286,9 @@ class CollapsibleContent extends HTMLElement {
 		_.addEventListener('transitionend', _.#handleTransitionEnd, {
 			signal: _.#abortController.signal,
 		});
+
+		// from here on, an external `open` attribute change animates
+		_.#ready = true;
 	}
 
 	/**
@@ -197,13 +297,24 @@ class CollapsibleContent extends HTMLElement {
 	 */
 	disconnectedCallback() {
 		const _ = this;
-		_.#animating = false;
+		_.#ready = false;
 		if (_.#abortController) {
 			_.#abortController.abort();
 			_.#abortController = null;
 		}
 	}
 
+	/**
+	 * Runs the transition when `open` is added or removed from outside
+	 */
+	attributeChangedCallback(name, oldValue, newValue) {
+		const _ = this;
+		if (name !== 'open' || _.#selfWrite || !_.#ready) return;
+		// only presence matters — ignore value-only changes (open -> open="x")
+		if ((oldValue === null) === (newValue === null)) return;
+		_.#transition(newValue === null);
+	}
+
 	get #speed() {
 		const attr = this.getAttribute('speed');
 		if (attr === null) return DEFAULT_SPEED;
@@ -233,52 +344,64 @@ class CollapsibleContent extends HTMLElement {
 	}
 
 	/**
-	 * Handles setting the collapsed state with animation
-	 * @param {boolean} value - Whether element should be collapsed
+	 * Animates to the requested state, then reports the change
+	 * @param {boolean} collapsed - target state (the `open` attribute already matches)
 	 */
-	set collapsed(value) {
+	#transition(collapsed) {
 		const _ = this;
-		const collapsed = Boolean(value);
-		if (_.collapsed === collapsed) return;
 
 		// check if transitions are enabled (respects prefers-reduced-motion)
 		const hasTransition = getComputedStyle(_).transitionDuration !== '0s';
 
 		if (collapsed) {
-			_.removeAttribute('open');
 			_.setAttribute('aria-hidden', 'true');
 			_.setAttribute('inert', '');
 
 			if (!hasTransition) {
 				_.style.height = '0px';
-				return;
+			} else {
+				// capture current height in px (converts auto or mid-animation value)
+				const currentHeight = _.getBoundingClientRect().height;
+				_.style.height = `${currentHeight}px`;
+				_.#setDynamicDuration(currentHeight, 0);
+				_.offsetHeight; // force reflow — browser commits the px start value
+				_.style.height = '0px';
 			}
-
-			// capture current height in px (converts auto or mid-animation value)
-			const currentHeight = _.getBoundingClientRect().height;
-			_.style.height = `${currentHeight}px`;
-			_.#setDynamicDuration(currentHeight, 0);
-			_.#animating = true;
-			_.offsetHeight; // force reflow — browser commits the px start value
-			_.style.height = '0px';
 		} else {
-			_.setAttribute('open', '');
 			_.removeAttribute('aria-hidden');
 			_.removeAttribute('inert');
 
 			if (!hasTransition) {
 				_.style.height = 'auto';
-				return;
+			} else {
+				// capture current height in px (0px or mid-animation value)
+				const currentHeight = _.getBoundingClientRect().height;
+				_.style.height = `${currentHeight}px`;
+				_.#setDynamicDuration(currentHeight, _.scrollHeight);
+				_.offsetHeight; // force reflow — browser commits the px start value
+				_.style.height = `${_.scrollHeight}px`;
 			}
-
-			// capture current height in px (0px or mid-animation value)
-			const currentHeight = _.getBoundingClientRect().height;
-			_.style.height = `${currentHeight}px`;
-			_.#setDynamicDuration(currentHeight, _.scrollHeight);
-			_.#animating = true;
-			_.offsetHeight; // force reflow — browser commits the px start value
-			_.style.height = `${_.scrollHeight}px`;
 		}
+
+		_.closest('collapsible-component')?.[NOTIFY]?.(_, !collapsed);
+	}
+
+	/**
+	 * Handles setting the collapsed state with animation
+	 * @param {boolean} value - Whether element should be collapsed
+	 */
+	set collapsed(value) {
+		const _ = this;
+		const collapsed = Boolean(value);
+		if (_.collapsed === collapsed) return;
+
+		// mirror to the attribute without re-entering attributeChangedCallback
+		_.#selfWrite = true;
+		if (collapsed) _.removeAttribute('open');
+		else _.setAttribute('open', '');
+		_.#selfWrite = false;
+
+		_.#transition(collapsed);
 	}
 
 	/**
@@ -297,5 +420,8 @@ if (!customElements.get('collapsible-content')) {
 if (!customElements.get('collapsible-component')) {
 	customElements.define('collapsible-component', CollapsibleComponent);
 }
+if (!customElements.get('collapsible-group')) {
+	customElements.define('collapsible-group', CollapsibleGroup);
+}
 
-export { CollapsibleContent, CollapsibleComponent };
+export { CollapsibleContent, CollapsibleComponent, CollapsibleGroup };