Tabs: indicator pop-in animation never runs — data-[rendered=false] styles are dead against Base UI 1.6

[jpenilla]

Summary

On initial mount, the Tabs indicator (both segmented pill and underline variants) appears instantly at full opacity. The intended pop-in — scale-90 → scale-100 + opacity-0 → opacity-1 over 200ms — never runs.

Root cause

The indicator in packages/kumo/src/components/tabs/tabs.tsx is styled with:

data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0

but Base UI's TabsIndicator (v1.6.0) never sets a data-rendered attribute, so these rules are dead CSS — the element is painted at full opacity/scale from its first frame.

For the record, Base UI does correctly avoid the 0×0 flash: it measures the active tab during render and keeps the element hidden until isTabSelected && width > 0 && height > 0. Only the pop animation is missing.

Expected

Indicator pops in at the correct size/position (scale 0.9 → 1, opacity 0 → 1, ~200ms), as the dead classes suggest was intended — never animating its size from 0, never appearing instantly.

Suggested approaches

1. Drive data-rendered from a small piece of state: start false, flip to true on a later frame after the first measurement (e.g. double requestAnimationFrame from a mount effect), guaranteeing one painted frame at the pre-pop state so the CSS transition actually runs.
2. Or drop the dead classes and use @starting-style + transition-behavior: allow-discrete (modern browsers only).

Environment

• @base-ui/react ^1.6.0
• main @ 65db2e6

[jpenilla]

Related observation while we were in this area: the indicator positions itself with translate-x-(--active-tab-left) and pop-animates with the CSS scale property. Those are separate individual transform properties that share a transform-origin, so they compound — the effective scale pivot ends up at origin + translate/(1 − scale). That is roughly centered for the first tab, but for tabs further along it sits well off to the side, which would make the pill drift horizontally as it scales 0.9 → 1.

Today that drift is masked because the pop-in never runs (scale stays at 1). We noticed it in the Svelte port when the pop-in was made to actually animate — positioning the indicator with layout left rather than translate-x kept the scale centered on the pill for every tab. Mentioning in case it affects how this pop-in gets wired up.