mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
2228 lines
323 KiB
Plaintext
2228 lines
323 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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 labelKey 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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 neutral 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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 neutral 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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 neutral 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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 neutral 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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 neutral 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-heroicons:question-mark-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-heroicons:arrow-up-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-heroicons:question-mark-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-heroicons:arrow-up-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-heroicons:question-mark-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-heroicons:arrow-up-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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 valueKey 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-[calc(var(--ui-radius)*1.5)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] 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-[var(--ui-text-dimmed)] 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-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] 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-[var(--ui-border)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/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-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] 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>"
|
||
`;
|