ui/components/base/Modal.yaml

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

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.

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

methods:
  show: Show the Bootstrap modal.
  hide: Hide the Bootstrap modal.

events:
  change:
    detail: false when the modal is hidden.

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