Most "grows on hover" UI fakes width with a scale transform, because animating layout properties is expensive. ImageAccordion doesn't bother — it transitions flex-grow on the panel itself. That's only safe because the whole system is small, bounded, and interaction-driven rather than continuous: five panels, one property, triggered once per hover.

Every panel is a single button (or anchor) that carries all of its own state through data-active. There's no separate "expanded" component — the image, the scrim, the label, and the caption are always in the DOM; only their filters and opacity/transform swap.

The image gets its own timeline (700ms transform, 550ms filter) — slightly slower than the panel's own grow, so the zoom keeps drifting for a beat after the width settles instead of finishing in lockstep with it.

flexGrow flips between 1 and activeGrow (default 5) on onPointerEnter / onClick / onFocus, and the whole row redistributes along one 550ms cubic-bezier(0.22,1,0.36,1) transition — the same snappy-then-settling curve used across Myndui for anything that "arrives." onPointerLeave resets to defaultIndex, so moving off the whole strip always returns to a known panel rather than leaving whichever was last active stuck open.

The diagram loops the same mutual handoff: one slot takes the 5fr, the other three stay at 1fr, so the outgoing panel visibly compresses as the incoming one expands. (It drives that with grid-template-columns so a continuous loop doesn't thrash flex-grow forever.) The real component only pays the layout cost for 550ms per hover — then the row is stable again. That's the trade that makes it fine to break the transform-only rule here: bounded, discrete, and it buys a change that transform genuinely can't express cleanly.

Why not just scale the active panel? A scale() on the active panel would zoom its content without changing how much horizontal space it actually occupies — the neighbors wouldn't compress, and the image would need a matching inverse-scale correction to avoid distorting alongside the container. Real flex-grow gets both effects — growth and compression — from a single property, at the cost of one bounded reflow instead of zero.

One state (active), one CSS transition, and every visual — width, image color, caption — reads it independently through data-[active=true]. Hover or tab across the panels above to feel the full 550ms settle.