Description:
When using the Interstitial Nav pattern from the docs — s-clickable items inside an s-box with border=“base” and borderRadius=“base” — the hover/focus background on s-clickable extends beyond the parent’s rounded corners, creating a visible overflow.
Reproduction:
<s-box border="base" borderRadius="base">
<s-clickable padding="small-100" href="/example">
<s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
<s-heading>Example item</s-heading>
<s-icon type="chevron-right"></s-icon>
</s-grid>
</s-clickable>
</s-box>
Hover over the clickable — the background highlight bleeds outside the rounded border of the parent box.
Expected: The parent s-box with borderRadius should clip the child s-clickable hover state, or s-clickable should inherit/respect the parent’s border radius for its hover background.
Workaround: Adding overflow=“hidden” to the parent s-box clips the hover correctly.
Context: Following the Interstitial Nav pattern from the App Home docs.
