feat(DropdownMenu): handle size prop (#125)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2026-01-28 02:40:35 +01:00 · 2024-06-19 10:50:25 +01:00
parent 5b2e7d8bad
commit dfa99362d4
12 changed files with 1753 additions and 1162 deletions
--- a/test/components/snapshots/InputMenu.spec.ts.snap
+++ b/test/components/snapshots/InputMenu.spec.ts.snap
@@ -1,27 +1,27 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

-exports[`InputMenu > renders with as correctly 1`] = `
-"<section style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9" value="">
+exports[`InputMenu > renders with arrow correctly 1`] = `
+"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9" value="">
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div position="popper" dismissable="true" id="radix-vue-combobox-content-349" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-205" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
      <!---->
      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
-        <div role="group" aria-labelledby="radix-vue-combobox-group-350" class="p-1 isolate">
-          <div id="radix-vue-combobox-option-352" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-351" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+        <div role="group" aria-labelledby="radix-vue-combobox-group-206" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-208" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-207" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-354" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-353" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-210" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-209" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-356" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-355" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-212" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-211" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-358" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-357" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-214" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-213" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-360" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-359" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-216" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-215" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
        </div>
@@ -42,11 +42,11 @@ exports[`InputMenu > renders with as correctly 1`] = `
  </div>
  <!--teleport end-->
  <!---->
-</section>"
+</div>"
 `;

-exports[`InputMenu > renders with class correctly 1`] = `
-"<div style="pointer-events: auto;" dir="ltr" class="inline-flex items-center absolute"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9" value="">
+exports[`InputMenu > renders with as correctly 1`] = `
+"<section style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9" value="">
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -87,6 +87,51 @@ exports[`InputMenu > renders with class correctly 1`] = `
  </div>
  <!--teleport end-->
  <!---->
+</section>"
+`;
+
+exports[`InputMenu > renders with class correctly 1`] = `
+"<div style="pointer-events: auto;" dir="ltr" class="inline-flex items-center absolute"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
+  <!--teleport start-->
+  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-373" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+      <!---->
+      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
+        <div role="group" aria-labelledby="radix-vue-combobox-group-374" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-376" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-375" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-378" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-377" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-380" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-379" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-382" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-381" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-384" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-383" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+        </div>
+      </div>
+      <style>
+        /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
+        [data-radix-combobox-viewport] {
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        [data-radix-combobox-viewport]::-webkit-scrollbar {
+          display: none;
+        }
+      </style>
+    </div>
+  </div>
+  <!--teleport end-->
+  <!---->
 </div>"
 `;

@@ -95,23 +140,23 @@ exports[`InputMenu > renders with color gray correctly 1`] = `
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div position="popper" dismissable="true" id="radix-vue-combobox-content-313" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-325" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
      <!---->
      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
-        <div role="group" aria-labelledby="radix-vue-combobox-group-314" class="p-1 isolate">
-          <div id="radix-vue-combobox-option-316" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-315" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+        <div role="group" aria-labelledby="radix-vue-combobox-group-326" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-328" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-327" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-318" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-317" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-330" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-329" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-320" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-319" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-332" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-331" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-322" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-321" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-334" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-333" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-324" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-323" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-336" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-335" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
        </div>
@@ -137,96 +182,6 @@ exports[`InputMenu > renders with color gray correctly 1`] = `

 exports[`InputMenu > renders with color green correctly 1`] = `
 "<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-green-500 dark:ring-green-400 focus-visible:ring-2 focus-visible:ring-green-500 dark:focus-visible:ring-green-400 pr-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
-  <!--teleport start-->
-  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div position="popper" dismissable="true" id="radix-vue-combobox-content-277" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
-      <!---->
-      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
-        <div role="group" aria-labelledby="radix-vue-combobox-group-278" class="p-1 isolate">
-          <div id="radix-vue-combobox-option-280" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-279" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-282" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-281" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-284" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-283" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-286" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-285" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-288" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-287" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-        </div>
-      </div>
-      <style>
-        /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
-        [data-radix-combobox-viewport] {
-          scrollbar-width: none;
-          -ms-overflow-style: none;
-          -webkit-overflow-scrolling: touch;
-        }
-
-        [data-radix-combobox-viewport]::-webkit-scrollbar {
-          display: none;
-        }
-      </style>
-    </div>
-  </div>
-  <!--teleport end-->
-  <!---->
-</div>"
-`;
-
-exports[`InputMenu > renders with color primary correctly 1`] = `
-"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-primary-500 dark:ring-primary-400 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
-  <!--teleport start-->
-  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div position="popper" dismissable="true" id="radix-vue-combobox-content-265" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
-      <!---->
-      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
-        <div role="group" aria-labelledby="radix-vue-combobox-group-266" class="p-1 isolate">
-          <div id="radix-vue-combobox-option-268" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-267" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-270" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-269" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-272" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-271" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-274" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-273" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-276" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-275" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-        </div>
-      </div>
-      <style>
-        /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
-        [data-radix-combobox-viewport] {
-          scrollbar-width: none;
-          -ms-overflow-style: none;
-          -webkit-overflow-scrolling: touch;
-        }
-
-        [data-radix-combobox-viewport]::-webkit-scrollbar {
-          display: none;
-        }
-      </style>
-    </div>
-  </div>
-  <!--teleport end-->
-  <!---->
-</div>"
-`;
-
-exports[`InputMenu > renders with color red correctly 1`] = `
-"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400 pr-9" value="">
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -270,8 +225,53 @@ exports[`InputMenu > renders with color red correctly 1`] = `
 </div>"
 `;

-exports[`InputMenu > renders with color white correctly 1`] = `
-"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9" value="">
+exports[`InputMenu > renders with color primary correctly 1`] = `
+"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-primary-500 dark:ring-primary-400 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
+  <!--teleport start-->
+  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-277" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+      <!---->
+      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
+        <div role="group" aria-labelledby="radix-vue-combobox-group-278" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-280" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-279" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-282" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-281" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-284" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-283" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-286" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-285" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-288" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-287" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+        </div>
+      </div>
+      <style>
+        /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
+        [data-radix-combobox-viewport] {
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        [data-radix-combobox-viewport]::-webkit-scrollbar {
+          display: none;
+        }
+      </style>
+    </div>
+  </div>
+  <!--teleport end-->
+  <!---->
+</div>"
+`;
+
+exports[`InputMenu > renders with color red correctly 1`] = `
+"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400 pr-9" value="">
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -315,6 +315,51 @@ exports[`InputMenu > renders with color white correctly 1`] = `
 </div>"
 `;

+exports[`InputMenu > renders with color white correctly 1`] = `
+"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
+  <!--teleport start-->
+  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-313" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+      <!---->
+      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
+        <div role="group" aria-labelledby="radix-vue-combobox-group-314" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-316" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-315" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-318" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-317" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-320" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-319" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-322" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-321" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-324" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-323" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+        </div>
+      </div>
+      <style>
+        /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
+        [data-radix-combobox-viewport] {
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        [data-radix-combobox-viewport]::-webkit-scrollbar {
+          display: none;
+        }
+      </style>
+    </div>
+  </div>
+  <!--teleport end-->
+  <!---->
+</div>"
+`;
+
 exports[`InputMenu > renders with default slot correctly 1`] = `
 "<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9" value="">
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
@@ -508,15 +553,15 @@ exports[`InputMenu > renders with item slot correctly 1`] = `
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div position="popper" dismissable="true" id="radix-vue-combobox-content-388" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-400" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
      <!---->
      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
-        <div role="group" aria-labelledby="radix-vue-combobox-group-389" class="p-1 isolate">
-          <div id="radix-vue-combobox-option-391" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-390" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item slot</div>
-          <div id="radix-vue-combobox-option-393" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-392" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item slot</div>
-          <div id="radix-vue-combobox-option-395" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-394" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item slot</div>
-          <div id="radix-vue-combobox-option-397" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-396" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item slot</div>
-          <div id="radix-vue-combobox-option-399" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-398" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item slot</div>
+        <div role="group" aria-labelledby="radix-vue-combobox-group-401" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-403" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-402" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item slot</div>
+          <div id="radix-vue-combobox-option-405" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-404" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item slot</div>
+          <div id="radix-vue-combobox-option-407" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-406" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item slot</div>
+          <div id="radix-vue-combobox-option-409" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-408" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item slot</div>
+          <div id="radix-vue-combobox-option-411" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-410" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item slot</div>
        </div>
      </div>
      <style>
@@ -543,23 +588,23 @@ exports[`InputMenu > renders with item-label slot correctly 1`] = `
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div position="popper" dismissable="true" id="radix-vue-combobox-content-412" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-424" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
      <!---->
      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
-        <div role="group" aria-labelledby="radix-vue-combobox-group-413" class="p-1 isolate">
-          <div id="radix-vue-combobox-option-415" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-414" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+        <div role="group" aria-labelledby="radix-vue-combobox-group-425" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-427" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-426" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Item label slot</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-417" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-416" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-429" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-428" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Item label slot</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-419" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-418" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-431" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-430" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Item label slot</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-421" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-420" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-433" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-432" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Item label slot</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-423" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-422" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-435" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-434" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Item label slot</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
        </div>
@@ -588,15 +633,15 @@ exports[`InputMenu > renders with item-leading slot correctly 1`] = `
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div position="popper" dismissable="true" id="radix-vue-combobox-content-400" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-412" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
      <!---->
      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
-        <div role="group" aria-labelledby="radix-vue-combobox-group-401" class="p-1 isolate">
-          <div id="radix-vue-combobox-option-403" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-402" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item leading slot<span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
-          <div id="radix-vue-combobox-option-405" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-404" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item leading slot<span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
-          <div id="radix-vue-combobox-option-407" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-406" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item leading slot<span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
-          <div id="radix-vue-combobox-option-409" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-408" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item leading slot<span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
-          <div id="radix-vue-combobox-option-411" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-410" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item leading slot<span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+        <div role="group" aria-labelledby="radix-vue-combobox-group-413" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-415" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-414" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item leading slot<span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+          <div id="radix-vue-combobox-option-417" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-416" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item leading slot<span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+          <div id="radix-vue-combobox-option-419" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-418" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item leading slot<span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+          <div id="radix-vue-combobox-option-421" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-420" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item leading slot<span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+          <div id="radix-vue-combobox-option-423" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-422" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">Item leading slot<span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
        </div>
      </div>
      <style>
@@ -623,23 +668,23 @@ exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div position="popper" dismissable="true" id="radix-vue-combobox-content-424" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-436" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
      <!---->
      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
-        <div role="group" aria-labelledby="radix-vue-combobox-group-425" class="p-1 isolate">
-          <div id="radix-vue-combobox-option-427" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-426" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+        <div role="group" aria-labelledby="radix-vue-combobox-group-437" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-439" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-438" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
          </div>
-          <div id="radix-vue-combobox-option-429" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-428" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-441" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-440" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
          </div>
-          <div id="radix-vue-combobox-option-431" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-430" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-443" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-442" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
          </div>
-          <div id="radix-vue-combobox-option-433" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-432" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-445" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-444" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
          </div>
-          <div id="radix-vue-combobox-option-435" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-434" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-447" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-446" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
          </div>
        </div>
@@ -1121,6 +1166,51 @@ exports[`InputMenu > renders with size lg correctly 1`] = `
 "<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-3 py-2 text-sm gap-2 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-10" value="">
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
  <!--teleport start-->
+  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-253" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+      <!---->
+      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
+        <div role="group" aria-labelledby="radix-vue-combobox-group-254" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-256" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-255" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-258" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-257" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-260" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-259" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-262" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-261" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-264" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-263" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+        </div>
+      </div>
+      <style>
+        /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
+        [data-radix-combobox-viewport] {
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        [data-radix-combobox-viewport]::-webkit-scrollbar {
+          display: none;
+        }
+      </style>
+    </div>
+  </div>
+  <!--teleport end-->
+  <!---->
+</div>"
+`;
+
+exports[`InputMenu > renders with size md correctly 1`] = `
+"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
+  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
    <div position="popper" dismissable="true" id="radix-vue-combobox-content-241" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
      <!---->
@@ -1162,9 +1252,9 @@ exports[`InputMenu > renders with size lg correctly 1`] = `
 </div>"
 `;

-exports[`InputMenu > renders with size md correctly 1`] = `
-"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
+exports[`InputMenu > renders with size sm correctly 1`] = `
+"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-xs gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-8" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-4" aria-hidden="true"></span></button>
  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
    <div position="popper" dismissable="true" id="radix-vue-combobox-content-229" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
@@ -1207,73 +1297,28 @@ exports[`InputMenu > renders with size md correctly 1`] = `
 </div>"
 `;

-exports[`InputMenu > renders with size sm correctly 1`] = `
-"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-xs gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-8" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-4" aria-hidden="true"></span></button>
-  <!--teleport start-->
-  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div position="popper" dismissable="true" id="radix-vue-combobox-content-217" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
-      <!---->
-      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
-        <div role="group" aria-labelledby="radix-vue-combobox-group-218" class="p-1 isolate">
-          <div id="radix-vue-combobox-option-220" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-219" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-222" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-221" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-224" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-223" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-226" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-225" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-228" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-227" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-        </div>
-      </div>
-      <style>
-        /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
-        [data-radix-combobox-viewport] {
-          scrollbar-width: none;
-          -ms-overflow-style: none;
-          -webkit-overflow-scrolling: touch;
-        }
-
-        [data-radix-combobox-viewport]::-webkit-scrollbar {
-          display: none;
-        }
-      </style>
-    </div>
-  </div>
-  <!--teleport end-->
-  <!---->
-</div>"
-`;
-
 exports[`InputMenu > renders with size xl correctly 1`] = `
 "<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-3 py-2 text-base gap-2 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-11" value="">
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-6" aria-hidden="true"></span></button>
  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div position="popper" dismissable="true" id="radix-vue-combobox-content-253" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-265" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
      <!---->
      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
-        <div role="group" aria-labelledby="radix-vue-combobox-group-254" class="p-1 isolate">
-          <div id="radix-vue-combobox-option-256" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-255" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+        <div role="group" aria-labelledby="radix-vue-combobox-group-266" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-268" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-267" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-258" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-257" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-270" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-269" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-260" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-259" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-272" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-271" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-262" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-261" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-274" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-273" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-264" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-263" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-276" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-275" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
        </div>
@@ -1302,23 +1347,23 @@ exports[`InputMenu > renders with size xs correctly 1`] = `
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-4" aria-hidden="true"></span></button>
  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div position="popper" dismissable="true" id="radix-vue-combobox-content-205" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-217" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
      <!---->
      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
-        <div role="group" aria-labelledby="radix-vue-combobox-group-206" class="p-1 isolate">
-          <div id="radix-vue-combobox-option-208" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-207" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+        <div role="group" aria-labelledby="radix-vue-combobox-group-218" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-220" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-219" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-210" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-209" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-222" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-221" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-212" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-211" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-224" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-223" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-214" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-213" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-226" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-225" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-216" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-215" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-228" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-227" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
        </div>
@@ -1491,23 +1536,23 @@ exports[`InputMenu > renders with ui correctly 1`] = `
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div position="popper" dismissable="true" id="radix-vue-combobox-content-373" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-385" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
      <!---->
      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
-        <div role="group" aria-labelledby="radix-vue-combobox-group-374" class="isolate p-2">
-          <div id="radix-vue-combobox-option-376" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-375" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+        <div role="group" aria-labelledby="radix-vue-combobox-group-386" class="isolate p-2">
+          <div id="radix-vue-combobox-option-388" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-387" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-378" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-377" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-390" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-389" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-380" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-379" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-392" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-391" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-382" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-381" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-394" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-393" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
-          <div id="radix-vue-combobox-option-384" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-383" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div id="radix-vue-combobox-option-396" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-395" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
          </div>
        </div>
@@ -1533,6 +1578,51 @@ exports[`InputMenu > renders with ui correctly 1`] = `

 exports[`InputMenu > renders with variant none correctly 1`] = `
 "<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 bg-transparent w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pr-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
+  <!--teleport start-->
+  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-349" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+      <!---->
+      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
+        <div role="group" aria-labelledby="radix-vue-combobox-group-350" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-352" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-351" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-354" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-353" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-356" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-355" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-358" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-357" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+          <div id="radix-vue-combobox-option-360" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-359" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+          </div>
+        </div>
+      </div>
+      <style>
+        /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
+        [data-radix-combobox-viewport] {
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        [data-radix-combobox-viewport]::-webkit-scrollbar {
+          display: none;
+        }
+      </style>
+    </div>
+  </div>
+  <!--teleport end-->
+  <!---->
+</div>"
+`;
+
+exports[`InputMenu > renders with variant outline correctly 1`] = `
+"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9" value="">
  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
  <!--teleport start-->
  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1575,48 +1665,3 @@ exports[`InputMenu > renders with variant none correctly 1`] = `
  <!---->
 </div>"
 `;
-
-exports[`InputMenu > renders with variant outline correctly 1`] = `
-"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="px-2.5 py-1.5 text-sm gap-1.5 w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></button>
-  <!--teleport start-->
-  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div position="popper" dismissable="true" id="radix-vue-combobox-content-325" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
-      <!---->
-      <div class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
-        <div role="group" aria-labelledby="radix-vue-combobox-group-326" class="p-1 isolate">
-          <div id="radix-vue-combobox-option-328" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-327" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-330" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-329" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-332" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-331" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-334" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-333" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-          <div id="radix-vue-combobox-option-336" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-335" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
-            <!----><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
-          </div>
-        </div>
-      </div>
-      <style>
-        /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
-        [data-radix-combobox-viewport] {
-          scrollbar-width: none;
-          -ms-overflow-style: none;
-          -webkit-overflow-scrolling: touch;
-        }
-
-        [data-radix-combobox-viewport]::-webkit-scrollbar {
-          display: none;
-        }
-      </style>
-    </div>
-  </div>
-  <!--teleport end-->
-  <!---->
-</div>"
-`;