Add parent div on slot to allow custom trigger on Dropdown and transition prop + element to Dropdown content

src/components/Dropdown/Dropdown.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="inline-flex relative" ref="wrapper">
+    <div class="inline-flex items-center">
       <slot name="trigger" :show="onShow" :hide="onHide" :toggle="onToggle">
         <Button @click="onToggle">
           {{ text }}
@@ -8,9 +9,12 @@
           </template>
         </Button>
       </slot>
-    <div ref="content" :style="contentStyles" :class="[{ hidden: !visible }, contentClasses]">
+    </div>
+    <Transition :name="transition">
+      <div ref="content" v-if="visible" :style="contentStyles" :class="[{ hidden: !visible }, contentClasses]">
         <slot />
       </div>
+    </Transition>
   </div>
 </template>
 <script lang="ts" setup>
@@ -36,6 +40,10 @@ const props = defineProps({
     type: String ,
     default: '',
   },
+  transition: {
+    type: String ,
+    default: '',
+  },
 })
 
 const content = ref<HTMLDivElement>()