fixes #1110

docs/resources/changelog.md

@@ -13,6 +13,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in `<sl-select>` that prevented placeholders from showing when `multiple` was used [#1109](https://github.com/shoelace-style/shoelace/issues/1109)
 - Fixed a bug in `<sl-color-picker>` that logged a console error when parsing swatches with whitespace
 - Fixed a bug in `<sl-color-picker>` that caused selected colors to be wrong due to incorrect HSV calculations
+- Fixed a bug in `<sl-radio-button>` that caused the checked button's right border to be incorrect [#1110](https://github.com/shoelace-style/shoelace/issues/1110)
 
 ## 2.0.0-beta.88
 

src/components/radio-button/radio-button.ts

@@ -38,7 +38,10 @@ export default class SlRadioButton extends ShoelaceElement {
   @query('.hidden-input') hiddenInput: HTMLInputElement;
 
   @state() protected hasFocus = false;
-  @state() checked = false;
+
+  // The radio button's checked state. This is exposed as a "read-only" attribute so we can reflect it, making it easier
+  // to style in button groups. JSDoc is intentionally not used on this property to prevent it from showing in the docs.
+  @property({ type: Boolean, reflect: true }) checked = false;
 
   /** The radio's value. When selected, the radio group will receive this value. */
   @property() value: string;