diff --git a/src/components/ui/alert-dialog/AlertDialogAction.vue b/src/components/ui/alert-dialog/AlertDialogAction.vue
index 60e5af7..b417759 100644
--- a/src/components/ui/alert-dialog/AlertDialogAction.vue
+++ b/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils'
 import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/alert-dialog/AlertDialogCancel.vue b/src/components/ui/alert-dialog/AlertDialogCancel.vue
index 61c5bb8..75caad9 100644
--- a/src/components/ui/alert-dialog/AlertDialogCancel.vue
+++ b/src/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils'
 import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/alert-dialog/AlertDialogContent.vue b/src/components/ui/alert-dialog/AlertDialogContent.vue
index 83fdf99..872f5e2 100644
--- a/src/components/ui/alert-dialog/AlertDialogContent.vue
+++ b/src/components/ui/alert-dialog/AlertDialogContent.vue
@@ -10,7 +10,7 @@ import {
 } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<AlertDialogContentEmits>()
 
 const delegatedProps = computed(() => {
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <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="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
     />
     <AlertDialogContent
       v-bind="forwarded"
diff --git a/src/components/ui/alert-dialog/AlertDialogDescription.vue b/src/components/ui/alert-dialog/AlertDialogDescription.vue
index 9f6db43..11d0d51 100644
--- a/src/components/ui/alert-dialog/AlertDialogDescription.vue
+++ b/src/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -6,7 +6,7 @@ import {
 } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/alert-dialog/AlertDialogFooter.vue b/src/components/ui/alert-dialog/AlertDialogFooter.vue
index 55d0a0e..a522faf 100644
--- a/src/components/ui/alert-dialog/AlertDialogFooter.vue
+++ b/src/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes[`class`]
 }>()
 </script>
 
diff --git a/src/components/ui/alert-dialog/AlertDialogHeader.vue b/src/components/ui/alert-dialog/AlertDialogHeader.vue
index c61c449..8816652 100644
--- a/src/components/ui/alert-dialog/AlertDialogHeader.vue
+++ b/src/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes[`class`]
 }>()
 </script>
 
diff --git a/src/components/ui/alert-dialog/AlertDialogTitle.vue b/src/components/ui/alert-dialog/AlertDialogTitle.vue
index 6cd13f9..1a98462 100644
--- a/src/components/ui/alert-dialog/AlertDialogTitle.vue
+++ b/src/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/input/Input.vue b/src/components/ui/input/Input.vue
index 81140b4..329a5d9 100644
--- a/src/components/ui/input/Input.vue
+++ b/src/components/ui/input/Input.vue
@@ -6,14 +6,14 @@ import { useVModel } from '@vueuse/core'
 const props = defineProps<{
   defaultValue?: string | number
   modelValue?: string | number
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes[`class`]
 }>()
 
 const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string | number): void
+  (e: `update:modelValue`, payload: string | number): void
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emits, {
+const modelValue = useVModel(props, `modelValue`, emits, {
   passive: true,
   defaultValue: props.defaultValue,
 })