@magic-spells/collapsible-content 1.0.0 → 1.1.0

package/dist/collapsible-content.min.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).CollapsibleContent={})}(this,(function(t){"use strict";class CollapsibleComponent extends HTMLElement{#t;#e;constructor(){super();const t=this;t.button=null,t.content=null,t.#t=e=>{e.preventDefault();const n="true"!==t.button.getAttribute("aria-expanded");t.button.setAttribute("aria-expanded",n),t.content.collapsed=!n}}connectedCallback(){const t=this;if(t.button=t.querySelector("button"),t.content=t.querySelector("collapsible-content"),!t.button||!t.content){const e=new Error("CollapsibleComponent requires a <button> and a <collapsible-content>.");return console.error(e.message),void t.dispatchEvent(new CustomEvent("collapsible-error",{bubbles:!0,detail:{error:e}}))}t.button.id||=`collapsible-button-${crypto.randomUUID().slice(0,8)}`,t.content.id||=`collapsible-content-${crypto.randomUUID().slice(0,8)}`,t.button.type||="button",t.button.setAttribute("aria-controls",t.content.id),t.content.setAttribute("aria-labelledby",t.button.id);const e=t.content.hasAttribute("open");t.button.setAttribute("aria-expanded",e),t.content.collapsed=!e,t.#e=new AbortController,t.button.addEventListener("click",t.#t,{signal:t.#e.signal})}disconnectedCallback(){const t=this;t.#e&&(t.#e.abort(),t.#e=null)}}class CollapsibleContent extends HTMLElement{#n;#e;#o=!1;constructor(){super();const t=this;t.#n=e=>{"height"===e.propertyName&&(t.#o=!1,t.collapsed||(t.style.height="auto"))}}connectedCallback(){const t=this;t.style.height=t.hasAttribute("open")?"auto":"0",t.#e=new AbortController,t.addEventListener("transitionend",t.#n,{signal:t.#e.signal})}disconnectedCallback(){const t=this;t.#e&&(t.#e.abort(),t.#e=null)}set collapsed(t){const e=this;if(e.#o)return;const n="0s"!==getComputedStyle(e).transitionDuration;t?(n&&(e.#o=!0),e.style.height=`${e.scrollHeight}px`,requestAnimationFrame((()=>{requestAnimationFrame((()=>{e.style.height="0px"}))})),e.removeAttribute("open"),e.setAttribute("aria-hidden","true"),e.setAttribute("inert","")):("auto"!==e.style.height&&(n&&(e.#o=!0),e.style.height=`${e.scrollHeight}px`),e.setAttribute("open",""),e.removeAttribute("aria-hidden"),e.removeAttribute("inert"))}get collapsed(){return!this.hasAttribute("open")}}customElements.get("collapsible-content")||customElements.define("collapsible-content",CollapsibleContent),customElements.get("collapsible-component")||customElements.define("collapsible-component",CollapsibleComponent),t.CollapsibleComponent=CollapsibleComponent,t.CollapsibleContent=CollapsibleContent}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).CollapsibleContent={})}(this,(function(t){"use strict";class CollapsibleComponent extends HTMLElement{static#t=new Map;static#e(t,e){CollapsibleComponent.#t.has(t)||CollapsibleComponent.#t.set(t,new Set),CollapsibleComponent.#t.get(t).add(e)}static#o(t,e){const o=CollapsibleComponent.#t.get(t);o&&(o.delete(e),0===o.size&&CollapsibleComponent.#t.delete(t))}static get observedAttributes(){return["group"]}#n;#l;constructor(){super();const t=this;t.button=null,t.content=null,t.#n=()=>{const e=t.content.collapsed;t.content.collapsed=!e,t.button.setAttribute("aria-expanded",!t.content.collapsed),e&&t.#r()}}connectedCallback(){const t=this;if(t.button=t.querySelector("button"),t.content=t.querySelector("collapsible-content"),!t.button||!t.content){const e=new Error("CollapsibleComponent requires a <button> and a <collapsible-content>.");return console.error(e.message),void t.dispatchEvent(new CustomEvent("collapsible-error",{bubbles:!0,detail:{error:e}}))}t.button.id||=`collapsible-button-${crypto.randomUUID().slice(0,8)}`,t.content.id||=`collapsible-content-${crypto.randomUUID().slice(0,8)}`,t.button.hasAttribute("type")||(t.button.type="button"),t.button.setAttribute("aria-controls",t.content.id),t.content.setAttribute("aria-labelledby",t.button.id),t.content.hasAttribute("role")||t.content.setAttribute("role","region");const e=t.content.hasAttribute("open");t.button.setAttribute("aria-expanded",e),t.content.style.height=e?"auto":"0px",e?(t.content.removeAttribute("aria-hidden"),t.content.removeAttribute("inert")):(t.content.setAttribute("aria-hidden","true"),t.content.setAttribute("inert","")),t.#l=new AbortController,t.button.addEventListener("click",t.#n,{signal:t.#l.signal})}attributeChangedCallback(t,e,o){"group"===t&&(e&&CollapsibleComponent.#o(e,this),o&&CollapsibleComponent.#e(o,this))}disconnectedCallback(){const t=this,e=t.getAttribute("group");e&&CollapsibleComponent.#o(e,t),t.#l&&(t.#l.abort(),t.#l=null)}#r(){const t=this,e=t.getAttribute("group");if(!e)return;const o=CollapsibleComponent.#t.get(e);if(o)for(const e of o)e!==t&&(e.content.collapsed||(e.content.collapsed=!0,e.button.setAttribute("aria-expanded","false")))}}class CollapsibleContent extends HTMLElement{#i;#l;#s=!1;constructor(){super();const t=this;t.#i=e=>{e.target===t&&"height"===e.propertyName&&(t.#s=!1,t.style.removeProperty("--collapsible-duration"),t.collapsed||(t.style.height="auto"))}}connectedCallback(){const t=this;t.style.height=t.hasAttribute("open")?"auto":"0",t.#l=new AbortController,t.addEventListener("transitionend",t.#i,{signal:t.#l.signal})}disconnectedCallback(){const t=this;t.#s=!1,t.#l&&(t.#l.abort(),t.#l=null)}get#a(){const t=this.getAttribute("speed");if(null===t)return 900;const e=Number(t);return e>0?e:900}get#c(){const t=this.getAttribute("min-duration");if(null===t)return.25;const e=Number(t);return e>0?e:.25}get#u(){const t=this.getAttribute("max-duration");if(null===t)return 1;const e=Number(t);return e>0?e:1}#b(t,e){const o=this,n=Math.abs(e-t),l=Math.min(o.#u,Math.max(o.#c,n/o.#a));o.style.setProperty("--collapsible-duration",`${l.toFixed(3)}s`)}set collapsed(t){const e=this,o=Boolean(t);if(e.collapsed===o)return;const n="0s"!==getComputedStyle(e).transitionDuration;if(o){if(e.removeAttribute("open"),e.setAttribute("aria-hidden","true"),e.setAttribute("inert",""),!n)return void(e.style.height="0px");const t=e.getBoundingClientRect().height;e.style.height=`${t}px`,e.#b(t,0),e.#s=!0,e.offsetHeight,e.style.height="0px"}else{if(e.setAttribute("open",""),e.removeAttribute("aria-hidden"),e.removeAttribute("inert"),!n)return void(e.style.height="auto");const t=e.getBoundingClientRect().height;e.style.height=`${t}px`,e.#b(t,e.scrollHeight),e.#s=!0,e.offsetHeight,e.style.height=`${e.scrollHeight}px`}}get collapsed(){return!this.hasAttribute("open")}}customElements.get("collapsible-content")||customElements.define("collapsible-content",CollapsibleContent),customElements.get("collapsible-component")||customElements.define("collapsible-component",CollapsibleComponent),t.CollapsibleComponent=CollapsibleComponent,t.CollapsibleContent=CollapsibleContent}));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@magic-spells/collapsible-content",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "Collapsible content web component",
 	"author": "Cory Schulz",
 	"license": "MIT",
@@ -59,7 +59,7 @@
 	"devDependencies": {
 		"@eslint/js": "^9.38.0",
 		"@rollup/plugin-node-resolve": "^15.2.3",
-		"@rollup/plugin-terser": "^0.4.4",
+		"@rollup/plugin-terser": "^1.0.0",
 		"eslint": "^9.38.0",
 		"globals": "^15.15.0",
 		"postcss-lightningcss": "^1.0.1",

package/src/collapsible-content.css

@@ -1,31 +1,31 @@
 collapsible-component {
-  display: block;
+	display: block;
 }
 
 collapsible-component button {
-  width: 100%;
-  text-align: left;
-  background: none;
-  border: none;
-  cursor: pointer;
+	width: 100%;
+	text-align: left;
+	background: none;
+	border: none;
+	cursor: pointer;
 }
 
 collapsible-component button:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
+	outline: 2px solid currentColor;
+	outline-offset: 2px;
 }
 
 collapsible-content {
-  --collapsible-duration: 0.35s;
-  --collapsible-easing: ease-out;
+	--collapsible-duration: 0.35s;
+	--collapsible-easing: ease;
 
-  display: block;
-  overflow: hidden;
-  transition: height var(--collapsible-duration) var(--collapsible-easing);
+	display: block;
+	overflow: hidden;
+	transition: height var(--collapsible-duration) var(--collapsible-easing);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  collapsible-content {
-    transition: none;
-  }
+	collapsible-content {
+		transition: none;
+	}
 }

package/src/collapsible-content.js

@@ -1,9 +1,34 @@
 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;
 
@@ -18,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.collapsed = !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();
 		};
 	}
 
@@ -58,14 +82,26 @@ class CollapsibleComponent extends HTMLElement {
 		_.content.id ||= `collapsible-content-${crypto.randomUUID().slice(0, 8)}`;
 
 		// set accessibility attributes
-		_.button.type ||= 'button';
+		if (!_.button.hasAttribute('type')) {
+			_.button.type = 'button';
+		}
 		_.button.setAttribute('aria-controls', _.content.id);
 		_.content.setAttribute('aria-labelledby', _.button.id);
+		if (!_.content.hasAttribute('role')) {
+			_.content.setAttribute('role', 'region');
+		}
 
-		// set initial state based on open attribute
+		// set initial state without triggering an opening/closing animation
 		const open = _.content.hasAttribute('open');
 		_.button.setAttribute('aria-expanded', open);
-		_.content.collapsed = !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', '');
+		}
 
 		// use AbortController to prevent duplicate listeners on reconnection
 		_.#abortController = new AbortController();
@@ -74,17 +110,40 @@ class CollapsibleComponent extends HTMLElement {
 		});
 	}
 
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (name !== 'group') return;
+		if (oldValue) CollapsibleComponent.#removeFromGroup(oldValue, this);
+		if (newValue) CollapsibleComponent.#addToGroup(newValue, this);
+	}
+
 	/**
 	 * Called when element is removed from the DOM
 	 * Cleans up event listeners
 	 */
 	disconnectedCallback() {
 		const _ = this;
+		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');
+			}
+		}
+	}
 }
 
 /**
@@ -104,10 +163,11 @@ class CollapsibleContent extends HTMLElement {
 
 		// define event handler using arrow function for proper binding
 		_.#handleTransitionEnd = (event) => {
-			// exit if isn't height property
+			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 (!_.collapsed) {
@@ -137,55 +197,87 @@ class CollapsibleContent extends HTMLElement {
 	 */
 	disconnectedCallback() {
 		const _ = this;
+		_.#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 collapsed state with animation
 	 * @param {boolean} value - Whether element should be collapsed
 	 */
 	set collapsed(value) {
 		const _ = this;
-
-		// prevent rapid clicking during animation
-		if (_.#animating) return;
+		const collapsed = Boolean(value);
+		if (_.collapsed === collapsed) return;
 
 		// check if transitions are enabled (respects prefers-reduced-motion)
 		const hasTransition = getComputedStyle(_).transitionDuration !== '0s';
 
-		if (value) {
-			if (hasTransition) {
-				_.#animating = true;
-			}
-
-			// animate to closed
-			_.style.height = `${_.scrollHeight}px`;
-
-			// use requestAnimationFrame for reliable frame timing
-			requestAnimationFrame(() => {
-				requestAnimationFrame(() => {
-					_.style.height = '0px';
-				});
-			});
-
+		if (collapsed) {
 			_.removeAttribute('open');
 			_.setAttribute('aria-hidden', 'true');
 			_.setAttribute('inert', '');
-		} else {
-			// only animate if not already auto
-			if (_.style.height !== 'auto') {
-				if (hasTransition) {
-					_.#animating = true;
-				}
-				_.style.height = `${_.scrollHeight}px`;
+
+			if (!hasTransition) {
+				_.style.height = '0px';
+				return;
 			}
 
+			// 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;
+			}
+
+			// 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`;
 		}
 	}