From d6a13298770c914c9cefc1f6ae84e41221c2cd32 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sun, 15 Oct 2023 19:25:30 +0800
Subject: [PATCH] refactor: rename ComboboxHeader component

---
 docs/components/demo/Combobox/index.vue                |  6 +++---
 docs/content/components/combobox.md                    |  6 +++---
 packages/radix-vue/constant/components.ts              |  2 +-
 .../{ComboboxHeader.vue => ComboboxAnchor.vue}         |  4 ++--
 packages/radix-vue/src/Combobox/index.ts               |  6 +++---
 .../src/Combobox/story/ComboboxBasic.story.vue         |  6 +++---
 .../src/Combobox/story/ComboboxCustom.story.vue        |  6 +++---
 .../src/Combobox/story/ComboboxMultiple.story.vue      | 10 +++++-----
 .../src/Combobox/story/ComboboxObject.story.vue        | 10 +++++-----
 packages/radix-vue/src/Combobox/story/_Combobox.vue    |  6 +++---
 10 files changed, 31 insertions(+), 31 deletions(-)
 rename packages/radix-vue/src/Combobox/{ComboboxHeader.vue => ComboboxAnchor.vue} (76%)

diff --git a/docs/components/demo/Combobox/index.vue b/docs/components/demo/Combobox/index.vue
index 561a50bc6..6733c2a02 100644
--- a/docs/components/demo/Combobox/index.vue
+++ b/docs/components/demo/Combobox/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from 'radix-vue'
+import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from 'radix-vue'
 import { Icon } from '@iconify/vue'
 
 const v = ref('')
@@ -10,12 +10,12 @@ const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
 
 <template>
   <ComboboxRoot v-model="v" class="relative">
-    <ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
+    <ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
       <ComboboxInput class="!bg-transparent outline-none text-grass11 h-full selection:bg-grass5 placeholder-mauve8" placeholder="Placeholder..." />
       <ComboboxTrigger>
         <Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
       </ComboboxTrigger>
-    </ComboboxHeader>
+    </ComboboxAnchor>
 
     <ComboboxContent class="absolute z-10 w-full mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
       <ComboboxViewport class="p-[5px]">
