{% props id: String, title: String, description: String = "", inner_block: Slot, open: bool = false %}
<dialog class="ui-dialog" id="{{ id }}" aria-labelledby="{{ id }}-title"{% if open %} open{% end %}>
<div class="ui-dialog-header">
<h2 class="ui-dialog-title" id="{{ id }}-title">{{ title }}</h2>
{%- if !description.is_empty() %}
<p class="ui-dialog-description">{{ description }}</p>
{%- end %}
</div>
{{ inner_block }}
<form method="dialog"><button class="ui-dialog-close" aria-label="Close"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></form>
</dialog>