From 86e8aa8b0005cc7d306ada50c1544345a4a3c1c9 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 3 May 2025 10:34:46 -0700
Subject: [PATCH] docs(progress-bar): improve docs

---
 docs/src/pages/components/ProgressBar.svx | 26 +++++++++++++----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/docs/src/pages/components/ProgressBar.svx b/docs/src/pages/components/ProgressBar.svx
index cd5e4c85..f70f6f01 100644
--- a/docs/src/pages/components/ProgressBar.svx
+++ b/docs/src/pages/components/ProgressBar.svx
@@ -3,66 +3,70 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
+`ProgressBar` provides a visual indicator of progress for operations such as file uploads or data processing. It supports determinate and indeterminate states, various sizes, and status indicators.
+
 ## Default
 
-Without a specified `value` prop, the progress bar is indeterminate.
+Create an indeterminate progress bar that continuously animates.
 
 <ProgressBar helperText="Loading..." />
 
 ## Small size
 
-Specify `size="sm"` to use the small variant.
+Use the small size variant for compact layouts.
 
 <ProgressBar size="sm" helperText="Loading..." />
 
 ## Percentage
 
-Specify a `value` for the progress bar to be determinate.
+Display progress as a percentage using the `value` prop.
 
 <ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
 ## Finished status
 
-Specify `status="finished"` for the progress bar.
+Show completion status with a checkmark icon.
 
 <ProgressBar value={100} status="finished" labelText="Upload file" helperText="Upload complete" />
 
 ## Error status
 
-Specify `status="error"` for the progress bar.
+Indicate errors with an error icon and red styling.
 
 <ProgressBar value={0} status="error" labelText="Upload file" helperText="Invalid file format" />
 
 ## Custom max value
 
-The default `max` value is `100`.
+Set a custom maximum value for the progress bar.
 
 <ProgressBar value={40} max={200} labelText="Upload status" helperText="40 MB of 200 MB" />
 
 ## Hidden label
 
-It's recommended that you provide a `labelText` for accessibility.
-
-Use `hideLabel` to visually hide the label text.
+Visually hide the label while maintaining accessibility.
 
 <ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
 ## Inline variant
 
-The inline variant visually hides the `helperText`.
+Use the inline variant to display progress without helper text.
 
 <ProgressBar kind="inline" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
 ## Indented variant
 
+Use the indented variant for a more compact layout.
+
 <ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
 ## Indented status variant
 
+Combine the indented variant with status indicators.
+
 <ProgressBar kind="indented" status="finished" value={40} labelText="Upload file" helperText="Upload complete" />
 
 ## UX example
 
-This example shows how to animate the progress bar from 0 to 100% with start and end states.
+Demonstrate a complete upload flow with start and end states.
 
 <FileSource src="/framed/ProgressBar/ProgressBarUx" />
\ No newline at end of file