SelectItem

Source: client/lib/theme/vueda-tailwind/controls/index.js

A single option inside a SelectContent.viewport. Carries the two-track selection state that distinguishes Select from Combobox: the highlighted-but-not-committed option paints --accent / --accent-foreground on :focus, while the committed value (data-state=checked) tints with bg-primary/10 so the chosen option reads as a soft primary band even when another row is highlighted; the indicator icon alone is not a strong enough signal at rest. pr-8 reserves trailing space for the check indicator; rounded-sm keeps the option a chit inside the popover slab.

Vue component: SelectItem

Slot	Default classes	Description
root	4 classes	A single option inside a SelectContent.viewport. Carries the two-track selection state that distinguishes Select from Combobox: the highlighted-but-not-committed option paints --accent / --accent-foreground on :focus, while the committed value (data-state=checked) tints with bg-primary/10 so the chosen option reads as a soft primary band even when another row is highlighted; the indicator icon alone is not a strong enough signal at rest. pr-8 reserves trailing space for the check indicator; rounded-sm keeps the option a chit inside the popover slab.

root

A single option inside a SelectContent.viewport. Carries the two-track selection state that distinguishes Select from Combobox: the highlighted-but-not-committed option paints --accent / --accent-foreground on :focus, while the committed value (data-state=checked) tints with bg-primary/10 so the chosen option reads as a soft primary band even when another row is highlighted; the indicator icon alone is not a strong enough signal at rest. pr-8 reserves trailing space for the check indicator; rounded-sm keeps the option a chit inside the popover slab.

Default classes:

focus:bg-accent focus:text-accent-foreground active:bg-accent-active active:text-accent-foreground data-[state=checked]:bg-primary/10
[&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none
data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2

Source: client/lib/theme/vueda-tailwind/controls/SelectItem.theme.js:18