{% comment %}
Component: Drawer / Sheet
Slide-over drawer component using dialog semantics.
{% endcomment %}
<dialog id="{{ id }}"
        x-data="{}"
        aria-labelledby="{{ id }}_title"
        class="fixed {% if side == 'bottom' %}inset-x-0 bottom-0 max-h-[85vh] w-full border-t m-0 mt-auto{% elif side == 'start' %}inset-y-0 left-0 h-full max-h-screen border-r w-full {% if width %}{{ width }}{% else %}max-w-md{% endif %} m-0 mr-auto{% else %}inset-y-0 right-0 h-full max-h-screen border-l w-full {% if width %}{{ width }}{% else %}max-w-md{% endif %} m-0 ml-auto{% endif %} bg-surface text-text border-border shadow-overlay p-6 z-50 overflow-y-auto backdrop:bg-scrim">
    <div class="flex items-center justify-between mb-4 border-b border-border pb-3">
        <h3 id="{{ id }}_title" class="text-base font-semibold text-text">{{ title }}</h3>
        <button type="button"
                @click="$el.closest('dialog').close()"
                aria-label="Fechar painel"
                class="p-1 rounded-md text-subtle hover:text-text hover:bg-surface-sunken focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
    </div>
    <div class="drawer__body">
        {{ content|default:"" }}
    </div>
</dialog>