Revisit component transitions with support for display: none transitions

[InnaAtanasova]

Description

CSS now supports transitions to and from display: none through discrete property transitions. This gives us an opportunity to revisit the transitions currently implemented across our components and simplify or improve them where possible.

We should review components that currently use transitions involving display: none, particularly where we rely on workarounds, additional classes, JavaScript timing, or other mechanisms to achieve entry/exit animations.

The new CSS capabilities, including transition-behavior: allow-discrete and @starting-style, may allow us to achieve the desired behavior more directly in CSS.

Please use the following video as a reference when evaluating the current implementations:

https://www.youtube.com/watch?v=KD3_l3S_D6M

Goals

• Identify components that currently implement transitions to/from display: none.
• Review the existing implementation and determine whether it can be simplified using the new CSS capabilities.
• Evaluate whether the new approach provides smoother or more consistent entry/exit animations.
• Reduce JavaScript-based transition logic or workarounds where they are no longer necessary.
• Ensure the updated implementations continue to meet our accessibility and reduced-motion requirements.
• Verify browser support and provide appropriate fallbacks where necessary.