Use Modals for dialog boxes. If you need the modal to open by itself, pass { open: true } as an option.
import { ButtonKind } from "@hedia/windfall/css/buttons";
import { ModalSize } from "@hedia/windfall/css/modals";
import { button } from "@hedia/windfall/html/buttons";
import { modalBody, modalDialog, modalFooter, modalHeader, modalTitle } from "@hedia/windfall/html/modals";
import { paragraph } from "@hedia/windfall/html/paragraph";
button(
{
kind: ButtonKind.Primary,
"data-action": "showModal",
"data-target": "#modal",
},
"Show modal",
),
modalDialog(
{ id: "modal", size: ModalSize.Small },
modalHeader(modalTitle("Lorem ipsum dolor sit amet.")),
modalBody(
paragraph(
"Suspendisse sodales orci nec sodales ultrices. Cras velit augue, accumsan non lobortis id, sollicitudin sed massa.",
),
),
modalFooter(
button({ kind: ButtonKind.Primary }, "Primary Action"),
button({ kind: ButtonKind.Secondary, "data-action": "close" }, "Cancel"),
),
),