ResizeHandle

modelValue is the pixel size the handle is currently resizing, bound two-way with v-model. The handle owns none of it — it reads the number, adds the pointer's travel, and hands the new one back, so the width below is your state and the panel is sized off it however you like.

direction is the axis the handle drags along, and it's the only thing that decides the handle's own shape: horizontal is the vertical bar between two columns, vertical the horizontal one between two rows. It also picks which arrow keys move the value.

min is how small dragging can make the panel. The handle stops emitting there rather than clamping after the fact, so the panel never flickers past its floor — and the pointer travel beyond it is still reported through overdrag if you want to act on it.

max is the other bound. It defaults to Infinity, which is fine for a panel whose container already limits it — but a handle with no ceiling will happily drag a panel past the edge of its parent, so set one whenever the layout doesn't.

step is the keyboard's grain. Tab to the handle below — it's a focusable separator, not decoration — and the arrow keys move the panel by this much, shift-arrow by ten times it, with Home and End jumping to the bounds.

invert flips which way is bigger. A panel anchored to the right edge grows as the pointer moves left, which is the opposite of what the raw pointer delta says — set this and the handle does that subtraction for you rather than you mirroring the math at the call site.

variant is what's drawn inside the hit area. The default grip is a short pill that's always on show, so the seam reads as draggable before anyone hovers it. line is a full-length rule that only appears on hover, for a seam the panels already imply; hidden draws nothing.

size widens the hit area without touching the indicator inside it. It's a pointer-accuracy setting rather than a visual one: the same 2px line, with 8, 12 or 16 pixels of room around it to grab.

resetValue is the width a double-click puts back. Set it to whatever the panel opened at and the reader always has a way out of a layout they've dragged into a corner — leave it unset and double-clicking does nothing at all.

label is the accessible name on the separator, which is all a screen reader has to go on — the handle has no text of its own. The default, "Resize", is enough on a page with one; name them for what they move as soon as there are two.

disabled freezes the panel at its current size — the handle stops responding to the pointer and the keyboard, and drops out of the tab order.

The handle never emits a value outside its bounds, so a panel that should *do* something when dragged too far can't learn it from update:modelValue. overdrag reports that leftover travel in pixels — negative past min, positive past max — and the parent decides what it means. This is exactly how Sidebar collapses.