Implement x-model for <dialog> and <details> elements

[loilo]

We've had x-model in various input elements forever, but in recent years, there have been new elements carrying state as well.
<dialog> and <details> are prime examples. They have methods to toggle them and emit the toggle event when their state was changed through user interaction.

Dialog Basic Example

Before:

<div x-data="{ visible: false }" x-effect="visible ? $refs.dialog.show() : $refs.dialog.close()">
	<button @click="visible = !visible">Toggle dialog</button>
	
	<dialog x-ref="dialog" @toggle="visible = $event.newState === 'open'">
		I'm a dialog!
	</dialog>
</div>

After:

<div x-data="{ visible: false }">
	<button @click="visible = !visible">Toggle dialog</button>
	
	<dialog x-model="visible">
		I'm a dialog!
	</dialog>
</div>

Dialog Example with 'modal' modifier

Before:

<div x-data="{ visible: false }" x-effect="visible ? $refs.dialog.showModal() : $refs.dialog.close()">
	<button @click="visible = true">Show dialog</button>
	
	<dialog x-ref="dialog" @toggle="visible = $event.newState === 'open'">
		I'm a dialog!

		<button @click="visible = false">Close dialog</button>
	</dialog>
</div>

After:

<div x-data="{ visible: false }">
	<button @click="visible = !visible">Toggle dialog</button>
	
	<dialog x-model.modal="visible">
		I'm a dialog!

		<button @click="visible = false">Close dialog</button>
	</dialog>
</div>

Details Example

Before:

<div x-data="{ visible: false }" x-effect="$refs.details.open = visible">
	<button @click="visible = !visible">Toggle details</button>
	
	<details x-ref="details" @toggle="visible = $event.newState === 'open'">
		<summary>Some blind text</summary>

		<p>Eu commodo incididunt laborum. Incididunt laborum, sit proident laboris laborum fugiat. Proident laboris laborum fugiat consequat duis laborum. Laborum fugiat consequat duis laborum sint. Consequat duis laborum, sint.</p>
	</details>
</div>

After:

<div x-data="{ visible: false }">
	<button @click="visible = !visible">Toggle details</button>
	
	<details x-model="visible">
		<summary>Some blind text</summary>

		<p>Eu commodo incididunt laborum. Incididunt laborum, sit proident laboris laborum fugiat. Proident laboris laborum fugiat consequat duis laborum. Laborum fugiat consequat duis laborum sint. Consequat duis laborum, sint.</p>
	</details>
</div>

It's not a world-bending change, but it's a nice improvement in developer ergonomics which should be implementable with a relatively low amount of code.

What do you think?