<button class="toggle-container">
    <div class="toggle-handle"></div>
</button>

<script type="module">
    // Note: animateView is currently in alpha and importable via the "motion-dom" package
    import { press, animateView } from "https://cdn.jsdelivr.net/npm/motion-dom@12.7.3/+esm"
    import { spring } from "https://cdn.jsdelivr.net/npm/motion@12.7.3/+esm"

    let isOn = false

    press(".toggle-container", (element) => {
        animateView(
            () => {
                isOn = !isOn

                if (isOn) {
                    element.classList.add("on")
                } else {
                    element.classList.remove("on")
                }
            },
            { type: spring, bounce: 0.3, visualDuration: 0.3 }
        )
    })
</script>

<style>
    .toggle-container {
        width: 100px;
        height: 50px;
        background-color: var(--hue-3-transparent);
        border-radius: 50px;
        cursor: pointer;
        display: flex;
        padding: 10px;
        border: none;
        justify-content: flex-start;
    }

    .toggle-container.on {
        justify-content: flex-end;
    }

    .toggle-handle {
        width: 50px;
        height: 50px;
        background-color: #9911ff;
        border-radius: 50%;
        view-transition-name: toggle-handle;
    }
</style>