@placeholderco/placeholder-ui 1.0.12 → 2.1.0

package/dist/ui/Dialog.svelte

@@ -3,19 +3,37 @@
 	import { iconX } from '../icon/index.js';
 	import type { Snippet } from 'svelte';
 	import ActionIcon from './ActionIcon.svelte';
-	import { setContext } from 'svelte';
+	import { setContext, untrack } from 'svelte';
+
+	export interface DialogContext {
+		/** Whether the dialog is currently open (reactive) */
+		readonly isOpen: boolean;
+		/** Register a callback invoked each time the dialog opens */
+		onOpen: (callback: () => void) => void;
+		/** Register a callback invoked each time the dialog closes */
+		onClose: (callback: () => void) => void;
+		/** Register a callback invoked only the first time the dialog opens */
+		onFirstOpen: (callback: () => void) => void;
+	}
 
-	interface Props {
+	export interface DialogProps {
+		/** Whether the dialog is visible (bindable) */
 		show: boolean;
+		/** Allow closing by clicking backdrop or pressing Escape */
 		allowImplicitClose?: boolean;
+		/** Dialog title displayed in the header */
 		title?: string | undefined;
+		/** Render without the Paper wrapper component */
 		noPaper?: boolean;
+		/** Prevent content from overflowing the dialog bounds */
 		preventOverflow?: boolean;
+		/** Size preset for the dialog width */
 		size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+		/** Additional CSS classes */
 		class?: string;
-		/** Use space-between layout for footer (useful for left/right button groups) */
-		footerBetween?: boolean;
+		/** Footer content (typically action buttons) */
 		footer?: Snippet;
+		/** Main dialog content */
 		children?: Snippet;
 	}
 
@@ -27,153 +45,178 @@
 		preventOverflow = false,
 		size = 'md',
 		class: classes = '',
-		footerBetween = false,
 		footer,
 		children
-	}: Props = $props();
+	}: DialogProps = $props();
+
+	const uid = $props.id();
+	const titleId = `${uid}-title`;
 
 	let dialogElement: HTMLDialogElement | undefined = $state(undefined);
-	
-	// Create context for dialog events
-	let hasOpenedBefore = $state(false);
-	let dialogContext = $state({
-		isOpen: show,
-		onOpen: () => {},
-		onClose: () => {},
-		onFirstOpen: () => {}
-	});
 
