@sectile/vue 0.2.1

package/dist/form.js

@@ -0,0 +1,752 @@
+import { computed, defineComponent, getCurrentInstance, h, inject, mergeProps, nextTick, onBeforeUnmount, onMounted, provide, ref, shallowRef, watch, } from 'vue';
+import { appendFormFieldPath, createForm, encodeFormFieldPath, } from '@sectile/dom/form';
+import { Primitive } from './primitive.js';
+import { useHostId } from './host-provider.js';
+const formContextKey = Symbol('SectileForm');
+const formFieldContextKey = Symbol('SectileFormField');
+const formControlOwnerKey = Symbol('SectileFormControlOwner');
+const emptyState = Object.freeze({
+    validationGeneration: 0,
+    validationStatus: 'idle',
+    validationTrigger: null,
+    validationIntent: null,
+    submissionGeneration: 0,
+    submissionStatus: 'idle',
+    submitCount: 0,
+    submitted: false,
+    touched: false,
+    dirty: false,
+    valid: true,
+    fields: Object.freeze([]),
+    issues: Object.freeze([]),
+});
+const partProps = {
+    as: { type: [String, Object, Function], default: 'div' },
+    asChild: { type: Boolean, default: false },
+};
+const FormRootImpl = defineComponent({
+    name: 'SectileFormRoot',
+    inheritAttrs: false,
+    props: {
+        issues: { type: Array, default: () => [] },
+        schema: { type: Object, default: undefined },
+        validate: { type: Function, default: undefined },
+        validateOn: {
+            type: Array,
+            default: () => [],
+        },
+        revalidateOn: {
+            type: Array,
+            default: () => ['input'],
+        },
+        onSubmit: { type: Function, default: undefined },
+    },
+    emits: {
+        reset: () => true,
+        'state-change': (_state) => true,
+    },
+    slots: Object,
+    setup(props, { attrs, emit, expose, slots }) {
+        const root = ref(null);
+        const summary = ref(null);
+        const state = shallowRef(emptyState);
+        const connection = shallowRef(null);
+        const participants = new Map();
+        const sync = () => {
+            if (connection.value !== null)
+                state.value = connection.value.getSnapshot().state;
+        };
+        const register = (participant) => {
+            const existing = participants.get(participant.id);
+            existing?.unregister?.();
+            const registered = { participant };
+            participants.set(participant.id, registered);
+            if (connection.value !== null)
+                registered.unregister = connection.value.registerParticipant(participant);
+            return () => {
+                if (participants.get(participant.id) !== registered)
+                    return;
+                registered.unregister?.();
+                participants.delete(participant.id);
+                sync();
+            };
+        };
+        const settleSubmission = (target, generation, result) => {
+            if (connection.value !== target)
+                return;
+            if (typeof result === 'object' && result !== null && result.ok === false) {
+                target.submitFailed(generation, toServerIssues(result.issues));
+                return;
+            }
+            target.submitSucceeded(generation);
+        };
+        const rejectSubmission = (target, generation, reason) => {
+            if (connection.value !== target)
+                return;
+            target.submitFailed(generation, [submissionErrorIssue(reason)]);
+        };
+        const submit = (payload) => {
+            const handler = props.onSubmit;
+            if (handler === undefined)
+                return;
+            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;
+            }
+            if (isPromiseLike(result)) {
+                void Promise.resolve(result).then((resolved) => settleSubmission(target, generation, resolved), (error) => rejectSubmission(target, generation, error));
+                return;
+            }
+            settleSubmission(target, generation, result);
+        };
+        const mount = () => {
+            if (root.value === null)
+                return;
+            connection.value?.destroy();
+            connection.value = createForm({
+                form: root.value,
+                ...(summary.value === null ? {} : { summary: summary.value }),
+                issues: props.issues,
+                ...(props.schema === undefined ? {} : { schema: props.schema }),
+                ...(props.validate === undefined ? {} : { validate: props.validate }),
+                validateOn: props.validateOn,
+                revalidateOn: props.revalidateOn,
+                onSubmit: submit,
+                onReset: () => emit('reset'),
+                onStateChange: (next) => {
+                    state.value = next;
+                    emit('state-change', next);
+                },
+            });
+            for (const registered of participants.values()) {
+                registered.unregister = connection.value.registerParticipant(registered.participant);
+            }
+            sync();
+        };
+        onMounted(() => { void nextTick(mount); });
+        onBeforeUnmount(() => connection.value?.destroy());
+        watch([
+            () => props.schema,
+            () => props.validate,
+            () => props.validateOn,
+            () => props.revalidateOn,
+        ], () => { void nextTick(mount); });
+        const actions = {
+            submitStarted: () => connection.value?.submitStarted() ?? null,
+            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,
+            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,
+            ...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) ?? []);
+    },
+});
+export const FormRoot = FormRootImpl;
+function toFormSubmitEvent(payload) {
+    return Object.freeze({
+        formData: payload.formData,
+        values: payload.values,
+        submitter: payload.submitter,
+        state: payload.state,
+        nativeEvent: payload.event,
+        get defaultPrevented() { return payload.event.defaultPrevented; },
+        preventDefault: () => payload.event.preventDefault(),
+        stopPropagation: () => payload.event.stopPropagation(),
+        stopImmediatePropagation: () => payload.event.stopImmediatePropagation(),
+    });
+}
+function isPromiseLike(value) {
+    return typeof value === 'object'
+        && value !== null
+        && 'then' in value
+        && typeof value.then === 'function';
+}
+function toServerIssues(input) {
+    if (input === undefined || input.length === 0)
+        return [submissionErrorIssue()];
+    return Object.freeze(input.map((issue) => Object.freeze({ ...issue, source: 'server' })));
+}
+function submissionErrorIssue(reason) {
+    const message = reason instanceof Error
+        ? reason.message.trim()
+        : typeof reason === 'string' ? reason.trim() : '';
+    return Object.freeze({
+        id: 'form-submit-error',
+        message: message || 'Form submission failed.',
+        source: 'server',
+    });
+}
+export const FormField = defineComponent({
+    name: 'SectileFormField',
+    inheritAttrs: false,
+    props: {
+        id: { type: String, default: undefined },
+        name: { type: [String, Array], default: undefined },
+        form: { type: String, default: undefined },
+        required: { type: Boolean, default: undefined },
+        disabled: { type: Boolean, default: undefined },
+        readonly: { type: Boolean, default: undefined },
+        ...partProps,
+    },
+    slots: Object,
+    setup(props, { attrs, slots }) {
+        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 controls = shallowRef([]);
+        const fallback = shallowRef(null);
+        const appliedAttributes = new Map();
+        let observer;
+        let unregister;
+        const activeControl = computed(() => (controls.value.find((registration) => resolveElement(registration.element) !== null)
+            ?? fallback.value));
+        const labelMode = computed(() => activeControl.value?.labelMode ?? 'for');
+        const semanticControl = () => {
+            const registration = activeControl.value;
+            if (registration === undefined || registration === null)
+                return null;
+            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 slotProps = computed(() => {
+            const current = fieldState.value;
+            const descriptionId = `${id.value}-description`;
+            const messageId = `${id.value}-message`;
+            const describedBy = `${descriptionId} ${messageId}`;
+            const valid = current?.valid ?? true;
+            return Object.freeze({
+                id: id.value,
+                controlId: effectiveControlId.value,
+                labelId: `${id.value}-label`,
+                descriptionId,
+                messageId,
+                describedBy,
+                valid,
+                touched: current?.touched ?? false,
+                dirty: current?.dirty ?? false,
+                issues: current?.issues ?? [],
+            });
+        });
+        const attributesFor = (registration) => {
+            const explicit = new Set(registration.explicit ?? []);
+            const capabilities = registration.capabilities ?? {};
+            const attributes = {};
+            const assign = (attribute, value) => {
+                if (!explicit.has(attribute) && value !== undefined)
+                    attributes[attribute] = value;
+            };
+            if (capabilities.id === true)
+                assign('id', slotProps.value.controlId);
+            if (capabilities.describedBy === true) {
+                assign('aria-describedby', slotProps.value.describedBy);
+                assign('aria-errormessage', slotProps.value.messageId);
+            }
+            if (capabilities.invalid === true && !slotProps.value.valid)
+                assign('aria-invalid', 'true');
+            if (capabilities.labelledBy === true && labelMode.value === 'labelledby') {
+                assign('aria-labelledby', slotProps.value.labelId);
+            }
+            if (capabilities.required === true && props.required === true)
+                assign('required', true);
+            else if (labelMode.value !== 'for' && props.required === true)
+                assign('aria-required', 'true');
+            if (capabilities.disabled === true && props.disabled === true)
+                assign('disabled', true);
+            else if (labelMode.value !== 'for' && props.disabled === true)
+                assign('aria-disabled', 'true');
+            if (capabilities.readonly === true && props.readonly === true)
+                assign('readonly', true);
+            else if (labelMode.value !== 'for' && props.readonly === true)
+                assign('aria-readonly', 'true');
+            return Object.freeze(attributes);
+        };
+        const restoreControlAttributes = () => {
+            for (const [element, attributes] of appliedAttributes) {
+                for (const [name, previous] of attributes) {
+                    if (previous === null)
+                        element.removeAttribute(name);
+                    else
+                        element.setAttribute(name, previous);
+                }
+            }
+            appliedAttributes.clear();
+        };
+        const applyControlAttributes = () => {
+            restoreControlAttributes();
+            const registration = activeControl.value;
+            if (registration === undefined || registration === null)
+                return;
+            const semantic = resolveElement(registration.semanticControl ?? registration.element);
+            if (semantic !== null) {
+                applyMetadata(semantic, attributesFor(registration), registration.explicit, appliedAttributes);
+            }
+            for (const submission of resolveSubmissionRegistrations(registration)) {
+                const element = resolveElement(submission.element);
+                if (element === null)
+                    continue;
+                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.form === true && props.form !== undefined)
+                    attributes['form'] = props.form;
+                if (capabilities.required === true && props.required === true)
+                    attributes['required'] = true;
+                if (capabilities.disabled === true && props.disabled === true)
+                    attributes['disabled'] = true;
+                if (capabilities.readonly === true && props.readonly === true)
+                    attributes['readonly'] = true;
+                applyMetadata(element, attributes, explicit, appliedAttributes);
+            }
+        };
+        const discoverNativeFallback = () => {
+            if (controls.value.length > 0 || root.value === null) {
+                fallback.value = null;
+                return;
+            }
+            const candidates = nativeCandidates(root.value);
+            const semantic = nativeSemanticControl(candidates);
+            if (semantic === undefined) {
+                fallback.value = null;
+                return;
+            }
+            const submissions = candidates.filter(isFormSubmissionElement).map((element) => ({
+                element: () => element,
+                capabilities: nativeSubmissionCapabilities(element),
+            }));
+            const current = fallback.value;
+            if (current !== null
+                && resolveElement(current.semanticControl ?? current.element) === semantic
+                && sameSubmissionElements(resolveSubmissionRegistrations(current), submissions))
+                return;
+            fallback.value = {
+                element: () => semantic,
+                semanticControl: () => semantic,
+                focusTarget: () => semantic,
+                submissions,
+                labelMode: nativeLabelMode(semantic),
+                capabilities: nativeControlCapabilities(semantic),
+            };
+        };
+        const registerControl = (registration) => {
+            controls.value = [...controls.value, registration];
+            fallback.value = null;
+            void nextTick(applyControlAttributes);
+            return () => {
+                controls.value = controls.value.filter((candidate) => candidate !== registration);
+                discoverNativeFallback();
+                void nextTick(applyControlAttributes);
+            };
+        };
+        const mount = () => {
+            unregister?.();
+            unregister = undefined;
+            if (root.value === null)
+                return;
+            discoverNativeFallback();
+            observer?.disconnect();
+            observer = new MutationObserver(() => {
+                discoverNativeFallback();
+                applyControlAttributes();
+            });
+            observer.observe(root.value, { childList: true, subtree: true });
+            applyControlAttributes();
+            const participant = {
+                id: id.value,
+                get element() { return root.value; },
+                get semanticControl() { return semanticControl() ?? root.value; },
+                get focusTarget() {
+                    const registration = activeControl.value;
+                    return registration === undefined || registration === null
+                        ? root.value
+                        : resolveElement(registration.focusTarget ?? registration.semanticControl ?? registration.element)
+                            ?? root.value;
+                },
+                get submissionElements() {
+                    const registration = activeControl.value;
+                    if (registration === undefined || registration === null)
+                        return [];
+                    return resolveSubmissionRegistrations(registration)
+                        .map((submission) => resolveElement(submission.element))
+                        .filter((element) => element !== null);
+                },
+                focus: () => {
+                    const registration = activeControl.value;
+                    const control = registration === undefined || registration === null
+                        ? null
+                        : resolveElement(registration.focusTarget ?? registration.semanticControl ?? registration.element);
+                    control?.focus();
+                    return control !== null && document.activeElement === control;
+                },
+                ...(props.name === undefined ? {} : { name: props.name }),
+            };
+            unregister = formContext.register(participant);
+        };
+        onMounted(() => { void nextTick(mount); });
+        onBeforeUnmount(() => {
+            observer?.disconnect();
+            restoreControlAttributes();
+            unregister?.();
+        });
+        watch([id, nameKey], () => { void nextTick(mount); });
+        watch([
+            activeControl,
+            effectiveControlId,
+            labelMode,
+            () => props.name,
+            () => props.form,
+            () => props.required,
+            () => props.disabled,
+            () => props.readonly,
+            () => slotProps.value.valid,
+        ], applyControlAttributes, { flush: 'post' });
+        provide(formFieldContextKey, {
+            slotProps,
+            labelMode,
+            registerControl,
+            attributesFor,
+        });
+        return () => h(Primitive, mergeProps(attrs, {
+            as: props.as,
+            asChild: props.asChild,
+            elementRef: (element) => { root.value = element; },
+            'data-scope': 'form',
+            'data-part': 'field',
+            'data-valid': slotProps.value.valid ? '' : undefined,
+            'data-invalid': slotProps.value.valid ? undefined : '',
+            'data-touched': slotProps.value.touched ? '' : undefined,
+            'data-dirty': slotProps.value.dirty ? '' : undefined,
+        }), { default: () => slots['default']?.(slotProps.value) });
+    },
+});
+export const FormLabel = defineComponent({
+    name: 'SectileFormLabel', inheritAttrs: false,
+    props: {
+        as: { type: [String, Object, Function], default: undefined },
+        asChild: { type: Boolean, default: false },
+    },
+    setup(props, { attrs, slots }) {
+        const field = useFormFieldContext('FormLabel');
+        return () => {
+            const mode = field.labelMode.value;
+            return renderFieldPart({
+                as: props.as ?? (mode === 'legend' ? 'legend' : mode === 'for' ? 'label' : 'span'),
+                asChild: props.asChild,
+            }, attrs, slots, 'label', {
+                id: field.slotProps.value.labelId,
+                ...(mode === 'for' ? { for: field.slotProps.value.controlId } : {}),
+            });
+        };
+    },
+});
+export const FormDescription = defineComponent({
+    name: 'SectileFormDescription', inheritAttrs: false,
+    props: { ...partProps, as: { ...partProps.as, default: 'p' } },
+    setup(props, { attrs, slots }) {
+        const field = useFormFieldContext('FormDescription');
+        return () => renderFieldPart(props, attrs, slots, 'description', {
+            id: field.slotProps.value.descriptionId,
+        });
+    },
+});
+export const FormMessage = defineComponent({
+    name: 'SectileFormMessage', inheritAttrs: false,
+    props: { ...partProps, as: { ...partProps.as, default: 'p' } },
+    slots: Object,
+    setup(props, { attrs, slots }) {
+        const field = useFormFieldContext('FormMessage');
+        return () => h(Primitive, mergeProps(attrs, {
+            as: props.as,
+            asChild: props.asChild,
+            id: field.slotProps.value.messageId,
+            hidden: field.slotProps.value.valid,
+            role: 'alert',
+            'aria-live': 'polite',
+            'data-scope': 'form',
+            'data-part': 'message',
+        }), {
+            default: () => slots['default']?.(field.slotProps.value)
+                ?? field.slotProps.value.issues.map((issue) => issue.message).join(' '),
+        });
+    },
+});
+export const FormSummary = defineComponent({
+    name: 'SectileFormSummary', inheritAttrs: false,
+    props: partProps,
+    slots: Object,
+    setup(props, { attrs, slots }) {
+        const form = useFormContext('FormSummary');
+        const slotProps = useRootSlotProps(form);
+        return () => h(Primitive, mergeProps(attrs, {
+            as: props.as,
+            asChild: props.asChild,
+            elementRef: (element) => { form.summary.value = element; },
+            role: 'alert',
+            'aria-live': 'polite',
+            tabindex: -1,
+            hidden: form.state.value.valid,
+            'data-scope': 'form',
+            'data-part': 'summary',
+        }), { default: () => slots['default']?.(slotProps.value) });
+    },
+});
+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) });
+    },
+});
+export const FormSubmit = defineComponent({
+    name: 'SectileFormSubmit', inheritAttrs: false,
+    props: { ...partProps, as: { ...partProps.as, default: 'button' } },
+    setup(props, { attrs, slots }) {
+        const form = useFormContext('FormSubmit');
+        const slotProps = useRootSlotProps(form);
+        return () => h(Primitive, mergeProps(attrs, {
+            as: props.as,
+            asChild: props.asChild,
+            ...(props.as === 'button' && !props.asChild ? { type: 'submit' } : {}),
+            'data-scope': 'form',
+            'data-part': 'submit',
+            'data-validation-status': form.state.value.validationStatus,
+            'data-submission-status': form.state.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,
+        asChild: props.asChild,
+        'data-scope': 'form',
+        '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 function provideFormControlOwner() {
+    provide(formControlOwnerKey, true);
+}
+function useFormContext(part) {
+    const context = inject(formContextKey, null);
+    if (context === null)
+        throw new TypeError(`${part} must be rendered inside FormRoot.`);
+    return context;
+}
+function useFormFieldContext(part) {
+    const context = inject(formFieldContextKey, null);
+    if (context === null)
+        throw new TypeError(`${part} must be rendered inside FormField.`);
+    return context;
+}
+function resolveElement(source) {
+    return typeof source === 'function' ? source() : source.value;
+}
+function resolveSubmissionRegistrations(registration) {
+    if (registration.submissions !== undefined) {
+        return typeof registration.submissions === 'function'
+            ? registration.submissions()
+            : registration.submissions;
+    }
+    const element = resolveElement(registration.element);
+    if (element === null || !isFormSubmissionElement(element))
+        return [];
+    return [{
+            element: () => element,
+            capabilities: nativeSubmissionCapabilities(element),
+            ...(registration.explicit === undefined ? {} : { explicit: registration.explicit }),
+        }];
+}
+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 candidates = [
+        ...(root.matches(selector) ? [root] : []),
+        ...root.querySelectorAll(selector),
+    ];
+    return candidates.filter((candidate) => (candidate.closest('[data-scope="form"][data-part="field"]') === root));
+}
+function nativeSemanticControl(candidates) {
+    return candidates.find((candidate) => (candidate.tagName !== 'INPUT'
+        || candidate.getAttribute('type')?.toLowerCase() !== 'hidden')) ?? candidates[0];
+}
+function isFormSubmissionElement(element) {
+    return ['INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName);
+}
+function nativeLabelMode(element) {
+    if (element.tagName === 'FIELDSET')
+        return 'legend';
+    if (element.tagName === 'INPUT' && element.getAttribute('type')?.toLowerCase() === 'hidden') {
+        return 'labelledby';
+    }
+    return ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName)
+        ? 'for'
+        : 'labelledby';
+}
+function nativeControlCapabilities(element) {
+    const tag = element.tagName;
+    const labelable = nativeLabelMode(element) === 'for';
+    return Object.freeze({
+        id: true,
+        describedBy: true,
+        invalid: true,
+        labelledBy: !labelable,
+        required: ['INPUT', 'SELECT', 'TEXTAREA'].includes(tag),
+        disabled: ['BUTTON', 'FIELDSET', 'INPUT', 'SELECT', 'TEXTAREA'].includes(tag),
+        readonly: tag === 'TEXTAREA' || (tag === 'INPUT' && supportsReadonly(element)),
+    });
+}
+function nativeSubmissionCapabilities(element) {
+    const tag = element.tagName;
+    return Object.freeze({
+        name: true,
+        form: true,
+        required: ['INPUT', 'SELECT', 'TEXTAREA'].includes(tag),
+        disabled: true,
+        readonly: tag === 'TEXTAREA' || (tag === 'INPUT' && supportsReadonly(element)),
+    });
+}
+function encodeSubmissionName(base, relative) {
+    if (relative === undefined)
+        return encodeFormFieldPath(base);
+    return encodeFormFieldPath(appendFormFieldPath(base, relative));
+}
+function applyMetadata(element, attributes, explicitAttributes, applied) {
+    const explicit = new Set(explicitAttributes ?? []);
+    for (const [name, value] of Object.entries(attributes)) {
+        if (value === undefined || value === false || explicit.has(name))
+            continue;
+        const previous = element.getAttribute(name);
+        const mergeTokens = name === 'aria-describedby' || name === 'aria-labelledby';
+        if (previous !== null && !mergeTokens)
+            continue;
+        let changes = applied.get(element);
+        if (changes === undefined) {
+            changes = new Map();
+            applied.set(element, changes);
+        }
+        if (!changes.has(name))
+            changes.set(name, previous);
+        const next = mergeTokens && previous !== null
+            ? [...new Set([...previous.split(/\s+/u), ...String(value).split(/\s+/u)])].join(' ')
+            : value === true ? '' : String(value);
+        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',
+        'reset', 'submit',
+    ]).has(element.type.toLowerCase());
+}
+//# sourceMappingURL=form.js.map