From 165f2c7122436def49653980c321cc3f53177c1e Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Tue, 16 Sep 2025 09:59:30 +0100
Subject: [PATCH 1/4] fix(Progress): status indicator

---
 src/runtime/components/Progress.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/Progress.vue b/src/runtime/components/Progress.vue
index 69117a4081..f8acb5d248 100644
--- a/src/runtime/components/Progress.vue
+++ b/src/runtime/components/Progress.vue
@@ -123,7 +123,7 @@ const indicatorStyle = computed(() => {
 
 const statusStyle = computed(() => {
   return {
-    [props.orientation === 'vertical' ? 'height' : 'width']: percent.value ? `${percent.value}%` : 'fit-content'
+    [props.orientation === 'vertical' ? 'height' : 'width']: percent.value !== undefined ? `${percent.value}%` : 'fit-content'
   }
 })
 

From b9aaee5442729a5ea1238482231437c083d40f38 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Tue, 16 Sep 2025 13:08:21 +0100
Subject: [PATCH 2/4] up

---
 src/runtime/components/Progress.vue | 4 +++-
 src/theme/progress.ts               | 6 +++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/runtime/components/Progress.vue b/src/runtime/components/Progress.vue
index f8acb5d248..224190bdab 100644
--- a/src/runtime/components/Progress.vue
+++ b/src/runtime/components/Progress.vue
@@ -123,7 +123,9 @@ const indicatorStyle = computed(() => {
 
 const statusStyle = computed(() => {
   return {
-    [props.orientation === 'vertical' ? 'height' : 'width']: percent.value !== undefined ? `${percent.value}%` : 'fit-content'
+    [props.orientation === 'vertical' ? 'height' : 'width']: `${Math.max(percent.value ?? 0, 0)}%`,
+    minWidth: props.orientation === 'horizontal' ? 'fit-content' : undefined,
+    minHeight: props.orientation === 'vertical' ? 'fit-content' : undefined
   }
 })
 
diff --git a/src/theme/progress.ts b/src/theme/progress.ts
index 08a7460484..2baedbf22d 100644
--- a/src/theme/progress.ts
+++ b/src/theme/progress.ts
@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
     root: 'gap-2',
     base: 'relative overflow-hidden rounded-full bg-accented',
     indicator: 'rounded-full size-full transition-transform duration-200 ease-out',
-    status: 'flex justify-end text-dimmed transition-[width] duration-200',
+    status: 'flex text-dimmed transition-[width] duration-200',
     steps: 'grid items-end',
     step: 'truncate text-end row-start-1 col-start-1 transition-opacity'
   },
@@ -74,12 +74,12 @@ export default (options: Required<ModuleOptions>) => ({
       horizontal: {
         root: 'w-full flex flex-col',
         base: 'w-full',
-        status: 'flex-row'
+        status: 'flex-row items-center justify-end'
       },
       vertical: {
         root: 'h-full flex flex-row-reverse',
         base: 'h-full',
-        status: 'flex-col'
+        status: 'flex-col justify-end'
       }
     },
     inverted: {

From 01ba44b5e25a22c4250cfcf7569e85d953666777 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Tue, 16 Sep 2025 13:15:41 +0100
Subject: [PATCH 3/4] up

---
 test/components/__snapshots__/Progress-vue.spec.ts.snap | 8 ++++----
 test/components/__snapshots__/Progress.spec.ts.snap     | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/test/components/__snapshots__/Progress-vue.spec.ts.snap b/test/components/__snapshots__/Progress-vue.spec.ts.snap
index afdb6237a7..f3bf1a868b 100644
--- a/test/components/__snapshots__/Progress-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Progress-vue.spec.ts.snap
@@ -72,7 +72,7 @@ exports[`Progress > renders with color neutral correctly 1`] = `
 
 exports[`Progress > renders with max correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end" style="width: 50%; min-width: fit-content;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
@@ -88,7 +88,7 @@ exports[`Progress > renders with max correctly 1`] = `
 
 exports[`Progress > renders with max inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end self-end flex-row-reverse" style="width: 50%; min-width: fit-content;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
@@ -204,7 +204,7 @@ exports[`Progress > renders with size xs correctly 1`] = `
 
 exports[`Progress > renders with status correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end" style="width: 50%; min-width: fit-content;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
@@ -214,7 +214,7 @@ exports[`Progress > renders with status correctly 1`] = `
 
 exports[`Progress > renders with status inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end self-end flex-row-reverse" style="width: 50%; min-width: fit-content;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
diff --git a/test/components/__snapshots__/Progress.spec.ts.snap b/test/components/__snapshots__/Progress.spec.ts.snap
index afdb6237a7..f3bf1a868b 100644
--- a/test/components/__snapshots__/Progress.spec.ts.snap
+++ b/test/components/__snapshots__/Progress.spec.ts.snap
@@ -72,7 +72,7 @@ exports[`Progress > renders with color neutral correctly 1`] = `
 
 exports[`Progress > renders with max correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end" style="width: 50%; min-width: fit-content;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
@@ -88,7 +88,7 @@ exports[`Progress > renders with max correctly 1`] = `
 
 exports[`Progress > renders with max inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end self-end flex-row-reverse" style="width: 50%; min-width: fit-content;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
@@ -204,7 +204,7 @@ exports[`Progress > renders with size xs correctly 1`] = `
 
 exports[`Progress > renders with status correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end" style="width: 50%; min-width: fit-content;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
@@ -214,7 +214,7 @@ exports[`Progress > renders with status correctly 1`] = `
 
 exports[`Progress > renders with status inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end self-end flex-row-reverse" style="width: 50%; min-width: fit-content;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>

From 21fe0ebf99815ef6b402b4fb51576016b200803f Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Tue, 16 Sep 2025 14:33:22 +0100
Subject: [PATCH 4/4] up

---
 src/runtime/components/Progress.vue                     | 7 ++-----
 src/theme/progress.ts                                   | 4 ++--
 test/components/__snapshots__/Progress-vue.spec.ts.snap | 8 ++++----
 test/components/__snapshots__/Progress.spec.ts.snap     | 8 ++++----
 4 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/runtime/components/Progress.vue b/src/runtime/components/Progress.vue
index 224190bdab..577da9d569 100644
--- a/src/runtime/components/Progress.vue
+++ b/src/runtime/components/Progress.vue
@@ -122,11 +122,8 @@ const indicatorStyle = computed(() => {
 })
 
 const statusStyle = computed(() => {
-  return {
-    [props.orientation === 'vertical' ? 'height' : 'width']: `${Math.max(percent.value ?? 0, 0)}%`,
-    minWidth: props.orientation === 'horizontal' ? 'fit-content' : undefined,
-    minHeight: props.orientation === 'vertical' ? 'fit-content' : undefined
-  }
+  const value = `${Math.max(percent.value ?? 0, 0)}%`
+  return props.orientation === 'vertical' ? { height: value } : { width: value }
 })
 
 function isActive(index: number) {
diff --git a/src/theme/progress.ts b/src/theme/progress.ts
index 2baedbf22d..1a4df2314a 100644
--- a/src/theme/progress.ts
+++ b/src/theme/progress.ts
@@ -74,12 +74,12 @@ export default (options: Required<ModuleOptions>) => ({
       horizontal: {
         root: 'w-full flex flex-col',
         base: 'w-full',
-        status: 'flex-row items-center justify-end'
+        status: 'flex-row items-center justify-end min-w-fit'
       },
       vertical: {
         root: 'h-full flex flex-row-reverse',
         base: 'h-full',
-        status: 'flex-col justify-end'
+        status: 'flex-col justify-end min-h-fit'
       }
     },
     inverted: {
diff --git a/test/components/__snapshots__/Progress-vue.spec.ts.snap b/test/components/__snapshots__/Progress-vue.spec.ts.snap
index f3bf1a868b..135d9929fc 100644
--- a/test/components/__snapshots__/Progress-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Progress-vue.spec.ts.snap
@@ -72,7 +72,7 @@ exports[`Progress > renders with color neutral correctly 1`] = `
 
 exports[`Progress > renders with max correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end" style="width: 50%; min-width: fit-content;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
@@ -88,7 +88,7 @@ exports[`Progress > renders with max correctly 1`] = `
 
 exports[`Progress > renders with max inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end self-end flex-row-reverse" style="width: 50%; min-width: fit-content;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
@@ -204,7 +204,7 @@ exports[`Progress > renders with size xs correctly 1`] = `
 
 exports[`Progress > renders with status correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end" style="width: 50%; min-width: fit-content;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
@@ -214,7 +214,7 @@ exports[`Progress > renders with status correctly 1`] = `
 
 exports[`Progress > renders with status inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end self-end flex-row-reverse" style="width: 50%; min-width: fit-content;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
diff --git a/test/components/__snapshots__/Progress.spec.ts.snap b/test/components/__snapshots__/Progress.spec.ts.snap
index f3bf1a868b..135d9929fc 100644
--- a/test/components/__snapshots__/Progress.spec.ts.snap
+++ b/test/components/__snapshots__/Progress.spec.ts.snap
@@ -72,7 +72,7 @@ exports[`Progress > renders with color neutral correctly 1`] = `
 
 exports[`Progress > renders with max correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end" style="width: 50%; min-width: fit-content;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
@@ -88,7 +88,7 @@ exports[`Progress > renders with max correctly 1`] = `
 
 exports[`Progress > renders with max inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end self-end flex-row-reverse" style="width: 50%; min-width: fit-content;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
@@ -204,7 +204,7 @@ exports[`Progress > renders with size xs correctly 1`] = `
 
 exports[`Progress > renders with status correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end" style="width: 50%; min-width: fit-content;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
@@ -214,7 +214,7 @@ exports[`Progress > renders with status correctly 1`] = `
 
 exports[`Progress > renders with status inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end self-end flex-row-reverse" style="width: 50%; min-width: fit-content;">50% </div>
+  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
     <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>