feat: update to svelte 5svelte-5

5 files changed, 64 insertions, 26 deletions

diff --git a/src/lib/Loading/Ellipsis.svelte b/src/lib/Loading/Ellipsis.svelte
index ba1f30b8..7ee9dcfb 100644
--- a/src/lib/Loading/Ellipsis.svelte
+++ b/src/lib/Loading/Ellipsis.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
-  export let colour = 'var(--fg)';
+  interface Props {
+    colour?: string;
+  }
+
+  let { colour = 'var(--fg)' }: Props = $props();
 </script>
 
 <div class="ellipsis" style={`--loader-colour: ${colour};`}>
   {#each Array.from({ length: 4 }) as _}
-    <div />
+    <div></div>
   {/each}
 </div>
 
diff --git a/src/lib/Loading/Grid.svelte b/src/lib/Loading/Grid.svelte
index 1a64b3e0..107b985b 100644
--- a/src/lib/Loading/Grid.svelte
+++ b/src/lib/Loading/Grid.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
-  export let colour = 'var(--fg)';
+  interface Props {
+    colour?: string;
+  }
+
+  let { colour = 'var(--fg)' }: Props = $props();
 </script>
 
 <div class="grid" style={`--loader-colour: ${colour};`}>
   {#each Array.from({ length: 9 }) as _}
-    <div />
+    <div></div>
   {/each}
 </div>
 
diff --git a/src/lib/Loading/Message.svelte b/src/lib/Loading/Message.svelte
index 5aabec9c..c940a452 100644
--- a/src/lib/Loading/Message.svelte
+++ b/src/lib/Loading/Message.svelte
@@ -4,12 +4,25 @@
   import Grid from './Grid.svelte';
   import Popup from '$lib/Layout/Popup.svelte';
 
-  export let message: string | undefined = undefined;
-  export let loader: 'ellipsis' | 'ripple' | 'grid' = 'ellipsis';
-  export let colour = 'var(--fg)';
-  export let slot = false;
-  export let withReload = false;
-  export let fullscreen = true;
+  interface Props {
+    message?: string | undefined;
+    loader?: 'ellipsis' | 'ripple' | 'grid';
+    colour?: string;
+    slot?: boolean;
+    withReload?: boolean;
+    fullscreen?: boolean;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    message = undefined,
+    loader = 'ellipsis',
+    colour = 'var(--fg)',
+    slot = false,
+    withReload = false,
+    fullscreen = true,
+    children
+  }: Props = $props();
 </script>
 
 <Popup {fullscreen} locked>
@@ -29,10 +42,10 @@
     {:else if slot}
       <br />
 
-      <slot />
+      {@render children?.()}
 
       {#if withReload}
-        Please <a href={'#'} on:click={() => location.reload()}>try again</a> later.
+        Please <a href={'#'} onclick={() => location.reload()}>try again</a> later.
       {/if}
     {/if}
   </div>
diff --git a/src/lib/Loading/Ripple.svelte b/src/lib/Loading/Ripple.svelte
index 05d62bb5..20b1447a 100644
--- a/src/lib/Loading/Ripple.svelte
+++ b/src/lib/Loading/Ripple.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
-  export let colour = 'var(--fg)';
+  interface Props {
+    colour?: string;
+  }
+
+  let { colour = 'var(--fg)' }: Props = $props();
 </script>
 
 <div class="ripple" style={`--loader-colour: ${colour};`}>
-  <div />
-  <div />
+  <div></div>
+  <div></div>
 </div>
 
 <style lang="scss">
diff --git a/src/lib/Loading/Skeleton.svelte b/src/lib/Loading/Skeleton.svelte
index 3f39beec..5ca3789a 100644
--- a/src/lib/Loading/Skeleton.svelte
+++ b/src/lib/Loading/Skeleton.svelte
@@ -1,12 +1,25 @@
 <script lang="ts">
-  export let count = 3;
-  export let width = '100%';
-  export let height = '100px';
-  export let card = true;
-  export let grid = false;
-  export let list = false;
-  export let pad = false;
-  export let bigCard = false;
+  interface Props {
+    count?: number;
+    width?: string;
+    height?: string;
+    card?: boolean;
+    grid?: boolean;
+    list?: boolean;
+    pad?: boolean;
+    bigCard?: boolean;
+  }
+
+  let {
+    count = 3,
+    width = '100%',
+    height = '100px',
+    card = true,
+    grid = false,
+    list = false,
+    pad = false,
+    bigCard = false
+  }: Props = $props();
 </script>
 
 {#if grid}
@@ -14,7 +27,7 @@
     {#each Array(count) as _, i}
       <div class={card ? `${bigCard ? 'card' : ''} card-small` : ''} style={`width: ${width};`}>
         <div class="skeleton-container" style={`--i: ${i};`}>
-          <div class="skeleton" style={`width: ${width}; height: ${height};`} />
+          <div class="skeleton" style={`width: ${width}; height: ${height};`}></div>
         </div>
       </div>
     {/each}
@@ -26,12 +39,12 @@
       style={`width: ${width}; ${list ? 'padding-top: .75em;' : ''}; --i: ${i};`}
     >
       <div class="skeleton-container">
-        <div class="skeleton" style={`width: ${width}; height: ${height};`} />
+        <div class="skeleton" style={`width: ${width}; height: ${height};`}></div>
       </div>
     </div>
 
     {#if !list && i < count - 1}
-      <p />
+      <p></p>
     {/if}
   {/each}
 {/if}