-	$effect(() => {
-		dialogContext.isOpen = show;
+	// Context so child components can react to dialog state
+	const openCallbacks: (() => void)[] = [];
+	const closeCallbacks: (() => void)[] = [];
+	const firstOpenCallbacks: (() => void)[] = [];
+
+	setContext<DialogContext>('dialog', {
+		get isOpen() {
+			return show;
+		},
+		onOpen: (callback) => openCallbacks.push(callback),
+		onClose: (callback) => closeCallbacks.push(callback),
+		onFirstOpen: (callback) => firstOpenCallbacks.push(callback)
 	});
 
-	// Set context so child components can access dialog state
-	setContext('dialog', dialogContext);
+	// Plain (untracked) flags — only the `show` transition should re-run the effect
+	let wasOpen = false;
+	let hasOpenedBefore = false;
 
 	$effect(() => {
-		if (dialogElement) {
-			if (show) {
-				dialogElement.showModal();
-				dialogContext.onOpen();
+		if (!dialogElement) return;
+
+		if (show && !wasOpen) {
+			wasOpen = true;
+			dialogElement.showModal();
+			untrack(() => {
+				for (const callback of openCallbacks) callback();
 				if (!hasOpenedBefore) {
 					hasOpenedBefore = true;
-					dialogContext.onFirstOpen();
+					for (const callback of firstOpenCallbacks) callback();
 				}
-			} else {
-				dialogElement.close();
-				dialogContext.onClose();
-			}
+			});
+		} else if (!show && wasOpen) {
+			wasOpen = false;
+			dialogElement.close();
+			untrack(() => {
+				for (const callback of closeCallbacks) callback();
+			});
 		}
 	});
 
+	// Lock body scroll while open; effects only run in the browser, so this is SSR-safe
 	$effect(() => {
-		if (!body) return;
-
 		if (show) {
-			body.style.overflow = 'hidden';
-		} else {
-			body.style.overflow = '';
+			document.body.style.overflow = 'hidden';
+			return () => {
+				document.body.style.overflow = '';
+			};
 		}
 	});
 
-	const body = document.querySelector('body');
+	function onCancel(e: Event) {
+		// Escape closes the native dialog before `close` fires; block it here,
+		// otherwise the dialog closes while `show` stays true
+		if (!allowImplicitClose) e.preventDefault();
+	}
+
+	function onNativeClose() {
+		// The dialog has already closed natively (Escape, form method="dialog");
+		// sync `show` unconditionally so it can be reopened
+		show = false;
+	}
 
-	function onClose() {
+	function onBackdropMousedown() {
 		if (allowImplicitClose) show = false;
 	}
 
-	function cancel(e: Event) {
-		e.stopImmediatePropagation();
+	function stopMousedown(e: Event) {
+		// Keep mousedowns inside the dialog from reaching the backdrop handler
+		e.stopPropagation();
 	}
 </script>
 
 {#snippet DialogInner()}
 	{#if title}
 		<div class="dialog-title">
-			<span class="font-bold">{title}</span>
+			<span id={titleId} class="font-bold">{title}</span>
 			{#if allowImplicitClose}
 				<ActionIcon
-					onclick={onClose}
+					onclick={() => (show = false)}
 					variant="secondary-subtle"
 					class="flex !p-[0.3rem] mr-1 !leading-0"
 					svg={iconX}
 					size="1rem"
+					ariaLabel="Close dialog"
 				/>
 			{/if}
 		</div>
 	{/if}
-	<div
-		class="dialog-body
-			{preventOverflow ? 'overflow-y-auto' : 'overflow-visible'} 
-			{!footer && 'no-footer'}"
-	>
+	<div class="dialog-body {preventOverflow ? 'overflow-y-auto' : 'overflow-visible'}">
 		{@render children?.()}
 	</div>
 	{#if footer}
-		<div class="dialog-footer" class:footer-between={footerBetween}>
+		<div class="dialog-footer">
 			{@render footer?.()}
 		</div>
 	{/if}
 {/snippet}
 
-{#if noPaper}
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<dialog
-		bind:this={dialogElement}
-		onclose={onClose}
-		onmousedown={onClose}
-		class={`dialog ${size}`}
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<dialog
+	bind:this={dialogElement}
+	oncancel={onCancel}
+	onclose={onNativeClose}
+	onmousedown={onBackdropMousedown}
+	class={`dialog ${size}`}
+	aria-labelledby={title ? titleId : undefined}
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="dialog-inner {noPaper ? `${classes} dialog-no-paper` : ''}"
+		onmousedown={stopMousedown}
 	>
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			class="dialog-inner {classes} dialog-no-paper"
-			onclick={cancel}
-			onmousedown={cancel}
-			onmouseup={cancel}
-		>
+		{#if noPaper}
 			{@render DialogInner()}
-		</div>
-	</dialog>
-{:else}
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<dialog
-		bind:this={dialogElement}
-		onclose={onClose}
-		onmousedown={onClose}
-		class={`dialog ${size}`}
-	>
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="dialog-inner" onclick={cancel} onmousedown={cancel} onmouseup={cancel}>
-			<div class="dialog-paper {preventOverflow ? 'overflow-y-auto' : 'overflow-visible'} ">
+		{:else}
+			<div class="dialog-paper {preventOverflow ? 'overflow-y-auto' : 'overflow-visible'}">
 				<Paper containerClass={classes}>
 					{@render DialogInner()}
 				</Paper>
 			</div>
-		</div>
-	</dialog>
-{/if}
+		{/if}
+	</div>
+</dialog>
 
 <style>
+	/* Animate transform, not margin — the native dialog centers itself via
+	   `margin: auto`, and a margin animation with `forwards` fill would
+	   permanently override it and pin the dialog to the top of the viewport */
 	@keyframes fadeIn {
 		from {
 			opacity: 0;
-			transform: translateY(-1em);
+			transform: translateY(-0.5rem);
 		}
 		to {
 			opacity: 1;
-			transform: translateY(0em);
+			transform: translateY(0);
 		}
 	}
 	@keyframes fadeOut {
 		from {
 			opacity: 1;
-			transform: translateY(0em);
+			transform: translateY(0);
+		}
+		to {
+			opacity: 0;
+			transform: translateY(-0.5rem);
+		}
+	}
+
+	@keyframes fadeInFull {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	@keyframes fadeOutFull {
+		from {
+			opacity: 1;
 		}
 		to {
 			opacity: 0;
-			transform: translateY(-1em);
 		}
 	}
 
@@ -196,58 +239,79 @@
 	}
 
 	dialog {
-		color: var(--pui-text-primary);
+		color: var(--text-color);
 		border: none;
+		/* The dialog element itself is focused by showModal(); don't draw a
+		   focus ring around the whole dialog */
+		outline: none;
 		background-color: transparent;
 		overflow: visible;
 		margin: auto;
-
-		animation: fadeOut var(--pui-transition-fast) forwards;
+		max-width: min(calc(100vw - 2rem), calc(100% - 6px));
+		/* Cap to the visible viewport with equal margins; the flex chain below
+		   (dialog > inner > paper > body, each min-height: 0) passes this limit
+		   down so the body shrinks instead of spilling past the bottom edge.
+		   dvh tracks the visible viewport on iOS Safari (100vh includes the
+		   area behind the collapsible URL bar); vh is the older-browser fallback */
+		max-height: calc(100vh - 2rem);
+		max-height: calc(100dvh - 2rem);
+
+		animation: fadeOut 0.2s forwards;
 		transition:
-			display var(--pui-transition-fast) allow-discrete,
-			overlay var(--pui-transition-fast) allow-discrete;
+			display 0.2s allow-discrete,
+			overlay 0.2s allow-discrete;
 		&::backdrop {
-			animation: backdropFadeOut var(--pui-transition-fast) forwards;
+			animation: backdropFadeOut 0.2s forwards;
 		}
 		&[open] {
-			animation: fadeIn var(--pui-transition-fast) forwards;
+			/* Only when [open] — an unconditional author display would override
+			   the UA's display: none on closed dialogs and make them visible */
+			display: flex;
+			flex-direction: column;
+			animation: fadeIn 0.2s forwards;
 			&::backdrop {
-				animation: backdropFadeIn var(--pui-transition-fast) forwards;
+				animation: backdropFadeIn 0.2s forwards;
 			}
 		}
 	}
 
+	.dialog-inner {
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+
+	/* Paper sits inside the height chain; .paper-body already has an inline
+	   min-height: 0, so only .paper needs the shrink link */
+	.dialog :global(.paper) {
+		min-height: 0;
+	}
+
 	.dialog-title {
 		display: flex;
 		justify-content: space-between;
-		margin-bottom: var(--pui-spacing-2);
-		padding-bottom: var(--pui-spacing-1);
-		border-bottom: 1px solid var(--pui-border-default);
-		font-weight: var(--pui-font-weight-semibold);
+		margin-bottom: 0.5rem;
+		padding-bottom: 0.25rem;
+		border-bottom: 1px solid var(--border-color);
+		font-weight: 600;
+		flex-shrink: 0;
 	}
 
 	.dialog-body {
 		display: flex;
 		flex-direction: column;
 		min-width: 0;
+		min-height: 0;
 		flex-shrink: 1;
-		max-height: calc(100vh - 167px);
-	}
-
-	.dialog-body.no-footer {
-		max-height: calc(100vh - 107px);
 	}
 
 	.dialog-footer {
 		display: flex;
-		justify-content: flex-end;
-		padding: var(--pui-spacing-2) 0;
-		border-top: 1px solid var(--pui-border-default);
-		gap: var(--pui-spacing-2);
-	}
-
-	.dialog-footer.footer-between {
 		justify-content: space-between;
+		padding-top: 0.5rem;
+		border-top: 1px solid var(--border-color);
+		gap: 0.5rem;
+		flex-shrink: 0;
 	}
 
 	.overflow-visible {
@@ -259,7 +323,7 @@
 	}
 
 	.dialog-no-paper {
-		padding: var(--pui-spacing-4);
+		padding: 1rem;
 	}
 
 	.dialog-paper,
@@ -267,17 +331,18 @@
 		display: flex;
 		flex-direction: column;
 		box-sizing: border-box;
-		border-radius: var(--pui-radius-base);
-		background: var(--pui-color-gray-100);
+		border-radius: 0.25rem;
+		background: #f1f3f5;
+		min-height: 0;
 	}
 
 	:global(.dark .dialog-paper),
 	:global(.dark .dialog-no-paper) {
-		background-color: var(--pui-color-dark-200);
+		background-color: rgb(33, 34, 38);
 	}
 
 	dialog::backdrop {
-		background-color: var(--pui-bg-overlay);
+		background-color: #0008;
 	}
 
 	.dialog.sm {
@@ -298,13 +363,20 @@
 
 	.dialog.full {
 		width: 100%;
+		max-width: 100%;
+		max-height: 100%;
 		margin-top: auto;
+		animation: fadeOutFull 0.2s forwards;
+
+		&[open] {
+			animation: fadeInFull 0.2s forwards;
+		}
 	}
 
 	.dialog.full,
 	.dialog.full .dialog-inner,
 	.dialog.full :global(.paper),
-	.dialog.full :global(.dialog-paper) {
+	.dialog.full .dialog-paper {
 		height: 100%;
 	}
 

package/dist/ui/Dialog.svelte.d.ts

@@ -1,17 +1,34 @@
 import type { Snippet } from 'svelte';
-interface Props {
+export interface DialogContext {
+    /** Whether the dialog is currently open (reactive) */
+    readonly isOpen: boolean;
+    /** Register a callback invoked each time the dialog opens */
+    onOpen: (callback: () => void) => void;
+    /** Register a callback invoked each time the dialog closes */
+    onClose: (callback: () => void) => void;
+    /** Register a callback invoked only the first time the dialog opens */
+    onFirstOpen: (callback: () => void) => void;
+}
+export interface DialogProps {
+    /** Whether the dialog is visible (bindable) */
     show: boolean;
+    /** Allow closing by clicking backdrop or pressing Escape */
     allowImplicitClose?: boolean;
+    /** Dialog title displayed in the header */
     title?: string | undefined;
+    /** Render without the Paper wrapper component */
     noPaper?: boolean;
+    /** Prevent content from overflowing the dialog bounds */
     preventOverflow?: boolean;
+    /** Size preset for the dialog width */
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Additional CSS classes */
     class?: string;
-    /** Use space-between layout for footer (useful for left/right button groups) */
-    footerBetween?: boolean;
+    /** Footer content (typically action buttons) */
     footer?: Snippet;
+    /** Main dialog content */
     children?: Snippet;
 }
-declare const Dialog: import("svelte").Component<Props, {}, "show">;
+declare const Dialog: import("svelte").Component<DialogProps, {}, "show">;
 type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;