refactor: ⬆️ Upgrade to Tailwind v4

components/ui/dropdown-menu/DropdownMenu.vue

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

components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -26,15 +26,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 <template>
   <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
     v-bind="forwarded"
     :class=" cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <Check class="w-4 h-4" />
+        <Check class="size-4" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />

components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -31,8 +31,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <template>
   <DropdownMenuPortal>
     <DropdownMenuContent
+      data-slot="dropdown-menu-content"
       v-bind="forwarded"
-      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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', props.class)"
+      :class="cn('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 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
     >
       <slot />
     </DropdownMenuContent>

components/ui/dropdown-menu/DropdownMenuGroup.vue

@@ -5,7 +5,10 @@ const props = defineProps<DropdownMenuGroupProps>();
 </script>
 
 <template>
-  <DropdownMenuGroup v-bind="props">
+  <DropdownMenuGroup
+    data-slot="dropdown-menu-group"
+    v-bind="props"
+  >
     <slot />
   </DropdownMenuGroup>
 </template>

components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -1,36 +1,39 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
+import { reactiveOmit } from "@vueuse/core";
 import {
     DropdownMenuItem,
     type DropdownMenuItemProps,
     useForwardProps,
 } from "reka-ui";
-import { type HTMLAttributes, computed } from "vue";
+import type { HTMLAttributes } from "vue";
 
-const props = defineProps<
-    DropdownMenuItemProps & { class?: HTMLAttributes["class"]; inset?: boolean }
->();
+const props = withDefaults(
+    defineProps<
+        DropdownMenuItemProps & {
+            class?: HTMLAttributes["class"];
+            inset?: boolean;
+            variant?: "default" | "destructive";
+        }
+    >(),
+    {
+        variant: "default",
+    },
+);
 
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
+const delegatedProps = reactiveOmit(props, "inset", "variant");
 
 const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <DropdownMenuItem
-        v-bind="forwardedProps"
-        :class="
-            cn(
-                'relative flex w-full cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
-                inset && 'pl-8',
-                props.class
-            )
-        "
-    >
-        <slot />
-    </DropdownMenuItem>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwardedProps"
+    :class="cn(`focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
+  >
+    <slot />
+  </DropdownMenuItem>
 </template>

components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
+import { reactiveOmit } from "@vueuse/core";
 import {
     DropdownMenuLabel,
     type DropdownMenuLabelProps,
     useForwardProps,
 } from "reka-ui";
-import { type HTMLAttributes, computed } from "vue";
+import type { HTMLAttributes } from "vue";
 
 const props = defineProps<
     DropdownMenuLabelProps & {
@@ -14,19 +15,16 @@ const props = defineProps<
     }
 >();
 
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
+const delegatedProps = reactiveOmit(props, "class", "inset");
 const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <DropdownMenuLabel
+    data-slot="dropdown-menu-label"
+    :data-inset="inset ? '' : undefined"
     v-bind="forwardedProps"
-    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
   >
     <slot />
   </DropdownMenuLabel>

components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -13,7 +13,10 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DropdownMenuRadioGroup v-bind="forwarded">
+  <DropdownMenuRadioGroup
+    data-slot="dropdown-menu-radio-group"
+    v-bind="forwarded"
+  >
     <slot />
   </DropdownMenuRadioGroup>
 </template>

components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -27,15 +27,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 <template>
   <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-item"
     v-bind="forwarded"
     :class="cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <Circle class="h-2 w-2 fill-current" />
+        <Circle class="size-2 fill-current" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />

components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -20,5 +20,9 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+  <DropdownMenuSeparator
+    data-slot="dropdown-menu-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
+  />
 </template>

components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -8,7 +8,10 @@ const props = defineProps<{
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+  <span
+    data-slot="dropdown-menu-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
     <slot />
   </span>
 </template>

components/ui/dropdown-menu/DropdownMenuSub.vue

@@ -13,7 +13,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DropdownMenuSub v-bind="forwarded">
+  <DropdownMenuSub data-slot="dropdown-menu-sub" v-bind="forwarded">
     <slot />
   </DropdownMenuSub>
 </template>

components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -24,8 +24,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 <template>
   <DropdownMenuSubContent
+    data-slot="dropdown-menu-sub-content"
     v-bind="forwarded"
-    :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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', props.class)"
+    :class="cn('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 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
   >
     <slot />
   </DropdownMenuSubContent>

components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -1,35 +1,35 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
+import { reactiveOmit } from "@vueuse/core";
 import { ChevronRight } from "lucide-vue-next";
 import {
     DropdownMenuSubTrigger,
     type DropdownMenuSubTriggerProps,
     useForwardProps,
 } from "reka-ui";
-import { type HTMLAttributes, computed } from "vue";
+import type { HTMLAttributes } from "vue";
 
 const props = defineProps<
-    DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"] }
+    DropdownMenuSubTriggerProps & {
+        class?: HTMLAttributes["class"];
+        inset?: boolean;
+    }
 >();
 
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
+const delegatedProps = reactiveOmit(props, "class", "inset");
 const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <DropdownMenuSubTrigger
+    data-slot="dropdown-menu-sub-trigger"
     v-bind="forwardedProps"
     :class="cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
       props.class,
     )"
   >
     <slot />
-    <ChevronRight class="ml-auto h-4 w-4" />
+    <ChevronRight class="ml-auto size-4" />
   </DropdownMenuSubTrigger>
 </template>

components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -11,7 +11,10 @@ const forwardedProps = useForwardProps(props);
 </script>
 
 <template>
-  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+  <DropdownMenuTrigger
+    data-slot="dropdown-menu-trigger"
+    v-bind="forwardedProps"
+  >
     <slot />
   </DropdownMenuTrigger>
 </template>