{% set dropdownId = id|default('dropdown-' ~ random()) %}
<div class="relative {{ class|default('') }}" x-data="{ open: false }" @keydown.escape.stop="open = false">
    <button
        type="button"
        class="{{ trigger_class|default('btn btn-outline') }}"
        aria-haspopup="menu"
        aria-controls="{{ dropdownId }}"
        :aria-expanded="open.toString()"
        @click="open = !open"
    >{{ trigger|raw }}</button>
    <div
        id="{{ dropdownId }}"
        x-show="open"
        x-cloak
        x-transition.opacity.duration.150ms
        @click.outside="open = false"
        @keydown.home.prevent="$el.querySelector('[role=menuitem]')?.focus()"
        class="dropdown-panel {{ placement|default('right-0') }}"
        role="menu"
    >{{ content|raw }}</div>
</div>