Update all Svelte transitions with |local modifier for better SvelteKit compatibility

Author: techniq

src/lib/components/Backdrop.svelte

@@ -18,7 +18,7 @@
   on:click
   on:mousedown
   on:mouseup
-  transition:fade={fadeParams}
+  transition:fade|local={fadeParams}
   class:blur
   use:portalAction={{ enabled: portal }}
 >

src/lib/components/Dialog.svelte

@@ -98,7 +98,7 @@
         $$props.class
       )}
       style={$$props.style}
-      transition:scale={{ duration: 150, easing: quadIn }}
+      transition:scale|local={{ duration: 150, easing: quadIn }}
       on:introstart
       on:outrostart
       on:introend

src/lib/components/Drawer.svelte

@@ -56,7 +56,7 @@
       $$props.class
     )}
     style={$$props.style}
-    transition:fly={{
+    transition:fly|local={{
       x: left ? '-100%' : right ? '100%' : 0,
       y: top ? '-100%' : bottom ? '100%' : 0,
     }}

src/lib/components/Menu.svelte

@@ -67,7 +67,7 @@
       // Do not allow event to reach Popover's on:mouseup (clickOutside)
       e.stopPropagation();
     }}
-    transition:transition={transitionParams}
+    transition:transition|local={transitionParams}
     use:focusMove={{ disabled: !moveFocus }}
   >
     <slot {close} />

src/lib/components/Month.svelte

@@ -128,8 +128,8 @@
   {#key startOfMonth.valueOf()}
     <div
       class="col-span-full row-span-full grid grid-cols-7 grid-rows-6 gap-y-4"
-      in:fly={{ x: '-100%' }}
-      out:fly={{ x: '100%' }}
+      in:fly|local={{ x: '-100%' }}
+      out:fly|local={{ x: '100%' }}
     >
       {#each monthDaysByWeek ?? [] as week, weekIndex (weekIndex)}
         {#each week ?? [] as day (day.valueOf())}

src/lib/components/Notification.svelte

@@ -43,7 +43,7 @@
 {#if open}
   <div
     class="notification rounded-lg border bg-white shadow-lg z-10"
-    transition:fly={{ duration: 200, easing: quadIn, x: 100 }}
+    transition:fly|local={{ duration: 200, easing: quadIn, x: 100 }}
     on:outroend={() => dispatch('close')}
     on:click={onClick}
     bind:this={notificationEl}

src/lib/components/RangeSlider.svelte

@@ -304,7 +304,7 @@
     <output
       style="left: calc(var(--start) * 100%);"
       class="value absolute top-1/2 -translate-x-1/2 -translate-y-[180%] text-xs text-white bg-accent-500 rounded-full px-2 shadow"
-      transition:fly={{ y: 4, duration: 300 }}
+      transition:fly|local={{ y: 4, duration: 300 }}
     >
       {value[0]}
     </output>
@@ -314,7 +314,7 @@
     <output
       style="left: calc(var(--end) * 100%);"
       class="value absolute top-1/2 -translate-x-1/2 -translate-y-[180%] text-xs text-white bg-accent-500 rounded-full px-2 shadow"
-      transition:fly={{ y: 4, duration: 300 }}
+      transition:fly|local={{ y: 4, duration: 300 }}
     >
       {value[1]}
     </output>

src/lib/components/Tooltip.svelte

@@ -53,7 +53,7 @@
   }
 </script>
 
-{#if enabled}
+{#if enabled && (title || $$slots.title)}
   <Popover
     anchorEl={containerEl?.firstElementChild}
     {placement}
@@ -65,18 +65,16 @@
     {...$$restProps}
   >
     <slot name="title">
-      {#if title}
-        <div
-          class="text-white text-xs bg-gray-900/90 px-2 py-1 rounded whitespace-nowrap"
-          transition:fly={{
-            x: placement === 'left' ? 6 : placement === 'right' ? -6 : 0,
-            y: placement === 'top' ? 6 : placement === 'bottom' ? -6 : 0,
-            duration: 300,
-          }}
-        >
-          {title}
-        </div>
-      {/if}
+      <div
+        class="text-white text-xs bg-gray-900/90 px-2 py-1 rounded whitespace-nowrap"
+        transition:fly|local={{
+          x: placement === 'left' ? 6 : placement === 'right' ? -6 : 0,
+          y: placement === 'top' ? 6 : placement === 'bottom' ? -6 : 0,
+          duration: 300,
+        }}
+      >
+        {title}
+      </div>
     </slot>
   </Popover>
 {/if}