<!-- Semmet Angular: Dialog (Modal) — https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> triggerLabel="Open details" title="Details" description="Review the current details." />
-->
<button type="button" (click)="open($event)">{{ triggerLabel() }}</button>

@if (isOpen()) {
  <div class="backdrop" (click)="close()"></div>
  <div
    #dialog
    role="dialog"
    aria-modal="true"
    [attr.aria-labelledby]="instanceId + '-title'"
    tabindex="-1"
    (keydown)="handleDialogKeydown($event)"
  >
    <h2 [id]="instanceId + '-title'">{{ title() }}</h2>
    <div>{{ description() }}</div>
    <button type="button" (click)="close()">{{ closeLabel() }}</button>
  </div>
}
