Drawer Overlay receives an unexpected slot

[fromaline]

Describe the bug

Hey 👋
First of all, thanks for the library! It's awesome!

I'm experiencing a minor warning with the Drawer component:

<Overlay> received an unexpected slot "default". drawer-overlay.svelte:15

I believe it comes from this file. It seems like DrawerPrimitive.Overlay doesn't accept the <slot />. When I manually remove slot from the component, the warning disappears, while the Drawer still works as expected.

Reproduction

https://stackblitz.com/edit/github-eft978?file=src%2Froutes%2F%2Bpage.svelte

Look to the browser console to see the warning.

Logs

<Overlay> received an unexpected slot "default". drawer-overlay.svelte:15

System Info

System:
	OS: macOS 14.5
	CPU: (8) arm64 Apple M1 Pro
	Memory: 1.27 GB / 16.00 GB
	Shell: 5.9 - /bin/zsh
Binaries:
	Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
	Yarn: 4.3.1 - ~/.yarn/bin/yarn
	npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
	bun: 1.1.6 - ~/.bun/bin/bun
Browsers:
	Chrome: 126.0.6478.185
	Safari: 17.5
npmPackages:
	@sveltejs/kit: ^2.5.18 => 2.5.18 
	bits-ui: ^0.21.12 => 0.21.12 
	cmdk-sv: ^0.0.18 => 0.0.18 
	lucide-svelte: ^0.416.0 => 0.416.0 
	svelte: ^4.2.18 => 4.2.18 
	svelte-sonner: ^0.3.25 => 0.3.25 
	vaul-svelte: ^0.3.2 => 0.3.2

Severity

annoyance

[jiger104]

Experiencing the same issue

code for reference

<Drawer.Root bind:open>
	<Drawer.Trigger asChild let:builder>
		<Button builders={[builder]}>Add To Library</Button>
	</Drawer.Trigger>
	<Drawer.Portal>
		<Drawer.Content>
			<form
				action="?/purchase&trackId={trackId}"
				enctype="multipart/form-data"
				method="POST"
				use:enhance
			>
				<div class="mx-auto flex w-2/3 flex-col items-center space-y-2">
					<Drawer.Header>
						<Drawer.Title class="text-2xl">Confirm Addition</Drawer.Title>
					</Drawer.Header>
					<p class="text-secondary-foreground">
						Confirm addition of <span class="font-bold">{trackTitle}</span> by
						<span class="font-bold">{artistName} </span>to your
						<span class="font-bold">{licenseType}</span> collection. This grants
						immediate access to all related assets for download. By proceeding, you
						agree to the legal obligations and payment terms as per your library's
						agreement with That Pitch.
					</p>

					<Drawer.Footer class="w-2/3">
						<Form.Button disabled={$delayed}>
							<Reload
								class={cn('mr-2 h-4 w-4 animate-spin', { hidden: !$delayed })}
							/>
							Confirm
						</Form.Button>
						<Drawer.Close asChild let:builder>
							<Button
								builders={[builder]}
								variant="outline"
								disabled={$delayed}
							>
								Cancel
							</Button>
						</Drawer.Close>
					</Drawer.Footer>
				</div>
			</form>
		</Drawer.Content>
	</Drawer.Portal>
</Drawer.Root>

[huntabyte]

Hey @walker-tx, I believe the actual correct way to handle this will be to update the Drawer.Overlay to accept a slot. I don't see a good reason to not accept one.

[walker-tx]

@huntabyte As in updating bits?

[walker-tx]

oh it's vaul, not bits

Vaul imports the bits Dialog.Overlay. Just lmk the approach you'd prefer and I'd be happy to get it done 👍🏻

[huntabyte]

fixed in @next