Drive Form root attrs from Soma runtime

src/uix/morfo/components/form.ts

@@ -24,11 +24,11 @@ export const formMorfo = {
 			defaultElement: 'form',
 			optional: false,
 			data: [
-				{ attr: 'data-pending', severity: 'optional' },
+				{ attr: 'data-pending', value: v.propRef('isPending'), severity: 'optional' },
-				{ attr: 'data-dirty', severity: 'optional' },
+				{ attr: 'data-dirty', value: v.propRef('dirty'), severity: 'optional' },
-				{ attr: 'data-touched', severity: 'optional' },
+				{ attr: 'data-touched', value: v.propRef('touched'), severity: 'optional' },
-				{ attr: 'data-invalid', severity: 'optional' },
+				{ attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' },
-				{ attr: 'data-submitted', severity: 'optional' }
+				{ attr: 'data-submitted', value: v.propRef('submitted'), severity: 'optional' }
 			],
 			aria: [
 				{

src/uix/soma/components/form/form-provider.svelte.ts

@@ -45,12 +45,21 @@ export class FormProvider<TForm extends Form = Form> {
 	private constructor(opts: FormProviderOpts<TForm>) {
 		this.opts = opts;
 		this.soma = Soma.require();
-		this.runtime = this.soma.runtime(formMorfo, {});
+		this.runtime = this.soma.runtime(formMorfo, {
+			props: {
+				isPending: () => this.isPending,
+				dirty: () => this.isDirty,
+				touched: () => this.isTouched,
+				invalid: () => this.isInvalid && this.isSubmitted,
+				submitted: () => this.isSubmitted
+			}
+		});
 		this.runtimePart = this.runtime.part('provider', {
 			id: opts.id,
 			ref: opts.ref,
 			owner: this,
-			context: FormProvider.ctx
+			context: FormProvider.ctx,
+			syncAttrs: true
 		});
 	}
 
@@ -119,12 +128,6 @@ export class FormProvider<TForm extends Form = Form> {
 		this.runtimePart.assert({
 			...this.runtimePart.props,
 			novalidate: this.opts.noValidate.current || undefined,
-			'aria-busy': boolToStr(this.isPending),
-			'data-pending': boolToEmptyStrOrUndef(this.isPending),
-			'data-dirty': boolToEmptyStrOrUndef(this.isDirty),
-			'data-touched': boolToEmptyStrOrUndef(this.isTouched),
-			'data-invalid': boolToEmptyStrOrUndef(this.isInvalid && this.isSubmitted),
-			'data-submitted': boolToEmptyStrOrUndef(this.isSubmitted),
 			onsubmit: this.handleSubmit
 		} as const)
 	);