[Collapsible] Rework CSS transitions

[mj12albert]

Demo: https://deploy-preview-1549--base-ui.netlify.app/experiments/collapsible/transition

Exploring a solution for both #1334 and #1458

Findings:

• Tailwind v4 defaults started applying display: none !important on [hidden] which we must override in order to measure the node

• New gotcha: when transitioning multiple properties e.g. opacity and height together, transition-property must list individual properties (transition-property: height, opacity) instead of all solved and not a limitation anymore ✌️

• Used an AbortController to cancel pending unmounts if the open state changes back to open before the pending unmount actually occurs (which is after the duration of the exit transition). I wonder if CSS animations can be made interruptible like transitions with AbortController.

• Using element.style.removeProperty('height') leads to huge improvements in the timing/consistency vs element.style.height = '' (or even '0px')

• There is a weird edge case when keepMounted={false} and the panel is initially closed, when it opens for the first time and only the first time data-starting-style is missing or off by a frame and it needs to be manually set: element.setAttribute('data-starting-style', '')

• I have followed (at least) the PR section of the contributing guide.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	5c9a159
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/67da52a4bd1ead00087df245
😎 Deploy Preview	https://deploy-preview-1549--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mj12albert]

Tailwind v4 preflight contains:

[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

which interferes when we need to set display: block while the panel is still hidden to measure it's rendered size before the browser actually renders the change

Setting !important in our inline styles should be enough as long as they are removed accordingly