cnc-dialog
Overview
Spec
Examples
Playground
Styling
An accessible top-layer dialog with non-blocking and modal modes, responsive sizes, managed focus, configurable dismissal, and a cancelable close lifecycle.
Properties
| API | Purpose |
|---|---|
open |
Controls visibility directly or through $open. |
modal |
false
by default. Enables the native backdrop, document scroll lock, focus containment, and
modal stacking.
|
backdrop |
dark
by default; supports colorless blur and none.
|
anchor |
Selector or element used as the modal-owned opener. |
trigger |
click
by default; also supports touch, mouseenter/hover, and manual.
|
label |
Accessible dialog name and visible title. |
size |
sm, md, lg, or full.
|
initialFocus |
Selector focused after opening. |
closeOnEscape / closeOnBackdrop |
Enable or disable implicit dismissal. |
animation |
smooth by default; use none to disable. |
data-modal-close |
Declarative action whose value becomes the close reason. |