Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

API reference

Headless dialog exposes a root controller plus structural directives for backdrop, panel, trigger, close controls, and accessible labeling. It owns the modal behavior, while you own the rendered shell.

Root directive

DirectiveSelectorKey APIPurpose
TngDialog[tngDialog]open, defaultOpen, dismissible, closeOnBackdropClick, closeOnEscape, restoreFocus, autoFocus, trapFocus, lockScroll, sizeOwns modal lifecycle, focus management, scroll locking, and close reason outputs.
TngDialog[tngDialog]openChange, closedEmits controlled open-state changes and close reasons for analytics or workflows.

Slot directives

DirectiveSelectorSlotPurpose
TngDialogBackdrop[tngDialogBackdrop]dialog-backdropOverlay surface, outside-dismiss target, and modal centering layer.
TngDialogPanel[tngDialogPanel]dialog-panelDialog container with role, size state, and ARIA wiring.
TngDialogTrigger[tngDialogTrigger]dialog-triggerOpens the owned dialog and participates in focus restoration.
TngDialogClose[tngDialogClose]dialog-closeCloses the owned dialog and can emit an explicit close reason.
TngDialogTitle[tngDialogTitle]dialog-titleRegisters the accessible dialog label when the panel is present.
TngDialogDescription[tngDialogDescription]dialog-descriptionRegisters the accessible description for screen reader context.
TngDialogActions[tngDialogActions]dialog-actionsStable styling hook for footer action rows.

Behavior and events

  • closed emits 'backdrop' | 'close-button' | 'escape' | 'programmatic'.
  • autoFocus lets owners prefer the panel, the first focusable, or no automatic focus change.
  • trapFocus and restoreFocus are enabled by default for modal-safe keyboard flow.
  • ariaLabel, ariaLabelledby, and ariaDescribedby support custom naming when title/description nodes are not used.
  • dismissible is the top-level guard for Escape and backdrop dismissal.