{# Confirmation dialog — Alpine dzConfirm component with native <dialog> #}
{# Contract: ~/.claude/skills/ux-architect/components/confirm-dialog.md (UX-014) #}
{# v0.62 CSS refactor: inline Tailwind → .dz-confirm-* family + .dz-button
   primitives (components/fragments.css, components/button.css). #}
{#                                                                            #}
{# Usage: include once per page. Trigger from any button with:                #}
{#   <button @click="$dispatch('dz-confirm', {                                #}
{#     message: 'Delete this item?',                                          #}
{#     action: '/api/tasks/1',                                                #}
{#     method: 'delete',                                                      #}
{#     target: 'closest tr',                                                  #}
{#     swap: 'outerHTML swap:300ms',                                          #}
{#     triggerEl: $el                                                         #}
{#   })">Delete</button>                                                       #}
<div x-data="dzConfirm">
  <dialog x-ref="dialog" class="dz-confirm-dialog">
    <div class="dz-confirm-panel">
      <h3 class="dz-confirm-title">Confirm Action</h3>
      <p class="dz-confirm-message" x-text="message"></p>
      <div class="dz-confirm-actions">
        <button type="button" class="dz-button dz-button-ghost" @click="cancel()">
          Cancel
        </button>
        <button type="button"
                class="dz-button dz-button-destructive"
                :class="loading && 'is-loading'"
                :disabled="loading"
                @click="confirm()">
          <svg x-show="loading" class="dz-confirm-spinner" fill="none" viewBox="0 0 24 24" aria-hidden="true">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
          </svg>
          <span>Confirm</span>
        </button>
      </div>
    </div>
    {# Backdrop click dismisses via native form method="dialog" #}
    <form method="dialog" class="dz-modal-backdrop-form">
      <button aria-label="Close" class="dz-modal-backdrop-button">close</button>
    </form>
  </dialog>
</div>