fix: rebase from origin

Author: Charfeddine Hamrouni

docs/content/1.getting-started/3.theme.md

@@ -746,6 +746,7 @@ This is how the `@theme` is generated for each design token:
   --outline-color-default: var(--ui-border);
   --outline-color-inverted: var(--ui-border-inverted);
   --stroke-color-default: var(--ui-border);
+  --stroke-color-accented: var(--ui-border-accented);
   --stroke-color-inverted: var(--ui-border-inverted);
   --fill-color-default: var(--ui-border);
   --fill-color-inverted: var(--ui-border-inverted);

playground/app/pages/components/progress.vue

@@ -68,57 +68,36 @@ onMounted(() => {
     </div>
 
     <div class="flex items-center gap-4">
-      <UProgress
-        v-model="value2"
-        variant="circular"
-        size="2xs"
-        status
-      />
-      <UProgress
-        v-model="value2"
-        variant="circular"
-        color="info"
-        size="xs"
-      />
       <UProgress
         v-model="value2"
         variant="circular"
         color="warning"
-        size="sm"
-        status-position="inside"
-        status
-      />
-      <UProgress
-        v-model="value2"
-        variant="circular"
-        color="error"
-        size="md"
-        status-position="inside"
         status
       />
+
       <UProgress
         v-model="value2"
         variant="circular"
-        color="success"
         size="lg"
-        status-position="inside"
         status
+        status-position="inside"
+        color="neutral"
       />
+
       <UProgress
         v-model="value2"
-        variant="circular"
-        color="secondary"
-        size="xl"
-        status-position="outside"
+        color="error"
         status
-      />
-      <UProgress
+        size="2xs"
         variant="circular"
-        color="neutral"
-        animation="swing"
-        status-position="inside"
-        size="2xl"
-      />
+      >
+        <template #status="{ percent }">
+          <div class="flex flex-col items-center">
+            <span class="font-bold">{{ percent }}%</span>
+            <span class="text-sm text-gray-500">Loading...</span>
+          </div>
+        </template>
+      </UProgress>
     </div>
   </div>
 </template>

src/runtime/components/Progress.vue

@@ -84,7 +84,7 @@ const appConfig = useAppConfig() as Progress['AppConfig']
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'getValueLabel', 'modelValue'), emits)
 
-const RADIUS = 35
+const RADIUS = 45
 const circumference = 2 * Math.PI * RADIUS
 
 const isIndeterminate = computed(() => rootProps.value.modelValue === null)
@@ -194,7 +194,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.progress ||
   color: props.color,
   orientation: props.orientation,
   inverted: props.inverted,
-  variant: props.variant
+  variant: props.variant,
+  statusPosition: props.statusPosition
 }))
 </script>
 
@@ -208,7 +209,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.progress ||
 
     <ProgressRoot v-bind="rootProps" :max="realMax" :class="ui.base({ class: props.ui?.base })" style="transform: translateZ(0)">
       <ProgressIndicator v-if="variant === 'linear'" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
-      <template v-if="variant === 'circular'">
+      <template v-else-if="variant === 'circular'">
         <svg
           :class="ui.base({ class: props.ui?.base })"
           viewBox="0 0 100 100"

src/templates.ts

@@ -132,6 +132,7 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
   --outline-color-default: var(--ui-border);
   --outline-color-inverted: var(--ui-border-inverted);
   --stroke-default: var(--ui-border);
+  --stroke-accented: var(--ui-border-accented);
   --stroke-inverted: var(--ui-border-inverted);
   --fill-default: var(--ui-border);
   --fill-inverted: var(--ui-border-inverted);