name: Modal
purpose: Present slotted content in a controllable Bootstrap modal.

attributes:
  static: Prevent Escape and backdrop dismissal in every state.
  guard-dirty: Track edits to form controls; Escape, backdrop clicks, and the header close button are blocked after edits. Explicit actions can call hide(true).
  width: CSS width for the modal dialog, for example `min(94vw, 1440px)`.
  max-width: CSS max-width for the modal dialog.
  body-height: CSS height for the modal body.
  body-min-height: CSS min-height for the modal body.

binding:
  behavior: Bind a boolean with $bind to show or hide the modal.

layout:
  behavior: Long body content scrolls inside the modal; the header and footer remain visible.

accessibility:
  focus: Hiding releases focus before the modal becomes aria-hidden, makes the hidden modal inert, and restores focus to the element that was active before opening when it remains available.

state:
  title: Default header title.
  type: Bootstrap contextual type. Default is primary.

methods:
  show: Show the Bootstrap modal.
  hide: Hide the Bootstrap modal. Pass true for an explicit confirmed or cancel action that may close guarded dirty content.

events:
  change:
    detail: false when the modal is hidden.
  dismissblocked:
    detail: Emitted when guard-dirty blocks an implicit dismissal.

slots:
  header: Replace the modal header.
  body: Replace the modal body.
  footer: Replace the modal footer.

examples:
  basic: |
    <Modal id="editModal" title="Edit user">
      <div slot="body"><input id="nameInput"></div>
      <div slot="footer"><button $onclick="editModal.hide()">Close</button></div>
    </Modal>
    <button $onclick="editModal.show()">Edit</button>

tests:
  - Modal.test.html