Update

src/components/styled/SWModal.svelte

@@ -18,23 +18,30 @@
   -->
 
 <script lang="ts">
+  import { run, createBubbler, stopPropagation } from 'svelte/legacy';
+
+  const bubble = createBubbler();
     import {createEventDispatcher, onMount} from "svelte";
 
-    export let title: string;
-    export let open: boolean;
-    let internalOpen = open;
+  interface Props {
+    title: string;
+    open: boolean;
+    children?: import('svelte').Snippet;
+    footer?: import('svelte').Snippet;
+  }
+
+  let {
+    title,
+    open = $bindable(),
+    children,
+    footer
+  }: Props = $props();
+    let internalOpen = $state(open);
 
     const dispatch = createEventDispatcher();
 
-    $: if (open && !internalOpen) {
-        dialog.showModal();
-        internalOpen = true;
-    } else if (!open && internalOpen) {
-        dialog.close();
-        internalOpen = false;
-    }
 
-    let dialog: HTMLDialogElement;
+    let dialog: HTMLDialogElement = $state();
 
     onMount(() => {
         if (open) {
@@ -48,18 +55,27 @@
         internalOpen = false;
         dispatch("close");
     }
+    run(() => {
+    if (open && !internalOpen) {
+          dialog.showModal();
+          internalOpen = true;
+      } else if (!open && internalOpen) {
+          dialog.close();
+          internalOpen = false;
+      }
+  });
 </script>
 
-<dialog bind:this={dialog} on:close={close} on:cancel={close} on:click={() => dialog.close()} aria-hidden="true">
-    <div on:click|stopPropagation aria-hidden="true">
+<dialog bind:this={dialog} onclose={close} oncancel={close} onclick={() => dialog.close()} aria-hidden="true">
+    <div onclick={stopPropagation(bubble('click'))} aria-hidden="true">
         <div class="spaced bordered">
             <h1>{title}</h1>
         </div>
         <div class="spaced main bordered">
-            <slot />
+            {@render children?.()}
         </div>
-        <div class="footer spaced" on:click={() => dialog.close()} aria-hidden="true">
-            <slot name="footer" />
+        <div class="footer spaced" onclick={() => dialog.close()} aria-hidden="true">
+            {@render footer?.()}
         </div>
     </div>
 </dialog>