BSlideOverlay in qrcode and qrcode/status

src/lib/BSlideOverlay.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { slide, fade } from 'svelte/transition';
+  import type { Snippet } from "svelte";
+
+  let { show = $bindable(), closable = true, children }: {
+    show: boolean,
+    closable: boolean
+    children: Snippet<[{ closeOverlay: () => void }]>
+  } = $props();
+
+  function closeOverlay() {
+    if (!closable) return;
+    show = false;
+  }
+</script>
+
+{#if show}
+  <div class="fixed inset-0 h-screen w-screen z-20 pointer-events-auto flex flex-col justify-end items-center">
+    <button type="button" class="bg-base-100/50 w-full grow z-20"
+            transition:fade={{duration:200}}
+            onclick={closeOverlay}
+            aria-label="Close Overlay"
+    ></button>
+    <div class="h-fit flex flex-col items-center gap-2 rounded-t-md pointer-events-auto p-2 z-20"
+         data-theme="light"
+         transition:slide>
+      {@render children({ closeOverlay })}
+    </div>
+  </div>
+{/if}