@props({'value': ''})
<button type="button" role="option" data-slot="combobox-item" data-value="{{ value }}" x-show="match($el.textContent)"
  x-bind:aria-selected="value === '{{ value }}'" x-on:click="pick('{{ value }}', $el.textContent.trim())" {{ attributes.cn(
    "relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-left text-sm outline-hidden select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
) }}>{{ slot }}<span class="absolute right-2 flex size-3.5 items-center justify-center" x-show="value === '{{ value }}'"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span></button>