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-check": "^3.8.6",
+		"svelte": "^5.0.0",
+		"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,44 +3,55 @@
 	// 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">
-		<!-- App Bar -->
-		<AppBar>
-			<svelte:fragment slot="lead">
-				<strong class="text-xl uppercase">Skeleton</strong>
-			</svelte:fragment>
-			<svelte:fragment slot="trail">
-				<a
-					class="btn btn-sm variant-ghost-surface"
-					href="https://discord.gg/EXqV7W8MtY"
-					target="_blank"
-					rel="noreferrer"
-				>
-					Discord
-				</a>
-				<a
-					class="btn btn-sm variant-ghost-surface"
-					href="https://twitter.com/SkeletonUI"
-					target="_blank"
-					rel="noreferrer"
-				>
-					Twitter
-				</a>
-				<a
-					class="btn btn-sm variant-ghost-surface"
-					href="https://github.com/skeletonlabs/skeleton"
-					target="_blank"
-					rel="noreferrer"
-				>
-					GitHub
-				</a>
-			</svelte:fragment>
-		</AppBar>
-	</svelte:fragment>
+	{#snippet header()}
+	
+			<!-- App Bar -->
+			<AppBar>
+				{#snippet lead()}
+					
+						<strong class="text-xl uppercase">Skeleton</strong>
+					
+					{/snippet}
+				{#snippet trail()}
+					
+						<a
+							class="btn btn-sm variant-ghost-surface"
+							href="https://discord.gg/EXqV7W8MtY"
+							target="_blank"
+							rel="noreferrer"
+						>
+							Discord
+						</a>
+						<a
+							class="btn btn-sm variant-ghost-surface"
+							href="https://twitter.com/SkeletonUI"
+							target="_blank"
+							rel="noreferrer"
+						>
+							Twitter
+						</a>
+						<a
+							class="btn btn-sm variant-ghost-surface"
+							href="https://github.com/skeletonlabs/skeleton"
+							target="_blank"
+							rel="noreferrer"
+						>
+							GitHub
+						</a>
+					
+					{/snippet}
+			</AppBar>
+		
+	{/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"