Update transitions to Svelte 4 compatible (default local, explicit `|…

…global` instead of default global, explicit `|local`). Fix ToggleButton Dialog/Drawer transition in. Issue #90

.changeset/olive-phones-accept.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+Update transitions to Svelte 4 compatible (default local, explicit `|global` instead of default global, explicit `|local`). Fix ToggleButton Dialog/Drawer transition in

src/lib/components/Backdrop.svelte

@@ -27,8 +27,8 @@
   on:click
   on:mousedown
   on:mouseup
-  in:fade={fadeParams}
-  out:fade|local={fadeParams}
+  in:fade|global={fadeParams}
+  out:fade={fadeParams}
   use:portalAction={portal}
 >
   <slot />

src/lib/components/Button.svelte

@@ -253,11 +253,11 @@
   on:blur
 >
   {#if loading}
-    <span transition:slide|local={{ axis: 'x', duration: 200 }}>
+    <span transition:slide={{ axis: 'x', duration: 200 }}>
       <ProgressCircle size={16} width={2} class={cls(theme.loading, classes.loading)} />
     </span>
   {:else if icon}
-    <span in:slide|local={{ axis: 'x', duration: 200 }}>
+    <span in:slide={{ axis: 'x', duration: 200 }}>
       {#if typeof icon === 'string' || 'icon' in icon}
         <!-- font path/url/etc or font-awesome IconDefinition -->
         <Icon data={icon} class={cls('pointer-events-none', theme.icon, classes.icon)} />

src/lib/components/Collapse.svelte

@@ -90,7 +90,7 @@
   </button>
 
   {#if open}
-    <div transition:transition|local={transitionParams} class={cls(theme.content, classes.content)}>
+    <div transition:transition={transitionParams} class={cls(theme.content, classes.content)}>
       <slot {open} />
     </div>
   {/if}

src/lib/components/CopyButton.svelte

@@ -26,6 +26,6 @@
   }}
 >
   {#if showMessage}
-    <span transition:slide|local={{ axis: 'x', duration: 200 }}>Copied!</span>
+    <span transition:slide={{ axis: 'x', duration: 200 }}>Copied!</span>
   {/if}
 </Button>

src/lib/components/DatePickerField.svelte

@@ -127,10 +127,7 @@
 
 <Dialog bind:open>
   {#if currentValue}
-    <div
-      class="flex flex-col justify-center bg-accent-500 text-white px-6 h-24"
-      transition:slide|local
-    >
+    <div class="flex flex-col justify-center bg-accent-500 text-white px-6 h-24" transition:slide>
       <div class="text-sm text-white/50">
         {dateDisplay(currentValue, { format: secondaryFormat })}
       </div>

src/lib/components/Dialog.svelte

@@ -114,8 +114,8 @@
         $$props.class
       )}
       style={$$props.style}
-      in:scale={{ duration: 150, easing: quadIn }}
-      out:scale|local={{ duration: 150, easing: quadIn }}
+      in:scale|global={{ duration: 150, easing: quadIn }}
+      out:scale={{ duration: 150, easing: quadIn }}
       on:introstart
       on:outrostart
       on:introend

src/lib/components/Drawer.svelte

@@ -65,11 +65,11 @@
       $$props.class
     )}
     style={$$props.style}
-    in:fly={{
+    in:fly|global={{
       x: placement === 'left' ? '-100%' : placement === 'right' ? '100%' : 0,
       y: placement === 'top' ? '-100%' : placement === 'bottom' ? '100%' : 0,
     }}
-    out:fly|local={{
+    out:fly={{
       x: placement === 'left' ? '-100%' : placement === 'right' ? '100%' : 0,
       y: placement === 'top' ? '-100%' : placement === 'bottom' ? '100%' : 0,
     }}

src/lib/components/Notification.svelte

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

src/lib/components/Overlay.svelte

@@ -24,7 +24,7 @@
     theme.root,
     $$props.class
   )}
-  transition:transitionFn|local={transitionConfig}
+  transition:transitionFn={transitionConfig}
 >
   <slot />
 </div>

src/lib/components/Preview.svelte

@@ -25,7 +25,7 @@
       <pre
         class="language-{language} rounded"
         style="margin: 0; white-space: normal;"
-        transition:slide|local>
+        transition:slide>
           <code class="language-{language}">{@html highlightedCode}</code>
       </pre>
 

src/lib/components/RangeSlider.svelte

@@ -310,7 +310,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|local={{ y: 4, duration: 300 }}
+      transition:fly={{ y: 4, duration: 300 }}
     >
       {value[0]}
     </output>
@@ -320,7 +320,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|local={{ y: 4, duration: 300 }}
+      transition:fly={{ y: 4, duration: 300 }}
     >
       {value[1]}
     </output>

src/lib/components/Tab.svelte

@@ -34,7 +34,7 @@
     $$props.class
   )}
   on:click
-  transition:slide|local={{ axis: vertical ? 'y' : 'x' }}
+  transition:slide={{ axis: vertical ? 'y' : 'x' }}
 >
   <slot />
 </button>

src/lib/components/ToggleOption.svelte

@@ -64,7 +64,7 @@
     <div
       class={cls('indicator', $classesContext.indicator, theme.indicator, classes.indicator)}
       in:receive={{ key: 'indicator' }}
-      out:send|local={{ key: 'indicator' }}
+      out:send={{ key: 'indicator' }}
     />
   {/if}
 

src/lib/components/Tooltip.svelte

@@ -92,7 +92,7 @@
           theme.title,
           classes.title
         )}
-        transition:fly|local={{
+        transition:fly={{
           x: placement === 'left' ? 6 : placement === 'right' ? -6 : 0,
           y: placement === 'top' ? 6 : placement === 'bottom' ? -6 : 0,
           duration: 300,

src/routes/docs/+layout.svelte

@@ -140,7 +140,7 @@
 
 <div class="px-4">
   {#if showTableOfContents && !$xlScreen}
-    <div transition:fade|local class="mt-3">
+    <div transition:fade class="mt-3">
       {#key $page.route.id}
         <TableOfContents />
       {/key}
@@ -226,7 +226,7 @@
     </div>
 
     {#if showTableOfContents && $xlScreen}
-      <div transition:slide|local={{ axis: 'x' }}>
+      <div transition:slide={{ axis: 'x' }}>
         <div class="w-[224px] sticky top-0 pr-2 max-h-[calc(100vh-64px)] overflow-auto z-20">
           <div class="text-xs uppercase leading-8 tracking-widest text-black/50">On this page</div>
           <!-- Rebuild toc when page changes -->