<script lang="ts" generics="T extends Record<string, unknown>, K extends keyof T & string">import { Validatable } from '../validatable';
import { default as FormField } from './cmp.form-field.svelte';
let { handler, name, label, hint, required = false, validateOn, debounceMs, disableTouchedTracking, reserveErrorSpace = false, on, children } = $props();
</script>

<FormField label={label} hint={hint} required={required}>
  <Validatable
    handler={handler}
    name={name}
    validateOn={validateOn}
    debounceMs={debounceMs}
    disableTouchedTracking={disableTouchedTracking}
    reserveErrorSpace={reserveErrorSpace}
    on={on}
    children={children} />
</FormField>

<!--
@component
FormFieldValidatable — convenience wrapper that composes `<FormField>` and `<Validatable>` in a single component. Reduces the 3-level nesting (FormField → Validatable → Input) to a flat callsite when you need both a label and validation binding.

### Usage
```svelte
<FormFieldValidatable {handler} name="email" label="Email" required>
  {#snippet children(field)}
    <Input {...field} type="email" placeholder="you@example.com" />
  {/snippet}
</FormFieldValidatable>
```

The snippet takes a second `validating: boolean` argument — true from the value change until the validator has caught up, debounce window included. See `Validatable` for what it drives.

Identical visual output to:
```svelte
<FormField label="Email" required>
  <Validatable {handler} name="email">
    {#snippet children(field)}
      <Input {...field} type="email" placeholder="you@example.com" />
    {/snippet}
  </Validatable>
</FormField>
```

Both `FormField`'s label/required and `Validatable`'s no-jump error slot apply unchanged — this cmp adds no styling, just collapses the wiring.
-->
