v6: Add animation for expanding/collapsing accordions

[coliff]

Description

Add animation for expanding/collapsing accordions. This is only available in Chromium browsers right now but coming to Firefox (any probably Safari) soon.

It supports the prefers-reduced-motion media query too.

Copied from demo/code for Bootstrap 5: https://code.christianoliff.com/bootstrap-accordion-no-js/

(Originally inspired by https://nerdy.dev/open-and-close-transitions-for-the-details-element).

Motivation & Context

Nicer UX for browsers which support it. Discussed with @mdo on chat. :-)

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-42047--twbs-bootstrap.netlify.app/docs/5.3/components/accordion/#example

[Copilot]

Pull request overview

This PR attempts to add CSS-based animations for expanding/collapsing accordions using the modern ::details-content pseudo-element and related properties. However, there is a significant mismatch between the PR title ("Don't disallow calc") and the actual changes being made.

Changes:

• Adds interpolate-size: allow-keywords property wrapped in a prefers-reduced-motion: no-preference media query
• Implements ::details-content pseudo-element styling with transitions for content-visibility and block-size
• Adds additional ::details-content styling for the open state of accordion items

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

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]

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]

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]

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]

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);