mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
235f1cc330
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2118 lines
319 KiB
Plaintext
2118 lines
319 KiB
Plaintext
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||
|
||
exports[`Select > renders with arrow correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with class correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9 rounded-full">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with defaultValue correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"></span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="[object Object]" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="[object Object]">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with disabled correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" disabled="" dir="ltr" data-state="open" data-disabled="" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select disabled="" default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with gray variant ghost correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white hover:bg-gray-100 focus:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-transparent pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with gray variant none correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with gray variant outline correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with gray variant soft correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800/50 dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-gray-800/50 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with gray variant subtle correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with icon correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span></button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with id correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="id" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with item slot correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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">Item slot</div>
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-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">Item slot</div>
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-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">Item slot</div>
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-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">Item slot</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||
`;
|
||
|
||
exports[`Select > renders with item-label slot correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Item label slot</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Item label slot</option>
|
||
<option value="todo">Item label slot</option>
|
||
<option value="in_progress">Item label slot</option>
|
||
<option value="done">Item label slot</option>
|
||
<option value="canceled">Item label slot</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with item-leading slot correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-2" 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-v-0-0-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">Item leading slot<span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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">Item leading slot<span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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">Item leading slot<span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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">Item leading slot<span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with item-trailing slot correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with items correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with leading and icon correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span></button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with leading slot correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5">Leading slot</span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span></button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with leadingIcon correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span></button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with loading correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5 animate-spin" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span></button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with loadingIcon correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:sparkles shrink-0 text-gray-400 dark:text-gray-500 size-5 animate-spin" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span></button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with modelValue correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"></span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="[object Object]" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="[object Object]">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with name correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select name="name" default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with placeholder correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50">Search...</span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with primary variant ghost correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white hover:bg-gray-100 focus:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-transparent pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with primary variant none correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with primary variant outline correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with primary variant soft correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800/50 dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-gray-800/50 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with primary variant subtle correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with required correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="true" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select required="" default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with size lg correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-10">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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-2 text-sm gap-2"><span class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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-2 text-sm gap-2"><span class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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-2 text-sm gap-2"><span class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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-2 text-sm gap-2"><span class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with size md correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with size sm correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-8">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-4" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-4" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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-xs gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-4" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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-xs gap-1.5"><span class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-4" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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-xs gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-4" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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-xs gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-4" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with size xl correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-11">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-6" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-6" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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-2 text-base gap-2"><span class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-6" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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-2 text-base gap-2"><span class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-6" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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-2 text-base gap-2"><span class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-6" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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-2 text-base gap-2"><span class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-6" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with size xs correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-7">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-4" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-4" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 text-xs gap-1"><span class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-4" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 text-xs gap-1"><span class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-4" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 text-xs gap-1"><span class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-4" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 text-xs gap-1"><span class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-4" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with trailing and icon correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with trailing slot correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5">Trailing slot</span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with trailingIcon correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="p-1 isolate">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|
||
|
||
exports[`Select > renders with ui correctly 1`] = `
|
||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
|
||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
|
||
</button>
|
||
<!--teleport start-->
|
||
|
||
|
||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||
<div 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-v-0-0-0" 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-v-0-0-1" class="isolate p-2">
|
||
<div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" 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 class="iconify i-heroicons:question-mark-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" 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-v-0-0-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 class="iconify i-heroicons:plus-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" 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-v-0-0-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 class="iconify i-heroicons:arrow-up-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" 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-v-0-0-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 class="iconify i-heroicons:check-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" 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-v-0-0-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 class="iconify i-heroicons:x-circle shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
|
||
<!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
|
||
[data-radix-select-viewport] {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
[data-radix-select-viewport]::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--teleport end-->
|
||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
|
||
<!---->
|
||
<option value="backlog">Backlog</option>
|
||
<option value="todo">Todo</option>
|
||
<option value="in_progress">In Progress</option>
|
||
<option value="done">Done</option>
|
||
<option value="canceled">Canceled</option>
|
||
</select>"
|
||
`;
|