@props(['align' => 'right', 'width' => 'w-56', 'label' => 'Open menu'])
<div x-data="{ open: false }" class="relative" x-on:keydown.escape.window="open = false" {{ $attributes }}>
    <div x-on:click="open = ! open" x-ref="trigger">
        {{ $trigger }}
    </div>
    <div x-show="open" x-cloak x-on:click.outside="open = false" x-on:click="open = false"
         x-anchor.{{ $align === 'right' ? 'bottom-end' : 'bottom-start' }}.offset.6="$refs.trigger"
         x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
         class="z-40 {{ $width }} rounded-xl bg-white py-1.5 shadow-lg ring-1 ring-slate-900/10" role="menu">
        {{ $slot }}
    </div>
</div>