Element: #363 Tab indicator (motion/transitions)
What it shows: The package Tabs with one pill that slides and stretches under the active tab instead of each tab repainting its own background.
When to use: Segmented controls, tab bars and filters where the eye should follow the selection from one option to the next.
Spec:
- `MotionStage` with `label="Tab indicator: a pill slides under the active tab"` and `loop={1800}`
- `Tabs`, `TabsList`, `TabsTrigger` and `TabsContent` come from `@codeatlasdev/ui`, untouched
- The active trigger's `offsetLeft` and `offsetWidth` are written to `--ti-x` and `--ti-w`; the pill reads `transform: translateX(var(--ti-x))` and `inline-size: var(--ti-w)`
- `transition: transform 360ms cubic-bezier(0.2, 0, 0, 1), inline-size 360ms cubic-bezier(0.2, 0, 0, 1)`; no transition before the first measure and under reduced motion
- A `ResizeObserver` re-measures when the list resizes
Motion:
- transform: translateX and inline-size of the pill: 360ms cubic-bezier(0.2, 0, 0, 1)
Names: Sliding tab indicator | Tab pill | Magic line | Indicador deslizante de abas | Indicador de pestaña deslizante
Tags: motion, tabs, indicator, slide, pill
Needs: @codeatlasdev/ui@4.6.0
Components: MotionStage, Tabs, TabsContent, TabsList, TabsTrigger
Live demo: https://ui.codeatlas.com.br/docs/motion/transitions#tab-indicator
{#snippet children(m)}