Dialog

Centered modal overlay with scrim, header/body/footer slots, and optional footer actions via .actions array.

HTML tag: c-e026f5ae83afb49438fec45f75b8fedf2

When to use

modal confirmation or form in center overlay
blocking alert or edit dialog
not for side panels (use ab-drawer)

Props

Prop	Type	Default
`open`	Boolean	`false`
`type`	String	`basic`
`title`	String
`show_close`	Boolean	`true`
`resizable`	Boolean	`false`
`actions`	Array	“
`is_maximized`	Boolean	`false`
`close_on_esc`	Boolean	`true`
`close_on_scrim`	Boolean	`true`
`aria_label`	String
`aria_labelledby`	String
`aria_describedby`	String
`width_sm`	String	`280px`
`width_md`	String	`560px`
`width_lg`	String	`720px`
`max_height`	String	`80vh`
`panel_radius`	String	`var(--ab-radius-lg)`
`panel_bg`	String	`var(--ab-color-surface-base)`
`panel_fg`	String	`var(--ab-color-text-primary)`
`panel_border`	String	`none`
`panel_shadow`	String	`var(--ab-shadow-3)`
`transition_duration`	String	`var(--ab-motion-duration-3)`
`transition_ease_in`	String	`var(--ab-motion-ease-in)`
`transition_ease_out`	String	`var(--ab-motion-ease-out)`
`scrim_color`	String	`rgba(0,0,0,0.35)`
`scrim_blur`	String	`0px`
`scrim_transition_duration`	String	`var(--ab-motion-duration-3)`
`z_index`	Number	`10010`
`selected_action_id`	String
`content`	String
`panel_top`	String	`20%`
`panel_transform`	String	`translate(-50%, 0)`

Rules

Control with .open or methods show/hide/toggle.
type: basic | alert | fullscreen (use basic, not standard).
Content in default slot; footer via .actions array (ab-actions) or footer slot.
All events use oneDB fireEvent shape: read handler payload as e.detail.value (never e.detail directly).
ab-dialog:action detail is e.detail.value with { id, role, meta } — use e.detail.value.id to branch on custom action ids.
Only actions with role confirm/cancel (or id confirm/cancel) auto-close via confirm()/cancel(); custom ids (run, apply, close, etc.) do NOT auto-close — keep .open true in the parent handler.
close_on_esc and close_on_scrim control dismiss; set both false while async work is in progress.
Sync parent state on @ab-dialog:hide (sets open=false internally).

Events

Event	Detail
`ab-dialog:show`
`ab-dialog:hide`
`ab-dialog:confirm`	value: [object Object]
`ab-dialog:cancel`	value: [object Object]
`ab-dialog:action`	value: [object Object]

Methods

Signature	Description
`show()`
`hide()`
`toggle()`
`confirm()`
`cancel()`
`focus_first()`
`maximize_panel()`
`restore_panel_size()`

What to avoid

Do not use for navigation shell (ab-page-template or ab-drawer permanent). Do not nest multiple open dialogs without clear UX. Do not read e.detail.actionId or e.detail.id — always e.detail.value.id. Do not assume custom footer actions close the dialog.

Example

<c-e026f5ae83afb49438fec45f75b8fedf2 .open=${open} .title=${'Confirm'} .type=${'alert'} .actions=${actions} @ab-dialog:action=${(e) => { const id = e.detail?.value?.id; if (id === 'confirm') onOk(); }} @ab-dialog:hide=${() => open = false}>...</c-e026f5ae83afb49438fec45f75b8fedf2>