feat(react-headless-components-preview): add headless Toast component family

[dmytrokirpa]

Summary

Adds headless wrappers for the react-toast component surface to @fluentui/react-headless-components-preview, built on top of the base hooks from #35914.

Depends on #35914 — review/merge that PR first. The diff here includes those changes because this branch was created from it.

Component	Hook used	Key difference vs styled
Toast	useToastBase_unstable	No BackgroundAppearanceProvider wrapper; appearance prop omitted
ToastTitle	useToastTitleBase_unstable	media slot has no automatic intent icon; consumers supply their own
ToastBody	useToastBodyBase_unstable	No backgroundAppearance state
ToastFooter	useToastFooter_unstable	No design-only props — uses regular hook

Toaster and ToastContainer are omitted — their state management is infrastructure-level with no design-only props to strip.

How renderToast works

renderToast_unstable wraps output in <BackgroundAppearanceProvider>. The headless renderToast passes backgroundAppearance: undefined, which is equivalent to no provider — subcomponents receive no appearance context, which is the correct headless behaviour.

Test plan

• Toast renders without any appearance styling applied
• ToastTitle renders media slot empty by default (no icon); consumers can pass their own via the media slot prop
• ToastBody renders correctly without background appearance context
• ToastFooter renders as a plain div
• All four components accept arbitrary className/style

🤖 Generated with Claude Code

[github-actions]

Pull request demo site: URL

[github-actions]

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Charts-DonutChart 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png	7530	Changed
vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png	5570	Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	26	Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png	608	Changed

vr-tests-react-components/ProgressBar converged 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png	129	Changed

vr-tests-react-components/Skeleton converged 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Skeleton converged.Opaque Skeleton with rectangle - Dark Mode.default.chromium.png	4	Changed

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.292 MB 324.681 kB	1.292 MB 324.712 kB	185 B 31 B
react-headless-components-preview react-headless-components-preview: entire library	107.897 kB 31.819 kB	119.025 kB 35.16 kB	11.128 kB 3.341 kB
react-toast Toast (including Toaster)	92.099 kB 28.662 kB	92.12 kB 28.67 kB	21 B 8 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	67.61 kB 19.536 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	226.994 kB 68.166 kB
react-components react-components: FluentProvider & webLightTheme	40.806 kB 13.616 kB
react-portal-compat PortalCompatProvider	5.567 kB 2.237 kB
react-timepicker-compat TimePicker	105.613 kB 35.351 kB

_{🤖 This report was generated against db585d2ae06bbdb75de752d2aaa3347979f7b816}