feat(react-headless-components-preview): add swatch picker controls

[Dmytro Kirpa (dmytrokirpa)]

Motivation

Add an unstyled SwatchPicker family to @fluentui/react-headless-components-preview. The controls reuse the state and interaction behavior extracted in #36534 while leaving layout and visual treatment to consumers.

Changes

• add headless SwatchPicker, SwatchPickerRow, ColorSwatch, ImageSwatch, and EmptySwatch components
• compose the controls from @fluentui/react-swatch-picker base hooks and shared context
• add grid navigation behavior and state data attributes for consumer styling
• add tests and Storybook examples
• export the family through the swatch-picker package entry point
• add API output, bundle-size coverage, dependency metadata, and a change file

Review guidance

Review this PR relative to feat/swatch-picker-headless-base. The component layer intentionally adds no Griffel styles; story styles are consumer examples only.

Validation

• yarn nx run-many -t lint test type-check bundle-size -p react-headless-components-preview --nxBail

PR stack

1. test(react-swatch-picker): add hook state coverage #36533
2. feat(react-swatch-picker): expose headless base APIs #36534
3. This PR: add headless SwatchPicker controls

Depends on #36534 and should be merged last.

[Copilot]

Pull request overview

Copilot reviewed 46 out of 47 changed files in this pull request and generated no new comments.

Suppressed comments (3)

packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/useSwatchPicker.ts:17

• The documented state-attribute contract is not implemented here. useSwatchPickerBase_unstable does not emit data-layout or data-focus-mode, and this wrapper only adds navigation props; similarly, the direct Color/Empty wrappers never emit the advertised data-selected/data-disabled attributes. Consumers therefore cannot use the styling API promised by the PR and SwatchPickerDescription.md. Please decorate each affected base state, extend the corresponding state types, and assert these attributes in the component tests.
  change/@fluentui-react-headless-components-preview-931596e2-bc46-4837-a7cc-db12b9edd5cd.json:3
• Beachball comments should omit the conventional-commit prefix because packageName on line 4 already supplies the package context. Keep the release-note text as the user-facing change description only.

  "comment": "feat: add swatch picker components",

packages/react-components/react-headless-components-preview/library/src/hooks/useGridNavigation/useGridNavigation.ts:201

• Navigation keys are only canceled when a destination is found. At a non-circular boundary, in a single-cell grid, or when the target column has no enabled cell, ArrowUp/ArrowDown/Home/End retain their browser default and can scroll the page while focus remains in the grid. Cancel recognized navigation keys once a valid current cell is found, regardless of whether focus moves.

[github-actions]

Pull request demo site: URL