dialog: pass state to snippet overrides

1.1.2
combobox: don't use portal for picker
2026-03-15 12:58:28 -07:00 · 2026-03-13 16:27:42 -07:00 · 2026-03-13 16:27:35 -07:00 · 2026-03-13 16:27:13 -07:00 · 2026-03-12 23:15:52 -07:00 · 2026-03-12 23:15:08 -07:00
4 changed files with 165 additions and 83 deletions
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
 		"type": "git",
 		"url": "https://gitea.auvem.com/svelte-toolkit/sui.git"
 	},
-	"version": "1.1.0",
+	"version": "1.1.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",
--- a/src/lib/Combobox.svelte
+++ b/src/lib/Combobox.svelte
@@ -41,8 +41,7 @@
 	import Label from './Label.svelte';
 	import StyledRawInput from './StyledRawInput.svelte';
 	import { InputValidatorEvent, validate, type ValidatorOptions } from '@svelte-toolkit/validate';
-	import { onMount, tick, untrack, type Snippet } from 'svelte';
-	import { Portal } from '@jsrob/svelte-portal';
+	import { untrack, type Snippet } from 'svelte';
 	import { scale } from 'svelte/transition';
 	import { generateIdentifier, type IconDef } from './util';
 	import type { ClassValue, MouseEventHandler } from 'svelte/elements';
@@ -502,54 +501,52 @@
 <svelte:window onclick={handleWindowClick} />

 <!-- Combobox picker -->
