From f26f6c8168ad5e44e47ab770cee10035257841a2 Mon Sep 17 00:00:00 2001
From: Alexander <a.hywax@gmail.com>
Date: Thu, 31 Oct 2024 19:09:24 +0500
Subject: [PATCH] feat(InputMenu/Select/SelectMenu): `arrow` prop
 implementation (#2503)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/content/3.components/input-menu.md       | 25 +++++++++++
 docs/content/3.components/select-menu.md      | 27 ++++++++++++
 docs/content/3.components/select.md           | 32 +++++++++++++-
 src/runtime/components/InputMenu.vue          |  6 ++-
 src/runtime/components/Select.vue             |  5 ++-
 src/runtime/components/SelectMenu.vue         |  6 ++-
 .../__snapshots__/InputMenu-vue.spec.ts.snap  | 36 +++++++++++++++-
 .../__snapshots__/InputMenu.spec.ts.snap      | 36 +++++++++++++++-
 .../__snapshots__/Select-vue.spec.ts.snap     | 37 +++++++++++++++-
 .../__snapshots__/Select.spec.ts.snap         | 37 +++++++++++++++-
 .../__snapshots__/SelectMenu-vue.spec.ts.snap | 42 ++++++++++++++++++-
 .../__snapshots__/SelectMenu.spec.ts.snap     | 42 ++++++++++++++++++-
 12 files changed, 321 insertions(+), 10 deletions(-)

diff --git a/docs/content/3.components/input-menu.md b/docs/content/3.components/input-menu.md
index e4781fba..dc1722b3 100644
--- a/docs/content/3.components/input-menu.md
+++ b/docs/content/3.components/input-menu.md
@@ -251,6 +251,31 @@ props:
 ---
 ::
 
+### Arrow
+
+Use the `arrow` prop to display an arrow on the InputMenu.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - modelValue
+  - arrow
+external:
+  - items
+  - modelValue
+props:
+  modelValue: Backlog
+  arrow: true
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
 ### Color
 
 Use the `color` prop to change the ring color when the InputMenu is focused.
diff --git a/docs/content/3.components/select-menu.md b/docs/content/3.components/select-menu.md
index 7163b4c6..f45b7a4e 100644
--- a/docs/content/3.components/select-menu.md
+++ b/docs/content/3.components/select-menu.md
@@ -275,6 +275,33 @@ props:
 ---
 ::
 
+### Arrow
+
+Use the `arrow` prop to display an arrow on the SelectMenu.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - modelValue
+  - class
+  - arrow
+external:
+  - items
+  - modelValue
+props:
+  modelValue: Backlog
+  arrow: true
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+  class: 'w-48'
+---
+::
+
 ### Color
 
 Use the `color` prop to change the ring color when the SelectMenu is focused.
diff --git a/docs/content/3.components/select.md b/docs/content/3.components/select.md
index 26c60427..4e274def 100644
--- a/docs/content/3.components/select.md
+++ b/docs/content/3.components/select.md
@@ -160,7 +160,7 @@ props:
 
 ### Content
 
-Use the `content` prop to control how the Select content is rendered, like its its `align`, `side` or `position` for example. Defaults to `popper` to match other components.
+Use the `content` prop to control how the Select content is rendered, like its `align`, `side` or `position` for example.
 
 ::warning
 The `content.align`, `content.side`, etc. properties only apply when `content.position` is set to `popper`.
@@ -209,6 +209,36 @@ props:
 Read more about the `content.position` prop in the [Radix Vue documentation](https://www.radix-vue.com/components/select.html#change-the-positioning-mode).
 ::
 
+<!--
+### Arrow
+
+Use the `arrow` prop to display an arrow on the Select.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - modelValue
+  - class
+  - arrow
+external:
+  - items
+  - modelValue
+props:
+  modelValue: 'Todo'
+  arrow: true
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+  class: 'w-48'
+---
+::
+
+-->
+
 ### Color
 
 Use the `color` prop to change the ring color when the Select is focused.
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 6a9cbdcf..35b91b33 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -126,7 +126,7 @@ export interface InputMenuSlots<T> {
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<InputMenuItem | AcceptableValue> = MaybeArrayOfArray<InputMenuItem | AcceptableValue>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">
 import { computed, ref, toRef, onMounted } from 'vue'
-import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'radix-vue'
+import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'radix-vue'
 import { defu } from 'defu'
 import * as isEqual from 'fast-deep-equal'
 import { reactivePick } from '@vueuse/core'
@@ -156,6 +156,8 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
+const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
+
 const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
@@ -387,6 +389,8 @@ defineExpose({
             </template>
           </ComboboxGroup>
         </ComboboxViewport>
+
+        <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
       </ComboboxContent>
     </ComboboxPortal>
   </ComboboxRoot>
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index ed566ed2..1b45bbcd 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -99,7 +99,7 @@ export interface SelectSlots<T> {
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectItem | AcceptableValue> = MaybeArrayOfArray<SelectItem | AcceptableValue>, V extends SelectItemKey<T> | undefined = undefined">
 import { computed, toRef } from 'vue'
-import { SelectRoot, SelectTrigger, SelectValue, SelectPortal, SelectContent, SelectViewport, SelectLabel, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from 'radix-vue'
+import { SelectRoot, SelectArrow, SelectTrigger, SelectValue, SelectPortal, SelectContent, SelectViewport, SelectLabel, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from 'radix-vue'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -122,6 +122,7 @@ const slots = defineSlots<SelectSlots<T>>()
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as SelectContentProps)
+const arrowProps = toRef(() => props.arrow as SelectArrowProps)
 
 const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
@@ -241,6 +242,8 @@ function onUpdateOpen(value: boolean) {
             </template>
           </SelectGroup>
         </SelectViewport>
+
+        <SelectArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
       </SelectContent>
     </SelectPortal>
   </SelectRoot>
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 3b935a6d..4037528c 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -116,7 +116,7 @@ export interface SelectMenuSlots<T> {
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectMenuItem | AcceptableValue> = MaybeArrayOfArray<SelectMenuItem | AcceptableValue>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">
 import { computed, toRef } from 'vue'
-import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'radix-vue'
+import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'radix-vue'
 import { defu } from 'defu'
 import * as isEqual from 'fast-deep-equal'
 import { reactivePick } from '@vueuse/core'
@@ -146,6 +146,8 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
+const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
+
 const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
@@ -324,6 +326,8 @@ function onUpdateOpen(value: boolean) {
             </template>
           </ComboboxGroup>
         </ComboboxViewport>
+
+        <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
       </ComboboxContent>
     </ComboboxPortal>
   </ComboboxRoot>
diff --git a/test/components/__snapshots__/InputMenu-vue.spec.ts.snap b/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
index fb2d4e22..2c2a75bc 100644
--- a/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
@@ -27,7 +27,7 @@ exports[`InputMenu > renders with arrow correctly 1`] = `
         [data-radix-combobox-viewport]::-webkit-scrollbar {
           display: none;
         }
-      </style>
+      </style><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span>
     </div>
   </div>
   <!--teleport end-->
@@ -63,6 +63,7 @@ exports[`InputMenu > renders with as correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -122,6 +123,7 @@ exports[`InputMenu > renders with class correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -166,6 +168,7 @@ exports[`InputMenu > renders with defaultValue correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -201,6 +204,7 @@ exports[`InputMenu > renders with disabled correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -244,6 +248,7 @@ exports[`InputMenu > renders with id correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -279,6 +284,7 @@ exports[`InputMenu > renders with item slot correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -314,6 +320,7 @@ exports[`InputMenu > renders with item-label slot correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -349,6 +356,7 @@ exports[`InputMenu > renders with item-leading slot correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -384,6 +392,7 @@ exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -419,6 +428,7 @@ exports[`InputMenu > renders with items correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -454,6 +464,7 @@ exports[`InputMenu > renders with labelKey correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -554,6 +565,7 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -589,6 +601,7 @@ exports[`InputMenu > renders with name correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -624,6 +637,7 @@ exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -659,6 +673,7 @@ exports[`InputMenu > renders with neutral variant none correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -694,6 +709,7 @@ exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -729,6 +745,7 @@ exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -764,6 +781,7 @@ exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -799,6 +817,7 @@ exports[`InputMenu > renders with placeholder correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -834,6 +853,7 @@ exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -869,6 +889,7 @@ exports[`InputMenu > renders with primary variant none correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -904,6 +925,7 @@ exports[`InputMenu > renders with primary variant outline correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -939,6 +961,7 @@ exports[`InputMenu > renders with primary variant soft correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -974,6 +997,7 @@ exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1009,6 +1033,7 @@ exports[`InputMenu > renders with required correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1044,6 +1069,7 @@ exports[`InputMenu > renders with selectedIcon correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1079,6 +1105,7 @@ exports[`InputMenu > renders with size lg correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1114,6 +1141,7 @@ exports[`InputMenu > renders with size md correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1149,6 +1177,7 @@ exports[`InputMenu > renders with size sm correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1184,6 +1213,7 @@ exports[`InputMenu > renders with size xl correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1219,6 +1249,7 @@ exports[`InputMenu > renders with size xs correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1281,6 +1312,7 @@ exports[`InputMenu > renders with trailingIcon correctly 2`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1316,6 +1348,7 @@ exports[`InputMenu > renders with ui correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1351,6 +1384,7 @@ exports[`InputMenu > renders with valueKey correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
diff --git a/test/components/__snapshots__/InputMenu.spec.ts.snap b/test/components/__snapshots__/InputMenu.spec.ts.snap
index bd8f8089..25f1652b 100644
--- a/test/components/__snapshots__/InputMenu.spec.ts.snap
+++ b/test/components/__snapshots__/InputMenu.spec.ts.snap
@@ -27,7 +27,7 @@ exports[`InputMenu > renders with arrow correctly 1`] = `
         [data-radix-combobox-viewport]::-webkit-scrollbar {
           display: none;
         }
-      </style>
+      </style><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span>
     </div>
   </div>
   <!--teleport end-->
@@ -63,6 +63,7 @@ exports[`InputMenu > renders with as correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -122,6 +123,7 @@ exports[`InputMenu > renders with class correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -166,6 +168,7 @@ exports[`InputMenu > renders with defaultValue correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -201,6 +204,7 @@ exports[`InputMenu > renders with disabled correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -244,6 +248,7 @@ exports[`InputMenu > renders with id correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -279,6 +284,7 @@ exports[`InputMenu > renders with item slot correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -314,6 +320,7 @@ exports[`InputMenu > renders with item-label slot correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -349,6 +356,7 @@ exports[`InputMenu > renders with item-leading slot correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -384,6 +392,7 @@ exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -419,6 +428,7 @@ exports[`InputMenu > renders with items correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -454,6 +464,7 @@ exports[`InputMenu > renders with labelKey correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -554,6 +565,7 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -589,6 +601,7 @@ exports[`InputMenu > renders with name correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -624,6 +637,7 @@ exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -659,6 +673,7 @@ exports[`InputMenu > renders with neutral variant none correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -694,6 +709,7 @@ exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -729,6 +745,7 @@ exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -764,6 +781,7 @@ exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -799,6 +817,7 @@ exports[`InputMenu > renders with placeholder correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -834,6 +853,7 @@ exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -869,6 +889,7 @@ exports[`InputMenu > renders with primary variant none correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -904,6 +925,7 @@ exports[`InputMenu > renders with primary variant outline correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -939,6 +961,7 @@ exports[`InputMenu > renders with primary variant soft correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -974,6 +997,7 @@ exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1009,6 +1033,7 @@ exports[`InputMenu > renders with required correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1044,6 +1069,7 @@ exports[`InputMenu > renders with selectedIcon correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1079,6 +1105,7 @@ exports[`InputMenu > renders with size lg correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1114,6 +1141,7 @@ exports[`InputMenu > renders with size md correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1149,6 +1177,7 @@ exports[`InputMenu > renders with size sm correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1184,6 +1213,7 @@ exports[`InputMenu > renders with size xl correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1219,6 +1249,7 @@ exports[`InputMenu > renders with size xs correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1281,6 +1312,7 @@ exports[`InputMenu > renders with trailingIcon correctly 2`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1316,6 +1348,7 @@ exports[`InputMenu > renders with ui correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
@@ -1351,6 +1384,7 @@ exports[`InputMenu > renders with valueKey correctly 1`] = `
           display: none;
         }
       </style>
+      <!--v-if-->
     </div>
   </div>
   <!--teleport end-->
diff --git a/test/components/__snapshots__/Select-vue.spec.ts.snap b/test/components/__snapshots__/Select-vue.spec.ts.snap
index dbfd5f90..782d3aff 100644
--- a/test/components/__snapshots__/Select-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Select-vue.spec.ts.snap
@@ -39,7 +39,7 @@ exports[`Select > renders with arrow correctly 1`] = `
       [data-radix-select-viewport]::-webkit-scrollbar {
         display: none;
       }
-    </style>
+    </style><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span>
   </div>
 </div>
 
@@ -116,6 +116,7 @@ exports[`Select > renders with class correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -171,6 +172,7 @@ exports[`Select > renders with defaultValue correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -226,6 +228,7 @@ exports[`Select > renders with disabled correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -288,6 +291,7 @@ exports[`Select > renders with id correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -333,6 +337,7 @@ exports[`Select > renders with item slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -381,6 +386,7 @@ exports[`Select > renders with item-label slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -436,6 +442,7 @@ exports[`Select > renders with item-leading slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -491,6 +498,7 @@ exports[`Select > renders with item-trailing slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -546,6 +554,7 @@ exports[`Select > renders with items correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -601,6 +610,7 @@ exports[`Select > renders with labelKey correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -661,6 +671,7 @@ exports[`Select > renders with leading slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -760,6 +771,7 @@ exports[`Select > renders with modelValue correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -815,6 +827,7 @@ exports[`Select > renders with name correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -870,6 +883,7 @@ exports[`Select > renders with neutral variant ghost correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -925,6 +939,7 @@ exports[`Select > renders with neutral variant none correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -980,6 +995,7 @@ exports[`Select > renders with neutral variant outline correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1035,6 +1051,7 @@ exports[`Select > renders with neutral variant soft correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1090,6 +1107,7 @@ exports[`Select > renders with neutral variant subtle correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1145,6 +1163,7 @@ exports[`Select > renders with placeholder correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1200,6 +1219,7 @@ exports[`Select > renders with primary variant ghost correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1255,6 +1275,7 @@ exports[`Select > renders with primary variant none correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1310,6 +1331,7 @@ exports[`Select > renders with primary variant outline correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1365,6 +1387,7 @@ exports[`Select > renders with primary variant soft correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1420,6 +1443,7 @@ exports[`Select > renders with primary variant subtle correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1475,6 +1499,7 @@ exports[`Select > renders with required correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1530,6 +1555,7 @@ exports[`Select > renders with selectedIcon correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1585,6 +1611,7 @@ exports[`Select > renders with size lg correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1640,6 +1667,7 @@ exports[`Select > renders with size md correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1695,6 +1723,7 @@ exports[`Select > renders with size sm correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1750,6 +1779,7 @@ exports[`Select > renders with size xl correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1805,6 +1835,7 @@ exports[`Select > renders with size xs correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1869,6 +1900,7 @@ exports[`Select > renders with trailing slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1933,6 +1965,7 @@ exports[`Select > renders with trailingIcon correctly 2`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1988,6 +2021,7 @@ exports[`Select > renders with ui correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -2043,6 +2077,7 @@ exports[`Select > renders with valueKey correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
diff --git a/test/components/__snapshots__/Select.spec.ts.snap b/test/components/__snapshots__/Select.spec.ts.snap
index bc7fb341..d8b5b102 100644
--- a/test/components/__snapshots__/Select.spec.ts.snap
+++ b/test/components/__snapshots__/Select.spec.ts.snap
@@ -39,7 +39,7 @@ exports[`Select > renders with arrow correctly 1`] = `
       [data-radix-select-viewport]::-webkit-scrollbar {
         display: none;
       }
-    </style>
+    </style><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span>
   </div>
 </div>
 
@@ -116,6 +116,7 @@ exports[`Select > renders with class correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -171,6 +172,7 @@ exports[`Select > renders with defaultValue correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -226,6 +228,7 @@ exports[`Select > renders with disabled correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -288,6 +291,7 @@ exports[`Select > renders with id correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -333,6 +337,7 @@ exports[`Select > renders with item slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -381,6 +386,7 @@ exports[`Select > renders with item-label slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -436,6 +442,7 @@ exports[`Select > renders with item-leading slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -491,6 +498,7 @@ exports[`Select > renders with item-trailing slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -546,6 +554,7 @@ exports[`Select > renders with items correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -601,6 +610,7 @@ exports[`Select > renders with labelKey correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -661,6 +671,7 @@ exports[`Select > renders with leading slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -760,6 +771,7 @@ exports[`Select > renders with modelValue correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -815,6 +827,7 @@ exports[`Select > renders with name correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -870,6 +883,7 @@ exports[`Select > renders with neutral variant ghost correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -925,6 +939,7 @@ exports[`Select > renders with neutral variant none correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -980,6 +995,7 @@ exports[`Select > renders with neutral variant outline correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1035,6 +1051,7 @@ exports[`Select > renders with neutral variant soft correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1090,6 +1107,7 @@ exports[`Select > renders with neutral variant subtle correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1145,6 +1163,7 @@ exports[`Select > renders with placeholder correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1200,6 +1219,7 @@ exports[`Select > renders with primary variant ghost correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1255,6 +1275,7 @@ exports[`Select > renders with primary variant none correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1310,6 +1331,7 @@ exports[`Select > renders with primary variant outline correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1365,6 +1387,7 @@ exports[`Select > renders with primary variant soft correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1420,6 +1443,7 @@ exports[`Select > renders with primary variant subtle correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1475,6 +1499,7 @@ exports[`Select > renders with required correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1530,6 +1555,7 @@ exports[`Select > renders with selectedIcon correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1585,6 +1611,7 @@ exports[`Select > renders with size lg correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1640,6 +1667,7 @@ exports[`Select > renders with size md correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1695,6 +1723,7 @@ exports[`Select > renders with size sm correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1750,6 +1779,7 @@ exports[`Select > renders with size xl correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1805,6 +1835,7 @@ exports[`Select > renders with size xs correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1869,6 +1900,7 @@ exports[`Select > renders with trailing slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1933,6 +1965,7 @@ exports[`Select > renders with trailingIcon correctly 2`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1988,6 +2021,7 @@ exports[`Select > renders with ui correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -2043,6 +2077,7 @@ exports[`Select > renders with valueKey correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
diff --git a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
index 4e6f1af1..b7b0d3be 100644
--- a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
@@ -30,7 +30,7 @@ exports[`SelectMenu > renders with arrow correctly 1`] = `
       [data-radix-combobox-viewport]::-webkit-scrollbar {
         display: none;
       }
-    </style>
+    </style><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span>
   </div>
 </div>
 
@@ -91,6 +91,7 @@ exports[`SelectMenu > renders with class correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -130,6 +131,7 @@ exports[`SelectMenu > renders with default slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -169,6 +171,7 @@ exports[`SelectMenu > renders with defaultValue correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -208,6 +211,7 @@ exports[`SelectMenu > renders with disabled correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -254,6 +258,7 @@ exports[`SelectMenu > renders with id correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -293,6 +298,7 @@ exports[`SelectMenu > renders with item slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -332,6 +338,7 @@ exports[`SelectMenu > renders with item-label slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -371,6 +378,7 @@ exports[`SelectMenu > renders with item-leading slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -410,6 +418,7 @@ exports[`SelectMenu > renders with item-trailing slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -449,6 +458,7 @@ exports[`SelectMenu > renders with items correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -488,6 +498,7 @@ exports[`SelectMenu > renders with labelKey correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -532,6 +543,7 @@ exports[`SelectMenu > renders with leading slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -615,6 +627,7 @@ exports[`SelectMenu > renders with modelValue correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -654,6 +667,7 @@ exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -693,6 +707,7 @@ exports[`SelectMenu > renders with multiple correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -732,6 +747,7 @@ exports[`SelectMenu > renders with name correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -771,6 +787,7 @@ exports[`SelectMenu > renders with neutral variant ghost correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -810,6 +827,7 @@ exports[`SelectMenu > renders with neutral variant none correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -849,6 +867,7 @@ exports[`SelectMenu > renders with neutral variant outline correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -888,6 +907,7 @@ exports[`SelectMenu > renders with neutral variant soft correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -927,6 +947,7 @@ exports[`SelectMenu > renders with neutral variant subtle correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -966,6 +987,7 @@ exports[`SelectMenu > renders with placeholder correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1005,6 +1027,7 @@ exports[`SelectMenu > renders with primary variant ghost correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1044,6 +1067,7 @@ exports[`SelectMenu > renders with primary variant none correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1083,6 +1107,7 @@ exports[`SelectMenu > renders with primary variant outline correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1122,6 +1147,7 @@ exports[`SelectMenu > renders with primary variant soft correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1161,6 +1187,7 @@ exports[`SelectMenu > renders with primary variant subtle correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1200,6 +1227,7 @@ exports[`SelectMenu > renders with required correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1239,6 +1267,7 @@ exports[`SelectMenu > renders with searchInput placeholder correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1278,6 +1307,7 @@ exports[`SelectMenu > renders with selectedIcon correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1317,6 +1347,7 @@ exports[`SelectMenu > renders with size lg correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1356,6 +1387,7 @@ exports[`SelectMenu > renders with size md correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1395,6 +1427,7 @@ exports[`SelectMenu > renders with size sm correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1434,6 +1467,7 @@ exports[`SelectMenu > renders with size xl correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1473,6 +1507,7 @@ exports[`SelectMenu > renders with size xs correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1521,6 +1556,7 @@ exports[`SelectMenu > renders with trailing slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1569,6 +1605,7 @@ exports[`SelectMenu > renders with trailingIcon correctly 2`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1608,6 +1645,7 @@ exports[`SelectMenu > renders with ui correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1647,6 +1685,7 @@ exports[`SelectMenu > renders with valueKey correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1687,6 +1726,7 @@ exports[`SelectMenu > renders without searchInput correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
diff --git a/test/components/__snapshots__/SelectMenu.spec.ts.snap b/test/components/__snapshots__/SelectMenu.spec.ts.snap
index d0e0aaeb..64bca897 100644
--- a/test/components/__snapshots__/SelectMenu.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu.spec.ts.snap
@@ -30,7 +30,7 @@ exports[`SelectMenu > renders with arrow correctly 1`] = `
       [data-radix-combobox-viewport]::-webkit-scrollbar {
         display: none;
       }
-    </style>
+    </style><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span>
   </div>
 </div>
 
@@ -91,6 +91,7 @@ exports[`SelectMenu > renders with class correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -130,6 +131,7 @@ exports[`SelectMenu > renders with default slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -169,6 +171,7 @@ exports[`SelectMenu > renders with defaultValue correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -208,6 +211,7 @@ exports[`SelectMenu > renders with disabled correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -254,6 +258,7 @@ exports[`SelectMenu > renders with id correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -293,6 +298,7 @@ exports[`SelectMenu > renders with item slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -332,6 +338,7 @@ exports[`SelectMenu > renders with item-label slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -371,6 +378,7 @@ exports[`SelectMenu > renders with item-leading slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -410,6 +418,7 @@ exports[`SelectMenu > renders with item-trailing slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -449,6 +458,7 @@ exports[`SelectMenu > renders with items correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -488,6 +498,7 @@ exports[`SelectMenu > renders with labelKey correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -532,6 +543,7 @@ exports[`SelectMenu > renders with leading slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -615,6 +627,7 @@ exports[`SelectMenu > renders with modelValue correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -654,6 +667,7 @@ exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -693,6 +707,7 @@ exports[`SelectMenu > renders with multiple correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -732,6 +747,7 @@ exports[`SelectMenu > renders with name correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -771,6 +787,7 @@ exports[`SelectMenu > renders with neutral variant ghost correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -810,6 +827,7 @@ exports[`SelectMenu > renders with neutral variant none correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -849,6 +867,7 @@ exports[`SelectMenu > renders with neutral variant outline correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -888,6 +907,7 @@ exports[`SelectMenu > renders with neutral variant soft correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -927,6 +947,7 @@ exports[`SelectMenu > renders with neutral variant subtle correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -966,6 +987,7 @@ exports[`SelectMenu > renders with placeholder correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1005,6 +1027,7 @@ exports[`SelectMenu > renders with primary variant ghost correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1044,6 +1067,7 @@ exports[`SelectMenu > renders with primary variant none correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1083,6 +1107,7 @@ exports[`SelectMenu > renders with primary variant outline correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1122,6 +1147,7 @@ exports[`SelectMenu > renders with primary variant soft correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1161,6 +1187,7 @@ exports[`SelectMenu > renders with primary variant subtle correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1200,6 +1227,7 @@ exports[`SelectMenu > renders with required correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1239,6 +1267,7 @@ exports[`SelectMenu > renders with searchInput placeholder correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1278,6 +1307,7 @@ exports[`SelectMenu > renders with selectedIcon correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1317,6 +1347,7 @@ exports[`SelectMenu > renders with size lg correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1356,6 +1387,7 @@ exports[`SelectMenu > renders with size md correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1395,6 +1427,7 @@ exports[`SelectMenu > renders with size sm correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1434,6 +1467,7 @@ exports[`SelectMenu > renders with size xl correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1473,6 +1507,7 @@ exports[`SelectMenu > renders with size xs correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1521,6 +1556,7 @@ exports[`SelectMenu > renders with trailing slot correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1569,6 +1605,7 @@ exports[`SelectMenu > renders with trailingIcon correctly 2`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1608,6 +1645,7 @@ exports[`SelectMenu > renders with ui correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1647,6 +1685,7 @@ exports[`SelectMenu > renders with valueKey correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>
 
@@ -1687,6 +1726,7 @@ exports[`SelectMenu > renders without searchInput correctly 1`] = `
         display: none;
       }
     </style>
+    <!--v-if-->
   </div>
 </div>