From d2bd2ce3c63fd5e014ea9412f3f8a7977a48ae45 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Fri, 19 Jan 2024 22:54:11 +0330
Subject: [PATCH] refactor: update

---
 .../ui/accordion/AccordionContent.vue         |  9 ++-----
 .../new-york/ui/accordion/AccordionItem.vue   |  2 +-
 .../ui/accordion/AccordionTrigger.vue         | 12 ++++++----
 .../ui/alert-dialog/AlertDialogContent.vue    |  4 ++--
 .../ui/alert-dialog/AlertDialogTitle.vue      |  2 +-
 .../lib/registry/new-york/ui/alert/Alert.vue  |  2 +-
 .../lib/registry/new-york/ui/button/index.ts  |  2 +-
 .../new-york/ui/calendar/Calendar.vue         |  8 +++----
 .../lib/registry/new-york/ui/card/Card.vue    |  2 +-
 .../new-york/ui/carousel/CarouselNext.vue     |  6 ++---
 .../new-york/ui/carousel/CarouselPrevious.vue |  6 ++---
 .../new-york/ui/checkbox/Checkbox.vue         | 10 ++++----
 .../registry/new-york/ui/command/Command.vue  |  2 +-
 .../new-york/ui/command/CommandDialog.vue     |  2 +-
 .../new-york/ui/command/CommandInput.vue      |  8 +++----
 .../new-york/ui/command/CommandItem.vue       |  2 +-
 .../new-york/ui/command/CommandList.vue       |  2 +-
 .../context-menu/ContextMenuCheckboxItem.vue  | 20 +++++++---------
 .../ui/context-menu/ContextMenuContent.vue    |  4 ++--
 .../ui/context-menu/ContextMenuItem.vue       |  2 +-
 .../ui/context-menu/ContextMenuRadioItem.vue  |  6 ++---
 .../ui/context-menu/ContextMenuSubContent.vue |  2 +-
 .../ui/context-menu/ContextMenuSubTrigger.vue |  6 ++---
 .../new-york/ui/dialog/DialogContent.vue      |  6 ++---
 .../new-york/ui/dialog/DialogDescription.vue  |  4 ++--
 .../new-york/ui/dialog/DialogTitle.vue        |  2 +-
 .../DropdownMenuCheckboxItem.vue              |  6 ++---
 .../ui/dropdown-menu/DropdownMenuContent.vue  | 10 ++------
 .../ui/dropdown-menu/DropdownMenuItem.vue     |  2 +-
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |  2 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |  7 +++---
 .../dropdown-menu/DropdownMenuSeparator.vue   | 14 +++++++++--
 .../dropdown-menu/DropdownMenuSubContent.vue  |  2 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |  6 ++---
 .../new-york/ui/form/FormDescription.vue      |  2 +-
 .../registry/new-york/ui/form/FormLabel.vue   |  4 ++--
 .../ui/hover-card/HoverCardContent.vue        |  4 ++--
 .../lib/registry/new-york/ui/label/Label.vue  |  2 +-
 .../registry/new-york/ui/menubar/Menubar.vue  |  4 ++--
 .../ui/menubar/MenubarCheckboxItem.vue        | 22 ++++++++---------
 .../new-york/ui/menubar/MenubarContent.vue    |  2 +-
 .../new-york/ui/menubar/MenubarItem.vue       |  2 +-
 .../new-york/ui/menubar/MenubarRadioItem.vue  | 23 ++++++++----------
 .../new-york/ui/menubar/MenubarSeparator.vue  |  4 ++--
 .../new-york/ui/menubar/MenubarShortcut.vue   |  2 +-
 .../new-york/ui/menubar/MenubarSubContent.vue |  2 +-
 .../new-york/ui/menubar/MenubarSubTrigger.vue |  2 +-
 .../new-york/ui/menubar/MenubarTrigger.vue    |  2 +-
 .../ui/navigation-menu/NavigationMenu.vue     |  2 +-
 .../navigation-menu/NavigationMenuContent.vue | 12 ++++------
 .../NavigationMenuIndicator.vue               |  2 +-
 .../ui/navigation-menu/NavigationMenuList.vue |  4 ++--
 .../navigation-menu/NavigationMenuTrigger.vue |  4 ++--
 .../NavigationMenuViewport.vue                |  2 +-
 .../new-york/ui/popover/PopoverContent.vue    |  3 ++-
 .../new-york/ui/progress/Progress.vue         |  2 +-
 .../new-york/ui/radio-group/RadioGroup.vue    |  2 +-
 .../ui/radio-group/RadioGroupItem.vue         |  6 ++---
 .../new-york/ui/select/SelectContent.vue      | 13 +++++-----
 .../new-york/ui/select/SelectItem.vue         |  2 +-
 .../ui/select/SelectScrollDownButton.vue      | 24 +++++++++++++++++++
 .../ui/select/SelectScrollUpButton.vue        | 24 +++++++++++++++++++
 .../new-york/ui/select/SelectTrigger.vue      | 24 ++++++-------------
 .../lib/registry/new-york/ui/select/index.ts  |  2 ++
 .../new-york/ui/separator/Separator.vue       |  9 ++++++-
 .../new-york/ui/sheet/SheetContent.vue        |  6 ++---
 .../new-york/ui/sheet/SheetFooter.vue         |  2 +-
 .../new-york/ui/sheet/SheetHeader.vue         |  2 +-
 .../lib/registry/new-york/ui/sheet/index.ts   |  8 +++----
 .../new-york/ui/skeleton/Skeleton.vue         |  2 +-
 .../registry/new-york/ui/slider/Slider.vue    |  2 +-
 .../registry/new-york/ui/switch/Switch.vue    | 18 +++++---------
 .../lib/registry/new-york/ui/table/Table.vue  |  2 +-
 .../new-york/ui/table/TableFooter.vue         |  2 +-
 .../registry/new-york/ui/tabs/TabsList.vue    | 10 ++++----
 .../registry/new-york/ui/tabs/TabsTrigger.vue | 12 ++++------
 .../lib/registry/new-york/ui/toast/Toast.vue  |  2 +-
 .../registry/new-york/ui/toast/ToastClose.vue |  4 ++--
 .../registry/new-york/ui/toggle/Toggle.vue    |  2 +-
 .../new-york/ui/tooltip/TooltipContent.vue    |  2 +-
 80 files changed, 250 insertions(+), 222 deletions(-)
 create mode 100644 apps/www/src/lib/registry/new-york/ui/select/SelectScrollDownButton.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/select/SelectScrollUpButton.vue

diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue
index 2178ff4b..d8ec9889 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue
@@ -15,14 +15,9 @@ const delegatedProps = computed(() => {
 <template>
   <AccordionContent
     v-bind="delegatedProps"
-    :class="
-      cn(
-        'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
-        props.class,
-      )
-    "
+    class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
   >
-    <div class="pb-4 pt-0">
+    <div :class="cn('pb-4 pt-0', props.class)">
       <slot />
     </div>
   </AccordionContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue
index 6af439c8..9975c238 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue
@@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
index ad9851eb..a4e6003f 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
@@ -5,7 +5,7 @@ import {
   AccordionTrigger,
   type AccordionTriggerProps,
 } from 'radix-vue'
-import { ChevronDownIcon } from '@radix-icons/vue'
+import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
@@ -18,7 +18,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <AccordionHeader class="flex" as="div">
+  <AccordionHeader class="flex">
     <AccordionTrigger
       v-bind="delegatedProps"
       :class="
@@ -29,9 +29,11 @@ const delegatedProps = computed(() => {
       "
     >
       <slot />
-      <ChevronDownIcon
-        class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
-      />
+      <slot name="icon">
+        <ChevronDown
+          class="h-4 w-4 shrink-0 transition-transform duration-200"
+        />
+      </slot>
     </AccordionTrigger>
   </AccordionHeader>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
index aeab1d2d..5a5dcdf7 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
@@ -19,13 +19,13 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <AlertDialogPortal>
     <AlertDialogOverlay
-      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <AlertDialogContent
       v-bind="forwarded"
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
index cb5d9fb8..50c583d0 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
@@ -15,7 +15,7 @@ const delegatedProps = computed(() => {
 <template>
   <AlertDialogTitle
     v-bind="delegatedProps"
-    :class="cn('text-lg text-foreground font-semibold', props.class)"
+    :class="cn('text-lg font-semibold', props.class)"
   >
     <slot />
   </AlertDialogTitle>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue b/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
index ae96548d..b3502d52 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn(alertVariants({ variant }), props.class)">
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/button/index.ts b/apps/www/src/lib/registry/new-york/ui/button/index.ts
index cf3d4741..61a0e682 100644
--- a/apps/www/src/lib/registry/new-york/ui/button/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/button/index.ts
@@ -3,7 +3,7 @@ import { type VariantProps, cva } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
index 580e6097..ad437ccf 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
@@ -2,9 +2,9 @@
 import { useVModel } from '@vueuse/core'
 import type { Calendar } from 'v-calendar'
 import { DatePicker } from 'v-calendar'
-import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import { computed, nextTick, onMounted, ref } from 'vue'
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
 
 /* Extracted from v-calendar */
@@ -69,10 +69,10 @@ onMounted(async () => {
   <div class="relative">
     <div class="absolute flex justify-between w-full px-4 top-3 z-[1]">
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
-        <ChevronLeftIcon class="w-4 h-4" />
+        <ChevronLeft class="w-4 h-4" />
       </button>
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
-        <ChevronRightIcon class="w-4 h-4" />
+        <ChevronRight class="w-4 h-4" />
       </button>
     </div>
 
diff --git a/apps/www/src/lib/registry/new-york/ui/card/Card.vue b/apps/www/src/lib/registry/new-york/ui/card/Card.vue
index 94b69033..12dd5ec7 100644
--- a/apps/www/src/lib/registry/new-york/ui/card/Card.vue
+++ b/apps/www/src/lib/registry/new-york/ui/card/Card.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     :class="
       cn(
-        'rounded-xl border bg-card text-card-foreground shadow',
+        'rounded-lg border bg-card text-card-foreground shadow-sm',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
index 5bbb489e..e27d04a6 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ArrowRight } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/lib/registry/default/ui/button'
 
 const props = defineProps<WithClassAsProps>()
 
@@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
     @click="scrollNext"
   >
     <slot>
-      <ChevronRightIcon class="h-4 w-4 text-current" />
+      <ArrowRight class="h-4 w-4 text-current" />
     </slot>
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
index b39d820a..5f339ea0 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ChevronLeftIcon } from '@radix-icons/vue'
+import { ArrowLeft } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/lib/registry/default/ui/button'
 
 const props = defineProps<WithClassAsProps>()
 
@@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
     @click="scrollPrev"
   >
     <slot>
-      <ChevronLeftIcon class="h-4 w-4 text-current" />
+      <ArrowLeft class="h-4 w-4 text-current" />
     </slot>
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue b/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
index c8005783..4621bf75 100644
--- a/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
+++ b/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
@@ -2,7 +2,7 @@
 import { type HTMLAttributes, computed } from 'vue'
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { CheckIcon } from '@radix-icons/vue'
+import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
@@ -14,18 +14,20 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <CheckboxRoot
     v-bind="forwarded"
     :class="
-      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
          props.class)"
   >
     <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
-      <CheckIcon class="h-4 w-4" />
+      <slot>
+        <Check class="h-4 w-4" />
+      </slot>
     </CheckboxIndicator>
   </CheckboxRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/Command.vue b/apps/www/src/lib/registry/new-york/ui/command/Command.vue
index cc78910b..fe7445c0 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/Command.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/Command.vue
@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
index ae9c468d..37c8406a 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
@@ -12,7 +12,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 
 <template>
   <Dialog v-bind="forwarded">
-    <DialogContent class="overflow-hidden p-0">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
       <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
         <slot />
       </Command>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
index f9b0578c..66923733 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from 'vue'
-import { MagnifyingGlassIcon } from '@radix-icons/vue'
+import { Search } from 'lucide-vue-next'
 import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
@@ -18,16 +18,16 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
-    <MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <ComboboxInput
       v-bind="{ ...forwardedProps, ...$attrs }"
       auto-focus
-      :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+      :class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
     />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
index 584d0fb2..29725b18 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
@@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
index 8dd872ed..710d0bc5 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
@@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
index 5080eda9..3025e5aa 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -7,7 +7,7 @@ import {
   ContextMenuItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { CheckIcon } from '@radix-icons/vue'
+import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
@@ -19,24 +19,20 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ContextMenuCheckboxItem
     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 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      ),
-    ]"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuItemIndicator
-        class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center"
-      >
-        <CheckIcon class="h-4 w-4" />
+      <ContextMenuItemIndicator>
+        <Check class="h-4 w-4" />
       </ContextMenuItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
index 09dd1991..3bd34128 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
@@ -18,7 +18,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
       v-bind="forwarded"
       :class="[
         cn(
-          'z-50 min-w-[8rem] 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',
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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,
         ),
       ]"
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
index 6ceb090a..4d56b770 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
index 35ad7da3..aa12bbcb 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
@@ -7,7 +7,7 @@ import {
   type ContextMenuRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { DotFilledIcon } from '@radix-icons/vue'
+import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
@@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
-        <DotFilledIcon class="h-4 w-4 fill-current" />
+        <Circle class="h-2 w-2 fill-current" />
       </ContextMenuItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
index 6a06e429..2cddc5ce 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
index e9b198bb..ebcce56d 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
@@ -5,7 +5,7 @@ import {
   type ContextMenuSubTriggerProps,
   useForwardProps,
 } from 'radix-vue'
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -31,6 +31,6 @@ const forwardedProps = useForwardProps(delegatedProps.value)
     ]"
   >
     <slot />
-    <ChevronRightIcon class="ml-auto h-4 w-4" />
+    <ChevronRight class="ml-auto h-4 w-4" />
   </ContextMenuSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
index 896b7a8c..20981efa 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
@@ -9,7 +9,7 @@ import {
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Cross2Icon } from '@radix-icons/vue'
+import { X } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
       <DialogClose
         class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
       >
-        <Cross2Icon class="w-4 h-4" />
+        <X class="w-4 h-4" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue
index f79d53a3..3637b7ec 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue
@@ -11,13 +11,13 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DialogDescription
     v-bind="forwardedProps"
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    :class="cn('text-sm text-muted-foreground', props.class)"
   >
     <slot />
   </DialogDescription>
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue
index bedae26a..1bb40461 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue
@@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 2485da55..cd21fdeb 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -7,7 +7,7 @@ import {
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { CheckIcon } from '@radix-icons/vue'
+import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
@@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <CheckIcon class="w-4 h-4" />
+        <Check class="w-4 h-4" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
index 79ac18a1..04f4a127 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
@@ -23,20 +23,14 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DropdownMenuPortal>
     <DropdownMenuContent
       v-bind="forwarded"
-      :class="[
-        cn(
-          'z-50 min-w-[8rem] 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('z-50 min-w-[8rem] 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)"
     >
       <slot />
     </DropdownMenuContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
index 18a0d63e..2a5695cc 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
@@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
index 5d5a10ca..ecf9b2fc 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 20009647..c8b9029c 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -7,7 +7,7 @@ import {
   type DropdownMenuRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { DotFilledIcon } from '@radix-icons/vue'
+import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
@@ -20,7 +20,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -32,9 +32,8 @@ const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
     )"
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-
       <DropdownMenuItemIndicator>
-        <DotFilledIcon class="h-4 w-4 fill-current" />
+        <Circle class="h-2 w-2 fill-current" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
index 9cb171be..fc51205b 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,12 +1,22 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuSeparator,
   type DropdownMenuSeparatorProps,
 } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSeparatorProps>()
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <DropdownMenuSeparator v-bind="props" class="-mx-1 my-1 h-px bg-muted" />
+  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
index 795cc88d..a730438c 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 3b220b7d..da849d4f 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -5,7 +5,7 @@ import {
   type DropdownMenuSubTriggerProps,
   useForwardProps,
 } from 'radix-vue'
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -30,6 +30,6 @@ const forwardedProps = useForwardProps(delegatedProps.value)
     ]"
   >
     <slot />
-    <ChevronRightIcon class="ml-auto h-4 w-4" />
+    <ChevronRight class="ml-auto h-4 w-4" />
   </DropdownMenuSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue b/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue
index 3df871c2..6085f76c 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue
@@ -13,7 +13,7 @@ const { formDescriptionId } = useFormField()
 <template>
   <p
     :id="formDescriptionId"
-    :class="cn('text-[0.8rem] text-muted-foreground', props.class)"
+    :class="cn('text-sm text-muted-foreground', props.class)"
   >
     <slot />
   </p>
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue b/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
index 002e27fa..5757aed9 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { Label, type LabelProps } from 'radix-vue'
+import type { LabelProps } from 'radix-vue'
 import { useFormField } from './useFormField'
 import { cn } from '@/lib/utils'
+import { Label } from '@/lib/registry/default/ui/label'
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
 
@@ -12,7 +13,6 @@ const { error, formItemId } = useFormField()
 <template>
   <Label
     :class="cn(
-      'block text-sm tracking-tight font-medium text-foreground text-left',
       error && 'text-destructive',
       props.class,
     )"
diff --git a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue b/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue
index 663e1e6e..8affac42 100644
--- a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue
@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -30,7 +30,7 @@ const forwardedProps = useForwardProps(delegatedProps.value)
       v-bind="forwardedProps"
       :class="
         cn(
-          'z-50 w-64 rounded-md bg-background border border-border p-4 text-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',
+          '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',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/label/Label.vue b/apps/www/src/lib/registry/new-york/ui/label/Label.vue
index b1c9385c..8fba8db4 100644
--- a/apps/www/src/lib/registry/new-york/ui/label/Label.vue
+++ b/apps/www/src/lib/registry/new-york/ui/label/Label.vue
@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'block text-sm tracking-tight font-medium text-foreground text-left',
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue b/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
index a634292a..a016e106 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'flex h-10 items-center space-x-1 rounded-md border border-border p-1',
+        'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
index f52c7ada..1e7c3a9f 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
@@ -19,24 +19,22 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <MenubarCheckboxItem
     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 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      ),
-    ]"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
   >
-    <MenubarItemIndicator
-      class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
-    >
-      <Check class="w-4 h-4" />
-    </MenubarItemIndicator>
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <Check class="w-4 h-4" />
+      </MenubarItemIndicator>
+    </span>
     <slot />
   </MenubarCheckboxItem>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
index afc80b7c..03061025 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
@@ -23,7 +23,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
index bc201df4..63804533 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
@@ -18,7 +18,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
index e3742e96..9351fb49 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
@@ -19,25 +19,22 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <MenubarRadioItem
     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 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      ),
