Dialog
stable 3.8 kB<hk-dialog>Built on the native <dialog> element, so focus trapping, Escape, inertness of the page behind and the top layer all come from the platform rather than a JavaScript reimplementation.
#modal#popup
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| closeOnBackdrop | boolean | true | Clicking the backdrop dismisses. |
| size | 'sm' | 'md' | 'lg' | 'md' | Panel width. |
Outputs
closedEventEmitter<string>Emits the return value, or "dismissed".
Methods
open()() => voidOpens as a modal and moves focus inside.
close(value?)(value?: string) => voidCloses and returns the value through (closed).
Keyboard
- Escape Closes — handled by the platform
- Tab Cycles within the dialog only
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-dialog-bg | #ffffff | Panel background. |
| --hk-dialog-backdrop | rgb(15 23 42 / 0.5) | Backdrop wash. |
| --hk-dialog-width | 22rem | Default panel width. |
Accessibility
- showModal() gives real focus trapping and marks the rest of the page inert; no focus-loop code to get wrong.
- Focus returns to the invoking element on close.
- The panel is labelled by its title element via aria-labelledby.