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

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 = [
@@ -555,6 +555,13 @@
 	}}
 >
 	<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 -->