hb-dialog — dialog

Category: overlays | Tags: overlays, modal

What it does

Bulma-styled modal controlled by string show (yes/no): optional backdrop click to close, Escape when keyboard is enabled, and modal-open on document.body. Slots replace title, body, footer, and button labels; default footer emits modalConfirm with { id, confirm } and toggles visibility. Also emits modalShow when opened or closed.

Custom element

hb-dialog

Attributes / props (snake_case)

| Property | Type | Notes | | --- | --- | --- | | id | string (optional) | Element identifier (included in events). | | style | string (optional) | Inline style string. | | show | union (optional) | "yes" | "no" — visibility. | | confirm_btn_class | string (optional) | Bulma button color name for confirm (default primary → is-primary). | | title | string (optional) | Default title text if slot unused. | | backdrop | boolean (optional) | Show backdrop. | | ignoreBackdrop | boolean (optional) | Ignore backdrop interactions when true. | | keyboard | boolean (optional) | Escape to close. | | describedby | string (optional) | ARIA describedby id. | | labelledby | string (optional) | ARIA labelledby id. | | content | string (optional) | Default body string if slot unused. | | closelabel | string (optional) | Close button label. | | confirmlabel | string (optional) | Confirm button label. | | disable_confirm | boolean (optional) | Disable confirm button. | | close_btn_class | string (optional) | Bulma button color name for close (default secondary → is-light / mapped modifier). | | hide_close | boolean (optional) | Hide close control. | | hide_confirm | boolean (optional) | Hide confirm control. |

CSS vars: Bulma --bulma-*, --hb-modal-max-width; the host sets compact defaults for --bulma-modal-card-head-padding, --bulma-modal-card-body-padding, --bulma-modal-card-title-size, --bulma-modal-card-title-line-height, and --bulma-modal-card-spacing (override on the element or an ancestor to taste). Part: modal-dialog. Slots: header, modal-footer, body-content, footer, close-button-label, confirm-button-label.

Events (CustomEvent names)

• modalConfirm — { id: string; confirm: boolean }
• modalShow — { id: string; show: true }

Usage notes

• Modal behavior (body scroll lock, backdrop) matches typical overlay patterns.
• Optional icons depend on implementation; load Bootstrap Icons if you add bi-* markup.
• Teleports/focus live in shadow DOM; test accessibility with real browsers.
• No i18n array in docs.ts.

Minimal HTML example

<hb-dialog
  id="confirm-delete"
  show="yes"
  title="Delete item?"
  content="This cannot be undone."
  confirmlabel="Delete"
  closelabel="Cancel"
  keyboard="true"
></hb-dialog>