Dialog

Native dialog for focused interactions that temporarily require user attention.

Usage

Dialog follows the native HTML <dialog> model. Use it for focused decisions or tasks that temporarily block interaction with the page.

Behavior

• Opening uses native showModal().
• A dismissible Dialog closes through the explicit close control or Escape.
• Backdrop clicks do not dismiss the Dialog.
• Confirm emits uif-dialog-confirm and does not force close.
• Cancel emits uif-dialog-cancel and closes a dismissible Dialog.
• Closing emits uif-dialog-close.
• Browser Back/history behavior belongs to the embedding application.
• Dialog does not define Alert, S/M/L, or density variants.

Accessibility

• Every Dialog requires an accessible name through its visible title.
• A concise description is associated with aria-describedby when provided.
• Native modal behavior provides top-layer presentation, background inertness, and focus containment.
• Focus returns to the invoking control when it still exists and can receive focus.
• If the invoker is removed or disabled, the consumer decides the appropriate fallback focus target.

Composition

Alert is a separate reusable component. Place Alert inside Dialog when the flow needs warning, error, or status messaging; do not convert Dialog itself into an alert variant.