16 lines
675 B
Svelte
16 lines
675 B
Svelte
<script>
|
|
// Horizontal gauge. `tone` is a full bg-* class (statically scannable).
|
|
let { label, pct = 0, tone = 'bg-term', value = null, unit = '%' } = $props()
|
|
let clamped = $derived(Math.max(0, Math.min(100, pct)))
|
|
</script>
|
|
|
|
<div class="space-y-1">
|
|
<div class="flex items-baseline justify-between text-[0.65rem] uppercase tracking-wider">
|
|
<span class="text-haze">{label}</span>
|
|
<span class="text-term tabular-nums glow-sm">{value ?? clamped}{unit}</span>
|
|
</div>
|
|
<div class="h-2 w-full overflow-hidden border border-haze/30 bg-void">
|
|
<div class="h-full {tone} transition-[width] duration-700 ease-out" style="width:{clamped}%"></div>
|
|
</div>
|
|
</div>
|