@magic-spells/collapsible-content 0.2.0 → 1.1.0

package/src/collapsible-content.js

@@ -1,10 +1,36 @@
-import './index.scss';
+import './collapsible-content.css';
+
+const DEFAULT_SPEED = 900; // px per second
+const MIN_DURATION = 0.25; // seconds
+const MAX_DURATION = 1.0; // seconds
 
 /**
  * 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;
 
 	/**
 	 * Initializes the component and sets up references to child elements
@@ -17,13 +43,12 @@ class CollapsibleComponent extends HTMLElement {
 		_.button = null;
 		_.content = null;
 
-		// define click handler with proper this binding
-		_.#handleClick = (e) => {
-			e.preventDefault();
-			// toggle expanded value
-			const expanded = _.button.getAttribute('aria-expanded') !== 'true';
-			_.button.setAttribute('aria-expanded', expanded);
-			_.content.hidden = !expanded;
+		// 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();
 		};
 	}
 
@@ -39,7 +64,16 @@ class CollapsibleComponent extends HTMLElement {
 		_.content = _.querySelector('collapsible-content');
 
 		if (!_.button || !_.content) {
-			console.error('CollapsibleComponent requires a <button> and a <collapsible-content>.');
+			const error = new Error(
+				'CollapsibleComponent requires a <button> and a <collapsible-content>.'
+			);
+			console.error(error.message);
+			_.dispatchEvent(
+				new CustomEvent('collapsible-error', {
+					bubbles: true,
+					detail: { error },
+				})
+			);
 			return;
 		}
 
@@ -48,18 +82,38 @@ class CollapsibleComponent extends HTMLElement {
 		_.content.id ||= `collapsible-content-${crypto.randomUUID().slice(0, 8)}`;
 
 		// set accessibility attributes
+		if (!_.button.hasAttribute('type')) {
+			_.button.type = 'button';
+		}
 		_.button.setAttribute('aria-controls', _.content.id);
-		_.content.setAttribute('role', 'region');
 		_.content.setAttribute('aria-labelledby', _.button.id);
+		if (!_.content.hasAttribute('role')) {
+			_.content.setAttribute('role', 'region');
+		}
 
-		// set initial state based on aria-expanded attribute
-		const expanded = _.button.getAttribute('aria-expanded') === 'true';
+		// set initial state without triggering an opening/closing animation
+		const open = _.content.hasAttribute('open');
+		_.button.setAttribute('aria-expanded', open);
+		_.content.style.height = open ? 'auto' : '0px';
+		if (open) {
+			_.content.removeAttribute('aria-hidden');
+			_.content.removeAttribute('inert');
+		} else {
+			_.content.setAttribute('aria-hidden', 'true');
+			_.content.setAttribute('inert', '');
+		}
 
-		// make sure content state matches button state
-		_.content.hidden = !expanded;
+		// use AbortController to prevent duplicate listeners on reconnection
+		_.#abortController = new AbortController();
+		_.button.addEventListener('click', _.#handleClick, {
+			signal: _.#abortController.signal,
+		});
+	}
 
-		// add event listener
-		_.button.addEventListener('click', _.#handleClick);
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (name !== 'group') return;
+		if (oldValue) CollapsibleComponent.#removeFromGroup(oldValue, this);
+		if (newValue) CollapsibleComponent.#addToGroup(newValue, this);
 	}
 
 	/**
@@ -68,8 +122,26 @@ class CollapsibleComponent extends HTMLElement {
 	 */
 	disconnectedCallback() {
 		const _ = this;
-		if (_.button) {
-			_.button.removeEventListener('click', _.#handleClick);
+		const group = _.getAttribute('group');
+		if (group) CollapsibleComponent.#removeFromGroup(group, _);
+		if (_.#abortController) {
+			_.#abortController.abort();
+			_.#abortController = null;
+		}
+	}
+
+	#closeSiblings() {
+		const _ = this;
+		const groupName = _.getAttribute('group');
+		if (!groupName) return;
+		const group = CollapsibleComponent.#groups.get(groupName);
+		if (!group) return;
+		for (const sibling of group) {
+			if (sibling === _) continue;
+			if (!sibling.content.collapsed) {
+				sibling.content.collapsed = true;
+				sibling.button.setAttribute('aria-expanded', 'false');
+			}
 		}
 	}
 }
