fix(react): Remove inline styles and wrapper markup from components

[LinnJS]

Description

Remove all inline style={{}} attributes, hardcoded VA DS utility classes (vads-u-*), hardcoded CSS class names, and layout wrapper <div> elements from library components. Add data-slot attributes as semantic styling hooks for consumers. The form system now outputs clean semantic HTML, leaving styling entirely to the consumer/VA Design System.

Related Issues

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as
  expected)
• Documentation update
• Refactoring (no functional changes)
• Performance improvement
• Test update

Packages Affected

• @formkit-gov/core
• @formkit-gov/react
• @formkit-gov/store
• @formkit-gov/wizard
• @formkit-gov/openapi
• @formkit-gov/validators
• @formkit-gov/test-utils
• Documentation
• CI/CD

Checklist

Code Quality

• My code follows the project's coding standards
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings

Testing

• I have added tests that prove my fix is effective or my feature works
• New and existing unit tests pass locally with my changes
• I have tested my changes in multiple browsers (if applicable)

Documentation

• I have updated the documentation accordingly
• I have added JSDoc comments for new public APIs
• I have updated Storybook stories (if applicable)

Changesets

• I have created a changeset for this PR (run pnpm changeset)
• The changeset accurately describes the changes and their impact

Testing Instructions

1. pnpm install && pnpm test — all 1,280 tests pass
2. pnpm typecheck — no TypeScript errors
3. pnpm lint — no new warnings
4. grep -r "style={{" packages/react/src/components/ — zero results in library code

Additional Notes

Breaking Changes

• ReviewList ref type changed from HTMLDivElement to HTMLElement (wrapper div removed, list element is now root)
• AddressField state/zip fields no longer wrapped in flex container (stack vertically by default)
• ReviewSection children no longer wrapped in flex column div
• Default browser <fieldset> border/padding now visible on AddressField (previously suppressed with inline styles)

What was removed

• All inline style={{}} attributes from review, molecule, and form components
• Hardcoded CSS classes: vads-u-margin-y--2, vads-u-font-size--lg, vads-u-font-weight--bold, review-item, review-section, review-list
• Layout wrapper <div> elements: ReviewSection header/children wrappers, ReviewList outer wrapper + inner li wrappers, AddressField state/zip flex container
• JSDoc examples demonstrating styling patterns

What was added

• data-slot attributes on all component elements as consumer styling hooks
• data-list-style attribute on ReviewList for list style variant
• className prop on AddressFieldProps and FullNameFieldProps

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs.formkit-gov.org	Building	Preview, Comment	Feb 25, 2026 4:07am
formkit-gov-demo-nextjs	Building	Preview, Comment	Feb 25, 2026 4:07am
storybook.formkit-gov.org	Building	Preview, Comment	Feb 25, 2026 4:07am
vite-demo.formkit-gov.org	Ready	Preview, Comment	Feb 25, 2026 4:07am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
formkit-gov.org	Skipped		Feb 25, 2026 4:07am