@magic-spells/collapsible-content 0.1.4 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@magic-spells/collapsible-content",
-	"version": "0.1.4",
+	"version": "1.0.0",
 	"description": "Collapsible content web component",
 	"author": "Cory Schulz",
 	"license": "MIT",
@@ -15,7 +15,8 @@
 			"require": "./dist/collapsible-content.cjs.js",
 			"default": "./dist/collapsible-content.esm.js"
 		},
-		"./style.css": "./dist/collapsible-content.min.css"
+		"./css": "./dist/collapsible-content.css",
+		"./css/min": "./dist/collapsible-content.min.css"
 	},
 	"sideEffects": true,
 	"repository": {
@@ -56,16 +57,16 @@
 		"not ie <= 11"
 	],
 	"devDependencies": {
-		"@eslint/js": "^8.57.0",
+		"@eslint/js": "^9.38.0",
 		"@rollup/plugin-node-resolve": "^15.2.3",
 		"@rollup/plugin-terser": "^0.4.4",
-		"eslint": "^8.0.0",
-		"globals": "^13.24.0",
+		"eslint": "^9.38.0",
+		"globals": "^15.15.0",
+		"postcss-lightningcss": "^1.0.1",
 		"prettier": "^3.3.3",
 		"rollup": "^3.0.0",
 		"rollup-plugin-copy": "^3.5.0",
 		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-serve": "^1.1.1",
-		"postcss-lightningcss": "^1.0.1"
+		"rollup-plugin-serve": "^1.1.1"
 	}
 }

package/src/collapsible-content.css

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

package/src/collapsible-content.js

