From dba960aacb56c6e44c1240eae013769573328a26 Mon Sep 17 00:00:00 2001
From: MadKarma <100418457+madkarmaa@users.noreply.github.com>
Date: Fri, 6 Jun 2025 01:35:28 +0200
Subject: [PATCH] chore: Use HTML `<dialog>` component (#297)

---
 src/lib/components/Dialogue.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Dialogue.svelte b/src/lib/components/Dialogue.svelte
index d7c1a45..c9ed5e1 100644
--- a/src/lib/components/Dialogue.svelte
+++ b/src/lib/components/Dialogue.svelte
@@ -8,7 +8,7 @@
 	export let fullscreen = false;
 	export let notDismissible = false;
 
-	let element: HTMLDivElement;
+	let element: HTMLDialogElement;
 	let y = 0;
 
 	function parseScroll() {
@@ -28,9 +28,8 @@
 		transition:fade={{ easing: quadInOut, duration: 150 }}
 	/>
 
-	<div
+	<dialog
 		class="modal"
-		role="dialog"
 		class:fullscreen
 		class:scrolled={y > 10}
 		aria-modal="true"
@@ -69,7 +68,7 @@
 				</div>
 			{/if}
 		</div>
-	</div>
+	</dialog>
 {/if}
 
 <style>
@@ -121,6 +120,7 @@
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
+		border: none;
 		border-radius: 26px;
 		background-color: var(--surface-seven);
 		display: flex;