feat(Accordion): add body slot to solve animation flick

docs/app/components/content/examples/accordion/AccordionBodySlotExample.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Icons',
+    icon: 'i-heroicons-face-smile'
+  },
+  {
+    label: 'Colors',
+    icon: 'i-heroicons-swatch'
+  },
+  {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent'
+  }
+]
+</script>
+
+<template>
+  <UAccordion :items="items">
+    <template #body="{ item }">
+      This is the {{ item.label }} panel.
+    </template>
+  </UAccordion>
+</template>

docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 const items = [
-  {
-    label: 'Colors',
-    icon: 'i-heroicons-swatch'
-  },
   {
     label: 'Icons',
     icon: 'i-heroicons-face-smile'
   },
+  {
+    label: 'Colors',
+    icon: 'i-heroicons-swatch'
+  },
   {
     label: 'Components',
     icon: 'i-heroicons-cube-transparent'
@@ -18,7 +18,9 @@ const items = [
 <template>
   <UAccordion :items="items">
     <template #content="{ item }">
-      <p>This is the {{ item.label }} panel.</p>
+      <p class="pb-3.5 text-sm text-gray-500 dark:text-gray-400">
+        This is the {{ item.label }} panel.
+      </p>
     </template>
   </UAccordion>
 </template>

docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 const items = [
+  {
+    label: 'Icons',
+    icon: 'i-heroicons-face-smile',
+    content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+  },
   {
     label: 'Colors',
     icon: 'i-heroicons-swatch',
     slot: 'colors',
     content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
   },
-  {
-    label: 'Icons',
-    icon: 'i-heroicons-face-smile',
-    content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
-  },
   {
     label: 'Components',
     icon: 'i-heroicons-cube-transparent',
@@ -22,7 +22,7 @@ const items = [
 <template>
   <UAccordion :items="items">
     <template #colors="{ item }">
-      <p class="text-primary-500 dark:text-primary-400">
+      <p class="text-sm pb-3.5 text-primary-500 dark:text-primary-400">
         {{ item.content }}
       </p>
     </template>

docs/app/components/content/examples/accordion/AccordionModelValueExample.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 const items = [
-  {
-    label: 'Colors',
-    icon: 'i-heroicons-swatch',
-    content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
-  },
   {
     label: 'Icons',
     icon: 'i-heroicons-face-smile',
     content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
   },
+  {
+    label: 'Colors',
+    icon: 'i-heroicons-swatch',
+    content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+  },
   {
     label: 'Components',
     icon: 'i-heroicons-cube-transparent',