From c665768936e3b3fcaeeb989c6e007e7a119c8267 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n=20Arenal?= <adri.arenal94@gmail.com>
Date: Wed, 25 Feb 2026 16:49:30 +0100
Subject: [PATCH 1/2] feat(progress-bar): add ProgressBar component with
 customizable sizes and colors

---
 packages/x-design-system/demo/src/app.vue     |  2 +
 .../demo/src/components/progress-bar.vue      | 60 +++++++++++++++++++
 .../x-design-system/lib/components/index.css  |  1 +
 .../lib/components/progress-bar.css           | 29 +++++++++
 4 files changed, 92 insertions(+)
 create mode 100644 packages/x-design-system/demo/src/components/progress-bar.vue
 create mode 100644 packages/x-design-system/lib/components/progress-bar.css

diff --git a/packages/x-design-system/demo/src/app.vue b/packages/x-design-system/demo/src/app.vue
index 0805e05d07..1ed87dfd46 100644
--- a/packages/x-design-system/demo/src/app.vue
+++ b/packages/x-design-system/demo/src/app.vue
@@ -4,6 +4,7 @@
   <ButtonGroup />
   <Highlight />
   <Input />
+  <ProgressBar />
   <Integration />
 </template>
 
@@ -14,4 +15,5 @@ import Button from './components/button.vue'
 import Highlight from './components/highlight.vue'
 import Input from './components/input.vue'
 import Integration from './components/integration.vue'
+import ProgressBar from './components/progress-bar.vue'
 </script>
diff --git a/packages/x-design-system/demo/src/components/progress-bar.vue b/packages/x-design-system/demo/src/components/progress-bar.vue
new file mode 100644
index 0000000000..62fa145102
--- /dev/null
+++ b/packages/x-design-system/demo/src/components/progress-bar.vue
@@ -0,0 +1,60 @@
+<template>
+  <Wrapper feature="ProgressBar" :rows="rows">
+    <template #default>
+      <div class="xds:progress-bar xds:w-320">
+        <div class="xds:progress-bar-fill xds:w-[30%]" />
+      </div>
+    </template>
+    <template #size>
+      <span>sm</span>
+      <div class="xds:progress-bar xds:progress-bar-sm xds:w-320">
+        <div class="xds:progress-bar-fill xds:w-[30%]" />
+      </div>
+      <span>lg</span>
+      <div class="xds:progress-bar xds:progress-bar-lg xds:w-320">
+        <div class="xds:progress-bar-fill xds:w-[30%]" />
+      </div>
+    </template>
+    <template #color>
+      <div class="xds:flex xds:gap-8 xds:items-center xds:mr-16">
+        <span>default</span>
+        <div class="xds:progress-bar xds:w-320">
+          <div class="xds:progress-bar-fill xds:w-[30%]" />
+        </div>
+      </div>
+      <div
+        v-for="(value, key) in colors"
+        :key="key"
+        class="xds:flex xds:gap-8 xds:mr-16 xds:items-center"
+      >
+        <span>{{ key }}</span>
+        <div class="xds:progress-bar xds:w-320" :class="value">
+          <div class="xds:progress-bar-fill xds:w-[30%]" />
+        </div>
+      </div>
+    </template>
+
+    <template #combinations>
+      <span>lg warning</span>
+      <div class="xds:progress-bar xds:progress-bar-lg xds:progress-bar-warning xds:w-320">
+        <div class="xds:progress-bar-fill xds:w-[30%]" />
+      </div>
+    </template>
+  </Wrapper>
+</template>
+
+<script setup lang="ts">
+import Wrapper from './wrapper.vue'
+
+const rows = ['default', 'size', 'color', 'combinations']
+const colors = {
+  neutral: 'xds:progress-bar-neutral',
+  lead: 'xds:progress-bar-lead',
+  auxiliary: 'xds:progress-bar-auxiliary',
+  accent: 'xds:progress-bar-accent',
+  highlight: 'xds:progress-bar-highlight',
+  success: 'xds:progress-bar-success',
+  warning: 'xds:progress-bar-warning',
+  error: 'xds:progress-bar-error',
+}
+</script>
diff --git a/packages/x-design-system/lib/components/index.css b/packages/x-design-system/lib/components/index.css
index ac048a63ae..26119a320f 100644
--- a/packages/x-design-system/lib/components/index.css
+++ b/packages/x-design-system/lib/components/index.css
@@ -4,3 +4,4 @@
 @import './button-group.css';
 @import './highlight.css';
 @import './input.css';