@@ -79,6 +151,8 @@ class CollapsibleComponent extends HTMLElement {
  */
 class CollapsibleContent extends HTMLElement {
 	#handleTransitionEnd;
+	#abortController;
+	#animating = false;
 
 	/**
 	 * Initializes the content element and binds event handlers
@@ -89,36 +163,32 @@ class CollapsibleContent extends HTMLElement {
 
 		// define event handler using arrow function for proper binding
 		_.#handleTransitionEnd = (event) => {
-			// exit if isn't height property
-			if (event.propertyName != 'height') return;
+			if (event.target !== _) return;
+			if (event.propertyName !== 'height') return;
+
+			_.#animating = false;
+			_.style.removeProperty('--collapsible-duration');
 
 			// remove the inline height to allow dynamic content changes
-			if (!_.hidden) {
+			if (!_.collapsed) {
 				_.style.height = 'auto';
 			}
 		};
-
-		// add event listener to remove height after transition
-		_.addEventListener('transitionend', _.#handleTransitionEnd);
 	}
 
 	/**
 	 * Called when element is added to the DOM
-	 * Sets initial height based on hidden state
+	 * Sets initial height based on open attribute
 	 */
 	connectedCallback() {
 		const _ = this;
+		_.style.height = _.hasAttribute('open') ? 'auto' : '0';
 
-		// get aria-expanded state from button
-		const component = _.closest('collapsible-component');
-		const button = component.querySelector('button');
-		const expanded = button.getAttribute('aria-expanded') === 'true';
-
-		if (expanded) {
-			_.style.height = 'auto';
-		} else {
-			_.style.height = '0';
-		}
+		// use AbortController to prevent duplicate listeners on reconnection
+		_.#abortController = new AbortController();
+		_.addEventListener('transitionend', _.#handleTransitionEnd, {
+			signal: _.#abortController.signal,
+		});
 	}
 
 	/**
@@ -127,56 +197,105 @@ class CollapsibleContent extends HTMLElement {
 	 */
 	disconnectedCallback() {
 		const _ = this;
-		_.removeEventListener('transitionend', _.#handleTransitionEnd);
+		_.#animating = false;
+		if (_.#abortController) {
+			_.#abortController.abort();
+			_.#abortController = null;
+		}
+	}
+
+	get #speed() {
+		const attr = this.getAttribute('speed');
+		if (attr === null) return DEFAULT_SPEED;
+		const value = Number(attr);
+		return value > 0 ? value : DEFAULT_SPEED;
+	}
+
+	get #minDuration() {
+		const attr = this.getAttribute('min-duration');
+		if (attr === null) return MIN_DURATION;
+		const value = Number(attr);
+		return value > 0 ? value : MIN_DURATION;
+	}
+
+	get #maxDuration() {
+		const attr = this.getAttribute('max-duration');
+		if (attr === null) return MAX_DURATION;
+		const value = Number(attr);
+		return value > 0 ? value : MAX_DURATION;
+	}
+
+	#setDynamicDuration(currentHeight, targetHeight) {
+		const _ = this;
+		const delta = Math.abs(targetHeight - currentHeight);
+		const duration = Math.min(_.#maxDuration, Math.max(_.#minDuration, delta / _.#speed));
+		_.style.setProperty('--collapsible-duration', `${duration.toFixed(3)}s`);
 	}
 
 	/**
-	 * Handles setting the hidden attribute with animation
-	 * @param {boolean} value - Whether element should be hidden
+	 * Handles setting the collapsed state with animation
+	 * @param {boolean} value - Whether element should be collapsed
 	 */
