Progress

// Minimum invocation — just a value.
<Progress value={60} />

// Pair the value with a descriptive label and a right-aligned hint.
<Progress value={42} label="Uploading files…" hint="3 of 7" />

// tone="info" re-tints every internal color via the --*-info token cascade.
<Progress value={75} tone="info" label="Processing" />

// The host pre-declares border colour + style with width 0 — give it any
// width to opt in; the colour auto-tracks the tone.
<Progress value={60} label="Uploading" hint="3 of 5" style={{ borderBottomWidth: '1px' }} />

// Animate by driving `value` over time.
function AnimatedProgress({ speed = 1 }) {
  const [v, setV] = useState(0)
  useEffect(() => {
    const id = setInterval(() => setV((x) => (x + speed) % 101), 50)
    return () => clearInterval(id)
  }, [speed])
  return <Progress value={v} label="Animated" />
}