fix: align radio-button on label baseline (#10469)

Author: jouni

packages/field-base/src/styles/checkable-base-styles.js

@@ -9,7 +9,7 @@ import { css, unsafeCSS } from 'lit';
 // postcss-lit-disable-next-line
 export const checkable = (part, propName = part) => css`
   :host {
-    align-items: center;
+    align-items: baseline;
     column-gap: var(--vaadin-${unsafeCSS(propName)}-gap, var(--vaadin-gap-s));
     grid-template-columns: auto 1fr;
     /*
@@ -103,6 +103,9 @@ export const checkable = (part, propName = part) => css`
     width: var(--vaadin-${unsafeCSS(propName)}-size, 1lh);
     position: relative;
     cursor: var(--_cursor);
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   :host(:is([checked], [indeterminate])) {
@@ -135,14 +138,15 @@ export const checkable = (part, propName = part) => css`
 
   /* Checked indicator (checkmark, dot) */
   [part='${unsafeCSS(part)}']::after {
-    content: '';
-    position: absolute;
+    content: '\\2003' / '';
     background: currentColor;
     border-radius: inherit;
+    display: flex;
+    align-items: center;
   }
 
   :host(:not([checked], [indeterminate])) [part='${unsafeCSS(part)}']::after {
-    display: none;
+    opacity: 0;
   }
 
   @media (forced-colors: active) {

packages/radio-group/src/styles/vaadin-radio-button-base-styles.js

@@ -17,9 +17,6 @@ const radioButton = css`
   }
 
   [part='radio']::after {
-    top: 50%;
-    left: 50%;
-    translate: -50% -50%;
     width: var(--vaadin-radio-button-dot-size, var(--vaadin-radio-button-marker-size, 50%));
     height: var(--vaadin-radio-button-dot-size, var(--vaadin-radio-button-marker-size, 50%));
     border-radius: 50%;

packages/radio-group/test/visual/base/radio-button.test.js

@@ -29,6 +29,12 @@ describe('radio-button', () => {
       await visualDiff(div, 'state-empty');
     });
 
+    it('multi-line', async () => {
+      element.label = 'Long label that wraps into multiple lines';
+      element.style.maxWidth = '150px';
+      await visualDiff(div, 'state-multi-line');
+    });
+
     describe('disabled', () => {
       beforeEach(() => {
         element.disabled = true;