-	set hidden(value) {
+	set collapsed(value) {
 		const _ = this;
+		const collapsed = Boolean(value);
+		if (_.collapsed === collapsed) return;
 
-		// animate to closed
-		if (value) {
-			// reset height to animate from
-			_.style.height = `${_.scrollHeight}px`;
-
-			// wait one frame and animate to 0
-			setTimeout(() => {
-				_.style.height = '0px';
-			}, 1);
+		// check if transitions are enabled (respects prefers-reduced-motion)
+		const hasTransition = getComputedStyle(_).transitionDuration !== '0s';
 
-			// set accessibility attributes
+		if (collapsed) {
+			_.removeAttribute('open');
 			_.setAttribute('aria-hidden', 'true');
 			_.setAttribute('inert', '');
-			_.setAttribute('hidden', '');
-		} else {
-			// only animate if not set to auto
-			if (_.style.height !== 'auto') {
-				// animate to open
-				_.style.height = `${_.scrollHeight}px`;
+
+			if (!hasTransition) {
+				_.style.height = '0px';
+				return;
 			}
 
-			// remove accessibility attributes
+			// 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');
-			_.removeAttribute('hidden');
+
+			if (!hasTransition) {
+				_.style.height = 'auto';
+				return;
+			}
+
+			// 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`;
 		}
 	}
 
 	/**
-	 * Gets the hidden state from the attribute
-	 * @returns {boolean} Whether element is hidden
+	 * Gets the collapsed state
+	 * @returns {boolean} Whether element is collapsed
 	 */
-	get hidden() {
-		const _ = this;
-		return _.hasAttribute('hidden');
+	get collapsed() {
+		return !this.hasAttribute('open');
 	}
 }
 
-// register custom elements
-customElements.define('collapsible-content', CollapsibleContent);
-customElements.define('collapsible-component', CollapsibleComponent);
+// register custom elements if not already defined
+if (!customElements.get('collapsible-content')) {
+	customElements.define('collapsible-content', CollapsibleContent);
+}
+if (!customElements.get('collapsible-component')) {
+	customElements.define('collapsible-component', CollapsibleComponent);
+}
 
 export { CollapsibleContent, CollapsibleComponent };

package/dist/collapsible-content.scss

@@ -1,2 +0,0 @@
-@forward "scss/variables";
-@forward "scss/collapsible-content";

package/dist/scss/collapsible-content.scss

@@ -1,25 +0,0 @@
-// Import variables using the modern @use rule
-@use 'variables' as vars;
-
-collapsible-component {
-  display: var(--cc-component-display, block);
-  
-  button {
-    width: var(--cc-button-width, 100%);
-    text-align: var(--cc-button-text-align, left);
-    background: var(--cc-button-background, none);
-    border: var(--cc-button-border, none);
-    cursor: var(--cc-button-cursor, pointer);
-  }
-  
-  collapsible-content[hidden] {
-    display: var(--cc-content-display, block);
-  }
-}
-
-collapsible-content {
-  padding: var(--cc-content-padding, 0px);
-  display: var(--cc-content-display, block);
-  overflow: var(--cc-content-overflow, hidden);
-  transition: height var(--cc-transition-duration, 0.35s) var(--cc-transition-timing, ease-out);
-}

package/dist/scss/variables.scss

@@ -1,40 +0,0 @@
-// Collapsible Content variables
-// SCSS variables for internal component use and customization
-// these variables can be customized by the user
-
-// layout
-$component-display: block !default;
-$button-width: 100% !default;
-$button-text-align: left !default;
-
-// appearance
-$button-background: none !default;
-$button-border: none !default;
-$button-cursor: pointer !default;
-
-// animation
-$content-padding: 0px !default;
-$content-display: block !default;
-$content-overflow: hidden !default;
-$transition-duration: 0.35s !default;
-$transition-timing: ease-out !default;
-
-// Define CSS Custom Properties using SCSS values
-:root {
-  // layout
-  --cc-component-display: #{$component-display};
-  --cc-button-width: #{$button-width};
-  --cc-button-text-align: #{$button-text-align};
-  
-  // appearance
-  --cc-button-background: #{$button-background};
-  --cc-button-border: #{$button-border};
-  --cc-button-cursor: #{$button-cursor};
-  
-  // animation
-  --cc-content-padding: #{$content-padding};
-  --cc-content-display: #{$content-display};
-  --cc-content-overflow: #{$content-overflow};
-  --cc-transition-duration: #{$transition-duration};
-  --cc-transition-timing: #{$transition-timing};
-}

package/src/index.scss

@@ -1,2 +0,0 @@
-@forward "scss/variables";
-@forward "scss/collapsible-content";

package/src/scss/collapsible-content.scss

@@ -1,25 +0,0 @@
-// Import variables using the modern @use rule
-@use 'variables' as vars;
-
-collapsible-component {
-  display: var(--cc-component-display, block);
-  
-  button {
-    width: var(--cc-button-width, 100%);
-    text-align: var(--cc-button-text-align, left);
-    background: var(--cc-button-background, none);
-    border: var(--cc-button-border, none);
-    cursor: var(--cc-button-cursor, pointer);
-  }
-  
-  collapsible-content[hidden] {
-    display: var(--cc-content-display, block);
-  }
-}
-
-collapsible-content {
-  padding: var(--cc-content-padding, 0px);
-  display: var(--cc-content-display, block);
-  overflow: var(--cc-content-overflow, hidden);
-  transition: height var(--cc-transition-duration, 0.35s) var(--cc-transition-timing, ease-out);
-}

package/src/scss/variables.scss

@@ -1,40 +0,0 @@
-// Collapsible Content variables
-// SCSS variables for internal component use and customization
-// these variables can be customized by the user
-
-// layout
-$component-display: block !default;
-$button-width: 100% !default;
-$button-text-align: left !default;
-
-// appearance
-$button-background: none !default;
-$button-border: none !default;
-$button-cursor: pointer !default;
-
-// animation
-$content-padding: 0px !default;
-$content-display: block !default;
-$content-overflow: hidden !default;
-$transition-duration: 0.35s !default;
-$transition-timing: ease-out !default;
-
-// Define CSS Custom Properties using SCSS values
-:root {
-  // layout
-  --cc-component-display: #{$component-display};
-  --cc-button-width: #{$button-width};
-  --cc-button-text-align: #{$button-text-align};
-  
-  // appearance
-  --cc-button-background: #{$button-background};
-  --cc-button-border: #{$button-border};
-  --cc-button-cursor: #{$button-cursor};
-  
-  // animation
-  --cc-content-padding: #{$content-padding};
-  --cc-content-display: #{$content-display};
-  --cc-content-overflow: #{$content-overflow};
-  --cc-transition-duration: #{$transition-duration};
-  --cc-transition-timing: #{$transition-timing};
-}