feat: Migrate component Toasts to Svelte 5 (#668)

# Motivation

Migrating component `Toasts` to Svelte 5.

Author: AntonioVentilii

src/lib/components/Toasts.svelte

@@ -2,19 +2,24 @@
   import { toastsStore } from "$lib/stores/toasts.store";
   import Toast from "./Toast.svelte";
   import { layoutBottomOffset } from "$lib/stores/layout.store";
-  import type { ToastMsg, ToastPosition } from "$lib/types/toast";
+  import type { ToastPosition } from "$lib/types/toast";
 
-  export let position: ToastPosition = "bottom";
-  export let maxVisible: number | undefined = undefined;
+  interface Props {
+    position?: ToastPosition;
+    maxVisible?: number;
+  }
+
+  let { position = "bottom", maxVisible }: Props = $props();
 
-  let toasts: ToastMsg[] = [];
-  $: toasts = $toastsStore
-    .filter(({ position: pos }) => (pos ?? "bottom") === position)
-    .slice(0, maxVisible);
+  let toasts = $derived(
+    $toastsStore
+      .filter(({ position: pos }) => (pos ?? "bottom") === position)
+      .slice(0, maxVisible),
+  );
 
-  let hasErrors: boolean;
-  $: hasErrors =
-    toasts.find(({ level }) => ["error", "warn"].includes(level)) !== undefined;
+  let hasErrors = $derived(
+    toasts.find(({ level }) => ["error", "warn"].includes(level)) !== undefined,
+  );
 </script>
 
 {#if toasts.length > 0}
@@ -41,7 +46,7 @@
     // If a bottom sheet is displayed the toasts should have a related offset
     bottom: calc(var(--layout-bottom-offset, 0) + var(--padding-2x));
 
-    // A little narrowwer than the section to differentiate notifications from content
+    // A little narrower than the section to differentiate notifications from content
     width: calc(100% - var(--padding-8x) - var(--padding-0_5x));
 
     display: flex;
@@ -55,7 +60,7 @@
     }
 
     @include media.min-width(medium) {
-      // A little narrowwer than the section to differentiate notifications from content
+      // A little narrower than the section to differentiate notifications from content
       max-width: calc(var(--section-max-width) - var(--padding-2x));
     }
   }