From 31f7e4b58d293a87e9c993a5e59906f4b8c8e301 Mon Sep 17 00:00:00 2001
From: Jesus Vilar <jesus.vilar@gmail.com>
Date: Wed, 2 Oct 2024 10:48:44 +0200
Subject: [PATCH] revert: revert changes after 3.1.2

---
 .../calendar/AttributesPopoverLabels.vue      |  10 +-
 .../calendar/AttributesPopoverSlot.vue        |   6 +-
 .../datepicker/DatePopoverCustom.vue          |   2 +-
 .../datepicker/DatePopoverManual.vue          |  12 +-
 .../datepicker/DateRangePopover.vue           |   5 +-
 .../components/datepicker/DateSimpleSlot.vue  |   4 +-
 .../components/examples/ExampleDateForm.vue   |   2 +-
 docs/.vitepress/theme/styles/index.css        |  21 +-
 docs/.vitepress/theme/styles/nr-doc.css       |  83 +--
 docs/calendar/attributes.md                   |  23 +-
 docs/datepicker/custom-attributes.md          |   5 +-
 docs/datepicker/slot-content.md               |  13 +-
 docs/package.json                             |   2 +-
 .../{postcss.config.cjs => postcss.config.js} |   0
 ...tailwind.config.cjs => tailwind.config.js} |   0
 docs/yarn.lock                                |   5 +
 package.json                                  |   3 +-
 src/components/Calendar/Calendar.vue          |  12 +
 src/components/Calendar/CalendarDay.vue       |  52 +-
 .../Calendar/CalendarDayPopover.vue           |  31 +-
 src/components/Calendar/CalendarHeader.vue    |  23 +-
 .../Calendar/CalendarNavPopover.vue           |  10 +-
 src/components/CalendarGrid/CalendarCell.vue  |   2 +
 .../CalendarGrid/CalendarCellPopover.vue      |  22 +-
 src/components/DatePicker/DatePicker.vue      |  49 +-
 .../DatePicker/DatePickerPopover.vue          |  37 ++
 src/components/Popover/Popover.vue            | 544 ++++++++++++++++++
 .../PopoverRow.vue}                           |   0
 src/components/index.ts                       |   3 +-
 src/index.ts                                  |   6 +-
 src/styles/index.css                          |  12 +-
 src/styles/theme.css                          |  18 +
 src/use/calendar.ts                           |  46 +-
 src/use/datePicker.ts                         |  69 +--
 src/utils/attribute.ts                        |  26 +-
 src/utils/calendar/event.ts                   |   2 +-
 src/utils/date/range.ts                       |   2 +-
 src/utils/date/rules.ts                       |  14 +-
 src/utils/defaults/index.ts                   |  81 +--
 src/utils/helpers.ts                          | 142 +----
 src/utils/page.ts                             |  51 +-
 src/utils/plugins/index.ts                    |   2 +-
 src/utils/popovers.ts                         | 212 +++++++
 43 files changed, 1107 insertions(+), 557 deletions(-)
 rename docs/{postcss.config.cjs => postcss.config.js} (100%)
 rename docs/{tailwind.config.cjs => tailwind.config.js} (100%)
 create mode 100644 src/components/DatePicker/DatePickerPopover.vue
 create mode 100644 src/components/Popover/Popover.vue
 rename src/components/{Calendar/CalendarDayPopoverRow.vue => Popover/PopoverRow.vue} (100%)
 create mode 100644 src/utils/popovers.ts

diff --git a/docs/.vitepress/components/calendar/AttributesPopoverLabels.vue b/docs/.vitepress/components/calendar/AttributesPopoverLabels.vue
index e9f57bb9e..4b3aa0583 100644
--- a/docs/.vitepress/components/calendar/AttributesPopoverLabels.vue
+++ b/docs/.vitepress/components/calendar/AttributesPopoverLabels.vue
@@ -1,9 +1,9 @@
 <template>
   <Example centered>
-    <div class="text-lg font-semibold mb-2 mt-0" v-if="action === 'focus'">
+    <div class="text-lg font-semibold mb-2 mt-0" v-if="visibility === 'focus'">
       Focus
     </div>
-    <div class="text-lg font-semibold mb-2 mt-0" v-if="action === 'click'">
+    <div class="text-lg font-semibold mb-2 mt-0" v-if="visibility === 'click'">
       Click
     </div>
     <VCalendar :attributes="attributes" />
@@ -14,7 +14,7 @@
 import { computed, ref } from 'vue';
 
 const props = defineProps({
-  action: { type: String, default: 'hover' },
+  visibility: { type: String, default: 'hover' },
   hideIndicators: Boolean,
 });
 
@@ -22,7 +22,7 @@ const todos = ref([
   {
     description: 'Take Noah to basketball practice.',
     isComplete: false,
-    dates: { repeat: { weekdays: 6 } }, // Every Friday
+    dates: { repeat: { weekdays: 5 } }, // Every Friday
     color: 'red',
   },
 ]);
@@ -37,7 +37,7 @@ const attributes = computed(() => [
     },
     popover: {
       label: todo.description,
-      action: props.action,
+      visibility: props.visibility,
       hideIndicator: props.hideIndicators,
     },
   })),
diff --git a/docs/.vitepress/components/calendar/AttributesPopoverSlot.vue b/docs/.vitepress/components/calendar/AttributesPopoverSlot.vue
index 1b36802da..07ece70af 100644
--- a/docs/.vitepress/components/calendar/AttributesPopoverSlot.vue
+++ b/docs/.vitepress/components/calendar/AttributesPopoverSlot.vue
@@ -1,6 +1,6 @@
 <template>
   <VCalendar :attributes="attributes">
-    <template #day-popover="{ dayTitle, attributes }">
+    <template #day-popover="{ day, format, masks, dayTitle, attributes }">
       <div class="px-1">
         <div v-if="step === 1" class="text-xs text-gray-700 dark:text-gray-300">
           Using my own content now
@@ -29,7 +29,7 @@
 import { ref, computed } from 'vue';
 
 const props = defineProps({
-  action: { type: String, default: 'hover' },
+  visibility: { type: String, default: 'hover' },
   hideIndicators: Boolean,
   step: { type: Number, default: 1 },
 });
@@ -53,7 +53,7 @@ const attributes = computed(() => [
     },
     popover: {
       label: todo.description,
-      action: props.action,
+      visibility: props.visibility,
       hideIndicator: props.hideIndicators,
     },
     customData: todo,
diff --git a/docs/.vitepress/components/datepicker/DatePopoverCustom.vue b/docs/.vitepress/components/datepicker/DatePopoverCustom.vue
index c4748b2d2..ef56d6d93 100644
--- a/docs/.vitepress/components/datepicker/DatePopoverCustom.vue
+++ b/docs/.vitepress/components/datepicker/DatePopoverCustom.vue
@@ -11,7 +11,7 @@ import { ref } from 'vue';
 
 const date = ref(new Date());
 const popover = ref({
-  action: 'click',
+  visibility: 'click',
   placement: 'right',
 });
 </script>
diff --git a/docs/.vitepress/components/datepicker/DatePopoverManual.vue b/docs/.vitepress/components/datepicker/DatePopoverManual.vue
index 6d85c88af..abab58ebf 100644
--- a/docs/.vitepress/components/datepicker/DatePopoverManual.vue
+++ b/docs/.vitepress/components/datepicker/DatePopoverManual.vue
@@ -1,8 +1,3 @@
-<script setup>
-import { ref } from 'vue';
-const date = ref(new Date());
-</script>
-
 <template>
   <DateDisplay v-model="date" :popover="false">
     <template #default="{ togglePopover, inputValue, inputEvents }">
@@ -10,9 +5,8 @@ const date = ref(new Date());
         class="flex rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden"
       >
         <button
-          type="button"
           class="flex justify-center items-center px-2 bg-accent-100 hover:bg-accent-200 text-accent-700 border-r border-gray-300 dark:bg-gray-700 dark:text-accent-300 dark:border-gray-600 dark:hover:bg-gray-600"
-          @click="togglePopover({ target: $event.currentTarget })"
+          @click="() => togglePopover()"
         >
           <IconCalendar class="w-5 h-5" />
         </button>
@@ -25,3 +19,7 @@ const date = ref(new Date());
     </template>
   </DateDisplay>
 </template>
+<script setup>
+import { ref } from 'vue';
+const date = ref(new Date());
+</script>
diff --git a/docs/.vitepress/components/datepicker/DateRangePopover.vue b/docs/.vitepress/components/datepicker/DateRangePopover.vue
index 4b23ab0e7..3ac028d2c 100644
--- a/docs/.vitepress/components/datepicker/DateRangePopover.vue
+++ b/docs/.vitepress/components/datepicker/DateRangePopover.vue
@@ -25,9 +25,8 @@ const range = ref({
 const dragValue = ref(null);
 const selectDragAttribute = computed(() => ({
   popover: {
-    action: 'hover',
-    interactive: false,
-    theme: 'dark',
+    visibility: 'hover',
+    isInteractive: false,
   },
 }));
 </script>
diff --git a/docs/.vitepress/components/datepicker/DateSimpleSlot.vue b/docs/.vitepress/components/datepicker/DateSimpleSlot.vue
index 2e61d376d..2bb218a86 100644
--- a/docs/.vitepress/components/datepicker/DateSimpleSlot.vue
+++ b/docs/.vitepress/components/datepicker/DateSimpleSlot.vue
@@ -4,7 +4,7 @@
       <template #default="{ togglePopover }">
         <button
           class="px-3 py-2 bg-blue-500 hover:bg-blue-600 text-sm text-white font-semibold rounded-md"
-          @click="togglePopover({ target: $event.currentTarget })"
+          @click="togglePopover"
         >
           Select date
         </button>
@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 
 const date = ref(new Date());
 </script>
diff --git a/docs/.vitepress/components/examples/ExampleDateForm.vue b/docs/.vitepress/components/examples/ExampleDateForm.vue
index f78e0a924..edb75b623 100644
--- a/docs/.vitepress/components/examples/ExampleDateForm.vue
+++ b/docs/.vitepress/components/examples/ExampleDateForm.vue
@@ -53,6 +53,6 @@ const errorMessage = computed(() => {
   return '';
 });
 const popover = ref({
-  action: 'hover',
+  visibility: 'hover',
 });
 </script>
diff --git a/docs/.vitepress/theme/styles/index.css b/docs/.vitepress/theme/styles/index.css
index c0dd03539..800ef8127 100644
--- a/docs/.vitepress/theme/styles/index.css
+++ b/docs/.vitepress/theme/styles/index.css
@@ -41,18 +41,10 @@
   --vp-c-brand-dark: theme(colors.accent.700);
   --vp-c-brand-darker: theme(colors.accent.900);
 
-  --vp-code-font-size: theme(fontSize.sm);
-
+  --vp-code-font-size: theme(fontSize.base)
   --vp-code-tab-bg: theme(colors.gray.900);
-  --vp-code-lang-color: theme(colors.gray.400);
-  --vp-code-block-bg: theme(colors.gray.900);
-
   --vp-code-tab-divider: theme(colors.gray.700);
-  --vp-code-tab-text-color: theme(colors.gray.400);
-  --vp-code-tab-hover-text-color: theme(colors.gray.100);
-  --vp-code-tab-active-text-color: theme(colors.gray.200);
-  --vp-code-tab-active-bar-color: theme(colors.accent.300);
-
+  --vp-code-block-bg: theme(colors.gray.900);
   --vp-c-switch-bg: theme(colors.gray.300);
   --vp-c-switch-border: theme(colors.gray.400);
   --vp-c-switch-grabber-bg: theme(colors.white);
@@ -101,16 +93,9 @@
   --vp-c-brand-dark: theme(colors.accent.700);
   --vp-c-brand-darker: theme(colors.accent.900);
 
-  --vp-code-lang-color: theme(colors.gray.400);
-  --vp-code-block-bg: theme(colors.gray.900);
-
   --vp-code-tab-bg: theme(colors.gray.900);
   --vp-code-tab-divider: theme(colors.gray.700);
-  --vp-code-tab-text-color: theme(colors.gray.400);
-  --vp-code-tab-hover-text-color: theme(colors.gray.100);
-  --vp-code-tab-active-text-color: theme(colors.gray.200);
-  --vp-code-tab-active-bar-color: theme(colors.accent.300);
-
+  --vp-code-block-bg: theme(colors.gray.900);
   --vp-c-switch-bg: theme(colors.black);
   --vp-c-switch-border: theme(colors.gray.600);
   --vp-c-switch-grabber-bg: theme(colors.gray.500);
diff --git a/docs/.vitepress/theme/styles/nr-doc.css b/docs/.vitepress/theme/styles/nr-doc.css
index bff3eba80..cb8e3b004 100644
--- a/docs/.vitepress/theme/styles/nr-doc.css
+++ b/docs/.vitepress/theme/styles/nr-doc.css
@@ -3,49 +3,6 @@
   dark:prose-invert dark:prose-a:text-accent-300 dark:hover:prose-a:text-accent-400;
 }
 
-.nr-doc h1,
-.nr-doc h2,
-.nr-doc h3,
-.nr-doc h4,
-.nr-doc h5,
-.nr-doc h6 {
-  position: relative;
-  outline: none;
-}
-
-.nr-doc .header-anchor {
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin-left: -0.87em;
-  font-weight: 500;
-  user-select: none;
-  opacity: 0;
-  text-decoration: none;
-  transition:
-    color 0.25s,
-    opacity 0.25s;
-}
-
-.nr-doc .header-anchor:before {
-  content: var(--vp-header-anchor-symbol);
-}
-
-.nr-doc h1:hover .header-anchor,
-.nr-doc h1 .header-anchor:focus,
-.nr-doc h2:hover .header-anchor,
-.nr-doc h2 .header-anchor:focus,
-.nr-doc h3:hover .header-anchor,
-.nr-doc h3 .header-anchor:focus,
-.nr-doc h4:hover .header-anchor,
-.nr-doc h4 .header-anchor:focus,
-.nr-doc h5:hover .header-anchor,
-.nr-doc h5 .header-anchor:focus,
-.nr-doc h6:hover .header-anchor,
-.nr-doc h6 .header-anchor:focus {
-  opacity: 1;
-}
-
 .nr-doc .header-anchor {
   float: left;
   margin-left: -0.87em;
@@ -53,15 +10,9 @@
   font-weight: 500;
   user-select: none;
   opacity: 0;
-  transition:
-    color 0.25s,
-    opacity 0.25s;
+  transition: color 0.25s, opacity 0.25s;
 }
 
-/* .nr-doc h2 .header-anchor {
-  top: 24px;
-} */
-
 .nr-doc h1 > code,
 .nr-doc h2 > code,
 .nr-doc h3 > code {
@@ -176,16 +127,12 @@
 .nr-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
   filter: blur(0.095rem);
   opacity: 0.4;
-  transition:
-    filter 0.35s,
-    opacity 0.35s;
+  transition: filter 0.35s, opacity 0.35s;
 }
 
 .nr-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
   opacity: 0.7;
-  transition:
-    filter 0.35s,
-    opacity 0.35s;
+  transition: filter 0.35s, opacity 0.35s;
 }
 
 .nr-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
@@ -233,9 +180,7 @@
   line-height: var(--vp-code-line-height);
   font-size: var(--vp-code-font-size);
   color: var(--vp-code-line-number-color);
-  transition:
-    border-color 0.5s,
-    color 0.5s;
+  transition: border-color 0.5s, color 0.5s;
 }
 
 .nr-doc [class*='language-'] > button.copy {
@@ -246,6 +191,9 @@
   /*rtl:ignore*/
   right: 12px;
   z-index: 3;
+  display: block;
+  justify-content: center;
+  align-items: center;
   border: 1px solid var(--vp-code-copy-code-border-color);
   border-radius: 4px;
   width: 40px;
@@ -257,10 +205,7 @@
   background-position: 50%;
   background-size: 20px;
   background-repeat: no-repeat;
-  transition:
-    border-color 0.25s,
-    background-color 0.25s,
-    opacity 0.25s;
+  transition: border-color 0.25s, background-color 0.25s, opacity 0.25s;
 }
 
 .nr-doc [class*='language-']:hover > button.copy,
