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>

src/templates.ts

@@ -17,20 +17,11 @@ export function addTemplates (options: ModuleOptions, nuxt: Nuxt) {
     color-scheme: light dark;
   }
 
-  @keyframes accordion-up {
-    from { height: var(--radix-accordion-content-height); }
-    to { height: 0; }
-  }
-  @keyframes accordion-down {
-    from { height: 0; }
-    to { height: var(--radix-accordion-content-height); }
-  }
-
-  @keyframes collapsible-up {
+  @keyframes slide-up {
     from { height: var(--radix-collapsible-content-height); }
     to { height: 0; }
   }
-  @keyframes collapsible-down {
+  @keyframes slide-down {
     from { height: 0; }
     to { height: var(--radix-collapsible-content-height); }
   }

src/theme/accordion.ts

@@ -4,7 +4,7 @@ export default {
     item: 'border-b border-gray-200 dark:border-gray-800 last:border-b-0',
     header: 'flex',
     trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400',
-    content: 'text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none',
+    content: 'text-sm pb-3.5 data-[state=open]:animate-[slide-down_200ms_ease-out] data-[state=closed]:animate-[slide-up_200ms_ease-out] overflow-hidden focus:outline-none',
     leadingIcon: 'shrink-0 size-5',
     trailingIcon: 'ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200',
     label: 'truncate'

src/theme/collapsible.ts

@@ -1,6 +1,6 @@
 export default {
   slots: {
     root: '',
-    content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-in-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-in-out] overflow-hidden'
+    content: 'data-[state=open]:animate-[slide-down_200ms_ease-out] data-[state=closed]:animate-[slide-up_200ms_ease-out] overflow-hidden'
   }
 }