refactor!: use checkmark icon for checked state

[web-padawan]

Description

As reported in #3262 we have a problem of checkmark looking incorrect when changing font size on the checkbox.
We could fix this by replacing em with calculated / hardcoded values as mentioned in #3262 (comment)

However, while looking into this, I realised that --lumo-icons-checkmark might be a better alternative:

1. Using icon does not require any calculations such as width: calc(var(--lumo-size-s) / 3);
2. The icon looks quite similar to the current checkmark (there is a difference, but not significant).
3. It's easier to provide a custom checkmark: no need to tweak borders, just replace the ✔️ icon

Fixes #959
Fixes #3262

Type of change

• Breaking change

[jouni]

Use the icon size prop. Center the icon within the checkmark container.

[tomivirkki]

The checkmark of the rightmost checkbox in the updated value.png looks slightly misaligned (too much on the right):

[jouni]

Yeah, I noticed that too, and it seems that unfortunately Chrome suffers from sub-pixel misalignment issues here, that are caused by the previous elements in the DOM. Changing the text content of the labels affects the position of the icon. I’m not sure what would be a good workaround/fix to that. Maybe contain: layout?

I didn't notice this issue in Safari or Firefox.

Update: [part='checkbox']::after { contain: content; } looks like a suitable fix.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[tomivirkki]

Other than the border-radius issue, lgtm

(Also the nice check animation is gone 😢 )

[vaadin-bot]

This ticket/PR has been released with platform 23.0.0.alpha4 and is also targeting the upcoming stable 23.0.0 version.