Two panels and the twelve pixels between them: a 1px rule you can see, a 12-wide board you can grab, and a grip that says the rule moves.
Two components, two variants
Resizable / Handle - State: Default · Focus - 12 × 480, the line and the grip edge move from base.border to base.ring
Resizable - none: 480 × 480 - two 234 panels with a handle between them
Using the Resizeable
Why is the handle 12 wide when the line is 1?
Because the line is what you see and the 12 is what you hit. A one-pixel drag target is unusable with a mouse and impossible with a trackpad, so the component draws the board at the size of the gesture and centres the rule inside it. Placing it means leaving 12 between the panels, not 1, and that is exactly what the file records.
What is the grip for?
Announcing that the line moves. Without it a divider looks like a border, and nobody tries to drag a border. It is 6 by 16 on the group's background inside a base.input edge, so it reads as a small raised tab sitting on the rule rather than a mark drawn on it. The source calls this withHandle and defaults it off; every example in the docs turns it on.
Why does Focus change the colour instead of drawing a ring?
Because there is nowhere to put a ring. The kit's focus ring sits outside the thing it surrounds, and outside a 12-wide strip is the middle of the panel on either side. So Focus recolours both the line and the grip's edge to base.ring, which is visible along the full height of the split and cannot collide with anything.
Is there a hover state?
No, and there should not be. The source styles focus-visible and nothing else on the handle, so hovering leaves every pixel where it was - the cursor turning into a resize arrow is the entire affordance. A hover variant would be inventing a state the component does not have, and would then have to answer what happens when a pointer hovers a handle that already has keyboard focus.
Is there a vertical version?
Not in the file. The source has orientation set to horizontal or vertical on the group, and the vertical case is the same handle turned ninety degrees - a full-width rule with a 16 by 6 grip. It is shown on this page so you can see what you get, but nothing has been added to the file for it.
Why are the panels empty?
Because a panel is a region, not a surface. It has no fill, no padding and no edge of its own; the only line in the whole component is the handle. Whatever you put in a panel sits straight on the group's background, which is why the file draws a single centred label and stops.
What about minimum sizes?
Those live in the code, not the drawing. The source gives each panel a defaultSize, a minSize and a maxSize, and a file can only ever show you one arrangement of the three. The rule worth keeping is that the floor should be wider than the widest thing the panel has to show at rest, or a drag can squeeze a label out of existence.