<script>
import { Modal } from 'svelte-html-modal@3';
// Client-side JavaScript is required to display the modal.
// Even if the initial state is set to true, the modal will be displayed after hydration.
// Reference https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal
let isOpen = $state(false);
const open = () => (isOpen = true);
const close = () => (isOpen = false);
let closeOnBackdropClick = $state(true);
let closeOnEscapeKey = $state(true);
let enableTransitions = $state(true);
</script>
<button type="button" onclick={open}>Open Modal</button>
<span>/</span>
<a href="https://github.com/hyunbinseo/svelte-html-modal#readme">svelte-html-modal</a>
<fieldset style:width="fit-content" style:margin-top="1rem">
<legend>Options</legend>
<label>
<input type="checkbox" bind:checked={closeOnBackdropClick} />
<span>Close on Backdrop Click</span>
</label>
<br />
<label>
<input type="checkbox" bind:checked={closeOnEscapeKey} />
<span>Close on Escape Key</span>
</label>
<br />
<label>
<input type="checkbox" bind:checked={enableTransitions} />
<span>Enable Transitions</span>
</label>