Alert dialog

<button  class="ui-button"  type="button"  data-variant="destructive"  command="show-modal"  commandfor="alert-dialog-example-1">  Delete account</button><dialog  id="alert-dialog-example-1"  class="ui-dialog ui-alert-dialog"  role="alertdialog"  aria-labelledby="alert-dialog-example-1-title"  aria-describedby="alert-dialog-example-1-body"  closedby="none">  <div data-slot="dialog-content">    <header class="flex-row items-center gap-xs" data-slot="dialog-header">      <svg class="size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">        <rect width="256" height="256" fill="none" />        <path          fill="currentColor"          d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM120,104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,88a12,12,0,1,1,12-12A12,12,0,0,1,128,192Z"        />      </svg>      <h2 class="text-lg font-heading font-strong" id="alert-dialog-example-1-title">        Are you absolutely sure?      </h2>    </header>    <div class="italic" data-slot="dialog-body" id="alert-dialog-example-1-body">      <p>        Alert dialogs must be closed by clicking the Cancel or Continue buttons. Changing        <code>closedby="none"</code> to <code>closedby="any"</code> allows the user to close the        dialog by clicking outside the dialog or pressing the Escape key.      </p>    </div>  </div>  <footer data-slot="dialog-footer">    <button class="ui-button" type="button" commandfor="alert-dialog-example-1" command="close">      Cancel    </button>    <button      class="ui-button"      data-variant="destructive"      type="button"      commandfor="alert-dialog-example-1"      command="close"    >      Delete account    </button>  </footer></dialog>

/** * alert-dialog.css: Alert dialog (.ui-alert-dialog on .ui-dialog <dialog>) * * @layer      variables, components * @requires   layers.css, _variables.css, dialog.css * @uses       closedby="none": the alert contract: only an explicit choice closes it * @uses       command="show-modal" / command="close": Invoker Commands (polyfill: invokers) * @tokens     --ui-alert-dialog-* (@layer variables) * @see        dialog.css: owns the slots, motion, and backdrop this composes */@layer variables {  :root {    /* Narrower than the base dialog: an alert is a single question, not a form */    --ui-alert-dialog-width: min(45ch, 100% - var(--gap-md) * 2);    --ui-alert-dialog-accent: var(--destructive);    --ui-alert-dialog-shadow: var(--ui-dialog-shadow);  }}@layer zazz.components {  /* ===========================================================================  ALERT DIALOG: a dialog that requires an explicit response  - Composes .ui-dialog (markup carries both classes) and keeps the dialog-*    slots; this file only retunes dialog tokens and colors the header accent.  - The contract lives in the markup: role="alertdialog", closedby="none",    no dialog-close button: Cancel/Confirm are the only ways out.  =========================================================================== */  .ui-alert-dialog {    --ui-dialog-width: var(--ui-alert-dialog-width);    --ui-dialog-shadow: var(--ui-alert-dialog-shadow);  }  .ui-alert-dialog [data-slot~="dialog-header"] {    color: var(--ui-alert-dialog-accent);  }}