Block using state in event handlers when state is set via binding on same element as event handler

[benglewis]

Motivation

In some cases, using bind:value or bind:checked or similar bindings of state in Svelte 5.0 alongside event handlers that access the same state can result in unexpected behavior (e.g. seeing old values in the event handler and not the latest from the binding).
This rule should help prevent code like this.

Description

The rule should detect any state that is bound to an element state, e.g. bind:this, bind:checked, bind:value, etc. and also accessed inside an event listening onchange, onkeyup, etc. explaining that such a value may not be up to date.

Examples

<script>
  let state = ''
</script>

<!-- ✓ GOOD -->
<input onchange={(e) => { state = e.target.value; console.log(state) }} ></input>

<!-- ✗ BAD -->
<input bind:value={state} onchange={(e) => { console.log(state) }} ></input>

Additional comments

I am happy to consider implementing this rule myself.