co-option-list

Núcleo de lista de opciones y única fuente del look & behavior de los dropdowns Cobalt (co-ref-field, co-combobox, co-autocomplete, co-command-search) y de los pickers de celda de suite-v2. No renderiza trigger ni chrome de panel: eso lo aporta el host. Es 100% controlada — no muta value, emite eventos y el host decide. Recibe las opciones por la propiedad items (array de OptionListItem o su equivalente en JSON string).

Demo

Ver código

<co-option-list searchable items='[{"_id":"1","label":"Opción uno"},{"_id":"2","label":"Opción dos"},{"_id":"3","label":"Opción tres"}]'></co-option-list>

API

Props

Prop	Atributo	Tipo	Default	Descripción
autoHighlight	auto-highlight	boolean	false	Auto-resalta la primera fila navegable al montar y en cada cambio de items (paridad command-palette: tipear + Enter = primer resultado). Salta filas disabled vía nextActiveIndex.
avatarShape	avatar-shape	"circle" | "square"	'circle'
clearOptionLabel	clear-option-label	string	''	Si se setea y hay selección, fila "quitar selección" al tope.
emptyMessage	empty-message	string	'No results found'
hasMore	has-more	boolean	false	Fallback cuando el host no conoce totales (⌘K). total>0 manda.
highlightMatches	highlight-matches	boolean	false	Resalta el match del término en los labels.
highlightTerm	highlight-term	string	''	Término externo para highlight (input en el host, p.ej. ⌘K).
initialTerm	initial-term	string	''	Pre-seed del término (modo convert de las celdas).
items	items	OptionListItem[] | string	'[]'	JSON string o array de OptionListItem.
loading	loading	boolean	false
multiple	multiple	boolean	false
removableItems	removable-items	boolean	false	Botón remove por fila seleccionada en multiple (tags de combobox).
searchDebounce	search-debounce	number	350
searchPlaceholder	search-placeholder	string	'Search…'
searchable	searchable	boolean	false
selectedAffordance	selected-affordance	"check" | "deselect"	'check'	Afford. del seleccionado: check (combobox/autocomplete) o X deselect (ref-field).
selectedFirst	selected-first	boolean	false	Partición selected-first (snapshot al llamar snapshotOrder()).
selectedItems	selected-items	OptionListItem[] | string	'[]'	Display-items de la selección (para selected-first con ids fuera de página).
total	total	number	0	Total del server: deriva hasMore + hint "N more results".
value	value	string	''	Selección actual: id single o JSON array de ids.
virtual	virtual	boolean	false	Lista virtualizada (autocomplete/combobox). Ignora `group`.

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
coChange	{ value: string | string[]; item: OptionListItem; }	—	✓
coClearSelection	void	—	✓
coLoadMore	void	—	✓
coRemoveItem	string	—	✓
coSearch	string	—	✓

Slots

Slot	Descripción
footer	Footer del panel (normalmente <co-list-footer>).

CSS Parts

Part	Descripción
::part(options)
::part(search)

CSS Custom Properties

Este componente no expone CSS custom properties.