fix(Collapsible): CSS-driven accordion height animation (#1917)

[kotAPI]

Summary

• When transitionDuration={0}, Collapsible content no longer sets inline height in the steady open state so consumers can animate expand/collapse via CSS keyframes on data-state.
• Measured dimensions remain available on --radix-collapsible-content-height / --radix-collapsible-content-width, with a re-render bump so defaultOpen exposes correct values.
• Accordion.Content forwards --rad-accordion-content-height and --rad-accordion-content-width aliases for Radix-style migration.

Related to #1917 (CSS animation parity); does not address the type="single" value shape gap.

Test plan

• npm test -- src/core/primitives/Collapsible/tests/Collapsible.test.tsx
• Verify Accordion with transitionDuration={0} and CSS keyframes using var(--rad-accordion-content-height)

Summary by CodeRabbit

• Bug Fixes
  • Improved collapsible component behavior when using instant (zero-duration) transitions to properly handle content measurements and display updates.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5fed2d2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Coverage

This report compares the PR with the base branch. "Δ" shows how the PR affects each metric.

Metric	PR	Δ
Statements	75.75%	+0.02%
Branches	59.24%	+0.07%
Functions	61.79%	+0.04%
Lines	77.28%	+0.02%

Coverage improved or stayed the same. Great job!

Run npm run coverage:ci locally for detailed reports and target untested areas to raise these numbers.

[coderabbitai]

📝 Walkthrough

Walkthrough

CollapsiblePrimitiveContent gains a cssVarRevision state to force CSS variable re-reads when opened with transitionDuration === 0, and omits the inline height style in that open state. AccordionContent renames its CSS custom property prefix from --radix-accordion-content-* to --rad-accordion-content-*. Two new tests cover both steady-open and toggle-open zero-duration scenarios.

Changes

Collapsible zero-duration height fix and accordion CSS var rename

Layer / File(s)	Summary
CollapsiblePrimitiveContent zero-duration height and CSS var logic src/core/primitives/Collapsible/fragments/CollapsiblePrimitiveContent.tsx	Adds cssVarRevision state; increments it when open is true in the transitionDuration === 0 branch; refactors inline style to omit height when transitionDuration === 0 and open.
AccordionContent CSS variable prefix rename src/components/ui/Accordion/fragments/AccordionContent.tsx	Renames CSS custom property keys from --radix-accordion-content-* to --rad-accordion-content-*.
Tests for zero-duration collapsible behavior src/core/primitives/Collapsible/tests/Collapsible.test.tsx	Adds two tests: one for defaultOpen steady state and one for toggle-open, both asserting inline height is cleared and the Radix CSS height variable reflects the mocked measurement.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• BUG: Accordion: two API parity gaps with Radix that complicate drop-in migration #1917: This PR directly implements the fix described in that issue by exposing --rad-accordion-content-height/--rad-accordion-content-width CSS custom properties and omitting inline height when transitionDuration === 0, enabling CSS-driven animations.

Possibly related PRs

• rad-ui/ui#947: Implements the original CollapsiblePrimitiveContent where the transitionDuration === 0 height/CSS-var behavior being modified here was first introduced.
• rad-ui/ui#950: Refactors collapsible content height and animation logic in CollapsiblePrimitiveContent, directly overlapping with this PR's changes to the same branch.
• rad-ui/ui#1923: Also modifies CollapsiblePrimitiveContent to change open/render behavior via hasInitializedRef, making it closely related to this PR's zero-duration open handling.

Suggested labels

automerge

🐇 Hop, hop, no height to hold,
The accordion reveals bold!
--rad- now leads the way,
CSS vars are here to stay,
Zero duration? Still the show!
My ears bounce with every flow~ 🌸

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title 'fix(Collapsible): CSS-driven accordion height animation' accurately reflects the main change: fixing CSS-driven height animations in the Collapsible component by removing inline height styles when transitionDuration={0}, enabling CSS keyframe animations via data-state.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/issue-1917-collapsible-css-animation

---

_{Comment @coderabbitai help to get the list of available commands.}

[kotAPI]

Code review

LGTM. Matches project patterns for portal Theme refs, Floating UI prop merge, controlled-switch/lazy-mount/RTL tests, or focused bug fixes. No changes requested.