@sectile/vue 0.7.0 → 0.8.0

package/dist/form.js

@@ -1,10 +1,16 @@
-import { computed, defineComponent, getCurrentInstance, h, inject, mergeProps, nextTick, onBeforeUnmount, onMounted, provide, ref, shallowRef, watch, } from 'vue';
+import { computed, defineComponent, h, inject, mergeProps, nextTick, onBeforeUnmount, onMounted, onScopeDispose, provide, shallowRef, watch, } from 'vue';
 import { appendFormFieldPath, createForm, encodeFormFieldPath, } from '@sectile/dom/form';
+import { tryCreateFormFieldPath } from '@sectile/form/path';
+import { compositeControlCapabilities, hiddenInputSubmissionCapabilities, hiddenSelectSubmissionCapabilities, hiddenValueSubmissionCapabilities, nativeInputControlCapabilities, provideFormControlFieldContext, provideFormControlOwner, useCompositeFormControl, useFormControl, useNativeInputFormControl, } from './internal/form-control.js';
+import { useNextTickTask } from './internal/scheduled-task.js';
 import { Primitive } from './primitive.js';
 import { useHostId } from './host-provider.js';
+export function defineFormSubmission(definition) {
+    return Object.freeze({ ...definition });
+}
+export { compositeControlCapabilities, hiddenInputSubmissionCapabilities, hiddenSelectSubmissionCapabilities, hiddenValueSubmissionCapabilities, nativeInputControlCapabilities, provideFormControlOwner, useCompositeFormControl, useFormControl, useNativeInputFormControl, };
 const formContextKey = Symbol('SectileForm');
 const formFieldContextKey = Symbol('SectileFormField');
