From 6c387940ca2e46ec8c226eb0df2d472431e325b1 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Mon, 17 Jun 2024 17:39:33 -0400
Subject: [PATCH] next: alert dialog (#578)

---
 .../components/alert-dialog-action.svelte     |  38 ----
 .../components/alert-dialog-cancel.svelte     |  52 +++--
 .../components/alert-dialog-content.svelte    | 200 ++++++++----------
 .../alert-dialog-description.svelte           |  33 ---
 .../components/alert-dialog-overlay.svelte    |  62 ------
 .../components/alert-dialog-portal.svelte     |  27 ---
 .../components/alert-dialog-title.svelte      |  35 ---
 .../components/alert-dialog-trigger.svelte    |  38 ----
 .../components/alert-dialog.svelte            |  61 ------
 .../src/lib/bits/alert-dialog/index.ts        |  19 +-
 .../src/lib/bits/alert-dialog/types.ts        | 128 +++--------
 .../src/lib/bits/dialog/dialog.svelte.ts      |  47 ++++
 packages/bits-ui/src/lib/internal/index.ts    |   2 +-
 .../components/demos/alert-dialog-demo.svelte |   9 +-
 14 files changed, 193 insertions(+), 558 deletions(-)
 delete mode 100644 packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte
 delete mode 100644 packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte
 delete mode 100644 packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte
 delete mode 100644 packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte
 delete mode 100644 packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte
 delete mode 100644 packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte
 delete mode 100644 packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog.svelte

diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte
deleted file mode 100644
index f8cacf244..000000000
--- a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { ActionEvents, ActionProps } from "../index.js";
-	import { createDispatcher } from "$lib/internal/events.js";
-
-	type $$Props = ActionProps;
-	type $$Events = ActionEvents;
-
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { close },
-		getAttrs,
-	} = getCtx();
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("action");
-
-	$: builder = $close;
-	$: Object.assign(builder, attrs);
-</script>
-
-{#if asChild}
-	<slot {builder} />
-{:else}
-	<button
-		bind:this={ref}
-		use:melt={builder}
-		type="button"
-		{...$$restProps}
-		on:m-click={dispatch}
-		on:m-keydown={dispatch}
-	>
-		<slot {builder} />
-	</button>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte
index 6ff180ddc..4ffca64a9 100644
--- a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte
+++ b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte
@@ -1,38 +1,34 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { CancelEvents, CancelProps } from "../index.js";
-	import { createDispatcher } from "$lib/internal/events.js";
+	import { useAlertDialogCancel } from "$lib/bits/dialog/dialog.svelte.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
+	import type { CancelProps } from "../index.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	type $$Props = CancelProps;
-	type $$Events = CancelEvents;
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		asChild,
+		children,
+		child,
+		...restProps
+	}: CancelProps = $props();
 
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
+	const cancelState = useAlertDialogCancel({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 
-	const {
-		elements: { close },
-		getAttrs,
-	} = getCtx();
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("cancel");
-
-	$: builder = $close;
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(mergeProps(restProps, cancelState.props));
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<button
-		bind:this={ref}
-		use:melt={builder}
-		type="button"
-		{...$$restProps}
-		on:m-click={dispatch}
-		on:m-keydown={dispatch}
-	>
-		<slot {builder} />
+	<button {...mergedProps}>
+		{@render children?.()}
 	</button>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte
index 4b453c23e..01075395e 100644
--- a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte
+++ b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte
@@ -1,121 +1,93 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
+	import { box } from "svelte-toolbelt";
 	import type { ContentProps } from "../index.js";
-	import type { Transition } from "$lib/internal/index.js";
+	import DismissableLayer from "$lib/bits/utilities/dismissable-layer/dismissable-layer.svelte";
+	import EscapeLayer from "$lib/bits/utilities/escape-layer/escape-layer.svelte";
+	import FocusScope from "$lib/bits/utilities/focus-scope/focus-scope.svelte";
+	import PresenceLayer from "$lib/bits/utilities/presence-layer/presence-layer.svelte";
+	import TextSelectionLayer from "$lib/bits/utilities/text-selection-layer/text-selection-layer.svelte";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { noop } from "$lib/internal/callbacks.js";
+	import ScrollLock from "$lib/bits/utilities/scroll-lock/scroll-lock.svelte";
+	import { useDialogContent } from "$lib/bits/dialog/dialog.svelte.js";
 
-	type T = $$Generic<Transition>;
-	type In = $$Generic<Transition>;
-	type Out = $$Generic<Transition>;
+	let {
+		id = useId(),
+		asChild,
+		children,
+		child,
+		ref = $bindable(null),
+		forceMount = false,
+		onDestroyAutoFocus = noop,
+		onEscapeKeydown = noop,
+		onMountAutoFocus = noop,
+		...restProps
+	}: ContentProps = $props();
 
-	type $$Props = ContentProps<T, In, Out>;
+	const contentState = useDialogContent({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 
-	export let transition: $$Props["transition"] = undefined;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export let inTransition: $$Props["inTransition"] = undefined;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-	export let outTransition: $$Props["outTransition"] = undefined;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-	export let id: $$Props["id"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { content },
-		states: { open },
-		ids,
-		getAttrs,
-	} = getCtx();
-
-	const attrs = getAttrs("content");
-
-	$: if (id) {
-		ids.content.set(id);
-	}
-	$: builder = $content;
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-{#if asChild && $open}
-	<slot {builder} />
-{:else if transition && $open}
-	<div
-		bind:this={ref}
-		transition:transition={transitionConfig}
-		use:melt={builder}
-		on:pointerdown
-		on:pointermove
-		on:pointerup
-		on:touchend
-		on:touchstart
-		on:touchcancel
-		on:touchmove
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{:else if inTransition && outTransition && $open}
-	<div
-		bind:this={ref}
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		on:pointerdown
-		on:pointermove
-		on:pointerup
-		on:touchend
-		on:touchstart
-		on:touchcancel
-		on:touchmove
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{:else if inTransition && $open}
-	<div
-		bind:this={ref}
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		on:pointerdown
-		on:pointermove
-		on:pointerup
-		on:touchend
-		on:touchstart
-		on:touchcancel
-		on:touchmove
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{:else if outTransition && $open}
-	<div
-		bind:this={ref}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		on:pointerdown
-		on:pointermove
-		on:pointerup
-		on:touchend
-		on:touchstart
-		on:touchcancel
-		on:touchmove
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{:else if $open}
-	<div
-		bind:this={ref}
-		use:melt={builder}
-		on:pointerdown
-		on:pointermove
-		on:pointerup
-		on:touchend
-		on:touchstart
-		on:touchcancel
-		on:touchmove
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{/if}
+<PresenceLayer {...mergedProps} present={contentState.root.open.value || forceMount}>
+	{#snippet presence({ present })}
+		<ScrollLock {...mergedProps} />
+		<FocusScope
+			loop
+			trapped={present.value}
+			{...mergedProps}
+			onDestroyAutoFocus={(e) => {
+				onDestroyAutoFocus(e);
+				if (e.defaultPrevented) return;
+				contentState.root.triggerNode?.focus();
+			}}
+			onMountAutoFocus={(e) => {
+				onMountAutoFocus(e);
+				if (e.defaultPrevented) return;
+				e.preventDefault();
+				contentState.root.cancelNode?.focus();
+			}}
+		>
+			{#snippet focusScope({ props: focusScopeProps })}
+				<EscapeLayer
+					{...mergedProps}
+					enabled={present.value}
+					onEscapeKeydown={(e) => {
+						onEscapeKeydown(e);
+						contentState.root.closeDialog();
+					}}
+				>
+					<DismissableLayer {...mergedProps} enabled={present.value}>
+						<TextSelectionLayer {...mergedProps} enabled={present.value}>
+							{#if asChild}
+								{@render child?.({
+									props: mergeProps(mergedProps, focusScopeProps, {
+										hidden: !present.value,
+									}),
+								})}
+							{:else}
+								<div
+									{...mergeProps(mergedProps, focusScopeProps, {
+										hidden: !present.value,
+										style: {
+											pointerEvents: "auto",
+										},
+									})}
+								>
+									{@render children?.()}
+								</div>
+							{/if}
+						</TextSelectionLayer>
+					</DismissableLayer>
+				</EscapeLayer>
+			{/snippet}
+		</FocusScope>
+	{/snippet}
+</PresenceLayer>
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte
deleted file mode 100644
index befd5e63e..000000000
--- a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { DescriptionProps } from "../index.js";
-
-	type $$Props = DescriptionProps;
-
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { description },
-		ids,
-		getAttrs,
-	} = getCtx();
-
-	const attrs = getAttrs("description");
-
-	$: if (id) {
-		ids.description.set(id);
-	}
-	$: builder = $description;
-	$: Object.assign(builder, attrs);
-</script>
-
-{#if asChild}
-	<slot {builder} />
-{:else}
-	<div bind:this={ref} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</div>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte
deleted file mode 100644
index b43029aad..000000000
--- a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { OverlayProps } from "../index.js";
-	import type { Transition } from "$lib/internal/index.js";
-
-	type T = $$Generic<Transition>;
-	type In = $$Generic<Transition>;
-	type Out = $$Generic<Transition>;
-
-	type $$Props = OverlayProps<T, In, Out>;
-
-	export let transition: $$Props["transition"] = undefined;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export let inTransition: $$Props["inTransition"] = undefined;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-	export let outTransition: $$Props["outTransition"] = undefined;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { overlay },
-		states: { open },
-		getAttrs,
-	} = getCtx();
-
-	const attrs = getAttrs("overlay");
-
-	$: builder = $overlay;
-	$: Object.assign(builder, attrs);
-</script>
-
-{#if asChild && $open}
-	<slot {builder} />
-{:else if transition && $open}
-	<div
-		bind:this={ref}
-		transition:transition={transitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-	/>
-{:else if inTransition && outTransition && $open}
-	<div
-		bind:this={ref}
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-	/>
-{:else if inTransition && $open}
-	<div bind:this={ref} in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} />
-{:else if outTransition && $open}
-	<div
-		bind:this={ref}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-	/>
-{:else if $open}
-	<div bind:this={ref} use:melt={builder} {...$$restProps} />
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte
deleted file mode 100644
index b4251b6f7..000000000
--- a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { PortalProps } from "../index.js";
-
-	type $$Props = PortalProps;
-
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { portalled },
-		getAttrs,
-	} = getCtx();
-	const attrs = getAttrs("portal");
-
-	$: builder = $portalled;
-	$: Object.assign(builder, attrs);
-</script>
-
-{#if asChild}
-	<slot {builder} />
-{:else}
-	<div bind:this={ref} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</div>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte
deleted file mode 100644
index f4780ce2e..000000000
--- a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { TitleProps } from "../index.js";
-
-	type $$Props = TitleProps;
-
-	export let level: $$Props["level"] = "h2";
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { title },
-		ids,
-		getAttrs,
-	} = getCtx();
-
-	const attrs = getAttrs("title");
-
-	$: if (id) {
-		ids.title.set(id);
-	}
-
-	$: builder = $title;
-	$: Object.assign(builder, attrs);
-</script>
-
-{#if asChild}
-	<slot {builder} />
-{:else}
-	<svelte:element this={level} bind:this={ref} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</svelte:element>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte
deleted file mode 100644
index 1a5c8a782..000000000
--- a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { TriggerEvents, TriggerProps } from "../index.js";
-	import { createDispatcher } from "$lib/internal/events.js";
-
-	type $$Props = TriggerProps;
-	type $$Events = TriggerEvents;
-
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { trigger },
-		getAttrs,
-	} = getCtx();
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("trigger");
-
-	$: builder = $trigger;
-	$: Object.assign(builder, attrs);
-</script>
-
-{#if asChild}
-	<slot {builder} />
-{:else}
-	<button
-		bind:this={ref}
-		use:melt={builder}
-		type="button"
-		on:m-click={dispatch}
-		on:m-keydown={dispatch}
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</button>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog.svelte
deleted file mode 100644
index 0ad345297..000000000
--- a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-	import { derived } from "svelte/store";
-	import { setCtx } from "../ctx.js";
-	import type { Props } from "../index.js";
-
-	type $$Props = Props;
-
-	export let preventScroll: $$Props["preventScroll"] = undefined;
-	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
-	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = false;
-	export let portal: $$Props["portal"] = undefined;
-	export let open: $$Props["open"] = undefined;
-	export let onOpenChange: $$Props["onOpenChange"] = undefined;
-	export let openFocus: $$Props["openFocus"] = undefined;
-	export let closeFocus: $$Props["closeFocus"] = undefined;
-	export let onOutsideClick: $$Props["onOutsideClick"] = undefined;
-
-	const {
-		states: { open: localOpen },
-		updateOption,
-		ids,
-	} = setCtx({
-		closeOnEscape,
-		preventScroll,
-		closeOnOutsideClick,
-		portal,
-		forceVisible: true,
-		defaultOpen: open,
-		openFocus,
-		closeFocus,
-		onOutsideClick,
-		onOpenChange: ({ next }) => {
-			if (open !== next) {
-				onOpenChange?.(next);
-				open = next;
-			}
-			return next;
-		},
-	});
-
-	const idValues = derived(
-		[ids.content, ids.description, ids.title],
-		([$contentId, $descriptionId, $titleId]) => ({
-			content: $contentId,
-			description: $descriptionId,
-			title: $titleId,
-		})
-	);
-
-	$: open !== undefined && localOpen.set(open);
-
-	$: updateOption("preventScroll", preventScroll);
-	$: updateOption("closeOnEscape", closeOnEscape);
-	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
-	$: updateOption("portal", portal);
-	$: updateOption("openFocus", openFocus);
-	$: updateOption("closeFocus", closeFocus);
-	$: updateOption("onOutsideClick", onOutsideClick);
-</script>
-
-<slot ids={$idValues} />
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/index.ts b/packages/bits-ui/src/lib/bits/alert-dialog/index.ts
index 8c0dea558..a03ecccc7 100644
--- a/packages/bits-ui/src/lib/bits/alert-dialog/index.ts
+++ b/packages/bits-ui/src/lib/bits/alert-dialog/index.ts
@@ -1,15 +1,15 @@
-export { default as Root } from "./components/alert-dialog.svelte";
-export { default as Title } from "./components/alert-dialog-title.svelte";
-export { default as Action } from "./components/alert-dialog-action.svelte";
+export { default as Root } from "$lib/bits/dialog/components/dialog.svelte";
+export { default as Title } from "$lib/bits/dialog/components/dialog-title.svelte";
+export { default as Action } from "$lib/bits/dialog/components/dialog-close.svelte";
 export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
-export { default as Portal } from "./components/alert-dialog-portal.svelte";
+export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
 export { default as Content } from "./components/alert-dialog-content.svelte";
-export { default as Overlay } from "./components/alert-dialog-overlay.svelte";
-export { default as Trigger } from "./components/alert-dialog-trigger.svelte";
-export { default as Description } from "./components/alert-dialog-description.svelte";
+export { default as Overlay } from "$lib/bits/dialog/components/dialog-overlay.svelte";
+export { default as Trigger } from "$lib/bits/dialog/components/dialog-trigger.svelte";
+export { default as Description } from "$lib/bits/dialog/components/dialog-description.svelte";
 
 export type {
-	AlertDialogProps as Props,
+	AlertDialogRootProps as RootProps,
 	AlertDialogTitleProps as TitleProps,
 	AlertDialogActionProps as ActionProps,
 	AlertDialogCancelProps as CancelProps,
@@ -18,7 +18,4 @@ export type {
 	AlertDialogOverlayProps as OverlayProps,
 	AlertDialogTriggerProps as TriggerProps,
 	AlertDialogDescriptionProps as DescriptionProps,
-	AlertDialogTriggerEvents as TriggerEvents,
-	AlertDialogActionEvents as ActionEvents,
-	AlertDialogCancelEvents as CancelEvents,
 } from "./types.js";
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/types.ts b/packages/bits-ui/src/lib/bits/alert-dialog/types.ts
index 546838692..73bc82bdf 100644
--- a/packages/bits-ui/src/lib/bits/alert-dialog/types.ts
+++ b/packages/bits-ui/src/lib/bits/alert-dialog/types.ts
@@ -1,104 +1,26 @@
-import type { HTMLButtonAttributes } from "svelte/elements";
-import type { CreateDialogProps as MeltDialogProps } from "@melt-ui/svelte";
-import type { CustomEventHandler } from "$lib/index.js";
-import type {
-	DOMElement,
-	Expand,
-	HTMLDivAttributes,
-	HTMLHeadingAttributes,
-	OmitOpen,
-	OnChangeFn,
-	SvelteEvent,
-	Transition,
-	TransitionProps,
-} from "$lib/internal/index.js";
-
-export type AlertDialogPropsWithoutHTML = Expand<
-	OmitOpen<Omit<MeltDialogProps, "role" | "forceVisible" | "ids">> & {
-		/**
-		 * The open state of the alert dialog.
-		 * You can bind this to a boolean value to programmatically control the open state.
-		 *
-		 * @defaultValue false
-		 */
-		open?: boolean;
-
-		/**
-		 * A callback function called when the open state changes.
-		 */
-		onOpenChange?: OnChangeFn<boolean>;
-	}
->;
-
-export type AlertDialogTriggerPropsWithoutHTML = DOMElement<HTMLButtonElement>;
-
-export type AlertDialogActionPropsWithoutHTML = DOMElement<HTMLButtonElement>;
-
-export type AlertDialogCancelPropsWithoutHTML = DOMElement<HTMLButtonElement>;
-
-export type AlertDialogContentPropsWithoutHTML<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition,
-> = Expand<TransitionProps<T, In, Out> & DOMElement>;
-
-export type AlertDialogOverlayPropsWithoutHTML<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition,
-> = Expand<TransitionProps<T, In, Out> & DOMElement>;
-
-export type AlertDialogDescriptionPropsWithoutHTML = DOMElement;
-
-export type AlertDialogPortalPropsWithoutHTML = DOMElement;
-
-export type AlertDialogTitlePropsWithoutHTML = Expand<
-	{
-		level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-	} & DOMElement<HTMLHeadingElement>
+import type { DialogContentPropsWithoutHTML, DialogContentProps } from "$lib/types.js";
+
+export type {
+	DialogRootPropsWithoutHTML as AlertDialogRootPropsWithoutHTML,
+	DialogRootProps as AlertDialogRootProps,
+	DialogClosePropsWithoutHTML as AlertDialogActionPropsWithoutHTML,
+	DialogCloseProps as AlertDialogActionProps,
+	DialogClosePropsWithoutHTML as AlertDialogCancelPropsWithoutHTML,
+	DialogCloseProps as AlertDialogCancelProps,
+	DialogPortalPropsWithoutHTML as AlertDialogPortalPropsWithoutHTML,
+	DialogPortalProps as AlertDialogPortalProps,
+	DialogOverlayPropsWithoutHTML as AlertDialogOverlayPropsWithoutHTML,
+	DialogOverlayProps as AlertDialogOverlayProps,
+	DialogTitlePropsWithoutHTML as AlertDialogTitlePropsWithoutHTML,
+	DialogTitleProps as AlertDialogTitleProps,
+	DialogDescriptionPropsWithoutHTML as AlertDialogDescriptionPropsWithoutHTML,
+	DialogDescriptionProps as AlertDialogDescriptionProps,
+	DialogTriggerPropsWithoutHTML as AlertDialogTriggerPropsWithoutHTML,
+	DialogTriggerProps as AlertDialogTriggerProps,
+} from "$lib/types.js";
+
+export type AlertDialogContentPropsWithoutHTML = Omit<
+	DialogContentPropsWithoutHTML,
+	"onInteractOutside"
 >;
-
-export type AlertDialogProps = AlertDialogPropsWithoutHTML;
-
-export type AlertDialogTriggerProps = AlertDialogTriggerPropsWithoutHTML & HTMLButtonAttributes;
-
-export type AlertDialogActionProps = AlertDialogActionPropsWithoutHTML & HTMLButtonAttributes;
-
-export type AlertDialogCancelProps = AlertDialogCancelPropsWithoutHTML & HTMLButtonAttributes;
-
-export type AlertDialogContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition,
-> = AlertDialogContentPropsWithoutHTML<T, In, Out> & HTMLDivAttributes;
-
-export type AlertDialogOverlayProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition,
-> = AlertDialogContentPropsWithoutHTML<T, In, Out> & HTMLDivAttributes;
-
-export type AlertDialogDescriptionProps = AlertDialogDescriptionPropsWithoutHTML &
-	HTMLDivAttributes;
-
-export type AlertDialogPortalProps = AlertDialogPortalPropsWithoutHTML & HTMLDivAttributes;
-
-export type AlertDialogTitleProps = AlertDialogTitlePropsWithoutHTML & HTMLHeadingAttributes;
-
-export type AlertDialogTriggerEvents<T extends Element = HTMLButtonElement> = {
-	click: CustomEventHandler<MouseEvent, T>;
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-};
-
-export type AlertDialogContentEvents<T extends Element = HTMLElement> = {
-	pointerdown: SvelteEvent<PointerEvent, T>;
-	pointerup: SvelteEvent<PointerEvent, T>;
-	pointermove: SvelteEvent<PointerEvent, T>;
-	touchend: SvelteEvent<TouchEvent, T>;
-	touchstart: SvelteEvent<TouchEvent, T>;
-	touchcancel: SvelteEvent<TouchEvent, T>;
-	touchmove: SvelteEvent<TouchEvent, T>;
-};
-
-export type AlertDialogActionEvents = AlertDialogTriggerEvents;
-export type AlertDialogCancelEvents = AlertDialogTriggerEvents;
+export type AlertDialogContentProps = Omit<DialogContentProps, "onInteractOutside">;
diff --git a/packages/bits-ui/src/lib/bits/dialog/dialog.svelte.ts b/packages/bits-ui/src/lib/bits/dialog/dialog.svelte.ts
index a90d7e2ea..28b14ddc2 100644
--- a/packages/bits-ui/src/lib/bits/dialog/dialog.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/dialog/dialog.svelte.ts
@@ -10,6 +10,7 @@ const TRIGGER_ATTR = "data-dialog-trigger";
 const OVERLAY_ATTR = "data-dialog-overlay";
 const DESCRIPTION_ATTR = "data-dialog-description";
 const CLOSE_ATTR = "data-dialog-close";
+const CANCEL_ATTR = "data-dialog-cancel";
 
 type DialogRootStateProps = WritableBoxedValues<{
 	open: boolean;
@@ -25,6 +26,7 @@ class DialogRootState {
 	titleId = $derived(this.titleNode ? this.titleNode.id : undefined);
 	triggerId = $derived(this.triggerNode ? this.triggerNode.id : undefined);
 	descriptionId = $derived(this.descriptionNode ? this.descriptionNode.id : undefined);
+	cancelNode = $state<HTMLElement | null>(null);
 
 	constructor(props: DialogRootStateProps) {
 		this.open = props.open;
@@ -64,6 +66,10 @@ class DialogRootState {
 		return new DialogCloseState(props, this);
 	}
 
+	createCancel(props: AlertDialogCancelStateProps) {
+		return new AlertDialogCancelState(props, this);
+	}
+
 	sharedProps = $derived.by(
 		() =>
 			({
@@ -279,6 +285,43 @@ class DialogOverlayState {
 	);
 }
 
+type AlertDialogCancelStateProps = WithRefProps;
+
+class AlertDialogCancelState {
+	#id: AlertDialogCancelStateProps["id"];
+	#ref: AlertDialogCancelStateProps["ref"];
+	#root: DialogRootState;
+
+	constructor(props: AlertDialogCancelStateProps, root: DialogRootState) {
+		this.#id = props.id;
+		this.#ref = props.ref;
+		this.#root = root;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			condition: () => this.#root.open.value,
+			onRefChange: (node) => {
+				this.#root.cancelNode = node;
+			},
+		});
+	}
+
+	#onclick = () => {
+		this.#root.closeDialog();
+	};
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.value,
+				[CANCEL_ATTR]: "",
+				onclick: this.#onclick,
+				...this.#root.sharedProps,
+			}) as const
+	);
+}
+
 const [setDialogRootContext, getDialogRootContext] = createContext<DialogRootState>("Dialog.Root");
 
 export function useDialogRoot(props: DialogRootStateProps) {
@@ -308,3 +351,7 @@ export function useDialogDescription(props: DialogDescriptionStateProps) {
 export function useDialogClose(props: DialogCloseStateProps) {
 	return getDialogRootContext().createClose(props);
 }
+
+export function useAlertDialogCancel(props: AlertDialogCancelStateProps) {
+	return getDialogRootContext().createCancel(props);
+}
diff --git a/packages/bits-ui/src/lib/internal/index.ts b/packages/bits-ui/src/lib/internal/index.ts
index be1296462..c267e7bcb 100644
--- a/packages/bits-ui/src/lib/internal/index.ts
+++ b/packages/bits-ui/src/lib/internal/index.ts
@@ -13,7 +13,7 @@ export * from "./context.js";
 export * from "./box.svelte.js";
 export * from "./useStateMachine.svelte.js";
 export * from "../bits/utilities/presence-layer/usePresence.svelte.js";
-export * from "./useNodeById.svelte.js";
+export * from "./useRefById.svelte.js";
 export * from "./afterTick.js";
 export * from "./locale.js";
 export * from "./elements.js";
diff --git a/sites/docs/src/lib/components/demos/alert-dialog-demo.svelte b/sites/docs/src/lib/components/demos/alert-dialog-demo.svelte
index 25957237b..2f6884904 100644
--- a/sites/docs/src/lib/components/demos/alert-dialog-demo.svelte
+++ b/sites/docs/src/lib/components/demos/alert-dialog-demo.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { AlertDialog } from "bits-ui";
-	import { fade } from "svelte/transition";
-	import { flyAndScale } from "$lib/utils/index.js";
 </script>
 
 <AlertDialog.Root>
@@ -14,13 +12,10 @@
 	</AlertDialog.Trigger>
 	<AlertDialog.Portal>
 		<AlertDialog.Overlay
-			transition={fade}
-			transitionConfig={{ duration: 150 }}
-			class="fixed inset-0 z-50 bg-black/80"
+			class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
 		/>
 		<AlertDialog.Content
-			transition={flyAndScale}
-			class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-card-lg border bg-background p-7 shadow-popover outline-none sm:max-w-lg md:w-full"
+			class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-card-lg border bg-background p-7 shadow-popover outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:max-w-lg md:w-full "
 		>
 			<div class="flex flex-col gap-4 pb-6">
 				<AlertDialog.Title class="text-lg font-semibold tracking-tight"