Rework modal header structure

src/lib/components/Confirm.svelte

@@ -6,6 +6,8 @@
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -37,12 +39,8 @@
 <Modal tag="form" onsubmit={preventDefault(tryConfirm)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>{restProps.title || "Are you sure?"}</div>
-      {/snippet}
-      {#snippet info()}
-        <div>{subtitle}</div>
-      {/snippet}
+      <ModalTitle>{restProps.title || "Are you sure?"}</ModalTitle>
+      <ModalSubtitle>{subtitle}</ModalSubtitle>
     </ModalHeader>
     <p class="text-center">{message}</p>
   </ModalBody>

src/lib/components/Dialog.svelte

@@ -37,12 +37,12 @@
   <button
     type="button"
     aria-label="Close dialog"
-    class="absolute inset-0 cursor-pointer bg-[#ccc] opacity-75 dark:bg-black"
-    transition:fade={{duration: 300}}
+    class="absolute inset-0 cursor-pointer bg-black opacity-50 dark:opacity-75"
+    transition:fade={{duration: 200}}
     onclick={onClose}>
   </button>
   <div class={wrapperClass}>
-    <div class={innerClass} transition:fly={{duration: 300}}>
+    <div class={innerClass} transition:fly>
       <children.component {...children.props} />
     </div>
   </div>

src/lib/components/ModalHeader.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
+  import type {Snippet} from "svelte"
+
   interface Props {
-    title?: import("svelte").Snippet
-    info?: import("svelte").Snippet
+    children: Snippet
   }
 
-  const {title, info}: Props = $props()
+  const {children}: Props = $props()
 </script>
 
 <div class="flex flex-col m-auto max-w-xs gap-2 py-4">
-  <h1 class="heading">{@render title?.()}</h1>
-  <p class="text-center text-sm opacity-75">{@render info?.()}</p>
+  {@render children()}
 </div>

src/lib/components/ModalSubtitle.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+
+  interface Props {
+    children: Snippet
+  }
+
+  const {children}: Props = $props()
+</script>
+
+<p class="text-center text-sm opacity-75">{@render children()}</p>

src/lib/components/ModalTitle.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+
+  interface Props {
+    children: Snippet
+  }
+
+  const {children}: Props = $props()
+</script>
+
+<h1 class="heading">{@render children()}</h1>