-<Portal target="body">
-	{#if open}
-		<!-- Picker container -->
-		<div
-			class={[
-				'picker absolute top-0 left-0 z-50 overflow-y-auto px-2 py-3',
-				'rounded-sm border shadow-lg shadow-black/25 outline-hidden',
-				'border-sui-accent dark:border-sui-accent/50 dark:bg-sui-text-800 bg-white dark:sm:bg-slate-800',
-				'text-sui-text dark:text-sui-background',
-				open && pickerPosition === 'top' && 'mb-[var(--outer-gap)]',
-				open && pickerPosition === 'bottom' && 'mt-[var(--outer-gap)]'
-			]}
-			bind:this={pickerContainer}
-			transition:scale={{ duration: 200 }}
-			role="listbox"
-			onkeydown={(e) => {
-				if (e.key === 'Escape') {
-					popover.setOpen(false);
-					searchInput?.focus();
-				}
-			}}
-			onscroll={(e) => {
-				if (!onscroll) return;
-				const target = e.target as HTMLDivElement;
-				if (!target) return;
+{#if open}
+	<!-- Picker container -->
+	<div
+		class={[
+			'picker absolute top-0 left-0 z-50 overflow-y-auto px-2 py-3',
+			'rounded-sm border shadow-lg shadow-black/25 outline-hidden',
+			'border-sui-accent dark:border-sui-accent/50 dark:bg-sui-text-800 bg-white dark:sm:bg-slate-800',
+			'text-sui-text dark:text-sui-background',
+			open && pickerPosition === 'top' && 'mb-[var(--outer-gap)]',
+			open && pickerPosition === 'bottom' && 'mt-[var(--outer-gap)]'
+		]}
+		bind:this={pickerContainer}
+		transition:scale={{ duration: 200 }}
+		role="listbox"
+		onkeydown={(e) => {
+			if (e.key === 'Escape') {
+				popover.setOpen(false);
+				searchInput?.focus();
+			}
+		}}
+		onscroll={(e) => {
+			if (!onscroll) return;
+			const target = e.target as HTMLDivElement;
+			if (!target) return;

-				const margin = 10; // 10px margin for top & bottom
-				const atTop = target.scrollTop < margin;
-				const atBottom = target.scrollTop + target.clientHeight > target.scrollHeight - margin;
-				onscroll({ event: e, top: atTop, bottom: atBottom, searchInput: searchInput?.value ?? '' });
-			}}
-			tabindex="0"
-			{@attach minWidth({ options, mode: pickerWidth, matchElem: searchInput })}
-			{...popover.floating()}
-		>
-			{#each filteredItems as opt (opt.value)}
-				{@render option(opt)}
+			const margin = 10; // 10px margin for top & bottom
+			const atTop = target.scrollTop < margin;
+			const atBottom = target.scrollTop + target.clientHeight > target.scrollHeight - margin;
+			onscroll({ event: e, top: atTop, bottom: atBottom, searchInput: searchInput?.value ?? '' });
+		}}
+		tabindex="0"
+		{@attach minWidth({ options, mode: pickerWidth, matchElem: searchInput })}
+		{...popover.floating()}
+	>
+		{#each filteredItems as opt (opt.value)}
+			{@render option(opt)}
+		{:else}
+			<!-- Display loading state or not found if no options available -->
+			{#if loading}
+				{@render option(loadingOption, true)}
 			{:else}
-				<!-- Display loading state or not found if no options available -->
-				{#if loading}
-					{@render option(loadingOption, true)}
-				{:else}
-					{@render option(notFoundOption, true)}
-				{/if}
-			{/each}
-		</div>
-	{/if}
-</Portal>
+				{@render option(notFoundOption, true)}
+			{/if}
+		{/each}
+	</div>
+{/if}

 <!-- Combobox main input container -->
 <div class={classValue}>
--- a/src/lib/Dialog.svelte
+++ b/src/lib/Dialog.svelte
@@ -5,6 +5,8 @@
 	export interface DialogAPI {
 		/** shows an error message at the top of the dialog */
 		error: (message: RawError | null) => void;
+		/** Returns if the dialog is displaying an error */
+		hasError: () => boolean;
 		/** closes the dialog */
 		close: () => void;
 		/** opens the dialog */
@@ -39,6 +41,16 @@
 		 * changes made via this API will NOT propagate to consuming components.
 		 */
 		title: (title: string) => void;
+		/** Focuses the dialog */
+		focus: () => void;
+		/** Returns the stack index for this dialog */
+		stackIndex: () => number;
+		/**
+		 * Returns the z-index of this dialog, where each incremental stack
+		 * index increases the z-index by 100 starting from 1000. This can be
+		 * used to layer custom elements on top of and within the dialog.
+		 */
+		zIndex: () => number;
 	}

 	type DialogControlButton = {
@@ -79,6 +91,9 @@
 	};

 	export { dialogCancelButton, dialogOkButton, dialogCloseButton };
+
+	/** stack of currently open dialogs by identifier */
+	let dialogStack: DialogAPI[] = $state([]);
 </script>

 <script lang="ts">
@@ -91,15 +106,15 @@
 	import { X } from 'phosphor-svelte';
 	import { ErrorMessage, type RawError } from './error';
 	import ErrorBox from './ErrorBox.svelte';
-	import { mergeOverrideObject } from './util';
+	import { generateIdentifier, mergeOverrideObject } from './util';

 	interface Props {
 		/** Bindable open state of the dialog */
 		open?: boolean;
 		/** Title of the dialog */
-		title: string | Snippet;
+		title: string | Snippet<[state: DialogState]>;
 		/** Description of the dialog, optionally rendered below the title */
-		description?: string | Snippet;
+		description?: string | Snippet<[state: DialogState]>;
 		/** Size of the dialog (default: 'sm') */
 		size?: 'sm' | 'md' | 'lg' | 'max';
 		/** Additional classes for the dialog */
@@ -107,15 +122,23 @@
 		/** Content of the dialog */
 		children?: Snippet;
 		/** Bottom controls for the dialog */
-		controls?: Snippet | DialogControls;
+		controls?: Snippet<[state: DialogState]> | DialogControls;
 		/** Sets bottom alignment of controls (default: end) */
 		controlsAlign?: 'start' | 'center' | 'end';
 		/** Top-right close control */
 		close?: Snippet | Omit<DialogControlButton, 'label'> | null;
-		/** Callback when the dialog is opened */
+		/**
+		 * Callback when the dialog is opened
+		 * @deprecated use onopenchange instead and check the open parameter
+		 */
 		onopen?: (dialog: DialogAPI) => void;
-		/** Callback when the dialog is closed */
+		/**
+		 * Callback when the dialog is closed
+		 * @deprecated use onopenchange instead and check the open parameter
+		 */
 		onclose?: (dialog: DialogAPI) => void;
+		/** Callback when the dialog open state changes */
+		onopenchange?: ({ open, dialog }: { open: boolean; dialog: DialogAPI }) => void;
 		/** If default controls are used, controls loading state of submit button */
 		loading?: boolean;
 		/** If default controls are used, freezes all interactions */
@@ -136,34 +159,69 @@
 		close = {},
 		onopen,
 		onclose,
+		onopenchange,
 		loading = $bindable(false),
 		frozen = $bindable(false),
 		disabled = $bindable(false)
 	}: Props = $props();

-	let controls = $derived(
+	const controls = $derived(
 		typeof rawControls === 'function'
 			? rawControls
 			: mergeOverrideObject(defaultDialogControls, rawControls)
 	);

+	const identifier = generateIdentifier('dialog');
+
+	let lastOpen = $state(open);
+	let dialogPage = $state<HTMLDivElement | null>(null);
 	let dialogContainer = $state<HTMLDivElement | null>(null);
 	let error = $state<ErrorMessage | null>(null);
+	let stackIndex = $state(-1);
+	const zIndex = $derived(1000 + stackIndex * 100);

-	// disable window scroll when dialog is open
-	$effect(() => {
-		if (open) {
-			document.body.style.overflow = 'hidden';
-			untrack(() => onopen?.(dialogAPI));
+	/** handles open change */
+	const handleOpenChange = (localOpen: boolean) => {
+		if (localOpen) {
+			document.body.style.overflow = 'hidden'; // prevent scrolling
+			// focus the dialog BEFORE callbacks for accessibility & flexibility
+			dialogPage?.focus();
+			// run callbacks
+			onopen?.(dialogAPI);
+			onopenchange?.({ open: true, dialog: dialogAPI });
+			//update stack
+			dialogStack.push(dialogAPI); // add to stack of open dialogs
+			stackIndex = dialogStack.length - 1; // track index in stack for this dialog
 		} else {
-			document.body.style.overflow = '';
-			untrack(() => onclose?.(dialogAPI));
+			// update stack
+			dialogStack.pop(); // remove from stack of open dialogs
+			stackIndex = -1; // reset stack index for this dialog
+			// update focus & handle scroll locking for accessibility
+			if (dialogStack.length > 0) {
+				dialogStack[dialogStack.length - 1].focus();
+			} else {
+				document.body.style.overflow = ''; // re-enable scrolling since no dialogs are open
+			}
+			// run callbacks
+			onclose?.(dialogAPI);
+			onopenchange?.({ open: false, dialog: dialogAPI });
+		}
+	};
+
+	// deduplicate open changes
+	$effect(() => {
+		if (open !== untrack(() => lastOpen)) {
+			lastOpen = open;
+			untrack(() => {
+				handleOpenChange(open);
+			});
 		}
 	});

 	/** DialogAPI instance to control this dialog */
 	export const dialogAPI: DialogAPI = {
 		error: (message) => (error = ErrorMessage.from(message)),
+		hasError: () => error !== null,
 		close: () => (open = false),
 		open: () => (open = true),
 		isOpen: () => open,
@@ -177,7 +235,10 @@
 		unfreeze: () => (frozen = false),
 		isFrozen: () => frozen,
 		canContinue: () => !loading && !disabled && !frozen,
-		title: (newTitle) => (title = newTitle)
+		title: (newTitle) => (title = newTitle),
+		focus: () => dialogPage?.focus(),
+		stackIndex: () => stackIndex,
+		zIndex: () => zIndex
 	};

 	/** Returns the current state of the dialog */
@@ -199,11 +260,14 @@

 {#snippet dialog()}
 	<div
+		bind:this={dialogPage}
 		class={[
-			'fixed inset-0 z-50 flex items-center-safe justify-center bg-black/50 backdrop-blur-sm',
+			'fixed inset-0 flex items-center-safe justify-center bg-black/50 backdrop-blur-sm',
 			'overflow-auto p-8',
 			classValue
 		]}
+		style={// increase z-index and decrease opacity for each nested dialog
+		`z-index: ${zIndex}`}
 		transition:fade={{ duration: 150 }}
 		onclick={(e) => {
 			const target = e.target as HTMLElement;
@@ -212,10 +276,15 @@
 		}}
 		onkeydown={(e) => {
 			if (e.key === 'Escape' && !frozen) {
-				open = false;
+				if (stackIndex === dialogStack.length - 1) {
+					// only close if this dialog is the topmost dialog
+					open = false;
+				}
 			}
 		}}
 		role="dialog"
+		aria-labelledby="{identifier}-title"
+		aria-describedby="{identifier}-description"
 		tabindex="-1"
 	>
 		<div
@@ -235,7 +304,10 @@
 		>
 			<div class="flex items-center justify-between">
 				<!-- Dialog title -->
-				<h2 class="pointer-events-none mb-2 text-lg font-medium text-black select-none">
+				<h2
+					class="pointer-events-none mb-2 text-lg font-medium text-black select-none"
+					id="{identifier}-title"
+				>
 					{@render stringOrSnippet(title)}
 				</h2>

@@ -254,7 +326,7 @@
 			{/if}

 			{#if description}
-				<p class="mb-3 leading-normal text-zinc-600">
+				<p class="mb-3 leading-normal text-zinc-600" id="{identifier}-description">
 					{@render stringOrSnippet(description)}
 				</p>
 			{/if}
@@ -270,7 +342,9 @@
 					controlsAlign === 'end' && 'justify-end'
 				]}
 			>
-				{#if controls && typeof controls === 'function'}{@render controls()}{:else if controls?.flip}
+				{#if controls && typeof controls === 'function'}{@render controls(
+						getState()
+					)}{:else if controls?.flip}
 					{#if controls.ok !== null}
 						{@render dialogOkButton(getState(), controls.ok)}
 					{/if}
@@ -345,10 +419,10 @@
 	</button>
 {/snippet}

-{#snippet stringOrSnippet(val: string | Snippet)}
+{#snippet stringOrSnippet(val: string | Snippet<[state: DialogState]>)}
 	{#if typeof val === 'string'}
 		{val}
 	{:else}
-		{@render val()}
+		{@render val(getState())}
 	{/if}
 {/snippet}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -35,8 +35,7 @@
 	import { createLazyComponent, type ComboboxOption, type Option } from '$lib';
 	import Tabs from '$lib/Tabs.svelte';
 	import { Time } from '@internationalized/date';
-	import { onMount, type Component } from 'svelte';
-	import ErrorBox from '$lib/ErrorBox.svelte';
+	import { onMount } from 'svelte';
 	import TextareaInput from '$lib/TextareaInput.svelte';
 	import DurationInput, { formatDuration } from '$lib/DurationInput.svelte';
 	import Banner from '$lib/Banner.svelte';
@@ -60,6 +59,7 @@
 	let dateInputValue = $state<CalendarDate | null>(null);
 	let checkboxValue = $state<CheckboxState>('indeterminate');
 	let dialogOpen = $state(false);
+	let nestedDialogOpen = $state(false);
 	let scrollableDialogOpen = $state(false);
 	let toggleOptions: Option[] = $state([
 		'item one',
@@ -218,7 +218,7 @@
 			label="Lazy combobox"
 			placeholder="Choose..."
 			options={lazyOptions}
-			lazy={'always'}
+			lazy="always"
 			onlazy={async () => {
 				await new Promise((resolve) => setTimeout(resolve, 2500));
 				lazyOptions = [
@@ -537,15 +537,6 @@
 	bind:open={dialogOpen}
 	title="Dialog Title"
 	size="sm"
-	controls={{
-		ok: {
-			action: (dialog) => {
-				dialog.close();
-				alert('Dialog submitted!');
-			}
-		},
-		cancel: null
-	}}
 	onopen={(dialog) => {
 		dialog.error('Example error message!');
 		dialog.loading();
@@ -554,7 +545,27 @@
 		}, 2000);
 	}}
 >
+	{#snippet controls(state)}
+		<Button onclick={() => state.api.close()}>Cancel</Button>
+		<Button
+			onclick={() => {
+				state.api.close();
+				alert('Dialog submitted!');
+			}}
+			loading={state.loading}
+		>
+			Submit
+		</Button>
+	{/snippet}
+
 	<p>This is a dialog content area.</p>
+
+	<Button onclick={() => (nestedDialogOpen = true)}>Open Nested Dialog</Button>
+</Dialog>
+
+<!-- Nested Dialog Demo -->
+<Dialog bind:open={nestedDialogOpen} title="Nested Dialog" size="sm">
+	<p>This is a nested dialog content area.</p>
 </Dialog>

 <!-- Scrollable Dialog Demo -->
Author	SHA1	Message	Date
Elijah Duffy	bb27d0c9d7	dialog: pass state to snippet overrides	2026-03-15 12:58:28 -07:00
Elijah Duffy	ade904d0c9	1.1.2	2026-03-13 16:27:42 -07:00
Elijah Duffy	50c052a3c3	combobox: don't use portal for picker fixes z-stacking issues when used within dialogs	2026-03-13 16:27:35 -07:00
Elijah Duffy	bcfd3ea740	dialog: add z-index to dialog api	2026-03-13 16:27:13 -07:00
Elijah Duffy	1844fa0096	1.1.1	2026-03-12 23:15:52 -07:00
Elijah Duffy	7c9a6398d4	dialog: support nesting/stacking & improve ergonomics - stacked/nested dialogs work properly - dialog api expanded to include `hasError` and `focus` - `onopenchange` prop added, `onopen` and `onclose` deprecated - improve accessibility with additional aria props	2026-03-12 23:15:08 -07:00