<script>
  let { depth = 0, cap = 1, label = "capacity" } = $props();

  const ratio = $derived(cap > 0 ? Math.min(depth / cap, 1) : 0);
  const nearFull = $derived(ratio > 0.9);
  const barColor = $derived(nearFull ? "var(--danger)" : "var(--signal)");
</script>

<div class="meter" role="meter" aria-label={label} aria-valuemin={0} aria-valuemax={cap} aria-valuenow={depth}>
  <span class="fill" style={`width:${ratio * 100}%;--meter-color:${barColor}`}></span>
</div>

<style>
  .meter { height: 4px; overflow: hidden; border-radius: 2px; background: var(--panel-2); }
  .fill { display: block; height: 100%; border-radius: inherit; background: var(--meter-color); transition: width .2s ease, background .2s ease; }
</style>
