Movable breakpoint indicator

Move and collapse the breakpoint indicator, with smoother Select interactions and more reliable menu positioning.

Improved

BreakpointsIndicator can be moved using pointer or keyboard input, remembers its corner, and can collapse into an edge tab. Focus controls and RTL-aware edge resolution make the control usable without a pointer and consistent across writing directions. The component now owns its fixed position, so consumers no longer need to coordinate position and inset* styles.

Select menus gain a sliding hover highlight and improved positioning within the viewport. The highlight is cleared when a row is disabled or skipped, preventing stale focus from appearing on the wrong option. Command Menu defers filtering while typing and prevents Enter from selecting stale results while a query is still being ranked.

Fixed

Checkbox icons keep a consistent color while unchecking. Floating content remains open when the window scrolls, and menu placement stays inside the viewport when the available space changes.

Breaking changes

BreakpointsIndicator now manages its own fixed corner position. Remove the previous position and inset* props when upgrading.

<BreakpointsIndicator position="top-end" insetTop={4} />
<BreakpointsIndicator />