@magic-spells/dialog-panel 0.2.0 → 0.2.3

package/src/dialog-panel.js

@@ -8,21 +8,24 @@ import '@magic-spells/focus-trap';
 class DialogPanel extends HTMLElement {
 	#handleTransitionEnd;
 	#scrollPosition = 0;
-	
+
 	/**
 	 * Clean up event listeners when component is removed from DOM
 	 */
 	disconnectedCallback() {
 		const _ = this;
 		if (_.contentPanel) {
-			_.contentPanel.removeEventListener('transitionend', _.#handleTransitionEnd);
+			_.contentPanel.removeEventListener(
+				'transitionend',
+				_.#handleTransitionEnd
+			);
 		}
-		
+
 		// Ensure body scroll is restored if component is removed while open
 		document.body.classList.remove('overflow-hidden');
 		this.#restoreScroll();
 	}
-	
+
 	/**
 	 * Saves current scroll position and locks body scrolling
 	 * @private
@@ -31,12 +34,12 @@ class DialogPanel extends HTMLElement {
 		const _ = this;
 		// Save current scroll position
 		_.#scrollPosition = window.pageYOffset;
-		
+
 		// Apply fixed position to body
 		document.body.classList.add('overflow-hidden');
 		document.body.style.top = `-${_.#scrollPosition}px`;
 	}
-	
+
 	/**
 	 * Restores scroll position when dialog is closed
 	 * @private
@@ -46,7 +49,7 @@ class DialogPanel extends HTMLElement {
 		// Remove fixed positioning
 		document.body.classList.remove('overflow-hidden');
 		document.body.style.removeProperty('top');
-		
+
 		// Restore scroll position
 		window.scrollTo(0, _.#scrollPosition);
 	}
@@ -64,17 +67,22 @@ class DialogPanel extends HTMLElement {
 		_.contentPanel = _.querySelector('dialog-content');
 		_.focusTrap = document.createElement('focus-trap');
 		_.triggerEl = null;
-		
+
 		// Create a handler for transition end events
 		_.#handleTransitionEnd = (e) => {
-			if (e.propertyName === 'opacity' && _.getAttribute('aria-hidden') === 'true') {
+			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 }
-				}));
+				_.dispatchEvent(
+					new CustomEvent('afterHide', {
+						bubbles: true,
+						detail: { triggerElement: _.triggerEl },
+					})
+				);
 			}
 		};
 
@@ -109,12 +117,10 @@ class DialogPanel extends HTMLElement {
 	 */
 	#bindUI() {
 		const _ = this;
-		
+
 		// Handle trigger buttons
 		document.addEventListener('click', (e) => {
-			const trigger = e.target.closest(
-				`[aria-controls="${_.id}"]`
-			);
+			const trigger = e.target.closest(`[aria-controls="${_.id}"]`);
 			if (!trigger) return;
 
 			if (trigger.getAttribute('data-prevent-default') === 'true') {
@@ -129,9 +135,12 @@ class DialogPanel extends HTMLElement {
 			if (!e.target.closest('[data-action="hide-dialog"]')) return;
 			_.hide();
 		});
-		
+
 		// Add transition end listener
-		_.contentPanel.addEventListener('transitionend', _.#handleTransitionEnd);
+		_.contentPanel.addEventListener(
+			'transitionend',
+			_.#handleTransitionEnd
+		);
 	}
 
 	/**
@@ -161,17 +170,17 @@ class DialogPanel extends HTMLElement {
 		const beforeShowEvent = new CustomEvent('beforeShow', {
 			bubbles: true,
 			cancelable: true,
-			detail: { triggerElement: _.triggerEl }
+			detail: { triggerElement: _.triggerEl },
 		});
-		
+
 		const showAllowed = _.dispatchEvent(beforeShowEvent);
-		
+
 		// If event was canceled (preventDefault was called), don't show the dialog
 		if (!showAllowed) return false;
 
 		// Remove the hidden class first to ensure content is rendered
 		_.contentPanel.classList.remove('hidden');
-		
+
 		// Give the browser a moment to process before starting animation
 		requestAnimationFrame(() => {
 			// Update ARIA states
@@ -179,10 +188,10 @@ class DialogPanel extends HTMLElement {
 			if (_.triggerEl) {
 				_.triggerEl.setAttribute('aria-expanded', 'true');
 			}
-	
+
 			// Lock body scrolling and save scroll position
 			_.#lockScroll();
-	
+
 			// Focus management
 			const firstFocusable = _.querySelector(
 				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
@@ -192,14 +201,16 @@ class DialogPanel extends HTMLElement {
 					firstFocusable.focus();
 				});
 			}
-			
+
 			// Dispatch show event - dialog is now visible
-			_.dispatchEvent(new CustomEvent('show', {
-				bubbles: true,
-				detail: { triggerElement: _.triggerEl }
-			}));
+			_.dispatchEvent(
+				new CustomEvent('show', {
+					bubbles: true,
+					detail: { triggerElement: _.triggerEl },
+				})
+			);
 		});
-		
+
 		return true;
 	}
 
@@ -212,19 +223,19 @@ class DialogPanel extends HTMLElement {
 	 */
 	hide() {
 		const _ = this;
-		
+
 		// Dispatch beforeHide event - allows preventing the dialog from closing
 		const beforeHideEvent = new CustomEvent('beforeHide', {
 			bubbles: true,
 			cancelable: true,
-			detail: { triggerElement: _.triggerEl }
+			detail: { triggerElement: _.triggerEl },
 		});
-		
+
 		const hideAllowed = _.dispatchEvent(beforeHideEvent);
-		
+
 		// If event was canceled (preventDefault was called), don't hide the dialog
 		if (!hideAllowed) return false;
-		
+
 		// Restore body scroll and scroll position
 		_.#restoreScroll();
 
@@ -239,13 +250,15 @@ class DialogPanel extends HTMLElement {
 		// Set aria-hidden to start transition
 		// The transitionend event handler will add display:none when complete
 		_.setAttribute('aria-hidden', 'true');
-		
+
 		// Dispatch hide event - dialog is now starting to hide
-		_.dispatchEvent(new CustomEvent('hide', {
-			bubbles: true,
-			detail: { triggerElement: _.triggerEl }
-		}));
-		
+		_.dispatchEvent(
+			new CustomEvent('hide', {
+				bubbles: true,
+				detail: { triggerElement: _.triggerEl },
+			})
+		);
+
 		return true;
 	}
 }
@@ -281,9 +294,15 @@ class DialogContent extends HTMLElement {
 	}
 }
 
-customElements.define('dialog-panel', DialogPanel);
-customElements.define('dialog-overlay', DialogOverlay);
-customElements.define('dialog-content', DialogContent);
+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 default DialogPanel;

package/src/index.scss

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

package/src/scss/dialog-panel.scss

@@ -2,72 +2,72 @@
 @use 'variables' as vars;
 
 dialog-panel {
-  /* Make it take no space and be invisible in the document flow */
-  display: contents;
+	/* 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);
-    }
-  }
+	&[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%)
-  );
+	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);
+	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 shown, reset transform to center */
+	dialog-panel[aria-hidden='false'] & {
+		transform: translate(-50%, -50%) scale(1);
+	}
 
-  /* When explicitly hidden, remove from layout */
-  &.hidden {
-    display: none;
-  }
+	/* When explicitly hidden, remove from layout */
+	&.hidden {
+		display: none;
+	}
 }

package/src/scss/variables.scss

@@ -28,27 +28,27 @@ $transition-timing: ease-out !default;
 
 // Define CSS Custom Properties using SCSS values
 :root {
-  // Layout
-  --dp-panel-top: #{$panel-top};
-  --dp-panel-left: #{$panel-left};
-  --dp-panel-width: #{$panel-width};
-  --dp-panel-height: #{$panel-height};
-  --dp-panel-z-index: #{$panel-z-index};
-
-  // Overlay
-  --dp-overlay-z-index: #{$overlay-z-index};
-  --dp-overlay-background: #{$overlay-background};
-  --dp-overlay-backdrop-filter: #{$overlay-backdrop-filter};
-  --dp-overlay-transition: #{$overlay-transition};
-
-  // Content
-  --dp-content-display: #{$content-display};
-  --dp-content-background: #{$content-background};
-  --dp-content-z-index: #{$content-z-index};
-  --dp-content-shadow: #{$content-shadow};
-  --dp-content-border-radius: #{$content-border-radius};
-
-  // Animation
-  --dp-transition-duration: #{$transition-duration};
-  --dp-transition-timing: #{$transition-timing};
+	// Layout
+	--dp-panel-top: #{$panel-top};
+	--dp-panel-left: #{$panel-left};
+	--dp-panel-width: #{$panel-width};
+	--dp-panel-height: #{$panel-height};
+	--dp-panel-z-index: #{$panel-z-index};
+
+	// Overlay
+	--dp-overlay-z-index: #{$overlay-z-index};
+	--dp-overlay-background: #{$overlay-background};
+	--dp-overlay-backdrop-filter: #{$overlay-backdrop-filter};
+	--dp-overlay-transition: #{$overlay-transition};
+
+	// Content
+	--dp-content-display: #{$content-display};
+	--dp-content-background: #{$content-background};
+	--dp-content-z-index: #{$content-z-index};
+	--dp-content-shadow: #{$content-shadow};
+	--dp-content-border-radius: #{$content-border-radius};
+
+	// Animation
+	--dp-transition-duration: #{$transition-duration};
+	--dp-transition-timing: #{$transition-timing};
 }