-    ]"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
   >
-    <MenubarItemIndicator
-      class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
-    >
-      <Circle class="h-2 w-2 fill-curren" />
-    </MenubarItemIndicator>
-
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <Circle class="h-2 w-2 fill-curren" />
+      </MenubarItemIndicator>
+    </span>
     <slot />
   </MenubarRadioItem>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue
index 714cdd57..ed437697 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue
@@ -11,9 +11,9 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-secondary', props.class)" v-bind="forwardedProps" />
+  <MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-muted', props.class)" v-bind="forwardedProps" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue
index 79861117..0d4da921 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <span :class="cn('text-xxs ml-auto tracking-widest opacity-50', props.class)">
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
index ae5b822c..dc3e2f4d 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
@@ -25,7 +25,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
index 656ffb40..ea3093ee 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
@@ -12,7 +12,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue
index 52c78ec2..895f1ba6 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue
@@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue
index a9f82c19..080d3bb1 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue
@@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
index 4bcd7e9f..03d8fbbc 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
@@ -18,18 +18,16 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <NavigationMenuContent
     v-bind="forwarded"
-    :class="
-      cn(
-        'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
-        props.class,
-      )
-    "
+    :class="cn(
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+      props.class,
+    )"
   >
     <slot />
   </NavigationMenuContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
