@magic-spells/dialog-panel 1.0.1 → 1.1.1

package/README.md

@@ -54,6 +54,33 @@ Or include directly in HTML:
 </script>
 ```
 
+## Positioning
+
+By default, the panel is centered and uses a fade/scale animation. Set the
+`position` attribute to slide the panel in from an edge instead:
+
+```html
+<dialog-panel position="bottom">...</dialog-panel>
+```
+
+| Value | Animation | Typical use |
+|-------|-----------|-------------|
+| `center` (default) | Fade + scale | Standard modal |
+| `top` | Slide down from top | Predictive search, notifications |
+| `bottom` | Slide up from bottom | iOS-style action sheets |
+| `left` | Slide in from left | Mobile nav menu |
+| `right` | Slide in from right | Cart drawer, side panel |
+
+Drawer panels default to full width (top/bottom, max-height `85vh`) or full
+height (left/right, `min(24rem, 90vw)` wide). Override with your own CSS to
+customize:
+
+```css
+dialog-panel[position='right'] > dialog {
+  width: 28rem;
+}
+```
+
 ## How It Works
 
 1. Wrap a native `<dialog>` element inside `<dialog-panel>`

package/dist/dialog-panel.css

@@ -13,13 +13,11 @@ dialog-panel {
 /* Base dialog styles with transitions */
 dialog-panel > dialog {
 	border: none;
-	border-radius: 0.5rem;
 	padding: 0;
 	max-width: 32rem;
 	width: 90vw;
 	max-height: 85vh;
 	overflow: visible;
-	background: white;
 	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 
 	/* Start hidden */
@@ -115,3 +113,99 @@ dialog-panel[state='hiding'] > dialog-backdrop {
 	pointer-events: none;
 	transition: opacity 0.2s ease-in;
 }
+
+/* ============================================================
+   Position variants — drawer-style slide-in animations.
+   Self-contained: declares its own `position: fixed` and
+   explicit inset values so it doesn't rely on the UA's
+   `dialog:modal` styling or on consumer body overflow rules.
+   Default (no position attr) uses the centered fade/scale
+   animation defined above.
+   ============================================================ */
+
+/* Shared base for all four drawer positions */
+dialog-panel[position='top'] > dialog,
+dialog-panel[position='right'] > dialog,
+dialog-panel[position='bottom'] > dialog,
+dialog-panel[position='left'] > dialog {
+	position: fixed;
+	margin: 0;
+	max-width: 100%;
+	opacity: 1;
+}
+
+/* ---- Top drawer ---- */
+dialog-panel[position='top'] > dialog {
+	top: 0;
+	right: 0;
+	bottom: auto;
+	left: 0;
+	width: 100%;
+	max-height: 85vh;
+	transform: translateY(-100%);
+}
+
+dialog-panel[position='top'][state='shown'] > dialog {
+	transform: translateY(0);
+}
+
+/* ---- Bottom drawer ---- */
+dialog-panel[position='bottom'] > dialog {
+	top: auto;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	max-height: 85vh;
+	transform: translateY(100%);
+}
+
+dialog-panel[position='bottom'][state='shown'] > dialog {
+	transform: translateY(0);
+}
+
+/* ---- Left drawer ---- */
+dialog-panel[position='left'] > dialog {
+	top: 0;
+	right: auto;
+	bottom: 0;
+	left: 0;
+	width: min(24rem, 90vw);
+	height: 100dvh;
+	max-height: 100dvh;
+	transform: translateX(-100%);
+}
+
+dialog-panel[position='left'][state='shown'] > dialog {
+	transform: translateX(0);
+}
+
+/* ---- Right drawer ---- */
+dialog-panel[position='right'] > dialog {
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: auto;
+	width: min(24rem, 90vw);
+	height: 100dvh;
+	max-height: 100dvh;
+	transform: translateX(100%);
+}
+
+dialog-panel[position='right'][state='shown'] > dialog {
+	transform: translateX(0);
+}
+
+/* ============================================================
+   Page scroll lock — prevents the underlying page from
+   scrolling while any dialog-panel is open or animating.
+   Keyed on the package's own [state='*'] attributes so it
+   activates from the first frame of the opening animation
+   and stays through the closing animation, regardless of
+   when the native <dialog>'s [open] attribute is toggled.
+   ============================================================ */
+body:has(dialog-panel[state='showing']),
+body:has(dialog-panel[state='shown']),
+body:has(dialog-panel[state='hiding']) {
+	overflow: hidden;
+}

package/dist/dialog-panel.min.css

@@ -1 +1 @@
-dialog-panel{display:contents}dialog-panel>dialog{background:#fff;border:none;border-radius:.5rem;box-shadow:0 10px 25px rgba(0,0,0,.15);max-height:85vh;max-width:32rem;opacity:0;overflow:visible;padding:0;transform:scale(.95);transition:opacity .3s ease-out,transform .3s ease-out;width:90vw}dialog-panel:has(dialog-backdrop)>dialog::backdrop{background:transparent}dialog-panel:not(:has(dialog-backdrop))>dialog::backdrop{background:rgba(0,0,0,.3);opacity:0;transition:opacity .3s ease-out}dialog-backdrop{background:rgba(0,0,0,.3);height:200dvh;left:50%;opacity:0;pointer-events:none;position:fixed;top:50%;transform:translateY(-50%) translateX(-50%);transition:opacity .3s ease-out;width:200vw;z-index:9999999}dialog-panel[state=showing]>dialog{opacity:0;transform:scale(.95)}dialog-panel:not(:has(dialog-backdrop))[state=showing]>dialog::backdrop{opacity:0}dialog-panel[state=shown]>dialog{opacity:1;transform:scale(1)}dialog-panel:not(:has(dialog-backdrop))[state=shown]>dialog::backdrop{opacity:1}dialog-panel[state=hiding]>dialog{opacity:0;transform:scale(.95);transition:opacity .2s ease-in,transform .2s ease-in}dialog-panel:not(:has(dialog-backdrop))[state=hiding]>dialog::backdrop{opacity:0;transition:opacity .2s ease-in}dialog-panel[state=hidden]>dialog-backdrop,dialog-panel[state=showing]>dialog-backdrop{opacity:0;pointer-events:none}dialog-panel[state=shown]>dialog-backdrop{opacity:1;pointer-events:auto}dialog-panel[state=hiding]>dialog-backdrop{opacity:0;pointer-events:none;transition:opacity .2s ease-in}
+dialog-panel{display:contents}dialog-panel>dialog{border:none;box-shadow:0 10px 25px rgba(0,0,0,.15);max-height:85vh;max-width:32rem;opacity:0;overflow:visible;padding:0;transform:scale(.95);transition:opacity .3s ease-out,transform .3s ease-out;width:90vw}dialog-panel:has(dialog-backdrop)>dialog::backdrop{background:transparent}dialog-panel:not(:has(dialog-backdrop))>dialog::backdrop{background:rgba(0,0,0,.3);opacity:0;transition:opacity .3s ease-out}dialog-backdrop{background:rgba(0,0,0,.3);height:200dvh;left:50%;opacity:0;pointer-events:none;position:fixed;top:50%;transform:translateY(-50%) translateX(-50%);transition:opacity .3s ease-out;width:200vw;z-index:9999999}dialog-panel[state=showing]>dialog{opacity:0;transform:scale(.95)}dialog-panel:not(:has(dialog-backdrop))[state=showing]>dialog::backdrop{opacity:0}dialog-panel[state=shown]>dialog{opacity:1;transform:scale(1)}dialog-panel:not(:has(dialog-backdrop))[state=shown]>dialog::backdrop{opacity:1}dialog-panel[state=hiding]>dialog{opacity:0;transform:scale(.95);transition:opacity .2s ease-in,transform .2s ease-in}dialog-panel:not(:has(dialog-backdrop))[state=hiding]>dialog::backdrop{opacity:0;transition:opacity .2s ease-in}dialog-panel[state=hidden]>dialog-backdrop,dialog-panel[state=showing]>dialog-backdrop{opacity:0;pointer-events:none}dialog-panel[state=shown]>dialog-backdrop{opacity:1;pointer-events:auto}dialog-panel[state=hiding]>dialog-backdrop{opacity:0;pointer-events:none;transition:opacity .2s ease-in}dialog-panel[position=bottom]>dialog,dialog-panel[position=left]>dialog,dialog-panel[position=right]>dialog,dialog-panel[position=top]>dialog{margin:0;max-width:100%;opacity:1;position:fixed}dialog-panel[position=top]>dialog{bottom:auto;left:0;max-height:85vh;right:0;top:0;transform:translateY(-100%);width:100%}dialog-panel[position=top][state=shown]>dialog{transform:translateY(0)}dialog-panel[position=bottom]>dialog{bottom:0;left:0;max-height:85vh;right:0;top:auto;transform:translateY(100%);width:100%}dialog-panel[position=bottom][state=shown]>dialog{transform:translateY(0)}dialog-panel[position=left]>dialog{bottom:0;height:100dvh;left:0;max-height:100dvh;right:auto;top:0;transform:translateX(-100%);width:min(24rem,90vw)}dialog-panel[position=left][state=shown]>dialog{transform:translateX(0)}dialog-panel[position=right]>dialog{bottom:0;height:100dvh;left:auto;max-height:100dvh;right:0;top:0;transform:translateX(100%);width:min(24rem,90vw)}dialog-panel[position=right][state=shown]>dialog{transform:translateX(0)}body:has(dialog-panel[state=hiding]),body:has(dialog-panel[state=showing]),body:has(dialog-panel[state=shown]){overflow:hidden}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magic-spells/dialog-panel",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "A lightweight web component wrapper for native <dialog> elements with state-driven animations.",
   "author": "Cory Schulz",
   "license": "MIT",
@@ -37,8 +37,7 @@
     "custom-elements"
   ],
   "files": [
-    "dist/",
-    "src/"
+    "dist/"
   ],
   "scripts": {
     "build": "rollup -c",

package/src/dialog-panel.css

@@ -1,117 +0,0 @@
-/**
- * dialog-panel basic centered modal styles
- *
- * This provides a simple fade in/out animation for a centered modal dialog.
- * Developers can customize or replace these styles to match their design.
- */
-
-/* Wrapper doesn't affect layout */
-dialog-panel {
-	display: contents;
-}
-
-/* Base dialog styles with transitions */
-dialog-panel > dialog {
-	border: none;
-	border-radius: 0.5rem;
-	padding: 0;
-	max-width: 32rem;
-	width: 90vw;
-	max-height: 85vh;
-	overflow: visible;
-	background: white;
-	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-
-	/* Start hidden */
-	opacity: 0;
-	transform: scale(0.95);
-
-	/* Transition always defined on base */
-	transition:
-		opacity 0.3s ease-out,
-		transform 0.3s ease-out;
-}
-
-/* When using dialog-backdrop element, make native ::backdrop transparent
-   but keep it clickable (clicks detected via bounding rect check) */
-dialog-panel:has(dialog-backdrop) > dialog::backdrop {
-	background: transparent;
-}
-
-/* Native backdrop (when not using dialog-backdrop) */
-dialog-panel:not(:has(dialog-backdrop)) > dialog::backdrop {
-	background: rgba(0, 0, 0, 0.3);
-	opacity: 0;
-	transition: opacity 0.3s ease-out;
-}
-
-/* Custom dialog-backdrop element */
-dialog-backdrop {
-	position: fixed;
-	background: rgba(0, 0, 0, 0.3);
-	opacity: 0;
-	transition: opacity 0.3s ease-out;
-	pointer-events: none;
-	z-index: 9999999;
-	top: 50%;
-	left: 50%;
-	width: 200vw;
-	height: 200dvh;
-	transform: translateY(-50%) translateX(-50%);
-}
-
-/* Showing state - dialog is open but still at initial values
-   (this is the starting point for the fade-in animation) */
-dialog-panel[state='showing'] > dialog {
-	opacity: 0;
-	transform: scale(0.95);
-}
-
-dialog-panel:not(:has(dialog-backdrop))[state='showing']
-	> dialog::backdrop {
-	opacity: 0;
-}
-
-/* Shown state - fully visible (animates from showing → shown) */
-dialog-panel[state='shown'] > dialog {
-	opacity: 1;
-	transform: scale(1);
-}
-
-dialog-panel:not(:has(dialog-backdrop))[state='shown']
-	> dialog::backdrop {
-	opacity: 1;
-}
-
-/* Hiding state - faster exit animation */
-dialog-panel[state='hiding'] > dialog {
-	opacity: 0;
-	transform: scale(0.95);
-	transition:
-		opacity 0.2s ease-in,
-		transform 0.2s ease-in;
-}
-
-dialog-panel:not(:has(dialog-backdrop))[state='hiding']
-	> dialog::backdrop {
-	opacity: 0;
-	transition: opacity 0.2s ease-in;
-}
-
-/* dialog-backdrop state animations */
-dialog-panel[state='showing'] > dialog-backdrop,
-dialog-panel[state='hidden'] > dialog-backdrop {
-	opacity: 0;
-	pointer-events: none;
-}
-
-dialog-panel[state='shown'] > dialog-backdrop {
-	opacity: 1;
-	pointer-events: auto;
-}
-
-dialog-panel[state='hiding'] > dialog-backdrop {
-	opacity: 0;
-	pointer-events: none;
-	transition: opacity 0.2s ease-in;
-}

package/src/dialog-panel.js

@@ -1,363 +0,0 @@
-import './dialog-panel.css';
-
-/**
- * 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 {
-	// 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;
-
-		// Find inner dialog element
-		_.#dialog = _.querySelector('dialog');
-
-		if (!_.#dialog) {
-			console.warn(
-				'DialogPanel: No <dialog> element found inside <dialog-panel>'
-			);
-			return;
-		}
-
-		// Auto-create dialog-backdrop if not present
-		if (!_.querySelector('dialog-backdrop')) {
-			const backdrop = document.createElement('dialog-backdrop');
-			_.insertBefore(backdrop, _.firstChild);
-		}
-
-		// Set initial state attribute
-		_.#setState('hidden');
-
-		// Bind event handlers
-		_.#bindEvents();
-	}
-
-	disconnectedCallback() {
-		const _ = this;
-
-		// Cancel pending animations
-		if (_.#pendingRAF) {
-			cancelAnimationFrame(_.#pendingRAF);
-			_.#pendingRAF = null;
-		}
-		if (_.#pendingTimeout) {
-			clearTimeout(_.#pendingTimeout);
-			_.#pendingTimeout = null;
-		}
-
-		// Clean up event listeners
-		if (_.#handlers.click) {
-			_.removeEventListener('click', _.#handlers.click);
-		}
-		if (_.#dialog) {
-			if (_.#handlers.dialogClick) {
-				_.#dialog.removeEventListener(
-					'click',
-					_.#handlers.dialogClick
-				);
-			}
-			if (_.#handlers.cancel) {
-				_.#dialog.removeEventListener('cancel', _.#handlers.cancel);
-			}
-		}
-	}
-
-	/**
-	 * Bind event listeners for close buttons, backdrop, and escape key
-	 * @private
-	 */
-	#bindEvents() {
-		const _ = this;
-
-		// 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);
-
-		// Handle escape key - intercept native cancel and animate close
-		_.#handlers.cancel = (e) => {
-			e.preventDefault();
-			e.stopPropagation();
-			_.hide();
-		};
-		_.#dialog.addEventListener('cancel', _.#handlers.cancel);
-	}
-
-	/**
-	 * 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;
-
-		// Check if already showing/shown
-		if (_.#state === 'showing' || _.#state === 'shown') return true;
-
-		// If currently hiding, ignore (let hide complete first)
-		if (_.#state === 'hiding') return false;
-
-		// Store trigger element for focus return later
-		_.#triggerElement = triggerEl || null;
-
-		// Fire beforeShow (cancelable)
-		if (!_.#emit('beforeShow', { cancelable: true })) return false;
-
-		// Set state to 'showing' and open native dialog
-		_.#setState('showing');
-		_.#dialog.showModal();
-
-		// Double RAF ensures browser has painted the 'showing' state
-		// before we transition to 'shown'
-		_.#pendingRAF = requestAnimationFrame(() => {
-			_.#pendingRAF = requestAnimationFrame(() => {
-				_.#pendingRAF = null;
-				_.#setState('shown');
-
-				// Wait for transition to complete before firing 'shown' event
-				_.#waitForTransition(() => {
-					_.#emit('shown');
-				});
-			});
-		});
-
-		return true;
-	}
-
-	/**
-	 * 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(triggerEl = null) {
-		const _ = this;
-
-		// Check if already hiding/hidden
-		if (_.#state === 'hiding' || _.#state === 'hidden') return true;
-
-		// If currently showing, ignore (let show complete first)
-		if (_.#state === 'showing') return false;
-
-		// Capture result from trigger element
-		_.#result = triggerEl?.dataset?.result ?? null;
-
-		// Fire beforeHide (cancelable)
-		if (
-			!_.#emit('beforeHide', {
-				cancelable: true,
-				result: _.#result,
-				triggerElement: triggerEl,
-			})
-		) {
-			return false;
-		}
-
-		// Set state to 'hiding' - this triggers CSS exit animation
-		_.#setState('hiding');
-
-		// Wait for transition to complete
-		_.#waitForTransition(() => {
-			_.#dialog.close();
-			_.#setState('hidden');
-			_.#emit('hidden', {
-				result: _.#result,
-				triggerElement: triggerEl,
-			});
-
-			// Return focus to trigger element
-			if (_.#triggerElement) _.#triggerElement.focus();
-
-			// Clean up
-			_.#triggerElement = null;
-			_.#result = null;
-		});
-
-		return true;
-	}
-
-	/**
-	 * 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
-		);
-	}
-
-	/**
-	 * 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;
-	}
-}
-
-/**
- * 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 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);
-}
-
-export { DialogPanel, DialogBackdrop };