Segmented

A pill segmented control: the active segment is a raised pill that slides between options (measured local to the track, so it never flies across a transforming dialog). Hairline inset stroke, canvas pill, spring.

Segments divide the track evenly, and their labels never wrap. flex-1 is flex: 1 1 0%, and a flex item will not shrink below its min-content width — which for wrapping text is the longest word, not the longest label. In a 432px popover that handed “Open for booking” 128px and broke it in half. Pinned to one line, each segment claims what it needs and the leftover is still shared evenly, so the track always fills its container.