From 0c7bf6dfd338103f7288b84c1fc5ae1c7f8b8770 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 15 Feb 2024 17:45:40 +0000
Subject: [PATCH] change dialog data-state conditions

---
 .changeset/chatty-rivers-search.md |  5 +++++
 src/lib/builders/dialog/create.ts  | 18 +++++++++---------
 2 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/chatty-rivers-search.md

diff --git a/.changeset/chatty-rivers-search.md b/.changeset/chatty-rivers-search.md
new file mode 100644
index 0000000000..5ea78b764e
--- /dev/null
+++ b/.changeset/chatty-rivers-search.md
@@ -0,0 +1,5 @@
+---
+'@melt-ui/svelte': minor
+---
+
+Dialog: change data-state conditions
diff --git a/src/lib/builders/dialog/create.ts b/src/lib/builders/dialog/create.ts
index 3b003499e7..986b31fa59 100644
--- a/src/lib/builders/dialog/create.ts
+++ b/src/lib/builders/dialog/create.ts
@@ -128,8 +128,8 @@ export function createDialog(props?: CreateDialogProps) {
 	});
 
 	const overlay = makeElement(name('overlay'), {
-		stores: [isVisible],
-		returned: ([$isVisible]) => {
+		stores: [isVisible, open],
+		returned: ([$isVisible, $open]) => {
 			return {
 				hidden: $isVisible ? undefined : true,
 				tabindex: -1,
@@ -137,7 +137,7 @@ export function createDialog(props?: CreateDialogProps) {
 					display: $isVisible ? undefined : 'none',
 				}),
 				'aria-hidden': true,
-				'data-state': $isVisible ? 'open' : 'closed',
+				'data-state': $open ? 'open' : 'closed',
 			} as const;
 		},
 		action: (node: HTMLElement) => {
@@ -163,15 +163,15 @@ export function createDialog(props?: CreateDialogProps) {
 	});
 
 	const content = makeElement(name('content'), {
-		stores: [isVisible, ids.content, ids.description, ids.title],
-		returned: ([$isVisible, $contentId, $descriptionId, $titleId]) => {
+		stores: [isVisible, ids.content, ids.description, ids.title, open],
+		returned: ([$isVisible, $contentId, $descriptionId, $titleId, $open]) => {
 			return {
 				id: $contentId,
 				role: role.get(),
 				'aria-describedby': $descriptionId,
 				'aria-labelledby': $titleId,
 				'aria-modal': $isVisible ? ('true' as const) : undefined,
-				'data-state': $isVisible ? 'open' : 'closed',
+				'data-state': $open ? 'open' : 'closed',
 				tabindex: -1,
 				hidden: $isVisible ? undefined : true,
 				style: styleToString({
@@ -295,9 +295,9 @@ export function createDialog(props?: CreateDialogProps) {
 
 	const close = makeElement(name('close'), {
 		returned: () =>
-			({
-				type: 'button',
-			} as const),
+		({
+			type: 'button',
+		} as const),
 		action: (node: HTMLElement): MeltActionReturn<DialogEvents['close']> => {
 			const unsub = executeCallbacks(
 				addMeltEventListener(node, 'click', () => {