Use scale instead of width and height for the knob of the ToggleSwitch

[spidunno]

Before you start...

• [X] Have you updated your dependencies? You might be using an old version of the library.
• [X] Have you checked if someone already requested this feature? If they have, post a comment with your use case instead.

Description

Currently, the knob in the ToggleSwitch component, when hovered, changes its size by setting inline-size and block-size directly. This results in a slightly choppy looking animation (as CSS is snapping the size to individual pixels), and could also cause performance issues due to causing repaints. To fix this, you can use either scale: ... or transform: scale(...) to change the size smoothly and without directly setting the width and height.

Alternative solutions

No response

Relevant Assets

LEFT: Current Implementation. RIGHT: My implementation using scale. https://github.com/user-attachments/assets/f70d6706-9896-4d1f-949a-f0f70ae7655c

If you'd like the CSS of my implementation I'd be happy to share it, I'm just not happy with the quality of it.

[JLAcostaEC]

I'm working on a Fluent UI library for Svelte 5, and my implementation is like yours. I hope to release an alpha version within 1 month. It should have been sooner, but I was inactive for 3 months. I'm getting back to it now and I'm very focused on the components and then making the documentation page.

https://github.com/user-attachments/assets/2a12d86d-6ab1-4bb8-bdbb-c7bc95bc5b0f