From 7ef15c2e1a5b9ff5745523ca9fd0f6ce1738c9d2 Mon Sep 17 00:00:00 2001
From: Prem Palanisamy <i.prem.tsd@gmail.com>
Date: Tue, 7 Apr 2026 10:51:30 +0100
Subject: [PATCH 1/3] feat: add progress bar support to Upload.Box component

Add optional progress prop to file items in Upload.Box. When provided,
renders an animated progress bar below each file row and shows the
percentage instead of the Pending badge. Fully backwards compatible.
---
 v2/pink-sb/src/lib/upload/Box.svelte          | 165 +++++++++++-------
 .../src/stories/upload/Box.stories.svelte     |  39 +++++
 2 files changed, 142 insertions(+), 62 deletions(-)

diff --git a/v2/pink-sb/src/lib/upload/Box.svelte b/v2/pink-sb/src/lib/upload/Box.svelte
index 7211dc582a..27d47a83f4 100644
--- a/v2/pink-sb/src/lib/upload/Box.svelte
+++ b/v2/pink-sb/src/lib/upload/Box.svelte
@@ -22,6 +22,7 @@
         size?: number;
         extension?: string;
         error?: string;
+        progress?: number;
         status?: 'failed' | 'pending' | 'success';
     })[] = [];
 
