feat: add a new switch component

[JerryWu1234]

What is it?

• Feature / enhancement
• Bug
• Docs / tests
• Other

Why is it needed?

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have ran pnpm change and documented my changes
• I have add necessary docs (if needed)
• Added new tests to cover the fix / functionality

[changeset-bot]

🦋 Changeset detected

Latest commit: a10ddbb

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

This PR includes changesets to release 2 packages

Name	Type
@qwik-ui/headless	Major
@qwik-ui/styled	Major

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

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/qwikifiers/qwik-ui@960

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/headless@960

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/styled@960

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/utils@960

commit: a10ddbb

[JerryWu1234]

[thejackshelton]

Hey Jerry! Just went through the implementation. We're getting close!

A couple of areas of improvement:

• Clicking outside the thumb (but still on the switch itself), does not toggle the switch
• When hitting the space key, it will turn on then back off (rather than on like the enter key)
• Certain accessibility features are missing (https://www.w3.org/WAI/ARIA/apg/patterns/switch/)
• Every example seems to use a signal bind (this is usually only when the user wants to programmatically change something)

https://kobalte.dev/docs/core/components/switch/

I think this is a good source of inspiration to look at. Along with a set of resources I created here:
https://docs.google.com/document/d/18eA8WfrYtdkrRpavyoG8EmT_uzPtzt24ifOOTKk5In8/edit?tab=t.0

For example, I think it makes a lot of sense to have a new component tied to a piece of markup for the thumb, rather than having it be on a pseudo element, since that would follow the principles of composability. The idea that pieces of markup and components can blend in with each other in a straightforward way.

Atomic Design is a good read if you'd like to look further into it.

---

I think TDD / adding some tests would help a lot to prevent regressions and keep things robust. We need some tests before we can put the switch component in the beta stage.

[JerryWu1234]

Thank you for reviewing, I will fix it soon