migration to Svelte 5

package.json

@@ -18,7 +18,7 @@
 		"@skeletonlabs/tw-plugin": "^0.3.1",
 		"@sveltejs/adapter-static": "^3.0.5",
 		"@sveltejs/kit": "^2.7.2",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/typography": "^0.5.15",
 		"@types/chrome": "^0.0.254",
@@ -32,8 +32,8 @@
 		"postcss": "^8.4.47",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.7",
-		"svelte": "^4.2.19",
+		"svelte": "^5.0.0",
-		"svelte-check": "^3.8.6",
+		"svelte-check": "^4.0.0",
 		"sveltekit-adapter-chrome-extension": "^2.0.1",
 		"tailwindcss": "^3.4.14",
 		"tslib": "^2.8.0",

src/routes/+layout.svelte

@@ -3,17 +3,26 @@
 	// Most of your app wide CSS should be put in this file
 	import '../app.postcss';
 	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 </script>
 
 <!-- App Shell -->
 <AppShell>
-	<svelte:fragment slot="header">
+	{#snippet header()}
+	
 			<!-- App Bar -->
 			<AppBar>
-			<svelte:fragment slot="lead">
+				{#snippet lead()}
+					
 						<strong class="text-xl uppercase">Skeleton</strong>
-			</svelte:fragment>
+					
-			<svelte:fragment slot="trail">
+					{/snippet}
+				{#snippet trail()}
+					
 						<a
 							class="btn btn-sm variant-ghost-surface"
 							href="https://discord.gg/EXqV7W8MtY"
@@ -38,9 +47,11 @@
 						>
 							GitHub
 						</a>
-			</svelte:fragment>
+					
+					{/snippet}
 			</AppBar>
-	</svelte:fragment>
+		
+	{/snippet}
 	<!-- Page Route Content -->
-	<slot />
+	{@render children?.()}
 </AppShell>

src/routes/+page.svelte

@@ -5,7 +5,7 @@
 		<h2 class="h2 font-bold">Welcome to Skeleton.</h2>
 		<!-- Animated Logo -->
 		<figure>
-			<section class="img-bg" />
+			<section class="img-bg"></section>
 			<svg
 				class="fill-token -scale-x-[100%] !h-24 !w-24"
 				xmlns="http://www.w3.org/2000/svg"