feat(ScrollArea): add fade prop for fading scrollable sides, migrate Table fade to scroll-driven animations

[blvdmitry]

Summary

Adds a new fade boolean prop to ScrollArea that displays a fade mask on the sides of the area that can be scrolled towards, and migrates the existing Table scroll fade to the same technique.

The implementation is CSS-only, built on scroll-driven animations instead of the JS-toggled class approach used by the older fade implementations:

• Registered @property custom properties (--rs-scroll-area-fade-{block,inline}-{start,end}, --rs-table-fade-{start,end}) drive the stop positions of mask-image linear gradients (ScrollArea combines the two axes with mask-composite: intersect). The alpha falloff is eased (smoothstep approximated with intermediate stops at fractions of the fade size) rather than a linear ramp.
• Each fade size is animated with animation-timeline: scroll(self block/inline) and an animation-range covering the first/last fade-size distance of the scroll range, so a fade appears only on the sides with remaining scrollable content and reacts to scrolling without any JS.
• Scroll timelines stay inactive for axes without overflow, so non-scrollable sides render no fade at all.
• In ScrollArea, the mask is applied to the internal scrollable element, which the custom scrollbars are siblings of — the scrollbars stay unmasked.
• RTL is handled by flipping the inline gradient direction under [dir="rtl"].
• The fade blocks are wrapped in @supports (animation-timeline: ...): browsers without scroll-driven animations support (e.g. current stable Firefox) render without the fade.

Table migration: Table no longer uses the useFadeSide hook — its scroll/resize listeners, React state updates and JS RTL scrollLeft handling are removed, along with the --fade-start/--fade-end classes and the @property transition. The fade now also grows proportionally with the scroll position and uses the same eased gradient as ScrollArea. useFadeSide itself is kept since Tabs still uses it for its scroll control buttons. Note this changes Table's fade behavior in stable Firefox (no fade until it ships scroll-driven animations), where the previous JS implementation rendered one.

Also adds a fade Storybook story and changesets (minor for the ScrollArea prop, patch for the Table refactor).

Related Issue

N/A

Screenshots / Recordings

Verified in Chromium via Storybook, for both ScrollArea and Table:

• At scroll start: fade only on the end sides; both fades while mid-scroll; fade disappears on a side once fully scrolled towards it.
• No fade at all when the content doesn't overflow.
• RTL: horizontal fade renders on the correct logical side.

Notes for Reviewers

• The fade sizes can be themed by overriding --rs-scroll-area-fade-size / --rs-table-fade-size (set on the root elements; Table keeps its previous --rs-unit-x4, ScrollArea uses --rs-unit-x6).
• @property initial values keep the fades at 0, so even where the mask applies but animations somehow don't run, the mask resolves to fully opaque (no visual change).
• ScrollArea (8/8) and Table (9/9) storybook tests pass, plus stylelint/oxlint/tsc.

🤖 Generated with Claude Code

https://claude.ai/code/session_01VTo6CXkUBtLeftQaZ9RU4X

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
Library / JS	48.96 KB (-0.05% 🔽)	980 ms (-0.05% 🔽)	342 ms (+3.88% 🔺)	1.4 s
Library / CSS	22.98 KB (+2.51% 🔺)	460 ms (+2.51% 🔺)	0 ms (+100% 🔺)	460 ms
Theming / JS	7.81 KB (0%)	157 ms (0%)	461 ms (+1811.48% 🔺)	617 ms
Theming with a default theme definition / JS	8.65 KB (0%)	174 ms (0%)	288 ms (+384.56% 🔺)	461 ms