2 files changed, 50 insertions, 23 deletions
diff --git a/src/lib/Image/FallbackImage.svelte b/src/lib/Image/FallbackImage.svelte
index 2029cf0e..1eafdd4c 100644
--- a/src/lib/Image/FallbackImage.svelte
+++ b/src/lib/Image/FallbackImage.svelte
@@ -1,14 +1,27 @@
 <script lang="ts">
-  export let source: string | undefined | null;
-  export let alternative: string | undefined | null;
-  export let fallback: string | undefined | null;
-  export let maxReplaceCount = 1;
-  export let replaceDelay = 1000;
-  export let error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg';
-  export let hideOnError = false;
-  export let style = '';
+  interface Props {
+    source: string | undefined | null;
+    alternative: string | undefined | null;
+    fallback: string | undefined | null;
+    maxReplaceCount?: number;
+    replaceDelay?: number;
+    error?: string;
+    hideOnError?: boolean;
+    style?: string;
+  }
+
+  let {
+    source,
+    alternative,
+    fallback,
+    maxReplaceCount = 1,
+    replaceDelay = 1000,
+    error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg',
+    hideOnError = false,
+    style = ''
+  }: Props = $props();
 
-  let replaceCount = 0;
+  let replaceCount = $state(0);
 
   const delayedReplace = (event: Event, image: string | undefined | null) => {
     if (replaceCount >= maxReplaceCount) return;
@@ -27,7 +40,7 @@
     alt={alternative}
     loading="lazy"
     class="badge"
-    on:error={(e) => delayedReplace(e, fallback)}
+    onerror={(e) => delayedReplace(e, fallback)}
     {style}
   />
 {:else if !hideOnError}
diff --git a/src/lib/Image/ParallaxImage.svelte b/src/lib/Image/ParallaxImage.svelte
index 48565ce1..390b9c92 100644
--- a/src/lib/Image/ParallaxImage.svelte
+++ b/src/lib/Image/ParallaxImage.svelte
@@ -2,17 +2,31 @@
   import { cubicOut } from 'svelte/easing';
   import { tweened } from 'svelte/motion';
 
-  export let source: string;
-  export let duration = 300 * 1.75;
-  export let easing = cubicOut;
-  export let alternativeText: string;
-  export let classList = '';
-  export let style = '';
-  export let factor = 1.25;
-  export let limit = 300 * 1.75;
-  export let borderRadius = '8px';
-
-  let badgeReference: HTMLImageElement;
+  interface Props {
+    source: string;
+    duration?: any;
+    easing?: any;
+    alternativeText: string;
+    classList?: string;
+    style?: string;
+    factor?: number;
+    limit?: any;
+    borderRadius?: string;
+  }
+
+  let {
+    source,
+    duration = 300 * 1.75,
+    easing = cubicOut,
+    alternativeText,
+    classList = '',
+    style = '',
+    factor = 1.25,
+    limit = 300 * 1.75,
+    borderRadius = '8px'
+  }: Props = $props();
+
+  let badgeReference: HTMLImageElement = $state();
   const mouse = tweened({ x: 0, y: 0 }, { duration, easing });
 
   const handleMouseMove = (event: MouseEvent) => {
@@ -40,7 +54,7 @@
     -$mouse.x / 10
   }deg); border-radius: ${borderRadius}; ${style}`}
   alt={alternativeText}
-  on:mousemove={handleMouseMove}
-  on:mouseleave={handleMouseLeave}
+  onmousemove={handleMouseMove}
+  onmouseleave={handleMouseLeave}
   class={classList}
 />