@@ -1,177 +1,209 @@
-import './styles.css';
+import './collapsible-content.css';
 
 /**
- * custom element that creates a collapsible/expandable component with proper accessibility
+ * Custom element that creates a collapsible/expandable component with proper accessibility
  */
 class CollapsibleComponent extends HTMLElement {
 	#handleClick;
+	#abortController;
 
 	/**
-	 * initializes the component and sets up references to child elements
+	 * Initializes the component and sets up references to child elements
 	 */
 	constructor() {
 		super();
+		const _ = this;
 
 		// store references to elements once to avoid re-querying
-		this.button = null;
-		this.content = null;
+		_.button = null;
+		_.content = null;
 
 		// define click handler with proper this binding
-		this.#handleClick = (e) => {
+		_.#handleClick = (e) => {
 			e.preventDefault();
 			// toggle expanded value
-			const expanded = this.button.getAttribute('aria-expanded') !== 'true';
-			this.button.setAttribute('aria-expanded', expanded);
-			this.content.hidden = !expanded;
+			const expanded = _.button.getAttribute('aria-expanded') !== 'true';
+			_.button.setAttribute('aria-expanded', expanded);
+			_.content.collapsed = !expanded;
 		};
 	}
 
 	/**
-	 * called when element is added to the dom
-	 * sets up accessibility attributes and event listeners
+	 * Called when element is added to the DOM
+	 * Sets up accessibility attributes and event listeners
 	 */
 	connectedCallback() {
-		// initialize element references once
-		this.button = this.querySelector('button');
-		this.content = this.querySelector('collapsible-content');
+		const _ = this;
 
-		if (!this.button || !this.content) {
-			console.error('CollapsibleComponent requires a <button> and a <collapsible-content>.');
+		// initialize element references once
+		_.button = _.querySelector('button');
+		_.content = _.querySelector('collapsible-content');
+
+		if (!_.button || !_.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;
 		}
 
 		// generate ids if not provided
-		this.button.id ||= `collapsible-button-${crypto.randomUUID().slice(0, 8)}`;
-		this.content.id ||= `collapsible-content-${crypto.randomUUID().slice(0, 8)}`;
+		_.button.id ||= `collapsible-button-${crypto.randomUUID().slice(0, 8)}`;
+		_.content.id ||= `collapsible-content-${crypto.randomUUID().slice(0, 8)}`;
 
 		// set accessibility attributes
-		this.button.setAttribute('aria-controls', this.content.id);
-		this.content.setAttribute('role', 'region');
-		this.content.setAttribute('aria-labelledby', this.button.id);
-
-		// set initial state based on aria-expanded attribute
-		const expanded = this.button.getAttribute('aria-expanded') === 'true';
-
-		// make shure content state matches button state
-		this.content.hidden = !expanded;
-
-		// add event listener
-		this.button.addEventListener('click', this.#handleClick);
+		_.button.type ||= 'button';
+		_.button.setAttribute('aria-controls', _.content.id);
+		_.content.setAttribute('aria-labelledby', _.button.id);
+
+		// set initial state based on open attribute
+		const open = _.content.hasAttribute('open');
+		_.button.setAttribute('aria-expanded', open);
+		_.content.collapsed = !open;
+
+		// use AbortController to prevent duplicate listeners on reconnection
+		_.#abortController = new AbortController();
+		_.button.addEventListener('click', _.#handleClick, {
+			signal: _.#abortController.signal,
+		});
 	}
 
 	/**
-	 * called when element is removed from the dom
-	 * cleans up event listeners
+	 * Called when element is removed from the DOM
+	 * Cleans up event listeners
 	 */
 	disconnectedCallback() {
-		if (this.button) {
-			this.button.removeEventListener('click', this.#handleClick);
+		const _ = this;
+		if (_.#abortController) {
+			_.#abortController.abort();
+			_.#abortController = null;
 		}
 	}
 }
 
 /**
- * custom element that provides animated collapsible content
+ * Custom element that provides animated collapsible content
  */
 class CollapsibleContent extends HTMLElement {
+	#handleTransitionEnd;
+	#abortController;
+	#animating = false;
+
 	/**
-	 * initializes the content element and binds event handlers
+	 * Initializes the content element and binds event handlers
 	 */
 	constructor() {
 		super();
+		const _ = this;
 
-		// bind event handler to this instance
-		this._onTransitionEnd = this._onTransitionEnd.bind(this);
+		// define event handler using arrow function for proper binding
+		_.#handleTransitionEnd = (event) => {
+			// exit if isn't height property
+			if (event.propertyName !== 'height') return;
 
-		// add event listener to remove height after transition
-		this.addEventListener('transitionend', this._onTransitionEnd);
+			_.#animating = false;
+
+			// remove the inline height to allow dynamic content changes
+			if (!_.collapsed) {
+				_.style.height = 'auto';
+			}
+		};
 	}
 
 	/**
-	 * called when element is added to the dom
-	 * sets initial height based on hidden state
+	 * Called when element is added to the DOM
+	 * Sets initial height based on open attribute
 	 */
 	connectedCallback() {
-		// get aria-expanded state from buton
-		const component = this.closest('collapsible-component');
-		const button = component.querySelector('button');
-		const expanded = button.getAttribute('aria-expanded') === 'true';
-
-		if (expanded) {
-			this.style.height = 'auto';
-		} else {
-			this.style.height = '0';
-		}
+		const _ = this;
+		_.style.height = _.hasAttribute('open') ? 'auto' : '0';
+
+		// use AbortController to prevent duplicate listeners on reconnection
+		_.#abortController = new AbortController();
+		_.addEventListener('transitionend', _.#handleTransitionEnd, {
+			signal: _.#abortController.signal,
+		});
 	}
 
 	/**
-	 * called when element is removed from the dom
-	 * cleans up event listeners
+	 * Called when element is removed from the DOM
+	 * Cleans up event listeners
 	 */
 	disconnectedCallback() {
-		this.removeEventListener('transitionend', this._onTransitionEnd);
+		const _ = this;
+		if (_.#abortController) {
+			_.#abortController.abort();
+			_.#abortController = null;
+		}
 	}
 
 	/**
-	 * 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) {
-		// animate to closed
+	set collapsed(value) {
+		const _ = this;
+
+		// prevent rapid clicking during animation
+		if (_.#animating) return;
+
+		// check if transitions are enabled (respects prefers-reduced-motion)
+		const hasTransition = getComputedStyle(_).transitionDuration !== '0s';
+
 		if (value) {
-			// reset height to animate from
-			this.style.height = `${this.scrollHeight}px`;
-
-			// wait one frame and animate to 0
-			setTimeout(() => {
-				this.style.height = '0px';
-			}, 1);
-
-			// set accessibility attributes
-			this.setAttribute('aria-hidden', 'true');
-			this.setAttribute('inert', '');
-			this.setAttribute('hidden', '');
+			if (hasTransition) {
+				_.#animating = true;
+			}
+
+			// animate to closed
+			_.style.height = `${_.scrollHeight}px`;
+
+			// use requestAnimationFrame for reliable frame timing
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					_.style.height = '0px';
+				});
+			});
+
+			_.removeAttribute('open');
+			_.setAttribute('aria-hidden', 'true');
+			_.setAttribute('inert', '');
 		} else {
-			// only animate if not set to auto
-			if (this.style.height !== 'auto') {
-				// animate to open
-				this.style.height = `${this.scrollHeight}px`;
+			// only animate if not already auto
+			if (_.style.height !== 'auto') {
+				if (hasTransition) {
+					_.#animating = true;
+				}
+				_.style.height = `${_.scrollHeight}px`;
 			}
 
-			// remove accessibility attributes
-			this.removeAttribute('aria-hidden');
-			this.removeAttribute('inert');
-			this.removeAttribute('hidden');
+			_.setAttribute('open', '');
+			_.removeAttribute('aria-hidden');
+			_.removeAttribute('inert');
 		}
 	}
 
 	/**
-	 * gets the hidden state from the attribute
-	 * @return {boolean} whether element is hidden
-	 */
-	get hidden() {
-		return this.hasAttribute('hidden');
-	}
-
-	/**
-	 * handles the end of css transitions
-	 * @param {TransitionEvent} event - the transition event
+	 * Gets the collapsed state
+	 * @returns {boolean} Whether element is collapsed
 	 */
-	_onTransitionEnd(event) {
-		console.log('on transition end');
-
-		// exit if isn't height property
-		if (event.propertyName != 'height') return;
-
-		// remove the inline height to allow dynamic content changes
-		if (!this.hidden) {
-			this.style.height = 'auto';
-		}
+	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/src/styles.css

@@ -1,22 +0,0 @@
-collapsible-component {
-	display: block;
-}
-
-collapsible-component button {
-	width: 100%;
-	text-align: left;
-	background: none;
-	border: none;
-	cursor: pointer;
-}
-
-collapsible-content {
-	padding: 0px;
-	display: block;
-	overflow: hidden;
-	transition: height 0.35s ease-out;
-}
-
-collapsible-component collapsible-content[hidden] {
-	display: block;
-}