SearchInput

Filtra lo que ya está en pantalla o lanza una búsqueda; para elegir un valor de una lista es un Select o un Combobox. La X aparece en cuanto hay texto; ella y Escape vacían el campo y devuelven el foco. Con el campo vacío, Escape sigue su camino y cierra el modal que lo contenga. No lleva etiqueta visible, así que pasa aria-label: si falta, el nombre accesible es el placeholder, que por defecto es el «Buscar…» de setLabels. Es un control de formulario nativo (type="search"): con name entra en el FormData.

sm para la barra de herramientas de una tabla, junto a otros filtros pequeños; md (por defecto) cuando la búsqueda es la entrada principal de la vista; lg en superficies públicas. La altura ya no es fija (antes 36 y 44 px): sigue los tokens de densidad --control-h-sm y --control-h, como Input, así que crece en la densidad cómoda.

Con debounce (en ms), el evento input espera a que se deje de escribir: una consulta por palabra, no por tecla. value está siempre al día; limpiar no espera. Al vaciar con la X o con Escape también llega uz-clear (onClear en React). Escribe «laura» seguido y luego despacio.

Un caso real: buscar en las conversaciones de WhatsApp, controlado con value y onInput; e.target.value trae el texto (antes onChange recibía el texto sin el evento). Compara sin tildes ni mayúsculas y quita los espacios del teléfono, porque nadie escribe «Peña» con eñe en un buscador. Cuando no hay resultados, dilo y ofrece limpiar la búsqueda en lugar de dejar la lista vacía. Prueba «pena», «48190» o «hotel».

Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).