Fixed button group inner border disappears (#980)

* fixed button group inner border disappears

* updated changelog

* show border on active

docs/components/button-group.md

@@ -86,7 +86,7 @@ const App = () => (
 
 ### Theme Buttons
 
-Theme buttons are supported through the button's `type` attribute.
+Theme buttons are supported through the button's `variant` attribute.
 
 ```html preview
 <sl-button-group>

docs/resources/changelog.md

@@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Added `button--checked` to `<sl-radio-button>` and `control--checked` to `<sl-radio>` to style just the checked state [#933](https://github.com/shoelace-style/shoelace/pull/933)
 - Fixed a bug in `<sl-card>` that prevented the border radius to apply correctly to the header [#934](https://github.com/shoelace-style/shoelace/pull/934)
+- Fixed a bug in `<sl-button-group>` where the inner border disappeared on focus [#980](https://github.com/shoelace-style/shoelace/pull/980)
 - Improved `<sl-badge>` so it renders relative to the current font size and improved padding
 - Added tests for `<sl-menu-item>` and `<sl-menu-label>` [#935](https://github.com/shoelace-style/shoelace/pull/935)
 

src/components/button/button.styles.ts

@@ -558,8 +558,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, .sl-button-group__button--radio, [variant='default']):not(:hover, :active, :focus))
-    .button:after {
+  :host(.sl-button-group__button:not(.sl-button-group__button--radio, [variant='default']):not(:hover)) .button:after {
     content: '';
     position: absolute;
     top: 0;
@@ -574,7 +573,6 @@ export default css`
     z-index: 1;
   }
 
-  :host(.sl-button-group__button--focus),
   :host(.sl-button-group__button[checked]) {
     z-index: 2;
   }