[PF-1994] Migrate Modal fix shades

[azebich]

PF-1994

Description

ModalContent renders top/bottom gradient "shades" that hint at scrollable
overflow. Previously each shade was conditionally mounted ({top && …} /
{bottom && …}), so it popped in and out of the DOM as the user scrolled,
with no transition.

This changes both shades to be always rendered and toggled purely in CSS:
visibility is driven from the DOM via a data-active attribute, and the fade
is handled by opacity + transition-opacity duration-300.

Motivations:

• Smooth fade instead of a hard pop — the shade now fades in/out over 300ms
  instead of appearing/disappearing instantly.
• Aligns with the styling doctrine — state-driven styling should use
  data-[…]: variants (read state from the DOM) rather than branching the
  render tree (AGENTS.md › Styling).
• Consistency — duration-300 matches the sibling overlay surface
  (Drawer uses transition-opacity duration-300), and both shades now share
  one class string, fixing a prior mismatch where only the bottom shade carried
  duration-300.

Scope:

• No public API change — Props and classes?: { root, topShade, bottomShade }
  are untouched, so consumers need no migration.
• Scroll detection (use-scrollable-shades) is intentionally unchanged; this PR
  only changes how the shades are displayed. (A CSS-only detection path —
  animation-timeline: scroll() / scroll-state() — isn't viable under the
  repo's browserslist, which still targets Safari 13+ and Firefox.)

How to test

• Temploy
• Open any Modal with content taller than its viewport (e.g. Modal → Dynamic
  Content story).
• Scroll the content down: the top shade should fade in; scroll back up:
  it should fade out. Scroll to the very bottom: the bottom shade should
  fade out.
• With content that fits (no overflow): neither shade should be visible.

Screenshots

Before	After
Shade pops in/out instantly (no transition)	Shade fades in/out over 300ms

Before-1.mp4

After-1.mp4

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4198b2c

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 changesets to release 6 packages

Name	Type
@toptal/picasso-modal	Patch
@toptal/picasso-rich-text-editor	Patch
@toptal/picasso	Patch
@toptal/picasso-prompt-modal	Patch
@toptal/picasso-forms	Patch
@toptal/picasso-query-builder	Patch

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]

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/5015/

This preview is updated automatically when you push changes to this PR.

[github-actions]

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/5015/

This preview is updated automatically when you push changes to this PR.

[github-actions]

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/5015/

This preview is updated automatically when you push changes to this PR.

[github-actions]

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/5015/

This preview is updated automatically when you push changes to this PR.

[dulishkovych]

LGTM

[github-actions]

🗑️ Storybook preview cleaned up

The preview deployment has been automatically removed since this PR was closed.