refactor: ⬆️ Upgrade to Tailwind v4

components/ui/hover-card/HoverCard.vue

@@ -13,7 +13,10 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <HoverCardRoot v-bind="forwarded">
+  <HoverCardRoot
+    data-slot="hover-card"
+    v-bind="forwarded"
+  >
     <slot />
   </HoverCardRoot>
 </template>

components/ui/hover-card/HoverCardContent.vue

@@ -27,10 +27,11 @@ const forwardedProps = useForwardProps(delegatedProps);
 <template>
   <HoverCardPortal>
     <HoverCardContent
+      data-slot="hover-card-content"
       v-bind="forwardedProps"
       :class="
         cn(
-          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden',
           props.class,
         )
       "

components/ui/hover-card/HoverCardTrigger.vue

@@ -5,7 +5,10 @@ const props = defineProps<HoverCardTriggerProps>();
 </script>
 
 <template>
-  <HoverCardTrigger v-bind="props">
+  <HoverCardTrigger
+    data-slot="hover-card-trigger"
+    v-bind="props"
+  >
     <slot />
   </HoverCardTrigger>
 </template>