A panel flush against an edge, with the page still visible beside it. Four positions built out of child order and a justify, and nothing rotated.
Two components, seven variants
Sheet - Position: right · left · top · bottom - 580 × 867, panel 388 wide or 567 tall
Sheet / Close Icon - State: Default · Hover · Focus - 16 × 16, base.muted-foreground then base.foreground then a ring
Using the Sheet
How are the four positions built?
Out of two siblings in one flex box. The overlay and the panel sit side by side; right and left swap which comes first and flip the justify, and top and bottom do the same with the direction set to column. Nothing is rotated and no child is placed by hand, which is why the four cannot drift apart.
Why is the panel square-cornered?
Because it is flush against an edge. Radius is zero on all four positions - rounding a panel that touches the side of the screen leaves two curves floating against a straight line. That is the visible difference between a Sheet and a Dialog, which is centred and rounded on every corner.
Why does the footer stack its buttons?
Because the panel is 388 wide with 24 of padding on each side, leaving 340. Two buttons in a row would be 166 each before the gap, which is narrower than most labels want. The footer is a column with an 8 gap and both buttons at full width, and both are real Button instances rather than drawn rectangles.
What is the content block?
A base.muted rectangle on radius.md holding the words Your content goes here, and it is the only part of the panel that grows. Header and footer hug their contents; the block takes whatever height is left. Replace it with your own and the panel keeps working at any height.
Does the close have a hide option?
In the source, yes - showCloseButton on SheetContent removes it. There is no variant for that, so hide the layer on your instance. The close itself is 16 by 16 sitting absolutely 24 in from the panel's top right, outside the column layout, so it can never push the header down.