From 160dbb87d5f960c8dfa91c81654fe3da5c7c1f2c Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Fri, 27 Oct 2023 12:36:33 -0500
Subject: [PATCH] Progress Bar and Radial transition prop added

---
 .changeset/warm-mirrors-kneel.md                       |  5 +++++
 .../src/lib/components/ProgressBar/ProgressBar.svelte  | 10 ++++++----
 .../components/ProgressRadial/ProgressRadial.svelte    |  6 ++++--
 3 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/warm-mirrors-kneel.md

diff --git a/.changeset/warm-mirrors-kneel.md b/.changeset/warm-mirrors-kneel.md
new file mode 100644
index 0000000000..6cd8239d71
--- /dev/null
+++ b/.changeset/warm-mirrors-kneel.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+chore: Progress Bar and Progress Radial now include dedicated `transition` props
diff --git a/packages/skeleton/src/lib/components/ProgressBar/ProgressBar.svelte b/packages/skeleton/src/lib/components/ProgressBar/ProgressBar.svelte
index 84a0990d9d..7754bfe263 100644
--- a/packages/skeleton/src/lib/components/ProgressBar/ProgressBar.svelte
+++ b/packages/skeleton/src/lib/components/ProgressBar/ProgressBar.svelte
@@ -16,11 +16,13 @@
 	export let height: CssClasses = 'h-2';
 	/** Provide classes to set rounded styles. */
 	export let rounded: CssClasses = 'rounded-token';
+	/** Provide classes to set the meter transition styles. */
+	export let transition: CssClasses = 'transition-[width]';
 
 	// Props (elements)
-	/** Provide arbitrary classes to style the meter element. */
+	/** Sets the base classes of the meter element. */
 	export let meter: CssClasses = 'bg-surface-900-50-token';
-	/** Provide arbitrary classes to style the track element. */
+	/** Sets the base classes of the track element. */
 	export let track: CssClasses = 'bg-surface-200-700-token';
 
 	// Props A11y
@@ -38,8 +40,8 @@
 	$: indeterminate = value === undefined || value < 0;
 	$: classesIndeterminate = indeterminate ? 'animIndeterminate' : '';
 	// Reactive Classes
-	$: classesTrack = `${cTrack} ${height} ${rounded} ${track} ${$$props.class ?? ''}`;
-	$: classesMeter = `${cMeter} ${rounded} ${classesIndeterminate} ${meter}`;
+	$: classesTrack = `${cTrack} ${track} ${height} ${rounded} ${$$props.class ?? ''}`;
+	$: classesMeter = `${cMeter} ${meter} ${rounded} ${classesIndeterminate} ${transition}`;
 </script>
 
 <!-- Track -->
diff --git a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte
index 4ddd0e41f9..a3fb1b1a8d 100644
--- a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte
+++ b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte
@@ -17,6 +17,8 @@
 	export let font = 56; // px
 	/** Sets the stoke-linecap value */
 	export let strokeLinecap: 'butt' | 'round' | 'square' = 'butt';
+	/** Provide classes to set the meter transition styles. */
+	export let transition: CssClasses = 'transition-[stroke-dashoffset]';
 
 	// Props (styles)
 	/** Provide classes to set the width. */
@@ -35,7 +37,7 @@
 	// Base Classes
 	const cBase = 'progress-radial relative overflow-hidden';
 	const cBaseTrack = 'fill-transparent';
-	const cBaseMeter = 'fill-transparent transition-[stroke-dashoffset] duration-200 -rotate-90 origin-[50%_50%]';
+	const cBaseMeter = 'fill-transparent -rotate-90 origin-[50%_50%]';
 
 	// Calculated Values
 	const baseSize = 512; // px
@@ -79,7 +81,7 @@
 
 		<!-- Meter -->
 		<circle
-			class="progress-radial-meter {cBaseMeter} {meter}"
+			class="progress-radial-meter {cBaseMeter} {meter} {transition}"
 			stroke-width={stroke}
 			r={radius}
 			cx="50%"