From 0f3fe04e7536a00ec1ae6960df75e0fe94e79146 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Sat, 8 Feb 2025 20:59:48 -0500
Subject: [PATCH] fix story

---
 src/lib/components/Actions/Modal/Modal.stories.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Actions/Modal/Modal.stories.svelte b/src/lib/components/Actions/Modal/Modal.stories.svelte
index 0c2c5f7..13decdb 100644
--- a/src/lib/components/Actions/Modal/Modal.stories.svelte
+++ b/src/lib/components/Actions/Modal/Modal.stories.svelte
@@ -16,15 +16,18 @@
 			},
 		},
 	});
+
+	let dialog: HTMLDialogElement | undefined = $state(undefined);
 </script>
 
 {#snippet template({ children: _, ...props }: Partial<ComponentProps<typeof Modal>>)}
-	<Modal {...props}>
+	<Button onclick={() => dialog?.showModal()}>Open</Button>
+	<Modal {...props} backdrop bind:dialog>
 		<ModalBody>
 			<h3 class="text-lg font-bold">Hello!</h3>
 			<p class="py-4">Press ESC key or click the button below to close</p>
 			<ModalActions>
-				<Button>Close</Button>
+				<Button onclick={() => dialog?.close()}>Close</Button>
 			</ModalActions>
 		</ModalBody>
 	</Modal>