index 82ba3271..1d53291e 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
index 0756d5ad..354365c5 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
@@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps.value)
     v-bind="forwardedProps"
     :class="
       cn(
-        'group flex flex-1 list-none items-center justify-center space-x-1',
+        'group flex flex-1 list-none items-center justify-center gap-x-1',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
index 992f1836..f93d9c22 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps.value)
   >
     <slot />
     <ChevronDown
-      class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuTrigger>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
index 1c0cb9bf..20c57b9e 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
@@ -15,7 +15,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue b/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue
index 14d8eab2..e691fe82 100644
--- a/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue
@@ -16,6 +16,7 @@ defineOptions({
 const props = withDefaults(
   defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
   {
+    align: 'center',
     sideOffset: 4,
   },
 )
@@ -27,7 +28,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue b/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue
index 9e65a5fd..6e006ffa 100644
--- a/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue
+++ b/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue
@@ -32,7 +32,7 @@ const delegatedProps = computed(() => {
     "
   >
     <ProgressIndicator
-      class="h-full w-full flex-1 duration-300 bg-foreground transition-all"
+      class="h-full w-full flex-1 bg-primary transition-all"
       :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
     />
   </ProgressRoot>
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
index 791ce33c..9262656e 100644
--- a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
@@ -12,7 +12,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
index 24d7f3b7..b147fd86 100644
--- a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps.value)
     v-bind="forwardedProps"
     :class="
       cn(
-        'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50',
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
@@ -33,7 +33,7 @@ const forwardedProps = useForwardProps(delegatedProps.value)
     <RadioGroupIndicator
       class="flex items-center justify-center"
     >
-      <Circle class="w-2.5 h-2.5 text-foreground" />
+      <Circle class="h-2.5 w-2.5 fill-current text-current" />
     </RadioGroupIndicator>
   </RadioGroupItem>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
index eeac3087..72b81418 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
@@ -8,6 +8,7 @@ import {
   SelectViewport,
   useForwardPropsEmits,
 } from 'radix-vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
 import { cn } from '@/lib/utils'
 
 defineOptions({
@@ -28,27 +29,25 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <SelectPortal>
     <SelectContent
       v-bind="{ ...forwarded, ...$attrs }" :class="cn(
-        'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-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',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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',
         position === 'popper'
           && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         props.class,
       )
       "
     >
-      <SelectViewport
-        :class="cn('p-1',
-                   position === 'popper'
-                     && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"
-      >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')">
         <slot />
       </SelectViewport>
+      <SelectScrollDownButton />
     </SelectContent>
   </SelectPortal>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
index aaf622e0..b102a812 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
@@ -18,7 +18,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectScrollDownButton.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 00000000..54b6c6ac
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronDown class="h-4 w-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectScrollUpButton.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 00000000..5535f1c7
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { ChevronUp } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUp class="h-4 w-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
index 1eb9c3ff..cfac8eb9 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
@@ -4,34 +4,24 @@ import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } f
 import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(
-  defineProps<SelectTriggerProps & { class?: HTMLAttributes['class']; invalid?: boolean }>(),
-  {
-    invalid: false,
-  },
-)
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
-  const { class: _, invalid, ...delegated } = props
+  const { class: _, ...delegated } = props
 
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <SelectTrigger
     v-bind="forwardedProps"
-    :class="[
-      cn(
-        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-        props.class,
-      ),
-      props.invalid
-        ? '!ring-destructive ring-2 placeholder:!text-destructive'
-        : '',
-    ]"
+    :class="cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      props.class,
+    )"
   >
     <slot />
     <SelectIcon as-child>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/index.ts b/apps/www/src/lib/registry/new-york/ui/select/index.ts
index f188cc49..b1d89eed 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/select/index.ts
@@ -7,3 +7,5 @@ export { default as SelectItem } from './SelectItem.vue'
 export { default as SelectItemText } from './SelectItemText.vue'
 export { default as SelectLabel } from './SelectLabel.vue'
 export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue b/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
index 3ac677a7..b8d0d8b7 100644
--- a/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
+import { type HTMLAttributes, computed } from 'vue'
 import { Separator, type SeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <Separator
+    v-bind="delegatedProps"
     :class="[
       cn('shrink-0 bg-secondary', props.class),
       props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
index 003c5369..79625182 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
@@ -32,13 +32,13 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <DialogContent
       :class="cn(sheetVariants({ side }), props.class)"
@@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
       <slot />
 
       <DialogClose
-        class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
       >
         <X class="w-4 h-4 text-muted-foreground" />
       </DialogClose>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue
index 625d3ae8..ac2d0c18 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue
@@ -9,7 +9,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
   <div
     :class="
       cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
index 9ad879b9..541f48f5 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
@@ -8,7 +8,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 <template>
   <div
     :class="
-      cn('flex flex-col space-y-2 text-center sm:text-left', props.class)
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
     "
   >
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/index.ts b/apps/www/src/lib/registry/new-york/ui/sheet/index.ts
index 62a5266a..a339a454 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/index.ts
@@ -14,12 +14,12 @@ export const sheetVariants = cva(
   {
     variants: {
       side: {
-        top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
-            'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-            'inset-y-0 right-0 h-full w-3/4  border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+            'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
       },
     },
     defaultVariants: {
diff --git a/apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue b/apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue
index c85c59b4..b49e3d9b 100644
--- a/apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue
+++ b/apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue
@@ -10,5 +10,5 @@ const props = defineProps<SkeletonProps>()
 </script>
 
 <template>
-  <div :class="cn('animate-pulse rounded-md bg-secondary', props.class)" />
+  <div :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue b/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
index 727febba..c3dd6d78 100644
--- a/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
+++ b/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
@@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue b/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
index c6da3964..f2ee993c 100644
--- a/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
+++ b/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
@@ -19,25 +19,19 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <SwitchRoot
     v-bind="forwarded"
-    :class="
-      cn(
-        'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-        props.class,
-      )
-    "
+    :class="cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      props.class,
+    )"
   >
     <SwitchThumb
-      :class="
-        cn(
-          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
-        )
-      "
+      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')"
     />
   </SwitchRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/Table.vue b/apps/www/src/lib/registry/new-york/ui/table/Table.vue
index 3b079f63..a4238918 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/Table.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/Table.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="w-full overflow-auto">
+  <div class="relative w-full overflow-auto">
     <table :class="cn('w-full caption-bottom text-sm', props.class)">
       <slot />
     </table>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableFooter.vue b/apps/www/src/lib/registry/new-york/ui/table/TableFooter.vue
index fa04d9d4..693a4386 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableFooter.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableFooter.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <tfoot :class="cn('bg-primary font-medium text-primary-foreground', props.class)">
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
     <slot />
   </tfoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue b/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
index eb77b8fb..9644cdc3 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
@@ -15,12 +15,10 @@ const delegatedProps = computed(() => {
 <template>
   <TabsList
     v-bind="delegatedProps"
-    :class="
-      cn(
-        'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
-        props.class,
-      )
-    "
+    :class="cn(
+      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
   >
     <slot />
   </TabsList>
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue b/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
index 10812313..5fa6748d 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
@@ -11,18 +11,16 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <TabsTrigger
     v-bind="forwardedProps"
-    :class="
-      cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-        props.class,
-      )
-    "
+    :class="cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      props.class,
+    )"
   >
     <slot />
   </TabsTrigger>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue b/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
index 05fa4f7a..b74762cb 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
@@ -14,7 +14,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
index 653d7437..ab685a51 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from 'vue'
 import { ToastClose, type ToastCloseProps } from 'radix-vue'
-import { XIcon } from 'lucide-vue-next'
+import { X } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastCloseProps & {
@@ -17,6 +17,6 @@ const delegatedProps = computed(() => {
 
 <template>
   <ToastClose v-bind="delegatedProps" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
-    <XIcon class="h-4 w-4" />
+    <X class="h-4 w-4" />
   </ToastClose>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue b/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
index 23ac8c5c..29a69102 100644
--- a/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
index 50db2b72..1f12009a 100644
--- a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
@@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>