feat: IsFocusWithin

[huntabyte]

Tracks whether focus is within a given target element.

<script lang="ts">
	import { IsFocusWithin } from 'runed'

	let formElement = $state<HTMLElement | undefined>()
	const focusWithinForm = new IsFocusWithin(() => formElement)
</script>

<span>Focus is within: {focusWithinForm.current}</span>
<form bind:this={formElement}>
	<input />
</form>

I also added testing library so we can test components.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5b6b2bb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
runed	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
runed	✅ Ready (View Log)	Visit Preview	5b6b2bb

[abdel-17]

I feel like this might encourage relying on JS for styling instead of just the :focus-within selector.

[huntabyte]

I feel like this might encourage relying on JS for styling instead of just the :focus-within selector.

The same could be said for the activeElement instead of :focus. The intentions aren't for it to be used for styling but rather side effects when focus is/isn't within a specific element which is useful.

If someone really wants to instantiate a class, bind to the reference of an element, and conditionally style something vs using the CSS selector then they have problems we're incapable of solving.

[huntabyte]

Also, there is a use case for styling where you want to style something that isn't the form element differently when the form element has focus within.

[abdel-17]

Also, there is a use case for styling where you want to style something that isn't the form element differently when the form element has focus within.

You can still use CSS for that.

Style a child
form:focus-within .some-selector

Style a sibling
form:focus-within + .some-selector

Style a parent
.some-selector:has(form:focus-within)

But yeah I get the other use case.