data-testid property does not exist on Form.Root

[moreorover]

Current Behavior

<script lang="ts">
    import type { PageData } from './$types';
    import * as Form from '$lib/components/ui/form';
    import { registerSchema, type RegisterSchema } from '$lib/schema/loginSchema';
    import type { SuperValidated } from 'sveltekit-superforms';

    export let data: PageData;

    let form: SuperValidated<RegisterSchema> = data.form;
</script>

<Form.Root method="POST" {form} schema={registerSchema} let:config data-testid="register-form">
    <Form.Field {config} name="full_name">
        <Form.Item>
            <Form.Label>Full Name</Form.Label>
            <Form.Input data-testid="full_name" />
            <Form.Validation />
        </Form.Item>
    </Form.Field>
    <Form.Button>Register</Form.Button>
</Form.Root>

Produces the following error:

Svelte: Object literal may only specify known properties, and "data-testid" does not exist in type

When running in DEV mode data-testid property gets attached to the form element on the client, but it should not complain.

Expected Behavior

Error should not be produced.

Steps To Reproduce

<script lang="ts">
    import type { PageData } from './$types';
    import * as Form from '$lib/components/ui/form';
    import { registerSchema, type RegisterSchema } from '$lib/schema/loginSchema';
    import type { SuperValidated } from 'sveltekit-superforms';

    export let data: PageData;

    let form: SuperValidated<RegisterSchema> = data.form;
</script>

<Form.Root method="POST" {form} schema={registerSchema} let:config data-testid="register-form">
    <Form.Field {config} name="full_name">
        <Form.Item>
            <Form.Label>Full Name</Form.Label>
            <Form.Input data-testid="full_name" />
            <Form.Validation />
        </Form.Item>
    </Form.Field>
    <Form.Button>Register</Form.Button>
</Form.Root>

Reproducer on Stackblitz does not show this error, however, on my local system I'm using WebStorm and receiving the following:

Link to Reproduction / Stackblitz (reproduction template)

https://stackblitz.com/edit/github-zutndn?file=src%2Froutes%2F%2Bpage.svelte

More Information

No response

[huntabyte]

I think you should be able to get around this annoying issue by doing something like:

<script>

    const formAttrs = {
        'data-testid': 'form'
    }
</script>

<Form.Root {...formAttrs} />

[moreorover]

Error does not go away with your suggestion.

[moreorover]

it is strange because on other form elements this does not produce such error message, like

<Form.Input data-testid="email" />