npm package: @htmlbricks/hb-dialog
Description: Bulma modal (`modal` + `modal-card`) controlled by string `show` (`yes`/`no`): fade/fly transitions, optional backdrop click to close, Escape when `keyboard` is enabled, and `document.body` scroll lock while open. Slots replace title, body, footer, and bu
Latest version: 0.71.18

## `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: boolean }`

### 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

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