Implement animation tokens for more control

In view of https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html, would it be possible to provide more/better control over MD components animation?

For instance, would it be possible to express all animation duration as a css variable so as to contol it over a @media (prefers-reduced-motion: reduce) global statement (inspired for example by https://www.silvestar.codes/articles/using-css-variables-for-reduced-motion-on-a-global-scale/ or https://web.dev/learn/accessibility/motion/) ?

We are using this strategy with success at https:accessiblesurveys.com on our own components. For the time being, we override all MD components for which we need to control animation behaviors.

It would be simpler to provide this by default for the release of the next MD spec (MD3).

No files, tests, or entry points are named. Review the animation durations across the MD components and the linked WCAG and reduced-motion guidance first; done means animation behavior can be controlled consistently through CSS variables and reduced-motion preferences without component-specific overrides.