@vobs/ui 0.3.0 → 1.1.0

package/dist/forms.js

@@ -1,1019 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { createForm, createFormRenderer, createFormView, } from '@vobs/forms';
-import { classNames, createChoicePrimitive, createInputPrimitive, createSelectPrimitive, createTextareaPrimitive, createUiDomPlan, } from './primitives.js';
-export function createFormDrawerSubmissionContract(options) {
-    const mode = options.mode ?? 'edit';
-    const open = options.open === true;
-    const dirty = options.dirty === true;
-    const disabled = options.disabled === true;
-    const submitting = options.submitting === true || options.view.submitting.value;
-    const serverErrorCount = normalizeCount(options.serverErrorCount);
-    const errorCount = options.view.errorSummary.value.length;
-    const invalid = errorCount > 0;
-    const success = options.success === true && !invalid && !submitting;
-    const state = formDrawerSubmissionState({
-        dirty,
-        disabled,
-        invalid,
-        serverErrorCount,
-        submitting,
-        success,
-    });
-    const canSubmit = !disabled && !submitting && !invalid;
-    const focusTarget = readFirstErrorFocusTarget(options.view) ?? `#${options.drawerId}`;
-    return {
-        drawerId: options.drawerId,
-        mode,
-        state,
-        open,
-        dirty,
-        disabled,
-        submitting,
-        invalid,
-        success,
-        errorCount,
-        serverErrorCount,
-        canSubmit,
-        focusTarget,
-        attrs: {
-            'data-form-drawer-contract': 'true',
-            'data-drawer-id': options.drawerId,
-            'data-mode': mode,
-            'data-state': state,
-            'data-open': open ? 'true' : 'false',
-            'data-dirty': dirty ? 'true' : 'false',
-            'data-disabled': disabled ? 'true' : undefined,
-            'data-submitting': submitting ? 'true' : 'false',
-            'data-invalid': invalid ? 'true' : 'false',
-            'data-success': success ? 'true' : 'false',
-            'data-error-count': errorCount,
-            'data-server-error-count': serverErrorCount,
-            'data-can-submit': canSubmit ? 'true' : 'false',
-            'data-focus-target': focusTarget,
-            'aria-busy': submitting ? 'true' : undefined,
-        },
-        submitAttrs: {
-            type: 'submit',
-            disabled: !canSubmit,
-            'aria-disabled': canSubmit ? undefined : 'true',
-            'aria-busy': submitting ? 'true' : undefined,
-            'data-submit-intent': options.submitIntent ?? 'submit',
-            'data-state': submitting ? 'submitting' : canSubmit ? 'ready' : 'blocked',
-            'data-can-submit': canSubmit ? 'true' : 'false',
-        },
-        cancelAttrs: {
-            type: 'button',
-            'data-cancel-intent': options.cancelIntent ?? 'cancel',
-            'data-state': submitting ? 'blocked' : 'ready',
-            disabled: submitting ? true : undefined,
-            'aria-disabled': submitting ? 'true' : undefined,
-        },
-    };
-}
-export function createSliderPlans(options) {
-    const min = finiteOr(options.min, 0);
-    const max = Math.max(min, finiteOr(options.max, 100));
-    const step = Math.max(0, finiteOr(options.step, 1));
-    const values = sliderValues(options.value, min, max);
-    const mode = isSliderRangeValue(options.value) ? 'range' : 'single';
-    const thumbValues = mode === 'single' ? [values[0]] : values;
-    const startPercent = sliderPercent(values[0], min, max);
-    const endPercent = sliderPercent(values[1], min, max);
-    return {
-        root: createUiDomPlan('div', 'slider', {
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            ...(options.readonly === undefined ? {} : { readonly: options.readonly }),
-            state: options.disabled === true ? 'disabled' : options.readonly === true ? 'readonly' : mode,
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: {
-                id: options.id,
-                role: 'group',
-                'aria-label': options.label,
-                ...options.attrs,
-                'data-mode': mode,
-                'data-orientation': options.orientation ?? 'horizontal',
-                'data-min': min,
-                'data-max': max,
-                'data-step': step,
-                'data-value-start': values[0],
-                'data-value-end': values[1],
-                style: `--kui-slider-start: ${startPercent}%; --kui-slider-end: ${endPercent}%;${styleSuffix(options.attrs?.style)}`,
-            },
-        }),
-        track: createUiDomPlan('div', 'slider-track', { attrs: { 'aria-hidden': 'true' } }),
-        range: createUiDomPlan('span', 'slider-range', { attrs: { 'aria-hidden': 'true' } }),
-        thumbs: thumbValues.map((value, index) => createUiDomPlan('input', 'slider-thumb', {
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            ...(options.readonly === undefined ? {} : { readonly: options.readonly }),
-            attrs: {
-                id: `${options.id}-${mode === 'range' ? (index === 0 ? 'start' : 'end') : 'thumb'}`,
-                type: 'range',
-                name: sliderThumbName(options.name, mode, index),
-                min,
-                max,
-                step,
-                value,
-                'aria-label': sliderThumbLabel(options.label, mode, index),
-                'aria-valuetext': sliderValueText(options.valueText, value, index),
-            },
-        })),
-        marks: (options.marks ?? []).map((mark) => createUiDomPlan('span', 'slider-mark', {
-            attrs: {
-                'aria-hidden': mark.label === undefined ? 'true' : undefined,
-                'data-value': clampNumber(mark.value, min, max),
-                'data-label': mark.label,
-                style: `--kui-slider-mark: ${sliderPercent(mark.value, min, max)}%;`,
-            },
-        })),
-    };
-}
-export function getNextSliderValue(value, key, options = {}) {
-    const min = finiteOr(options.min, 0);
-    const max = Math.max(min, finiteOr(options.max, 100));
-    const step = Math.max(1, finiteOr(options.step, 1));
-    if (key === 'Home')
-        return min;
-    if (key === 'End')
-        return max;
-    if (key === 'PageUp')
-        return clampNumber(value + step * 10, min, max);
-    if (key === 'PageDown')
-        return clampNumber(value - step * 10, min, max);
-    if (key === 'ArrowRight' || key === 'ArrowUp')
-        return clampNumber(value + step, min, max);
-    if (key === 'ArrowLeft' || key === 'ArrowDown')
-        return clampNumber(value - step, min, max);
-    return clampNumber(value, min, max);
-}
-export function createSliderTooltipFormatterStateContract(options) {
-    const min = finiteOr(options.min, 0);
-    const max = Math.max(min, finiteOr(options.max, 100));
-    const values = sliderValues(options.value, min, max);
-    const mode = isSliderRangeValue(options.value) ? 'range' : 'single';
-    const thumbValues = mode === 'single' ? [values[0]] : values;
-    const formattedValues = sliderContractFormattedValues(options.formattedValue, values);
-    const formatState = sliderHasFormattedValue(options.formattedValue)
-        ? 'formatted'
-        : 'raw';
-    const tooltipVisibility = sliderContractTooltipVisibility(options.tooltipVisible, thumbValues.length);
-    const tooltipVisibleCount = tooltipVisibility.filter(Boolean).length;
-    const tooltipState = tooltipVisibleCount === 0
-        ? 'hidden'
-        : tooltipVisibleCount === thumbValues.length
-            ? 'visible'
-            : 'partial';
-    const filterSummary = options.filterSummary?.trim() ?? '';
-    const filterSummaryState = filterSummary === '' ? 'empty' : 'ready';
-    const thumbs = thumbValues.map((value, index) => {
-        const id = `${options.id}-${mode === 'range' ? (index === 0 ? 'start' : 'end') : 'thumb'}`;
-        const tooltipId = `${id}-tooltip`;
-        const formattedValue = formattedValues[index] ?? String(value);
-        const tooltipVisible = tooltipVisibility[index] === true;
-        return {
-            id,
-            value,
-            formattedValue,
-            tooltipVisible,
-            attrs: {
-                'data-tooltip-visible': tooltipVisible ? 'true' : undefined,
-                'data-tooltip-id': tooltipId,
-                'data-formatted-value': formattedValue,
-                'aria-valuetext': formattedValue,
-                'aria-describedby': tooltipVisible ? tooltipId : undefined,
-            },
-            tooltipAttrs: {
-                id: tooltipId,
-                role: 'tooltip',
-                hidden: tooltipVisible ? undefined : true,
-                'data-tooltip-visible': tooltipVisible ? 'true' : undefined,
-                'data-formatted-value': formattedValue,
-            },
-        };
-    });
-    return {
-        mode,
-        tooltipState,
-        formatState,
-        filterSummaryState,
-        tooltipVisibleCount,
-        formattedValues,
-        valueText: mode === 'single' ? formattedValues[0] : formattedValues,
-        filterSummary,
-        attrs: {
-            'data-slider-tooltip-formatter-contract': 'true',
-            'data-slider-tooltip-state': tooltipState,
-            'data-slider-format-state': formatState,
-            'data-slider-filter-summary-state': filterSummaryState,
-            'data-tooltip-visible-count': tooltipVisibleCount,
-            'data-formatted-value-start': formattedValues[0],
-            'data-formatted-value-end': formattedValues[1],
-            'data-filter-summary': filterSummary === '' ? undefined : filterSummary,
-        },
-        thumbs,
-    };
-}
-export function createSegmentedPlans(options) {
-    const enabled = options.options.filter((option) => option.disabled !== true);
-    const value = enabled.some((option) => option.value === options.value)
-        ? options.value
-        : enabled[0]?.value;
-    return {
-        root: createUiDomPlan('div', 'segmented', {
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: {
-                id: options.id,
-                role: 'radiogroup',
-                'aria-label': options.label,
-                ...options.attrs,
-                'data-orientation': options.orientation ?? 'horizontal',
-                'data-value': value,
-                'data-count': options.options.length,
-            },
-        }),
-        items: options.options.map((option) => {
-            const checked = option.value === value;
-            const disabled = options.disabled === true || option.disabled === true;
-            return createUiDomPlan('button', 'segmented-item', {
-                disabled,
-                state: disabled ? 'disabled' : checked ? 'checked' : 'idle',
-                attrs: {
-                    id: `${options.id}-${option.id}`,
-                    type: 'button',
-                    role: 'radio',
-                    tabindex: checked && !disabled ? 0 : -1,
-                    'aria-checked': checked ? 'true' : 'false',
-                    'data-option-id': option.id,
-                    'data-value': option.value,
-                    'data-label': option.label,
-                    'data-icon': option.icon === true ? 'true' : undefined,
-                },
-            });
-        }),
-        icons: options.options.map((option) => option.icon === true
-            ? createUiDomPlan('span', 'segmented-icon', {
-                attrs: { 'aria-hidden': 'true', 'data-option-id': option.id },
-            })
-            : undefined),
-    };
-}
-export function getNextSegmentedValue(options, value, key, orientation = 'horizontal') {
-    return getNextSelectionValue(options, value, key, orientation);
-}
-export function createSegmentedResponsiveStateContract(options) {
-    const ids = options.options.map((option) => option.id);
-    const knownIds = new Set(ids);
-    const optionIconIds = options.options
-        .filter((option) => option.icon === true)
-        .map((option) => option.id);
-    const iconIds = normalizeKnownIds([...optionIconIds, ...(options.iconIds ?? [])], knownIds);
-    const overflowIds = normalizeKnownIds(options.overflowIds, knownIds);
-    const overflowSet = new Set(overflowIds);
-    const visibleInputIds = options.visibleIds === undefined ? ids : normalizeKnownIds(options.visibleIds, knownIds);
-    const visibleIds = visibleInputIds.filter((id) => !overflowSet.has(id));
-    const iconSet = new Set(iconIds);
-    const visibleSet = new Set(visibleIds);
-    const wrapState = options.wrapped === true ? 'wrapped' : 'nowrap';
-    const overflowState = options.options.length === 0 ? 'empty' : overflowIds.length > 0 ? 'overflow' : 'expanded';
-    const items = options.options.map((option) => {
-        const icon = iconSet.has(option.id);
-        const overflow = overflowSet.has(option.id);
-        const visible = visibleSet.has(option.id);
-        return {
-            id: option.id,
-            option: icon === option.icon ? option : { ...option, icon },
-            icon,
-            visible,
-            overflow,
-            attrs: {
-                'data-option-id': option.id,
-                'data-icon': icon ? 'true' : undefined,
-                'data-visible': visible ? 'true' : undefined,
-                'data-overflow': overflow ? 'true' : undefined,
-                hidden: visible ? undefined : true,
-                'aria-hidden': visible ? undefined : 'true',
-            },
-        };
-    });
-    return {
-        overflowState,
-        wrapState,
-        itemCount: options.options.length,
-        iconCount: iconIds.length,
-        visibleCount: visibleIds.length,
-        overflowCount: overflowIds.length,
-        iconIds,
-        visibleIds,
-        overflowIds,
-        attrs: {
-            'data-segmented-responsive-state-contract': 'true',
-            'data-segmented-overflow-state': overflowState,
-            'data-segmented-wrap-state': wrapState,
-            'data-icon-count': iconIds.length,
-            'data-visible-count': visibleIds.length,
-            'data-overflow-count': overflowIds.length,
-            'data-icon-ids': iconIds.join(','),
-            'data-visible-ids': visibleIds.join(','),
-            'data-overflow-ids': overflowIds.join(','),
-        },
-        items,
-    };
-}
-export function createRadioGroupPlans(options) {
-    return createChoiceGroupPlans('radio', options);
-}
-export function createCheckboxGroupPlans(options) {
-    return createChoiceGroupPlans('checkbox', options);
-}
-export function getNextRadioGroupValue(options, value, key, orientation = 'vertical') {
-    return getNextSelectionValue(options, value, key, orientation);
-}
-export function toggleCheckboxGroupValue(values, value) {
-    const next = new Set(values);
-    if (next.has(value)) {
-        next.delete(value);
-    }
-    else {
-        next.add(value);
-    }
-    return next;
-}
-export function createChoiceGroupCardOptionStateContract(options) {
-    const ids = options.options.map((option) => option.id);
-    const knownIds = new Set(ids);
-    const selectedValues = options.type === 'radio'
-        ? new Set(options.value === undefined ? [] : [options.value])
-        : valueSet(options.values);
-    const selectedIds = options.options
-        .filter((option) => selectedValues.has(option.value))
-        .map((option) => option.id);
-    const disabledIds = options.options
-        .filter((option) => option.disabled === true)
-        .map((option) => option.id);
-    const selectedSet = new Set(selectedIds);
-    const disabledSet = new Set(disabledIds);
-    const cardIds = normalizeKnownIds(options.cardIds, knownIds);
-    const selectedEmphasisIds = normalizeKnownIds(options.selectedEmphasisIds ?? selectedIds, knownIds).filter((id) => selectedSet.has(id));
-    const disabledEmphasisIds = normalizeKnownIds(options.disabledEmphasisIds ?? disabledIds, knownIds).filter((id) => disabledSet.has(id));
-    const descriptionIds = normalizeKnownIds(options.descriptionIds ??
-        options.options
-            .filter((option) => option.description !== undefined)
-            .map((option) => option.id), knownIds);
-    const optionById = new Map(options.options.map((option) => [option.id, option]));
-    const filteredDescriptionIds = descriptionIds.filter((id) => optionById.get(id)?.description !== undefined);
-    const actionIds = normalizeKnownIds(options.actionIds, knownIds);
-    const actionSet = new Set(actionIds);
-    const actionDisabledIds = normalizeKnownIds(options.actionDisabledIds, knownIds).filter((id) => actionSet.has(id));
-    const cardSet = new Set(cardIds);
-    const selectedEmphasisSet = new Set(selectedEmphasisIds);
-    const disabledEmphasisSet = new Set(disabledEmphasisIds);
-    const descriptionSet = new Set(filteredDescriptionIds);
-    const actionDisabledSet = new Set(actionDisabledIds);
-    const state = options.options.length === 0
-        ? 'empty'
-        : cardIds.length === 0
-            ? 'plain'
-            : cardIds.length === options.options.length
-                ? 'cards'
-                : 'partial';
-    const items = options.options.map((option) => {
-        const card = cardSet.has(option.id);
-        const selected = selectedSet.has(option.id);
-        const disabled = disabledSet.has(option.id);
-        const selectedEmphasis = selectedEmphasisSet.has(option.id);
-        const disabledEmphasis = disabledEmphasisSet.has(option.id);
-        const descriptionState = descriptionSet.has(option.id)
-            ? 'visible'
-            : 'hidden';
-        const actionState = !actionSet.has(option.id)
-            ? 'hidden'
-            : actionDisabledSet.has(option.id) || disabled
-                ? 'disabled'
-                : 'ready';
-        const optionState = disabled
-            ? 'disabled'
-            : selected
-                ? 'selected'
-                : 'idle';
-        return {
-            id: option.id,
-            option,
-            state: optionState,
-            actionState,
-            descriptionState,
-            card,
-            selectedEmphasis,
-            disabledEmphasis,
-            attrs: {
-                'data-card-option': card ? 'true' : undefined,
-                'data-card-option-state': optionState,
-                'data-selected-emphasis': selectedEmphasis ? 'true' : undefined,
-                'data-disabled-emphasis': disabledEmphasis ? 'true' : undefined,
-                'data-description-state': descriptionState,
-                'data-action-state': actionState,
-                'aria-disabled': disabled ? 'true' : undefined,
-            },
-            actionAttrs: {
-                type: 'button',
-                'data-option-id': option.id,
-                'data-action-state': actionState,
-                hidden: actionState === 'hidden' ? true : undefined,
-                disabled: actionState === 'disabled' ? true : undefined,
-                'aria-disabled': actionState === 'disabled' ? 'true' : undefined,
-            },
-        };
-    });
-    return {
-        type: options.type,
-        state,
-        optionCount: options.options.length,
-        cardCount: cardIds.length,
-        selectedEmphasisCount: selectedEmphasisIds.length,
-        disabledEmphasisCount: disabledEmphasisIds.length,
-        descriptionCount: filteredDescriptionIds.length,
-        actionCount: actionIds.length,
-        actionDisabledCount: actionDisabledIds.length,
-        cardIds,
-        selectedEmphasisIds,
-        disabledEmphasisIds,
-        descriptionIds: filteredDescriptionIds,
-        actionIds,
-        actionDisabledIds,
-        attrs: {
-            'data-choice-group-card-option-contract': 'true',
-            'data-choice-type': options.type,
-            'data-card-state': state,
-            'data-card-count': cardIds.length,
-            'data-selected-emphasis-count': selectedEmphasisIds.length,
-            'data-disabled-emphasis-count': disabledEmphasisIds.length,
-            'data-description-count': descriptionIds.length,
-            'data-action-count': actionIds.length,
-            'data-action-disabled-count': actionDisabledIds.length,
-            'data-card-ids': cardIds.join(','),
-            'data-selected-emphasis-ids': selectedEmphasisIds.join(','),
-            'data-disabled-emphasis-ids': disabledEmphasisIds.join(','),
-            'data-description-ids': filteredDescriptionIds.join(','),
-            'data-action-ids': actionIds.join(','),
-            'data-action-disabled-ids': actionDisabledIds.join(','),
-        },
-        items,
-    };
-}
-export function createChoiceGroupBulkSelectionContract(options) {
-    const disabled = options.disabled === true;
-    const disabledReason = options.disabledReason?.trim() ?? '';
-    const selectedValues = options.type === 'radio'
-        ? new Set(options.value === undefined ? [] : [options.value])
-        : valueSet(options.values);
-    const indeterminateValues = valueSet(options.indeterminateValues);
-    const enabledOptions = options.options.filter((option) => option.disabled !== true);
-    const enabledValues = new Set(enabledOptions.map((option) => option.value));
-    const checkedOptions = options.options.filter((option) => selectedValues.has(option.value));
-    const indeterminateOptions = options.options.filter((option) => indeterminateValues.has(option.value));
-    const checkedIds = checkedOptions.map((option) => option.id);
-    const indeterminateIds = indeterminateOptions.map((option) => option.id);
-    const checkedEnabledCount = checkedOptions.filter((option) => enabledValues.has(option.value)).length;
-    const indeterminateEnabledCount = indeterminateOptions.filter((option) => enabledValues.has(option.value)).length;
-    const state = choiceGroupBulkSelectionState({
-        checkedCount: checkedEnabledCount,
-        disabled,
-        enabledCount: enabledOptions.length,
-        indeterminateCount: indeterminateEnabledCount,
-        totalCount: options.options.length,
-    });
-    const selectAllState = choiceGroupBulkSelectAllState({
-        state,
-        type: options.type,
-    });
-    const canSelectAll = options.type === 'checkbox' && !disabled && enabledOptions.length > 0;
-    const nextCheckedIds = canSelectAll && selectAllState !== 'checked' ? enabledOptions.map((option) => option.id) : [];
-    const attrs = {
-        'data-choice-group-bulk-selection-contract': 'true',
-        'data-choice-type': options.type,
-        'data-selection-state': state,
-        'data-select-all-state': selectAllState,
-        'data-total-count': options.options.length,
-        'data-enabled-count': enabledOptions.length,
-        'data-checked-count': checkedIds.length,
-        'data-indeterminate-count': indeterminateIds.length,
-        'data-checked-ids': checkedIds.join(','),
-        'data-indeterminate-ids': indeterminateIds.join(','),
-        'data-next-checked-ids': nextCheckedIds.join(','),
-        'data-disabled-reason': disabledReason === '' ? undefined : disabledReason,
-        'data-can-select-all': canSelectAll ? 'true' : undefined,
-        'aria-disabled': disabled ? 'true' : undefined,
-    };
-    return {
-        type: options.type,
-        state,
-        selectAllState,
-        totalCount: options.options.length,
-        enabledCount: enabledOptions.length,
-        checkedCount: checkedIds.length,
-        indeterminateCount: indeterminateIds.length,
-        checkedIds,
-        indeterminateIds,
-        nextCheckedIds,
-        disabledReason,
-        canSelectAll,
-        attrs,
-        selectAllAttrs: {
-            id: `${options.id}-select-all`,
-            type: 'checkbox',
-            role: 'checkbox',
-            'aria-label': options.selectAllLabel ?? 'Select all options',
-            'aria-checked': selectAllState === 'mixed' ? 'mixed' : selectAllState === 'checked' ? 'true' : 'false',
-            disabled: canSelectAll ? undefined : true,
-            'aria-disabled': canSelectAll ? undefined : 'true',
-            'data-select-all-state': selectAllState,
-            'data-next-checked-ids': nextCheckedIds.join(','),
-        },
-        optionContracts: options.options.map((option) => {
-            const checked = selectedValues.has(option.value);
-            const indeterminate = options.type === 'checkbox' && indeterminateValues.has(option.value);
-            const optionDisabled = disabled || option.disabled === true;
-            return {
-                id: option.id,
-                value: option.value,
-                checked,
-                indeterminate,
-                disabled: optionDisabled,
-                attrs: {
-                    'data-option-id': option.id,
-                    'data-value': option.value,
-                    'data-checked': checked ? 'true' : undefined,
-                    'data-indeterminate': indeterminate ? 'true' : undefined,
-                    'data-disabled-reason': optionDisabled && disabledReason !== '' ? disabledReason : undefined,
-                    'aria-checked': indeterminate ? 'mixed' : checked ? 'true' : 'false',
-                    'aria-disabled': optionDisabled ? 'true' : undefined,
-                },
-            };
-        }),
-    };
-}
-export function createFormUi(schema, options) {
-    const form = createForm(schema, options.initialValues);
-    const renderer = createFormRenderer(form, options.renderer);
-    const view = createFormView(renderer, { id: options.id });
-    return createFormUiFromView(view, options);
-}
-export function createFormUiFromView(view, options) {
-    return {
-        form: view.renderer.form,
-        renderer: view.renderer,
-        view,
-        root: createFormRootPlan(view),
-        fields: view.items.map((item) => createFormFieldPlan(item, options.descriptions?.[item.name])),
-        errorSummary: createErrorSummaryPlan(view),
-        submit: (callback) => view.submit(callback),
-    };
-}
-export function applyFormServerErrors(view, errors) {
-    for (const item of view.items) {
-        const value = errors[item.name];
-        if (value === undefined)
-            continue;
-        item.errors.value = Array.isArray(value) ? value : [value];
-        item.touched.value = true;
-    }
-}
-export function readFirstErrorFocusTarget(view) {
-    return view.errorSummary.value[0]?.href;
-}
-export function createFormRootPlan(view) {
-    return createUiDomPlan('form', 'form', {
-        loading: view.submitting.value,
-        state: view.submitting.value ? 'submitting' : 'idle',
-        ...(view.submitting.value ? { className: 'kui-form--submitting' } : {}),
-        attrs: { id: view.id, novalidate: true },
-    });
-}
-export function createErrorSummaryPlan(view) {
-    const items = view.errorSummary.value;
-    return {
-        root: createUiDomPlan('div', 'error-summary', {
-            invalid: items.length > 0,
-            state: items.length > 0 ? 'invalid' : 'idle',
-            attrs: {
-                id: view.errorSummaryId,
-                role: 'alert',
-                'aria-labelledby': view.errorSummaryLabelId,
-                hidden: items.length === 0 ? true : undefined,
-            },
-        }),
-        title: createUiDomPlan('h2', 'error-summary-title', {
-            attrs: { id: view.errorSummaryLabelId },
-        }),
-        items,
-    };
-}
-export function createFormFieldPlan(item, description) {
-    const descriptionId = description === undefined ? undefined : `${item.controlId}-description`;
-    const invalid = item.errors.value.length > 0;
-    const disabled = item.disabled.value;
-    const describedBy = joinIds(descriptionId, item.ariaDescribedBy.value);
-    return {
-        name: item.name,
-        label: item.labelText.value,
-        control: item.control,
-        root: createUiDomPlan('div', 'form-field', {
-            invalid,
-            disabled,
-            state: invalid ? 'invalid' : disabled ? 'disabled' : 'idle',
-            attrs: { id: item.id },
-        }),
-        labelPlan: createUiDomPlan('label', 'form-label', {
-            attrs: {
-                id: item.labelId,
-                for: item.control === 'custom' ? undefined : item.controlId,
-            },
-        }),
-        ...(description === undefined
-            ? {}
-            : {
-                descriptionText: description,
-                description: createUiDomPlan('p', 'form-description', {
-                    attrs: { id: descriptionId },
-                }),
-            }),
-        controlPlan: createControlPlan(item, describedBy),
-        error: createUiDomPlan('p', 'form-error', {
-            invalid,
-            state: invalid ? 'invalid' : 'idle',
-            attrs: {
-                id: item.errorId,
-                role: invalid ? 'alert' : undefined,
-                hidden: invalid ? undefined : true,
-            },
-        }),
-        errorText: item.errorText.value,
-    };
-}
-function createControlPlan(item, describedBy) {
-    const common = {
-        name: item.name,
-        required: item.required.value,
-        disabled: item.disabled.value,
-        invalid: item.errors.value.length > 0,
-        attrs: controlAttrs(item, describedBy),
-    };
-    switch (item.control) {
-        case 'checkbox':
-            return createChoicePrimitive({
-                type: 'checkbox',
-                checked: item.model.value === true,
-                value: 'true',
-                ...common,
-            });
-        case 'select':
-            // value carries the current selection (schema defaultValue / form model) so templates can render option selected
-            return createSelectPrimitive({
-                ...common,
-                value: item.model.value,
-            });
-        case 'textarea':
-            return createTextareaPrimitive({
-                ...common,
-                ...textValueOption(item.model.value),
-            });
-        case 'custom':
-            return createUiDomPlan('div', 'custom-field', {
-                invalid: common.invalid,
-                disabled: common.disabled,
-                state: common.invalid ? 'invalid' : common.disabled ? 'disabled' : 'idle',
-                attrs: {
-                    id: item.controlId,
-                    role: 'group',
-                    'aria-labelledby': item.labelId,
-                    'aria-describedby': describedBy,
-                },
-            });
-        default:
-            return createInputPrimitive({
-                type: normalizeInputType(item.inputType),
-                ...common,
-                ...textValueOption(item.model.value),
-            });
-    }
-}
-function controlAttrs(item, describedBy) {
-    return {
-        id: item.controlId,
-        'aria-labelledby': item.labelId,
-        'aria-describedby': describedBy,
-        'aria-required': item.ariaRequired.value,
-        'aria-invalid': item.ariaInvalid.value,
-        'aria-disabled': item.ariaDisabled.value,
-    };
-}
-function normalizeInputType(value) {
-    switch (value) {
-        case 'date':
-        case 'email':
-        case 'number':
-        case 'password':
-        case 'search':
-        case 'url':
-            return value;
-        default:
-            return 'text';
-    }
-}
-function textValueOption(value) {
-    return typeof value === 'number' || typeof value === 'string' ? { value } : {};
-}
-function joinIds(...ids) {
-    return classNames(...ids);
-}
-function createChoiceGroupPlans(type, options) {
-    const selectedValues = type === 'radio'
-        ? new Set(options.value === undefined ? [] : [options.value])
-        : valueSet(options.values);
-    const indeterminateValues = valueSet(options.indeterminateValues);
-    return {
-        root: createUiDomPlan('fieldset', `${type}-group`, {
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: {
-                id: options.id,
-                ...options.attrs,
-                'data-orientation': options.orientation ?? 'vertical',
-                'data-count': options.options.length,
-                'data-selected-count': selectedValues.size,
-            },
-        }),
-        legend: createUiDomPlan('legend', `${type}-group-legend`, {
-            attrs: { id: `${options.id}-legend`, 'data-label': options.legend },
-        }),
-        options: options.options.map((option) => {
-            const disabled = options.disabled === true || option.disabled === true;
-            const checked = selectedValues.has(option.value);
-            return createUiDomPlan('label', `${type}-group-option`, {
-                disabled,
-                state: disabled ? 'disabled' : checked ? 'checked' : 'idle',
-                attrs: {
-                    id: `${options.id}-${option.id}-option`,
-                    for: `${options.id}-${option.id}`,
-                    'data-option-id': option.id,
-                    'data-value': option.value,
-                    'data-label': option.label,
-                    'data-description': option.description,
-                    'data-indeterminate': type === 'checkbox' && indeterminateValues.has(option.value) ? 'true' : undefined,
-                },
-            });
-        }),
-        inputs: options.options.map((option) => {
-            const disabled = options.disabled === true || option.disabled === true;
-            const checked = selectedValues.has(option.value);
-            return createChoicePrimitive({
-                type,
-                name: options.name,
-                value: option.value,
-                checked,
-                disabled,
-                attrs: {
-                    id: `${options.id}-${option.id}`,
-                    'aria-describedby': option.description === undefined ? undefined : `${options.id}-${option.id}-description`,
-                    'aria-checked': type === 'checkbox' && indeterminateValues.has(option.value)
-                        ? 'mixed'
-                        : checked
-                            ? 'true'
-                            : 'false',
-                    'data-option-id': option.id,
-                    'data-label': option.label,
-                },
-            });
-        }),
-        descriptions: options.options.map((option) => option.description === undefined
-            ? undefined
-            : createUiDomPlan('span', `${type}-group-description`, {
-                attrs: {
-                    id: `${options.id}-${option.id}-description`,
-                    'data-description': option.description,
-                },
-            })),
-    };
-}
-function sliderValues(value, min, max) {
-    if (isSliderRangeValue(value)) {
-        const start = clampNumber(value[0] ?? min, min, max);
-        const end = clampNumber(value[1] ?? max, min, max);
-        return start <= end ? [start, end] : [end, start];
-    }
-    const current = clampNumber(value, min, max);
-    return [current, current];
-}
-function sliderPercent(value, min, max) {
-    if (max <= min)
-        return 0;
-    return Math.round(((clampNumber(value, min, max) - min) / (max - min)) * 10000) / 100;
-}
-function sliderThumbName(name, mode, index) {
-    if (name === undefined)
-        return undefined;
-    if (mode === 'single')
-        return name;
-    return `${name}-${index === 0 ? 'start' : 'end'}`;
-}
-function sliderThumbLabel(label, mode, index) {
-    if (mode === 'single')
-        return label ?? 'Slider value';
-    return `${label ?? 'Slider'} ${index === 0 ? 'start' : 'end'}`;
-}
-function sliderValueText(valueText, value, index) {
-    if (isSliderValueTextRange(valueText))
-        return valueText[index];
-    return valueText ?? String(value);
-}
-function sliderContractFormattedValues(value, values) {
-    if (value !== undefined && typeof value !== 'string') {
-        return [value[0].trim() || String(values[0]), value[1].trim() || String(values[1])];
-    }
-    const formatted = typeof value === 'string' ? value.trim() : '';
-    return [formatted || String(values[0]), formatted || String(values[1])];
-}
-function sliderContractTooltipVisibility(value, count) {
-    if (value !== undefined && typeof value !== 'boolean')
-        return value.slice(0, count);
-    return Array.from({ length: count }, () => value === true);
-}
-function sliderHasFormattedValue(value) {
-    if (value === undefined)
-        return false;
-    return typeof value === 'string' ? value.trim() !== '' : value.some((item) => item.trim() !== '');
-}
-function isSliderRangeValue(value) {
-    return Array.isArray(value);
-}
-function isSliderValueTextRange(value) {
-    return Array.isArray(value);
-}
-function getNextSelectionValue(options, value, key, orientation) {
-    const enabled = options.filter((option) => option.disabled !== true);
-    if (enabled.length === 0)
-        return value;
-    const currentIndex = Math.max(0, enabled.findIndex((option) => option.value === value));
-    const previousKey = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
-    const nextKey = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
-    if (key === 'Home')
-        return enabled[0]?.value;
-    if (key === 'End')
-        return enabled.at(-1)?.value;
-    if (key === previousKey)
-        return enabled.at(currentIndex - 1)?.value ?? enabled.at(-1)?.value;
-    if (key === nextKey)
-        return enabled[(currentIndex + 1) % enabled.length]?.value;
-    return value;
-}
-function valueSet(value) {
-    if (value === undefined)
-        return new Set();
-    return value instanceof Set ? value : new Set(value);
-}
-function normalizeKnownIds(value, knownIds) {
-    if (value === undefined)
-        return [];
-    const result = [];
-    const seen = new Set();
-    for (const id of value) {
-        if (!knownIds.has(id) || seen.has(id))
-            continue;
-        seen.add(id);
-        result.push(id);
-    }
-    return result;
-}
-function choiceGroupBulkSelectionState(options) {
-    if (options.disabled)
-        return 'disabled';
-    if (options.totalCount === 0)
-        return 'empty';
-    if (options.enabledCount > 0 &&
-        options.checkedCount >= options.enabledCount &&
-        options.indeterminateCount === 0) {
-        return 'all';
-    }
-    if (options.checkedCount > 0 || options.indeterminateCount > 0)
-        return 'partial';
-    return 'none';
-}
-function choiceGroupBulkSelectAllState(options) {
-    if (options.type === 'radio' || options.state === 'disabled' || options.state === 'empty') {
-        return 'disabled';
-    }
-    if (options.state === 'all')
-        return 'checked';
-    if (options.state === 'partial')
-        return 'mixed';
-    return 'unchecked';
-}
-function finiteOr(value, fallback) {
-    return value === undefined || !Number.isFinite(value) ? fallback : value;
-}
-function normalizeCount(value) {
-    if (value === undefined || !Number.isFinite(value))
-        return 0;
-    return Math.max(0, Math.trunc(value));
-}
-function formDrawerSubmissionState(options) {
-    if (options.submitting)
-        return 'submitting';
-    if (options.disabled)
-        return 'disabled';
-    if (options.serverErrorCount > 0)
-        return 'server-error';
-    if (options.invalid)
-        return 'invalid';
-    if (options.success)
-        return 'success';
-    if (options.dirty)
-        return 'dirty';
-    return 'idle';
-}
-function clampNumber(value, min, max) {
-    if (!Number.isFinite(value))
-        return min;
-    return Math.min(Math.max(value, min), max);
-}
-function styleSuffix(value) {
-    if (typeof value !== 'string' || value.trim() === '')
-        return '';
-    return value.trim().endsWith(';') ? value.trim() : `${value.trim()};`;
-}
-export function createSettingRowPlans(options) {
-    const kind = options.control ?? 'select';
-    const control = createUiDomPlan('button', 'setting-row-control', {
-        state: options.danger === true ? 'danger' : kind === 'icon-button' ? 'icon' : 'idle',
-        ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-        attrs: {
-            id: `${options.id}-control`,
-            type: 'button',
-            ...(kind === 'select' ? { 'data-kind': 'select' } : {}),
-            ...(options.controlLabel === undefined ? {} : { 'data-label': options.controlLabel }),
-        },
-    });
-    return {
-        root: createUiDomPlan('div', 'setting-row', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: { id: `${options.id}-row`, ...options.attrs },
-        }),
-        main: createUiDomPlan('div', 'setting-row-main', {
-            attrs: { id: `${options.id}-main` },
-        }),
-        title: createUiDomPlan('span', 'setting-row-title', {
-            attrs: { id: `${options.id}-title`, 'data-label': options.title },
-        }),
-        description: createUiDomPlan('span', 'setting-row-description', {
-            attrs: {
-                id: `${options.id}-desc`,
-                ...(options.description === undefined ? {} : { 'data-label': options.description }),
-            },
-        }),
-        control,
-    };
-}
-export function createSettingRowGroupPlans(options) {
-    return {
-        ...createUiDomPlan('div', 'setting-row-group', {
-            attrs: { id: `${options.id}-group` },
-        }),
-        groupId: options.id,
-        groupLabel: createUiDomPlan('span', 'setting-row-group-label', {
-            attrs: { id: `${options.id}-group-label`, 'data-label': options.label },
-        }),
-        panel: createUiDomPlan('div', 'setting-row-panel', {
-            attrs: { id: `${options.id}-panel` },
-        }),
-        rows: options.rows.map((row) => createSettingRowPlans(row)),
-    };
-}
-export function createRatePlans(options) {
-    const max = options.max ?? 5;
-    const value = Math.max(0, Math.min(max, options.value ?? 0));
-    const stars = [];
-    for (let index = 1; index <= max; index += 1) {
-        stars.push(createUiDomPlan('button', 'rate-star', {
-            state: index <= value ? 'active' : 'idle',
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            attrs: {
-                id: `${options.id}-star-${index}`,
-                type: 'button',
-                'data-index': String(index),
-                'aria-label': `Rate ${index} of ${max}`,
-                'aria-checked': index <= value ? 'true' : 'false',
-                role: 'radio',
-            },
-        }));
-    }
-    return {
-        root: createUiDomPlan('div', 'rate', {
-            state: options.readonly === true ? 'readonly' : 'idle',
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: { id: `${options.id}-rate`, role: 'radiogroup', ...options.attrs },
-        }),
-        stars,
-    };
-}