@magic-spells/dialog-panel 0.2.2 → 0.3.0

package/src/dialog-panel.js

@@ -7,7 +7,6 @@ import '@magic-spells/focus-trap';
  */
 class DialogPanel extends HTMLElement {
 	#handleTransitionEnd;
-	#scrollPosition = 0;
 
 	/**
 	 * Clean up event listeners when component is removed from DOM
@@ -20,38 +19,6 @@ class DialogPanel extends HTMLElement {
 				_.#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
-	 */
-	#lockScroll() {
-		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
-	 */
-	#restoreScroll() {
-		const _ = this;
-		// Remove fixed positioning
-		document.body.classList.remove('overflow-hidden');
-		document.body.style.removeProperty('top');
-
-		// Restore scroll position
-		window.scrollTo(0, _.#scrollPosition);
 	}
 	/**
 	 * Initializes the dialog panel, sets up focus trap and overlay
@@ -65,7 +32,6 @@ class DialogPanel extends HTMLElement {
 		_.setAttribute('aria-hidden', 'true');
 
 		_.contentPanel = _.querySelector('dialog-content');
-		_.focusTrap = document.createElement('focus-trap');
 		_.triggerEl = null;
 
 		// Create a handler for transition end events
@@ -86,6 +52,22 @@ class DialogPanel extends HTMLElement {
 			}
 		};
 
+		// 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');
+
+			// Move all existing dialog-content children into focus-trap
+			const existingContent = Array.from(_.contentPanel.childNodes);
+			existingContent.forEach((child) =>
+				_.focusTrap.appendChild(child)
+			);
+
+			// Insert focus-trap inside dialog-content
+			_.contentPanel.appendChild(_.focusTrap);
+		}
+
 		// Ensure we have labelledby and describedby references
 		if (!_.getAttribute('aria-labelledby')) {
 			const heading = _.querySelector('h1, h2, h3');
@@ -97,14 +79,6 @@ class DialogPanel extends HTMLElement {
 			}
 		}
 
-		_.contentPanel.parentNode.insertBefore(
-			_.focusTrap,
-			_.contentPanel
-		);
-		_.focusTrap.appendChild(_.contentPanel);
-
-		_.focusTrap.setupTrap();
-
 		// Add modal overlay
 		_.prepend(document.createElement('dialog-overlay'));
 		_.#bindUI();
@@ -132,7 +106,7 @@ class DialogPanel extends HTMLElement {
 
 		// Handle close buttons
 		_.addEventListener('click', (e) => {
-			if (!e.target.closest('[data-action="hide-dialog"]')) return;
+			if (!e.target.closest('[data-action-hide-dialog]')) return;
 			_.hide();
 		});
 
@@ -178,6 +152,9 @@ class DialogPanel extends HTMLElement {
 		// If event was canceled (preventDefault was called), don't show the dialog
 		if (!showAllowed) return false;
 
+		// Add open attribute for CSS :has() selector
+		_.setAttribute('open', '');
+
 		// Remove the hidden class first to ensure content is rendered
 		_.contentPanel.classList.remove('hidden');
 
@@ -185,13 +162,12 @@ class DialogPanel extends HTMLElement {
 		requestAnimationFrame(() => {
 			// Update ARIA states
 			_.setAttribute('aria-hidden', 'false');
+
+			// set trigger element to expanded: true
 			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"])'
@@ -210,8 +186,6 @@ class DialogPanel extends HTMLElement {
 				})
 			);
 		});
-
-		return true;
 	}
 
 	/**
@@ -236,20 +210,30 @@ class DialogPanel extends HTMLElement {
 		// If event was canceled (preventDefault was called), don't hide the dialog
 		if (!hideAllowed) return false;
 
-		// Restore body scroll and scroll position
-		_.#restoreScroll();
+		// 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();
+		}
 
-		// Update ARIA states
+		// 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 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
+
+		_.removeAttribute('open');
 
 		// Dispatch hide event - dialog is now starting to hide
 		_.dispatchEvent(
@@ -270,8 +254,7 @@ class DialogPanel extends HTMLElement {
 class DialogOverlay extends HTMLElement {
 	constructor() {
 		super();
-		this.setAttribute('tabindex', '-1'); // Changed to -1 as it shouldn't be focusable
-		this.setAttribute('aria-hidden', 'true');
+		this.setAttribute('tabindex', '-1');
 		this.dialogPanel = this.closest('dialog-panel');
 		this.#bindUI();
 	}
@@ -290,7 +273,7 @@ class DialogOverlay extends HTMLElement {
 class DialogContent extends HTMLElement {
 	constructor() {
 		super();
-		this.setAttribute('role', 'document'); // Optional: helps with document structure
+		this.setAttribute('role', 'document');
 	}
 }
 

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,77 @@
 @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 */
+dialog-content.hidden {
+	display: none;
+}
 
-  /* When explicitly hidden, remove from layout */
-  &.hidden {
-    display: none;
-  }
+// Body scroll lock when dialog is open using :has() selector
+body:has(dialog-panel[open]) {
+	overflow: hidden;
 }

package/src/scss/variables.scss

@@ -2,13 +2,6 @@
 // SCSS variables for internal component use and customization
 // These variables can be customized by the user
 
-// Layout
-$panel-top: 0 !default;
-$panel-left: 0 !default;
-$panel-width: 100vw !default;
-$panel-height: 100vh !default;
-$panel-z-index: 10 !default;
-
 // Overlay
 $overlay-z-index: 1000 !default;
 $overlay-background: rgba(20, 23, 26, 0.4) !default;
@@ -28,27 +21,20 @@ $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};
+	// 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};
 }