Add |local to remaining components without breaking ToggleButton usage by splitting transition: into in:/out: and only applying to out:. Resolves #51

Author: techniq

src/lib/components/Backdrop.svelte

@@ -2,32 +2,29 @@
   import { fade, FadeParams } from 'svelte/transition';
 
   import portalAction from '../actions/portal';
+  import { cls } from '../utils/styles';
 
   export let blur: boolean = false;
   export let portal = false;
 
   export let fadeParams: FadeParams = { duration: 300 };
 </script>
 
-<!-- TODO: Add `|local` to transition without breaking `ToggleButton` usage: https://github.com/techniq/svelte-ux/issues/51 -->
 <div
-  class="backdrop fixed top-0 bottom-0 left-0 right-0 flex items-center
-    justify-center bg-black/50 {$$restProps.class || ''}"
+  class={cls(
+    'backdrop fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-black/50',
+    blur && 'backdrop-blur-sm',
+    $$restProps.class
+  )}
   on:keydown
   on:keyup
   on:keypress
   on:click
   on:mousedown
   on:mouseup
-  transition:fade={fadeParams}
-  class:blur
+  in:fade={fadeParams}
+  out:fade|local={fadeParams}
   use:portalAction={{ enabled: portal }}
 >
   <slot />
 </div>
-
-<style lang="postcss">
-  .blur {
-    backdrop-filter: blur(2px);
-  }
-</style>

src/lib/components/Dialog.svelte

@@ -91,15 +91,15 @@
     }}
     use:portalAction={{ enabled: portal }}
   >
-    <!-- TODO: Add `|local` to transition without breaking `ToggleButton` usage: https://github.com/techniq/svelte-ux/issues/51 -->
     <div
       class={cls(
         'dialog rounded bg-white elevation-4 overflow-y-auto pointer-events-auto relative outline-none',
         classes.dialog,
         $$props.class
       )}
       style={$$props.style}
-      transition:scale={{ duration: 150, easing: quadIn }}
+      in:scale={{ duration: 150, easing: quadIn }}
+      out:scale|local={{ duration: 150, easing: quadIn }}
       on:introstart
       on:outrostart
       on:introend

src/lib/components/Drawer.svelte

@@ -42,7 +42,6 @@
     {portal}
   />
 
-  <!-- TODO: Add `|local` to transition without breaking `ToggleButton` usage: https://github.com/techniq/svelte-ux/issues/51 -->
   <div
     class={cls(
       'bg-white fixed overflow-auto transform z-50 outline-none',
@@ -57,7 +56,11 @@
       $$props.class
     )}
     style={$$props.style}
-    transition:fly={{
+    in:fly={{
+      x: left ? '-100%' : right ? '100%' : 0,
+      y: top ? '-100%' : bottom ? '100%' : 0,
+    }}
+    out:fly|local={{
       x: left ? '-100%' : right ? '100%' : 0,
       y: top ? '-100%' : bottom ? '100%' : 0,
     }}

src/lib/components/Menu.svelte

@@ -58,7 +58,6 @@
   on:close
   let:close
 >
-  <!-- TODO: Add `|local` to transition without breaking `ToggleButton` usage: https://github.com/techniq/svelte-ux/issues/51 -->
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <menu
     class="menu-items outline-none max-h-screen"
@@ -68,7 +67,8 @@
       // Do not allow event to reach Popover's on:mouseup (clickOutside)
       e.stopPropagation();
     }}
-    transition:transition={transitionParams}
+    in:transition={transitionParams}
+    out:transition|local={transitionParams}
     use:focusMove={{ disabled: !moveFocus }}
   >
     <slot {close} />