-const formControlOwnerKey = Symbol('SectileFormControlOwner');
 const emptyState = Object.freeze({
     validationGeneration: 0,
     validationStatus: 'idle',
@@ -48,16 +54,13 @@ const FormRootImpl = defineComponent({
     },
     slots: Object,
     setup(props, { attrs, emit, expose, slots }) {
-        const root = ref(null);
-        const summary = ref(null);
-        const state = shallowRef(emptyState);
+        const root = shallowRef(null);
+        const summary = shallowRef(null);
         const connection = shallowRef(null);
         const participants = new Map();
+        const fieldDiagnostics = new Map();
         let syncConfiguredIssues = () => { };
-        const sync = () => {
-            if (connection.value !== null)
-                state.value = connection.value.getSnapshot().state;
-        };
+        let syncFieldDiagnostics = () => { };
         const register = (participant) => {
             const existing = participants.get(participant.id);
             existing?.unregister?.();
@@ -65,29 +68,27 @@ const FormRootImpl = defineComponent({
             participants.set(participant.id, registered);
             if (connection.value !== null)
                 registered.unregister = connection.value.registerParticipant(participant);
-            void nextTick(() => syncConfiguredIssues());
+            void nextTick(() => {
+                syncConfiguredIssues();
+                syncFieldDiagnostics();
+            });
             return () => {
                 if (participants.get(participant.id) !== registered)
                     return;
                 registered.unregister?.();
                 participants.delete(participant.id);
-                sync();
-                void nextTick(syncConfiguredIssues);
+                void nextTick(() => {
+                    syncConfiguredIssues();
+                    syncFieldDiagnostics();
+                });
             };
         };
-        const settleSubmission = (target, generation, result) => {
-            if (connection.value !== target)
-                return;
-            if (typeof result === 'object' && result !== null && result.ok === false) {
-                target.submitFailed(generation, resolveIssueInputs(target, 'server', result.issues ?? [submissionErrorIssue()]));
-                return;
-            }
-            target.submitSucceeded(generation);
-        };
-        const rejectSubmission = (target, generation, reason) => {
-            if (connection.value !== target)
-                return;
-            target.submitFailed(generation, resolveIssueInputs(target, 'server', mapSubmissionError(props.mapSubmitError, reason)));
+        const setFieldDiagnostic = (id, issue) => {
+            if (issue === null)
+                fieldDiagnostics.delete(id);
+            else
+                fieldDiagnostics.set(id, issue);
+            void nextTick(syncFieldDiagnostics);
         };
         const submit = (payload) => {
             const handler = props.onSubmit;
@@ -96,26 +97,29 @@ const FormRootImpl = defineComponent({
             const target = connection.value;
             if (target === null)
                 return;
-            payload.event.preventDefault();
-            if (target.getSnapshot().state.submissionStatus === 'submitting') {
-                return;
-            }
-            const generation = target.submitStarted();
-            if (generation === null)
-                return;
             let result;
             try {
                 result = handler(toFormSubmitEvent(payload));
             }
             catch (error) {
-                rejectSubmission(target, generation, error);
-                return;
+                return {
+                    ok: false,
+                    issues: resolveIssueInputs(target, 'server', mapSubmissionError(props.mapSubmitError, error)),
+                };
             }
+            const settle = (resolved) => (typeof resolved === 'object' && resolved !== null && resolved.ok === false
+                ? {
+                    ok: false,
+                    issues: resolveIssueInputs(target, 'server', resolved.issues ?? [submissionErrorIssue()]),
+                }
+                : { ok: true });
             if (isPromiseLike(result)) {
-                void Promise.resolve(result).then((resolved) => settleSubmission(target, generation, resolved), (error) => rejectSubmission(target, generation, error));
-                return;
+                return Promise.resolve(result).then(settle, (error) => ({
+                    ok: false,
+                    issues: resolveIssueInputs(target, 'server', mapSubmissionError(props.mapSubmitError, error)),
+                }));
             }
-            settleSubmission(target, generation, result);
+            return settle(result);
         };
         const configuration = () => ({
             ...(summary.value === null ? {} : { summary: summary.value }),
@@ -123,10 +127,12 @@ const FormRootImpl = defineComponent({
             ...(props.validate === undefined ? {} : { validate: props.validate }),
             validateOn: props.validateOn,
             revalidateOn: props.revalidateOn,
-            onSubmit: submit,
-            onReset: () => emit('reset'),
+            ...(props.onSubmit === undefined ? {} : { onSubmit: submit }),
+            onReset: () => {
+                emit('reset');
+                void nextTick(syncFieldDiagnostics);
+            },
             onStateChange: (next) => {
-                state.value = next;
                 emit('stateChange', next);
             },
         });
@@ -136,6 +142,9 @@ const FormRootImpl = defineComponent({
                 return;
             target.replaceIssues('form', resolveIssueInputs(target, 'form', props.issues));
         };
+        syncFieldDiagnostics = () => {
+            connection.value?.replaceIssues('field', [...fieldDiagnostics.values()]);
+        };
         const mount = () => {
             if (root.value === null)
                 return;
@@ -148,16 +157,24 @@ const FormRootImpl = defineComponent({
                 registered.unregister = connection.value.registerParticipant(registered.participant);
             }
             syncConfiguredIssues();
-            sync();
+            syncFieldDiagnostics();
+            emit('stateChange', connection.value.state);
         };
-        onMounted(() => { void nextTick(mount); });
-        onBeforeUnmount(() => connection.value?.destroy());
+        const mountTask = useNextTickTask(mount);
+        onMounted(mountTask.schedule);
+        onBeforeUnmount(() => {
+            mountTask.cancel();
+            connection.value?.destroy();
+            connection.value = null;
+        });
         watch([
             summary,
             () => props.schema,
             () => props.validate,
             () => [...props.validateOn],
             () => [...props.revalidateOn],
+            () => props.onSubmit,
+            () => props.mapSubmitError,
         ], () => {
             void nextTick(() => connection.value?.reconfigure(configuration()));
         });
@@ -167,30 +184,47 @@ const FormRootImpl = defineComponent({
             submitSucceeded: (generation) => connection.value?.submitSucceeded(generation) ?? false,
             submitFailed: (generation, issues = []) => connection.value?.submitFailed(generation, issues) ?? false,
             replaceIssues: (source, issues) => connection.value?.replaceIssues(source, issues) ?? false,
+            reinitialize: (options) => connection.value?.reinitialize(options),
             reset: () => connection.value?.reset(),
         };
-        const slotProps = computed(() => Object.freeze({
-            state: state.value,
-            validationStatus: state.value.validationStatus,
-            validationTrigger: state.value.validationTrigger,
-            validationIntent: state.value.validationIntent,
-            submissionStatus: state.value.submissionStatus,
-            valid: state.value.valid,
-            touched: state.value.touched,
-            dirty: state.value.dirty,
-            submitted: state.value.submitted,
-            submitCount: state.value.submitCount,
+        const formContext = {
+            summary,
+            register,
+            setFieldDiagnostic,
+            connection,
+        };
+        provide(formContextKey, formContext);
+        const validationStatus = useFormSelectorFromContext(formContext, () => (current) => current.validationStatus);
+        const submissionStatus = useFormSelectorFromContext(formContext, () => (current) => current.submissionStatus);
+        const selectedState = useFormSelectorFromContext(formContext, () => (current) => current);
+        const validationTrigger = useFormSelectorFromContext(formContext, () => (current) => current.validationTrigger);
+        const validationIntent = useFormSelectorFromContext(formContext, () => (current) => current.validationIntent);
+        const valid = useFormSelectorFromContext(formContext, () => (current) => current.valid);
+        const touched = useFormSelectorFromContext(formContext, () => (current) => current.touched);
+        const dirty = useFormSelectorFromContext(formContext, () => (current) => current.dirty);
+        const submitted = useFormSelectorFromContext(formContext, () => (current) => current.submitted);
+        const submitCount = useFormSelectorFromContext(formContext, () => (current) => current.submitCount);
+        const slotProps = Object.freeze({
+            get state() { return selectedState.value; },
+            get validationStatus() { return validationStatus.value; },
+            get validationTrigger() { return validationTrigger.value; },
+            get validationIntent() { return validationIntent.value; },
+            get submissionStatus() { return submissionStatus.value; },
+            get valid() { return valid.value; },
+            get touched() { return touched.value; },
+            get dirty() { return dirty.value; },
+            get submitted() { return submitted.value; },
+            get submitCount() { return submitCount.value; },
             ...actions,
-        }));
-        provide(formContextKey, { state, summary, register, connection });
+        });
         expose(actions);
         return () => h('form', mergeProps(attrs, {
             ref: (element) => { root.value = element; },
             'data-scope': 'form',
             'data-part': 'root',
-            'data-validation-status': state.value.validationStatus,
-            'data-submission-status': state.value.submissionStatus,
-        }), slots['default']?.(slotProps.value) ?? []);
+            'data-validation-status': validationStatus.value,
+            'data-submission-status': submissionStatus.value,
+        }), slots['default']?.(slotProps) ?? []);
     },
 });
 export const FormRoot = FormRootImpl;
@@ -200,6 +234,7 @@ function toFormSubmitEvent(payload) {
         values: payload.values,
         submitter: payload.submitter,
         state: payload.state,
+        reinitialize: payload.reinitialize,
         nativeEvent: payload.event,
         get defaultPrevented() { return payload.event.defaultPrevented; },
         preventDefault: () => payload.event.preventDefault(),
@@ -216,10 +251,8 @@ function isPromiseLike(value) {
 function resolveIssueInputs(target, source, input) {
     const fields = target.getSnapshot().state.fields;
     return Object.freeze(input.map((issue, index) => {
-        const name = issue.path === undefined ? undefined : encodeFormFieldPath(issue.path);
-        const owner = name === undefined
-            ? undefined
-            : fields.find((field) => field.name === name);
+        const name = issue.path === undefined ? null : safeEncodeFormFieldPath(issue.path);
+        const owner = name === null ? undefined : findNamedFieldOwner(fields, name);
         return Object.freeze({
             id: issue.id ?? `form-${source}-issue-${index + 1}`,
             message: issue.message,
@@ -228,6 +261,23 @@ function resolveIssueInputs(target, source, input) {
         });
     }));
 }
+function safeEncodeFormFieldPath(path) {
+    const result = tryCreateFormFieldPath(path);
+    return result.ok ? encodeFormFieldPath(result.value) : null;
+}
+function findNamedFieldOwner(fields, issueName) {
+    let owner;
+    for (const candidate of fields) {
+        if (candidate.name === null
+            || (issueName !== candidate.name
+                && !issueName.startsWith(`${candidate.name}.`)
+                && !issueName.startsWith(`${candidate.name}[`)))
+            continue;
+        if (owner === undefined || candidate.name.length > (owner.name?.length ?? 0))
+            owner = candidate;
+    }
+    return owner;
+}
 function mapSubmissionError(mapper, reason) {
     if (mapper !== undefined) {
         try {
@@ -250,6 +300,99 @@ function submissionErrorIssue() {
         message: 'Form submission failed.',
     });
 }
+function useFormSelectorFromContext(context, selectorSource, equalsSource = () => Object.is) {
+    const initialSelector = selectorSource();
+    const selected = shallowRef(initialSelector(context.connection.value?.state ?? emptyState));
+    let unsubscribe;
+    const stop = watch([context.connection, selectorSource, equalsSource], ([target, selector, equals]) => {
+        unsubscribe?.();
+        unsubscribe = undefined;
+        const next = selector(target?.state ?? emptyState);
+        if (!equals(selected.value, next))
+            selected.value = next;
+        if (target !== null) {
+            unsubscribe = target.subscribeForm(selector, (value) => {
+                selected.value = value;
+            }, { equals });
+        }
+    }, { immediate: true, flush: 'sync' });
+    onScopeDispose(() => {
+        unsubscribe?.();
+        stop();
+    });
+    return selected;
+}
+function useFormFieldSelectorFromContext(context, idSource, selectorSource, equalsSource = () => Object.is) {
+    const initialSelector = selectorSource();
+    const selected = shallowRef(initialSelector(context.connection.value?.getField(idSource()) ?? null));
+    let unsubscribe;
+    const stop = watch([context.connection, idSource, selectorSource, equalsSource], ([target, id, selector, equals]) => {
+        unsubscribe?.();
+        unsubscribe = undefined;
+        const next = selector(target?.getField(id) ?? null);
+        if (!equals(selected.value, next))
+            selected.value = next;
+        if (target !== null) {
+            unsubscribe = target.subscribeField(id, selector, (value) => {
+                selected.value = value;
+            }, { equals });
+        }
+    }, { immediate: true, flush: 'sync' });
+    onScopeDispose(() => {
+        unsubscribe?.();
+        stop();
+    });
+    return selected;
+}
+export function useFormSelector(selector, options = {}) {
+    const context = useFormContext('useFormSelector');
+    return useFormSelectorFromContext(context, () => selector, () => options.equals ?? Object.is);
+}
+export function useFormFieldSelector(id, selector, options = {}) {
+    const context = useFormContext('useFormFieldSelector');
+    return useFormFieldSelectorFromContext(context, () => id, () => selector, () => options.equals ?? Object.is);
+}
+export function useFormFieldController(id) {
+    const context = useFormContext('useFormFieldController');
+    const state = useFormFieldSelectorFromContext(context, () => id, () => (field) => field);
+    return Object.freeze({
+        state,
+        setMeta: (meta) => (context.connection.value?.setFieldMeta(id, meta) ?? false),
+        replaceIssues: (source, issues) => (context.connection.value?.replaceFieldIssues(id, source, issues) ?? false),
+        upsertIssue: (issue) => (context.connection.value?.upsertFieldIssue(id, issue) ?? false),
+        removeIssue: (issueId) => (context.connection.value?.removeFieldIssue(id, issueId) ?? false),
+        clearIssues: (source) => (context.connection.value?.clearFieldIssues(id, source) ?? false),
+    });
+}
+const FormSelectorRuntime = defineComponent({
+    name: 'SectileFormSelector',
+    props: {
+        select: { type: Function, required: true },
+        equals: { type: Function, default: Object.is },
+    },
+    slots: Object,
+    setup(props, { slots }) {
+        const context = useFormContext('FormSelector');
+        const selected = useFormSelectorFromContext(context, () => props.select, () => props.equals);
+        return () => slots['default']?.({ selected: selected.value }) ?? [];
+    },
+});
+export const FormSelector = FormSelectorRuntime;
+const FormFieldSelectorRuntime = defineComponent({
+    name: 'SectileFormFieldSelector',
+    props: {
+        id: { type: String, required: true },
+        select: { type: Function, required: true },
+        equals: { type: Function, default: Object.is },
+    },
+    slots: Object,
+    setup(props, { slots }) {
+        const context = useFormContext('FormFieldSelector');
+        const selected = useFormFieldSelectorFromContext(context, () => props.id, () => props.select, () => props.equals);
+        return () => slots['default']?.({ selected: selected.value }) ?? [];
+    },
+});
+export const FormFieldSelector = FormFieldSelectorRuntime;
 export const FormField = defineComponent({
     name: 'SectileFormField',
     inheritAttrs: false,
@@ -267,16 +410,21 @@ export const FormField = defineComponent({
         const formContext = useFormContext('FormField');
         const generatedId = useHostId();
         const id = computed(() => props.id ?? `form-field-${generatedId}`);
-        const nameKey = computed(() => (props.name === undefined ? undefined : encodeFormFieldPath(props.name)));
-        const root = ref(null);
+        const nameKey = computed(() => (props.name === undefined ? undefined : safeEncodeFormFieldPath(props.name) ?? undefined));
+        const root = shallowRef(null);
         const controls = shallowRef([]);
         const fallback = shallowRef(null);
+        const nativeFallbackProblem = shallowRef(null);
         const appliedAttributes = new Map();
         let observer;
         let unregister;
+        let diagnosticId;
+        let observedTargets = [];
         let warnedMultipleControls = false;
-        const activeControl = computed(() => (controls.value.find((registration) => resolveElement(registration.element) !== null)
-            ?? fallback.value));
+        const activeRegistrations = computed(() => controls.value.filter((registration) => resolveElement(registration.element) !== null));
+        const activeControl = computed(() => (activeRegistrations.value.length === 1
+            ? activeRegistrations.value[0]
+            : controls.value.length === 0 ? fallback.value : null));
         const labelMode = computed(() => activeControl.value?.labelMode ?? 'for');
         const semanticControl = () => {
             const registration = activeControl.value;
@@ -285,7 +433,14 @@ export const FormField = defineComponent({
             return resolveElement(registration.semanticControl ?? registration.element);
         };
         const effectiveControlId = computed(() => (semanticControl()?.getAttribute('id')?.trim() || `${id.value}-control`));
-        const fieldState = computed(() => formContext.state.value.fields.find((field) => field.id === id.value));
+        const fieldState = useFormFieldSelectorFromContext(formContext, () => id.value, () => (field) => field);
+        const fieldActions = Object.freeze({
+            setMeta: (meta) => (formContext.connection.value?.setFieldMeta(id.value, meta) ?? false),
+            replaceIssues: (source, issues) => (formContext.connection.value?.replaceFieldIssues(id.value, source, issues) ?? false),
+            upsertIssue: (issue) => (formContext.connection.value?.upsertFieldIssue(id.value, issue) ?? false),
+            removeIssue: (issueId) => formContext.connection.value?.removeFieldIssue(id.value, issueId) ?? false,
+            clearIssues: (source) => (formContext.connection.value?.clearFieldIssues(id.value, source) ?? false),
+        });
         const slotProps = computed(() => {
             const current = fieldState.value;
             const descriptionId = `${id.value}-description`;
@@ -303,6 +458,7 @@ export const FormField = defineComponent({
                 touched: current?.touched ?? false,
                 dirty: current?.dirty ?? false,
                 issues: current?.issues ?? [],
+                ...fieldActions,
             });
         });
         const attributesFor = (registration) => {
@@ -336,6 +492,13 @@ export const FormField = defineComponent({
                 assign('readonly', true);
             else if (labelMode.value !== 'for' && props.readonly === true)
                 assign('aria-readonly', 'true');
+            if (labelMode.value !== 'for') {
+                const refreshValue = () => {
+                    queueMicrotask(() => formContext.connection.value?.refreshParticipant(id.value));
+                };
+                attributes['onClick'] = refreshValue;
+                attributes['onKeydown'] = refreshValue;
+            }
             return Object.freeze(attributes);
         };
         const restoreControlAttributes = () => {
@@ -365,8 +528,10 @@ export const FormField = defineComponent({
                 const capabilities = submission.capabilities ?? nativeSubmissionCapabilities(element);
                 const explicit = submission.explicit ?? registration.explicit;
                 const attributes = {};
-                if (capabilities.name === true && props.name !== undefined) {
-                    attributes['name'] = encodeSubmissionName(props.name, submission.relativeName);
+                if (capabilities.name === true && nameKey.value !== undefined) {
+                    const submissionName = safeEncodeSubmissionName(nameKey.value, submission.relativeName);
+                    if (submissionName !== null)
+                        attributes['name'] = submissionName;
                 }
                 if (capabilities.form === true && props.form !== undefined)
                     attributes['form'] = props.form;
@@ -382,47 +547,98 @@ export const FormField = defineComponent({
         const discoverNativeFallback = () => {
             if (controls.value.length > 0 || root.value === null) {
                 fallback.value = null;
+                nativeFallbackProblem.value = null;
                 return;
             }
             const candidates = nativeCandidates(root.value);
-            const semantic = nativeSemanticControl(candidates);
-            if (semantic === undefined) {
+            const discovered = createNativeFallbackRegistration(root.value, candidates);
+            nativeFallbackProblem.value = discovered.problem;
+            if (discovered.registration === null) {
                 fallback.value = null;
                 return;
             }
-            const submissions = candidates.filter(isFormSubmissionElement).map((element) => ({
-                element: () => element,
-                capabilities: nativeSubmissionCapabilities(element),
-            }));
+            const next = discovered.registration;
             const current = fallback.value;
             if (current !== null
-                && resolveElement(current.semanticControl ?? current.element) === semantic
-                && sameSubmissionElements(resolveSubmissionRegistrations(current), submissions))
+                && resolveElement(current.semanticControl ?? current.element)
+                    === resolveElement(next.semanticControl ?? next.element)
+                && sameSubmissionElements(resolveSubmissionRegistrations(current), resolveSubmissionRegistrations(next)))
                 return;
-            fallback.value = {
-                element: () => semantic,
-                semanticControl: () => semantic,
-                focusTarget: () => semantic,
-                submissions,
-                labelMode: nativeLabelMode(semantic),
-                capabilities: nativeControlCapabilities(semantic),
-            };
+            fallback.value = next;
+        };
+        const syncDiagnostic = () => {
+            const currentId = id.value;
+            if (diagnosticId !== undefined && diagnosticId !== currentId) {
+                formContext.setFieldDiagnostic(diagnosticId, null);
+            }
+            diagnosticId = currentId;
+            let message = null;
+            if (props.name !== undefined && nameKey.value === undefined) {
+                message = 'FormField received an invalid field path.';
+            }
+            else if (activeRegistrations.value.length > 1) {
+                message = 'FormField received multiple active controls. Register one composite control with explicit targets.';
+            }
+            else if (controls.value.length > 0 && activeRegistrations.value.length === 0) {
+                message = 'FormField has no mounted control target.';
+            }
+            else if (nativeFallbackProblem.value !== null) {
+                message = nativeFallbackProblem.value;
+            }
+            else {
+                const registration = activeControl.value;
+                if (registration !== null && registration !== undefined) {
+                    const invalidRelativeName = resolveSubmissionRegistrations(registration).some((submission) => submission.relativeName !== undefined
+                        && nameKey.value !== undefined
+                        && safeEncodeSubmissionName(nameKey.value, submission.relativeName) === null);
+                    if (invalidRelativeName)
+                        message = 'FormField received an invalid relative submission path.';
+                }
+            }
+            formContext.setFieldDiagnostic(currentId, message === null ? null : Object.freeze({
+                id: `${currentId}:composition`,
+                fieldId: currentId,
+                message,
+                source: 'field',
+            }));
+        };
+        const refreshParticipantTargets = () => {
+            const registration = activeControl.value;
+            const next = registration === null || registration === undefined
+                ? root.value === null ? [] : [root.value]
+                : [
+                    root.value,
+                    resolveElement(registration.semanticControl ?? registration.element),
+                    resolveElement(registration.focusTarget ?? registration.element),
+                    resolveElement(registration.validationTarget ?? registration.element),
+                    ...resolveSubmissionRegistrations(registration).map((submission) => resolveElement(submission.element)),
+                ].filter((element) => element !== null);
+            if (next.length === observedTargets.length
+                && next.every((element, index) => element === observedTargets[index]))
+                return;
+            observedTargets = Object.freeze([...next]);
+            formContext.connection.value?.refreshParticipant(id.value);
         };
         const registerControl = (registration) => {
             controls.value = [...controls.value, registration];
             fallback.value = null;
             void nextTick(() => {
-                const activeRegistrations = controls.value.filter((candidate) => resolveElement(candidate.element) !== null);
-                if (!warnedMultipleControls && activeRegistrations.length > 1) {
+                if (!warnedMultipleControls && activeRegistrations.value.length > 1) {
                     warnedMultipleControls = true;
                     console.warn('[Sectile] FormField received multiple active control registrations. Register one composite control with explicit semantic, focus, and submission targets.');
                 }
                 applyControlAttributes();
+                syncDiagnostic();
+                refreshParticipantTargets();
             });
             return () => {
                 controls.value = controls.value.filter((candidate) => candidate !== registration);
                 discoverNativeFallback();
-                void nextTick(applyControlAttributes);
+                void nextTick(() => {
+                    applyControlAttributes();
+                    syncDiagnostic();
+                    refreshParticipantTargets();
+                });
             };
         };
         const mount = () => {
@@ -435,6 +651,8 @@ export const FormField = defineComponent({
             observer = new MutationObserver(() => {
                 discoverNativeFallback();
                 applyControlAttributes();
+                syncDiagnostic();
+                refreshParticipantTargets();
             });
             observer.observe(root.value, { childList: true, subtree: true });
             applyControlAttributes();
@@ -449,6 +667,14 @@ export const FormField = defineComponent({
                         : resolveElement(registration.focusTarget ?? registration.semanticControl ?? registration.element)
                             ?? root.value;
                 },
+                get validationTarget() {
+                    const registration = activeControl.value;
+                    return registration === undefined || registration === null
+                        ? root.value
+                        : resolveElement(registration.validationTarget
+                            ?? registration.semanticControl
+                            ?? registration.element) ?? root.value;
+                },
                 get submissionElements() {
                     const registration = activeControl.value;
                     if (registration === undefined || registration === null)
@@ -465,34 +691,55 @@ export const FormField = defineComponent({
                     control?.focus();
                     return control !== null && document.activeElement === control;
                 },
-                ...(props.name === undefined ? {} : { name: props.name }),
+                reset: () => activeControl.value?.reset?.(),
+                get getValue() { return activeControl.value?.getValue; },
+                get isValueEqual() { return activeControl.value?.isValueEqual; },
+                ...(nameKey.value === undefined ? {} : { name: nameKey.value }),
             };
             unregister = formContext.register(participant);
+            observedTargets = Object.freeze([
+                participant.element,
+                participant.semanticControl ?? participant.element,
+                participant.focusTarget ?? participant.element,
+                participant.validationTarget ?? participant.element,
+                ...(participant.submissionElements ?? []),
+            ]);
+            syncDiagnostic();
         };
-        onMounted(() => { void nextTick(mount); });
+        const mountTask = useNextTickTask(mount);
+        onMounted(mountTask.schedule);
         onBeforeUnmount(() => {
+            mountTask.cancel();
             observer?.disconnect();
+            observer = undefined;
             restoreControlAttributes();
+            if (diagnosticId !== undefined)
+                formContext.setFieldDiagnostic(diagnosticId, null);
             unregister?.();
+            unregister = undefined;
         });
-        watch([id, nameKey], () => { void nextTick(mount); });
+        watch([id, nameKey], mountTask.schedule);
         watch([
             activeControl,
             effectiveControlId,
             labelMode,
-            () => props.name,
+            nameKey,
             () => props.form,
             () => props.required,
             () => props.disabled,
             () => props.readonly,
             () => slotProps.value.valid,
-        ], applyControlAttributes, { flush: 'post' });
+        ], () => {
+            applyControlAttributes();
+            syncDiagnostic();
+        }, { flush: 'post' });
         provide(formFieldContextKey, {
             slotProps,
             labelMode,
             registerControl,
             attributesFor,
         });
+        provideFormControlFieldContext({ registerControl, attributesFor });
         return () => h(Primitive, mergeProps(attrs, {
             as: props.as,
             asChild: props.asChild,
@@ -563,7 +810,8 @@ export const FormSummary = defineComponent({
     slots: Object,
     setup(props, { attrs, slots }) {
         const form = useFormContext('FormSummary');
-        const slotProps = useRootSlotProps(form);
+        const valid = useFormSelectorFromContext(form, () => (state) => state.valid);
+        const slotProps = computed(() => Object.freeze({ valid: valid.value }));
         return () => h(Primitive, mergeProps(attrs, {
             as: props.as,
             asChild: props.asChild,
@@ -571,7 +819,7 @@ export const FormSummary = defineComponent({
             role: 'alert',
             'aria-live': 'polite',
             tabindex: -1,
-            hidden: form.state.value.valid,
+            hidden: valid.value,
             'data-scope': 'form',
             'data-part': 'summary',
         }), { default: () => slots['default']?.(slotProps.value) });
@@ -581,55 +829,54 @@ export const FormReset = defineComponent({
     name: 'SectileFormReset', inheritAttrs: false,
     props: { ...partProps, as: { ...partProps.as, default: 'button' } },
     setup(props, { attrs, slots }) {
-        const form = useFormContext('FormReset');
-        const slotProps = useRootSlotProps(form);
         return () => h(Primitive, mergeProps(attrs, {
             as: props.as,
             asChild: props.asChild,
             ...(props.as === 'button' && !props.asChild ? { type: 'reset' } : {}),
             'data-scope': 'form',
             'data-part': 'reset',
-            'data-validation-status': form.state.value.validationStatus,
-            'data-submission-status': form.state.value.submissionStatus,
-        }), { default: () => slots['default']?.(slotProps.value) });
+        }), { default: () => slots['default']?.() });
     },
 });
 export const FormSubmit = defineComponent({
     name: 'SectileFormSubmit', inheritAttrs: false,
     props: { ...partProps, as: { ...partProps.as, default: 'button' } },
+    slots: Object,
     setup(props, { attrs, slots }) {
         const form = useFormContext('FormSubmit');
-        const slotProps = useRootSlotProps(form);
-        return () => h(Primitive, mergeProps(attrs, {
+        const valid = useFormSelectorFromContext(form, () => (state) => state.valid);
+        const submissionStatus = useFormSelectorFromContext(form, () => (state) => state.submissionStatus);
+        const slotProps = computed(() => {
+            const submitting = submissionStatus.value === 'submitting';
+            return Object.freeze({
+                valid: valid.value,
+                submitting,
+                canSubmit: valid.value && !submitting,
+                submissionStatus: submissionStatus.value,
+            });
+        });
+        const blockPendingSubmit = (event) => {
+            if (!slotProps.value.submitting)
+                return;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        };
+        return () => h(Primitive, mergeProps({
+            onClickCapture: blockPendingSubmit,
+        }, attrs, {
             as: props.as,
             asChild: props.asChild,
             ...(props.as === 'button' && !props.asChild ? { type: 'submit' } : {}),
+            ...(props.as === 'button' && !props.asChild && slotProps.value.submitting
+                ? { disabled: true }
+                : {}),
+            ...(props.asChild && slotProps.value.submitting ? { 'aria-disabled': 'true' } : {}),
             'data-scope': 'form',
             'data-part': 'submit',
-            'data-validation-status': form.state.value.validationStatus,
-            'data-submission-status': form.state.value.submissionStatus,
+            'data-submission-status': slotProps.value.submissionStatus,
         }), { default: () => slots['default']?.(slotProps.value) });
     },
 });
-function useRootSlotProps(form) {
-    return computed(() => Object.freeze({
-        state: form.state.value,
-        validationStatus: form.state.value.validationStatus,
-        validationTrigger: form.state.value.validationTrigger,
-        validationIntent: form.state.value.validationIntent,
-        submissionStatus: form.state.value.submissionStatus,
-        valid: form.state.value.valid,
-        touched: form.state.value.touched,
-        dirty: form.state.value.dirty,
-        submitted: form.state.value.submitted,
-        submitCount: form.state.value.submitCount,
-        submitStarted: () => form.connection.value?.submitStarted() ?? null,
-        submitSucceeded: (generation) => form.connection.value?.submitSucceeded(generation) ?? false,
-        submitFailed: (generation, issues = []) => form.connection.value?.submitFailed(generation, issues) ?? false,
-        replaceIssues: (source, issues) => form.connection.value?.replaceIssues(source, issues) ?? false,
-        reset: () => form.connection.value?.reset(),
-    }));
-}
 function renderFieldPart(props, attrs, slots, part, attributes) {
     return h(Primitive, mergeProps(attributes, attrs, {
         as: props.as,
@@ -638,85 +885,6 @@ function renderFieldPart(props, attrs, slots, part, attributes) {
         'data-part': part,
     }), { default: () => slots.default?.() });
 }
-export function useFormControl(registration) {
-    const field = inject(formFieldContextKey, null);
-    const owned = inject(formControlOwnerKey, false);
-    const instance = getCurrentInstance();
-    const explicit = Object.freeze([
-        ...new Set([
-            ...(registration.explicit ?? []),
-            ...explicitMetadataAttributes(instance?.vnode.props ?? null),
-        ]),
-    ]);
-    const normalized = Object.freeze({ ...registration, explicit });
-    const controlProps = computed(() => (field !== null && !owned ? field.attributesFor(normalized) : Object.freeze({})));
-    let unregister;
-    if (field !== null && !owned) {
-        onMounted(() => { unregister = field.registerControl(normalized); });
-        onBeforeUnmount(() => unregister?.());
-    }
-    return Object.freeze({ participating: field !== null && !owned, controlProps });
-}
-export const nativeInputControlCapabilities = Object.freeze({
-    id: true,
-    describedBy: true,
-    invalid: true,
-    required: true,
-    disabled: true,
-    readonly: true,
-});
-export const compositeControlCapabilities = Object.freeze({
-    id: true,
-    describedBy: true,
-    invalid: true,
-    labelledBy: true,
-});
-export const hiddenInputSubmissionCapabilities = Object.freeze({
-    name: true,
-    form: true,
-    required: true,
-    disabled: true,
-});
-export const hiddenSelectSubmissionCapabilities = hiddenInputSubmissionCapabilities;
-export const hiddenValueSubmissionCapabilities = Object.freeze({
-    name: true,
-    form: true,
-    disabled: true,
-});
-export function useNativeInputFormControl(element) {
-    return useFormControl({
-        element: element,
-        semanticControl: element,
-        focusTarget: element,
-        labelMode: 'for',
-        capabilities: nativeInputControlCapabilities,
-    });
-}
-export function useCompositeFormControl(options) {
-    return useFormControl({
-        element: options.root,
-        semanticControl: options.root,
-        focusTarget: options.focusTarget ?? options.root,
-        labelMode: options.labelMode ?? 'labelledby',
-        capabilities: compositeControlCapabilities,
-        ...(options.submissions === undefined ? {} : { submissions: options.submissions }),
-    });
-}
-export function provideFormControlOwner() {
-    provide(formControlOwnerKey, true);
-}
-export function createTypedForm() {
-    return Object.freeze({
-        Root: FormRoot,
-        Field: FormField,
-        Label: FormLabel,
-        Description: FormDescription,
-        Message: FormMessage,
-        Summary: FormSummary,
-        Reset: FormReset,
-        Submit: FormSubmit,
-    });
-}
 function useFormContext(part) {
     const context = inject(formContextKey, null);
     if (context === null)
@@ -730,7 +898,7 @@ function useFormFieldContext(part) {
     return context;
 }
 function resolveElement(source) {
-    return typeof source === 'function' ? source() : source.value;
+    return typeof source === 'function' ? source() : source.value ?? null;
 }
 function resolveSubmissionRegistrations(registration) {
     if (registration.submissions !== undefined) {
@@ -751,16 +919,91 @@ function sameSubmissionElements(left, right) {
     return left.length === right.length && left.every((submission, index) => (resolveElement(submission.element) === resolveElement(right[index].element)));
 }
 function nativeCandidates(root) {
-    const selector = 'button, fieldset, input, select, textarea';
+    const selector = 'fieldset, input, select, textarea';
     const candidates = [
         ...(root.matches(selector) ? [root] : []),
         ...root.querySelectorAll(selector),
     ];
     return candidates.filter((candidate) => (candidate.closest('[data-scope="form"][data-part="field"]') === root));
 }
+function createNativeFallbackRegistration(root, candidates) {
+    const semantic = nativeSemanticControl(candidates);
+    if (semantic === undefined || isHiddenInput(semantic)) {
+        return {
+            registration: null,
+            problem: 'FormField has no visible native semantic or focus target.',
+        };
+    }
+    const submissions = candidates.filter(isFormSubmissionElement);
+    const visible = candidates.filter((candidate) => !isHiddenInput(candidate));
+    const fieldset = visible.find((candidate) => candidate.tagName === 'FIELDSET');
+    if (fieldset !== undefined) {
+        return {
+            registration: nativeFallbackForElement(fieldset, submissions),
+            problem: null,
+        };
+    }
+    if (visible.length === 1) {
+        return {
+            registration: nativeFallbackForElement(semantic, submissions),
+            problem: null,
+        };
+    }
+    if (isNativeCheckedGroup(visible)) {
+        const focusTarget = visible.find((candidate) => !candidate.disabled) ?? visible[0];
+        return {
+            registration: {
+                element: () => root,
+                semanticControl: () => root,
+                focusTarget: () => focusTarget,
+                validationTarget: () => root,
+                submissions: submissions.map((element) => ({
+                    element: () => element,
+                    capabilities: Object.freeze({
+                        ...nativeSubmissionCapabilities(element),
+                        required: false,
+                    }),
+                })),
+                labelMode: 'labelledby',
+                capabilities: compositeControlCapabilities,
+            },
+            problem: null,
+        };
+    }
+    return {
+        registration: null,
+        problem: 'FormField contains multiple unrelated native controls. Use a fieldset or one composite registration.',
+    };
+}
+function nativeFallbackForElement(semantic, submissions) {
+    return {
+        element: () => semantic,
+        semanticControl: () => semantic,
+        focusTarget: () => semantic,
+        validationTarget: () => semantic,
+        submissions: submissions.map((element) => ({
+            element: () => element,
+            capabilities: nativeSubmissionCapabilities(element),
+        })),
+        labelMode: nativeLabelMode(semantic),
+        capabilities: nativeControlCapabilities(semantic),
+    };
+}
+function isHiddenInput(element) {
+    return element.tagName === 'INPUT'
+        && element.getAttribute('type')?.toLowerCase() === 'hidden';
+}
+function isNativeCheckedGroup(candidates) {
+    if (candidates.length < 2)
+        return false;
+    const types = candidates.map((candidate) => (candidate.tagName === 'INPUT'
+        ? candidate.type.toLowerCase()
+        : null));
+    return types.every((type) => type === types[0])
+        && (types[0] === 'checkbox' || types[0] === 'radio');
+}
 function nativeSemanticControl(candidates) {
-    return candidates.find((candidate) => (candidate.tagName !== 'INPUT'
-        || candidate.getAttribute('type')?.toLowerCase() !== 'hidden')) ?? candidates[0];
+    return candidates.find((candidate) => !isHiddenInput(candidate)) ?? candidates[0];
 }
 function isFormSubmissionElement(element) {
     return ['INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName);
@@ -798,14 +1041,21 @@ function nativeSubmissionCapabilities(element) {
         readonly: tag === 'TEXTAREA' || (tag === 'INPUT' && supportsReadonly(element)),
     });
 }
-function encodeSubmissionName(base, relative) {
-    if (relative === undefined)
-        return encodeFormFieldPath(base);
-    return encodeFormFieldPath(appendFormFieldPath(base, relative));
+function safeEncodeSubmissionName(base, relative) {
+    try {
+        if (relative === undefined)
+            return safeEncodeFormFieldPath(base);
+        return safeEncodeFormFieldPath(appendFormFieldPath(base, relative));
+    }
+    catch {
+        return null;
+    }
 }
 function applyMetadata(element, attributes, explicitAttributes, applied) {
     const explicit = new Set(explicitAttributes ?? []);
     for (const [name, value] of Object.entries(attributes)) {
+        if (name.startsWith('on') && typeof value === 'function')
+            continue;
         if (value === undefined || value === false || explicit.has(name))
             continue;
         const previous = element.getAttribute(name);
@@ -825,28 +1075,6 @@ function applyMetadata(element, attributes, explicitAttributes, applied) {
         element.setAttribute(name, next);
     }
 }
-function explicitMetadataAttributes(vnodeProps) {
-    if (vnodeProps === null)
-        return [];
-    const aliases = {
-        id: ['id'],
-        name: ['name'],
-        form: ['form'],
-        required: ['required'],
-        disabled: ['disabled'],
-        readonly: ['readonly', 'readOnly'],
-        'aria-describedby': ['aria-describedby', 'ariaDescribedby'],
-        'aria-errormessage': ['aria-errormessage', 'ariaErrormessage'],
-        'aria-invalid': ['aria-invalid', 'ariaInvalid'],
-        'aria-labelledby': ['aria-labelledby', 'ariaLabelledby'],
-        'aria-disabled': ['aria-disabled', 'ariaDisabled'],
-        'aria-required': ['aria-required', 'ariaRequired'],
-        'aria-readonly': ['aria-readonly', 'ariaReadonly'],
-    };
-    return Object.entries(aliases)
-        .filter(([, names]) => names.some((name) => Object.hasOwn(vnodeProps, name)))
-        .map(([attribute]) => attribute);
-}
 function supportsReadonly(element) {
     return !new Set([
         'button', 'checkbox', 'color', 'file', 'hidden', 'image', 'radio', 'range',