Skip to content

v6: Add animation for expanding/collapsing accordions #42047

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
coliff wants to merge 2 commits into
base: v6-dev
Choose a base branch
from
Open

v6: Add animation for expanding/collapsing accordions #42047

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3c9091
v6: Accordion Animation
coliff Jan 27, 2026
6e1d2d3
Update .bundlewatch.config.json
coliff Jan 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
},
{
"path": "./dist/css/bootstrap.min.css",
"maxSize": "37.75 kB"
"maxSize": "38.0 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",
Expand Down
14 changes: 14 additions & 0 deletions scss/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,16 @@ $accordion-icon-transform: rotate(-180deg) !default;
background-color: var(--accordion-bg);
border: var(--accordion-border-width) solid var(--accordion-border-color);

@media (prefers-reduced-motion: no-preference) {
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The interpolate-size CSS property is a very recent addition to the CSS specification and is currently only supported in Chromium 129+ (released September 2024). It's not yet supported in Firefox or Safari as of January 2025. Since this is a cutting-edge feature with limited browser support, consider adding a comment documenting the browser compatibility requirements and fallback behavior for unsupported browsers.

Suggested change
@media (prefers-reduced-motion: no-preference) {
@media (prefers-reduced-motion: no-preference) {
// NOTE: `interpolate-size` is only supported in Chromium 129+ (as of Jan 2025).
// In Firefox and Safari this declaration is ignored; the accordion still works,
// but size changes are not interpolated during the block-size transition.
// This is a progressive enhancement on top of the block-size transition below.

Copilot uses AI. Check for mistakes.
interpolate-size: allow-keywords;
}

&::details-content {
block-size: 0;
overflow-y: clip;
@include transition(content-visibility .2s allow-discrete, block-size .2s);
Comment on lines +107 to +112
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The interpolate-size property is placed inside a @media (prefers-reduced-motion: no-preference) block, but the @include transition() mixin on line 112 will generate its own @media (prefers-reduced-motion: reduce) block that sets transition: none. This creates a confusing structure where interpolate-size is only set when the user has no motion preference, but transitions are handled separately by the mixin. Consider placing the entire animation block (lines 109-113) inside the media query for consistency, or document why only interpolate-size needs to be conditionally applied.

Suggested change
}
&::details-content {
block-size: 0;
overflow-y: clip;
@include transition(content-visibility .2s allow-discrete, block-size .2s);
&::details-content {
@include transition(content-visibility .2s allow-discrete, block-size .2s);
}
}
&::details-content {
block-size: 0;
overflow-y: clip;

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The transition includes content-visibility as a transitioning property. However, content-visibility is not an animatable CSS property according to the CSS specification. While the allow-discrete keyword enables transitions for discrete properties, content-visibility is not listed as a property that can be transitioned even with this keyword. This will likely not produce the intended animation effect. The intended property for animating the visibility of details content is typically handled through height or block-size transitions, which is already included.

Suggested change
@include transition(content-visibility .2s allow-discrete, block-size .2s);
@include transition(block-size .2s);

Copilot uses AI. Check for mistakes.
}
Comment on lines +109 to +113
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The ::details-content pseudo-element only applies to HTML <details> elements. However, the current codebase shows that .accordion-item is implemented as a <div> element (see site/src/assets/examples/cheatsheet/index.astro lines 607, 619, 631). This CSS will not work unless the HTML structure is changed to use <details> elements instead of <div> elements. If this PR is meant to transition accordions to use the native <details> element, then corresponding HTML changes should be included in this PR or clearly documented.

Copilot uses AI. Check for mistakes.

&:first-of-type {
@include border-top-radius(var(--accordion-border-radius));

Expand Down Expand Up @@ -129,7 +139,11 @@ $accordion-icon-transform: rotate(-180deg) !default;

// Open state - details[open] applies these styles
&[open] {

border-color: var(--theme-border, var(--accordion-border-color));
&::details-content {
block-size: auto;
}
Comment on lines 141 to +146
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The &[open] selector is specific to the <details> element's open attribute. Since the current accordion implementation uses <div> elements, this selector will not match anything. The existing code uses classes like .show or .collapse for managing accordion state. If transitioning to <details> elements, the HTML structure needs to be updated accordingly.

Copilot uses AI. Check for mistakes.

> .accordion-header {
color: var(--theme-text, var(--accordion-active-color));
Expand Down