Sheet
@sushindustries/uiThe dialog docked to an edge, for content tall enough that centring it would mean scrolling a floating box.
Variants
side writes data-side on the <dialog>, which the stylesheet reads to
decide which edge it docks to and which direction it slides from:
<Sheet side="left" open={open} onClose={onClose} title="Filters">.sheet[data-side="left"] {
inset-inline: 0 auto;
}When not to use it
For content short enough to centre on screen - that's DialogDialogA native dialog driven by props: top layer, focus trap and Escape from the element, click-outside from here.@sushindustries/ui · layout, the same native-element recipe without the docked geometry. SheetSheetThe dialog docked to an edge, for content tall enough that centring it would mean scrolling a floating box.@sushindustries/ui · layout earns its edge position when the content is a list or a form tall enough that centring it would mean scrolling a floating box in the middle of the page.