fixes #821

docs/resources/changelog.md

@@ -14,6 +14,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - 🚨 BREAKING: Moved the `checked-icon` part from a wrapper `<span>` to the `<svg>` in `<sl-radio>` [#786](https://github.com/shoelace-style/shoelace/issues/786)
 - Added the `--track-active-offset` CSS custom property to `<sl-range>` [#806](https://github.com/shoelace-style/shoelace/issues/806)
 - Fixed a bug that caused `<sl-select>` to sometimes have two vertical scrollbars [#814](https://github.com/shoelace-style/shoelace/issues/814)
+- Fixed a bug that caused a gray line to appear between radio buttons [#821](https://github.com/shoelace-style/shoelace/discussions/821)
 
 ## 2.0.0-beta.77
 

src/components/button-group/button-group.ts

@@ -53,6 +53,7 @@ export default class SlButtonGroup extends LitElement {
         button.classList.toggle('sl-button-group__button--first', index === 0);
         button.classList.toggle('sl-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
         button.classList.toggle('sl-button-group__button--last', index === slottedElements.length - 1);
+        button.classList.toggle('sl-button-group__button--radio', button.tagName.toLowerCase() === 'sl-radio-button');
       }
     });
   }

src/components/button/button.styles.ts

@@ -559,7 +559,7 @@ export default css`
   }
 
   /* Add a visual separator between solid buttons */
-  :host(.sl-button-group__button:not(.sl-button-group__button--focus, .sl-button-group__button--first, [variant='default']):not(:hover, :active, :focus))
+  :host(.sl-button-group__button:not(.sl-button-group__button--focus, .sl-button-group__button--first, .sl-button-group__button--radio, [variant='default']):not(:hover, :active, :focus))
     .button:after {
     content: '';
     position: absolute;