<baht-modal>

Controlled dialog: you flip open, it asks to close via baht-close.

Open / close

Open modal

<baht-button id="open-btn">Open modal</baht-button>
<baht-modal id="my-modal" heading="Delete workflow?" description="Steps and run history will be removed.">
  <p>This cannot be undone.</p>
  <div class="baht-modal-footer">
    <baht-button variant="secondary" id="cancel-btn">Cancel</baht-button>
    <baht-button variant="danger">Delete</baht-button>
  </div>
</baht-modal>

<script>
  const modal = document.getElementById('my-modal');
  document.getElementById('open-btn').addEventListener('click', () => (modal.open = true));
  document.getElementById('cancel-btn').addEventListener('click', () => (modal.open = false));
  modal.addEventListener('baht-close', () => (modal.open = false));
</script>

Props

Name	Type	Default	Description
`open`	`boolean`	`false`	Host controls visibility
`heading`	`string`	`''`	Dialog title
`description`	`string`	`''`	Muted line under the title; wired to aria-describedby
`show-close`	`boolean`	`true`	Show × button
`close-on-scrim`	`boolean`	`true`	Scrim click requests close

Events

Event	detail	Description
`name`	CustomEvent
`baht-close`	`{ reason: 'escape'\|'scrim'\|'button' }`	User wants it closed. Host sets open=false

Slots

Slot	Description
`(default)`	Dialog body