Fix native component alignment and loading visuals

[Jason Morse (JasonVMo)]

Platforms Impacted

• iOS
• macOS
• win32 (Office)
• windows
• android

The layout primitives use shared React Native code. Native verification for this work focused on desktop; iOS and Android were not natively qualified.

Description of changes

• Fix native vertical alignment without synthetic text heights or glyph offsets. Font icons and Avatar initials use intrinsic line metrics centered within their frames, and LayoutStableText centers visible text without stretching it to the reserve height.
• Keep Input's vertical spacing outside the native editor while preserving its padded pointer target, caller refs, disabled/focusable behavior, and the shared focus-target contract.
• Replace Avatar's native outline activity ring with a persistent decorative border to avoid the RNW Fabric crash, retaining size-dependent gaps and strokes without changing Avatar bounds.
• Restore Skeleton and Spinner motion on macOS Fabric by selecting the JavaScript animation driver for that renderer. Continuous shared loops remain phase-locked, respect reduced motion, and do not hold interaction handles.
• Replace Skeleton's solid strip with a soft 45-degree SVG linear-gradient sweep based on the repository's Shimmer pattern. Preserve the angle across aspect ratios, rounded clipping, unique gradient definitions, and RTL travel. Derive Spinner's quarter-circle dash lengths from circumference rather than unsupported SVG pathLength normalization.
• Restore Storybook canvas contrast by mapping its actual content background to the intended preview surface. Secondary Button's fill was unchanged but matched the regressed canvas; Button and shared design tokens remain unchanged.
• Update component contracts, provenance, authoring guidance, stories, native geometry/motion coverage, and patch changesets.

Related to #4274; this is partial component-readiness work, not completion of that rollup.

Verification

Recorded during implementation on this branch:

• Components: format, lint, build, 20 component contracts, executable story type checks, and 57 suites with 471 tests and eight snapshots.
• Framework Base: format, lint, build, and 22 suites with 180 tests, including renderer-specific animation-driver selection.
• Storybook runtime: format, lint, build, and 14 tests covering canvas mapping, theme changes, fallbacks, and background overrides.
• Root TypeScript build, macOS/Windows/Win32 JavaScript bundles, changeset validation, and the new local Shimmer documentation links.
• Native macOS: reviewed 28 control/primitive scenes, including size extremes and constrained content. LayoutStableText measured a 15-point visible line centered at y=4 in a 23-point reserve. Avatar activity-ring toggling retained bounds at all eight sizes. Input accepted editing and physical activation in its external padding.
• Native macOS loading indicators: executable screenshot checks confirm animation. Six captured Skeleton frames measured 45.0 degrees with twenty grayscale ramp levels, distinguishing the gradient from the former solid strip.
• Native Secondary Button pixels: Default Flex/Light uses #fafafa over #f5f5f5; Dark uses #1f1f1f over #141414. Hover, held press, and release retain the existing component colors.

Native SVG cannot interpolate opaque platform-color stops, so Skeleton explicitly remains static with a native outline and a development diagnostic for those colors. Native high-contrast palette rendering on macOS remains unqualified. This PR does not claim fresh VoiceOver, iOS/Android, or final Windows Fabric visual qualification.

Before	After
Glyph line boxes could be clamped; smaller visible labels occupied the reserve's full height.	Intrinsic text is centered by View layout while ordinary typography line heights remain intact.
Input spacing was inside the native editor, affecting text/caret placement.	External spacing preserves native editor metrics and forwards padding presses to the eligible focus target.
Avatar activity rings used a native outline path that could crash RNW Fabric.	A persistent decorative border changes opacity without late outline creation or size changes.
Skeleton was a hard moving strip, and macOS Fabric loading transforms could remain frozen.	A soft diagonal gradient sweeps across the silhouette using the supported shared animation driver.
Secondary Button and the Storybook canvas used the same neutral fill.	The canvas uses its intended surface, making the unchanged Secondary fill distinguishable.

Pull request checklist

This PR has considered (when applicable):

• Automated Tests
• Documentation and examples
• Keyboard Accessibility
• Voiceover
• Internationalization and Right-to-left Layouts

[github-actions]

Bundle size report

Tree-shaken production Metro bundles. Component costs are relative to their platform shell; shell costs are absolute.

Platform	Scenario	Baseline cost	Current cost	Cost delta	Change	Gzip delta	Module delta
macos	shell	801.3 KiB	801.3 KiB	0.0 KiB	0.00%	0.0 KiB	+0
macos	components-button	50.1 KiB	57.9 KiB	+7.8 KiB	+15.54%	+2.5 KiB	+17
macos	components-catalog	267.3 KiB	282.9 KiB	+15.5 KiB	+5.82%	+5.7 KiB	+24
macos	design-theme-state	33.3 KiB	33.7 KiB	+0.4 KiB	+1.34%	+0.1 KiB	+6
macos	design-themed-root	New	36.1 KiB	New	New	New	New
macos	design-color-lib	7.1 KiB	7.1 KiB	0.0 KiB	0.00%	0.0 KiB	+0
macos	design-theme-state-legacy-source	35.3 KiB	35.8 KiB	+0.4 KiB	+1.26%	+0.1 KiB	+6
macos	design-legacy-theme-from-flex	100.2 KiB	100.7 KiB	+0.4 KiB	+0.45%	+0.1 KiB	+6
windows	shell	810.2 KiB	810.2 KiB	0.0 KiB	0.00%	0.0 KiB	+0
windows	components-button	50.0 KiB	57.7 KiB	+7.7 KiB	+15.39%	+2.6 KiB	+17
windows	components-catalog	267.0 KiB	282.4 KiB	+15.4 KiB	+5.76%	+5.7 KiB	+24
windows	design-theme-state	33.2 KiB	33.7 KiB	+0.5 KiB	+1.36%	+0.1 KiB	+6
windows	design-themed-root	New	36.0 KiB	New	New	New	New
windows	design-color-lib	7.1 KiB	7.1 KiB	0.0 KiB	0.00%	0.0 KiB	+0
windows	design-theme-state-legacy-source	35.3 KiB	35.7 KiB	+0.4 KiB	+1.27%	+0.1 KiB	+6
windows	design-legacy-theme-from-flex	100.0 KiB	100.4 KiB	+0.4 KiB	+0.44%	+0.1 KiB	+6

The job is advisory: size changes are reported but do not fail the pull request. Bundle or analysis errors still fail.

---

View bundle-size workflow run