<script lang="ts">
	// a neutral pulsing placeholder used to reserve a control's space while data
	// loads, so tabs fill in without a spinner or bounding-box shift. the caller
	// sets size and rounding via `class` (e.g. "h-4.5 w-8.25 rounded-full").
	interface Props {
		class?: string;
	}

	let { class: className = "" }: Props = $props();
</script>

<span class="block animate-pulse bg-background-muted {className}" aria-hidden="true"></span>
