From: Christian Oliff <christian_oliff@trimble.com>
Date: Fri, 22 May 2026 19:28:27 +0000 (+0900)
Subject: v6: Animate accordion details content (#42047)
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=5a6f8ab7e9a6c9b7b9cb6087530fed34d017bca9;p=thirdparty%2Fbootstrap.git

v6: Animate accordion details content (#42047)

Use interpolate-size and ::details-content transitions so accordions
open and close smoothly when motion is not reduced.

Co-authored-by: Cursor <cursoragent@cursor.com>
---

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index 0f8fec4e39..6a9d7d56e3 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -80,6 +80,16 @@ $accordion-tokens: defaults(
     background-color: var(--accordion-bg);
     border: var(--accordion-border-width) solid var(--accordion-border-color);
 
+    @media (prefers-reduced-motion: no-preference) {
+      interpolate-size: allow-keywords;
+    }
+
+    &::details-content {
+      block-size: 0;
+      overflow-y: clip;
+      @include transition(content-visibility .2s allow-discrete, block-size .2s);
+    }
+
     &:first-of-type {
       @include border-top-radius(var(--accordion-border-radius));
 
@@ -107,7 +117,11 @@ $accordion-tokens: defaults(
 
     // Open state - details[open] applies these styles
     &[open] {
+
       border-color: var(--theme-border, var(--accordion-border-color));
+      &::details-content {
+        block-size: auto;
+      }
 
       > .accordion-header {
         color: var(--theme-fg, var(--accordion-active-color));