Background color of the outlined-button component doesn't get filled on hover or btn-pressed

[saurypande]

What is affected?

Component

Description

When I modify the shape of the outlined-button by applying this property --md-outlined-button-container-shape: 8px
Then I could see on the edges the background color is not fully filled on all 4 sides when hover or button is pressed.

Reproduction

Please zoom in to have a better view of the issue:

https://lit.dev/playground/#project=W3sibmFtZSI6Im1hdGVyaWFsLWltcG9ydHMuanMiLCJjb250ZW50IjoiaW1wb3J0IFwiQG1hdGVyaWFsL3dlYi9idXR0b24vb3V0bGluZWQtYnV0dG9uLmpzXCI7In0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIi4vbWF0ZXJpYWwtaW1wb3J0cy5qc1wiPjwvc2NyaXB0PlxuICA8c3R5bGU-XG4gICAgOnJvb3Qge1xuICAgICAgLS1tZC1zeXMtY29sb3ItcHJpbWFyeTogYmxhY2s7XG4gICAgICAtLW1kLW91dGxpbmVkLWJ1dHRvbi1jb250YWluZXItc2hhcGU6IDhweFxuICAgIH1cbiAgXG4gIDwvc3R5bGU-XG48bWQtb3V0bGluZWQtYnV0dG9uPkEgbWF0ZXJpYWwgYnV0dG9uPC9tZC1vdXRsaW5lZC1idXR0b24-XG4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMi4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4xLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeMy4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjIuMC4wXCJcbiAgfVxufSIsImhpZGRlbiI6dHJ1ZX1d

Workaround

I have not found a workaround

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.4.0, 1.5.0

Browser/OS/Node environment

Browser: Chrome, Firefox, Safari