{#- chirp-ui: Popover component
    Anchor-positioned, focus-managed floating panel with interactive content.
    Replaces the previous <details>-based popover with Alpine positioning,
    Escape/click-outside dismiss, and Tab focus trap inside the panel.

    Named slots: header, footer, default (panel content).

    Usage:
        from "chirpui/popover.html" import popover

        call popover(trigger_label="Filters")
            {% slot header %}<h3>Filters</h3>{% end %}
            <form>...</form>
            {% slot footer %}<button>Apply</button>{% end %}
        end
-#}

{% def popover(trigger_label, cls="", id="chirpui-popover") %}
<div class="chirpui-popover{{ " " ~ cls if cls else "" }}" id="{{ id }}" x-id="['popover-panel']"
     :data-align-x="alignX"
     :data-align-y="alignY"
     x-data="chirpuiPopover()"
     @keydown.escape.prevent.stop="close($refs.trigger)"
     @focusin.window="!$refs.panel?.contains($event.target) && close($refs.trigger)"
     @click.outside="close($refs.trigger)"
     @resize.window="open && reposition()">
    <div class="chirpui-popover__trigger" x-ref="trigger"
         role="button" tabindex="0" aria-haspopup="dialog" :aria-expanded="open"
         :aria-controls="$id('popover-panel')"
         @click="toggle()"
         @keydown="onTriggerKeydown($event)">
        {{ trigger_label }}
    </div>
    <div class="chirpui-popover__panel" x-ref="panel" :id="$id('popover-panel')"
         role="dialog" aria-modal="false"
         x-show="open" x-cloak x-transition
         @keydown.tab="trapFocus($event)">
        <div class="chirpui-popover__header">{% slot header %}</div>
        {% slot %}
        <div class="chirpui-popover__footer">{% slot footer %}</div>
    </div>
</div>
{% end %}