src/lib/components/Modal.svelte

<script lang="ts">
    import { createEventDispatcher } from "svelte";
    const dispatch = createEventDispatcher();
</script>

<div
    class="fixed inset-0 bg-black/60 flex items-center justify-center p-4 z-50"
    role="dialog"
    aria-modal="true"
    aria-label="Image preview"
    tabindex="0"
    on:click={(e) => {
        if (e.target === e.currentTarget) dispatch("close");
    }}
    on:keydown={(e) => {
        if (e.key === "Escape" || e.key === "Enter" || e.key === " ")
            dispatch("close");
    }}
>
    <slot></slot>
</div>