Transition on PwdFormInput

src/lib/PwdFormInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="T extends Record<string, unknown>">
   import { Field, Control, FieldErrors } from "formsnap";
   import type { FormPath, SuperForm } from "sveltekit-superforms";
+  import { scale } from 'svelte/transition';
   import Icon from "@iconify/svelte";
 
   let { form, label, name }: {
@@ -12,7 +13,6 @@
 
   let show = $state(false);
   let type = $derived(show ? 'text' : 'password');
-
 </script>
 
 <div>
@@ -26,11 +26,13 @@
                    bind:value={$formData[name]} {...props}
             />
           </label>
-          <button class="btn btn-circle" onclick={() => show = !show}>
+          <button class="btn btn-circle grid" onclick={() => show = !show} type="button">
             {#if show}
-              <Icon icon="mdi:eye-off-outline"/>
+              <span transition:scale class="col-start-1 col-end-2 row-start-1 row-end-2"><Icon
+                      icon="mdi:eye-off-outline"/></span>
             {:else }
-              <Icon icon="mdi:eye-outline"/>
+              <span transition:scale class="col-start-1 col-end-2 row-start-1 row-end-2"><Icon
+                      icon="mdi:eye-outline"/></span>
             {/if}
           </button>
         </div>