@@ -287,7 +232,7 @@
   position: relative;
   top: -1px;
   /*rtl:ignore*/
-  transform: translateX(calc(-100% - 1px));
+  left: -65px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -295,8 +240,7 @@
   /*rtl:ignore*/
   border-right: 0;
   border-radius: 4px 0 0 4px;
-  padding: 0 10px;
-  width: fit-content;
+  width: 64px;
   height: 40px;
   text-align: center;
   font-size: 12px;
@@ -304,7 +248,7 @@
   color: var(--vp-code-copy-code-active-text);
   background-color: var(--vp-code-copy-code-hover-bg);
   white-space: nowrap;
-  content: var(--vp-code-copy-copied-text-content);
+  content: 'Copied';
 }
 
 .nr-doc [class*='language-'] > span.lang {
@@ -314,9 +258,4 @@
   right: 8px;
   z-index: 2;
   font-size: 12px;
-  font-weight: 500;
-  color: var(--vp-code-lang-color);
-  transition:
-    color 0.4s,
-    opacity 0.4s;
 }
diff --git a/docs/calendar/attributes.md b/docs/calendar/attributes.md
index 4db2d4b70..28c2febf3 100644
--- a/docs/calendar/attributes.md
+++ b/docs/calendar/attributes.md
@@ -508,7 +508,7 @@ const todos = ref([
   {
     description: 'Take Noah to basketball practice.',
     isComplete: false,
-    dates: { repeat: { weekdays: 6 } }, // Every Friday
+    dates: { repeat: { weekdays: 5 } }, // Every Friday
     color: 'red',
   },
 ]);
