@magic-spells/dialog-panel 0.1.0 → 0.2.2

package/dist/scss/dialog-panel.scss

@@ -0,0 +1,73 @@
+// 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 */
+  &.hidden {
+    display: none;
+  }
+}

package/dist/scss/variables.scss

@@ -0,0 +1,54 @@
+// Dialog Panel variables
+// 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;
+$overlay-backdrop-filter: blur(2px) saturate(120%) !default;
+$overlay-transition: all 400ms ease-out !default;
+
+// Content
+$content-display: block !default;
+$content-background: white !default;
+$content-z-index: 1001 !default;
+$content-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !default;
+$content-border-radius: 8px !default;
+
+// Animation
+$transition-duration: 400ms !default;
+$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};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magic-spells/dialog-panel",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "description": "A lightweight, customizable Dialog Panel web component for creating accessible and responsive modal dialogs.",
   "author": "Cory Schulz",
   "license": "MIT",
@@ -9,13 +9,17 @@
   "module": "dist/dialog-panel.esm.js",
   "unpkg": "dist/dialog-panel.min.js",
   "style": "dist/dialog-panel.min.css",
+  "sass": "dist/dialog-panel.scss",
   "exports": {
     ".": {
       "import": "./dist/dialog-panel.esm.js",
       "require": "./dist/dialog-panel.cjs.js",
       "default": "./dist/dialog-panel.esm.js"
     },
-    "./style.css": "./dist/dialog-panel.min.css"
+    "./css": "./dist/dialog-panel.css",
+    "./css/min": "./dist/dialog-panel.min.css",
+    "./scss": "./dist/dialog-panel.scss",
+    "./scss/*": "./dist/scss/*"
   },
   "sideEffects": true,
   "repository": {
@@ -46,7 +50,8 @@
     "lint": "eslint src/ rollup.config.mjs",
     "format": "prettier --write .",
     "prepublishOnly": "npm run build",
-    "serve": "rollup -c --watch"
+    "serve": "rollup -c --watch",
+    "dev": "rollup -c --watch"
   },
   "publishConfig": {
     "access": "public",
@@ -67,7 +72,8 @@
     "rollup": "^3.0.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-serve": "^1.1.1"
+    "rollup-plugin-serve": "^1.1.1",
+    "sass": "^1.86.3"
   },
   "dependencies": {
     "@magic-spells/focus-trap": "^1.0.6"

package/src/dialog-panel.js

@@ -1,4 +1,4 @@
-import './dialog-panel.css';
+import './index.scss';
 import '@magic-spells/focus-trap';
 
 /**
@@ -6,6 +6,53 @@ import '@magic-spells/focus-trap';
  * @extends HTMLElement
  */
 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
+			);
+		}
+
+		// 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
 	 */
@@ -21,6 +68,24 @@ class DialogPanel extends HTMLElement {
 		_.focusTrap = document.createElement('focus-trap');
 		_.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 },
