chore: split props for Dropdown, ContextMenu and Popover

src/runtime/components/elements/Dropdown.vue

@@ -17,7 +17,7 @@
 
     <div v-if="open && items.length" ref="container" :class="[containerClass, widthClass]" @mouseover="onMouseOver">
       <transition appear v-bind="transitionClass">
-        <MenuItems :class="baseClass" static>
+        <MenuItems :class="[baseClass, divideClass, ringClass, roundedClass, shadowClass, backgroundClass]" static>
           <div v-for="(subItems, index) of items" :key="index" :class="groupClass">
             <MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
               <Component
@@ -104,6 +104,26 @@ const props = defineProps({
     type: String,
     default: () => $ui.dropdown.width
   },
+  backgroundClass: {
+    type: String,
+    default: () => $ui.dropdown.background
+  },
+  shadowClass: {
+    type: String,
+    default: () => $ui.dropdown.shadow
+  },
+  roundedClass: {
+    type: String,
+    default: () => $ui.dropdown.rounded
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.dropdown.ring
+  },
+  divideClass: {
+    type: String,
+    default: () => $ui.dropdown.divide
+  },
   baseClass: {
     type: String,
     default: () => $ui.dropdown.base

src/runtime/components/overlays/ContextMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="isOpen" ref="container" :class="[containerClass, widthClass]">
     <transition appear v-bind="transitionClass">
-      <div :class="baseClass">
+      <div :class="[baseClass, ringClass, roundedClass, shadowClass, backgroundClass]">
         <slot />
       </div>
     </transition>
@@ -38,6 +38,22 @@ const props = defineProps({
     type: String,
     default: () => $ui.contextMenu.width
   },
+  backgroundClass: {
+    type: String,
+    default: () => $ui.contextMenu.background
+  },
+  shadowClass: {
+    type: String,
+    default: () => $ui.contextMenu.shadow
+  },
+  roundedClass: {
+    type: String,
+    default: () => $ui.contextMenu.rounded
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.contextMenu.ring
+  },
   baseClass: {
     type: String,
     default: () => $ui.contextMenu.base

src/runtime/components/overlays/Popover.vue

@@ -17,7 +17,7 @@
 
     <div v-if="open" ref="container" :class="[containerClass, widthClass]" @mouseover="onMouseOver">
       <transition appear v-bind="transitionClass">
-        <PopoverPanel :class="baseClass" static>
+        <PopoverPanel :class="[baseClass, ringClass, roundedClass, shadowClass, backgroundClass]" static>
           <slot name="panel" :open="open" :close="close" />
         </PopoverPanel>
       </transition>
@@ -62,6 +62,22 @@ const props = defineProps({
     type: String,
     default: () => $ui.popover.base
   },
+  backgroundClass: {
+    type: String,
+    default: () => $ui.popover.background
+  },
+  shadowClass: {
+    type: String,
+    default: () => $ui.popover.shadow
+  },
+  roundedClass: {
+    type: String,
+    default: () => $ui.popover.rounded
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.popover.ring
+  },
   transitionClass: {
     type: Object,
     default: () => $ui.popover.transition