@props([
    'id',
    'label'        => null,
    'ariaLabel'    => null,
    'triggerClass' => '',
])

<div
    data-controller="dropdown"
    {{ $attributes->merge(['class' => 'dropdown relative inline-flex items-center']) }}
>
    {{-- Popover invoker buttons get implicit aria-expanded / aria-details from
         the browser, so only the accessible name needs setting here.
         click->dropdown#position measures this button and feeds the panel's
         position to CSS before the native popover toggle paints it. --}}
    <button
        type="button"
        popovertarget="{{ $id }}"
        popovertargetaction="toggle"
        data-dropdown-target="trigger"
        data-action="click->dropdown#position"
        @if($ariaLabel) aria-label="{{ $ariaLabel }}" @endif
        class="bg-transparent border-b border-black pr-10 py-2.5 cursor-pointer focus:outline-none text-left whitespace-nowrap {{ $triggerClass }}"
    >
        {{ $label }}
    </button>

    <x-ui.icon
        name="arrow-down"
        :size="16"
        class="dropdown-caret pointer-events-none absolute right-0 transition-transform duration-200"
    />

    <div
        id="{{ $id }}"
        popover
        data-dropdown-target="panel"
        class="dropdown-panel absolute w-max max-w-xs bg-neutral-200 border border-black"
    >
        {{ $slot }}
    </div>
</div>