@@ -67,75 +68,96 @@
         <div transition:slide={{ axis: 'y', duration: 200 }}>
             {#each files as file}
                 {@const fileSize = file?.size ? humanFileSize(file.size) : false}
+                {@const hasProgress = typeof file?.progress === 'number'}
                 <section>
-                    <Stack
-                        direction="row"
-                        gap="s"
-                        justifyContent="space-between"
-                        alignItems="center"
-                    >
-                        <Stack direction="row" gap="s" style="overflow: hidden;">
-                            <Icon
-                                icon={IconDocument}
-                                color={file?.error
-                                    ? '--fgcolor-error'
-                                    : '--fgcolor-neutral-tertiary'}
-                            />
-                            <Stack direction="row" gap="xxs" inline style="min-width: 0;">
-                                <Text truncate>
-                                    {file.name}
-                                </Text>
-                                {#if fileSize}
-                                    <Text color="--fgcolor-neutral-tertiary">
-                                        <span style="white-space: nowrap">
-                                            ({fileSize.value}
-                                            {fileSize.unit})
-                                        </span>
+                    <Stack direction="column" gap="xs">
+                        <Stack
+                            direction="row"
+                            gap="s"
+                            justifyContent="space-between"
+                            alignItems="center"
+                        >
+                            <Stack direction="row" gap="s" style="overflow: hidden;">
+                                <Icon
+                                    icon={IconDocument}
+                                    color={file?.error
+                                        ? '--fgcolor-error'
+                                        : '--fgcolor-neutral-tertiary'}
+                                />
+                                <Stack direction="row" gap="xxs" inline style="min-width: 0;">
+                                    <Text truncate>
+                                        {file.name}
                                     </Text>
-                                {/if}
+                                    {#if fileSize}
+                                        <Text color="--fgcolor-neutral-tertiary">
+                                            <span style="white-space: nowrap">
+                                                ({fileSize.value}
+                                                {fileSize.unit})
+                                            </span>
+                                        </Text>
+                                    {/if}
+                                </Stack>
                             </Stack>
-                        </Stack>
-                        <Stack direction="row" gap="xxs" inline>
-                            {#if file?.status === 'success'}
-                                <Button variant="text" icon size="s">
-                                    <Icon icon={IconCheck} color="--fgcolor-success" size="s" />
-                                </Button>
-                            {:else}
-                                {#if file?.error}
-                                    <Stack inline justifyContent="center">
-                                        <Badge
-                                            variant="secondary"
-                                            type="error"
-                                            content="Failed"
-                                            size="s"
-                                        />
-                                    </Stack>
-                                {:else if file?.status === 'pending'}
-                                    <Stack inline justifyContent="center">
-                                        <Badge
-                                            variant="secondary"
-                                            type="warning"
-                                            content="Pending"
+                            <Stack direction="row" gap="xxs" inline>
+                                {#if file?.status === 'success'}
+                                    <Button variant="text" icon size="s">
+                                        <Icon icon={IconCheck} color="--fgcolor-success" size="s" />
+                                    </Button>
+                                {:else}
+                                    {#if file?.error}
+                                        <Stack inline justifyContent="center">
+                                            <Badge
+                                                variant="secondary"
+                                                type="error"
+                                                content="Failed"
+                                                size="s"
+                                            />
+                                        </Stack>
+                                    {:else if hasProgress}
+                                        <Text
+                                            color="--fgcolor-neutral-tertiary"
+                                            variant="m-400"
+                                        >
+                                            {file.progress}%
+                                        </Text>
+                                    {:else if file?.status === 'pending'}
+                                        <Stack inline justifyContent="center">
+                                            <Badge
+                                                variant="secondary"
+                                                type="warning"
+                                                content="Pending"
+                                                size="s"
+                                            />
+                                        </Stack>
+                                    {/if}
+                                    <Button
+                                        variant="text"
+                                        icon
+                                        size="s"
+                                        on:click={() => {
+                                            dispatch('remove', file);
+                                        }}
+                                    >
+                                        <Icon
+                                            icon={IconX}
+                                            color="--fgcolor-neutral-tertiary"
                                             size="s"
                                         />
-                                    </Stack>
+                                    </Button>
                                 {/if}
-                                <Button
-                                    variant="text"
-                                    icon
-                                    size="s"
-                                    on:click={() => {
-                                        dispatch('remove', file);
-                                    }}
-                                >
-                                    <Icon
-                                        icon={IconX}
-                                        color="--fgcolor-neutral-tertiary"
-                                        size="s"
-                                    />
-                                </Button>
-                            {/if}
+                            </Stack>
                         </Stack>
+                        {#if hasProgress && file?.status !== 'success'}
+                            <div
+                                class="upload-progress-bar"
+                                class:is-error={file?.status === 'failed'}
+                            >
+                                <div
+                                    class="upload-progress-bar-fill"
+                                    style="width: {Math.min(Math.max(file.progress ?? 0, 0), 100)}%"
+                                />
+                            </div>
+                        {/if}
                     </Stack>
                 </section>
             {/each}
@@ -171,4 +193,23 @@
             flex-shrink: 1;
         }
     }
+
+    .upload-progress-bar {
+        height: 4px;
+        width: 100%;
+        border-radius: var(--border-radius-XS, 4px);
+        background: var(--bgcolor-neutral-secondary, hsl(0 0% 90%));
+        overflow: hidden;
+
+        &-fill {
+            height: 100%;
+            border-radius: inherit;
+            background: var(--bgcolor-information, hsl(220 80% 55%));
+            transition: width 0.3s ease;
+        }
+
+        &.is-error &-fill {
+            background: var(--bgcolor-error, hsl(0 70% 55%));
+        }
+    }
 </style>
diff --git a/v2/pink-sb/src/stories/upload/Box.stories.svelte b/v2/pink-sb/src/stories/upload/Box.stories.svelte
index 86419fb66f..70288f5844 100644
--- a/v2/pink-sb/src/stories/upload/Box.stories.svelte
+++ b/v2/pink-sb/src/stories/upload/Box.stories.svelte
@@ -28,6 +28,38 @@
             status: 'pending'
         }
     ];
+
+    let filesWithProgress = [
+        {
+            name: 'uploading-file.png',
+            extension: 'png',
+            size: 15728640,
+            status: 'pending',
+            progress: 45
+        },
+        {
+            name: 'almost-done.pdf',
+            extension: 'pdf',
+            size: 8388608,
+            status: 'pending',
+            progress: 92
+        },
+        {
+            name: 'completed-file.jpg',
+            extension: 'jpg',
+            size: 41024,
+            status: 'success',
+            progress: 100
+        },
+        {
+            name: 'failed-upload.zip',
+            extension: 'zip',
+            size: 52428800,
+            status: 'failed',
+            error: 'File exceeds size limit',
+            progress: 60
+        }
+    ];
 </script>
 
 <script>
@@ -44,3 +76,10 @@
         files
     }}
 />
+
+<Story
+    name="With Progress"
+    args={{
+        files: filesWithProgress
+    }}
+/>

From 0197e8f08fbb85f97089e58d9b57b38ff084842b Mon Sep 17 00:00:00 2001
From: Prem Palanisamy <i.prem.tsd@gmail.com>
Date: Tue, 7 Apr 2026 13:52:54 +0100
Subject: [PATCH 2/3] fix: address linter and review feedback

- Fix prettier formatting
- Use --bgcolor-accent token instead of non-existent --bgcolor-information
- Clamp progress percentage text to [0, 100] to match progress bar
- Align error state detection between badge and progress bar
---
 v2/pink-sb/src/lib/upload/Box.svelte | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/v2/pink-sb/src/lib/upload/Box.svelte b/v2/pink-sb/src/lib/upload/Box.svelte
index 27d47a83f4..7d8d80937b 100644
--- a/v2/pink-sb/src/lib/upload/Box.svelte
+++ b/v2/pink-sb/src/lib/upload/Box.svelte
@@ -114,11 +114,8 @@
                                             />
                                         </Stack>
                                     {:else if hasProgress}
-                                        <Text
-                                            color="--fgcolor-neutral-tertiary"
-                                            variant="m-400"
-                                        >
-                                            {file.progress}%
+                                        <Text color="--fgcolor-neutral-tertiary" variant="m-400">
+                                            {Math.min(Math.max(file.progress ?? 0, 0), 100)}%
                                         </Text>
                                     {:else if file?.status === 'pending'}
                                         <Stack inline justifyContent="center">
@@ -150,7 +147,7 @@
                         {#if hasProgress && file?.status !== 'success'}
                             <div
                                 class="upload-progress-bar"
-                                class:is-error={file?.status === 'failed'}
+                                class:is-error={!!file?.error || file?.status === 'failed'}
                             >
                                 <div
                                     class="upload-progress-bar-fill"
@@ -204,7 +201,7 @@
         &-fill {
             height: 100%;
             border-radius: inherit;
-            background: var(--bgcolor-information, hsl(220 80% 55%));
+            background: var(--bgcolor-accent);
             transition: width 0.3s ease;
         }
 

From 8dcaa17dba2768ab138b0ddbd93749dce7c515dd Mon Sep 17 00:00:00 2001
From: Prem Palanisamy <i.prem.tsd@gmail.com>
Date: Wed, 8 Apr 2026 11:09:36 +0100
Subject: [PATCH 3/3] fix: improve progress bar accessibility, DRY, and edge
 cases

- Add ARIA attributes (role, aria-valuenow/min/max, aria-label) to progress bar
- Extract clampedProgress and isError as shared @const declarations
- Round percentage display to integer
- Treat progress: 0 as pending instead of showing 0%
- Replace dead button with plain Icon on success state
- Remove redundant variant prop from percentage Text
---
 v2/pink-sb/src/lib/upload/Box.svelte | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/v2/pink-sb/src/lib/upload/Box.svelte b/v2/pink-sb/src/lib/upload/Box.svelte
index 7d8d80937b..6b955e94fd 100644
--- a/v2/pink-sb/src/lib/upload/Box.svelte
+++ b/v2/pink-sb/src/lib/upload/Box.svelte
@@ -68,7 +68,11 @@
         <div transition:slide={{ axis: 'y', duration: 200 }}>
             {#each files as file}
                 {@const fileSize = file?.size ? humanFileSize(file.size) : false}
-                {@const hasProgress = typeof file?.progress === 'number'}
+                {@const hasProgress = typeof file?.progress === 'number' && file.progress > 0}
+                {@const clampedProgress = hasProgress
+                    ? Math.round(Math.min(Math.max(file.progress ?? 0, 0), 100))
+                    : 0}
+                {@const isError = !!file?.error || file?.status === 'failed'}
                 <section>
                     <Stack direction="column" gap="xs">
                         <Stack
@@ -100,11 +104,9 @@
                             </Stack>
                             <Stack direction="row" gap="xxs" inline>
                                 {#if file?.status === 'success'}
-                                    <Button variant="text" icon size="s">
-                                        <Icon icon={IconCheck} color="--fgcolor-success" size="s" />
-                                    </Button>
+                                    <Icon icon={IconCheck} color="--fgcolor-success" size="s" />
                                 {:else}
-                                    {#if file?.error}
+                                    {#if isError}
                                         <Stack inline justifyContent="center">
                                             <Badge
                                                 variant="secondary"
@@ -114,8 +116,8 @@
                                             />
                                         </Stack>
                                     {:else if hasProgress}
-                                        <Text color="--fgcolor-neutral-tertiary" variant="m-400">
-                                            {Math.min(Math.max(file.progress ?? 0, 0), 100)}%
+                                        <Text color="--fgcolor-neutral-tertiary">
+                                            {clampedProgress}%
                                         </Text>
                                     {:else if file?.status === 'pending'}
                                         <Stack inline justifyContent="center">
@@ -147,11 +149,16 @@
                         {#if hasProgress && file?.status !== 'success'}
                             <div
                                 class="upload-progress-bar"
-                                class:is-error={!!file?.error || file?.status === 'failed'}
+                                class:is-error={isError}
+                                role="progressbar"
+                                aria-valuenow={clampedProgress}
+                                aria-valuemin={0}
+                                aria-valuemax={100}
+                                aria-label="{file.name} upload progress"
                             >
                                 <div
                                     class="upload-progress-bar-fill"
-                                    style="width: {Math.min(Math.max(file.progress ?? 0, 0), 100)}%"
+                                    style="width: {clampedProgress}%"
                                 />
                             </div>
                         {/if}