@props(['id', 'label', 'title' => null, 'variant' => 'primary'])

{{--
    Diálogo acionável **nativo** (Popover API — sem JS): abre ancorado, fecha com `Esc`/light-dismiss
    e o `aria-expanded` do botão é gerido pelo navegador. Sem suporte a Popover, o painel fica no
    fluxo (visível e utilizável) — nunca é a única forma de ver o conteúdo.
--}}
<button type="button" class="btn btn-{{ $variant }}" popovertarget="{{ $id }}">
    {{ $label }}
</button>

<div id="{{ $id }}" class="cms-modal" popover role="dialog"
     @if (filled($title)) aria-labelledby="{{ $id }}-title" @else aria-label="{{ $label }}" @endif>
    <div class="cms-modal__panel">
        @if (filled($title))
            <h2 id="{{ $id }}-title" class="cms-modal__title">{{ $title }}</h2>
        @endif

        <div class="cms-modal__body">
            {{ $slot }}
        </div>

        <div class="cms-modal__actions">
            <button type="button" class="btn btn-ghost" popovertarget="{{ $id }}" popovertargetaction="hide">
                <x-ui::icon name="x" />
                <span>{{ __('layout::shell.close') }}</span>
            </button>
        </div>
    </div>
</div>