Checkbox: add theme variant for toggle-button

[manolo]

Describe your motivation

Since a checkbox can be displayed as a toggle-button just using CSS, it would be nice if we have this variant

Describe the solution you'd like

Add a theme variant <vaadin-checkbox theme=toggle>
Add some css as described in this solution

vaadin-checkbox[theme~="toggle"]::part(checkbox) {
    border-radius: 9999px;
    width: var(--lumo-size-m);
}

vaadin-checkbox[theme~="toggle"]::part(checkbox)::after {
    content: "";
    height: calc(var(--lumo-size-m) / 3);
    background-color: var(--lumo-secondary-text-color);
    border-radius: 9999px;
    inset: 0;
    margin: calc(var(--lumo-size-m) / 12);
    opacity: 1;
    transition: transform 0.2s;
    width: calc(var(--lumo-size-m) / 3);
}

vaadin-checkbox[theme~="toggle"][checked]::part(checkbox)::after {
    background-color: var(--lumo-primary-contrast-color);
    transform: translateX(calc(var(--lumo-size-m) / 2));
}

Describe alternatives you've considered

An addon for vaadin extending the CheckBox component, but that makes things complicated, and difficult to maintain.

Additional context

I tried the plugin from the addon, and it fails in 24.5.0.beta

[TatuLund]

One reference solution is in Vaadin Plus

https://github.com/anezthes/vaadinplus/blob/main/frontend/themes/vaadin%2B/components/vaadin-checkbox.css

See switch variant in demo: https://v-herd.eu/jonte-vaadinplus/checkboxes

[web-padawan]

This is a duplicate of #893