[InputGroup] Automatic id binding if none provided

[sifferhans]

Describe the solution you'd like

It would be nice if we didn't have to put the same name attribute on both the InputGroup and Input components to get the label connected to the input.

The InputForm component could provide a unique id down to its child and be injected to use there.

export const InputGroupInjectionKey = Symbol('input-group') as InjectionKey<{
	id: string
	// ... possibly other things like `invalid`, `describedBy`
}>

// InputGroup.vue
provide(InputGroupInjectionKey, {
	id // eg. input-group-1k4hfe8sh
})

// Input.vue
const inputGroup = inject(InputGroupInjectionKey, { id: props.name })

This would take the usage of the InputGroup from this:

<form>
	<InputGroup name="name" label="Name">
		<Input name="name" />
	</InputGroup>
</form>

to this:

<form>
	<InputGroup label="Name">
		<Input />
	</InputGroup>
</form>

This is in no way an essential feature, but it would be a nice quality-of-life enhancement in my opinion.
Thank you for this awesome UI library! 🎉