@props({'trigger': ''})
<div data-slot="context-menu" x-data="{ open: false, x: 0, y: 0 }"
  x-on:contextmenu.prevent="open = true; x = Math.min($event.clientX, window.innerWidth - 224); y = Math.min($event.clientY, window.innerHeight - 40)"
  x-on:keydown.escape.window="open = false" x-on:scroll.window="open = false" class="contents">
  <div data-slot="context-menu-trigger" class="contents">{{ trigger }}</div>
  <div role="menu" data-slot="context-menu-content" x-show="open" x-cloak x-on:click.outside="open = false" x-on:click="open = false"
    x-bind:style="{ left: x + 'px', top: y + 'px' }"
    x-transition:enter="duration-100 ease-out" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100"
    {{ attributes.cn("fixed z-50 min-w-[12rem] origin-top-left overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md") }}>{{ slot }}</div>
</div>