Input group missing border radius styles

[jibbewillem]

Current Behavior

Continuation of #3439 (comment)

I can see the corners of the input field being cut off when highlighting it. I added the following styles to resolve the issue:

.input-group > .ig-input:first-child {
	border-top-left-radius: var(--radius-base);
	border-bottom-left-radius: var(--radius-base);
}

.input-group > .ig-input:last-child {
	border-top-right-radius: var(--radius-base);
	border-bottom-right-radius: var(--radius-base);
}

It's very subtle, but visible non the less.

Expected Behavior

Border of the highlight to curve with the field

Steps To Reproduce

Here's the reproduction from the screenshot:

<div class="flex flex-col gap-12">
	<label class="label">
		<span class="label-text">Regular input</span>
		<input class="input" type="text" />
	</label>

	<label class="label">
		<span class="label-text">Group input</span>
		<div class="input-group grid-cols-[auto_1fr]">
			<div class="ig-cell preset-tonal">Group</div>
			<input class="ig-input" type="text" />
		</div>
	</label>
</div>

Link to Reproduction / Stackblitz

No response

Environment Information

No response

More Information

No response