+					})
+				);
+			}
+		};
+
 		// Ensure we have labelledby and describedby references
 		if (!_.getAttribute('aria-labelledby')) {
 			const heading = _.querySelector('h1, h2, h3');
@@ -51,26 +116,31 @@ class DialogPanel extends HTMLElement {
 	 * @private
 	 */
 	#bindUI() {
+		const _ = this;
+
 		// Handle trigger buttons
 		document.addEventListener('click', (e) => {
-			const trigger = e.target.closest(
-				`[aria-controls="${this.id}"]`
-			);
+			const trigger = e.target.closest(`[aria-controls="${_.id}"]`);
 			if (!trigger) return;
 
 			if (trigger.getAttribute('data-prevent-default') === 'true') {
 				e.preventDefault();
 			}
 
-			// this.triggerEl = trigger;
-			this.show(trigger);
+			_.show(trigger);
 		});
 
 		// Handle close buttons
-		this.addEventListener('click', (e) => {
+		_.addEventListener('click', (e) => {
 			if (!e.target.closest('[data-action="hide-dialog"]')) return;
-			this.hide();
+			_.hide();
 		});
+
+		// Add transition end listener
+		_.contentPanel.addEventListener(
+			'transitionend',
+			_.#handleTransitionEnd
+		);
 	}
 
 	/**
@@ -88,50 +158,108 @@ class DialogPanel extends HTMLElement {
 	/**
 	 * 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(triggerEl = null) {
-		this.triggerEl = triggerEl || false;
+		const _ = this;
+		_.triggerEl = triggerEl || false;
 
-		// Update ARIA states
-		this.setAttribute('aria-hidden', 'false');
-		if (this.triggerEl) {
-			this.triggerEl.setAttribute('aria-expanded', 'true');
-		}
+		// Dispatch beforeShow event - allows preventing the dialog from opening
+		const beforeShowEvent = new CustomEvent('beforeShow', {
+			bubbles: true,
+			cancelable: true,
+			detail: { triggerElement: _.triggerEl },
+		});
 
-		// prevent body from scrolling
-		document.body.classList.add('overflow-hidden');
+		const showAllowed = _.dispatchEvent(beforeShowEvent);
 
-		// Focus management
-		const firstFocusable = this.querySelector(
-			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-		);
-		if (firstFocusable) {
-			requestAnimationFrame(() => {
-				firstFocusable.focus();
-			});
-		}
+		// 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
+			_.setAttribute('aria-hidden', 'false');
+			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"])'
+			);
+			if (firstFocusable) {
+				requestAnimationFrame(() => {
+					firstFocusable.focus();
+				});
+			}
+
+			// 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() {
-		// allow body to scroll
-		document.body.classList.remove('overflow-hidden');
+		const _ = this;
+
+		// Dispatch beforeHide event - allows preventing the dialog from closing
+		const beforeHideEvent = new CustomEvent('beforeHide', {
+			bubbles: true,
+			cancelable: true,
+			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();
 
 		// Update ARIA states
-		if (this.triggerEl) {
-			this.triggerEl.setAttribute('aria-expanded', 'false');
-			// Restore focus to trigger element
-			this.triggerEl.focus();
-		} else {
-			console.log('we need to blur focus');
+		if (_.triggerEl) {
+			// remove focus from modal panel first
+			_.triggerEl.focus();
+			// mark trigger as no longer expanded
+			_.triggerEl.setAttribute('aria-expanded', 'false');
 		}
 
-		// hide dialog panel
-		setTimeout(() => {
-			this.setAttribute('aria-hidden', 'true');
-		}, 1);
+		// 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 },
+			})
+		);
+
+		return true;
 	}
 }
 
@@ -166,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;

package/src/index.scss

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

package/src/scss/dialog-panel.scss

@@ -0,0 +1,73 @@
+// 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 */
+  &.hidden {
+    display: none;
+  }
+}

package/src/scss/variables.scss

@@ -0,0 +1,54 @@
+// Dialog Panel variables
+// 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;
+$overlay-backdrop-filter: blur(2px) saturate(120%) !default;
+$overlay-transition: all 400ms ease-out !default;
+
+// Content
+$content-display: block !default;
+$content-background: white !default;
+$content-z-index: 1001 !default;
+$content-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !default;
+$content-border-radius: 8px !default;
+
+// Animation
+$transition-duration: 400ms !default;
+$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};
+}

package/src/dialog-panel.css

@@ -1,47 +0,0 @@
-dialog-panel {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100vw;
-	height: 100vh;
-	z-index: 10;
-	pointer-events: none;
-}
-
-/* transparent background */
-dialog-overlay {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100vw;
-	height: 100vh;
-	opacity: 0;
-	pointer-events: none;
-	transition: all 300ms ease-out;
-	background-color: rgba(20, 23, 26, 0.4);
-	backdrop-filter: blur(2px) saturate(120%);
-}
-
-dialog-content {
-	display: block;
-	opacity: 0;
-	background: white;
-}
-
-dialog-panel[aria-hidden='false'] {
-	pointer-events: all;
-}
-
-dialog-panel[aria-hidden='false'] dialog-overlay {
-	pointer-events: all;
-	opacity: 1;
-	transform: scale(1);
-	filter: blur(0px);
-}
-
-dialog-panel[aria-hidden='false'] dialog-content {
-	opacity: 1;
-	z-index: 10;
-	transform: scale(1);
-	filter: blur(0px);
-}