Drawer
stable 3 kB<hk-drawer>An edge sheet from any side. The panel slides, the scrim fades, and on touch it can be swiped away.
#sheet#panel
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Visibility. Two-way bindable. |
| side | 'left' | 'right' | 'top' | 'bottom' | 'right' | Which edge it enters from. |
| size | string | '18rem' | Width for side drawers, height for top and bottom. |
| swipeToClose | boolean | true | Allows a touch drag to dismiss. |
Outputs
openChangeEventEmitter<boolean>Emits on open and close.
Keyboard
- Escape Closes
- Tab Stays within the panel while open
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-drawer-bg | #ffffff | Panel background. |
| --hk-drawer-scrim | rgb(15 23 42 / 0.4) | Backdrop wash. |
| --hk-drawer-ease | cubic-bezier(0.32, 0.72, 0, 1) | Slide easing. |
Accessibility
- role="dialog" with aria-modal, and focus moved into the panel on open.
- Focus returns to the trigger on close.
- The scrim is aria-hidden — the close affordance is a real labelled button.