@@ -531,31 +531,26 @@ const attributes = computed(() => [
 
 For this example, we simply assigned a string to the `popover.label` property. Now, the label displays in a popover whenever the user hovers over the day content (or taps on mobile).
 
-If we want to force the user to click on the day content in order to display the popover, we can set the popover's `action` property to `"focus"` or `"click"`.
+If we want to force the user to click on the day content in order to display the popover, we can set the popover's `visibility` property to `"focus"` or `"click"`.
 
-<BaseAlert>
-
-The `visibility` property has been deprecated as of 3.2.0. It is still supported, but should be replaced by the `action` property moving forward.
-</BaseAlert>
-
-<AttributesPopoverLabels action="focus" />
+<AttributesPopoverLabels visibility="focus" />
 
 ```js
     ...
     popover: {
       label: todo.description,
-      action: 'focus'
+      visibility: 'focus'
     }
     ...
 ```
 
-<AttributesPopoverLabels action="click" />
+<AttributesPopoverLabels visibility="click" />
 
 ```js
     ...
     popover: {
-      action: 'click'
       label: todo.description,
+      visibility: 'click'
     }
     ...
 ```
@@ -564,13 +559,13 @@ Also, you'll notice there is a small indicator next to the popover content row f
 
 If you would like to hide the indicator, just set the `hideIndicator` property to `true`;
 
-<AttributesPopoverLabels action="hover" hide-indicators />
+<AttributesPopoverLabels visibility="hover" hide-indicators />
 
 ```js
     ...
     popover: {
-      action: 'hover',
       label: todo.description,
+      visibility: 'hover',
       hideIndicator: true,
     }
     ...
@@ -622,7 +617,7 @@ const attributes = computed(() => [
       class: todo.isComplete ? 'opacity-75' : '',
     },
     // We need to at least pass a truthy value for the popover to appear
-    // Pass an object to customize popover settings like action, placement, etc.
+    // Pass an object to customize popover settings like visibility, placement, etc.
     popover: true,
     customData: todo,
   })),
diff --git a/docs/datepicker/custom-attributes.md b/docs/datepicker/custom-attributes.md
index 5c07ad6f0..22b1c88eb 100644
--- a/docs/datepicker/custom-attributes.md
+++ b/docs/datepicker/custom-attributes.md
@@ -74,9 +74,8 @@ const range = ref({
 const dragValue = ref(null);
 const selectDragAttribute = computed(() => ({
   popover: {
-    action: 'hover',
-    interactive: false,
-    theme: 'dark',
+    visibility: 'hover',
+    isInteractive: false,
   },
 }));
 </script>
diff --git a/docs/datepicker/slot-content.md b/docs/datepicker/slot-content.md
index e6a6cef30..3425c54a8 100644
--- a/docs/datepicker/slot-content.md
+++ b/docs/datepicker/slot-content.md
@@ -14,7 +14,7 @@ When a default slot is used with `VDatePicker`, that content will display instea
     <template #default="{ togglePopover }">
       <button
         class="px-3 py-2 bg-blue-500 text-sm text-white font-semibold rounded-md"
-        @click="togglePopover({ target: $event.currentTarget })"
+        @click="togglePopover"
       >
         Select date
       </button>
@@ -214,7 +214,7 @@ Please reference the [masks section](../i18n/masks#mask-tokens) for a complete l
 ## Popover
 
 
-The `popover` prop determines how event handlers are generated in the `inputEvents` slot prop.
+The `popover` prop determines how popover events are generated in the `inputEvents` slot prop.
 
 ```ts
 type PopoverProp = boolean | Partial<PopoverOptions>;
@@ -232,11 +232,12 @@ type PopoverVisibility = 'click' | 'hover' | 'hover-focus' | 'focus';
 
 ### Default behavior
 
-The `popover` prop is `true` by default, which means that the following default settings will get applied.
+The `popover` prop is `true` by default, which means that the events will use the following default settings.
 
 ```json
 {
-  action: 'hover-focus',
+  visibility: 'hover-focus',
+  autoHide: true,
   placement: 'bottom-start',
   showDelay: 0,
   hideDelay: 110,
@@ -288,7 +289,7 @@ import { ref } from 'vue';
 
 const date = ref(new Date());
 const popover = ref({
-  action: 'click',
+  visibility: 'click',
   placement: 'right',
 });
 </script>
@@ -314,7 +315,7 @@ You may choose to not bind popover behavior to the `inputEvents`, or you may not
       >
         <button
           class="flex justify-center items-center px-2 bg-accent-100 hover:bg-accent-200 text-accent-700 border-r border-gray-300 dark:bg-gray-700 dark:text-accent-300 dark:border-gray-600 dark:hover:bg-gray-600"
-          @click="togglePopover({ target: $event.currentTarget })"
+          @click="() => togglePopover()"
         >
           <IconCalendar class="w-5 h-5" />
         </button>
diff --git a/docs/package.json b/docs/package.json
index d4657620c..fb63b75a5 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -3,7 +3,6 @@
   "version": "1.0.0",
   "main": "index.js",
   "license": "MIT",
-  "type": "module",
   "scripts": {
     "dev": "vitepress dev",
     "build": "NODE_OPTIONS='--experimental-specifier-resolution=node' vitepress build",
@@ -11,6 +10,7 @@
     "serve": "vitepress serve"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.6",
     "lodash": "^4.17.21",
     "short-uuid": "^4.2.0",
     "vue-screen-utils": "^1.0.0-beta.13"
diff --git a/docs/postcss.config.cjs b/docs/postcss.config.js
similarity index 100%
rename from docs/postcss.config.cjs
rename to docs/postcss.config.js
diff --git a/docs/tailwind.config.cjs b/docs/tailwind.config.js
similarity index 100%
rename from docs/tailwind.config.cjs
rename to docs/tailwind.config.js
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 486281fe5..14e2a414f 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -284,6 +284,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.11.6":
+  version "2.11.6"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
+  integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+
 "@tailwindcss/forms@^0.5.2":
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.2.tgz#4ef45f9916dcb37838cbe7fecdcc4ba7a7c2ab59"
diff --git a/package.json b/package.json
index 2a26cd92f..5aab97f76 100644
--- a/package.json
+++ b/package.json
@@ -54,13 +54,14 @@
     "date-fns": "^2.16.1",
     "date-fns-tz": "^2.0.0",
     "lodash": "^4.17.20",
-    "v-popover": "^0.1.12",
     "vue-screen-utils": "^1.0.0-beta.13"
   },
   "peerDependencies": {
+    "@popperjs/core": "^2.0.0",
     "vue": "^3.2.0"
   },
   "devDependencies": {
+    "@popperjs/core": "^2.11.6",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@typescript-eslint/eslint-plugin": "^5.56.0",
     "@typescript-eslint/parser": "^5.56.0",
diff --git a/src/components/Calendar/Calendar.vue b/src/components/Calendar/Calendar.vue
index eac42e97c..4d34b99a4 100644
--- a/src/components/Calendar/Calendar.vue
+++ b/src/components/Calendar/Calendar.vue
@@ -101,4 +101,16 @@ export default defineComponent({
   width: 100%;
   pointer-events: none;
 }
+
+.vc-day-popover-container {
+  font-size: var(--vc-text-xs);
+  font-weight: var(--vc-font-medium);
+}
+
+.vc-day-popover-header {
+  font-size: var(--vc-text-xs);
+  color: var(--vc-day-popover-header-color);
+  font-weight: var(--vc-font-semibold);
+  text-align: center;
+}
 </style>
diff --git a/src/components/Calendar/CalendarDay.vue b/src/components/Calendar/CalendarDay.vue
index 8252cbe75..71d0b7da5 100644
--- a/src/components/Calendar/CalendarDay.vue
+++ b/src/components/Calendar/CalendarDay.vue
@@ -55,19 +55,13 @@
 
 <script lang="ts">
 import { type PropType, computed, defineComponent } from 'vue';
-import { directive as popoverDirective } from 'v-popover';
 import { useCalendar } from '../../use/calendar';
 import { useSlot } from '../../use/slots';
-import type { Attribute, AttributePopoverConfig } from '../../utils/attribute';
+import type { Attribute, PopoverConfig } from '../../utils/attribute';
 import type { DateRangeCell } from '../../utils/date/range';
-import {
-  arrayHasItems,
-  cleanPopoverOptions,
-  defaults,
-  get,
-  last,
-} from '../../utils/helpers';
+import { arrayHasItems, defaults, get, last } from '../../utils/helpers';
 import type { CalendarDay } from '../../utils/page';
+import { popoverDirective } from '../../utils/popovers';
 import CalendarSlot from './CalendarSlot.vue';
 
 export default defineComponent({
@@ -81,8 +75,7 @@ export default defineComponent({
       locale,
       theme,
       attributeContext,
-      dayPopoverName,
-      displayMode,
+      dayPopoverId,
       onDayClick,
       onDayMouseenter,
       onDayMouseleave,
@@ -108,7 +101,7 @@ export default defineComponent({
 
     function processPopover(
       { data: attribute }: DateRangeCell<Attribute>,
-      { popovers }: { popovers: Partial<AttributePopoverConfig>[] },
+      { popovers }: { popovers: PopoverConfig[] },
     ) {
       const { key, customData, popover } = attribute;
       if (!popover) return;
@@ -120,9 +113,9 @@ export default defineComponent({
         },
         { ...popover },
         {
-          action: popover.label ? 'hover' : 'click',
+          visibility: popover.label ? 'hover' : 'click',
           placement: 'bottom',
-          interactive: !popover.label,
+          isInteractive: !popover.label,
         },
       );
       popovers.splice(0, 0, resolvedPopover);
@@ -151,6 +144,11 @@ export default defineComponent({
     const bars = computed(() => glyphs.value.bars);
     const hasBars = computed(() => !!arrayHasItems(bars.value));
 
+    const popovers = computed(() => glyphs.value.popovers);
+    const popoverAttrs = computed(() =>
+      popovers.value.map((p: any) => p.attribute),
+    );
+
     const dayContentSlot = useSlot('day-content');
     const dayClasses = computed(() => {
       return [
@@ -212,24 +210,13 @@ export default defineComponent({
     });
 
     const dayPopover = computed(() => {
-      const popovers = glyphs.value.popovers;
-      if (!arrayHasItems(popovers)) return null;
-      return cleanPopoverOptions(
-        defaults(
-          {
-            name: dayPopoverName.value,
-            data: {
-              day,
-              attributes: popovers.map((p: any) => p.attribute),
-            },
-          },
-          ...popovers,
-          {
-            arrowHidden: false,
-            transitions: ['fade', 'scale'],
-            theme: displayMode.value,
-          },
-        ),
+      if (!arrayHasItems(popovers.value)) return null;
+      return defaults(
+        {
+          id: dayPopoverId.value,
+          data: { day, attributes: popoverAttrs.value },
+        },
+        ...popovers.value,
       );
     });
 
@@ -248,6 +235,7 @@ export default defineComponent({
       highlights,
       hasHighlights,
       locale,
+      popovers,
     };
   },
 });
diff --git a/src/components/Calendar/CalendarDayPopover.vue b/src/components/Calendar/CalendarDayPopover.vue
index 6cf7417fd..9f421035c 100644
--- a/src/components/Calendar/CalendarDayPopover.vue
+++ b/src/components/Calendar/CalendarDayPopover.vue
@@ -1,13 +1,10 @@
 <template>
-  <PopoverContent
-    :name="dayPopoverName"
-    :class="[`vc-${color}`, `vc-${displayMode}`]"
-  >
+  <Popover :id="dayPopoverId" :class="[`vc-${color}`, `vc-${displayMode}`]">
     <template #default="{ data: { day, attributes }, hide }">
       <CalendarSlot
         name="day-popover"
         :day="day"
-        :dayTitle="dayTitle(day)"
+        :day-title="dayTitle(day)"
         :attributes="attributes"
         :format="format"
         :masks="masks"
@@ -17,7 +14,7 @@
           <div v-if="masks.dayPopover" class="vc-day-popover-header">
             {{ dayTitle(day) }}
           </div>
-          <CalendarDayPopoverRow
+          <PopoverRow
             v-for="attribute in attributes"
             :key="attribute.key"
             :attribute="attribute"
@@ -25,17 +22,17 @@
         </div>
       </CalendarSlot>
     </template>
-  </PopoverContent>
+  </Popover>
 </template>
 
 <script setup lang="ts">
-import { PopoverContent } from 'v-popover';
 import { useCalendar } from '../../use/calendar';
 import { CalendarDay } from '../../utils/page';
-import CalendarDayPopoverRow from './CalendarDayPopoverRow.vue';
+import Popover from '../Popover/Popover.vue';
+import PopoverRow from '../Popover/PopoverRow.vue';
 import CalendarSlot from './CalendarSlot.vue';
 
-const { dayPopoverName, displayMode, color, masks, locale } = useCalendar();
+const { dayPopoverId, displayMode, color, masks, locale } = useCalendar();
 
 function format(date: Date, mask: string) {
   return locale.value.formatDate(date, mask);
@@ -45,17 +42,3 @@ function dayTitle(day: CalendarDay) {
   return locale.value.formatDate(day.date, masks.value.dayPopover);
 }
 </script>
-
-<style>
-.vc-day-popover-container {
-  font-size: var(--vc-text-xs);
-  font-weight: var(--vc-font-medium);
-}
-
-.vc-day-popover-header {
-  font-size: var(--vc-text-xs);
-  color: var(--vc-day-popover-header-color);
-  font-weight: var(--vc-font-semibold);
-  text-align: center;
-}
-</style>
diff --git a/src/components/Calendar/CalendarHeader.vue b/src/components/Calendar/CalendarHeader.vue
index bbfa14f49..1d098e1e3 100644
--- a/src/components/Calendar/CalendarHeader.vue
+++ b/src/components/Calendar/CalendarHeader.vue
@@ -42,13 +42,9 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import {
-  type PopoverPlacement,
-  type PopoverOptions,
-  directive as vPopover,
-} from 'v-popover';
 import { useCalendar } from '../../use/calendar';
 import { Page } from '../../utils/page';
+import { popoverDirective as vPopover } from '../../utils/popovers';
 import BaseIcon from '../BaseIcon/BaseIcon.vue';
 import CalendarSlot from './CalendarSlot.vue';
 
@@ -63,15 +59,15 @@ const props = defineProps<{
 }>();
 
 const {
-  navPopover,
+  navPopoverId,
+  navVisibility,
   canMovePrev,
   movePrev,
   canMoveNext,
   moveNext,
-  displayMode,
 } = useCalendar();
 
-const navPlacement = computed<PopoverPlacement>(() => {
+const navPlacement = computed(() => {
   switch (props.page.titlePosition) {
     case 'left':
       return 'bottom-start';
@@ -81,18 +77,17 @@ const navPlacement = computed<PopoverPlacement>(() => {
       return 'bottom';
   }
 });
-
-const navPopoverOptions = computed<Partial<PopoverOptions>>(() => {
+const navPopoverOptions = computed(() => {
   const { page } = props;
   return {
-    theme: displayMode.value,
-    ...navPopover.value,
+    id: navPopoverId.value,
+    visibility: navVisibility.value,
     placement: navPlacement.value,
+    modifiers: [{ name: 'flip', options: { fallbackPlacements: ['bottom'] } }],
     data: { page },
-    interactive: true,
+    isInteractive: true,
   };
 });
-
 const titleLeft = computed(() => props.page.titlePosition.includes('left'));
 const titleRight = computed(() => props.page.titlePosition.includes('right'));
 const layout_ = computed(() => {
diff --git a/src/components/Calendar/CalendarNavPopover.vue b/src/components/Calendar/CalendarNavPopover.vue
index 10e65852f..17ab6afe5 100755
--- a/src/components/Calendar/CalendarNavPopover.vue
+++ b/src/components/Calendar/CalendarNavPopover.vue
@@ -1,6 +1,6 @@
 <template>
-  <PopoverContent
-    :name="navPopoverName"
+  <Popover
+    :id="navPopoverId"
     :class="['vc-nav-popover-container', `vc-${color}`, `vc-${displayMode}`]"
   >
     <template #default="{ data }">
@@ -10,15 +10,15 @@
         </CalendarSlot>
       </CalendarPageProvider>
     </template>
-  </PopoverContent>
+  </Popover>
 </template>
 
 <script setup lang="ts">
-import { PopoverContent } from 'v-popover';
 import { useCalendar } from '../../use/calendar';
+import Popover from '../Popover/Popover.vue';
 import CalendarNav from './CalendarNav.vue';
 import CalendarPageProvider from './CalendarPageProvider.vue';
 import CalendarSlot from './CalendarSlot.vue';
 
-const { navPopoverName, color, displayMode } = useCalendar();
+const { navPopoverId, color, displayMode } = useCalendar();
 </script>
diff --git a/src/components/CalendarGrid/CalendarCell.vue b/src/components/CalendarGrid/CalendarCell.vue
index b8b34aca2..cf362c254 100644
--- a/src/components/CalendarGrid/CalendarCell.vue
+++ b/src/components/CalendarGrid/CalendarCell.vue
@@ -65,9 +65,11 @@
 import { computed, defineComponent } from 'vue';
 import type { Event } from '../../utils/calendar/event';
 import type { DateRangeCell } from '../../utils/date/range';
+import { popoverDirective } from '../../utils/popovers';
 
 export default defineComponent({
   name: 'CalendarCell',
+  directives: { popover: popoverDirective },
 });
 </script>
 
diff --git a/src/components/CalendarGrid/CalendarCellPopover.vue b/src/components/CalendarGrid/CalendarCellPopover.vue
index 845d3f425..640b62451 100644
--- a/src/components/CalendarGrid/CalendarCellPopover.vue
+++ b/src/components/CalendarGrid/CalendarCellPopover.vue
@@ -1,6 +1,6 @@
 <template>
-  <PopoverContent
-    :name="popoverId"
+  <Popover
+    :id="popoverId"
     :class="[`vc-${color}`, `vc-${displayMode}`]"
     @after-hide="onAfterHide"
     ref="popoverRef"
@@ -11,19 +11,19 @@
       v-bind="$attrs"
       @close="hide"
     />
-  </PopoverContent>
+  </Popover>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, reactive, ref, toRefs } from 'vue';
+import { useCalendar } from '../../use/calendar';
+import type { Event } from '../../utils/calendar/event';
 import {
   type PopoverOptions,
-  PopoverContent,
   hidePopover,
   showPopover,
-} from 'v-popover';
-import { useCalendar } from '../../use/calendar';
-import type { Event } from '../../utils/calendar/event';
+} from '../../utils/popovers';
+import Popover from '../Popover/Popover.vue';
 import CalendarEventEdit from './CalendarEventEdit.vue';
 
 interface State {
@@ -32,7 +32,7 @@ interface State {
 
 export default defineComponent({
   name: 'CalendarCellPopover',
-  components: { PopoverContent, CalendarEventEdit },
+  components: { Popover, CalendarEventEdit },
   inheritAttrs: false,
   props: {
     popoverId: { type: String, default: 'vc-grid-popover' },
@@ -47,16 +47,16 @@ export default defineComponent({
     const popoverOptions = computed(
       () =>
         ({
-          name: props.popoverId,
+          id: props.popoverId,
           placement: 'right',
-        }) as Partial<PopoverOptions>,
+        } as Partial<PopoverOptions>),
     );
 
     function show(event: Event) {
       state.event = event;
       showPopover({
         ...popoverOptions.value,
-        anchor: event.refSelector,
+        target: event.refSelector,
       });
     }
 
diff --git a/src/components/DatePicker/DatePicker.vue b/src/components/DatePicker/DatePicker.vue
index 385fd06ce..6633776f0 100644
--- a/src/components/DatePicker/DatePicker.vue
+++ b/src/components/DatePicker/DatePicker.vue
@@ -1,66 +1,27 @@
 <template>
   <template v-if="$slots.default">
     <slot v-bind="slotCtx" />
-    <PopoverContent
-      :name="popoverName"
-      placement="bottom-start"
-      :class="`vc-date-picker-content vc-${color} vc-${displayMode}`"
-      @before-show="onPopoverBeforeShow"
-      @after-show="onPopoverAfterShow"
-      @before-hide="onPopoverBeforeHide"
-      @after-hide="onPopoverAfterHide"
-    >
-      <DatePickerBase v-bind="$attrs" />
-    </PopoverContent>
+    <DatePickerPopover v-bind="$attrs" />
   </template>
   <DatePickerBase v-else v-bind="$attrs" />
 </template>
 
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
-import { PopoverContent } from 'v-popover';
 import { createDatePicker, emits, propsDef } from '../../use/datePicker';
 import { omit } from '../../utils/helpers';
 import DatePickerBase from './DatePickerBase.vue';
+import DatePickerPopover from './DatePickerPopover.vue';
 
 export default defineComponent({
   inheritAttrs: false,
   emits,
   props: propsDef,
-  components: {
-    DatePickerBase,
-    PopoverContent,
-  },
+  components: { DatePickerBase, DatePickerPopover },
   setup(props, ctx) {
     const datePicker = createDatePicker(props, ctx);
-    const slotCtx = reactive(omit(datePicker, 'calendarRef'));
-    const {
-      color,
-      displayMode,
-      popoverName,
-      onPopoverBeforeShow,
-      onPopoverAfterShow,
-      onPopoverBeforeHide,
-      onPopoverAfterHide,
-    } = datePicker;
-
-    return {
-      slotCtx,
-      color,
-      displayMode,
-      popoverName,
-      onPopoverBeforeShow,
-      onPopoverAfterShow,
-      onPopoverBeforeHide,
-      onPopoverAfterHide,
-    };
+    const slotCtx = reactive(omit(datePicker, 'calendarRef', 'popoverRef'));
+    return { ...datePicker, slotCtx };
   },
 });
 </script>
-
-<style>
-.vc-date-picker-content.__v-popover-content__ {
-  background: var(--vc-bg);
-  padding: 0;
-}
-</style>
diff --git a/src/components/DatePicker/DatePickerPopover.vue b/src/components/DatePicker/DatePickerPopover.vue
new file mode 100644
index 000000000..63269a481
--- /dev/null
+++ b/src/components/DatePicker/DatePickerPopover.vue
@@ -0,0 +1,37 @@
+<template>
+  <Popover
+    :id="datePickerPopoverId"
+    placement="bottom-start"
+    :class="`vc-date-picker-content vc-${color} vc-${displayMode}`"
+    ref="popoverRef"
+    @before-show="onPopoverBeforeShow"
+    @after-show="onPopoverAfterShow"
+    @before-hide="onPopoverBeforeHide"
+    @after-hide="onPopoverAfterHide"
+  >
+    <DatePickerBase v-bind="$attrs" />
+  </Popover>
+</template>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup lang="ts">
+import { useDatePicker } from '../../use/datePicker';
+import Popover from '../Popover/Popover.vue';
+import DatePickerBase from './DatePickerBase.vue';
+
+const {
+  datePickerPopoverId,
+  color,
+  displayMode,
+  popoverRef,
+  onPopoverBeforeShow,
+  onPopoverAfterShow,
+  onPopoverBeforeHide,
+  onPopoverAfterHide,
+} = useDatePicker();
+</script>
diff --git a/src/components/Popover/Popover.vue b/src/components/Popover/Popover.vue
new file mode 100644
index 000000000..724cf26d9
--- /dev/null
+++ b/src/components/Popover/Popover.vue
@@ -0,0 +1,544 @@
+<template>
+  <div
+    class="vc-popover-content-wrapper"
+    :class="{ 'is-interactive': isInteractive }"
+    ref="popoverRef"
+    @click="onClick"
+    @mouseover="onMouseOver"
+    @mouseleave="onMouseLeave"
+    @focusin="onFocusIn"
+    @focusout="onFocusOut"
+  >
+    <Transition
+      :name="`vc-${transition}`"
+      appear
+      @before-enter="beforeEnter"
+      @after-enter="afterEnter"
+      @before-leave="beforeLeave"
+      @after-leave="afterLeave"
+    >
+      <div
+        v-if="isVisible"
+        tabindex="-1"
+        :class="`vc-popover-content direction-${direction}`"
+        v-bind="$attrs"
+      >
+        <slot
+          :direction="direction"
+          :alignment="alignment"
+          :data="data"
+          :hide="hide"
+        >
+          {{ data }}
+        </slot>
+        <span
+          :class="[
+            'vc-popover-caret',
+            `direction-${direction}`,
+            `align-${alignment}`,
+          ]"
+        />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  type Instance,
+  type OptionsGeneric,
+  type State as PopperState,
+  type PositioningStrategy,
+  createPopper,
+} from '@popperjs/core';
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  toRefs,
+  watch,
+} from 'vue';
+import { elementContains, off, omit, on, resolveEl } from '../../utils/helpers';
+import type {
+  PopoverEvent,
+  PopoverOptions,
+  PopoverState,
+} from '../../utils/popovers';
+
+export default defineComponent({
+  inheritAttrs: false,
+  emits: ['before-show', 'after-show', 'before-hide', 'after-hide'],
+  props: {
+    id: { type: [Number, String, Symbol], required: true },
+    showDelay: { type: Number, default: 0 },
+    hideDelay: { type: Number, default: 110 },
+    boundarySelector: { type: String },
+  },
+  setup(props, { emit }) {
+    let timeout: number | undefined = undefined;
+    const popoverRef = ref<HTMLElement>();
+    let resizeObserver: ResizeObserver | null = null;
+    let popper: Instance | null = null;
+
+    const state: PopoverState = reactive({
+      isVisible: false,
+      target: null,
+      data: null,
+      transition: 'slide-fade',
+      placement: 'bottom',
+      direction: '',
+      positionFixed: false,
+      modifiers: [],
+      isInteractive: true,
+      visibility: 'click',
+      isHovered: false,
+      isFocused: false,
+      autoHide: false,
+      force: false,
+    });
+
+    function updateDirection(placement?: string) {
+      if (placement) state.direction = placement.split('-')[0];
+    }
+
+    function onPopperUpdate({ placement, options }: Partial<PopperState>) {
+      updateDirection(placement || options?.placement);
+    }
+
+    const popperOptions = computed<Partial<OptionsGeneric<any>>>(() => {
+      return {
+        placement: state.placement,
+        strategy: (state.positionFixed
+          ? 'fixed'
+          : 'absolute') as PositioningStrategy,
+        boundary: '',
+        modifiers: [
+          {
+            name: 'onUpdate',
+            enabled: true,
+            phase: 'afterWrite',
+            fn: onPopperUpdate,
+          },
+          ...(state.modifiers || []),
+        ],
+        onFirstUpdate: onPopperUpdate,
+      };
+      // if (props.boundarySelector) {
+      //   const boundary = document.querySelector(props.boundarySelector);
+      //   modifiers.push({
+      //     name: 'boundary',
+      //     enabled: true,
+      //     phase: 'main',
+      //     requiresIfExists: ['offset'],
+      //     fn({ state }) {
+      //       console.log(
+      //         detectOverflow(state, {
+      //           boundary,
+      //           altBoundary: true,
+      //         }),
+      //       );
+      //     },
+      //   });
+      // }
+    });
+
+    const alignment = computed(() => {
+      const isLeftRight =
+        state.direction === 'left' || state.direction === 'right';
+      let alignment = '';
+      if (state.placement) {
+        const parts = state.placement.split('-');
+        if (parts.length > 1) alignment = parts[1];
+      }
+      if (['start', 'top', 'left'].includes(alignment)) {
+        return isLeftRight ? 'top' : 'left';
+      }
+      if (['end', 'bottom', 'right'].includes(alignment)) {
+        return isLeftRight ? 'bottom' : 'right';
+      }
+      return isLeftRight ? 'middle' : 'center';
+    });
+
+    function destroyPopper() {
+      if (popper) {
+        popper.destroy();
+        popper = null;
+      }
+    }
+
+    function setupPopper() {
+      nextTick(() => {
+        const el = resolveEl(state.target);
+        if (!el || !popoverRef.value) return;
+        if (popper && popper.state.elements.reference !== el) {
+          destroyPopper();
+        }
+        if (!popper) {
+          popper = createPopper(
+            el as Element,
+            popoverRef.value,
+            popperOptions.value,
+          );
+        } else {
+          popper.update();
+        }
+      });
+    }
+
+    function updateState(newState: Partial<PopoverState>) {
+      Object.assign(state, omit(newState, 'force'));
+    }
+
+    function setTimer(delay: number, fn: Function) {
+      clearTimeout(timeout);
+      if (delay > 0) {
+        timeout = setTimeout(fn, delay);
+      } else {
+        fn();
+      }
+    }
+
+    function isCurrentTarget(target: unknown) {
+      if (!target || !popper) return false;
+      const el = resolveEl(target);
+      return el === popper.state.elements.reference;
+    }
+
+    async function show(opts: Partial<PopoverOptions> = {}) {
+      if (state.force) return;
+      if (opts.force) state.force = true;
+
+      setTimer(opts.showDelay ?? props.showDelay, () => {
+        if (state.isVisible) {
+          state.force = false;
+        }
+        updateState({
+          ...opts,
+          isVisible: true,
+        });
+        setupPopper();
+      });
+    }
+
+    function hide(opts: Partial<PopoverOptions> = {}) {
+      if (!popper) return;
+      if (opts.target && !isCurrentTarget(opts.target)) return;
+
+      if (state.force) return;
+      if (opts.force) state.force = true;
+
+      setTimer(opts.hideDelay ?? props.hideDelay, () => {
+        if (!state.isVisible) state.force = false;
+        state.isVisible = false;
+      });
+    }
+
+    function toggle(opts: Partial<PopoverOptions> = {}) {
+      if (opts.target == null) return;
+      if (state.isVisible && isCurrentTarget(opts.target)) {
+        hide(opts);
+      } else {
+        show(opts);
+      }
+    }
+
+    function onDocumentClick(e: CustomEvent) {
+      if (!popper) return;
+      const popperRef = popper.state.elements.reference;
+      if (!popoverRef.value || !popperRef) {
+        return;
+      }
+      // Don't hide if target element is contained within popover ref or content
+      const target = e.target as Node;
+      if (
+        elementContains(popoverRef.value, target) ||
+        elementContains(popperRef as Node, target)
+      ) {
+        return;
+      }
+      // Hide the popover
+      hide({ force: true });
+    }
+
+    function onDocumentKeydown(e: KeyboardEvent) {
+      if (e.key === 'Esc' || e.key === 'Escape') {
+        hide();
+      }
+    }
+
+    function onDocumentShowPopover({ detail }: PopoverEvent) {
+      if (!detail.id || detail.id !== props.id) return;
+      show(detail);
+    }
+
+    function onDocumentHidePopover({ detail }: PopoverEvent) {
+      if (!detail.id || detail.id !== props.id) return;
+      hide(detail);
+    }
+
+    function onDocumentTogglePopover({ detail }: PopoverEvent) {
+      if (!detail.id || detail.id !== props.id) return;
+      toggle(detail);
+    }
+
+    function addEvents() {
+      on(document, 'keydown', onDocumentKeydown);
+      on(document, 'click', onDocumentClick);
+      on(document, 'show-popover', onDocumentShowPopover);
+      on(document, 'hide-popover', onDocumentHidePopover);
+      on(document, 'toggle-popover', onDocumentTogglePopover);
+    }
+
+    function removeEvents() {
+      off(document, 'keydown', onDocumentKeydown);
+      off(document, 'click', onDocumentClick);
+      off(document, 'show-popover', onDocumentShowPopover);
+      off(document, 'hide-popover', onDocumentHidePopover);
+      off(document, 'toggle-popover', onDocumentTogglePopover);
+    }
+
+    function beforeEnter(el: Element) {
+      emit('before-show', el);
+    }
+
+    function afterEnter(el: Element) {
+      state.force = false;
+      emit('after-show', el);
+    }
+
+    function beforeLeave(el: Element) {
+      emit('before-hide', el);
+    }
+
+    function afterLeave(el: Element) {
+      state.force = false;
+      destroyPopper();
+      emit('after-hide', el);
+    }
+
+    function onClick(e: MouseEvent) {
+      e.stopPropagation();
+    }
+
+    function onMouseOver() {
+      state.isHovered = true;
+      if (
+        state.isInteractive &&
+        ['hover', 'hover-focus'].includes(state.visibility)
+      ) {
+        show();
+      }
+    }
+
+    function onMouseLeave() {
+      state.isHovered = false;
+      if (!popper) return;
+      const popperRef = popper.state.elements.reference;
+      if (
+        state.autoHide &&
+        !state.isFocused &&
+        (!popperRef || popperRef !== document.activeElement) &&
+        ['hover', 'hover-focus'].includes(state.visibility)
+      ) {
+        hide();
+      }
+    }
+
+    function onFocusIn() {
+      state.isFocused = true;
+      if (
+        state.isInteractive &&
+        ['focus', 'hover-focus'].includes(state.visibility)
+      ) {
+        show();
+      }
+    }
+
+    function onFocusOut(e: FocusEvent) {
+      if (
+        ['focus', 'hover-focus'].includes(state.visibility) &&
+        (!e.relatedTarget ||
+          !elementContains(popoverRef.value!, e.relatedTarget as Node))
+      ) {
+        state.isFocused = false;
+        if (!state.isHovered && state.autoHide) hide();
+      }
+    }
+
+    function cleanupRO() {
+      if (resizeObserver != null) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+      }
+    }
+
+    watch(
+      () => popoverRef.value,
+      val => {
+        cleanupRO();
+        if (!val) return;
+        resizeObserver = new ResizeObserver(() => {
+          if (popper) popper.update();
+        });
+        resizeObserver.observe(val);
+      },
+    );
+
+    watch(() => state.placement, updateDirection, {
+      immediate: true,
+    });
+
+    onMounted(() => {
+      addEvents();
+    });
+
+    onUnmounted(() => {
+      destroyPopper();
+      cleanupRO();
+      removeEvents();
+    });
+
+    return {
+      ...toRefs(state),
+      popoverRef,
+      alignment,
+      hide,
+      setupPopper,
+      beforeEnter,
+      afterEnter,
+      beforeLeave,
+      afterLeave,
+      onClick,
+      onMouseOver,
+      onMouseLeave,
+      onFocusIn,
+      onFocusOut,
+    };
+  },
+});
+</script>
+
+<style lang="css">
+.vc-popover-content-wrapper {
+  --popover-horizontal-content-offset: 8px;
+  --popover-vertical-content-offset: 10px;
+  --popover-caret-horizontal-offset: 18px;
+  --popover-caret-vertical-offset: 8px;
+
+  position: absolute;
+  display: block;
+  outline: none;
+  z-index: 10;
+  &:not(.is-interactive) {
+    pointer-events: none;
+  }
+}
+
+.vc-popover-content {
+  position: relative;
+  color: var(--vc-popover-content-color);
+  font-weight: var(--vc-font-medium);
+  background-color: var(--vc-popover-content-bg);
+  border: 1px solid;
+  border-color: var(--vc-popover-content-border);
+  border-radius: var(--vc-rounded-lg);
+  padding: 4px;
+  outline: none;
+  z-index: 10;
+  box-shadow: var(--vc-shadow-lg);
+  &.direction-bottom {
+    margin-top: var(--popover-vertical-content-offset);
+  }
+  &.direction-top {
+    margin-bottom: var(--popover-vertical-content-offset);
+  }
+  &.direction-left {
+    margin-right: var(--popover-horizontal-content-offset);
+  }
+  &.direction-right {
+    margin-left: var(--popover-horizontal-content-offset);
+  }
+}
+
+.vc-popover-caret {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-top: inherit;
+  border-left: inherit;
+  background-color: inherit;
+  z-index: -1;
+  &.direction-bottom {
+    top: 0;
+    &.align-left {
+      transform: translateY(-50%) rotate(45deg);
+    }
+    &.align-center {
+      transform: translateX(-50%) translateY(-50%) rotate(45deg);
+    }
+    &.align-right {
+      transform: translateY(-50%) rotate(45deg);
+    }
+  }
+  &.direction-top {
+    top: 100%;
+    &.align-left {
+      transform: translateY(-50%) rotate(-135deg);
+    }
+    &.align-center {
+      transform: translateX(-50%) translateY(-50%) rotate(-135deg);
+    }
+    &.align-right {
+      transform: translateY(-50%) rotate(-135deg);
+    }
+  }
+  &.direction-left {
+    left: 100%;
+    &.align-top {
+      transform: translateX(-50%) rotate(135deg);
+    }
+    &.align-middle {
+      transform: translateY(-50%) translateX(-50%) rotate(135deg);
+    }
+    &.align-bottom {
+      transform: translateX(-50%) rotate(135deg);
+    }
+  }
+  &.direction-right {
+    left: 0;
+    &.align-top {
+      transform: translateX(-50%) rotate(-45deg);
+    }
+    &.align-middle {
+      transform: translateY(-50%) translateX(-50%) rotate(-45deg);
+    }
+    &.align-bottom {
+      transform: translateX(-50%) rotate(-45deg);
+    }
+  }
+  &.align-left {
+    left: var(--popover-caret-horizontal-offset);
+  }
+  &.align-center {
+    left: 50%;
+  }
+  &.align-right {
+    right: var(--popover-caret-horizontal-offset);
+  }
+  &.align-top {
+    top: var(--popover-caret-vertical-offset);
+  }
+  &.align-middle {
+    top: 50%;
+  }
+  &.align-bottom {
+    bottom: var(--popover-caret-vertical-offset);
+  }
+}
+</style>
diff --git a/src/components/Calendar/CalendarDayPopoverRow.vue b/src/components/Popover/PopoverRow.vue
similarity index 100%
rename from src/components/Calendar/CalendarDayPopoverRow.vue
rename to src/components/Popover/PopoverRow.vue
diff --git a/src/components/index.ts b/src/components/index.ts
index 19e9ae9f5..807a6c708 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
 export { default as Calendar } from './Calendar/Calendar.vue';
-export { default as CalendarDayPopoverRow } from './Calendar/CalendarDayPopoverRow.vue';
 export { default as DatePicker } from './DatePicker/DatePicker.vue';
+export { default as Popover } from './Popover/Popover.vue';
+export { default as PopoverRow } from './Popover/PopoverRow.vue';
diff --git a/src/index.ts b/src/index.ts
index 6fbf795e3..e0aa547fa 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,11 +1,10 @@
 import type { App } from 'vue';
 import * as components from './components/index';
 import './styles/index.css';
-import 'v-popover/style.css';
 import { setVueInstance } from './utils/config/index';
 import { type Defaults, setupDefaults } from './utils/defaults';
 
-const install = (app: App, defaults: Partial<Defaults> = {}) => {
+const install = (app: App, defaults: Defaults = {}) => {
   setVueInstance(app);
   app.use(setupDefaults, defaults);
   const prefix = app.config.globalProperties.$VCalendar.componentPrefix;
@@ -18,6 +17,7 @@ const install = (app: App, defaults: Partial<Defaults> = {}) => {
 export default { install };
 export * from './components';
 export { setupDefaults as setupCalendar } from './utils/defaults';
+export { popoverDirective } from './utils/popovers';
+
 export { createCalendar, useCalendar } from './use/calendar';
 export { createDatePicker, useDatePicker } from './use/datePicker';
-export * as Popover from 'v-popover';
diff --git a/src/styles/index.css b/src/styles/index.css
index a6b4026b1..987c9ea3e 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -19,6 +19,10 @@
       outline: none;
     }
   }
+  /* Hides double border within popovers */
+  & .vc-container {
+    border: none;
+  }
 }
 
 .vc-bordered {
@@ -35,6 +39,10 @@
   background-color: transparent;
 }
 
-.__v-popover-content__ .vc-container {
-  border: none;
+.vc-date-picker-content {
+  padding: 0;
+  background-color: var(--vc-bg);
+  .vc-container {
+    border: 0;
+  }
 }
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 7d0052aa3..4723468e3 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -214,6 +214,15 @@
   --vc-nav-item-active-bg: var(--vc-accent-500);
   --vc-nav-item-active-box-shadow: var(--vc-shadow);
   --vc-nav-item-current-color: var(--vc-accent-600);
+  /* Calendar day popover */
+  --vc-day-popover-container-color: var(--vc-white);
+  --vc-day-popover-container-bg: var(--vc-gray-800);
+  --vc-day-popover-container-border: var(--vc-gray-700);
+  --vc-day-popover-header-color: var(--vc-gray-700);
+  /* Popover content */
+  --vc-popover-content-color: var(--vc-gray-900);
+  --vc-popover-content-bg: var(--vc-gray-50);
+  --vc-popover-content-border: var(--vc-gray-300);
   /* Time picker */
   --vc-time-picker-border: var(--vc-gray-300);
   --vc-time-weekday-color: var(--vc-gray-700);
@@ -270,6 +279,15 @@
   --vc-nav-item-active-bg: var(--vc-accent-500);
   --vc-nav-item-active-box-shadow: none;
   --vc-nav-item-current-color: var(--vc-accent-400);
+  /* Calendar day popover */
+  --vc-day-popover-container-color: var(--vc-gray-800);
+  --vc-day-popover-container-bg: var(--vc-white);
+  --vc-day-popover-container-border: var(--vc-gray-100);
+  --vc-day-popover-header-color: var(--vc-gray-300);
+  /* Popover content */
+  --vc-popover-content-color: var(--vc-white);
+  --vc-popover-content-bg: var(--vc-gray-800);
+  --vc-popover-content-border: var(--vc-gray-700);
   /* Time picker */
   --vc-time-picker-border: var(--vc-gray-700);
   --vc-time-weekday-color: var(--vc-gray-400);
diff --git a/src/use/calendar.ts b/src/use/calendar.ts
index f880a2c99..3a0222b10 100755
--- a/src/use/calendar.ts
+++ b/src/use/calendar.ts
@@ -11,11 +11,6 @@ import {
   watch,
   watchEffect,
 } from 'vue';
-import {
-  type PopoverAction,
-  type PopoverOptions,
-  hidePopover,
-} from 'v-popover';
 import { Attribute, type AttributeConfig } from '../utils/attribute';
 import {
   type DateSource,
@@ -28,7 +23,7 @@ import { getDefault } from '../utils/defaults';
 import {
   type CustomElement,
   arrayHasItems,
-  displayWarning,
+  has,
   head,
   isBoolean,
   last,
@@ -48,6 +43,7 @@ import {
   pageIsValid,
   pageRangeToArray,
 } from '../utils/page';
+import { type PopoverVisibility, hidePopover } from '../utils/popovers';
 import { addHorizontalSwipeHandler } from '../utils/touch';
 import { handleWatcher, skipWatcher } from '../utils/watchers';
 import { propsDef as basePropsDef, useOrCreateBase } from './base';
@@ -109,12 +105,8 @@ export const propsDef = {
     default: () => getDefault('titlePosition') as TitlePosition,
   },
   navVisibility: {
-    type: String as PropType<PopoverAction>,
-    default: () => getDefault('navVisibility') as PopoverAction,
-  },
-  navPopover: {
-    type: Object as PropType<Partial<PopoverOptions>>,
-    default: () => getDefault('navPopover'),
+    type: String as PropType<PopoverVisibility>,
+    default: () => getDefault('navVisibility') as PopoverVisibility,
   },
   showWeeknumbers: [Boolean, String],
   showIsoWeeknumbers: [Boolean, String],
@@ -147,8 +139,6 @@ export const emitsDef = [
 ];
 
 const contextKey = Symbol('__vc_calendar_context__');
-let navPopoverUid = 0;
-let dayPopoverUid = 0;
 
 export function createCalendar(
   props: CalendarProps,
@@ -160,8 +150,8 @@ export function createCalendar(
   const focusedDay = ref<CalendarDay | null>(null);
   const focusableDay = ref(new Date().getDate());
   const inTransition = ref(false);
-  const navPopoverName = ref(`__nav-popover-${navPopoverUid++}__`);
-  const dayPopoverName = ref(`__day-popover-${dayPopoverUid++}__`);
+  const navPopoverId = ref(Symbol());
+  const dayPopoverId = ref(Symbol());
   const _view = ref(props.view);
   const _pages = ref<Page[]>([]);
   const transitionName = ref('');
@@ -206,18 +196,7 @@ export function createCalendar(
       props.maxPage || (maxDate.value ? getDateAddress(maxDate.value) : null),
   );
 
-  const navPopover = computed(() => {
-    const result = {
-      teleport: null,
-      ...props.navPopover,
-      name: navPopoverName.value,
-    };
-    if (props.navVisibility) {
-      displayWarning('navVisibility');
-      result.action = props.navVisibility;
-    }
-    return result;
-  });
+  const navVisibility = computed(() => props.navVisibility);
 
   const showWeeknumbers = computed(() => !!props.showWeeknumbers);
 
@@ -498,9 +477,8 @@ export function createCalendar(
     if (!opts.force && !canMove(target, opts)) return false;
     // Move to new `fromPage` if it's different from the current one
     if (opts.fromPage && !pageIsEqualToPage(opts.fromPage, firstPage.value)) {
-      // Hide popovers for good measure
-      hidePopover({ name: navPopoverName.value, hideDelay: 0 });
-      hidePopover({ name: dayPopoverName.value, hideDelay: 0 });
+      // Hide nav popover for good measure
+      hidePopover({ id: navPopoverId.value, hideDelay: 0 });
       // Quietly change view if needed
       if (opts.view) {
         skipWatcher('view', 10);
@@ -742,6 +720,8 @@ export function createCalendar(
     containerRef,
     focusedDay,
     inTransition,
+    navPopoverId,
+    dayPopoverId,
     view: _view,
     pages: _pages,
     transitionName,
@@ -767,9 +747,7 @@ export function createCalendar(
     isMonthly,
     isWeekly,
     isDaily,
-    dayPopoverName,
-    navPopoverName,
-    navPopover,
+    navVisibility,
     showWeeknumbers,
     showIsoWeeknumbers,
     getDateAddress,
diff --git a/src/use/datePicker.ts b/src/use/datePicker.ts
index e5e382c55..0f22a0f3a 100644
--- a/src/use/datePicker.ts
+++ b/src/use/datePicker.ts
@@ -11,20 +11,13 @@ import {
   inject,
   provide,
 } from 'vue';
-import {
-  type PopoverOptions,
-  showPopover as sp,
-  hidePopover as hp,
-  togglePopover as tp,
-  getPopoverEventHandlers,
-} from 'v-popover';
 import Calendar from '../components/Calendar/Calendar.vue';
-import { DatePickerPopoverOptions, getDefault } from '../utils/defaults';
+import Popover from '../components/Popover/Popover.vue';
+import { getDefault } from '../utils/defaults';
 import type { AttributeConfig } from '../utils/attribute';
 import { type CalendarDay, getPageAddressForDate } from '../utils/page';
 import {
   defaultsDeep,
-  cleanPopoverOptions,
   isArray,
   isDate,
   isNumber,
@@ -40,6 +33,13 @@ import {
   isDateParts,
 } from '../utils/date/helpers';
 import type { SimpleDateRange } from '../utils/date/range';
+import {
+  type PopoverOptions,
+  showPopover as sp,
+  hidePopover as hp,
+  togglePopover as tp,
+  getPopoverEventHandlers,
+} from '../utils/popovers';
 import { propsDef as basePropsDef, createBase } from './base';
 import type { MoveTarget, MoveOptions } from './calendar';
 import { provideSlots } from './slots';
@@ -113,10 +113,8 @@ export const propsDef = {
     default: () => getDefault('datePicker.inputDebounce'),
   },
   popover: {
-    type: [Boolean, Object, null] as PropType<
-      Partial<DatePickerPopoverOptions> | boolean | null
-    >,
-    default: () => getDefault('datePicker.popover'),
+    type: [Boolean, Object] as PropType<boolean | Partial<PopoverOptions>>,
+    default: true,
   },
   dragAttribute: Object as PropType<AttributeConfig>,
   selectAttribute: Object as PropType<AttributeConfig>,
@@ -134,8 +132,6 @@ export const emits = [
   'popover-did-hide',
 ];
 
-let popoverUid = 0;
-
 export function createDatePicker(
   props: DatePickerProps,
   { emit, slots }: SetupContext<string[]>,
@@ -143,13 +139,14 @@ export function createDatePicker(
   provideSlots(slots, { footer: 'dp-footer' });
 
   const baseCtx = createBase(props);
-  const { locale, masks, disabledAttribute, displayMode } = baseCtx;
+  const { locale, masks, disabledAttribute } = baseCtx;
 
   const showCalendar = ref(false);
+  const datePickerPopoverId = ref(Symbol());
   const dateValue = ref<null | Date | SimpleDateRange>(null);
   const dragValue = ref<null | SimpleDateRange>(null);
   const inputValues = ref<string[]>(['', '']);
-  const popoverName = ref(`__date_picker_popover_${popoverUid++}__`);
+  const popoverRef = ref<InstanceType<typeof Popover> | null>(null);
   const calendarRef = ref<InstanceType<typeof Calendar> | null>(null);
 
   let updateTimeout: undefined | number = undefined;
@@ -222,16 +219,19 @@ export function createDatePicker(
   });
 
   const popover = computed(() => {
-    return cleanPopoverOptions(
-      defaultsDeep(
-        { name: popoverName.value },
-        props.popover,
-        getDefault('datePicker.popover'),
-        { theme: displayMode.value },
-      ),
-    );
+    const target = popoverRef.value?.$el.previousElementSibling ?? undefined;
+    return defaultsDeep({}, props.popover, getDefault('datePicker.popover'), {
+      target,
+    }) as Partial<PopoverOptions>;
   });
 
+  const popoverEvents = computed(() =>
+    getPopoverEventHandlers({
+      ...popover.value,
+      id: datePickerPopoverId.value,
+    }),
+  );
+
   const inputValue = computed(() => {
     return isRange.value
       ? {
@@ -246,7 +246,7 @@ export function createDatePicker(
       input: onInputInput(target),
       change: onInputChange(target),
       keyup: onInputKeyup,
-      ...(props.popover ? getPopoverEventHandlers(popover.value) : {}),
+      ...(props.popover && popoverEvents.value),
     }));
     return isRange.value
       ? {
@@ -705,9 +705,10 @@ export function createDatePicker(
 
   function showPopover(opts: Partial<PopoverOptions> = {}) {
     sp({
+      ...popover.value,
       ...opts,
-      interactive: true,
-      name: popoverName.value,
+      isInteractive: true,
+      id: datePickerPopoverId.value,
     });
   }
 
@@ -715,16 +716,18 @@ export function createDatePicker(
     hp({
       hideDelay: 10,
       force: true,
+      ...popover.value,
       ...opts,
-      name: popoverName.value,
+      id: datePickerPopoverId.value,
     });
   }
 
   function togglePopover(opts: Partial<PopoverOptions>) {
     tp({
+      ...popover.value,
       ...opts,
-      interactive: true,
-      name: popoverName.value,
+      isInteractive: true,
+      id: datePickerPopoverId.value,
     });
   }
 
@@ -856,7 +859,9 @@ export function createDatePicker(
   const context = {
     ...baseCtx,
     showCalendar,
-    popoverName,
+    datePickerPopoverId,
+    popoverRef,
+    popoverEvents,
     calendarRef,
     isRange,
     isTimeMode,
diff --git a/src/utils/attribute.ts b/src/utils/attribute.ts
index a412b0f0f..b7be3fee4 100644
--- a/src/utils/attribute.ts
+++ b/src/utils/attribute.ts
@@ -1,4 +1,4 @@
-import type { PopoverAction, PopoverOptions } from 'v-popover';
+import type { Placement } from '@popperjs/core';
 import { addDays } from './date/helpers';
 import { DateRange, type DateRangeSource } from './date/range';
 import {
@@ -12,16 +12,18 @@ import {
   HighlightConfig,
   Profile,
 } from './glyph';
-import { arrayHasItems, cleanPopoverOptions } from './helpers';
+import { arrayHasItems } from './helpers';
 import Locale from './locale';
+import type { PopoverVisibility } from './popovers';
 import { Theme } from './theme';
 
-export interface AttributePopoverConfig extends PopoverOptions {
+export type PopoverConfig = Partial<{
   label: string;
-  visibility: PopoverAction;
+  visibility: PopoverVisibility;
+  placement: Placement;
   hideIndicator: boolean;
   isInteractive: boolean;
-}
+}>;
 
 export type EventConfig = Partial<{
   label: string;
@@ -29,11 +31,12 @@ export type EventConfig = Partial<{
 
 export type AttributeConfig = Partial<{
   key: string | number;
+  hashcode: string;
   content: ContentConfig;
   highlight: HighlightConfig;
   dot: DotConfig;
   bar: BarConfig;
-  popover: Partial<AttributePopoverConfig>;
+  popover: PopoverConfig;
   event: EventConfig;
   dates: DateRangeSource[];
   customData: any;
@@ -45,12 +48,13 @@ let attrKey = 0;
 
 export class Attribute {
   key: string | number = '';
+  hashcode = '';
   highlight: Profile<Highlight> | null = null;
   content: Profile<Content> | null = null;
   dot: Profile<Dot> | null = null;
   bar: Profile<Bar> | null = null;
   event: EventConfig | null = null;
-  popover: Partial<AttributePopoverConfig> | null = null;
+  popover: PopoverConfig | null = null;
   customData: any = null;
   ranges: DateRange[];
   hasRanges = false;
@@ -60,9 +64,11 @@ export class Attribute {
   locale: Locale;
 
   constructor(config: Partial<AttributeConfig>, theme: Theme, locale: Locale) {
-    // Assign config
-    const { dates } = Object.assign(this, { order: 0, pinPage: false }, config);
-    this.popover &&= cleanPopoverOptions(this.popover);
+    const { dates } = Object.assign(
+      this,
+      { hashcode: '', order: 0, pinPage: false },
+      config,
+    );
     this.key ||= ++attrKey;
     this.locale = locale;
     // Normalize attribute
diff --git a/src/utils/calendar/event.ts b/src/utils/calendar/event.ts
index 9a959afcd..99df1ff37 100644
--- a/src/utils/calendar/event.ts
+++ b/src/utils/calendar/event.ts
@@ -1,12 +1,12 @@
 import { addDays } from 'date-fns';
 import { type ComputedRef, computed, reactive, toRefs } from 'vue';
-import type { PopoverOptions } from 'v-popover';
 import type { DragOffset, ResizeOffset } from '../../use/calendarGrid';
 import { MS_PER_MINUTE, roundDate } from '../date/helpers';
 import { DateRange } from '../date/range';
 import { clamp, omit } from '../helpers';
 import Locale from '../locale';
 import type { CalendarDay } from '../page';
+import type { PopoverOptions } from '../popovers';
 
 export interface ResizeOrigin {
   start: Date;
diff --git a/src/utils/date/range.ts b/src/utils/date/range.ts
index 3638c1c52..7e287589c 100644
--- a/src/utils/date/range.ts
+++ b/src/utils/date/range.ts
@@ -119,7 +119,7 @@ export class DateRange {
       if (this.hasRepeat) return 1;
       return Infinity;
     }
-    return this.end.dayIndex - this.start.dayIndex + 1;
+    return this.end.dayIndex - this.start.dayIndex;
   }
 
   startsOnDay(dayParts: DayParts) {
diff --git a/src/utils/date/rules.ts b/src/utils/date/rules.ts
index 39d3438ca..a810ad187 100644
--- a/src/utils/date/rules.ts
+++ b/src/utils/date/rules.ts
@@ -70,7 +70,7 @@ export class IntervalRule implements Rule<IntervalRuleType> {
   ) {
     // Start date needed for interval rules
     if (!this.from) {
-      console.warn(
+      console.error(
         `A valid "from" date is required for date interval rule. This rule will be skipped.`,
       );
       this.validated = false;
@@ -134,7 +134,7 @@ export class ComponentRule implements Rule<ComponentRuleType> {
     const result: number[] = [];
     components.forEach(component => {
       if (!this.validator(component)) {
-        console.warn(
+        console.error(
           `Component value ${component} in invalid for "${this.type}" rule. This rule will be skipped.`,
         );
         return;
@@ -214,13 +214,13 @@ export class OrdinalComponentRule implements Rule<OrdinalComponentRuleType> {
       if (isNumber(numOrArray)) {
         if (i === 0) return;
         if (!isOrdinalWeekInMonth(config[0])) {
-          console.warn(
+          console.error(
             `Ordinal range for "${this.type}" rule is from -5 to -1 or 1 to 5. This rule will be skipped.`,
           );
           return;
         }
         if (!isDayOfWeek(numOrArray)) {
-          console.warn(
+          console.error(
             `Acceptable range for "${this.type}" rule is from 1 to 5. This rule will be skipped`,
           );
           return;
@@ -239,13 +239,13 @@ export class OrdinalComponentRule implements Rule<OrdinalComponentRuleType> {
       if (isNumber(numOrArray)) {
         if (i === 0) return;
         if (!isOrdinalWeekInMonth(config[0])) {
-          console.warn(
+          console.error(
             `Ordinal range for "${this.type}" rule is from -5 to -1 or 1 to 5. This rule will be skipped.`,
           );
           return;
         }
         if (!isDayOfWeek(numOrArray)) {
-          console.warn(
+          console.error(
             `Acceptable range for "${this.type}" rule is from 1 to 5. This rule will be skipped`,
           );
           return;
@@ -275,7 +275,7 @@ export class FunctionRule implements Rule<FunctionRuleType> {
 
   constructor(public fn: Function) {
     if (!isFunction(fn)) {
-      console.warn(
+      console.error(
         `The function rule requires a valid function. This rule will be skipped.`,
       );
       this.validated = false;
diff --git a/src/utils/defaults/index.ts b/src/utils/defaults/index.ts
index fff4b836c..a84c22039 100644
--- a/src/utils/defaults/index.ts
+++ b/src/utils/defaults/index.ts
@@ -1,53 +1,42 @@
-import { type App, computed, shallowReactive } from 'vue';
+import { type App, computed, reactive } from 'vue';
 import type { DarkModeConfig } from 'vue-screen-utils';
-import {
-  defaultsDeep,
-  cleanPopoverOptions,
-  get,
-  has,
-  mapValues,
-} from '../helpers';
-import { PopoverOptions, PopoverAction } from 'v-popover';
+import { defaultsDeep, get, has, mapValues } from '../helpers';
 import locales from './locales';
 import masks from './masks.json';
 import touch from './touch.json';
 
 declare const window: any;
 
-export type DatePickerPopoverOptions = PopoverOptions & {
-  visibility: PopoverAction;
-  isInteractive: boolean;
-};
+interface DatePickerPopoverDefaults {
+  visibility?: string;
+  placement?: string;
+  isInteractive?: boolean;
+}
+
+interface DatePickerDefaults {
+  updateOnInput?: boolean;
+  inputDebounce?: number;
+  popover?: DatePickerPopoverDefaults;
+}
 
 export interface Defaults {
-  componentPrefix: string;
-  color: string;
-  isDark: DarkModeConfig;
-  navVisibility?: PopoverAction;
-  navPopover: Partial<PopoverOptions>;
-  titlePosition: string;
-  transition: string;
-  touch: object;
-  masks: object;
-  locales: any;
-  datePicker: {
-    updateOnInput: boolean;
-    inputDebounce: number;
-    popover: Partial<DatePickerPopoverOptions>;
-  };
+  componentPrefix?: string;
+  color?: string;
+  isDark?: DarkModeConfig;
+  navVisibility?: string;
+  titlePosition?: string;
+  transition?: string;
+  touch?: object;
+  masks?: object;
+  locales?: any;
+  datePicker?: DatePickerDefaults;
 }
 
 const defaultConfig: Defaults = {
   componentPrefix: 'V',
   color: 'blue',
   isDark: false,
-  navPopover: {
-    action: 'click',
-    flip: false,
-    arrowHidden: false,
-    transitions: ['fade', 'slide', 'scale'],
-    offset: 8,
-  },
+  navVisibility: 'click',
   titlePosition: 'center',
   transition: 'slide-h',
   touch,
@@ -57,14 +46,14 @@ const defaultConfig: Defaults = {
     updateOnInput: true,
     inputDebounce: 1000,
     popover: {
-      action: 'hover-focus',
+      visibility: 'hover-focus',
       placement: 'bottom-start',
-      interactive: true,
+      isInteractive: true,
     },
   },
 };
 
-const state = shallowReactive<Defaults>(defaultConfig);
+const state = reactive(defaultConfig);
 
 const defaultLocales = computed(() => {
   return mapValues(state.locales, (l: any) => {
@@ -82,21 +71,7 @@ export const getDefault = (path: string) => {
   return get(state, path);
 };
 
-export const setupDefaults = (app: App, userDefaults?: Partial<Defaults>) => {
+export const setupDefaults = (app: App, userDefaults: Defaults | undefined) => {
   app.config.globalProperties.$VCalendar = state;
-  if (userDefaults) {
-    if (userDefaults.navVisibility) {
-      state.navPopover.action = userDefaults.navVisibility;
-      delete userDefaults.navVisibility;
-      console.warn(
-        'The `navVisibility` option is deprecated. Use `navPopover` instead.',
-      );
-    }
-    if (userDefaults.datePicker?.popover) {
-      state.datePicker.popover = cleanPopoverOptions(
-        userDefaults.datePicker.popover,
-      );
-    }
-  }
   return Object.assign(state, defaultsDeep(userDefaults, state));
 };
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index ee586277a..b6e7faf65 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -3,6 +3,7 @@ import _isDate from 'lodash/isDate';
 import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';
 import _some from 'lodash/some';
+import type { ComponentPublicInstance } from 'vue';
 
 export { isFunction, isString };
 export { default as isBoolean } from 'lodash/isBoolean';
@@ -11,17 +12,12 @@ export { default as isUndefined } from 'lodash/isUndefined';
 export { default as get } from 'lodash/get';
 export { default as set } from 'lodash/set';
 export { default as mapValues } from 'lodash/mapValues';
+export { default as defaults } from 'lodash/defaults';
+export { default as defaultsDeep } from 'lodash/defaultsDeep';
 export { default as map } from 'lodash/map';
 export { default as head } from 'lodash/head';
 export { default as last } from 'lodash/last';
 
-import type {
-  ElementTarget,
-  PopoverAction,
-  PopoverPlacement,
-  PopoverOptions,
-} from 'v-popover';
-
 // Type checkers
 export const getType = (value: any) =>
   Object.prototype.toString.call(value).slice(8, -1);
@@ -47,91 +43,6 @@ export const pad = (val: string | number, len: number, char = '0') => {
   return val;
 };
 
-export interface LegacyPopoverOptions {
-  id: PropertyKey;
-  visibility: PopoverAction;
-  isInteractive: boolean;
-  autoHide: boolean;
-  force: boolean;
-  target: ElementTarget;
-  modifiers: any;
-  placement: PopoverPlacement;
-  positionFixed: boolean;
-  data: any;
-  showDelay: number;
-  hideDelay: number;
-}
-
-const warnings = {
-  visibility: {
-    shown: false,
-    message: 'Popover option `visibility` is deprecated. Use `action` instead.',
-  },
-  navVisibility: {
-    shown: false,
-    message:
-      'The `navVisibility` prop is deprecated. Use `navPopover` instead.',
-  },
-  target: {
-    shown: false,
-    message: 'Popover option `target` is deprecated. Use `anchor` instead.',
-  },
-  interactive: {
-    shown: false,
-    message:
-      'Popover option `isInteractive` is deprecated. Use `interactive` instead.',
-  },
-  positionFixed: {
-    shown: false,
-    message:
-      'Popover option `positionFixed` is deprecated. Use `strategy` instead.',
-  },
-  modifiers: {
-    shown: false,
-    message: 'Popover option `modifiers` is deprecated.',
-  },
-};
-
-export function displayWarning(key: keyof typeof warnings) {
-  if (!warnings[key].shown) {
-    console.warn(warnings[key].message);
-    warnings[key].shown = true;
-  }
-}
-
-export function cleanPopoverOptions(
-  opts: Partial<LegacyPopoverOptions> & Partial<PopoverOptions>,
-) {
-  const {
-    visibility,
-    target,
-    isInteractive,
-    modifiers,
-    positionFixed,
-    ...cleanOpts
-  } = opts;
-  if (visibility != null) {
-    displayWarning('visibility');
-    cleanOpts.action = visibility;
-  }
-  if (target != null) {
-    displayWarning('target');
-    cleanOpts.anchor = target;
-  }
-  if (isInteractive != null) {
-    displayWarning('interactive');
-    cleanOpts.interactive = isInteractive;
-  }
-  if (positionFixed != null) {
-    displayWarning('positionFixed');
-    cleanOpts.strategy = positionFixed ? 'fixed' : 'absolute';
-  }
-  if (modifiers != null) {
-    displayWarning('modifiers');
-  }
-  return cleanOpts;
-}
-
 export const roundTenth = (n: number) => {
   return Math.round(n * 100) / 100;
 };
@@ -141,6 +52,12 @@ export const isArray = (val: any): val is any[] => Array.isArray(val);
 export const arrayHasItems = (array: any): boolean =>
   isArray(array) && array.length > 0;
 
+export const resolveEl = (target: unknown): Node | null => {
+  if (target == null) return null;
+  if (document && isString(target)) return document.querySelector(target);
+  return (target as ComponentPublicInstance).$el ?? target;
+};
+
 export interface ElementPosition {
   top: number;
   left: number;
@@ -231,34 +148,23 @@ export function extend<T extends object, E extends object>(
   return new Proxy(value, handler) as T & E;
 }
 
-export function defaults(target: any, ...sources: any[]) {
-  for (let source of sources) {
-    if (source != null) {
-      for (const key in source) {
-        if (target[key] === undefined) {
-          target[key] = source[key];
-        }
-      }
-    }
-  }
-  return target;
+export function clamp(num: number, min: number, max: number) {
+  return Math.min(Math.max(num, min), max);
 }
 
-export function defaultsDeep(target: any, ...sources: any[]) {
-  for (let source of sources) {
-    if (source != null) {
-      for (const key in source) {
-        if (typeof source[key] === 'object' && target[key]) {
-          defaultsDeep(target[key], source[key]);
-        } else if (target[key] === undefined) {
-          target[key] = source[key];
-        }
-      }
-    }
+/* eslint-disable no-bitwise */
+
+export function hash(str: string): number {
+  let hashcode = 0;
+  let i = 0;
+  let chr;
+  if (str.length === 0) return hashcode;
+  for (i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hashcode = (hashcode << 5) - hashcode + chr;
+    hashcode |= 0; // Convert to 32bit integer
   }
-  return target;
+  return hashcode;
 }
 
-export function clamp(num: number, min: number, max: number) {
-  return Math.min(Math.max(num, min), max);
-}
+/* eslint-enable no-bitwise */
diff --git a/src/utils/page.ts b/src/utils/page.ts
index 5a3239a7f..e64d3a866 100644
--- a/src/utils/page.ts
+++ b/src/utils/page.ts
@@ -265,7 +265,7 @@ function getDays(
         isFirstDay,
         isLastDay,
         isDisabled: !thisMonth,
-        isFocusable: thisMonth,
+        isFocusable: !thisMonth,
         isFocused: false,
         inMonth: thisMonth,
         inPrevMonth: prevMonth,
@@ -332,32 +332,29 @@ function getWeeks(
   showIsoWeeknumbers: boolean,
   locale: Locale,
 ): CalendarWeek[] {
-  const result = days.reduce(
-    (result: CalendarWeek[], day: CalendarDay, i) => {
-      const weekIndex = Math.floor(i / 7);
-      let week = result[weekIndex];
-      if (!week) {
-        week = {
-          id: `week-${weekIndex + 1}`,
-          title: '',
-          week: day.week,
-          weekPosition: day.weekPosition,
-          weeknumber: day.weeknumber,
-          isoWeeknumber: day.isoWeeknumber,
-          weeknumberDisplay: showWeeknumbers
-            ? day.weeknumber
-            : showIsoWeeknumbers
-            ? day.isoWeeknumber
-            : undefined,
-          days: [],
-        };
-        result[weekIndex] = week;
-      }
-      week.days.push(day);
-      return result;
-    },
-    Array(days.length / daysInWeek),
-  );
+  const result = days.reduce((result: CalendarWeek[], day: CalendarDay, i) => {
+    const weekIndex = Math.floor(i / 7);
+    let week = result[weekIndex];
+    if (!week) {
+      week = {
+        id: `week-${weekIndex + 1}`,
+        title: '',
+        week: day.week,
+        weekPosition: day.weekPosition,
+        weeknumber: day.weeknumber,
+        isoWeeknumber: day.isoWeeknumber,
+        weeknumberDisplay: showWeeknumbers
+          ? day.weeknumber
+          : showIsoWeeknumbers
+          ? day.isoWeeknumber
+          : undefined,
+        days: [],
+      };
+      result[weekIndex] = week;
+    }
+    week.days.push(day);
+    return result;
+  }, Array(days.length / daysInWeek));
   result.forEach(week => {
     const fromDay = week.days[0];
     const toDay = week.days[week.days.length - 1];
diff --git a/src/utils/plugins/index.ts b/src/utils/plugins/index.ts
index 3b8c42620..89d6b687e 100644
--- a/src/utils/plugins/index.ts
+++ b/src/utils/plugins/index.ts
@@ -5,7 +5,7 @@ import { get } from '../helpers';
 export const registerComponent = (
   instance: Application,
   component: Component,
-  defaults: Partial<Defaults> = {},
+  defaults: Defaults = {},
 ) => {
   if (component) {
     const prefix = get(defaults, 'componentPrefix', '');
diff --git a/src/utils/popovers.ts b/src/utils/popovers.ts
new file mode 100644
index 000000000..d52258454
--- /dev/null
+++ b/src/utils/popovers.ts
@@ -0,0 +1,212 @@
+import type { Placement } from '@popperjs/core';
+import type { ComponentPublicInstance, Directive, DirectiveBinding } from 'vue';
+import { elementContains, on, resolveEl } from './helpers';
+
+export type PopoverVisibility = 'click' | 'hover' | 'hover-focus' | 'focus';
+
+export interface PopoverOptions {
+  id: PropertyKey;
+  visibility: PopoverVisibility;
+  isInteractive: boolean;
+  autoHide: boolean;
+  force: boolean;
+  target: unknown;
+  placement: Placement;
+  modifiers: any;
+  data: any;
+  showDelay: number;
+  hideDelay: number;
+}
+
+export interface PopoverState {
+  isVisible: boolean;
+  target: unknown;
+  data: any;
+  transition: string;
+  placement: Placement;
+  direction: string;
+  positionFixed: false;
+  modifiers: any[];
+  isInteractive: boolean;
+  visibility: PopoverVisibility;
+  isHovered: boolean;
+  isFocused: boolean;
+  autoHide: boolean;
+  force: boolean;
+}
+
+export interface PopoverEvent {
+  detail: Partial<PopoverOptions>;
+}
+
+export interface PopoverEventHandlers {
+  click: (e: MouseEvent) => void;
+  mousemove: (e: MouseEvent) => void;
+  mouseleave: (e: MouseEvent) => void;
+  focusin: (e: MouseEvent) => void;
+  focusout: (e: MouseEvent) => void;
+}
+
+export function showPopover(opts: Partial<PopoverOptions>) {
+  if (document) {
+    document.dispatchEvent(
+      new CustomEvent('show-popover', {
+        detail: opts,
+      }),
+    );
+  }
+}
+
+export function hidePopover(opts: Partial<PopoverOptions>) {
+  if (document) {
+    document.dispatchEvent(
+      new CustomEvent('hide-popover', {
+        detail: opts,
+      }),
+    );
+  }
+}
+
+export function togglePopover(opts: Partial<PopoverOptions>) {
+  if (document) {
+    document.dispatchEvent(
+      new CustomEvent('toggle-popover', {
+        detail: opts,
+      }),
+    );
+  }
+}
+
+export function getPopoverEventHandlers(
+  opts: Partial<PopoverOptions>,
+): Partial<PopoverEventHandlers> {
+  const { visibility } = opts;
+  const click = visibility === 'click';
+  const hover = visibility === 'hover';
+  const hoverFocus = visibility === 'hover-focus';
+  const focus = visibility === 'focus';
+  opts.autoHide = !click;
+  let hovered = false;
+  let focused = false;
+
+  const clickHandler = (e: MouseEvent) => {
+    if (click) {
+      togglePopover({
+        ...opts,
+        target: opts.target || (e.currentTarget as HTMLElement),
+      });
+      e.stopPropagation();
+    }
+  };
+  const mouseMoveHandler = (e: MouseEvent) => {
+    if (!hovered) {
+      hovered = true;
+      if (hover || hoverFocus) {
+        showPopover({
+          ...opts,
+          target: opts.target || (e.currentTarget as HTMLElement),
+        });
+      }
+    }
+  };
+  const mouseLeaveHandler = () => {
+    if (hovered) {
+      hovered = false;
+      if (hover || (hoverFocus && !focused)) {
+        hidePopover(opts);
+      }
+    }
+  };
+  const focusInHandler = (e: FocusEvent) => {
+    if (!focused) {
+      focused = true;
+      if (focus || hoverFocus) {
+        showPopover({
+          ...opts,
+          target: opts.target || (e.currentTarget as HTMLElement),
+        });
+      }
+    }
+  };
+  const focusOutHandler = (e: FocusEvent) => {
+    if (
+      focused &&
+      !elementContains(e.currentTarget as Node, e.relatedTarget as Element)
+    ) {
+      focused = false;
+      if (focus || (hoverFocus && !hovered)) {
+        hidePopover(opts);
+      }
+    }
+  };
+
+  const handlers: Record<string, Function> = {};
+  switch (opts.visibility) {
+    case 'click':
+      handlers.click = clickHandler;
+      break;
+    case 'hover':
+      handlers.mousemove = mouseMoveHandler;
+      handlers.mouseleave = mouseLeaveHandler;
+      break;
+    case 'focus':
+      handlers.focusin = focusInHandler;
+      handlers.focusout = focusOutHandler;
+      break;
+    case 'hover-focus':
+      handlers.mousemove = mouseMoveHandler;
+      handlers.mouseleave = mouseLeaveHandler;
+      handlers.focusin = focusInHandler;
+      handlers.focusout = focusOutHandler;
+      break;
+  }
+  return handlers;
+}
+
+const removeHandlers = (target: Element | ComponentPublicInstance | string) => {
+  const el = resolveEl(target);
+  if (el == null) return;
+  const handlers = (el as any).popoverHandlers;
+  if (!handlers || !handlers.length) return;
+  handlers.forEach((handler: Function) => handler());
+  delete (el as any).popoverHandlers;
+};
+
+const addHandlers = (
+  target: Element | ComponentPublicInstance | string,
+  opts: Partial<PopoverOptions>,
+) => {
+  const el = resolveEl(target);
+  if (el == null) return;
+  const remove: Function[] = [];
+  const handlers = getPopoverEventHandlers(opts);
+  Object.entries(handlers).forEach(([event, handler]) => {
+    remove.push(on(el, event, handler as EventListener));
+  });
+  (el as any).popoverHandlers = remove;
+};
+
+export const popoverDirective: Directive = {
+  mounted(el: any, binding: DirectiveBinding<PopoverOptions>) {
+    const { value } = binding;
+    if (!value) return;
+    addHandlers(el, value);
+  },
+  updated(el: any, binding: DirectiveBinding<PopoverOptions>) {
+    const { oldValue, value } = binding;
+    const oldVisibility = oldValue?.visibility;
+    const newVisibility = value?.visibility;
+    if (oldVisibility !== newVisibility) {
+      if (oldVisibility) {
+        removeHandlers(el);
+        if (!newVisibility) hidePopover(oldValue);
+      }
+      if (newVisibility) {
+        addHandlers(el, value);
+      }
+    }
+  },
+  unmounted(el: Element) {
+    removeHandlers(el);
+  },
+};