Tabs

La variante por defecto, para vistas hermanas de una misma cosa: el resumen, el huésped y los pagos de una reserva. Nuevo frente al kit React: cada panel va en un slot con el valor de su pestaña (slot="pagos") y el componente muestra el activo y enlaza pestaña y panel con aria-controls y aria-labelledby. Así, sin estado, funciona solo: value es la pestaña de entrada. label nombra la fila cuando no hay un título visible que lo haga.

Sigue el patrón tabs de la APG con activación automática: ←/→ mueven y seleccionan saltando las deshabilitadas, Inicio/Fin van a los extremos y Tab entra al panel. disabled deja ver que la vista existe aunque aún no se pueda abrir (la factura se emite al hacer el check-out); si el motivo no se entiende desde la pantalla, mejor no mostrar la pestaña. El subrayado se desliza en 250 ms; con movimiento reducido, salta.

variant="pill" para cambiar el corte de los mismos datos dentro de una barra de herramientas: el periodo de un gráfico, el estado de una lista. La píldora mide lo que miden sus opciones. Para cambiar de vista, usa las subrayadas.

Hueco del kit: el elemento no se ensancha por su contenido (para que una fila larga no ensanche al padre), así que como hijo de un flex o con justify-self-start se queda en 0 px. Dale ancho, aquí con flex-1, y colócala con text-right.

count va detrás del texto, en las dos variantes. El contador de la activa se tiñe, pero la pestaña activa se reconoce también por el peso del texto y por el indicador, no solo por el color (la Regla del Tenant). Pon contador solo donde la cifra cambia lo que el usuario hace después.

Hueco del kit: icon existe, pero recibe un nodo del DOM o una plantilla de Lit, no un componente de React. Hasta que tenga un slot por pestaña, desde React las pestañas van sin icono.

Controlado: guardas value y lo cambias en onChange, que recibe { value } (antes, onValueChange). El evento es cancelable: con preventDefault() la pestaña no cambia. Las pestañas filtran una lista y los contadores salen de los mismos datos, así que nunca se desincronizan. Hay un solo panel, y su slot es la pestaña activa: el kit lo enlaza con ella sin que le pongas role ni nombre.

Cuando no caben, la fila se desplaza en horizontal sin barra visible y mantiene la pestaña activa a la vista, también al entrar con un enlace directo. Mira este ejemplo a 390 px: «Usuarios» está activa y aparece sin tocar nada. Las pestañas no ensanchan al contenedor: ocupan su ancho y desplazan lo que sobra. Más de siete pestañas es señal de que la vista necesita otra navegación.

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