1.1.3

fixes z-stacking issues when used within dialogs

package.json

@@ -4,7 +4,7 @@
 		"type": "git",
 		"url": "https://gitea.auvem.com/svelte-toolkit/sui.git"
 	},
-	"version": "1.1.1",
+	"version": "1.1.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",

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,8 +501,7 @@
 <svelte:window onclick={handleWindowClick} />
 
 <!-- Combobox picker -->
-<Portal target="body">
-	{#if open}
+{#if open}
 	<!-- Picker container -->
 	<div
 		class={[
@@ -548,8 +546,7 @@
 			{/if}
 		{/each}
 	</div>
-	{/if}
-</Portal>
+{/if}
 
 <!-- Combobox main input container -->
 <div class={classValue}>

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 = {
@@ -104,9 +112,9 @@
 		/** 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 */
@@ -114,7 +122,7 @@
 		/** 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 */
@@ -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;
@@ -331,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}
@@ -406,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}

src/routes/+page.svelte

@@ -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,6 +545,19 @@
 		}, 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>