From b7001b4f02d8375395ac12db7d675d4ec304e067 Mon Sep 17 00:00:00 2001
From: Jimmy <101801301+JimmyHoenderdaal@users.noreply.github.com>
Date: Mon, 18 May 2026 15:03:19 +0200
Subject: [PATCH 1/2] Update accordion.blade.php

---
 resources/views/components/accordion/accordion.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/components/accordion/accordion.blade.php b/resources/views/components/accordion/accordion.blade.php
index e958aa23..65cfc10b 100644
--- a/resources/views/components/accordion/accordion.blade.php
+++ b/resources/views/components/accordion/accordion.blade.php
@@ -42,7 +42,7 @@
 @slots(['label', 'content', 'icon'])
 
 <details
-    {{ $attributes->twMerge('group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto') }}
+    {{ $attributes->twMerge('group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto') }}
 >
     <summary {{ $label->attributes->twMerge('flex items-center font-medium py-3.5 cursor-pointer list-none') }}>
         {{ $label }}

From da28d5062bc6e61a1b3c65e3f4d5269b2022e30c Mon Sep 17 00:00:00 2001
From: JimmyHoenderdaal <JimmyHoenderdaal@users.noreply.github.com>
Date: Mon, 18 May 2026 13:03:41 +0000
Subject: [PATCH 2/2] Update demo

---
 demo/components.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/demo/components.html b/demo/components.html
index 963fa0f8..ecec20cd 100644
--- a/demo/components.html
+++ b/demo/components.html
@@ -451,7 +451,7 @@ <h3 class="text-xl font-bold">Default usage</h3>
                 </div>
                 <div class="flex flex-col gap-3">
                     <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Question 1
@@ -465,7 +465,7 @@ <h3 class="text-xl font-bold">Default usage</h3>
     </div>
 </details>
                     <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Question 2
@@ -481,7 +481,7 @@ <h3 class="text-xl font-bold">Default usage</h3>
                 </div>
                 <div class="flex flex-col gap-3">
                     <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3" name="single"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3" name="single"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Single open 1
@@ -495,7 +495,7 @@ <h3 class="text-xl font-bold">Default usage</h3>
     </div>
 </details>
                     <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3" name="single"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3" name="single"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Single open 2
@@ -519,7 +519,7 @@ <h3 class="text-xl font-bold">Accordion with custom icon</h3>
                     </div>
                 </div>
                 <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Question 1
@@ -536,7 +536,7 @@ <h3 class="text-xl font-bold">Accordion with custom icon</h3>
     </div>
 </details>
                 <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Question 2
@@ -562,7 +562,7 @@ <h3 class="text-xl font-bold">Accordion without icon</h3>
                     </div>
                 </div>
                 <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Question 1
@@ -574,7 +574,7 @@ <h3 class="text-xl font-bold">Accordion without icon</h3>
     </div>
 </details>
                 <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Question 2