card-header and card-footer need radius overrides when bg-color-X set

[niktek]

Current Behavior

When setting a bg color on a card-header or card-footer it will overpaint the containing card and its border-radius setting. I think if the user is opting into a card then it should carry through the expected border-radius to the child elements. The following uses tokens to re-apply the border radius on the card-header, but removing them will make it appear like card-footer.

<div class="p-5">
	<div class="card my-10 ">
		<header class="card-header bg-primary-500 rounded-tl-container-token rounded-tr-container-token">Actions</header>
		<section class="p-4">
			<button class="btn variant-filled">Save</button>
		</section>
		<footer class="card-footer bg-primary-500">(footer)</footer>
	</div>
</div>

It also raises a question of whether we should also extend the rounded tokens to match the options TW provides as we are missing tokens for (would we still keep container in there?):

rounded-s-container-token
rounded-e-container-token
rounded-t-container-token
rounded-r-container-token
rounded-b-container-token
rounded-l-container-token
rounded-ss-container-token
rounded-se-container-token
rounded-ee-container-token
rounded-es-container-token

Expected Behavior

No response

Steps To Reproduce

No response

Link to Reproduction / Stackblitz

No response

More Information

No response