<button type="button" command="toggle-popover" commandfor="example" data-color="red">Discard Draft</button>

<a-alert-dialog id="example" popover="manual">
	<h2 slot="label">Discard draft?</h2>
	<p slot="description">You can't undo this action.</p>
	<button-group>
		<button type="button" popovertarget="example" popovertargetaction="toggle">Cancel</button>
		<button type="button" popovertarget="example" popovertargetaction="toggle" data-color="red">Discard</button>
	</button-group>
</a-alert-dialog>

<script>
import { AlertDialogElement } from "@jsxtools/aui/elements/alert-dialog"

customElements.define("a-alert-dialog", AlertDialogElement)
</script>