tabler/shared/ui/ProgressDescription.astro

---
// Equivalent of ui/progress-description.html
// Note: the Liquid `size` default ('sm') is unreachable — `include['size']`
// returns the include argument count when the parameter is absent (known
// LiquidJS bug, producing junk classes like `progress-3` in the reference),
// so we forward `size` only when it is explicitly provided.
import Progress from './Progress.astro'

interface Props {
  label?: string
  description?: string
  value?: number | string
  color?: string
  size?: string
  class?: string
}

const { label = 'Label', description, value, color = 'blue', size, class: className } = Astro.props
---

<div class:list={className}>
  <div class="d-flex mb-1 align-items-center lh-1">
    <div class="fs-5 fw-semibold m-0">{label}</div>
    {description && <div class="fs-6 text-secondary ms-2">{description}</div>}
    <span class="ms-auto fs-6 strong">{value}%</span>
  </div>
  <Progress size={size} value={value} color={color} />
</div>