component PasskeyButton {
  props {
    mode = "authenticate"
    label = "Continue with a passkey"
    registerLabel = "Add a passkey"
    identifier = ""
    rpId = ""
    rpName = "WRNexusJS"
    passkeyName = "Passkey"
    optionsEndpoint = ""
    verifyEndpoint = ""
    redirect = ""
    mfaHref = "/two-factor"
    conditional = false
    fullWidth = false
    loadingMessage = "Waiting for your passkey…"
    successMessage = "Passkey verified."
    color = "primary"
    size = "md"
    class = ""
    @event passkeyRegistered = function
    @event passkeyAuthenticated = function
    @event error = function
  }
  view {
    <div {...attrs} data-wrnexus-runtime="auth" data-auth-passkey='{mode}' data-identifier='{identifier}' data-rp-id='{rpId}' data-rp-name='{rpName}' data-passkey-name='{passkeyName}' data-options-endpoint='{optionsEndpoint}' data-verify-endpoint='{verifyEndpoint}' data-redirect='{redirect}' data-mfa-href='{mfaHref}' data-conditional='{conditional}' data-loading-message='{loadingMessage}' data-success-message='{successMessage}' data-auth-state="idle" aria-busy="false" class='space-y-2 {class}'>
      <button type="button" class='inline-flex h-11 items-center justify-center gap-2 rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] px-4 text-sm font-semibold text-[var(--wire-color-text)] hover:bg-[var(--wire-color-surface-2)] disabled:cursor-wait disabled:opacity-60 {fullWidth ? "w-full" : ""}'>
        <span aria-hidden="true" class="icon-[lucide--key-round] size-4"></span>
        {mode == "register" ? registerLabel : label}
      </button>
      <p data-auth-status hidden role="status" class="m-0 text-xs text-[var(--wire-color-muted)]"></p>
    </div>
  }
}