From 99368b9fdd24a858e87e6a6489aa6bf8ae586889 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 6 Jul 2022 09:48:30 -0400
Subject: [PATCH] fixes #821

---
 docs/resources/changelog.md                 | 1 +
 src/components/button-group/button-group.ts | 1 +
 src/components/button/button.styles.ts      | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 7249fb47c..fd662f1e8 100644
--- a/docs/resources/changelog.md
+++ b/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
 
diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts
index cba1347c2..a89092ae4 100644
--- a/src/components/button-group/button-group.ts
+++ b/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');
       }
     });
   }
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index 617757edb..4186a4a84 100644
--- a/src/components/button/button.styles.ts
+++ b/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;