chore(collapsible/accordion): merge animations

playground/pages/accordion.vue

@@ -29,7 +29,9 @@ const items = [{
 </script>
 
 <template>
-  <UCard :ui="{ body: 'p-0 sm:p-0' }">
-    <UAccordion :items="items" class="w-96" :ui="{ trigger: 'px-3.5', content: 'px-3.5' }" />
-  </UCard>
+  <div class="flex-1">
+    <UCard :ui="{ body: 'p-0 sm:p-0' }">
+      <UAccordion :items="items" class="w-96" :ui="{ trigger: 'px-3.5', content: 'px-3.5' }" />
+    </UCard>
+  </div>
 </template>

playground/pages/collapsible.vue

@@ -1,16 +1,23 @@
-<template>
-  <UCollapsible class="space-y-2 w-48">
-    <UButton
-      class="group"
-      trailing-icon="i-heroicons-chevron-right-20-solid"
-      color="gray"
-      label="Open"
-      block
-      :ui="{ trailingIcon: 'group-data-[state=open]:rotate-90 transition-transform duration-200' }"
-    />
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
 
-    <template #content>
-      <Placeholder class="h-24 w-full" />
-    </template>
-  </UCollapsible>
+<template>
+  <div class="flex-1">
+    <UCollapsible class="space-y-2 w-48">
+      <UButton
+        class="group"
+        icon="i-heroicons-light-bulb"
+        :trailing-icon="appConfig.ui.icons.chevronDown"
+        color="gray"
+        label="Open"
+        block
+        :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+      />
+
+      <template #content>
+        <Placeholder class="h-96 w-full" />
+      </template>
+    </UCollapsible>
+  </div>
 </template>