refactor: add readonly state to radio-group base styles (#10115)

Author: jouni

packages/checkbox/src/styles/vaadin-checkbox-base-styles.js

@@ -18,10 +18,7 @@ const checkbox = css`
     --vaadin-checkbox-background: transparent;
     --vaadin-checkbox-border-color: var(--vaadin-border-color);
     --vaadin-checkbox-color: var(--vaadin-color);
-  }
-
-  :host([readonly]) [part='checkbox'] {
-    border-style: dashed;
+    --_border-style: dashed;
   }
 
   :host([indeterminate]) [part='checkbox']::after {

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

@@ -84,7 +84,7 @@ export const checkable = (part, propName = part) => css`
     background: var(--vaadin-${unsafeCSS(propName)}-background, var(--vaadin-background-color));
     border-color: var(--vaadin-${unsafeCSS(propName)}-border-color, var(--vaadin-input-field-border-color, var(--vaadin-border-color)));
     border-radius: var(--vaadin-${unsafeCSS(propName)}-border-radius, var(--vaadin-radius-s));
-    border-style: solid;
+    border-style: var(--_border-style, solid);
     --_border-width: var(--vaadin-${unsafeCSS(propName)}-border-width, var(--vaadin-input-field-border-width, 1px));
     border-width: var(--_border-width);
     box-sizing: border-box;

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

@@ -3,7 +3,19 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { css } from 'lit';
 import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
 import { group } from '@vaadin/field-base/src/styles/group-base-styles.js';
 
-export const radioGroupStyles = [field, group('radio')];
+export const radioGroupStyles = [
+  field,
+  group('radio'),
+  css`
+    :host([readonly]) ::slotted(vaadin-radio-button) {
+      --vaadin-radio-button-background: transparent;
+      --vaadin-radio-button-border-color: var(--vaadin-border-color);
+      --vaadin-radio-button-color: var(--vaadin-color);
+      --_border-style: dashed;
+    }
+  `,
+];