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