feat(Field): start implementing field api

[eirikbacker]

Fixes #1943
For now just testing creating a <Field> component, which uses a utility that works with the real DOM, making it possible to use in a future custom element <ds-field> as well. This also allows injecting any form element - not just made by us, but any native form element, any form associated custom element or third party components.

By using native DOM, there is no Context that needs to run on server, and all the wire-up is only for assistive technology - it does not effect the visual representation, meaning it can be done under the hood on the client without causing any layout shift or similar issues.

API:

<Field>
  <Label>Label text</Label>
  <Field.Description>Description</Field.Description> // Should be without Field.? :)
  <Input />
  <ValidationMessage>Validation message</ValidationMessage> // Should be Field.Validation.? :)
</Field>

• More tests are needed, and moving Affix and Counter into Field is needed, but keeping this PR small so we can divide the task between us :)

[changeset-bot]

🦋 Changeset detected

Latest commit: c339c1b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@digdir/designsystemet-css	Patch
@digdir/designsystemet-react	Patch
@digdir/designsystemet	Patch
@digdir/designsystemet-theme	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Preview deployments for this pull request:

Storybook - 18. Oct 2024 - 14:01

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	57.83%	3624 / 6266
🔵	Statements	57.83%	3624 / 6266
🔵	Functions	83.91%	167 / 199
🔵	Branches	75.69%	514 / 679

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
packages/react/src/components/ValidationMessage/ValidationMessage.tsx	100%	100%	100%	100%
packages/react/src/components/form/Field/Field.tsx	35.71%	100%	0%	35.71%	9-14, 16-17, 19
packages/react/src/components/form/Field/FieldDescription.tsx	66.66%	100%	0%	66.66%	10-11
packages/react/src/components/form/Field/fieldObserver.ts	84.28%	60%	87.5%	84.28%	30, 32-37, 87-90

Generated in workflow #434 for commit c339c1b by the Vitest Coverage Report Action

[Barsnes]

We should probably have a changeset for this

[mimarz]

Just some small stuff on code readability.

This is a good starting point for us to start using, and we'll just tweak going forward.

I also updated #2311 CharacterCounter so we don't forget we need to figure out how to solve that.