diff --git a/docs/content/components/combobox.md b/docs/content/components/combobox.md
index d30536d1f..0fce60ff9 100644
--- a/docs/content/components/combobox.md
+++ b/docs/content/components/combobox.md
@@ -66,12 +66,12 @@ Import all parts and piece them together.
 ```vue
 <script setup lang="ts">
 import {
+  ComboboxAnchor,
   ComboboxArrow,
   ComboboxCancel,
   ComboboxContent,
   ComboboxEmpty,
   ComboboxGroup,
-  ComboboxHeader,
   ComboboxInput,
   ComboboxItem,
   ComboboxItemIndicator,
@@ -86,11 +86,11 @@ import {
 
 <template>
   <ComboboxRoot>
-    <ComboboxHeader>
+    <ComboboxAnchor>
       <ComboboxInput />
       <ComboboxTrigger />
       <ComboboxCancel />
-    </ComboboxHeader>
+    </ComboboxAnchor>
 
     <ComboboxPortal>
       <ComboboxContent>
diff --git a/packages/radix-vue/constant/components.ts b/packages/radix-vue/constant/components.ts
index 0b5f2c801..16f33bb7b 100644
--- a/packages/radix-vue/constant/components.ts
+++ b/packages/radix-vue/constant/components.ts
@@ -21,7 +21,7 @@ export const components = {
   Combobox: [
     'ComboboxRoot',
     'ComboboxInput',
-    'ComboboxHeader',
+    'ComboboxAnchor',
     'ComboboxTrigger',
     'ComboboxCancel',
     'ComboboxGroup',
diff --git a/packages/radix-vue/src/Combobox/ComboboxHeader.vue b/packages/radix-vue/src/Combobox/ComboboxAnchor.vue
similarity index 76%
rename from packages/radix-vue/src/Combobox/ComboboxHeader.vue
rename to packages/radix-vue/src/Combobox/ComboboxAnchor.vue
index 80a8a380b..815eddcfb 100644
--- a/packages/radix-vue/src/Combobox/ComboboxHeader.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxAnchor.vue
@@ -2,9 +2,9 @@
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { PopperAnchor } from '@/Popper'
 
-export interface ComboboxHeaderProps extends PrimitiveProps {}
+export interface ComboboxAnchorProps extends PrimitiveProps {}
 
-defineProps<ComboboxHeaderProps>()
+defineProps<ComboboxAnchorProps>()
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Combobox/index.ts b/packages/radix-vue/src/Combobox/index.ts
index ff2247fee..5eb8792c3 100644
--- a/packages/radix-vue/src/Combobox/index.ts
+++ b/packages/radix-vue/src/Combobox/index.ts
@@ -8,9 +8,9 @@ export {
   type ComboboxInputProps,
 } from './ComboboxInput.vue'
 export {
-  default as ComboboxHeader,
-  type ComboboxHeaderProps,
-} from './ComboboxHeader.vue'
+  default as ComboboxAnchor,
+  type ComboboxAnchorProps,
+} from './ComboboxAnchor.vue'
 export {
   default as ComboboxTrigger,
   type ComboboxTriggerProps,
diff --git a/packages/radix-vue/src/Combobox/story/ComboboxBasic.story.vue b/packages/radix-vue/src/Combobox/story/ComboboxBasic.story.vue
index 3159b6cc1..fd310a574 100644
--- a/packages/radix-vue/src/Combobox/story/ComboboxBasic.story.vue
+++ b/packages/radix-vue/src/Combobox/story/ComboboxBasic.story.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from '../'
+import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from '../'
 import { Icon } from '@iconify/vue'
 
 const v = ref('Apple')
@@ -12,12 +12,12 @@ const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
   <Story title="Combobox/Default" :layout="{ type: 'single', iframe: false }">
     <Variant title="default">
       <ComboboxRoot v-model="v">
-        <ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
+        <ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
           <ComboboxInput class="bg-transparent outline-none text-grass11 placeholder-gray-400" placeholder="Test" />
           <ComboboxTrigger>
             <Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
           </ComboboxTrigger>
-        </ComboboxHeader>
+        </ComboboxAnchor>
         <ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
           <ComboboxViewport class="p-[5px]">
             <ComboboxEmpty class="text-gray-400  text-xs font-medium text-center py-2" />
diff --git a/packages/radix-vue/src/Combobox/story/ComboboxCustom.story.vue b/packages/radix-vue/src/Combobox/story/ComboboxCustom.story.vue
index 060690ace..4ef09991f 100644
--- a/packages/radix-vue/src/Combobox/story/ComboboxCustom.story.vue
+++ b/packages/radix-vue/src/Combobox/story/ComboboxCustom.story.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxTrigger, ComboboxViewport } from '../'
+import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxTrigger, ComboboxViewport } from '../'
 import { Icon } from '@iconify/vue'
 
 const links = [
@@ -26,12 +26,12 @@ const links = [
   <Story title="Combobox/Custom" :layout="{ type: 'single', iframe: false }">
     <Variant title="default">
       <ComboboxRoot>
-        <ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
+        <ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
           <ComboboxInput auto-focus class="bg-transparent outline-none text-grass11 placeholder-gray-400" placeholder="Where to go?" />
           <ComboboxTrigger>
             <Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
           </ComboboxTrigger>
-        </ComboboxHeader>
+        </ComboboxAnchor>
         <ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
           <ComboboxViewport class="p-[5px]">
             <ComboboxEmpty class="text-gray-400  text-xs font-medium text-center py-2" />
diff --git a/packages/radix-vue/src/Combobox/story/ComboboxMultiple.story.vue b/packages/radix-vue/src/Combobox/story/ComboboxMultiple.story.vue
index f5cecd17a..8cc8d7299 100644
--- a/packages/radix-vue/src/Combobox/story/ComboboxMultiple.story.vue
+++ b/packages/radix-vue/src/Combobox/story/ComboboxMultiple.story.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxTrigger, ComboboxViewport } from '../'
+import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxTrigger, ComboboxViewport } from '../'
 import { Icon } from '@iconify/vue'
 
 const people = [
@@ -25,12 +25,12 @@ function handleUpdate(ev: any) {
   <Story title="Combobox/Multiple" :layout="{ type: 'grid', width: '50%' }">
     <Variant title="String" auto-props-disabled>
       <ComboboxRoot multiple>
-        <ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
+        <ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
           <ComboboxInput class="bg-transparent outline-none text-grass11 placeholder-gray-400" placeholder="Test" />
           <ComboboxTrigger>
             <Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
           </ComboboxTrigger>
-        </ComboboxHeader>
+        </ComboboxAnchor>
         <ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
           <ComboboxViewport class="p-[5px]">
             <ComboboxEmpty class="text-gray-400  text-xs font-medium text-center py-2" />
@@ -62,12 +62,12 @@ function handleUpdate(ev: any) {
 
     <Variant title="Object" auto-props-disabled>
       <ComboboxRoot v-model:search-term="searchTerm" v-model="v" name="test" multiple @update:model-value="handleUpdate">
-        <ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
+        <ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
           <ComboboxInput class="bg-transparent outline-none text-grass11 placeholder-gray-400" placeholder="Test" />
           <ComboboxTrigger>
             <Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
           </ComboboxTrigger>
-        </ComboboxHeader>
+        </ComboboxAnchor>
         <ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
           <ComboboxViewport class="p-[5px]">
             <ComboboxEmpty class="text-gray-400  text-xs font-medium text-center py-2" />
diff --git a/packages/radix-vue/src/Combobox/story/ComboboxObject.story.vue b/packages/radix-vue/src/Combobox/story/ComboboxObject.story.vue
index 9d111d9a3..ef25ee479 100644
--- a/packages/radix-vue/src/Combobox/story/ComboboxObject.story.vue
+++ b/packages/radix-vue/src/Combobox/story/ComboboxObject.story.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxTrigger, ComboboxViewport } from '../'
+import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxTrigger, ComboboxViewport } from '../'
 import { Icon } from '@iconify/vue'
 
 const people = [
@@ -31,12 +31,12 @@ function handleUpdate(ev: any) {
   <Story title="Combobox/Object" :layout="{ type: 'grid', width: '50%' }">
     <Variant title="Default" auto-props-disabled>
       <ComboboxRoot v-model="v" :filter-function="filterFunction" @update:model-value="handleUpdate">
-        <ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
+        <ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
           <ComboboxInput class="bg-transparent outline-none text-grass11 placeholder-gray-400" placeholder="Test" />
           <ComboboxTrigger>
             <Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
           </ComboboxTrigger>
-        </ComboboxHeader>
+        </ComboboxAnchor>
         <ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
           <ComboboxViewport class="p-[5px]">
             <ComboboxEmpty class="text-gray-400  text-xs font-medium text-center py-2" />
@@ -68,12 +68,12 @@ function handleUpdate(ev: any) {
 
     <Variant title="Manual filtering" auto-props-disabled>
       <ComboboxRoot v-model:search-term="searchTerm" v-model="v" @update:model-value="handleUpdate">
-        <ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
+        <ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
           <ComboboxInput class="bg-transparent outline-none text-grass11 placeholder-gray-400" placeholder="Test" />
           <ComboboxTrigger>
             <Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
           </ComboboxTrigger>
-        </ComboboxHeader>
+        </ComboboxAnchor>
         <ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
           <ComboboxViewport class="p-[5px]">
             <ComboboxEmpty class="text-gray-400  text-xs font-medium text-center py-2" />
diff --git a/packages/radix-vue/src/Combobox/story/_Combobox.vue b/packages/radix-vue/src/Combobox/story/_Combobox.vue
index 29dde331d..0680398ea 100644
--- a/packages/radix-vue/src/Combobox/story/_Combobox.vue
+++ b/packages/radix-vue/src/Combobox/story/_Combobox.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, type ComboboxRootProps, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from '../'
+import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, type ComboboxRootProps, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from '../'
 import { Icon } from '@iconify/vue'
 
 const props = defineProps<ComboboxRootProps>()
@@ -13,12 +13,12 @@ const open = ref(props.open)
 
 <template>
   <ComboboxRoot v-bind="props" v-model="v" v-model:open="open" name="test">
-    <ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
+    <ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
       <ComboboxInput class="bg-transparent outline-none text-grass11 placeholder-gray-400" placeholder="Placeholder..." />
       <ComboboxTrigger>
         <Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
       </ComboboxTrigger>
-    </ComboboxHeader>
+    </ComboboxAnchor>
     <ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
       <ComboboxViewport class="p-[5px]">
         <ComboboxEmpty class="text-gray-400  text-xs font-medium text-center py-2" />