I have unsuccesfully tried to create a tri-state checkbox (with an indeterminate state)

Desired behavior:

A controlled checkbox (two-way binding) that cycles between (unchecked, checked, indeterminate)

What I have tried:
1. $effect - https://svelte.dev/playground/c1bc3f8d2f3440e3994bed06ef8b7c64?version=latest
2. $derive - https://svelte.dev/playground/8dd25d5e309441f08b58c359592e3f12?version=latest
3. manually assigning DOM properties - https://svelte.dev/playground/3142b206150d4d7db8d103341100aba5?version=latest

References:
- https://svelte.dev/docs/svelte/$derived#Overriding-derived-values