fix: Added safe sizes for progress bar component

docs/components/progress/examples/FwbProgressExampleLabelInside.vue

@@ -6,6 +6,8 @@
     size="lg"
   />
 
+  <div class="mb-4" />
+
   <fwb-progress
     :progress="0"
     label-position="inside"

src/components/FwbProgress/FwbProgress.vue

@@ -19,8 +19,8 @@
     >
       <div
         :class="innerClasses"
-        :style="{ width: progress + '%' }"
-        class="rounded-full font-medium text-blue-100 text-center p-0.5 min-w-max"
+        :style="{ width: safeProgress + '%' }"
+        class="rounded-full font-medium text-blue-100 text-center p-0.5 min-w-max box-border"
       >
         <template v-if="labelProgress && labelPosition === 'inside'">
           {{ progress }}%
@@ -31,8 +31,8 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs } from 'vue'
-import { useProgressClasses } from './composables/useProgressClasses'
+import { computed, toRefs } from 'vue'
+import { progressSafeSizes, useProgressClasses } from './composables/useProgressClasses'
 import type { ProgressLabelPosition, ProgressSize, ProgressVariant } from './types'
 
 interface IProgressProps {
@@ -53,6 +53,11 @@ const props = withDefaults(defineProps<IProgressProps>(), {
   size: 'md',
 })
 
+const safeProgress = computed(() => {
+  const size = progressSafeSizes[props.size]
+  return props.progress <= size ? size : props.progress
+})
+
 const {
   innerClasses,
   outerClasses,

src/components/FwbProgress/composables/useProgressClasses.ts

@@ -31,6 +31,13 @@ const progressSizeClasses: Record<ProgressSize, string> = {
   xl: 'h-6 text-base leading-tight',
 }
 
+export const progressSafeSizes: Record<ProgressSize, number> = {
+  sm: 1,
+  md: 2,
+  lg: 3,
+  xl: 4,
+}
+
 export type UseProgressClassesProps = {
   color: Ref<ProgressVariant>
   size: Ref<ProgressSize>