johnandersen777.bsky.social/knotless
git that lives in your Atmosphere account
Forked from chadtmiller.com/knotless
0
0
<script lang="ts">
import type { Snippet } from 'svelte';
/**
* A dialog over the dimmed page, opened by a button whose
* `popovertarget` is its `id`, or by `showPopover`: its `title`, a
* button to close it, then `children`. `class` names it for its own
* styles; `ontoggle` hears it open and close. While `held`, it
* cannot be closed by its button, as while a write it began is under way.
*/
let {
id,
title,
class: kind = '',
held = false,
ontoggle,
children
}: {
id: string;
title: string;
class?: string;
held?: boolean;
ontoggle?: (e: ToggleEvent) => void;
children: Snippet;
} = $props();
</script>
<div
class={['dialog', kind]}
{id}
popover="auto"
role="dialog"
aria-modal="true"
aria-labelledby="{id}-title"
{ontoggle}
>
<h2 id="{id}-title">{title}</h2>
<button
class="btn close"
popovertarget={id}
popovertargetaction="hide"
aria-label="Close"
disabled={held}>×</button
>
{@render children()}
</div>