Mysterious gray separator line between Buttons in a Button Group / Radio (Button) Group

[oliveratgithub]

Describe the bug

I changed the coloring of a Button Group / Radio Button Group (applies to both) and its buttons using custom CSS.
This leaves me however with a strange separator line / border that I cannot figure out how to get rid of. It feels like an artefact – only gone when hovering the right-sided button.

To Reproduce

Steps to reproduce the behavior:

1. See this Codepen: https://codepen.io/oliverscodepens/pen/bGvVXOW
2. Notice the gray separator line between the two buttons
3. However with the mouse on the 2nd button, to see it disappear

Demo

https://codepen.io/oliverscodepens/pen/bGvVXOW

Screenshots

→

Browser / OS

• OS: macOS
• Browser: Safari v15 + v16, Chrome v103 (seems to affect all browsers…)

Additional information

Might be that I just didn't find the right way to overwrite, using CSS, the correct element and style instruction… meaning it's not a bug. Any pointing into the right direction hence is much appreciated (and excuse if it turns out not to be an actual bug 😉)

[claviska]

Your CodePen link goes to the Shoelace docs, so I can't see the code you're working with. Mind updating the link so I can take a look?

[oliveratgithub]

Done - sorry for that...

https://codepen.io/oliverscodepens/pen/bGvVXOW

[claviska]

I was 99% sure this was going to be a styling question, but it was actually caused by a style that should have only been applied to solid buttons.

shoelace/src/components/button/button.styles.ts

Lines 561 to 571 in a5a4621

	/* 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))
	.button:after {
	content: '';
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	bottom: 0;
	border-left: solid 1px rgb(128 128 128 / 33%);
	mix-blend-mode: multiply;
	}

These styles were created before Radio Buttons existed and, with the default borders, it wasn't noticeable. I've pushed a fix in 99368b9 that will be available in the next release.

Thanks for bringing this up!