<template>
  <!-- Canonical kebab (overflow ⋮) menu — the single primitive every kebab in
       the app uses (DRY pattern-consistency sweep 2026-06-09). It bakes in the
       modal-safe activator strategy that the image-modal kebabs needed (#711):
       a manual v-model toggled by @click.stop, `activator="parent"` for
       positioning only, `:open-on-click="false"`, and a z-index above the modal
       (2000) — so a kebab works identically inside a teleported modal and on a
       plain page. Menu items go in the default slot; close-on-content-click
       (Vuetify default) closes the menu when one is chosen. -->
  <span class="fc-kebab">
    <v-btn
      :icon="icon"
      :size="size"
      :variant="variant"
      :aria-label="label"
      @click.stop="open = !open"
    />
    <v-menu
      v-model="open"
      activator="parent"
      :open-on-click="false"
      :location="location"
      :z-index="2400"
    >
      <v-list density="compact" :min-width="minWidth">
        <slot />
      </v-list>
    </v-menu>
  </span>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
  icon: { type: String, default: 'mdi-dots-vertical' },
  size: { type: String, default: 'x-small' },
  variant: { type: String, default: 'text' },
  location: { type: String, default: 'bottom end' },
  // aria-label for the trigger (every kebab should name what it acts on).
  label: { type: String, default: 'More actions' },
  minWidth: { type: [String, Number], default: undefined },
})

const open = ref(false)
</script>

<style scoped>
.fc-kebab { display: inline-flex; align-items: center; }
</style>
