<script setup lang="ts">
// ---------------------------------------------------------------------
// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
// Please do not edit this file directly!
// It will get recreated when running pnpm build.
// ---------------------------------------------------------------------

/**
 * @summary Menus provide a list of options for the user to choose from.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu--docs
 * @status stable
 * @since 1.12.0
 *
 * @slot - The menu's content, including menu items, menu labels, and dividers.
 *
 * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.
 */
import { computed, ref } from 'vue';
import '@synergy-design-system/components/components/menu/menu.js';

import type { SynSelectEvent } from '@synergy-design-system/components';
import type SynMenu from '@synergy-design-system/components/components/menu/menu.component.js';

// DOM Reference to the element
const nativeElement = ref<SynMenu>();

defineExpose({
  nativeElement,
});

// Map events
defineEmits<{
  /**
   * Emitted when a menu item is selected.
   */
  'syn-select': [e: SynSelectEvent];
}>();
</script>

<script lang="ts">
export type { SynSelectEvent } from '@synergy-design-system/components';
</script>

<template>
  <syn-menu @syn-select="$emit('syn-select', $event)" ref="nativeElement">
    <slot></slot>
  </syn-menu>
</template>
