Add |local to Drawer/Dialog/Backdrop/Menu without breaking ToggleButton usage

[techniq]

Recently all Svelte transition usage within svelte-ux was updated to include the |local modifier to not break SvelteKit page transitions (see: sveltejs/svelte#6686, sveltejs/kit#628, sveltejs/kit#8670, and sveltejs/kit#5321.

In doing so, this breaks Dialog and Drawer transitions (particularly in) with ToggleButton since the {#if} within Dialog / Drawer are closer than the one within ToggleButton and thus are no longer treated as local.

One of the benefits of using ToggleButton to conditionally render a Dialog/Drawer is to handle mounting/unmounting even when the component is within a wrapping component (ex. UserDrawer, FilterDrawer, etc) as otherwise the wrapping component will always be mounted / reactive.

• ToggleButton
  • UserDrawer
    • Drawer

Since Dialog/Drawers are modals, adding |local to fix SvelteKit page transitions shouldn't be needed as you need to dismiss the modal before clicking on a link, but there might be an overlooked use case. For now, the workaround will be to revert adding |local for these components until a better solution is found.

A few thoughts on possibly solutions:

• Try to not add the {#if open} within Dialog/Drawer when used with ToggleButton
  • We still want it for all other use cases (as removing it completely will complicate them)
  • Trying to add it conditionally just adds another conditional
  • Exposing a separate component (DrawerBase or InternalDrawer or something) with most of the impl could work, but would be confusing to the user
• Allow the user to opt-out of the {#if on} within ToggleButton, but along with being difficult without another conditional or nested slot, it would break the UserDrawer use case

[techniq]

After some thought, we could split transition: into in: and out: and only apply |local to the out: (which is what breaks SvelteKit navigation, but the in: appears to be only what's broken with ToggleButton (needs more investigation though).