Alert dialog

<button
  data-ui="button"
  type="button"
  data-button-variant="destructive"
  command="show-modal"
  commandfor="alert-dialog-example-1"
>
  Delete account
</button>
<dialog
  id="alert-dialog-example-1"
  data-ui="dialog alert-dialog"
  role="alertdialog"
  aria-labelledby="alert-dialog-example-1-title"
  aria-describedby="alert-dialog-example-1-body"
  closedby="none"
>
  <div data-dialog-slot="content">
    <header
      style="
        --display: flex;
        --items: center;
        --gap: 2;
      "
      data-dialog-slot="header"
    >
      <svg style="--size: 6" 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
        style="
          --font-size: var(--font-size-lg);
          --font-weight: strong;
          --font-family: var(--font-family-heading);
        "
        id="alert-dialog-example-1-title"
      >
        Are you absolutely sure?
      </h2>
    </header>
    <div style="--font-style: italic" data-dialog-slot="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-dialog-slot="footer">
    <button data-ui="button" type="button" commandfor="alert-dialog-example-1" command="close">
      Cancel
    </button>
    <button
      data-ui="button"
      data-button-variant="destructive"
      type="button"
      commandfor="alert-dialog-example-1"
      command="close"
    >
      Delete account
    </button>
  </footer>
</dialog>

/**
 * alert-dialog.css: Alert dialog ([data-ui~="alert-dialog"] on a [data-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; named after the utilities they back)
 * @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 */
    --ui-alert-dialog-w: min(45ch, 100% - var(--space-md) * 2);
    --ui-alert-dialog-accent: var(--color-destructive);
    --ui-alert-dialog-shadow: var(--ui-dialog-shadow);
  }
}

@layer ui.components {
  /* ===========================================================================
  ALERT DIALOG: a dialog that requires an explicit response
  - Composes the dialog (data-ui="dialog alert-dialog"); only retunes dialog hooks
    and colors the header accent.
  - The contract lives in the markup: role="alertdialog", closedby="none",
    no close slot.
  =========================================================================== */

  :where([data-ui~="alert-dialog"]) {
    --ui-dialog-w: var(--ui-alert-dialog-w);
    --ui-dialog-shadow: var(--ui-alert-dialog-shadow);
  }

  :where([data-ui~="alert-dialog"]) [data-dialog-slot~="header"] {
    color: var(--ui-alert-dialog-accent);
  }
}