feat(accordion): close #152 add height transition

Author: BuptStEve

src/components/ui/accordion/accordion-content.astro

@@ -14,7 +14,11 @@ const slot = await Astro.slots.render("default")
   slot?.trim().length > 0 && (
     <div
       data-slot="accordion-content"
-      class={cn("overflow-hidden text-sm", "pt-0 pb-4", className)}
+      class={cn(
+        "text-sm",
+        "pt-0 pb-4",
+        className
+      )}
       {...props}
     >
       <Fragment set:html={slot} />

src/components/ui/accordion/accordion-item.astro

@@ -17,11 +17,22 @@ const slot = await Astro.slots.render("default")
   slot?.trim().length > 0 && (
     <details
       data-slot="accordion-item"
-      class={cn("border-b last:border-b-0", "group", className)}
+      class={cn(
+        "border-b last:border-b-0",
+        "group",
+        "details-content:h-0 [&:open]:details-content:h-auto",
+        "details-content:ease-out",
+        "details-content:duration-200",
+        "details-content:overflow-hidden",
+        "details-content:transition-discrete",
+        "details-content:transition-[height,content-visibility]",
+        className
+      )}
       open={open}
       {...props}
     >
       <Fragment set:html={slot} />
     </details>
   )
 }
+

src/components/ui/accordion/accordion.astro

@@ -12,7 +12,11 @@ const slot = await Astro.slots.render("default")
 
 {
   slot?.trim().length > 0 && (
-    <div data-slot="accordion" class={cn("w-full", className)} {...props}>
+    <div
+      data-slot="accordion"
+      class={cn("w-full [interpolate-size:allow-keywords]", className)}
+      {...props}
+    >
       <Fragment set:html={slot} />
     </div>
   )