feat(Popover): ability to add overlay

src/runtime/components/overlays/Popover.vue

@@ -15,6 +15,10 @@
       </slot>
     </HPopoverButton>
 
+    <Transition v-if="overlay" appear v-bind="ui.overlay.transition">
+      <div v-if="(open !== undefined) ? open : headlessOpen" :class="[ui.overlay.base, ui.overlay.background]" />
+    </Transition>
+
     <div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
         <div>
@@ -72,6 +76,10 @@ export default defineComponent({
       type: Number,
       default: 0
     },
+    overlay: {
+      type: Boolean,
+      default: false
+    },
     popper: {
       type: Object as PropType<PopperOptions>,
       default: () => ({})

src/runtime/ui.config/overlays/popover.ts

@@ -18,8 +18,20 @@ export default {
     leaveFromClass: 'opacity-100 translate-y-0',
     leaveToClass: 'opacity-0 translate-y-1'
   },
+  overlay: {
+    base: 'fixed inset-0 transition-opacity',
+    background: 'bg-gray-200/75 dark:bg-gray-800/75',
+    transition: {
+      enterActiveClass: 'ease-out duration-200',
+      enterFromClass: 'opacity-0',
+      enterToClass: 'opacity-100',
+      leaveActiveClass: 'ease-in duration-150',
+      leaveFromClass: 'opacity-100',
+      leaveToClass: 'opacity-0'
+    }
+  },
   popper: {
     strategy: 'fixed'
   },
   arrow
-}
+}