@vobs/ui 0.3.0 → 1.0.0

package/dist/primitives.js

@@ -1,764 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-export function createButtonPrimitive(options = {}) {
-    const disabled = options.disabled === true || options.loading === true;
-    return createUiDomPlan('button', 'button', {
-        ...options,
-        disabled,
-        state: options.state ?? stateFromFlags({ ...options, disabled }),
-        className: classNames(`kui-button--${options.variant ?? 'solid'}`, `kui-button--${options.size ?? 'md'}`, options.iconOnly === true ? 'kui-button--icon-only' : undefined, options.className),
-        attrs: {
-            type: options.type ?? 'button',
-            ...options.attrs,
-            ...(options.label === undefined ? {} : { 'aria-label': options.label }),
-        },
-    });
-}
-export function createIconPrimitive(options = {}) {
-    const semantic = options.decorative === false || options.label !== undefined;
-    return createUiDomPlan('span', 'icon', {
-        ...options,
-        state: options.state ?? 'idle',
-        attrs: {
-            ...options.attrs,
-            ...(semantic ? { role: 'img', 'aria-label': options.label } : { 'aria-hidden': 'true' }),
-        },
-    });
-}
-export function createInputPrimitive(options = {}) {
-    return createTextControlPrimitive('input', options);
-}
-export function createTextareaPrimitive(options = {}) {
-    return createTextControlPrimitive('textarea', options);
-}
-export function createNumberInputPrimitive(options = {}) {
-    return createTextControlPrimitive('input', { ...options, type: 'number' });
-}
-export function createNumberInputStepperFormattingContract(options) {
-    const rawValue = options.value === undefined ? '' : String(options.value);
-    const parsedValue = numberInputNumericValue(options.value);
-    const parseError = rawValue.trim() !== '' && parsedValue === undefined
-        ? (options.parseError?.trim() ?? 'Invalid number')
-        : '';
-    const min = finiteNumber(options.min);
-    const max = finiteNumber(options.max);
-    const step = finiteNumber(options.step) ?? 1;
-    const clampedValue = parsedValue === undefined
-        ? undefined
-        : min !== undefined && parsedValue < min
-            ? min
-            : max !== undefined && parsedValue > max
-                ? max
-                : parsedValue;
-    const clampReason = parsedValue === undefined
-        ? 'none'
-        : min !== undefined && parsedValue < min
-            ? 'min'
-            : max !== undefined && parsedValue > max
-                ? 'max'
-                : 'none';
-    const displayValue = options.formattedValue !== undefined && options.formattedValue !== ''
-        ? options.formattedValue
-        : rawValue;
-    const formatState = numberInputFormatState({
-        displayValue,
-        formattedValue: options.formattedValue,
-        parseError,
-        rawValue,
-    });
-    const disabled = options.disabled === true;
-    const readonly = options.readonly === true;
-    const canDecrement = parsedValue !== undefined &&
-        !disabled &&
-        !readonly &&
-        parseError === '' &&
-        (min === undefined || parsedValue > min);
-    const canIncrement = parsedValue !== undefined &&
-        !disabled &&
-        !readonly &&
-        parseError === '' &&
-        (max === undefined || parsedValue < max);
-    const stepperState = numberInputStepperState({
-        canDecrement,
-        canIncrement,
-        disabled,
-        readonly,
-        numericValue: parsedValue,
-    });
-    return {
-        stepperState,
-        formatState,
-        clampReason,
-        rawValue,
-        displayValue,
-        numericValue: parsedValue,
-        clampedValue,
-        min,
-        max,
-        step,
-        parseError,
-        canDecrement,
-        canIncrement,
-        attrs: {
-            'data-number-input-stepper-format-contract': 'true',
-            'data-stepper-state': stepperState,
-            'data-format-state': formatState,
-            'data-clamp-reason': clampReason,
-            'data-control-id': options.id,
-            'data-raw-value': rawValue,
-            'data-display-value': displayValue,
-            'data-numeric-value': parsedValue,
-            'data-clamped-value': clampedValue,
-            'data-min': min,
-            'data-max': max,
-            'data-step': step,
-            'data-parse-error': parseError,
-            'data-can-decrement': canDecrement ? 'true' : undefined,
-            'data-can-increment': canIncrement ? 'true' : undefined,
-            'aria-disabled': disabled ? 'true' : undefined,
-            'aria-readonly': readonly ? 'true' : undefined,
-            'aria-invalid': parseError !== '' ? 'true' : undefined,
-        },
-        controlAttrs: {
-            id: options.id,
-            'data-number-format-control': 'true',
-            'data-stepper-state': stepperState,
-            'data-format-state': formatState,
-            'data-clamp-reason': clampReason,
-            'data-display-value': displayValue,
-            'data-parse-error': parseError,
-            min,
-            max,
-            step,
-            'aria-invalid': parseError !== '' ? 'true' : undefined,
-        },
-        decrementButtonAttrs: {
-            type: 'button',
-            'aria-label': options.decrementLabel ?? 'Decrement value',
-            'data-stepper-action': 'decrement',
-            'data-can-step': canDecrement ? 'true' : undefined,
-            disabled: canDecrement ? undefined : true,
-            'aria-disabled': canDecrement ? undefined : 'true',
-        },
-        incrementButtonAttrs: {
-            type: 'button',
-            'aria-label': options.incrementLabel ?? 'Increment value',
-            'data-stepper-action': 'increment',
-            'data-can-step': canIncrement ? 'true' : undefined,
-            disabled: canIncrement ? undefined : true,
-            'aria-disabled': canIncrement ? undefined : 'true',
-        },
-    };
-}
-export function createTextInputAffixStateContract(options) {
-    const kind = options.kind ?? 'input';
-    const value = options.value === undefined ? '' : String(options.value);
-    const prefix = options.prefix?.trim() ?? '';
-    const suffix = options.suffix?.trim() ?? '';
-    const hasPrefix = prefix !== '';
-    const hasSuffix = suffix !== '';
-    const clearable = options.clearable === true;
-    const disabled = options.disabled === true;
-    const readonly = options.readonly === true;
-    const loading = options.loading === true;
-    const invalid = options.invalid === true;
-    const canClear = clearable && value !== '' && !disabled && !readonly && !loading;
-    const state = textInputAffixState({
-        canClear,
-        disabled,
-        invalid,
-        loading,
-        readonly,
-        value,
-    });
-    const describedBy = [
-        options.describedBy,
-        hasPrefix ? `${options.id}-prefix` : undefined,
-        hasSuffix ? `${options.id}-suffix` : undefined,
-    ]
-        .filter((id) => id !== undefined && id !== '')
-        .join(' ');
-    return {
-        state,
-        kind,
-        value,
-        prefix,
-        suffix,
-        hasPrefix,
-        hasSuffix,
-        clearable,
-        canClear,
-        attrs: {
-            'data-text-input-affix-contract': 'true',
-            'data-affix-state': state,
-            'data-control-id': options.id,
-            'data-control-kind': kind,
-            'data-has-prefix': hasPrefix ? 'true' : undefined,
-            'data-has-suffix': hasSuffix ? 'true' : undefined,
-            'data-clearable': clearable ? 'true' : undefined,
-            'data-can-clear': canClear ? 'true' : undefined,
-            'data-value-empty': value === '' ? 'true' : undefined,
-            'data-prefix': prefix,
-            'data-suffix': suffix,
-            'aria-disabled': disabled ? 'true' : undefined,
-            'aria-readonly': readonly ? 'true' : undefined,
-            'aria-busy': loading ? 'true' : undefined,
-            'aria-invalid': invalid ? 'true' : undefined,
-        },
-        controlAttrs: {
-            id: options.id,
-            'data-affix-control': 'true',
-            'data-affix-state': state,
-            'data-has-prefix': hasPrefix ? 'true' : undefined,
-            'data-has-suffix': hasSuffix ? 'true' : undefined,
-            'data-clearable': clearable ? 'true' : undefined,
-            'data-can-clear': canClear ? 'true' : undefined,
-            'aria-describedby': describedBy === '' ? undefined : describedBy,
-        },
-        prefixAttrs: {
-            id: `${options.id}-prefix`,
-            'data-affix-part': 'prefix',
-            'data-label': prefix,
-            'aria-hidden': 'true',
-        },
-        suffixAttrs: {
-            id: `${options.id}-suffix`,
-            'data-affix-part': 'suffix',
-            'data-label': suffix,
-            'aria-hidden': 'true',
-        },
-        clearButtonAttrs: {
-            type: 'button',
-            'aria-label': options.clearLabel ?? 'Clear input',
-            'data-affix-part': 'clear',
-            'data-can-clear': canClear ? 'true' : undefined,
-            disabled: canClear ? undefined : true,
-            'aria-disabled': canClear ? undefined : 'true',
-        },
-    };
-}
-export function createChoicePrimitive(options) {
-    return createUiDomPlan('input', options.type, {
-        ...options,
-        state: options.state ?? (options.checked === true ? 'checked' : 'unchecked'),
-        attrs: {
-            type: options.type,
-            name: options.name,
-            value: options.value,
-            checked: options.checked,
-            required: options.required,
-            ...options.attrs,
-        },
-    });
-}
-export function createSwitchPrimitive(options = {}) {
-    return createUiDomPlan('button', 'switch', {
-        ...options,
-        state: options.state ?? (options.checked === true ? 'checked' : 'unchecked'),
-        attrs: {
-            type: 'button',
-            role: 'switch',
-            'aria-checked': options.checked === true ? 'true' : 'false',
-            ...options.attrs,
-            ...(options.label === undefined ? {} : { 'aria-label': options.label }),
-        },
-    });
-}
-export function createSwitchAsyncConfirmationContract(options) {
-    const checked = options.checked === true;
-    const pendingChecked = options.pendingChecked;
-    const loading = options.loading === true;
-    const confirmRequired = options.confirmRequired === true;
-    const disabled = options.disabled === true;
-    const readonly = options.readonly === true;
-    const disabledReason = options.disabledReason?.trim() ?? '';
-    const rollback = options.rollback === true;
-    const error = options.error?.trim() ?? '';
-    const pending = pendingChecked !== undefined && pendingChecked !== checked;
-    const canToggle = !disabled && !readonly && !loading;
-    const state = switchAsyncConfirmationState({
-        checked,
-        confirmRequired,
-        disabled,
-        error,
-        loading,
-        pending,
-        readonly,
-        rollback,
-    });
-    const attrs = {
-        'data-switch-async-confirmation-contract': 'true',
-        'data-switch-state': state,
-        'data-checked': checked ? 'true' : 'false',
-        'data-pending-checked': pendingChecked === undefined ? undefined : String(pendingChecked),
-        'data-loading': loading ? 'true' : undefined,
-        'data-confirm-required': confirmRequired ? 'true' : undefined,
-        'data-disabled-reason': disabledReason === '' ? undefined : disabledReason,
-        'data-rollback': rollback ? 'true' : undefined,
-        'data-error': error === '' ? undefined : error,
-        'data-can-toggle': canToggle ? 'true' : undefined,
-        'aria-busy': loading ? 'true' : undefined,
-        'aria-disabled': disabled || readonly ? 'true' : undefined,
-    };
-    return {
-        state,
-        checked,
-        pendingChecked,
-        loading,
-        confirmRequired,
-        disabled,
-        readonly,
-        disabledReason,
-        rollback,
-        error,
-        canToggle,
-        attrs,
-        controlAttrs: {
-            id: options.id,
-            role: 'switch',
-            type: 'button',
-            'aria-checked': checked ? 'true' : 'false',
-            'aria-label': options.label ?? options.id,
-            ...attrs,
-            disabled: disabled ? true : undefined,
-        },
-        confirmButtonAttrs: {
-            type: 'button',
-            'aria-label': options.confirmLabel ?? 'Confirm switch change',
-            'data-confirm-required': confirmRequired ? 'true' : undefined,
-            'data-pending-checked': pendingChecked === undefined ? undefined : String(pendingChecked),
-            disabled: confirmRequired && canToggle ? undefined : true,
-            'aria-disabled': confirmRequired && canToggle ? undefined : 'true',
-        },
-    };
-}
-export function createSelectPrimitive(options = {}) {
-    return createUiDomPlan('select', 'select', {
-        ...options,
-        state: options.state ?? stateFromFlags(options),
-        attrs: {
-            name: options.name,
-            required: options.required,
-            multiple: options.multiple === true ? true : undefined,
-            size: options.size,
-            value: options.value,
-            'data-multiple': options.multiple === true ? 'true' : undefined,
-            'data-size': options.size,
-            ...options.attrs,
-        },
-    });
-}
-export function createSelectSearchMultiselectContract(options) {
-    const query = options.query?.trim() ?? '';
-    const knownIds = new Set(options.items.map((item) => item.id));
-    const selectedInputIds = options.selectedIds ?? options.items.filter((item) => item.selected).map((item) => item.id);
-    const selectedIds = selectUniqueKnownIds(selectedInputIds, knownIds);
-    const selectedSet = new Set(selectedIds);
-    const normalizedMaxSelected = options.maxSelected === undefined || !Number.isFinite(options.maxSelected)
-        ? undefined
-        : Math.max(0, Math.trunc(options.maxSelected));
-    const filteredItems = options.items.filter((item) => selectItemMatchesQuery(item, query));
-    const visibleIds = filteredItems.map((item) => item.id);
-    const visibleSet = new Set(visibleIds);
-    const maxed = normalizedMaxSelected !== undefined &&
-        selectedIds.length >= normalizedMaxSelected &&
-        normalizedMaxSelected > 0;
-    const clearable = options.clearable === true;
-    const disabled = options.disabled === true;
-    const readonly = options.readonly === true;
-    const loading = options.loading === true;
-    const canClear = clearable && selectedIds.length > 0 && !disabled && !readonly && !loading;
-    const filtered = query !== '' && visibleIds.length < options.items.length;
-    const state = options.items.length === 0
-        ? 'empty'
-        : filtered
-            ? 'filtered'
-            : maxed
-                ? 'maxed'
-                : selectedIds.length > 1
-                    ? 'multiple'
-                    : 'ready';
-    const items = options.items.map((item) => selectSearchMultiselectOptionContract(item, {
-        matched: visibleSet.has(item.id),
-        selected: selectedSet.has(item.id),
-    }));
-    const searchAttrs = {
-        id: `${options.id}-search`,
-        type: 'search',
-        role: 'searchbox',
-        value: query,
-        placeholder: options.searchPlaceholder ?? 'Search options',
-        'aria-label': options.searchLabel ?? 'Search options',
-        'aria-controls': options.id,
-        'aria-busy': loading ? 'true' : undefined,
-        'data-search-query': query,
-        'data-search-result-count': visibleIds.length,
-        'data-search-filtered': filtered ? 'true' : undefined,
-    };
-    const selectAttrs = {
-        id: options.id,
-        name: options.id,
-        multiple: true,
-        size: Math.max(4, Math.min(filteredItems.length === 0 ? options.items.length : filteredItems.length, 8)),
-        'data-select-search-multiselect-contract': 'true',
-        'data-select-state': state,
-        'data-query': query,
-        'data-total-count': options.items.length,
-        'data-visible-count': visibleIds.length,
-        'data-selected-count': selectedIds.length,
-        'data-max-selected': normalizedMaxSelected,
-        'data-clearable': clearable ? 'true' : undefined,
-        'data-can-clear': canClear ? 'true' : undefined,
-        'data-selected-ids': selectedIds.join(','),
-        'data-visible-ids': visibleIds.join(','),
-        'data-filtered': filtered ? 'true' : undefined,
-        'data-maxed': maxed ? 'true' : undefined,
-        'aria-busy': loading ? 'true' : undefined,
-        'aria-disabled': disabled ? 'true' : undefined,
-        'aria-readonly': readonly ? 'true' : undefined,
-    };
-    return {
-        state,
-        query,
-        totalCount: options.items.length,
-        visibleCount: visibleIds.length,
-        selectedCount: selectedIds.length,
-        maxSelected: normalizedMaxSelected,
-        clearable,
-        canClear,
-        filtered,
-        maxed,
-        selectedIds,
-        visibleIds,
-        items,
-        attrs: {
-            'data-select-search-multiselect-contract': 'true',
-            'data-select-state': state,
-            'data-query': query,
-            'data-total-count': options.items.length,
-            'data-visible-count': visibleIds.length,
-            'data-selected-count': selectedIds.length,
-            'data-max-selected': normalizedMaxSelected,
-            'data-clearable': clearable ? 'true' : undefined,
-            'data-can-clear': canClear ? 'true' : undefined,
-            'data-selected-ids': selectedIds.join(','),
-            'data-visible-ids': visibleIds.join(','),
-            'data-filtered': filtered ? 'true' : undefined,
-            'data-maxed': maxed ? 'true' : undefined,
-            'aria-busy': loading ? 'true' : undefined,
-            'aria-disabled': disabled ? 'true' : undefined,
-            'aria-readonly': readonly ? 'true' : undefined,
-        },
-        searchAttrs,
-        selectAttrs,
-        clearButtonAttrs: {
-            type: 'button',
-            'aria-label': options.clearLabel ?? 'Clear selection',
-            'data-clearable': clearable ? 'true' : undefined,
-            'data-can-clear': canClear ? 'true' : undefined,
-            disabled: canClear ? undefined : true,
-            'aria-disabled': canClear ? undefined : 'true',
-        },
-    };
-}
-export function createSkeletonPrimitive(options = {}) {
-    return createUiDomPlan('span', 'skeleton', {
-        ...options,
-        loading: true,
-        state: options.state ?? 'loading',
-        attrs: {
-            'aria-hidden': 'true',
-            ...options.attrs,
-        },
-    });
-}
-export function createSpinPrimitive(options = {}) {
-    return createUiDomPlan('span', 'spin', {
-        ...options,
-        loading: true,
-        state: options.state ?? 'loading',
-        attrs: {
-            role: 'status',
-            'aria-label': options.label ?? 'Loading',
-            ...options.attrs,
-        },
-    });
-}
-export function createDashboardLayoutPrimitive(options = {}) {
-    return createLayoutPrimitive('div', 'dashboard-layout', {
-        density: 'compact',
-        ...options,
-    });
-}
-export function createAuthLayoutPrimitive(options = {}) {
-    return createLayoutPrimitive('main', 'auth-layout', options);
-}
-export function createPageFramePrimitive(options = {}) {
-    return createLayoutPrimitive('main', 'page-frame', options);
-}
-export function createPageHeaderPrimitive(options = {}) {
-    return createLayoutPrimitive('header', 'page-header', options);
-}
-export function createPageToolbarPrimitive(options = {}) {
-    return createLayoutPrimitive('div', 'page-toolbar', {
-        ...options,
-        attrs: { role: 'toolbar', ...options.attrs },
-    });
-}
-export function createPageBodyPrimitive(options = {}) {
-    const mode = options.mode ?? 'contained';
-    return createLayoutPrimitive('section', 'page-body', {
-        ...options,
-        attrs: { 'data-mode': mode, ...options.attrs },
-    });
-}
-export function createAdaptiveGridPrimitive(options = {}) {
-    return createLayoutPrimitive('div', 'adaptive-grid', {
-        ...options,
-        attrs: {
-            style: `--kui-grid-min: ${options.minColumnWidth ?? '240px'};${styleSuffix(options.attrs?.style)}`,
-            ...options.attrs,
-        },
-    });
-}
-export function createUiDomPlan(tag, component, options = {}) {
-    const attrs = { ...options.attrs };
-    setDefined(attrs, 'data-state', options.state ?? stateFromFlags(options));
-    setDefined(attrs, 'data-density', options.density);
-    setFlag(attrs, 'data-disabled', options.disabled);
-    setFlag(attrs, 'data-readonly', options.readonly);
-    setFlag(attrs, 'data-loading', options.loading);
-    setFlag(attrs, 'data-invalid', options.invalid);
-    setDefined(attrs, 'aria-disabled', options.disabled === true ? 'true' : undefined);
-    setDefined(attrs, 'aria-readonly', options.readonly === true ? 'true' : undefined);
-    setDefined(attrs, 'aria-busy', options.loading === true ? 'true' : undefined);
-    setDefined(attrs, 'aria-invalid', options.invalid === true ? 'true' : undefined);
-    setDefined(attrs, 'disabled', options.disabled === true ? true : undefined);
-    setDefined(attrs, 'readonly', options.readonly === true ? true : undefined);
-    return {
-        tag,
-        className: classNames(`kui-${component}`, options.density === undefined ? undefined : `kui-density-${options.density}`, options.className),
-        attrs: removeUndefined(attrs),
-    };
-}
-export function classNames(...values) {
-    return values
-        .filter((value) => typeof value === 'string' && value !== '')
-        .join(' ');
-}
-function createTextControlPrimitive(tag, options) {
-    return createUiDomPlan(tag, tag, {
-        ...options,
-        state: options.state ?? stateFromFlags(options),
-        attrs: {
-            type: tag === 'input' ? (options.type ?? 'text') : undefined,
-            name: options.name,
-            value: options.value,
-            required: options.required,
-            placeholder: options.placeholder,
-            ...options.attrs,
-        },
-    });
-}
-function createLayoutPrimitive(tag, component, options) {
-    return createUiDomPlan((options.as ?? tag), component, {
-        ...options,
-        state: options.state ?? 'idle',
-    });
-}
-function stateFromFlags(options) {
-    if (options.loading === true)
-        return 'loading';
-    if (options.disabled === true)
-        return 'disabled';
-    if (options.readonly === true)
-        return 'readonly';
-    if (options.invalid === true)
-        return 'invalid';
-    return 'idle';
-}
-function textInputAffixState(options) {
-    if (options.loading)
-        return 'loading';
-    if (options.disabled)
-        return 'disabled';
-    if (options.readonly)
-        return 'readonly';
-    if (options.invalid)
-        return 'invalid';
-    if (options.canClear)
-        return 'clearable';
-    if (options.value === '')
-        return 'empty';
-    return 'ready';
-}
-function numberInputNumericValue(value) {
-    if (value === undefined || value === '')
-        return undefined;
-    if (typeof value === 'number')
-        return Number.isFinite(value) ? value : undefined;
-    const trimmed = value.trim();
-    if (trimmed === '')
-        return undefined;
-    const parsed = Number(trimmed);
-    return Number.isFinite(parsed) ? parsed : undefined;
-}
-function finiteNumber(value) {
-    return value === undefined || !Number.isFinite(value) ? undefined : value;
-}
-function numberInputFormatState(options) {
-    if (options.parseError !== '')
-        return 'invalid';
-    if (options.rawValue.trim() === '')
-        return 'empty';
-    if (options.formattedValue !== undefined && options.formattedValue !== options.rawValue) {
-        return 'formatted';
-    }
-    return options.displayValue === options.rawValue ? 'raw' : 'formatted';
-}
-function numberInputStepperState(options) {
-    if (options.disabled)
-        return 'disabled';
-    if (options.readonly)
-        return 'readonly';
-    if (options.numericValue === undefined)
-        return 'unavailable';
-    if (options.canDecrement && options.canIncrement)
-        return 'available';
-    if (!options.canDecrement && options.canIncrement)
-        return 'decrement-disabled';
-    if (options.canDecrement && !options.canIncrement)
-        return 'increment-disabled';
-    return 'unavailable';
-}
-function switchAsyncConfirmationState(options) {
-    if (options.disabled)
-        return 'disabled';
-    if (options.readonly)
-        return 'readonly';
-    if (options.loading)
-        return 'loading';
-    if (options.error !== '')
-        return 'error';
-    if (options.rollback)
-        return 'rollback';
-    if (options.confirmRequired)
-        return 'confirm-required';
-    if (options.pending)
-        return 'pending';
-    return options.checked ? 'checked' : 'unchecked';
-}
-function selectUniqueKnownIds(value, knownIds) {
-    const result = [];
-    for (const id of value) {
-        if (!knownIds.has(id) || result.includes(id))
-            continue;
-        result.push(id);
-    }
-    return result;
-}
-function selectItemMatchesQuery(item, query) {
-    if (query === '')
-        return true;
-    const keywordPool = [item.label, ...(item.keywords ?? [])].join(' ').trim().toLowerCase();
-    return keywordPool.includes(query.toLowerCase());
-}
-function selectSearchMultiselectOptionContract(item, options) {
-    const visible = options.matched;
-    return {
-        id: item.id,
-        option: item,
-        selected: options.selected,
-        visible,
-        matched: options.matched,
-        attrs: {
-            'data-option-id': item.id,
-            'data-label': item.label,
-            'data-visible': visible ? 'true' : undefined,
-            'data-matched': options.matched ? 'true' : undefined,
-            'data-selected': options.selected ? 'true' : undefined,
-            'aria-selected': options.selected ? 'true' : 'false',
-            'aria-hidden': visible ? undefined : 'true',
-            disabled: item.disabled === true ? true : undefined,
-        },
-    };
-}
-function setFlag(attrs, name, value) {
-    if (value === true)
-        attrs[name] = '';
-}
-function setDefined(attrs, name, value) {
-    if (value !== undefined)
-        attrs[name] = value;
-}
-function removeUndefined(attrs) {
-    const result = {};
-    for (const [name, value] of Object.entries(attrs)) {
-        if (value !== undefined)
-            result[name] = value;
-    }
-    return result;
-}
-function styleSuffix(value) {
-    if (typeof value !== 'string' || value.trim() === '')
-        return '';
-    return value.trim().endsWith(';') ? value.trim() : `${value.trim()};`;
-}
-export function createInputNumberPlans(options) {
-    const value = options.value;
-    const canDecrement = options.min === undefined || value === undefined || value > options.min;
-    const canIncrement = options.max === undefined || value === undefined || value < options.max;
-    const stepState = options.disabled === true
-        ? 'disabled'
-        : options.readonly === true
-            ? 'readonly'
-            : canDecrement && canIncrement
-                ? 'available'
-                : !canDecrement && canIncrement
-                    ? 'decrement-disabled'
-                    : 'increment-disabled';
-    return {
-        root: createUiDomPlan('div', 'number-input', {
-            ...(options.invalid === undefined ? {} : { invalid: options.invalid }),
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: { id: `${options.id}-number-input`, ...options.attrs },
-        }),
-        input: createUiDomPlan('input', 'number-input-field', {
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            ...(options.readonly === undefined ? {} : { readonly: options.readonly }),
-            ...(options.invalid === undefined ? {} : { invalid: options.invalid }),
-            attrs: {
-                id: `${options.id}-input`,
-                type: 'text',
-                inputmode: 'numeric',
-                ...(options.value === undefined ? {} : { value: String(options.value) }),
-                ...(options.min === undefined ? {} : { 'data-min': String(options.min) }),
-                ...(options.max === undefined ? {} : { 'data-max': String(options.max) }),
-                ...(options.step === undefined ? {} : { 'data-step': String(options.step) }),
-                ...(options.placeholder === undefined ? {} : { placeholder: options.placeholder }),
-            },
-        }),
-        decrement: createUiDomPlan('button', 'number-input-step', {
-            state: stepState === 'decrement-disabled' || stepState === 'disabled' ? 'disabled' : 'idle',
-            ...(canDecrement && options.disabled !== true ? {} : { disabled: true }),
-            attrs: {
-                id: `${options.id}-decrement`,
-                type: 'button',
-                'data-direction': 'decrement',
-                'aria-label': 'Decrease',
-            },
-        }),
-        increment: createUiDomPlan('button', 'number-input-step', {
-            state: stepState === 'increment-disabled' || stepState === 'disabled' ? 'disabled' : 'idle',
-            ...(canIncrement && options.disabled !== true ? {} : { disabled: true }),
-            attrs: {
-                id: `${options.id}-increment`,
-                type: 'button',
-                'data-direction': 'increment',
-                'aria-label': 'Increase',
-            },
-        }),
-    };
-}