@let(props = {
  align: $props.get('align'),
  side: $props.get('side'),
  sideOffset: $props.get('sideOffset') || 4,
})
@let(alignment = props.side + { center: '', end: '-end', start: '-start' }[props.align])

<ul
  x-dropdown-menu:items
  x-transition:enter.origin.top.right
  x-anchor.{{ alignment }}.offset.{{ props.sideOffset }}="document.getElementById($id('alpine-dropdown-menu-button'))"
  x-cloak
  {{ $props.merge({ class: [ 'z-[60] min-w-[8rem] bg-white dark:bg-cat-800 rounded-xl p-1 shadow-md' ]}).except(['align', 'side', 'sideOffset']).toAttrs() }}
>
  {{{ await $slots.main() }}}
</ul>