@vizejs/ui 0.426.3 → 0.427.0

package/dist/number-field-CYRl8cwn.mjs

@@ -0,0 +1,942 @@
+import { a as useDeterministicId } from "./deterministic-id-bMmJU5xD.mjs";
+import { createContext } from "./context.mjs";
+import { x as useLocale } from "./locale-runtime-SahmDKpf.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { computed, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, normalizeProps, onScopeDispose, openBlock, ref, renderSlot, shallowRef, unref, useTemplateRef, watch } from "vue";
+//#region src/families/form/number-field/number-field-context.ts
+/** Typed context shared by NumberField, NumberFieldInput, and the triggers. */
+const numberFieldContext = createContext("NumberField");
+//#endregion
+//#region src/families/form/number-field/number-field-parser.ts
+const asciiDigits = "0123456789";
+const bidiMarks = /[؜‎‏‪-‮⁦-⁩]/g;
+const spaces = /[\s  ]/g;
+const minusSigns = [
+	"-",
+	"−",
+	"‒",
+	"–",
+	"—",
+	"﹣",
+	"－"
+];
+const plusSigns = [
+	"+",
+	"﹢",
+	"＋"
+];
+const partialPattern = /^[+-]?\d*(?:\.\d*)?$/;
+const completePattern = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)$/;
+const parserCache = /* @__PURE__ */ new Map();
+const maximumCachedParsers = 64;
+function escapeRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function stripInvisible(value) {
+	return value.replace(bidiMarks, "");
+}
+function cacheKey(locale, options) {
+	if (options === void 0) return locale;
+	const entries = Object.entries(options).filter(([, value]) => value !== void 0).sort(([left], [right]) => left < right ? -1 : left > right ? 1 : 0);
+	return `${locale}|${JSON.stringify(entries)}`;
+}
+function partsOf(formatter, value) {
+	return formatter.formatToParts(value);
+}
+function firstPart(parts, type) {
+	return parts.find((part) => part.type === type)?.value;
+}
+function collectSymbols(locale, options, resolved) {
+	const numberingSystem = resolved.numberingSystem;
+	const separatorParts = partsOf(new Intl.NumberFormat(locale, {
+		numberingSystem,
+		useGrouping: true,
+		minimumFractionDigits: 1,
+		maximumFractionDigits: 1
+	}), -11111.1);
+	const decimal = stripInvisible(firstPart(separatorParts, "decimal") ?? ".");
+	const rawGroup = firstPart(separatorParts, "group");
+	const group = rawGroup === void 0 ? void 0 : stripInvisible(rawGroup);
+	const localizedMinus = stripInvisible(firstPart(separatorParts, "minusSign") ?? "-");
+	const localizedPlus = stripInvisible(firstPart(partsOf(new Intl.NumberFormat(locale, {
+		numberingSystem,
+		signDisplay: "always"
+	}), 1), "plusSign") ?? "+");
+	const digitFormatter = new Intl.NumberFormat(locale, {
+		numberingSystem,
+		useGrouping: false
+	});
+	const numerals = /* @__PURE__ */ new Map();
+	for (const digit of asciiDigits) numerals.set(digitFormatter.format(Number(digit)), digit);
+	const display = new Intl.NumberFormat(locale, options);
+	const affixes = /* @__PURE__ */ new Set();
+	for (const sample of [
+		-1,
+		1,
+		0,
+		-1234.5,
+		1234.5
+	]) for (const part of partsOf(display, sample)) if (part.type === "currency" || part.type === "unit" || part.type === "percentSign" || part.type === "literal" || part.type === "compact") {
+		const affix = stripInvisible(part.value).replace(spaces, "");
+		if (affix.length > 0 && affix !== "(" && affix !== ")") affixes.add(affix);
+	}
+	return {
+		decimal,
+		group,
+		minus: [...new Set([localizedMinus, ...minusSigns])],
+		plus: [...new Set([localizedPlus, ...plusSigns])],
+		affixes: [...affixes].sort((left, right) => right.length - left.length),
+		numerals,
+		percent: resolved.style === "percent",
+		accounting: options.currencySign === "accounting"
+	};
+}
+function roundTo(value, fractionDigits) {
+	const digits = Math.min(Math.max(Math.trunc(fractionDigits), 0), 20);
+	return Number(value.toFixed(digits));
+}
+/**
+* Create (or reuse) a locale-aware NumberField formatter and parser.
+*
+* Parsers are cached per locale and option set, so repeated calls during
+* render are cheap and deterministic across server and client.
+*/
+function createNumberFieldParser(locale, options = {}) {
+	const key = cacheKey(locale, options);
+	const cached = parserCache.get(key);
+	if (cached !== void 0) return cached;
+	const formatter = new Intl.NumberFormat(locale, options);
+	const resolvedOptions = formatter.resolvedOptions();
+	const symbols = collectSymbols(resolvedOptions.locale, options, resolvedOptions);
+	const allowsFraction = resolvedOptions.maximumFractionDigits !== 0 || symbols.percent;
+	const affixPattern = symbols.affixes.length === 0 ? void 0 : new RegExp(symbols.affixes.map(escapeRegExp).join("|"), "g");
+	const groupPattern = symbols.group === void 0 || symbols.group.replace(spaces, "").length === 0 ? void 0 : new RegExp(escapeRegExp(symbols.group), "g");
+	/** Normalize localized text into an ASCII `[+-]digits[.digits]` candidate. */
+	function normalize(text) {
+		let working = stripInvisible(text).replace(spaces, "");
+		let negative = false;
+		if (symbols.accounting && working.startsWith("(") && working.endsWith(")")) {
+			negative = true;
+			working = working.slice(1, -1);
+		}
+		if (affixPattern !== void 0) working = working.replace(affixPattern, "");
+		if (groupPattern !== void 0) working = working.replace(groupPattern, "");
+		let candidate = "";
+		for (const character of working) {
+			const numeral = symbols.numerals.get(character);
+			if (numeral !== void 0) candidate += numeral;
+			else if (asciiDigits.includes(character)) candidate += character;
+			else if (character === symbols.decimal) candidate += ".";
+			else if (symbols.minus.includes(character)) candidate += "-";
+			else if (symbols.plus.includes(character)) candidate += "+";
+			else candidate += character;
+		}
+		return {
+			candidate,
+			negative
+		};
+	}
+	const parser = Object.freeze({
+		locale: resolvedOptions.locale,
+		resolvedOptions,
+		format: (value) => Number.isFinite(value) ? formatter.format(value) : "",
+		parse(text) {
+			const { candidate, negative } = normalize(text);
+			if (candidate.length === 0) return null;
+			if (!completePattern.test(candidate)) return NaN;
+			if (!allowsFraction && candidate.includes(".")) return NaN;
+			let value = Number(candidate);
+			if (!Number.isFinite(value)) return NaN;
+			if (negative) value = -Math.abs(value);
+			if (symbols.percent) {
+				const fraction = candidate.split(".")[1]?.length ?? 0;
+				value = roundTo(value / 100, fraction + 2);
+			}
+			return Object.is(value, -0) ? 0 : value;
+		},
+		isPartial(text, partialOptions = {}) {
+			const { candidate, negative } = normalize(text);
+			if (!partialPattern.test(candidate)) return false;
+			if (!allowsFraction && candidate.includes(".")) return false;
+			if (partialOptions.allowNegative === false && (negative || candidate.startsWith("-"))) return false;
+			return true;
+		}
+	});
+	if (parserCache.size >= maximumCachedParsers) {
+		const oldest = parserCache.keys().next();
+		if (oldest.done !== true) parserCache.delete(oldest.value);
+	}
+	parserCache.set(key, parser);
+	return parser;
+}
+//#endregion
+//#region src/families/form/number-field/number-field-state.ts
+/** Default NumberField step for decimal, currency, and unit styles. */
+const NUMBER_FIELD_DEFAULT_STEP = 1;
+/** Default NumberField step when `formatOptions.style` is `"percent"` (one percent). */
+const NUMBER_FIELD_DEFAULT_PERCENT_STEP = .01;
+/** Multiplier applied to `step` when `largeStep` is not supplied. */
+const NUMBER_FIELD_LARGE_STEP_MULTIPLIER = 10;
+function isPositive(value) {
+	return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+function decimalPlaces(value) {
+	if (!Number.isFinite(value)) return 0;
+	const text = String(value);
+	const exponentIndex = text.indexOf("e-");
+	if (exponentIndex !== -1) {
+		const mantissa = text.slice(0, exponentIndex);
+		const mantissaDecimals = mantissa.includes(".") ? mantissa.length - mantissa.indexOf(".") - 1 : 0;
+		return Number(text.slice(exponentIndex + 2)) + mantissaDecimals;
+	}
+	const decimalIndex = text.indexOf(".");
+	return decimalIndex === -1 ? 0 : text.length - decimalIndex - 1;
+}
+function roundToPrecision(value, precision) {
+	const rounded = Number(value.toFixed(Math.min(Math.max(precision, 0), 20)));
+	return Object.is(rounded, -0) ? 0 : rounded;
+}
+/** Normalize raw NumberField bounds so stepping never produces `NaN`. */
+function normalizeNumberFieldBounds(options = {}) {
+	const min = typeof options.min === "number" && Number.isFinite(options.min) ? options.min : Number.NEGATIVE_INFINITY;
+	const rawMax = typeof options.max === "number" && Number.isFinite(options.max) ? options.max : Number.POSITIVE_INFINITY;
+	const max = rawMax >= min ? rawMax : Number.POSITIVE_INFINITY;
+	const fallbackStep = isPositive(options.defaultStep) ? options.defaultStep : 1;
+	const step = isPositive(options.step) ? options.step : fallbackStep;
+	const largeStep = isPositive(options.largeStep) ? options.largeStep : roundToPrecision(step * 10, decimalPlaces(step));
+	return Object.freeze({
+		min,
+		max,
+		step,
+		largeStep
+	});
+}
+/** Clamp a value into normalized bounds. */
+function clampNumberFieldValue(value, bounds) {
+	return Math.min(Math.max(value, bounds.min), bounds.max);
+}
+function stepBase(bounds) {
+	return Number.isFinite(bounds.min) ? bounds.min : 0;
+}
+/** Snap a value to the nearest step from `min` (or zero when unbounded), then clamp. */
+function snapNumberFieldValue(value, bounds) {
+	const base = stepBase(bounds);
+	const precision = Math.max(decimalPlaces(base), decimalPlaces(bounds.step));
+	return clampNumberFieldValue(roundToPrecision(base + Math.round((value - base) / bounds.step) * bounds.step, precision), bounds);
+}
+/**
+* Move a value along the step grid.
+*
+* The value first moves to the adjacent grid value in the requested direction
+* (so off-grid values land back on the grid, matching native `stepUp()` /
+* `stepDown()`), then continues by the rest of `amount`, snaps, and clamps.
+* `amount` defaults to one `step`; Page Up/Down pass `largeStep`. `null`
+* starts from `min` when incrementing, `max` when decrementing, else zero.
+*/
+function stepNumberFieldValue(value, direction, bounds, amount = bounds.step) {
+	if (value === null) {
+		if (direction > 0 && Number.isFinite(bounds.min)) return bounds.min;
+		if (direction < 0 && Number.isFinite(bounds.max)) return bounds.max;
+		return clampNumberFieldValue(0, bounds);
+	}
+	const base = stepBase(bounds);
+	const precision = Math.max(decimalPlaces(base), decimalPlaces(bounds.step), decimalPlaces(value), isPositive(amount) ? decimalPlaces(amount) : 0);
+	const offset = roundToPrecision((value - base) / bounds.step, 10);
+	const adjacent = base + (direction > 0 ? Math.floor(offset) + 1 : Math.ceil(offset) - 1) * bounds.step;
+	const remainder = isPositive(amount) && amount > bounds.step ? amount - bounds.step : 0;
+	const next = roundToPrecision(adjacent + direction * remainder, precision);
+	return clampNumberFieldValue(remainder === 0 ? next : roundToPrecision(base + Math.round((next - base) / bounds.step) * bounds.step, precision), bounds);
+}
+/** Whether stepping in a direction can still change the value. */
+function canStepNumberFieldValue(value, direction, bounds) {
+	if (value === null) return true;
+	return direction > 0 ? value < bounds.max : value > bounds.min;
+}
+/** Stable state token published through `data-state`. */
+function getNumberFieldState(options) {
+	if (options.disabled) return "disabled";
+	if (options.readOnly) return "readonly";
+	if (options.invalid) return "invalid";
+	if (options.value === null) return "empty";
+	if (options.value <= options.bounds.min) return "min";
+	if (options.value >= options.bounds.max) return "max";
+	return "in-range";
+}
+//#endregion
+//#region src/families/form/number-field/number-field.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = [
+	"data-state",
+	"data-disabled",
+	"data-readonly",
+	"data-required",
+	"data-invalid",
+	"data-empty"
+];
+const _hoisted_2 = [
+	"name",
+	"form",
+	"value",
+	"disabled"
+];
+//#endregion
+//#region src/families/form/number-field/number-field.vue
+var number_field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "number-field",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		name: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		form: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		modelValue: {
+			type: [Number, null],
+			required: false,
+			default: () => void 0
+		},
+		defaultValue: {
+			type: [Number, null],
+			required: false,
+			default: null
+		},
+		min: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		max: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		step: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		largeStep: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		locale: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		formatOptions: {
+			type: null,
+			required: false,
+			default: () => void 0
+		},
+		clampOnCommit: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		snapOnCommit: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		allowWheel: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		holdDelay: {
+			type: Number,
+			required: false,
+			default: 400
+		},
+		holdInterval: {
+			type: Number,
+			required: false,
+			default: 60
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaErrormessage: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaInvalid: {
+			type: [Boolean, String],
+			required: false,
+			default: false
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const root = useTemplateRef("root");
+		const inputElement = shallowRef(null);
+		const inputId = useDeterministicId({
+			id: () => __props.id,
+			hint: "number-field"
+		});
+		const contextLocale = useLocale();
+		const resolvedLocale = computed(() => __props.locale ?? contextLocale.value);
+		const parser = computed(() => createNumberFieldParser(resolvedLocale.value, __props.formatOptions));
+		const bounds = computed(() => normalizeNumberFieldBounds({
+			min: __props.min,
+			max: __props.max,
+			step: __props.step,
+			largeStep: __props.largeStep,
+			defaultStep: __props.formatOptions?.style === "percent" ? NUMBER_FIELD_DEFAULT_PERCENT_STEP : 1
+		}));
+		function finiteOrNull(value) {
+			return typeof value === "number" && Number.isFinite(value) ? value : null;
+		}
+		const state = useControllableState({
+			value: () => __props.modelValue === void 0 ? void 0 : finiteOrNull(__props.modelValue),
+			defaultValue: () => finiteOrNull(__props.defaultValue),
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const value = state.value;
+		const formattedValue = computed(() => value.value === null ? "" : parser.value.format(value.value));
+		const draft = ref(null);
+		const inputText = computed(() => draft.value ?? formattedValue.value);
+		const ariaInvalidValue = computed(() => {
+			if (__props.ariaInvalid === false) return void 0;
+			return __props.ariaInvalid === true ? "true" : __props.ariaInvalid;
+		});
+		const invalid = computed(() => ariaInvalidValue.value !== void 0);
+		const disabledState = computed(() => __props.disabled);
+		const readOnlyState = computed(() => __props.readOnly);
+		const requiredState = computed(() => __props.required);
+		const dataState = computed(() => getNumberFieldState({
+			value: value.value,
+			bounds: bounds.value,
+			disabled: __props.disabled,
+			readOnly: __props.readOnly,
+			invalid: invalid.value
+		}));
+		function isEditable() {
+			return !__props.disabled && !__props.readOnly;
+		}
+		function normalizeCommitted(next) {
+			if (next === null) return null;
+			let normalized = next;
+			if (__props.clampOnCommit) normalized = clampNumberFieldValue(normalized, bounds.value);
+			if (__props.snapOnCommit) normalized = snapNumberFieldValue(normalized, bounds.value);
+			return normalized;
+		}
+		function apply(next, source) {
+			const previous = value.value;
+			const changed = state.set(next);
+			draft.value = null;
+			if (changed) emit("change", next, previous, source);
+			return changed;
+		}
+		function commit(source) {
+			const parsed = parser.value.parse(inputText.value);
+			if (parsed !== null && Number.isNaN(parsed)) {
+				draft.value = null;
+				return false;
+			}
+			return apply(normalizeCommitted(parsed), source);
+		}
+		function directionSign(direction) {
+			return direction === "increment" ? 1 : -1;
+		}
+		function canStep(direction) {
+			return isEditable() && canStepNumberFieldValue(value.value, directionSign(direction), bounds.value);
+		}
+		function currentForStepping() {
+			const parsed = parser.value.parse(inputText.value);
+			if (parsed === null) return null;
+			return Number.isNaN(parsed) ? value.value : parsed;
+		}
+		function stepBy(direction, amount, source) {
+			if (!isEditable()) return false;
+			return apply(stepNumberFieldValue(currentForStepping(), directionSign(direction), bounds.value, amount), source);
+		}
+		function stepContext(direction, size, source) {
+			return stepBy(direction, bounds.value[size], source);
+		}
+		function stepToBound(bound, source) {
+			if (!isEditable()) return false;
+			const target = bounds.value[bound];
+			if (!Number.isFinite(target)) return false;
+			return apply(target, source);
+		}
+		watch(inputElement, (input, _previous, onCleanup) => {
+			const owner = input?.form;
+			if (owner === void 0 || owner === null) return;
+			const onReset = () => {
+				if (!state.controlled.value) state.reset();
+				draft.value = null;
+			};
+			owner.addEventListener("reset", onReset);
+			onCleanup(() => owner.removeEventListener("reset", onReset));
+		}, { flush: "post" });
+		const slotState = computed(() => ({
+			value: value.value,
+			formattedValue: formattedValue.value,
+			inputText: inputText.value,
+			min: bounds.value.min,
+			max: bounds.value.max,
+			step: bounds.value.step,
+			largeStep: bounds.value.largeStep,
+			locale: parser.value.locale,
+			canIncrement: canStep("increment"),
+			canDecrement: canStep("decrement"),
+			disabled: __props.disabled,
+			readOnly: __props.readOnly,
+			required: __props.required,
+			invalid: invalid.value,
+			state: dataState.value
+		}));
+		numberFieldContext.provide({
+			inputId,
+			form: computed(() => __props.form),
+			value,
+			inputText,
+			setDraft: (text) => {
+				draft.value = text;
+			},
+			bounds,
+			parser,
+			state: dataState,
+			disabled: disabledState,
+			readOnly: readOnlyState,
+			required: requiredState,
+			invalid,
+			allowWheel: computed(() => __props.allowWheel),
+			holdDelay: computed(() => Number.isFinite(__props.holdDelay) && __props.holdDelay >= 0 ? __props.holdDelay : 400),
+			holdInterval: computed(() => Number.isFinite(__props.holdInterval) && __props.holdInterval > 0 ? __props.holdInterval : 60),
+			ariaInvalid: ariaInvalidValue,
+			ariaLabel: computed(() => __props.ariaLabel),
+			ariaLabelledby: computed(() => __props.ariaLabelledby),
+			ariaDescribedby: computed(() => __props.ariaDescribedby),
+			ariaErrormessage: computed(() => __props.ariaErrormessage),
+			inputElement,
+			canStep,
+			step: stepContext,
+			stepToBound,
+			commit
+		});
+		function focus(options) {
+			inputElement.value?.focus(options);
+		}
+		function stepCount(count) {
+			return typeof count === "number" && Number.isFinite(count) && count > 0 ? count : 1;
+		}
+		function field(key) {
+			return computed(() => slotState.value[key]);
+		}
+		__expose({
+			value: field("value"),
+			formattedValue: field("formattedValue"),
+			inputText: field("inputText"),
+			min: field("min"),
+			max: field("max"),
+			step: field("step"),
+			largeStep: field("largeStep"),
+			locale: field("locale"),
+			canIncrement: field("canIncrement"),
+			canDecrement: field("canDecrement"),
+			disabled: field("disabled"),
+			readOnly: field("readOnly"),
+			required: field("required"),
+			invalid: field("invalid"),
+			state: field("state"),
+			root,
+			input: inputElement,
+			focus,
+			setValue: (next) => apply(normalizeCommitted(finiteOrNull(next)), "api"),
+			increment: (count) => stepBy("increment", bounds.value.step * stepCount(count), "api"),
+			decrement: (count) => stepBy("decrement", bounds.value.step * stepCount(count), "api"),
+			commit: () => commit("api"),
+			reset: () => {
+				const changed = state.reset();
+				draft.value = null;
+				return changed;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				part: "root",
+				"data-vize-ui": "number-field",
+				"data-state": dataState.value,
+				"data-disabled": __props.disabled ? "true" : void 0,
+				"data-readonly": __props.readOnly ? "true" : void 0,
+				"data-required": __props.required ? "true" : void 0,
+				"data-invalid": invalid.value ? "true" : void 0,
+				"data-empty": unref(value) === null ? "true" : void 0
+			}, [__props.name !== void 0 ? (openBlock(), createElementBlock("input", {
+				key: 0,
+				type: "hidden",
+				name: __props.name,
+				form: __props.form,
+				value: unref(value) === null ? "" : String(unref(value)),
+				disabled: __props.disabled,
+				"data-vize-ui": "number-field-value"
+			}, null, 8, _hoisted_2)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$3);
+		};
+	}
+}), [["__scopeId", "data-v-93ce8325"]]);
+//#endregion
+//#region src/families/form/number-field/number-field-input.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = [
+	"id",
+	"value",
+	"form",
+	"inputmode",
+	"placeholder",
+	"autocomplete",
+	"disabled",
+	"readonly",
+	"required",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuetext",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-errormessage",
+	"aria-invalid",
+	"aria-readonly",
+	"aria-required",
+	"data-state"
+];
+//#endregion
+//#region src/families/form/number-field/number-field-input.vue
+var number_field_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "number-field-input",
+	props: {
+		placeholder: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		autocomplete: {
+			type: String,
+			required: false,
+			default: "off"
+		}
+	},
+	emits: ["reject"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const context = numberFieldContext.use();
+		const element = useTemplateRef("element");
+		const composing = ref(false);
+		const focused = ref(false);
+		const allowsNegative = computed(() => context.bounds.value.min < 0);
+		const allowsFraction = computed(() => context.parser.value.resolvedOptions.maximumFractionDigits !== 0 || context.parser.value.resolvedOptions.style === "percent");
+		const inputMode = computed(() => {
+			if (allowsNegative.value) return "text";
+			return allowsFraction.value ? "decimal" : "numeric";
+		});
+		const ariaValueNow = computed(() => context.value.value ?? void 0);
+		const ariaValueMin = computed(() => Number.isFinite(context.bounds.value.min) ? context.bounds.value.min : void 0);
+		const ariaValueMax = computed(() => Number.isFinite(context.bounds.value.max) ? context.bounds.value.max : void 0);
+		const ariaValueText = computed(() => {
+			const formatted = context.value.value === null ? "" : context.parser.value.format(context.value.value);
+			return formatted.length === 0 ? void 0 : formatted;
+		});
+		watch(element, (input) => {
+			context.inputElement.value = input;
+		}, {
+			flush: "sync",
+			immediate: true
+		});
+		onScopeDispose(() => {
+			context.inputElement.value = null;
+		});
+		function syncNativeText() {
+			if (element.value !== null && element.value.value !== context.inputText.value) element.value.value = context.inputText.value;
+		}
+		function onInput(event) {
+			if (!(event.currentTarget instanceof HTMLInputElement)) return;
+			const text = event.currentTarget.value;
+			if (composing.value) return;
+			if (context.readOnly.value) {
+				syncNativeText();
+				return;
+			}
+			if (context.parser.value.isPartial(text, { allowNegative: allowsNegative.value })) {
+				context.setDraft(text);
+				return;
+			}
+			event.currentTarget.value = context.inputText.value;
+			emit("reject", text, event);
+		}
+		function onCompositionStart() {
+			composing.value = true;
+		}
+		function onCompositionEnd(event) {
+			composing.value = false;
+			onInput(event);
+		}
+		function keyboardAction(key) {
+			const bounds = context.bounds.value;
+			if (key === "ArrowUp") return () => context.step("increment", "step", "keyboard");
+			if (key === "ArrowDown") return () => context.step("decrement", "step", "keyboard");
+			if (key === "PageUp") return () => context.step("increment", "largeStep", "keyboard");
+			if (key === "PageDown") return () => context.step("decrement", "largeStep", "keyboard");
+			if (key === "Home" && Number.isFinite(bounds.min)) return () => context.stepToBound("min", "keyboard");
+			if (key === "End" && Number.isFinite(bounds.max)) return () => context.stepToBound("max", "keyboard");
+		}
+		function onKeydown(event) {
+			if (event.isComposing || event.altKey || event.metaKey || event.ctrlKey) return;
+			if (event.key === "Enter") {
+				if (!context.disabled.value && !context.readOnly.value) context.commit("enter");
+				return;
+			}
+			const action = keyboardAction(event.key);
+			if (action === void 0) return;
+			event.preventDefault();
+			action();
+		}
+		function onFocus() {
+			focused.value = true;
+		}
+		function onBlur() {
+			focused.value = false;
+			if (!context.disabled.value && !context.readOnly.value) context.commit("blur");
+		}
+		function onWheel(event) {
+			if (!focused.value || !context.allowWheel.value || event.deltaY === 0) return;
+			if (context.disabled.value || context.readOnly.value) return;
+			event.preventDefault();
+			context.step(event.deltaY < 0 ? "increment" : "decrement", "step", "wheel");
+		}
+		watch([element, () => context.allowWheel.value], ([input, allowWheel], _previous, onCleanup) => {
+			if (input === null || !allowWheel) return;
+			input.addEventListener("wheel", onWheel, { passive: false });
+			onCleanup(() => input.removeEventListener("wheel", onWheel));
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("input", {
+				id: unref(context).inputId.value,
+				ref_key: "element",
+				ref: element,
+				type: "text",
+				role: "spinbutton",
+				value: unref(context).inputText.value,
+				form: unref(context).form.value,
+				inputmode: inputMode.value,
+				placeholder: __props.placeholder,
+				autocomplete: __props.autocomplete,
+				autocorrect: "off",
+				spellcheck: "false",
+				disabled: unref(context).disabled.value,
+				readonly: unref(context).readOnly.value,
+				required: unref(context).required.value,
+				"aria-valuenow": ariaValueNow.value,
+				"aria-valuemin": ariaValueMin.value,
+				"aria-valuemax": ariaValueMax.value,
+				"aria-valuetext": ariaValueText.value,
+				"aria-label": unref(context).ariaLabel.value,
+				"aria-labelledby": unref(context).ariaLabelledby.value,
+				"aria-describedby": unref(context).ariaDescribedby.value,
+				"aria-errormessage": unref(context).ariaInvalid.value === void 0 ? void 0 : unref(context).ariaErrormessage.value,
+				"aria-invalid": unref(context).ariaInvalid.value,
+				"aria-readonly": unref(context).readOnly.value ? "true" : void 0,
+				"aria-required": unref(context).required.value ? "true" : void 0,
+				part: "input",
+				"data-vize-ui": "number-field-input",
+				"data-state": unref(context).state.value,
+				onInput,
+				onCompositionstart: onCompositionStart,
+				onCompositionend: onCompositionEnd,
+				onKeydown,
+				onFocus,
+				onBlur
+			}, null, 40, _hoisted_1$2);
+		};
+	}
+}), [["__scopeId", "data-v-b036ac89"]]);
+//#endregion
+//#region src/families/form/number-field/number-field-trigger.ts
+/**
+* Step once on press, then repeat after `holdDelay` every `holdInterval`
+* milliseconds until the pointer is released, leaves, is canceled, or a bound
+* is reached. Clicks from assistive technology (no pointer press) step once.
+*/
+function useNumberFieldTrigger(direction) {
+	const context = numberFieldContext.use();
+	const holding = ref(false);
+	const disabled = computed(() => !context.canStep(direction));
+	let timer;
+	let pressedByPointer = false;
+	function stop() {
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+		holding.value = false;
+	}
+	function schedule(delay) {
+		timer = setTimeout(() => {
+			timer = void 0;
+			if (!context.canStep(direction)) {
+				stop();
+				return;
+			}
+			holding.value = true;
+			context.step(direction, "step", "trigger");
+			schedule(context.holdInterval.value);
+		}, delay);
+	}
+	function onPointerdown(event) {
+		if (event.button !== 0 || disabled.value) return;
+		event.preventDefault();
+		context.inputElement.value?.focus({ preventScroll: true });
+		pressedByPointer = true;
+		stop();
+		context.step(direction, "step", "trigger");
+		schedule(context.holdDelay.value);
+	}
+	function onClick(event) {
+		if (pressedByPointer) {
+			pressedByPointer = false;
+			return;
+		}
+		if (disabled.value) return;
+		event.preventDefault();
+		context.step(direction, "step", "trigger");
+	}
+	onScopeDispose(stop);
+	return {
+		context,
+		disabled,
+		holding,
+		slotState: computed(() => ({
+			direction,
+			disabled: disabled.value,
+			holding: holding.value
+		})),
+		onPointerdown,
+		onPointerEnd: stop,
+		onClick
+	};
+}
+//#endregion
+//#region src/families/form/number-field/number-field-increment.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = [
+	"aria-label",
+	"aria-controls",
+	"disabled",
+	"data-disabled",
+	"data-holding"
+];
+//#endregion
+//#region src/families/form/number-field/number-field-increment.vue
+var number_field_increment_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "number-field-increment",
+	props: { ariaLabel: {
+		type: String,
+		required: false,
+		default: "Increase"
+	} },
+	setup(__props) {
+		const trigger = useNumberFieldTrigger("increment");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				type: "button",
+				tabindex: "-1",
+				"aria-label": __props.ariaLabel,
+				"aria-controls": unref(trigger).context.inputId.value,
+				disabled: unref(trigger).disabled.value,
+				part: "increment",
+				"data-vize-ui": "number-field-increment",
+				"data-disabled": unref(trigger).disabled.value ? "true" : void 0,
+				"data-holding": unref(trigger).holding.value ? "true" : void 0,
+				onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(trigger).onPointerdown && unref(trigger).onPointerdown(...args)),
+				onPointerup: _cache[1] || (_cache[1] = (...args) => unref(trigger).onPointerEnd && unref(trigger).onPointerEnd(...args)),
+				onPointercancel: _cache[2] || (_cache[2] = (...args) => unref(trigger).onPointerEnd && unref(trigger).onPointerEnd(...args)),
+				onPointerleave: _cache[3] || (_cache[3] = (...args) => unref(trigger).onPointerEnd && unref(trigger).onPointerEnd(...args)),
+				onClick: _cache[4] || (_cache[4] = (...args) => unref(trigger).onClick && unref(trigger).onClick(...args))
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(trigger).slotState.value)), void 0, true)], 40, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-86b316de"]]);
+//#endregion
+//#region src/families/form/number-field/number-field-decrement.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"aria-label",
+	"aria-controls",
+	"disabled",
+	"data-disabled",
+	"data-holding"
+];
+//#endregion
+//#region src/families/form/number-field/number-field-decrement.vue
+var number_field_decrement_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "number-field-decrement",
+	props: { ariaLabel: {
+		type: String,
+		required: false,
+		default: "Decrease"
+	} },
+	setup(__props) {
+		const trigger = useNumberFieldTrigger("decrement");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				type: "button",
+				tabindex: "-1",
+				"aria-label": __props.ariaLabel,
+				"aria-controls": unref(trigger).context.inputId.value,
+				disabled: unref(trigger).disabled.value,
+				part: "decrement",
+				"data-vize-ui": "number-field-decrement",
+				"data-disabled": unref(trigger).disabled.value ? "true" : void 0,
+				"data-holding": unref(trigger).holding.value ? "true" : void 0,
+				onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(trigger).onPointerdown && unref(trigger).onPointerdown(...args)),
+				onPointerup: _cache[1] || (_cache[1] = (...args) => unref(trigger).onPointerEnd && unref(trigger).onPointerEnd(...args)),
+				onPointercancel: _cache[2] || (_cache[2] = (...args) => unref(trigger).onPointerEnd && unref(trigger).onPointerEnd(...args)),
+				onPointerleave: _cache[3] || (_cache[3] = (...args) => unref(trigger).onPointerEnd && unref(trigger).onPointerEnd(...args)),
+				onClick: _cache[4] || (_cache[4] = (...args) => unref(trigger).onClick && unref(trigger).onClick(...args))
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(trigger).slotState.value)), void 0, true)], 40, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-992acb46"]]);
+//#endregion
+export { NUMBER_FIELD_DEFAULT_PERCENT_STEP as a, canStepNumberFieldValue as c, normalizeNumberFieldBounds as d, snapNumberFieldValue as f, number_field_default as i, clampNumberFieldValue as l, createNumberFieldParser as m, number_field_increment_default as n, NUMBER_FIELD_DEFAULT_STEP as o, stepNumberFieldValue as p, number_field_input_default as r, NUMBER_FIELD_LARGE_STEP_MULTIPLIER as s, number_field_decrement_default as t, getNumberFieldState as u };