Components: Standardize reduced motion handling using media queries

[SainathPoojary]

Part of: #68282

What?

Refactors animation and transition styles to use @media not (prefers-reduced-motion) ensuring better accessibility for users who prefer reduced motion.

Why?

Currently, many parts of the codebase do not consider users’ motion preferences, which may not be suitable for those with reduced motion settings. This PR addresses and resolves that issue.

Screenshots or screencast

Button:

Transition:

2024-12-31.11-44-38.mp4

Animation

2024-12-31.11-55-39.mp4

checkbox-control:

Transition:

2024-12-31.12-34-35.mp4

circular-option-picker:

Transition:

2024-12-31.14-14-36.mp4

form-toggle:

Transition:

2024-12-31.14-42-02.mp4

form-token-field:

Transition:

2024-12-31.14-51-53.mp4

panel:

Transition:

2024-12-31.15-02-18.mp4

placeholder:

Transition:

2024-12-31.16-36-46.mp4

resizable-box:

Transition:

2025-01-02.13-28-56.mp4

Animation:

2025-01-02.13-48-27.mp4

tab-panel:

Transition:

2025-01-02.14-14-06.mp4

drop-zone:

Transition:

2025-01-02.14-29-09.mp4

animate

modal

toolbar

[SainathPoojary]

Hey @t-hamano,

This package includes several components. Would it be better to raise a new PR for the remaining components, or should I add them to this PR?

Components currently in PR:

button
checkbox-control
circular-option-picker
form-toggle
form-token-field
panel
placeholder

Remaining components:

resizable-box
tab-panel
animate
modal
toolbar
drop-zone

[t-hamano]

@SainathPoojary Thanks for working on this issue.

This package includes several components. Would it be better to raise a new PR for the remaining components, or should I add them to this PR?

It will be easy to test this PR because almost all components are published in Storybook, so I personally think it's okay to include all components in this PR.

[SainathPoojary]

Got it, I agree! I’ll include the remaining components in this PR.