arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Select/SelectMenu): handle size prop (#133)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2024-07-02 12:03:10 +02:00
committed by GitHub
parent 57a49877ae
commit b61696cdca
42 changed files with 816 additions and 750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

360
test/components/__snapshots__/Select.spec.ts.snap
View File

@@ -11,23 +11,23 @@ exports[`Select > renders with arrow correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-106" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-107" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-108" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-108" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-108" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-109" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-109" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-109" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-110" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-110" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-110" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-111" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-111" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-111" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-112" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-112" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-112" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -71,23 +71,23 @@ exports[`Select > renders with class correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-197" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-198" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-199" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-199" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-199" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-200" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-200" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-200" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-201" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-201" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-201" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-202" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-202" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-202" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-203" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-203" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-203" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -131,23 +131,23 @@ exports[`Select > renders with color gray correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-176" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-177" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-178" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-178" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-178" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-179" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-179" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-179" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-180" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-180" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-180" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-181" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-181" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-181" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-182" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-182" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-182" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -191,23 +191,23 @@ exports[`Select > renders with color green correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-155" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-156" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-157" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-157" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-157" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-158" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-158" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-158" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-159" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-159" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-159" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-160" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-160" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-160" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-161" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-161" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-161" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -251,23 +251,23 @@ exports[`Select > renders with color primary correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-148" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-149" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-150" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-150" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-150" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-151" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-151" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-151" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-152" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-152" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-152" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-153" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-153" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-153" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-154" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-154" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-154" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -311,23 +311,23 @@ exports[`Select > renders with color red correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-162" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-163" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-164" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-164" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-164" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-165" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-165" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-165" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-166" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-166" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-166" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-167" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-167" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-167" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-168" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-168" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-168" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -371,23 +371,23 @@ exports[`Select > renders with color white correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-169" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-170" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-171" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-171" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-171" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-172" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-172" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-172" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-173" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-173" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-173" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-174" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-174" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-174" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-175" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-175" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-175" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -431,23 +431,23 @@ exports[`Select > renders with defaultValue correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-15" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-16" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-17" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-17" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-17" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-18" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-18" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-18" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-19" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-19" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-19" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-20" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-20" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-20" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-21" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-21" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-21" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -491,23 +491,23 @@ exports[`Select > renders with disabled correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-43" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-44" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-45" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-45" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-45" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-46" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-46" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-46" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-47" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-47" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-47" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-48" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-48" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-48" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-49" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-49" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-49" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -549,23 +549,23 @@ exports[`Select > renders with icon correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-57" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-58" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-59" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-59" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-59" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-60" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-60" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-60" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-61" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-61" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-61" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-62" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-62" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-62" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-63" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-63" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-63" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -609,23 +609,23 @@ exports[`Select > renders with id correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-22" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-23" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-24" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-24" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-24" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-25" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-25" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-25" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-26" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-26" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-26" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-27" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-27" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-27" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-28" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-28" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-28" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -669,11 +669,11 @@ exports[`Select > renders with item slot correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-225" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-226" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-227" aria-selected="false" data-state="unchecked" tabindex="-1" 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">Item slot</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-228" aria-selected="false" data-state="unchecked" tabindex="-1" 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">Item slot</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-229" aria-selected="false" data-state="unchecked" tabindex="-1" 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">Item slot</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-230" aria-selected="false" data-state="unchecked" tabindex="-1" 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">Item slot</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-231" aria-selected="false" data-state="unchecked" tabindex="-1" 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">Item slot</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-227" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">Item slot</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-228" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">Item slot</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-229" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">Item slot</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-230" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">Item slot</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-231" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">Item slot</div>
</div>
</div>
<style>
@@ -707,23 +707,23 @@ exports[`Select > renders with item-label slot correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-239" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-240" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-241" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-241" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-241" class="truncate">Item label slot</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-242" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-242" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-242" class="truncate">Item label slot</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-243" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-243" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-243" class="truncate">Item label slot</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-244" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-244" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-244" class="truncate">Item label slot</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-245" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-245" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-245" class="truncate">Item label slot</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -767,19 +767,19 @@ exports[`Select > renders with item-leading slot correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-232" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-233" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-234" aria-selected="false" data-state="unchecked" tabindex="-1" 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">Item leading slot<span id="radix-vue-select-item-text-234" class="truncate">Backlog</span>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-234" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">Item leading slot<span id="radix-vue-select-item-text-234" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-235" aria-selected="false" data-state="unchecked" tabindex="-1" 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">Item leading slot<span id="radix-vue-select-item-text-235" class="truncate">Todo</span>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-235" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">Item leading slot<span id="radix-vue-select-item-text-235" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-236" aria-selected="false" data-state="unchecked" tabindex="-1" 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">Item leading slot<span id="radix-vue-select-item-text-236" class="truncate">In Progress</span>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-236" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">Item leading slot<span id="radix-vue-select-item-text-236" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-237" aria-selected="false" data-state="unchecked" tabindex="-1" 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">Item leading slot<span id="radix-vue-select-item-text-237" class="truncate">Done</span>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-237" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">Item leading slot<span id="radix-vue-select-item-text-237" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-238" aria-selected="false" data-state="unchecked" tabindex="-1" 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">Item leading slot<span id="radix-vue-select-item-text-238" class="truncate">Canceled</span>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-238" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">Item leading slot<span id="radix-vue-select-item-text-238" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
</div>
@@ -822,23 +822,23 @@ exports[`Select > renders with item-trailing slot correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-246" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-247" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-248" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-248" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-248" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-249" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-249" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-249" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-250" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-250" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-250" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-251" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-251" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-251" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-252" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-252" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-252" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
</div>
@@ -882,23 +882,23 @@ exports[`Select > renders with items correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; animation: none; pointer-events: auto;" position="popper" bodylock="true" id="radix-vue-select-content-1" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-2" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-3" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-3" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-3" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-4" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-4" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-4" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-5" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-5" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-5" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-6" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-6" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-6" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-7" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-7" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-7" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -940,23 +940,23 @@ exports[`Select > renders with leading and icon correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-64" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-65" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-66" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-66" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-66" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-67" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-67" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-67" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-68" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-68" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-68" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-69" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-69" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-69" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-70" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-70" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-70" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -998,23 +998,23 @@ exports[`Select > renders with leading slot correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-211" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-212" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-213" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-213" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-213" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-214" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-214" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-214" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-215" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-215" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-215" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-216" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-216" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-216" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-217" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-217" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-217" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1056,23 +1056,23 @@ exports[`Select > renders with leadingIcon correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-71" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-72" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-73" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-73" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-73" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-74" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-74" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-74" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-75" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-75" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-75" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-76" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-76" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-76" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-77" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-77" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-77" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1114,23 +1114,23 @@ exports[`Select > renders with loading correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-92" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-93" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-94" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-94" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-94" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-95" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-95" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-95" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-96" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-96" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-96" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-97" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-97" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-97" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-98" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-98" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-98" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1172,23 +1172,23 @@ exports[`Select > renders with loadingIcon correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-99" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-100" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-101" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-101" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-101" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-102" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-102" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-102" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-103" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-103" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-103" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-104" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-104" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-104" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-105" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-105" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-105" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1232,23 +1232,23 @@ exports[`Select > renders with modelValue correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-8" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-9" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-10" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-10" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-10" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-11" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-11" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-11" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-12" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-12" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-12" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-13" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-13" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-13" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-14" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-14" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-14" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1292,23 +1292,23 @@ exports[`Select > renders with name correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-29" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-30" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-31" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-31" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-31" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-32" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-32" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-32" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-33" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-33" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-33" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-34" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-34" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-34" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-35" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-35" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-35" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1352,23 +1352,23 @@ exports[`Select > renders with placeholder correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-36" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-37" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-38" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-38" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-38" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-39" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-39" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-39" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-40" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-40" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-40" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-41" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-41" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-41" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-42" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-42" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-42" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1412,23 +1412,23 @@ exports[`Select > renders with required correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-50" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-51" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-52" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-52" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-52" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-53" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-53" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-53" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-54" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-54" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-54" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-55" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-55" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-55" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-56" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-56" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-56" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1472,23 +1472,23 @@ exports[`Select > renders with size lg correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-134" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-135" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-136" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-136" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-2 text-sm gap-2">
<!----><span id="radix-vue-select-item-text-136" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-137" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-137" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-2 text-sm gap-2">
<!----><span id="radix-vue-select-item-text-137" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-138" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-138" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-2 text-sm gap-2">
<!----><span id="radix-vue-select-item-text-138" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-139" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-139" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-2 text-sm gap-2">
<!----><span id="radix-vue-select-item-text-139" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-140" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-140" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-2 text-sm gap-2">
<!----><span id="radix-vue-select-item-text-140" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1532,23 +1532,23 @@ exports[`Select > renders with size md correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-127" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-128" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-129" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-129" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-129" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-130" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-130" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-130" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-131" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-131" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-131" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-132" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-132" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-132" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-133" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-133" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-133" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1592,23 +1592,23 @@ exports[`Select > renders with size sm correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-120" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-121" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-122" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-122" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-xs gap-1.5">
<!----><span id="radix-vue-select-item-text-122" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-123" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-123" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-xs gap-1.5">
<!----><span id="radix-vue-select-item-text-123" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-124" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-124" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-xs gap-1.5">
<!----><span id="radix-vue-select-item-text-124" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-125" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-125" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-xs gap-1.5">
<!----><span id="radix-vue-select-item-text-125" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-126" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-126" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-xs gap-1.5">
<!----><span id="radix-vue-select-item-text-126" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1652,23 +1652,23 @@ exports[`Select > renders with size xl correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-141" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-142" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-143" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-143" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-2 text-base gap-2">
<!----><span id="radix-vue-select-item-text-143" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-144" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-144" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-2 text-base gap-2">
<!----><span id="radix-vue-select-item-text-144" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-145" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-145" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-2 text-base gap-2">
<!----><span id="radix-vue-select-item-text-145" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-146" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-146" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-2 text-base gap-2">
<!----><span id="radix-vue-select-item-text-146" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-147" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-147" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-2 text-base gap-2">
<!----><span id="radix-vue-select-item-text-147" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1712,23 +1712,23 @@ exports[`Select > renders with size xs correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-113" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-114" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-115" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-115" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1 text-xs gap-1">
<!----><span id="radix-vue-select-item-text-115" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-116" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-116" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1 text-xs gap-1">
<!----><span id="radix-vue-select-item-text-116" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-117" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-117" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1 text-xs gap-1">
<!----><span id="radix-vue-select-item-text-117" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-118" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-118" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1 text-xs gap-1">
<!----><span id="radix-vue-select-item-text-118" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-119" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-119" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1 text-xs gap-1">
<!----><span id="radix-vue-select-item-text-119" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1772,23 +1772,23 @@ exports[`Select > renders with trailing and icon correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-78" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-79" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-80" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-80" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-80" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-81" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-81" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-81" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-82" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-82" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-82" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-83" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-83" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-83" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-84" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-84" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-84" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1832,23 +1832,23 @@ exports[`Select > renders with trailing slot correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-218" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-219" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-220" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-220" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-220" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-221" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-221" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-221" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-222" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-222" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-222" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-223" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-223" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-223" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-224" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-224" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-224" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1892,23 +1892,23 @@ exports[`Select > renders with trailingIcon correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-85" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-86" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-87" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-87" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-87" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-88" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-88" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-88" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-89" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-89" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-89" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-90" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-90" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-90" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-91" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-91" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-91" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -1952,23 +1952,23 @@ exports[`Select > renders with ui correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-204" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-205" class="isolate p-2">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-206" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-206" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-206" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-207" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-207" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-207" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-208" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-208" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-208" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-209" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-209" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-209" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-210" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-210" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-210" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -2012,23 +2012,23 @@ exports[`Select > renders with variant none correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-190" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-191" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-192" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-192" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-192" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-193" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-193" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-193" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-194" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-194" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-194" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-195" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-195" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-195" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-196" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-196" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-196" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
@@ -2072,23 +2072,23 @@ exports[`Select > renders with variant outline correctly 1`] = `
<div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-183" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" 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="start">
<div data-radix-select-viewport="" role="presentation" class="divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
<div role="group" aria-labelledby="radix-vue-select-group-184" class="p-1 isolate">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-185" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-185" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-185" class="truncate">Backlog</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-186" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-186" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-186" class="truncate">Todo</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-187" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-187" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-187" class="truncate">In Progress</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-188" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-188" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-188" class="truncate">Done</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-189" aria-selected="false" data-state="unchecked" tabindex="-1" 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">
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-189" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center 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 p-1.5 text-sm gap-1.5">
<!----><span id="radix-vue-select-item-text-189" class="truncate">Canceled</span>
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
</div>