dialog: add dialog api & detailed controls config, fix outer click

src/routes/+page.svelte

@@ -29,7 +29,7 @@
 		TextStrikethrough,
 		TextUnderline
 	} from 'phosphor-svelte';
-	import type { ComboboxOption, Option } from '$lib';
+	import { ErrorMessage, type ComboboxOption, type Option } from '$lib';
 	import Tabs from '$lib/Tabs.svelte';
 
 	const comboboxOptions = [
@@ -408,9 +408,20 @@
 	bind:open={dialogOpen}
 	title="Dialog Title"
 	size="sm"
-	onsubmit={() => {
-		dialogOpen = false;
-		alert('Dialog submitted!');
+	controls={{
+		ok: {
+			action: (dialog) => {
+				dialog.close();
+				alert('Dialog submitted!');
+			}
+		}
+	}}
+	onopen={(dialog) => {
+		dialog.error(ErrorMessage.from('Example error message!'));
+		dialog.loading();
+		setTimeout(() => {
+			dialog.loaded();
+		}, 2000);
 	}}
 >
 	<p>This is a dialog content area.</p>