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[bot]]

🦋 Changeset detected

Latest commit: 5b6b2bbf916ec467c7dc330a57df74fc406a09d7

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[bot]]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

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

[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.