arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-26 01:40:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(deps): update reka-ui and vaul-vue

Browse Source
This commit is contained in:
Benjamin Canac
2025-02-20 16:27:22 +01:00
parent b27c0f44f5
commit 1466a2741d
5 changed files with 119 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
test/components/__snapshots__/Drawer-vue.spec.ts.snap
View File

@@ -6,7 +6,7 @@ exports[`Drawer > renders with body slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<!--v-if-->
@@ -25,7 +25,7 @@ exports[`Drawer > renders with class correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<!--v-if-->
@@ -44,7 +44,7 @@ exports[`Drawer > renders with content slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>Content slot
</div>
@@ -58,7 +58,7 @@ exports[`Drawer > renders with default slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<!--v-if-->
@@ -77,12 +77,12 @@ exports[`Drawer > renders with description correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -99,12 +99,12 @@ exports[`Drawer > renders with description slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<!--v-if-->
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description slot</p>
<p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description slot</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -121,12 +121,12 @@ exports[`Drawer > renders with direction bottom correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -143,12 +143,12 @@ exports[`Drawer > renders with direction bottom inset correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 bottom-4">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 bottom-4">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -165,12 +165,12 @@ exports[`Drawer > renders with direction left correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -187,12 +187,12 @@ exports[`Drawer > renders with direction left inset correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -209,12 +209,12 @@ exports[`Drawer > renders with direction right correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -231,12 +231,12 @@ exports[`Drawer > renders with direction right inset correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -253,12 +253,12 @@ exports[`Drawer > renders with direction top correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mb-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -275,12 +275,12 @@ exports[`Drawer > renders with direction top inset correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 top-4">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 top-4">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mb-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -297,7 +297,7 @@ exports[`Drawer > renders with footer slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<!--v-if-->
@@ -316,7 +316,7 @@ exports[`Drawer > renders with header slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">Header slot</div>
@@ -335,12 +335,12 @@ exports[`Drawer > renders with right direction correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -357,11 +357,11 @@ exports[`Drawer > renders with title correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="--snap-point-height: 0; 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<!--v-if-->
</div>
<!--v-if-->
@@ -379,11 +379,11 @@ exports[`Drawer > renders with title slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title slot</h2>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title slot</h2>
<!--v-if-->
</div>
<!--v-if-->
@@ -401,12 +401,12 @@ exports[`Drawer > renders with top direction correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mb-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -423,7 +423,7 @@ exports[`Drawer > renders with ui correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 h-1.5 mx-auto w-20"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<!--v-if-->
@@ -442,12 +442,12 @@ exports[`Drawer > renders without handle correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<!--v-if-->
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -464,12 +464,12 @@ exports[`Drawer > renders without overlay correctly 1`] = `
<!--v-if-->
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->

104
test/components/__snapshots__/Drawer.spec.ts.snap
View File

@@ -6,7 +6,7 @@ exports[`Drawer > renders with body slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<!--v-if-->
@@ -25,7 +25,7 @@ exports[`Drawer > renders with class correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<!--v-if-->
@@ -44,7 +44,7 @@ exports[`Drawer > renders with content slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>Content slot
</div>
@@ -58,7 +58,7 @@ exports[`Drawer > renders with default slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<!--v-if-->
@@ -77,12 +77,12 @@ exports[`Drawer > renders with description correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -99,12 +99,12 @@ exports[`Drawer > renders with description slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<!--v-if-->
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description slot</p>
<p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description slot</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -121,12 +121,12 @@ exports[`Drawer > renders with direction bottom correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -143,12 +143,12 @@ exports[`Drawer > renders with direction bottom inset correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 bottom-4">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 bottom-4">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -165,12 +165,12 @@ exports[`Drawer > renders with direction left correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -187,12 +187,12 @@ exports[`Drawer > renders with direction left inset correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -209,12 +209,12 @@ exports[`Drawer > renders with direction right correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -231,12 +231,12 @@ exports[`Drawer > renders with direction right inset correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -253,12 +253,12 @@ exports[`Drawer > renders with direction top correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mb-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -275,12 +275,12 @@ exports[`Drawer > renders with direction top inset correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 top-4">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 top-4">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mb-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -297,7 +297,7 @@ exports[`Drawer > renders with footer slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<!--v-if-->
@@ -316,7 +316,7 @@ exports[`Drawer > renders with header slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">Header slot</div>
@@ -335,12 +335,12 @@ exports[`Drawer > renders with right direction correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -357,11 +357,11 @@ exports[`Drawer > renders with title correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="--snap-point-height: 0; 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<!--v-if-->
</div>
<!--v-if-->
@@ -379,11 +379,11 @@ exports[`Drawer > renders with title slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title slot</h2>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title slot</h2>
<!--v-if-->
</div>
<!--v-if-->
@@ -401,12 +401,12 @@ exports[`Drawer > renders with top direction correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mb-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -423,7 +423,7 @@ exports[`Drawer > renders with ui correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 h-1.5 mx-auto w-20"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<!--v-if-->
@@ -442,12 +442,12 @@ exports[`Drawer > renders without handle correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<!--v-if-->
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->
@@ -464,12 +464,12 @@ exports[`Drawer > renders without overlay correctly 1`] = `
<!--v-if-->
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
<div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
<div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
<div class="">
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
<h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
<p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
</div>
<!--v-if-->
<!--v-if-->