feat(InputMenu/Select/SelectMenu): arrow prop implementation (#2503)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

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-->

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-->

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>
 

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>
 

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>
 

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>