ComboboxItem
Source: client/lib/theme/vueda-tailwind/controls/index.js
A single result row inside a ComboboxGroup.root. The
data-highlightedstate (set by the picker on keyboard or pointer focus) paints--accent/--accent-foreground, and the muted leading icon flips to inherit on the same rule so a highlighted row reads as one tinted strip.data-disabledhalves opacity and drops pointer events;rounded-smkeeps the row a chit inside the group's slab. The committed-valuedata-state=checkedtint that SelectItem.root carries is not applied here because Combobox commits by closing the popover; the trailing ComboboxItemIndicator.root marks the selection instead.
Vue component: ComboboxItem
| Slot | Default classes | Description |
|---|---|---|
| root | 3 classes | A single result row inside a ComboboxGroup.root. The data-highlighted state (set by the picker on keyboard or pointer focus) paints --accent / --accent-foreground, and the muted leading icon flips to inherit on the same rule so a highlighted row reads as one tinted strip. data-disabled halves opacity and drops pointer events; rounded-sm keeps the row a chit inside the group's slab. The committed-value data-state=checked tint that SelectItem.root carries is not applied here because Combobox commits by closing the popover; the trailing ComboboxItemIndicator.root marks the selection instead. |
root
A single result row inside a ComboboxGroup.root. The
data-highlightedstate (set by the picker on keyboard or pointer focus) paints--accent/--accent-foreground, and the muted leading icon flips to inherit on the same rule so a highlighted row reads as one tinted strip.data-disabledhalves opacity and drops pointer events;rounded-smkeeps the row a chit inside the group's slab. The committed-valuedata-state=checkedtint that SelectItem.root carries is not applied here because Combobox commits by closing the popover; the trailing ComboboxItemIndicator.root marks the selection instead.
Default classes:
data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground active:bg-accent-active active:text-accent-foreground
[&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 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-4Source: client/lib/theme/vueda-tailwind/controls/ComboboxItem.theme.js:17