Drawer — Loidolt Theme

import { Drawer } from '@loidolt/theme-svelte';

Example

Notes

--ldt-drawer-size is the measure across the anchored edge, always capped so the scrim stays reachable.
Same primitive as Dialog: focus is trapped, Escape closes, the page behind is inert.
triggerVariant/triggerSize pick the trigger button clothes; an explicit triggerClass wins wholesale.
The panel insets its content from the safe area on the three screen edges it touches.

Props

Generated from the component source, so it cannot drift from the implementation.

Drawer props
Prop	Type	Default	Notes
`children` required	`Snippet`	`—`
`title` required	`string`	`—`
`class`	`string`	`—`	`class` lands on the portaled Content element.
`closeLabel`	`string`	`'Close'`
`description`	`string`	`—`
`footer`	`Snippet`	`—`
`headingLevel`	`HeadingLevel`	`2`
`onOpenChange`	`(open: boolean) => void`	`—`
`open` bindable	`boolean`	`false`
`overlayClass`	`string`	`—`
`ref` bindable	`HTMLElement \| null`	`null`
`showClose`	`boolean`	`true`
`side`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'left'`	Edge the panel is anchored to. `left`/`right` size by width, `top`/`bottom` by height.
`trigger`	`Snippet`	`—`	Trigger contents, rendered inside a button styled with `triggerClass`.
`triggerChild`	`Snippet<[TriggerChildProps]>`	`—`	Full control of the trigger element — receives the props Bits needs on it.
`triggerClass`	`string`	`—`
`triggerSize`	`ControlSize`	`—`
`triggerVariant`	`ActionVariant`	`—`	Button variant for the default trigger. An explicit `triggerClass` wins wholesale.

Plus the attributes of Omit<DialogContentProps, 'children' | 'class' | 'child'>, forwarded to the root element.