Add data-* state to button component

[buhodev]

Add data-focus, data-active and data-hover to the button component.

Currently I am doing it in userland easily but I believe this should be something that bits-ui should handle internally:

<script lang="ts">
	let isHover = $state(false);
	let isFocus = $state(false);
	let isActive = $state(false);
	let isTouch = $state(false);
	let isKeyboardFocus = $state(false);
</script>

<Button.Root
	data-hover={isHover && !isTouch ? '' : undefined}
	data-focus={isFocus && !isTouch ? '' : undefined}
	data-active={isActive ? '' : undefined}
	onmouseenter={() => (isHover = true)}
	onmouseleave={() => {
		if (!isTouch) isHover = false;
		if (!isTouch && isActive) isActive = false;
	}}
	onfocus={() => {
		if (isKeyboardFocus && !isTouch) isFocus = true;
	}
	onblur={() => !isTouch && (isFocus = false)}
	onmousedown={() => {
		if (!isTouch) {
			isKeyboardFocus = false;
			isActive = true;
		}
	}}
	onmouseup={() => !isTouch && (isActive = false)}
	onkeydown={(event: KeyboardEvent) => event.key === 'Tab' && (isKeyboardFocus = true)}
	onkeyup={() => (isKeyboardFocus = false)}
	ontouchstart={() => {
		isTouch = true;
		isActive = true;
	}}
	ontouchend={() => {
		isTouch = false;
		isActive = false;
	}}
>
	{@render children?.()}
</Button.Root>

Reason for this is to allow the user to style the different button states with data classes, e.g. data-focus:outline will be applied when the button is focused with the keyboard and not by double clicking on it.