Progress Bar and Radial transition prop added

.changeset/warm-mirrors-kneel.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+chore: Progress Bar and Progress Radial now include dedicated `transition` props

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 -->

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%"