Dialog not passing down props

[ispyinternet]

Describe the bug

I'm trying to use a Dialog in a layout file where the Dialog content is being driven through the routing, so far so good, except I can't pass props down to a child component that is slotted into the Dialog content.

For example:

---- +layout.svelte ------

  $:active = $onBoardingState.active;
  $:disabled = $onBoardingState.disabled;
  $:title = $onBoardingState.title;
  
<MyRouteDrivenDialogComponent {active} {disabled} {title}>
  <slot />
</MyRouteDrivenDialogComponent>

---- MyRouteDriveDialogComponent.svelte ----

<Dialog {active} {disabled} {title}>
      <Wrapper {active} {disabled} {title}>
         <slot /> <!-- +page.svelte content gets slotted here -->
      </Wrapper>
</Dialog>

---- Dialog.svelte ------

export let active;
export let disabled;
export let title;
<Dialog.Root>
  <Dialog.Portal>
      <Dialog.Content>
           PROPS-{active}-{disabled}-{title}
            <slot {active} {disabled} {title}/>
      </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

--- Wrapper.svelte -----

  $:console.log("WRAPPER", {active, delayed, disabled, title}); <-- no console logs or reactivity

The PROPS-{active}-{disabled}-{title} is showing the reactive values, but I can't get those reactive values as props into the Wrapper component, I think Dialog might be getting in the way, but I don't understand enough to reason why.

Sorry, I haven't got a reproduction, I can't get stackblitz to work.

Can anyone advise?

Reproduction

https://stackblitz.com/edit/github-vnzavvmr

Logs

System Info

System:
    OS: Linux 6.1 Amazon Linux 2023
    CPU: (2) x64 AMD EPYC 7571
    Memory: 5.35 GB / 15.45 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.19 - ~/.npm-global/bin/yarn
    npm: 8.15.1 - ~/.npm-global/bin/npm
    pnpm: 8.15.0 - ~/.local/share/pnpm/pnpm
  npmPackages:
    svelte: ^4.2.8 => 4.2.18

Severity

annoyance

[ispyinternet]

I've narrowed down the issue.

Inside my bits dialog, I have a ScrollArea, so this works...

 <Dialog.Content>
     DEEP-{active}-{disabled}-{title}
      <slot /> <!--- slotted components receive props --->
 </Dialog.Content>

But this doesn't:

 <Dialog.Content>
     <ScrollArea.Root type='auto'>
             <ScrollArea.Viewport>
               <ScrollArea.Content>
                    DEEP-{active}-{disabled}-{title}
                    <slot /> <!--- slotted component doesn't receive props --->
               </ScrollArea.Content>
             </ScrollArea.Viewport>
       <ScrollArea.Root>
  </Dialog.Content>

So it seems the ScrollArea is interferring some how.

Any workarounds?

[ispyinternet]

<ScrollArea.Viewport> Is the first component to break passing the props.