Rename data-from -> data-closed and data-exit -> data-leave

[RobinMalfait]

This PR updates the newly exposed data attributes introduced in #3273

After playing with them in real projects, we improved the naming for a few reasons:

1. If you are describing the "from" state and if it's different for enter and exit then you would have to type:

   <div
     class="data-[enter]:data-[from]:-translate-x-full data-[exit]:data-[from]:-translate-x-full"
   ></div>

   And data-[exit]:data-[from] reads like you are transitioning from a certain state, but you are transitioning to that state.

2. If you use leave instead of exit then it will be consistent with the properties that we already have on the Transition component. Additionally, the length is the same now so they align better.

   <div
     className={clsx(
       "data-[enter]:data-[closed]:-transition-x-full",
       "data-[exit]:data-[closed]:transition-x-full",
     )}
   />

   vs

   <div
     className={clsx(
       "data-[enter]:data-[closed]:-transition-x-full",
       "data-[leave]:data-[closed]:transition-x-full",
     )}
   />

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 12, 2024 11:50am
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 12, 2024 11:50am