diff --git a/src/theme/modal.ts b/src/theme/modal.ts
index d93d90f40f..e0330917c3 100644
--- a/src/theme/modal.ts
+++ b/src/theme/modal.ts
@@ -21,7 +21,7 @@ export default {
         content: 'inset-0'
       },
       false: {
-        content: 'top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]'
+        content: 'top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]'
       }
     }
   }
diff --git a/test/components/__snapshots__/Modal-vue.spec.ts.snap b/test/components/__snapshots__/Modal-vue.spec.ts.snap
index 4dd20757be..65509c4247 100644
--- a/test/components/__snapshots__/Modal-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Modal-vue.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`Modal > renders with body slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
@@ -28,7 +28,7 @@ exports[`Modal > renders with class correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)] bg-[var(--ui-bg-elevated)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)] bg-[var(--ui-bg-elevated)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
@@ -50,7 +50,7 @@ exports[`Modal > renders with close slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if-->Close slot
@@ -69,7 +69,7 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
@@ -91,7 +91,7 @@ exports[`Modal > renders with content slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">Content slot</div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">Content slot</div>
 
 
 <!--teleport end-->"
@@ -103,7 +103,7 @@ exports[`Modal > renders with default slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="radix-vue-dialog-content-v-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-2" aria-labelledby="radix-vue-dialog-title-v-1" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="radix-vue-dialog-content-v-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-2" aria-labelledby="radix-vue-dialog-title-v-1" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
@@ -125,7 +125,7 @@ exports[`Modal > renders with description correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
     <p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
@@ -147,7 +147,7 @@ exports[`Modal > renders with description slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description slot</p><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
@@ -169,7 +169,7 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
@@ -213,7 +213,7 @@ exports[`Modal > renders with header slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">Header slot</div>
   <!--v-if-->
   <!--v-if-->
@@ -229,7 +229,7 @@ exports[`Modal > renders with open correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]" style="pointer-events: auto;">
+<div data-dismissable-layer="" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]" style="pointer-events: auto;">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
@@ -251,7 +251,7 @@ exports[`Modal > renders with title correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
@@ -273,7 +273,7 @@ exports[`Modal > renders with title slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title slot</h2>
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
@@ -295,7 +295,7 @@ exports[`Modal > renders with ui correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
@@ -317,7 +317,7 @@ exports[`Modal > renders without close correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
     <p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p>
@@ -336,7 +336,7 @@ exports[`Modal > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
     <p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
@@ -358,7 +358,7 @@ exports[`Modal > renders without transition correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
     <p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
diff --git a/test/components/__snapshots__/Modal.spec.ts.snap b/test/components/__snapshots__/Modal.spec.ts.snap
index 2e60964c8b..ce29cccb07 100644
--- a/test/components/__snapshots__/Modal.spec.ts.snap
+++ b/test/components/__snapshots__/Modal.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`Modal > renders with body slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -28,7 +28,7 @@ exports[`Modal > renders with class correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)] bg-[var(--ui-bg-elevated)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)] bg-[var(--ui-bg-elevated)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -50,7 +50,7 @@ exports[`Modal > renders with close slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if-->Close slot
@@ -69,7 +69,7 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
@@ -91,7 +91,7 @@ exports[`Modal > renders with content slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">Content slot</div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">Content slot</div>
 
 
 <!--teleport end-->"
@@ -103,7 +103,7 @@ exports[`Modal > renders with default slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="radix-vue-dialog-content-v-0-0-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-2" aria-labelledby="radix-vue-dialog-title-v-0-0-1" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="radix-vue-dialog-content-v-0-0-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-2" aria-labelledby="radix-vue-dialog-title-v-0-0-1" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -125,7 +125,7 @@ exports[`Modal > renders with description correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
     <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -147,7 +147,7 @@ exports[`Modal > renders with description slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description slot</p><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -169,7 +169,7 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -213,7 +213,7 @@ exports[`Modal > renders with header slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">Header slot</div>
   <!--v-if-->
   <!--v-if-->
@@ -229,7 +229,7 @@ exports[`Modal > renders with open correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]" style="pointer-events: auto;">
+<div data-dismissable-layer="" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]" style="pointer-events: auto;">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -251,7 +251,7 @@ exports[`Modal > renders with title correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -273,7 +273,7 @@ exports[`Modal > renders with title slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title slot</h2>
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -295,7 +295,7 @@ exports[`Modal > renders with ui correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -317,7 +317,7 @@ exports[`Modal > renders without close correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
     <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p>
@@ -336,7 +336,7 @@ exports[`Modal > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
     <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -358,7 +358,7 @@ exports[`Modal > renders without transition correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] max-w-lg w-[90vw] h-auto my-4 sm:my-8 rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-[var(--ui-border)]">
   <div class="px-4 py-5 sm:px-6">
     <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
     <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>