1.1.0

package.json

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

src/lib/Combobox.svelte

@@ -41,7 +41,8 @@
 	import Label from './Label.svelte';
 	import StyledRawInput from './StyledRawInput.svelte';
 	import { InputValidatorEvent, validate, type ValidatorOptions } from '@svelte-toolkit/validate';
-	import { untrack, type Snippet } from 'svelte';
+	import { onMount, tick, untrack, type Snippet } from 'svelte';
+	import { Portal } from '@jsrob/svelte-portal';
 	import { scale } from 'svelte/transition';
 	import { generateIdentifier, type IconDef } from './util';
 	import type { ClassValue, MouseEventHandler } from 'svelte/elements';
@@ -246,6 +247,7 @@
 				highlighted = value; // reset highlighted item to current value
 			}
 
+			console.log('combobox open', isOpen);
 			onopenchange?.(isOpen);
 		}
 	});
@@ -501,7 +503,8 @@
 <svelte:window onclick={handleWindowClick} />
 
 <!-- Combobox picker -->
-{#if open}
+<Portal target="body">
+	{#if open}
 		<!-- Picker container -->
 		<div
 			class={[
@@ -546,7 +549,8 @@
 				{/if}
 			{/each}
 		</div>
-{/if}
+	{/if}
+</Portal>
 
 <!-- Combobox main input container -->
 <div class={classValue}>

src/lib/Dialog.svelte

@@ -5,8 +5,6 @@
 	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 */
@@ -41,16 +39,6 @@
 		 * 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 = {
@@ -76,9 +64,9 @@
 
 	/**
 	 * Stores internal state of the dialog, everything necessary to render
-	 * internal and override capable snippets.
+	 * internal snippets.
 	 */
-	export type DialogState = {
+	type DialogState = {
 		frozen: boolean;
 		loading: boolean;
 		disabled: boolean;
@@ -91,9 +79,6 @@
 	};
 
 	export { dialogCancelButton, dialogOkButton, dialogCloseButton };
-
-	/** stack of currently open dialogs by identifier */
-	let dialogStack: DialogAPI[] = $state([]);
 </script>
 
 <script lang="ts">
@@ -106,15 +91,15 @@
 	import { X } from 'phosphor-svelte';
 	import { ErrorMessage, type RawError } from './error';
 	import ErrorBox from './ErrorBox.svelte';
-	import { generateIdentifier, mergeOverrideObject } from './util';
+	import { mergeOverrideObject } from './util';
 
 	interface Props {
 		/** Bindable open state of the dialog */
 		open?: boolean;
 		/** Title of the dialog */
-		title: string | Snippet<[state: DialogState]>;
+		title: string | Snippet;
 		/** Description of the dialog, optionally rendered below the title */
-		description?: string | Snippet<[state: DialogState]>;
+		description?: string | Snippet;
 		/** Size of the dialog (default: 'sm') */
 		size?: 'sm' | 'md' | 'lg' | 'max';
 		/** Additional classes for the dialog */
@@ -122,29 +107,19 @@
 		/** Content of the dialog */
 		children?: Snippet;
 		/** Bottom controls for the dialog */
-		controls?: Snippet<[state: DialogState]> | DialogControls;
+		controls?: Snippet | 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 preventing user input */
+		/** If default controls are used, freezes all interactions */
 		frozen?: boolean;
-		/** If enabled, automatically freezes dialog when loading (default: true) */
-		autoFreeze?: boolean;
 		/** If default controls are used, disables submit button */
 		disabled?: boolean;
 	}
@@ -161,72 +136,34 @@
 		close = {},
 		onopen,
 		onclose,
-		onopenchange,
 		loading = $bindable(false),
 		frozen = $bindable(false),
-		autoFreeze = true,
 		disabled = $bindable(false)
 	}: Props = $props();
 
-	const controls = $derived(
+	let 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);
 
-	const reallyFrozen = $derived(autoFreeze ? frozen || loading : frozen);
+	// disable window scroll when dialog is open
-
-	/** 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 {
-			// 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)) {
+		if (open) {
-			lastOpen = open;
+			document.body.style.overflow = 'hidden';
-			untrack(() => {
+			untrack(() => onopen?.(dialogAPI));
-				handleOpenChange(open);
+		} else {
-			});
+			document.body.style.overflow = '';
+			untrack(() => onclose?.(dialogAPI));
 		}
 	});
 
 	/** 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,
@@ -240,16 +177,13 @@
 		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 */
 	export const getState = (): DialogState => {
 		return {
-			frozen: reallyFrozen,
+			frozen,
 			loading,
 			disabled,
 			api: dialogAPI
@@ -265,31 +199,23 @@
 
 {#snippet dialog()}
 	<div
-		bind:this={dialogPage}
 		class={[
-			'fixed inset-0 flex items-center-safe justify-center bg-black/50 backdrop-blur-sm',
+			'fixed inset-0 z-50 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;
-			if (open && !reallyFrozen && !dialogContainer?.contains(target) && target !== dialogContainer)
+			if (open && !frozen && !dialogContainer?.contains(target) && target !== dialogContainer)
 				open = false;
 		}}
 		onkeydown={(e) => {
-			if (e.key === 'Escape' && !reallyFrozen) {
+			if (e.key === 'Escape' && !frozen) {
-				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
@@ -309,10 +235,7 @@
 		>
 			<div class="flex items-center justify-between">
 				<!-- Dialog title -->
-				<h2
+				<h2 class="pointer-events-none mb-2 text-lg font-medium text-black select-none">
-					class="pointer-events-none mb-2 text-lg font-medium text-black select-none"
-					id="{identifier}-title"
-				>
 					{@render stringOrSnippet(title)}
 				</h2>
 
@@ -331,7 +254,7 @@
 			{/if}
 
 			{#if description}
-				<p class="mb-3 leading-normal text-zinc-600" id="{identifier}-description">
+				<p class="mb-3 leading-normal text-zinc-600">
 					{@render stringOrSnippet(description)}
 				</p>
 			{/if}
@@ -347,9 +270,7 @@
 					controlsAlign === 'end' && 'justify-end'
 				]}
 			>
-				{#if controls && typeof controls === 'function'}{@render controls(
+				{#if controls && typeof controls === 'function'}{@render controls()}{:else if controls?.flip}
-						getState()
-					)}{:else if controls?.flip}
 					{#if controls.ok !== null}
 						{@render dialogOkButton(getState(), controls.ok)}
 					{/if}
@@ -379,7 +300,7 @@
 				state.api.close();
 			}
 		}}
-		disabled={state.frozen || state.disabled}
+		disabled={state.frozen}
 	>
 		{opts?.label || 'Cancel'}
 	</Button>
@@ -424,10 +345,10 @@
 	</button>
 {/snippet}
 
-{#snippet stringOrSnippet(val: string | Snippet<[state: DialogState]>)}
+{#snippet stringOrSnippet(val: string | Snippet)}
 	{#if typeof val === 'string'}
 		{val}
 	{:else}
-		{@render val(getState())}
+		{@render val()}
 	{/if}
 {/snippet}

src/lib/Tabs.svelte

@@ -23,22 +23,12 @@
 		activeIndex?: number;
 		/** Callback fired when the active tab changes */
 		onchange?: (event: { index: number; tab: TabPage }) => void;
-		/** Applies layout padding to the tab header (default: false) */
+		/** Applies layout padding to the tab header & content areas (default: false) */
-		padHeader?: boolean;
+		padded?: boolean;
-		/** Applies layout padding to the content areas (default: false) */
-		padContent?: 'padding' | 'margin' | 'none';
-		/** Additional classes applied to the outer container */
 		class?: ClassValue | null;
 	}
 
-	let {
+	let { pages, activeIndex = 0, onchange, padded = false, class: classValue }: Props = $props();
-		pages,
-		activeIndex = 0,
-		onchange,
-		padHeader = false,
-		padContent = 'none',
-		class: classValue
-	}: Props = $props();
 
 	let primaryContainerEl: HTMLDivElement;
 	let tabContainerEl: HTMLDivElement;
@@ -109,7 +99,7 @@
 		bind:this={tabContainerEl}
 		class={[
 			'border-sui-text/15 relative mb-4 flex items-center gap-5 border-b-2',
-			padHeader && 'px-layout'
+			padded && 'px-layout'
 		]}
 	>
 		{#each pages as page, i (page.title)}
@@ -144,7 +134,7 @@
 
 	{#key activeIndex}
 		<div
-			class={[padContent === 'padding' && 'px-layout', padContent === 'margin' && 'mx-layout']}
+			class={[padded && 'px-layout']}
 			in:flyX={{ direction: activeIndex > prevIndex ? 1 : -1, duration: 180, delay: 181 }}
 			out:flyX={{ direction: activeIndex > prevIndex ? -1 : 1, duration: 180 }}
 			onoutrostart={lockHeight}

src/lib/index.ts

@@ -10,7 +10,6 @@ export {
 	default as Dialog,
 	type DialogAPI,
 	type DialogControls,
-	type DialogState,
 	dialogCancelButton,
 	dialogCloseButton,
 	dialogOkButton

src/routes/+page.svelte

@@ -35,7 +35,8 @@
 	import { createLazyComponent, type ComboboxOption, type Option } from '$lib';
 	import Tabs from '$lib/Tabs.svelte';
 	import { Time } from '@internationalized/date';
-	import { onMount } from 'svelte';
+	import { onMount, type Component } from 'svelte';
+	import ErrorBox from '$lib/ErrorBox.svelte';
 	import TextareaInput from '$lib/TextareaInput.svelte';
 	import DurationInput, { formatDuration } from '$lib/DurationInput.svelte';
 	import Banner from '$lib/Banner.svelte';
@@ -59,7 +60,6 @@
 	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,6 +537,15 @@
 	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();
@@ -545,27 +554,7 @@
 		}, 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 -->