{% comment %} Foundation ships no open-state class for Reveal. Both `.reveal` and
   `.reveal-overlay` are `display: none` in the stylesheet, and the jQuery
   plugin opens them by writing an inline `display` — there is no `.is-active`
   to bind. `x-show` cannot stand in either: it *removes* the inline property
   to show, which falls straight back to the rule that hid it. So the state
   binding is `:style`, and the inner `.reveal` carries the static
   `display: block` the plugin would otherwise have left on it.

   The overlay is the root because `.reveal` is `position: relative; top: 100px`
   — it is only centred and scrollable because the fixed, full-screen overlay
   is its container. The plugin injects that wrapper at runtime; here it is
just markup. {% endcomment %}
<div
  id="{{ id }}"
  class="reveal-overlay {{ class }}"
  role="dialog"
  aria-modal="true"
  {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label|default:'Dialog' }}"{% endif %}
  x-data="cfModal"
  x-init="initModal()"
  :style="open ? 'display: block' : 'display: none'"
  @click.self="close()"
>
  <div class="reveal" style="display: block">
    <button
      type="button"
      class="close-button"
      aria-label="close"
      @click="close()"
    >
      <span aria-hidden="true">&times;</span>
    </button>
    {% if header %}<h2 id="{{ id }}-title">{{ header }}</h2>{% endif %}
    <div>{{ slot }}</div>
    {% if footer %}
      <div class="text-right">{{ footer }}</div>
    {% endif %}
  </div>
</div>