Popover

El caso para el que existe: unos controles junto al botón que los abre, sin tapar la lista que filtran. El disparador va en el slot trigger y el contenido son los hijos. Se abre y se cierra con un clic en el disparador, se cierra con un clic fuera o con Esc, y cada cambio emite onToggle con { open }. Es nuevo: el kit React no tenía un flotante interactivo.

Funciona solo; pasa open cuando lo quieras cerrar tú, como aquí al aplicar los filtros, y sincroniza el estado en onToggle. Sigue el patrón disclosure de la APG: el disparador lleva aria-expanded, el foco no salta al abrir y Tab entra al panel, que va justo después del disparador en el orden. Si se cierra con el foco dentro, vuelve al disparador.

El disparador apunta al contenido con aria-controls, así que cada hijo necesita un id. Si no lo tiene, el componente le pone uno; con SSR (Next) eso pasa antes de hidratar y React avisa de la diferencia, así que dáselo tú.

Una explicación corta que el usuario abre a propósito y que puede llevar un enlace o un botón: lo que un tooltip no puede. placement admite los doce lados de Floating UI (top-start, bottom-end…); si no cabe, voltea, y como va en la top layer ningún overflow lo corta. Entra en 200 ms creciendo desde el borde que toca al disparador y sale en 150 ms.

Un formulario de uno o dos campos para cambiar algo de la fila sin abrir un modal: la tarifa de una noche, el nombre de una etiqueta. Con placement="bottom-end" crece hacia dentro desde el borde derecho. Si el formulario pide más campos o no puede perderse a medias, es un Modal o un Sheet.

• Popover: contenido que se lee o se toca (filtros, un detalle, dos campos). No bloquea la página.
• Tooltip: una pista de una línea que sale sola al pasar el ratón; nunca con nada que pulsar.
• DropdownMenu: una lista de acciones, con flechas y escribir para saltar.

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).