Buttons joined into one control. Three published components, nine variants, and the one place in the kit where a component paints over its own children.
Button Group + Input - Placement: Start · End · Both
Button Group Popover Content - none: standalone, no variants
Using the Button Group
Why do Outline groups look different in the layer tree?
Because two bordered buttons side by side make a 2px line where they meet. The group strips the border off every button, carries one border itself, and lays a 1px hairline over each internal seam. Filled variants have no such problem, so they simply insert a 1px separator between buttons - which is why the horizontal group measures 357 there and 352 in Outline.
Which buttons keep their corners?
Only the first and the last. Everything between is square on all four corners, so the group reads as one control rather than a row of separate buttons. Vertical works the same way, top and bottom instead of left and right.
Why is the input pairing its own component?
Because a search field with a button attached is a thing people build over and over, and doing it by hand means getting the seam right every time. Placement gives you the button at the start, the end, or both, and the input absorbs the width difference so the control stays the same size.
What is the Popover Content for?
The panel that drops out of the icon button at the end of a group. It is published on its own, without variants, because the popover shell is already a component elsewhere in the kit - this is only the body that goes inside it.