dialog: add z-index to dialog api

src/lib/Dialog.svelte

@@ -43,6 +43,14 @@
 		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 = {
@@ -170,6 +178,7 @@
 	let dialogContainer = $state<HTMLDivElement | null>(null);
 	let error = $state<ErrorMessage | null>(null);
 	let stackIndex = $state(-1);
+	const zIndex = $derived(1000 + stackIndex * 100);
 
 	/** handles open change */
 	const handleOpenChange = (localOpen: boolean) => {
@@ -227,7 +236,9 @@
 		isFrozen: () => frozen,
 		canContinue: () => !loading && !disabled && !frozen,
 		title: (newTitle) => (title = newTitle),
-		focus: () => dialogPage?.focus()
+		focus: () => dialogPage?.focus(),
+		stackIndex: () => stackIndex,
+		zIndex: () => zIndex
 	};
 
 	/** Returns the current state of the dialog */
@@ -256,7 +267,7 @@
 			classValue
 		]}
 		style={// increase z-index and decrease opacity for each nested dialog
-		`z-index: ${1000 + stackIndex}`}
+		`z-index: ${zIndex}`}
 		transition:fade={{ duration: 150 }}
 		onclick={(e) => {
 			const target = e.target as HTMLElement;