Tabs

Tabs tipo píldora segmentada sobre un track continuo (radius.md, 8px) que se mantiene cerca del fondo de la propia página en ambos temas (surface.raised en modo oscuro, surface.background-secondary en modo claro) — no un color propio que compita. La píldora del tab activo (radius.xs, 4px) se desliza para ubicarse detrás de la selección en vez de aparecer de golpe — un único indicador compartido, no un fondo por tab.

El color de esa píldora ahora combina con el fondo de la página de cada tema (surface.background en oscuro, blanco en claro) en vez de resaltar sobre ella — sentada dentro del track, un paso más claro, se lee como una ventana hundida hacia la página, no como un chip elevado. El label activo usa text.primary (invierte correctamente en cada tema); el inactivo usa un gris fijo, no text.secondary (ese token no contrastaba bien contra el track en modo oscuro).

Un tab con count (número opcional) muestra una píldora chica después del label — mint sólido con primary.on-lime-text cuando el tab está seleccionado, surface.card/text.secondary cuando no.

Uso

En web, los tabs son hijos <orbit-tab value="..." count="..."> en el DOM liviano.

PreviewCódigoAjustes

Web

<orbit-tabs value="preview">
  <orbit-tab value="preview">Preview</orbit-tab>
  <orbit-tab value="code" count="3">Código</orbit-tab>
  <orbit-tab value="settings">Ajustes</orbit-tab>
</orbit-tabs>

Compose Multiplatform

var tab by remember { mutableStateOf("preview") }
OrbitTabs(
    tabs = listOf("preview", "code", "settings"),
    selected = tab,
    onSelectedChange = { tab = it },
    tabLabel = {
        mapOf(
            "preview" to "Preview",
            "code" to "Código",
            "settings" to "Ajustes",
        ).getValue(it)
    },
    tabCount = { if (it == "code") 3 else null },
)

Props

Prop	Tipo	Default	Descripción
tabs (Kotlin) / hijos <orbit-tab> (web)	List<T>	—	Los tabs disponibles.
selected / attr value	T	—	Tab activo.
onSelectedChange / evento orbit-change	(T) => void	—	Se dispara al elegir un tab.
tabLabel (Kotlin)	(T) => string	toString()	Cómo renderizar cada tab.
tabCount (Kotlin) / attr count (web)	(T) => number? / string	null	Número opcional en una píldora después del label.