+@import './progress-bar.css';
diff --git a/packages/x-design-system/lib/components/progress-bar.css b/packages/x-design-system/lib/components/progress-bar.css
new file mode 100644
index 0000000000..a102f1e362
--- /dev/null
+++ b/packages/x-design-system/lib/components/progress-bar.css
@@ -0,0 +1,29 @@
+/* Base */
+@utility progress-bar {
+  --progress-bar-color-50: var(--xds-color-neutral-50);
+  @apply xds:rounded-sm;
+  @apply xds:inline-block;
+  @apply xds:bg-neutral-25;
+  @apply xds:overflow-hidden;
+
+  /* `@apply xds:progress-bar-md;` can not be use here because cause circular dependency. */
+  @apply xds:h-4;
+
+  & > .xds\:progress-bar-fill {
+    @apply xds:h-full;
+    @apply xds:bg-(--progress-bar-color-50);
+  }
+}
+
+/* Sizes */
+@utility progress-bar-md {
+  @apply xds:h-4;
+}
+@utility progress-bar-lg {
+  @apply xds:h-8;
+}
+
+/* Colors */
+@utility progress-bar-* {
+  --progress-bar-color-50: --value(--color- * -50);
+}

From d15279864b26c56a325cbbdca87f576eca8b0d3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n=20Arenal?= <adri.arenal94@gmail.com>
Date: Thu, 26 Feb 2026 08:52:06 +0100
Subject: [PATCH 2/2] feat(progress-bar): update styles for progress bar
 component and fix color application

---
 .../demo/src/components/progress-bar.vue        | 17 +++++++++++------
 .../lib/components/progress-bar.css             |  7 ++++---
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/x-design-system/demo/src/components/progress-bar.vue b/packages/x-design-system/demo/src/components/progress-bar.vue
index 62fa145102..38e1eacd5d 100644
--- a/packages/x-design-system/demo/src/components/progress-bar.vue
+++ b/packages/x-design-system/demo/src/components/progress-bar.vue
@@ -1,18 +1,23 @@
 <template>
   <Wrapper feature="ProgressBar" :rows="rows">
     <template #default>
+      <span>default</span>
       <div class="xds:progress-bar xds:w-320">
         <div class="xds:progress-bar-fill xds:w-[30%]" />
       </div>
     </template>
     <template #size>
-      <span>sm</span>
-      <div class="xds:progress-bar xds:progress-bar-sm xds:w-320">
-        <div class="xds:progress-bar-fill xds:w-[30%]" />
+      <div class="xds:flex xds:gap-8 xds:items-center xds:mr-16">
+        <span>sm</span>
+        <div class="xds:progress-bar xds:progress-bar-sm xds:w-320">
+          <div class="xds:progress-bar-fill xds:w-[30%]" />
+        </div>
       </div>
-      <span>lg</span>
-      <div class="xds:progress-bar xds:progress-bar-lg xds:w-320">
-        <div class="xds:progress-bar-fill xds:w-[30%]" />
+      <div class="xds:flex xds:gap-8 xds:items-center xds:mr-16">
+        <span>lg</span>
+        <div class="xds:progress-bar xds:progress-bar-lg xds:w-320">
+          <div class="xds:progress-bar-fill xds:w-[30%]" />
+        </div>
       </div>
     </template>
     <template #color>
diff --git a/packages/x-design-system/lib/components/progress-bar.css b/packages/x-design-system/lib/components/progress-bar.css
index a102f1e362..700cf48994 100644
--- a/packages/x-design-system/lib/components/progress-bar.css
+++ b/packages/x-design-system/lib/components/progress-bar.css
@@ -1,6 +1,5 @@
 /* Base */
 @utility progress-bar {
-  --progress-bar-color-50: var(--xds-color-neutral-50);
   @apply xds:rounded-sm;
   @apply xds:inline-block;
   @apply xds:bg-neutral-25;
@@ -11,7 +10,7 @@
 
   & > .xds\:progress-bar-fill {
     @apply xds:h-full;
-    @apply xds:bg-(--progress-bar-color-50);
+    @apply xds:bg-neutral-50;
   }
 }
 
@@ -25,5 +24,7 @@
 
 /* Colors */
 @utility progress-bar-* {
-  --progress-bar-color-50: --value(--color- * -50);
+  & > .xds\:progress-bar-fill {
+    background-color: --value(--color- * -50);
+  }
 }