@magic-spells/dialog-panel 0.3.0 → 1.0.1

package/src/dialog-panel.js

@@ -1,291 +1,363 @@
-import './index.scss';
-import '@magic-spells/focus-trap';
+import './dialog-panel.css';
 
 /**
- * Custom element that creates an accessible modal dialog panel with focus management
+ * DialogPanel - A lightweight web component wrapper for native <dialog> elements
+ * with state-driven animations.
+ *
  * @extends HTMLElement
+ *
+ * @property {string} state - Current state: 'hidden' | 'showing' | 'shown' | 'hiding'
+ * @property {HTMLDialogElement} dialog - Reference to inner <dialog> element
+ * @property {boolean} isOpen - True if state is 'showing' or 'shown'
+ * @property {HTMLElement|null} triggerElement - Element that triggered current action
+ *
+ * @fires beforeShow - Fired before showing starts (cancelable)
+ * @fires shown - Fired after show animation completes
+ * @fires beforeHide - Fired before hiding starts (cancelable)
+ * @fires hidden - Fired after hide animation completes
  */
 class DialogPanel extends HTMLElement {
-	#handleTransitionEnd;
-
-	/**
-	 * Clean up event listeners when component is removed from DOM
-	 */
-	disconnectedCallback() {
+	// Private fields
+	#state = 'hidden';
+	#triggerElement = null;
+	#dialog = null;
+	#result = null;
+
+	// Event handler references for cleanup
+	#handlers = {
+		click: null,
+		dialogClick: null,
+		cancel: null,
+	};
+
+	// Animation cleanup references
+	#pendingRAF = null;
+	#pendingTimeout = null;
+
+	// Fallback timeout for transitionend (in ms)
+	static TRANSITION_FALLBACK_TIMEOUT = 700;
+
+	connectedCallback() {
 		const _ = this;
-		if (_.contentPanel) {
-			_.contentPanel.removeEventListener(
-				'transitionend',
-				_.#handleTransitionEnd
+
+		// Find inner dialog element
+		_.#dialog = _.querySelector('dialog');
+
+		if (!_.#dialog) {
+			console.warn(
+				'DialogPanel: No <dialog> element found inside <dialog-panel>'
 			);
+			return;
 		}
-	}
-	/**
-	 * Initializes the dialog panel, sets up focus trap and overlay
-	 */
-	constructor() {
-		super();
-		const _ = this;
-		_.id = _.getAttribute('id');
-		_.setAttribute('role', 'dialog');
-		_.setAttribute('aria-modal', 'true');
-		_.setAttribute('aria-hidden', 'true');
-
-		_.contentPanel = _.querySelector('dialog-content');
-		_.triggerEl = null;
-
-		// Create a handler for transition end events
-		_.#handleTransitionEnd = (e) => {
-			if (
-				e.propertyName === 'opacity' &&
-				_.getAttribute('aria-hidden') === 'true'
-			) {
-				_.contentPanel.classList.add('hidden');
-
-				// Dispatch afterHide event - dialog has completed its transition
-				_.dispatchEvent(
-					new CustomEvent('afterHide', {
-						bubbles: true,
-						detail: { triggerElement: _.triggerEl },
-					})
-				);
-			}
-		};
 
-		// Set up focus-trap inside dialog-content
-		// Check if focus-trap already exists
-		_.focusTrap = _.contentPanel.querySelector('focus-trap');
-		if (!_.focusTrap) {
-			_.focusTrap = document.createElement('focus-trap');
+		// Auto-create dialog-backdrop if not present
+		if (!_.querySelector('dialog-backdrop')) {
+			const backdrop = document.createElement('dialog-backdrop');
+			_.insertBefore(backdrop, _.firstChild);
+		}
 
-			// Move all existing dialog-content children into focus-trap
-			const existingContent = Array.from(_.contentPanel.childNodes);
-			existingContent.forEach((child) =>
-				_.focusTrap.appendChild(child)
-			);
+		// Set initial state attribute
+		_.#setState('hidden');
+
+		// Bind event handlers
+		_.#bindEvents();
+	}
 
-			// Insert focus-trap inside dialog-content
-			_.contentPanel.appendChild(_.focusTrap);
+	disconnectedCallback() {
+		const _ = this;
+
+		// Cancel pending animations
+		if (_.#pendingRAF) {
+			cancelAnimationFrame(_.#pendingRAF);
+			_.#pendingRAF = null;
+		}
+		if (_.#pendingTimeout) {
+			clearTimeout(_.#pendingTimeout);
+			_.#pendingTimeout = null;
 		}
 
-		// Ensure we have labelledby and describedby references
-		if (!_.getAttribute('aria-labelledby')) {
-			const heading = _.querySelector('h1, h2, h3');
-			if (heading && !heading.id) {
-				heading.id = `${_.id}-title`;
+		// Clean up event listeners
+		if (_.#handlers.click) {
+			_.removeEventListener('click', _.#handlers.click);
+		}
+		if (_.#dialog) {
+			if (_.#handlers.dialogClick) {
+				_.#dialog.removeEventListener(
+					'click',
+					_.#handlers.dialogClick
+				);
 			}
-			if (heading?.id) {
-				_.setAttribute('aria-labelledby', heading.id);
+			if (_.#handlers.cancel) {
+				_.#dialog.removeEventListener('cancel', _.#handlers.cancel);
 			}
 		}
-
-		// Add modal overlay
-		_.prepend(document.createElement('dialog-overlay'));
-		_.#bindUI();
-		_.#bindKeyboard();
 	}
 
 	/**
-	 * Binds click events for showing and hiding the dialog
+	 * Bind event listeners for close buttons, backdrop, and escape key
 	 * @private
 	 */
-	#bindUI() {
+	#bindEvents() {
 		const _ = this;
 
-		// Handle trigger buttons
-		document.addEventListener('click', (e) => {
-			const trigger = e.target.closest(`[aria-controls="${_.id}"]`);
-			if (!trigger) return;
-
-			if (trigger.getAttribute('data-prevent-default') === 'true') {
-				e.preventDefault();
+		// Handle close buttons with data-action-hide-dialog
+		_.#handlers.click = (e) => {
+			const trigger = e.target.closest('[data-action-hide-dialog]');
+			if (trigger) {
+				e.stopPropagation();
+				_.hide(trigger);
 			}
+		};
+		_.addEventListener('click', _.#handlers.click);
+
+		// Handle backdrop click - detect clicks outside dialog bounds
+		// This works because clicks on ::backdrop still fire on the dialog element
+		_.#handlers.dialogClick = (e) => {
+			const rect = _.#dialog.getBoundingClientRect();
+			const clickedOutside =
+				e.clientX < rect.left ||
+				e.clientX > rect.right ||
+				e.clientY < rect.top ||
+				e.clientY > rect.bottom;
+			if (clickedOutside) {
+				e.stopPropagation();
+				_.hide();
+			}
+		};
+		_.#dialog.addEventListener('click', _.#handlers.dialogClick);
 
-			_.show(trigger);
-		});
-
-		// Handle close buttons
-		_.addEventListener('click', (e) => {
-			if (!e.target.closest('[data-action-hide-dialog]')) return;
+		// Handle escape key - intercept native cancel and animate close
+		_.#handlers.cancel = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
 			_.hide();
-		});
-
-		// Add transition end listener
-		_.contentPanel.addEventListener(
-			'transitionend',
-			_.#handleTransitionEnd
-		);
-	}
-
-	/**
-	 * Binds keyboard events for accessibility
-	 * @private
-	 */
-	#bindKeyboard() {
-		this.addEventListener('keydown', (e) => {
-			if (e.key === 'Escape') {
-				this.hide();
-			}
-		});
+		};
+		_.#dialog.addEventListener('cancel', _.#handlers.cancel);
 	}
 
 	/**
-	 * Shows the dialog and traps focus within it
-	 * @param {HTMLElement} [triggerEl=null] - The element that triggered the dialog
-	 * @fires DialogPanel#beforeShow - Fired before the dialog starts to show
-	 * @fires DialogPanel#show - Fired when the dialog has been shown
-	 * @returns {boolean} False if the show was prevented by a beforeShow event handler
+	 * Show the dialog with animation
+	 * @param {HTMLElement} [triggerEl=null] - The element that triggered the show
+	 * @returns {boolean} False if show was prevented via beforeShow event
 	 */
 	show(triggerEl = null) {
 		const _ = this;
-		_.triggerEl = triggerEl || false;
 
-		// Dispatch beforeShow event - allows preventing the dialog from opening
-		const beforeShowEvent = new CustomEvent('beforeShow', {
-			bubbles: true,
-			cancelable: true,
-			detail: { triggerElement: _.triggerEl },
-		});
+		// Check if already showing/shown
+		if (_.#state === 'showing' || _.#state === 'shown') return true;
 
-		const showAllowed = _.dispatchEvent(beforeShowEvent);
+		// If currently hiding, ignore (let hide complete first)
+		if (_.#state === 'hiding') return false;
 
-		// If event was canceled (preventDefault was called), don't show the dialog
-		if (!showAllowed) return false;
+		// Store trigger element for focus return later
+		_.#triggerElement = triggerEl || null;
 
-		// Add open attribute for CSS :has() selector
-		_.setAttribute('open', '');
+		// Fire beforeShow (cancelable)
+		if (!_.#emit('beforeShow', { cancelable: true })) return false;
 
-		// Remove the hidden class first to ensure content is rendered
-		_.contentPanel.classList.remove('hidden');
+		// Set state to 'showing' and open native dialog
+		_.#setState('showing');
+		_.#dialog.showModal();
 
-		// Give the browser a moment to process before starting animation
-		requestAnimationFrame(() => {
-			// Update ARIA states
-			_.setAttribute('aria-hidden', 'false');
+		// Double RAF ensures browser has painted the 'showing' state
+		// before we transition to 'shown'
+		_.#pendingRAF = requestAnimationFrame(() => {
+			_.#pendingRAF = requestAnimationFrame(() => {
+				_.#pendingRAF = null;
+				_.#setState('shown');
 
-			// set trigger element to expanded: true
-			if (_.triggerEl) {
-				_.triggerEl.setAttribute('aria-expanded', 'true');
-			}
-
-			// Focus management
-			const firstFocusable = _.querySelector(
-				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-			);
-			if (firstFocusable) {
-				requestAnimationFrame(() => {
-					firstFocusable.focus();
+				// Wait for transition to complete before firing 'shown' event
+				_.#waitForTransition(() => {
+					_.#emit('shown');
 				});
-			}
-
-			// Dispatch show event - dialog is now visible
-			_.dispatchEvent(
-				new CustomEvent('show', {
-					bubbles: true,
-					detail: { triggerElement: _.triggerEl },
-				})
-			);
+			});
 		});
+
+		return true;
 	}
 
 	/**
-	 * Hides the dialog and restores focus
-	 * @fires DialogPanel#beforeHide - Fired before the dialog starts to hide
-	 * @fires DialogPanel#hide - Fired when the dialog has started hiding (transition begins)
-	 * @fires DialogPanel#afterHide - Fired when the dialog has completed its hide transition
-	 * @returns {boolean} False if the hide was prevented by a beforeHide event handler
+	 * Hide the dialog with animation
+	 * @param {HTMLElement} [triggerEl=null] - The element that triggered the hide
+	 * @returns {boolean} False if hide was prevented via beforeHide event
 	 */
-	hide() {
+	hide(triggerEl = null) {
 		const _ = this;
 
-		// Dispatch beforeHide event - allows preventing the dialog from closing
-		const beforeHideEvent = new CustomEvent('beforeHide', {
-			bubbles: true,
-			cancelable: true,
-			detail: { triggerElement: _.triggerEl },
-		});
+		// Check if already hiding/hidden
+		if (_.#state === 'hiding' || _.#state === 'hidden') return true;
 
-		const hideAllowed = _.dispatchEvent(beforeHideEvent);
+		// If currently showing, ignore (let show complete first)
+		if (_.#state === 'showing') return false;
 
-		// If event was canceled (preventDefault was called), don't hide the dialog
-		if (!hideAllowed) return false;
+		// Capture result from trigger element
+		_.#result = triggerEl?.dataset?.result ?? null;
 
-		// ensure focus is moved out of the dialog
-		const activeElement = document.activeElement;
-		if (activeElement && _.contains(activeElement)) {
-			// Blur the currently focused element if it's inside the dialog
-			activeElement.blur();
+		// Fire beforeHide (cancelable)
+		if (
+			!_.#emit('beforeHide', {
+				cancelable: true,
+				result: _.#result,
+				triggerElement: triggerEl,
+			})
+		) {
+			return false;
 		}
 
-		// Update ARIA states and restore focus
-		if (_.triggerEl) {
-			// remove focus from modal panel first
-			_.triggerEl.focus();
-			// mark trigger as no longer expanded
-			_.triggerEl.setAttribute('aria-expanded', 'false');
-		} else {
-			// Move focus to body to ensure it's not trapped
-			document.body.focus();
-		}
+		// Set state to 'hiding' - this triggers CSS exit animation
+		_.#setState('hiding');
 
-		// Set aria-hidden to start transition
-		// The transitionend event handler will add display:none when complete
-		_.setAttribute('aria-hidden', 'true');
-		// Remove open attribute for CSS :has() selector
+		// Wait for transition to complete
+		_.#waitForTransition(() => {
+			_.#dialog.close();
+			_.#setState('hidden');
+			_.#emit('hidden', {
+				result: _.#result,
+				triggerElement: triggerEl,
+			});
 
-		_.removeAttribute('open');
+			// Return focus to trigger element
+			if (_.#triggerElement) _.#triggerElement.focus();
 
-		// Dispatch hide event - dialog is now starting to hide
-		_.dispatchEvent(
-			new CustomEvent('hide', {
-				bubbles: true,
-				detail: { triggerElement: _.triggerEl },
-			})
-		);
+			// Clean up
+			_.#triggerElement = null;
+			_.#result = null;
+		});
 
 		return true;
 	}
-}
 
-/**
- * Custom element that creates a clickable overlay for the dialog
- * @extends HTMLElement
- */
-class DialogOverlay extends HTMLElement {
-	constructor() {
-		super();
-		this.setAttribute('tabindex', '-1');
-		this.dialogPanel = this.closest('dialog-panel');
-		this.#bindUI();
+	/**
+	 * Wait for CSS transition to complete with fallback timeout
+	 * @param {Function} callback - Called when transition completes
+	 * @private
+	 */
+	#waitForTransition(callback) {
+		const _ = this;
+		let called = false;
+
+		const done = () => {
+			if (called) return;
+			called = true;
+			_.#dialog.removeEventListener('transitionend', onTransitionEnd);
+			if (_.#pendingTimeout) {
+				clearTimeout(_.#pendingTimeout);
+				_.#pendingTimeout = null;
+			}
+			callback();
+		};
+
+		const onTransitionEnd = (e) => {
+			if (e.target === _.#dialog) done();
+		};
+
+		_.#dialog.addEventListener('transitionend', onTransitionEnd);
+
+		_.#pendingTimeout = setTimeout(
+			done,
+			DialogPanel.TRANSITION_FALLBACK_TIMEOUT
+		);
 	}
 
-	#bindUI() {
-		this.addEventListener('click', () => {
-			this.dialogPanel.hide();
+	/**
+	 * Set the component state
+	 * @param {string} newState - The new state
+	 * @private
+	 */
+	#setState(newState) {
+		this.#state = newState;
+		this.setAttribute('state', newState);
+	}
+
+	/**
+	 * Emit a custom event
+	 * @param {string} name - Event name
+	 * @param {Object} options - Event options
+	 * @returns {boolean} False if event was cancelled
+	 * @private
+	 */
+	#emit(name, options = {}) {
+		const _ = this;
+		const { cancelable = false, ...detail } = options;
+
+		const event = new CustomEvent(name, {
+			bubbles: true,
+			composed: true,
+			cancelable,
+			detail: {
+				triggerElement: _.#triggerElement,
+				result: _.#result,
+				state: _.#state,
+				...detail,
+			},
 		});
+
+		return _.dispatchEvent(event);
+	}
+
+	// Read-only properties
+	get state() {
+		return this.#state;
+	}
+	get dialog() {
+		return this.#dialog;
+	}
+	get isOpen() {
+		return this.#state === 'showing' || this.#state === 'shown';
+	}
+	get triggerElement() {
+		return this.#triggerElement;
 	}
 }
 
 /**
- * Custom element that wraps the content of the dialog
+ * DialogBackdrop - A custom backdrop element that animates with the dialog-panel state.
+ * Use this instead of native ::backdrop for consistent cross-browser animations.
+ *
  * @extends HTMLElement
  */
-class DialogContent extends HTMLElement {
-	constructor() {
-		super();
-		this.setAttribute('role', 'document');
+class DialogBackdrop extends HTMLElement {
+	#panel = null;
+	#handlers = {
+		click: null,
+	};
+
+	connectedCallback() {
+		const _ = this;
+
+		// Find parent dialog-panel
+		_.#panel = _.closest('dialog-panel');
+
+		if (!_.#panel) {
+			console.warn(
+				'DialogBackdrop: Must be inside a <dialog-panel> element'
+			);
+			return;
+		}
+
+		// Handle click to close
+		_.#handlers.click = () => {
+			_.#panel.hide();
+		};
+		_.addEventListener('click', _.#handlers.click);
+	}
+
+	disconnectedCallback() {
+		const _ = this;
+		if (_.#handlers.click) {
+			_.removeEventListener('click', _.#handlers.click);
+		}
 	}
 }
 
+// Register the custom elements
+// Note: dialog-backdrop must be defined BEFORE dialog-panel,
+// because dialog-panel's connectedCallback may create dialog-backdrop elements
+if (!customElements.get('dialog-backdrop')) {
+	customElements.define('dialog-backdrop', DialogBackdrop);
+}
 if (!customElements.get('dialog-panel')) {
 	customElements.define('dialog-panel', DialogPanel);
 }
-if (!customElements.get('dialog-overlay')) {
-	customElements.define('dialog-overlay', DialogOverlay);
-}
-if (!customElements.get('dialog-content')) {
-	customElements.define('dialog-content', DialogContent);
-}
 
-export { DialogPanel, DialogOverlay, DialogContent };
-export default DialogPanel;
+export { DialogPanel, DialogBackdrop };

package/dist/dialog-panel.scss

@@ -1,2 +0,0 @@
-@forward 'scss/variables';
-@forward 'scss/dialog-panel';

package/dist/scss/dialog-panel.scss

@@ -1,78 +0,0 @@
-// Import variables using the modern @use rule
-@use 'variables' as vars;
-
-dialog-panel {
-	/* Make it take no space and be invisible in the document flow */
-	display: contents;
-
-	&[aria-hidden='false'] {
-		dialog-overlay,
-		dialog-content {
-			pointer-events: auto;
-			opacity: 1;
-			transform: scale(1);
-			filter: blur(0px);
-		}
-	}
-}
-
-/* Overlay background */
-dialog-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100vw;
-	height: 100vh;
-	opacity: 0;
-	pointer-events: none;
-	z-index: var(--dp-overlay-z-index, 1000);
-	transition: var(--dp-overlay-transition, all 300ms ease-out);
-	background-color: var(
-		--dp-overlay-background,
-		rgba(20, 23, 26, 0.4)
-	);
-	backdrop-filter: var(
-		--dp-overlay-backdrop-filter,
-		blur(2px) saturate(120%)
-	);
-}
-
-dialog-content {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%) scale(0.95);
-	max-width: 90vw;
-	max-height: 85vh;
-	display: var(--dp-content-display, block);
-	opacity: 0;
-	background: var(--dp-content-background, white);
-	pointer-events: none;
-	z-index: var(--dp-content-z-index, 1001);
-	box-shadow: var(
-		--dp-content-shadow,
-		0 10px 25px rgba(0, 0, 0, 0.15)
-	);
-	border-radius: var(--dp-content-border-radius, 8px);
-	overflow: auto;
-	transition:
-		opacity var(--dp-transition-duration, 300ms)
-			var(--dp-transition-timing, ease-out),
-		transform var(--dp-transition-duration, 300ms)
-			var(--dp-transition-timing, ease-out);
-
-	/* When shown, reset transform to center */
-	dialog-panel[aria-hidden='false'] & {
-		transform: translate(-50%, -50%) scale(1);
-	}
-}
-
-/* When explicitly hidden, remove from layout */
-dialog-content.hidden {
-	display: none;
-}
-
-// Body scroll lock when dialog is open using :has() selector
-body:has(dialog-panel[open]) {
-	overflow: hidden;
-}