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 0f8fec4e39ced5c03ce8d8d6ae5391bc89d785e3..6a9d7d56e378a4261a29b36463ecd8613525b9cd 100644 (file)
--- 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));