@mantine-vue/core 3.3.0 → 3.5.0

package/esm/index.mjs

@@ -1,5 +1,5 @@
-import { Comment, Fragment, Teleport, Text as Text$1, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, isVNode, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, openBlock, provide, reactive, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, toRef, toValue, unref, useAttrs, useSlots, watch, watchEffect, withCtx } from "vue";
-import { DOTS, assignRef, clampUseMovePosition, mergeRefs, normalizeRadialValue, useClickOutside, useClipboard, useCollapse, useElementSize, useFloatingWindow, useFocusReturn, useFocusTrap, useHorizontalCollapse, useId, useLongPress, useMounted, useMove, usePagination, useRadialMove, useReducedMotion, useScrollSpy, useScroller, useUncontrolled, useWindowEvent } from "@mantine-vue/hooks";
+import { Comment, Fragment, Teleport, Text as Text$1, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, isVNode, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, openBlock, provide, reactive, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, toRef, toValue, unref, useAttrs, useId, useSlots, watch, watchEffect, withCtx } from "vue";
+import { DOTS, assignRef, clampUseMovePosition, mergeRefs, normalizeRadialValue, useClickOutside, useClipboard, useCollapse, useElementSize, useFloatingWindow, useFocusReturn, useFocusTrap, useHorizontalCollapse, useId as useId$1, useLongPress, useMounted, useMove, usePagination, useRadialMove, useReducedMotion, useScrollSpy, useScroller, useUncontrolled, useWindowEvent } from "@mantine-vue/hooks";
 import { arrow, autoUpdate, flip, hide, inline, limitShift, offset, shift, size, useFloating } from "@floating-ui/vue";
 //#region ../utils/esm/index.mjs
 function keys(object) {
@@ -1737,7 +1737,7 @@ function hashStyleProps(styles, media) {
 	return `mantine-vue-${Math.abs(hash).toString(36)}`;
 }
 function useRandomClassName() {
-	return `mantine-vue-${Math.random().toString(36).slice(2, 9)}`;
+	return `mantine-vue-${(getCurrentInstance() ? useId() : Math.random().toString(36).slice(2, 9)).replace(/[^A-Za-z0-9_-]/g, "-")}`;
 }
 //#endregion
 //#region src/core/Box/style-props/style-props-data.ts
@@ -6119,7 +6119,7 @@ var Alert = factory(/* @__PURE__ */ defineComponent({
 		const slots = useSlots();
 		const attrs = useAttrs();
 		const props = useProps("Alert", null, rawProps);
-		const rootId = useId(props.id);
+		const rootId = useId$1(props.id);
 		const getStyles = useStyles({
 			name: "Alert",
 			props,
@@ -8724,21 +8724,21 @@ var AccordionChevron = /* @__PURE__ */ defineComponent({
 //#region src/components/Accordion/Accordion.context.ts
 var [provideAccordionContext, useAccordionContext] = createSafeContext("Accordion component was not found in the tree");
 var Accordion_module_default = {
-	root: "_root_ltqd9_1",
-	panel: "_panel_ltqd9_5",
-	content: "_content_ltqd9_9",
-	itemTitle: "_itemTitle_ltqd9_14",
-	control: "_control_ltqd9_20",
-	"control--default": "_control--default_ltqd9_42",
-	"control--contained": "_control--contained_ltqd9_43",
-	label: "_label_ltqd9_57",
-	chevron: "_chevron_ltqd9_67",
-	icon: "_icon_ltqd9_86",
-	item: "_item_ltqd9_14",
-	"item--default": "_item--default_ltqd9_110",
-	"item--contained": "_item--contained_ltqd9_114",
-	"item--filled": "_item--filled_ltqd9_147",
-	"item--separated": "_item--separated_ltqd9_155"
+	root: "_root_1ysxv_1",
+	panel: "_panel_1ysxv_5",
+	content: "_content_1ysxv_9",
+	itemTitle: "_itemTitle_1ysxv_14",
+	control: "_control_1ysxv_20",
+	"control--default": "_control--default_1ysxv_42",
+	"control--contained": "_control--contained_1ysxv_43",
+	label: "_label_1ysxv_57",
+	chevron: "_chevron_1ysxv_67",
+	icon: "_icon_1ysxv_86",
+	item: "_item_1ysxv_14",
+	"item--default": "_item--default_1ysxv_110",
+	"item--contained": "_item--contained_1ysxv_114",
+	"item--filled": "_item--filled_1ysxv_149",
+	"item--separated": "_item--separated_1ysxv_157"
 };
 //#endregion
 //#region src/components/Accordion/Accordion.vue?vue&type=script&setup=true&lang.ts
@@ -8826,7 +8826,7 @@ var Accordion_default = /* @__PURE__ */ defineComponent({
 		const slots = useSlots();
 		const attrs = useAttrs();
 		const props = useProps("Accordion", defaultProps$46, rawProps);
-		const uid = useId(props.id);
+		const uid = useId$1(props.id);
 		const [currentValue, setCurrentValue] = useUncontrolled({
 			value: () => props.value,
 			defaultValue: props.defaultValue,
@@ -11703,7 +11703,7 @@ var Spoiler = factory(/* @__PURE__ */ defineComponent({
 			vars: props.vars,
 			varsResolver: varsResolver$48
 		});
-		const id = useId(props.id);
+		const id = useId$1(props.id);
 		const [show, setShowState] = useUncontrolled({
 			value: computed(() => props.expanded),
 			defaultValue: props.defaultExpanded,
@@ -12435,7 +12435,7 @@ var InputWrapper = Object.assign(/* @__PURE__ */ defineComponent({
 		const slots = useSlots();
 		const attrs = useAttrs();
 		const props = useProps("InputWrapper", { labelElement: "label" }, rawProps);
-		const idBase = useId(props.id);
+		const idBase = useId$1(props.id);
 		const getStyles = useStyles({
 			name: "InputWrapper",
 			props,
@@ -13851,13 +13851,21 @@ var leadingZerosPattern = /^-?0\d+(\.\d+)?\.?$/;
 var trailingZerosPattern = /\.\d*0$/;
 var trailingDecimalSeparatorPattern = /^-?\d+\.$/;
 function clamp$3(value, min, max) {
-	return Math.min(max ?? value, Math.max(min ?? value, value));
+	return Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? Number.NEGATIVE_INFINITY, value));
 }
 function clampBigInt(value, min, max) {
 	if (min !== void 0 && value < min) return min;
 	if (max !== void 0 && value > max) return max;
 	return value;
 }
+function canStep(value) {
+	if (typeof value === "number") return value < Number.MAX_SAFE_INTEGER;
+	return value === "" || value !== "-" && !Number.isNaN(Number(value)) && Number(value) < Number.MAX_SAFE_INTEGER;
+}
+function canStepBigInt(value, allowNegative) {
+	if (typeof value === "bigint") return true;
+	return value === "" || value !== "-" && (allowNegative || !value.startsWith("-")) && /^-?\d+$/.test(value);
+}
 function stripFormatting(value, options) {
 	let next = value;
 	if (options.prefix && next.startsWith(options.prefix)) next = next.slice(options.prefix.length);
@@ -13887,25 +13895,77 @@ function parseNumberInputValue(rawValue, allowDecimal, allowNegative, allowLeadi
 	return parsed;
 }
 function sanitizeNumberInputString(rawValue, allowDecimal, allowNegative, decimalScale) {
-	let normalized = rawValue;
-	if (!allowNegative) normalized = normalized.replace(/-/g, "");
-	if (!allowDecimal) return normalized.split(".")[0];
+	let normalized = "";
+	let hasDecimalSeparator = false;
+	for (const character of rawValue) {
+		if (character === "." && !allowDecimal) break;
+		if (/\d/.test(character)) normalized += character;
+		else if (character === "-" && allowNegative && normalized.length === 0) normalized = "-";
+		else if (character === "." && allowDecimal && !hasDecimalSeparator) {
+			normalized += character;
+			hasDecimalSeparator = true;
+		}
+	}
+	if (normalized.startsWith(".")) normalized = `0${normalized}`;
+	else if (normalized.startsWith("-.")) normalized = `-0${normalized.slice(1)}`;
 	if (typeof decimalScale === "number" && normalized.includes(".")) {
 		const [integerPart, decimalPart = ""] = normalized.split(".");
 		return `${integerPart}.${decimalPart.slice(0, decimalScale)}`;
 	}
 	return normalized;
 }
-function clampAndSanitizeInput(sanitizedValue, max, min) {
-	const stringValue = sanitizedValue.toString();
-	const hasTrailingDecimalSeparator = trailingDecimalSeparatorPattern.test(stringValue);
-	const replaced = stringValue.replace(/^0+(?=\d)/, "");
-	const parsedValue = parseFloat(replaced);
-	if (Number.isNaN(parsedValue)) return replaced;
-	if (parsedValue > Number.MAX_SAFE_INTEGER) return max !== void 0 ? max : replaced;
-	const clamped = clamp$3(parsedValue, min, max);
-	if (hasTrailingDecimalSeparator) return `${clamped.toString().replace(/^0+(?=\d)/, "")}.`;
-	return clamped;
+function withTrailingSeparator(value, hasTrailingDecimalSeparator) {
+	return hasTrailingDecimalSeparator ? `${value}.` : value;
+}
+function sanitizeInputOnBlur(value, options) {
+	const hasTrailingDecimalSeparator = trailingDecimalSeparatorPattern.test(value);
+	const trimmed = options.trim ? value.replace(/^0+(?=\d)/, "") : value;
+	const parsedValue = parseFloat(trimmed);
+	if (Number.isNaN(parsedValue)) return trimmed;
+	if (!options.clamp) return options.trim ? withTrailingSeparator(parsedValue, hasTrailingDecimalSeparator) : value;
+	const clamped = parsedValue > Number.MAX_SAFE_INTEGER && options.max !== void 0 ? options.max : clamp$3(parsedValue, options.min, options.max);
+	if (!options.trim && clamped === parsedValue) return value;
+	return withTrailingSeparator(clamped, hasTrailingDecimalSeparator);
+}
+function countTrailingDigits(value, from) {
+	let count = 0;
+	while (from + count < value.length && /\d/.test(value[from + count])) count += 1;
+	return count;
+}
+function normalizePastedValue(value, options) {
+	const candidates = new Set([...options.allowedDecimalSeparators, options.decimalSeparator].filter((separator) => separator.length === 1));
+	const chars = value.split("");
+	const occurrences = chars.reduce((result, char, index) => {
+		if (candidates.has(char)) result.push(index);
+		return result;
+	}, []);
+	if (occurrences.length === 0) return value;
+	const lastIndex = occurrences[occurrences.length - 1];
+	const lastChar = chars[lastIndex];
+	const lastCharCount = occurrences.filter((index) => chars[index] === lastChar).length;
+	const lastGroupSize = options.thousandsGroupStyle === "wan" ? 4 : 3;
+	let decimalIndex = -1;
+	if (lastCharCount === 1) if (lastChar === options.decimalSeparator) decimalIndex = lastIndex;
+	else if (lastChar === options.thousandSeparator) decimalIndex = countTrailingDigits(value, lastIndex + 1) === lastGroupSize ? -1 : lastIndex;
+	else decimalIndex = lastIndex;
+	return chars.map((char, index) => {
+		if (index === decimalIndex) return options.decimalSeparator;
+		if (candidates.has(char) && char !== options.thousandSeparator) return "";
+		return char;
+	}).join("");
+}
+function isSignificant(char, decimalSeparator) {
+	return /\d/.test(char) || char === decimalSeparator;
+}
+function getCaretPositionAfterPaste(rawValue, rawCaret, formattedValue, decimalSeparator) {
+	let remaining = 0;
+	for (let index = 0; index < rawCaret && index < rawValue.length; index += 1) if (isSignificant(rawValue[index], decimalSeparator)) remaining += 1;
+	if (remaining === 0) return Math.min(rawCaret, formattedValue.length);
+	for (let index = 0; index < formattedValue.length; index += 1) if (isSignificant(formattedValue[index], decimalSeparator)) {
+		remaining -= 1;
+		if (remaining === 0) return index + 1;
+	}
+	return formattedValue.length;
 }
 function isInRange(value, min, max) {
 	if (value === void 0) return true;
@@ -14109,7 +14169,6 @@ var NumberInput = factory(/* @__PURE__ */ defineComponent({
 		const slots = useSlots();
 		const attrs = useAttrs();
 		const inputRef = ref(null);
-		const isEditing = ref(false);
 		const isBigIntMode = computed(() => typeof props.modelValue === "bigint" || typeof props.defaultValue === "bigint");
 		const [value, setValue] = useUncontrolled({
 			value: () => props.modelValue,
@@ -14142,11 +14201,7 @@ var NumberInput = factory(/* @__PURE__ */ defineComponent({
 			thousandsGroupStyle: props.thousandsGroupStyle,
 			thousandSeparator: props.thousandSeparator
 		}));
-		const getFormatterOptions = (nextValue = value.value) => ({
-			...formatterOptions.value,
-			fixedDecimalScale: isEditing.value || typeof nextValue === "string" ? false : formatterOptions.value.fixedDecimalScale
-		});
-		const displayValue = computed(() => value.value === "" || value.value === "-" ? String(value.value) : formatNumber(value.value, getFormatterOptions()));
+		const displayValue = computed(() => value.value === "" || value.value === "-" ? String(value.value) : formatNumber(value.value, formatterOptions.value));
 		const clampCaretToFormatting = (input) => {
 			const { min, max } = getCaretBoundaries(input.value, formatterOptions.value);
 			const start = input.selectionStart;
@@ -14159,6 +14214,14 @@ var NumberInput = factory(/* @__PURE__ */ defineComponent({
 		const scheduleCaretClamp = (input) => {
 			setTimeout(() => clampCaretToFormatting(input), 0);
 		};
+		const getFormattedCaretPosition = (value, formattedValue, position) => {
+			let formattedPosition = 0;
+			for (const character of value.slice(0, position)) {
+				const nextPosition = formattedValue.indexOf(character, formattedPosition);
+				if (nextPosition !== -1) formattedPosition = nextPosition + 1;
+			}
+			return formattedPosition;
+		};
 		const commitValue = (nextValue, source = "event") => {
 			if (props.clampBehavior === "strict") {
 				const numeric = toNumeric(nextValue);
@@ -14170,18 +14233,19 @@ var NumberInput = factory(/* @__PURE__ */ defineComponent({
 			const raw = typeof nextValue === "bigint" ? nextValue.toString() : String(nextValue);
 			emit("value-change", {
 				floatValue: typeof nextValue === "number" ? nextValue : Number.isNaN(Number(raw)) ? void 0 : Number(raw),
-				formattedValue: nextValue === "" ? "" : formatNumber(nextValue, getFormatterOptions(nextValue)),
+				formattedValue: nextValue === "" ? "" : formatNumber(nextValue, formatterOptions.value),
 				value: raw
 			}, { source });
 		};
+		const canStepValue = computed(() => isBigIntMode.value ? canStepBigInt(value.value, props.allowNegative) : canStep(value.value));
 		const stepValue = (direction) => {
-			if (props.disabled || props.readOnly) return;
+			if (props.disabled || props.readOnly || !canStepValue.value) return;
 			if (isBigIntMode.value) {
 				const current = typeof value.value === "bigint" ? value.value : BigInt(0);
 				const step = typeof props.step === "bigint" ? props.step : BigInt(props.step);
 				const start = typeof props.startValue === "bigint" ? props.startValue : BigInt(props.startValue);
 				const next = (value.value === "" || value.value === "-" ? start : current) + step * BigInt(direction);
-				const min = typeof props.min === "bigint" ? props.min : props.min === void 0 ? void 0 : BigInt(props.min);
+				const min = typeof props.min === "bigint" ? props.min : props.min === void 0 ? props.allowNegative ? void 0 : BigInt(0) : BigInt(props.min);
 				const max = typeof props.max === "bigint" ? props.max : props.max === void 0 ? void 0 : BigInt(props.max);
 				const clamped = clampBigInt(next, min, max);
 				if (max !== void 0 && next > max) emit("max-reached");
@@ -14271,7 +14335,7 @@ var NumberInput = factory(/* @__PURE__ */ defineComponent({
 			onPointercancel: clearHold
 		}, () => h(NumberInputChevron, { direction: "down" }))]);
 		/** The step controls double as the right section unless one was supplied. */
-		const rightSection = computed(() => props.hideControls || props.readOnly ? props.rightSection : props.rightSection !== void 0 || slots.rightSection ? props.rightSection : controls);
+		const rightSection = computed(() => props.hideControls || props.readOnly || !canStepValue.value ? props.rightSection : props.rightSection !== void 0 || slots.rightSection ? props.rightSection : controls);
 		const rightSectionPointerEvents = computed(() => props.rightSectionPointerEvents ?? (props.disabled ? "none" : void 0));
 		const rightSectionWidth = computed(() => props.rightSectionWidth ?? `var(--ni-right-section-width-${props.size || "sm"})`);
 		/** `bigint` values are integers only, so the numeric keypad is the right hint. */
@@ -14288,22 +14352,52 @@ var NumberInput = factory(/* @__PURE__ */ defineComponent({
 		};
 		__expose({ rootElement });
 		function onInput(event) {
-			isEditing.value = true;
 			const input = event.currentTarget;
-			const rawValue = stripFormatting(input.value, formatterOptions.value);
+			const inputValue = input.value;
+			const selectionStart = input.selectionStart;
+			const selectionEnd = input.selectionEnd;
+			const rawValue = stripFormatting(inputValue, formatterOptions.value);
 			const decimalSeparator = props.decimalSeparator || ".";
-			const sanitized = sanitizeNumberInputString(props.allowedDecimalSeparators.filter((separator) => separator !== decimalSeparator).reduce((acc, separator) => acc.split(separator).join("."), rawValue.replace(decimalSeparator, ".")), props.allowDecimal, props.allowNegative, props.decimalScale);
+			const sanitized = sanitizeNumberInputString(props.allowedDecimalSeparators.filter((separator) => separator !== decimalSeparator).reduce((acc, separator) => acc.split(separator).join("."), rawValue.replace(decimalSeparator, ".")), isBigIntMode.value ? false : props.allowDecimal, props.allowNegative, props.decimalScale);
 			const nextValue = isBigIntMode.value ? parseBigIntInputValue(sanitized, props.allowNegative, props.allowLeadingZeros) : parseNumberInputValue(sanitized, props.allowDecimal, props.allowNegative, props.allowLeadingZeros, props.decimalScale, props.fixedDecimalScale);
 			if (props.clampBehavior === "strict" && !isBigIntMode.value && !isStrictAllowed(nextValue, typeof props.min === "number" ? props.min : void 0, typeof props.max === "number" ? props.max : void 0)) {
 				restoreInputValue(input, displayValue.value);
 				return;
 			}
-			const formattedNextValue = nextValue === "" || nextValue === "-" ? String(nextValue) : formatNumber(nextValue, getFormatterOptions(nextValue));
-			if (input.value !== formattedNextValue) restoreInputValue(input, formattedNextValue);
+			const formattedNextValue = nextValue === "" || nextValue === "-" ? String(nextValue) : formatNumber(nextValue, formatterOptions.value);
+			if (input.value !== formattedNextValue) {
+				restoreInputValue(input, formattedNextValue);
+				if (props.fixedDecimalScale && selectionStart !== null && selectionEnd !== null) input.setSelectionRange(getFormattedCaretPosition(inputValue, formattedNextValue, selectionStart), getFormattedCaretPosition(inputValue, formattedNextValue, selectionEnd));
+			}
 			scheduleCaretClamp(input);
-			commitValue(nextValue);
+			if (!Object.is(nextValue, value.value)) commitValue(nextValue);
 		}
 		function onKeydown(event) {
+			const input = event.currentTarget;
+			if (event.key === "Backspace" && !props.readOnly && !props.disabled && input.selectionStart !== null && input.selectionStart === input.selectionEnd) {
+				if (input.selectionStart === 0) event.preventDefault();
+				else if (props.fixedDecimalScale && typeof props.decimalScale === "number") {
+					const decimalPosition = input.value.indexOf(props.decimalSeparator);
+					const isAfterDecimalSeparator = input.value[input.selectionStart - 1] === props.decimalSeparator;
+					const deletePosition = input.selectionStart - (isAfterDecimalSeparator ? 2 : 1);
+					if (deletePosition >= 0 && deletePosition < decimalPosition) {
+						const nextInputValue = input.value.slice(0, deletePosition) + input.value.slice(deletePosition + 1);
+						const unformattedValue = stripFormatting(nextInputValue, formatterOptions.value);
+						const [integerPart, decimalPart = ""] = (unformattedValue.startsWith("-") ? unformattedValue.slice(1) : unformattedValue).split(".");
+						if (!/\d/.test(integerPart) && /^0*$/.test(decimalPart)) {
+							event.preventDefault();
+							input.value = "";
+							input.setSelectionRange(0, 0);
+							input.dispatchEvent(new Event("input", { bubbles: true }));
+						} else if (isAfterDecimalSeparator) {
+							event.preventDefault();
+							input.value = nextInputValue;
+							input.setSelectionRange(deletePosition, deletePosition);
+							input.dispatchEvent(new Event("input", { bubbles: true }));
+						}
+					}
+				}
+			}
 			if (!props.readOnly && props.withKeyboardEvents && event.key === "ArrowUp") {
 				event.preventDefault();
 				stepValue(1);
@@ -14312,7 +14406,7 @@ var NumberInput = factory(/* @__PURE__ */ defineComponent({
 				event.preventDefault();
 				stepValue(-1);
 			}
-			scheduleCaretClamp(event.currentTarget);
+			scheduleCaretClamp(input);
 		}
 		function onKeyup(event) {
 			scheduleCaretClamp(event.currentTarget);
@@ -14321,17 +14415,44 @@ var NumberInput = factory(/* @__PURE__ */ defineComponent({
 			scheduleCaretClamp(event.currentTarget);
 		}
 		function onFocus(event) {
-			isEditing.value = true;
 			if (props.selectAllOnFocus) window.setTimeout(() => inputRef.value?.select(), 0);
 			else scheduleCaretClamp(event.currentTarget);
 		}
+		function onPaste(event) {
+			const pastedText = event.clipboardData?.getData("text") ?? "";
+			const decimalSeparator = props.decimalSeparator || ".";
+			const modifiedText = normalizePastedValue(pastedText, {
+				decimalSeparator,
+				thousandSeparator: props.thousandSeparator === true ? "," : props.thousandSeparator === false ? void 0 : props.thousandSeparator,
+				allowedDecimalSeparators: props.allowedDecimalSeparators,
+				thousandsGroupStyle: props.thousandsGroupStyle
+			});
+			if (modifiedText !== pastedText && inputRef.value) {
+				event.preventDefault();
+				const input = inputRef.value;
+				const start = input.selectionStart ?? 0;
+				const end = input.selectionEnd ?? 0;
+				const newValue = input.value.slice(0, start) + modifiedText + input.value.slice(end);
+				input.value = newValue;
+				input.dispatchEvent(new Event("input", { bubbles: true }));
+				const rawCaret = start + modifiedText.length;
+				setTimeout(() => {
+					const caret = getCaretPositionAfterPaste(newValue, rawCaret, input.value, decimalSeparator);
+					input.setSelectionRange(caret, caret);
+				}, 0);
+			}
+		}
 		function onBlur() {
-			isEditing.value = false;
 			let sanitizedValue = value.value;
 			const min = typeof props.min === "number" ? props.min : void 0;
 			const max = typeof props.max === "number" ? props.max : void 0;
 			if (props.clampBehavior === "blur" && typeof sanitizedValue === "number") sanitizedValue = clamp$3(sanitizedValue, min, max);
-			if (props.trimLeadingZeroesOnBlur && typeof sanitizedValue === "string" && getDecimalPlaces(sanitizedValue) < 15) sanitizedValue = clampAndSanitizeInput(sanitizedValue, max, min);
+			if (!isBigIntMode.value && typeof sanitizedValue === "string") sanitizedValue = sanitizeInputOnBlur(sanitizedValue, {
+				min,
+				max,
+				trim: props.trimLeadingZeroesOnBlur && getDecimalPlaces(sanitizedValue) < 15,
+				clamp: props.clampBehavior === "blur"
+			});
 			if (sanitizedValue !== value.value) commitValue(sanitizedValue, "blur");
 		}
 		return (_ctx, _cache) => {
@@ -14365,6 +14486,7 @@ var NumberInput = factory(/* @__PURE__ */ defineComponent({
 				onKeyup,
 				onClick,
 				onFocus,
+				onPaste,
 				onBlur
 			}), createSlots({ _: 2 }, [
 				unref(slots).label ? {
@@ -14638,7 +14760,7 @@ var PinInput = factory(/* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const attrs = useAttrs();
 		const props = useProps("PinInput", defaultProps$29, rawProps);
-		const uuid = useId(props.id);
+		const uuid = useId$1(props.id);
 		const focusedIndex = ref(-1);
 		const inputsRef = ref([]);
 		/** Guards `onComplete` so it fires once per completion, not on every keystroke after. */
@@ -16005,8 +16127,8 @@ var Rating = factory(/* @__PURE__ */ defineComponent({
 		const hovered = ref(-1);
 		const isOutside = ref(true);
 		const { dir } = useDirection();
-		const name = useId(props.name);
-		const id = useId(props.id);
+		const name = useId$1(props.name);
+		const id = useId$1(props.id);
 		const [currentValue, setCurrentValue] = useUncontrolled({
 			value: () => props.modelValue,
 			defaultValue: props.defaultValue,
@@ -16445,7 +16567,7 @@ var SegmentedControl = Object.assign(/* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const attrs = useAttrs();
 		const theme = useMantineTheme();
-		const uuid = useId(props.name);
+		const uuid = useId$1(props.name);
 		const mounted = useMounted();
 		const parent = ref(null);
 		const itemRefs = reactive({});
@@ -16481,8 +16603,16 @@ var SegmentedControl = Object.assign(/* @__PURE__ */ defineComponent({
 			parent.value = node?.$el ?? node ?? null;
 		};
 		const setItemRef = (key, node) => {
-			itemRefs[key] = node?.$el ?? node ?? null;
+			const element = node?.$el ?? node ?? null;
+			if (element === null) delete itemRefs[key];
+			else itemRefs[key] = element;
 		};
+		watch(normalizedData, (items) => {
+			const values = new Set(items.map((item) => String(item.value)));
+			Object.keys(itemRefs).forEach((key) => {
+				if (!values.has(key)) delete itemRefs[key];
+			});
+		});
 		const ItemLabel = (item) => h("span", getStyles("innerLabel"), resolveNode(item.label));
 		const handleClick = (event) => {
 			if (props.readOnly) event.preventDefault();
@@ -17514,7 +17644,7 @@ var Tabs_default = /* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const attrs = useAttrs();
 		const props = useProps("Tabs", defaultProps$21, rawProps);
-		const uid = useId(props.id);
+		const uid = useId$1(props.id);
 		const [currentTab, setCurrentTab] = useUncontrolled({
 			value: () => props.modelValue,
 			defaultValue: props.defaultValue,
@@ -18223,6 +18353,7 @@ var Autosize_default = /* @__PURE__ */ defineComponent({
 			}
 		}
 		const cleanupFns = [];
+		let resizeFrame = 0;
 		onMounted(() => {
 			resizeTextarea();
 			const onResize = () => resizeTextarea();
@@ -18234,11 +18365,15 @@ var Autosize_default = /* @__PURE__ */ defineComponent({
 				const observer = new ResizeObserver(() => {
 					if (textareaRef.value && textareaRef.value.offsetWidth !== widthRef.value) {
 						widthRef.value = textareaRef.value.offsetWidth;
-						resizeTextarea();
+						cancelAnimationFrame(resizeFrame);
+						resizeFrame = requestAnimationFrame(resizeTextarea);
 					}
 				});
 				observer.observe(node);
-				cleanupFns.push(() => observer.disconnect());
+				cleanupFns.push(() => {
+					cancelAnimationFrame(resizeFrame);
+					observer.disconnect();
+				});
 			}
 			const onFontsLoaded = () => resizeTextarea();
 			document.fonts.addEventListener("loadingdone", onFontsLoaded);
@@ -18255,6 +18390,7 @@ var Autosize_default = /* @__PURE__ */ defineComponent({
 			cleanupFns.push(() => document.body.removeEventListener("reset", onReset));
 		});
 		onUnmounted(() => {
+			cancelAnimationFrame(resizeFrame);
 			cleanupFns.forEach((fn) => fn());
 			cleanupFns.length = 0;
 		});
@@ -18850,7 +18986,7 @@ var PasswordInput = Object.assign(/* @__PURE__ */ defineComponent({
 		const slots = useSlots();
 		const attrs = useAttrs();
 		const props = useProps("PasswordInput", defaultProps$19, rawProps);
-		const uuid = useId(props.id);
+		const uuid = useId$1(props.id);
 		const fallbackId = ref(`password-input-${Math.random().toString(36).slice(2)}`);
 		const [visible, setVisible] = useUncontrolled({
 			value: () => props.visible,
@@ -19867,7 +20003,7 @@ var Checkbox = factory(/* @__PURE__ */ defineComponent({
 		const slots = useSlots();
 		const attrs = useAttrs();
 		const props = useProps("Checkbox", defaultProps$17, rawProps);
-		const uuid = useId(props.id);
+		const uuid = useId$1(props.id);
 		const groupContext = useCheckboxGroupContext();
 		const [localChecked, setLocalChecked] = useUncontrolled({
 			value: () => props.modelValue !== void 0 ? props.modelValue : props.checked,
@@ -20177,7 +20313,7 @@ var Chip = factory(/* @__PURE__ */ defineComponent({
 		const attrs = useAttrs();
 		const props = useProps("Chip", defaultProps$16, rawProps);
 		const groupContext = useChipGroupContext();
-		const uuid = useId(props.id);
+		const uuid = useId$1(props.id);
 		const [value, setValue] = useUncontrolled({
 			value: () => props.modelValue !== void 0 ? props.modelValue : props.checked,
 			defaultValue: props.defaultChecked,
@@ -20934,7 +21070,7 @@ var RadioGroup = Object.assign(/* @__PURE__ */ defineComponent({
 		const slots = useSlots();
 		const attrs = useAttrs();
 		const props = useProps("RadioGroup", null, rawProps);
-		const name = useId(props.name);
+		const name = useId$1(props.name);
 		const [value, setValue] = useUncontrolled({
 			value: () => props.modelValue,
 			defaultValue: props.defaultValue,
@@ -21388,7 +21524,7 @@ var Radio = factory(/* @__PURE__ */ defineComponent({
 		const slots = useSlots();
 		const attrs = useAttrs();
 		const props = useProps("Radio", defaultProps$15, rawProps);
-		const uuid = useId(props.id);
+		const uuid = useId$1(props.id);
 		const groupContext = useRadioGroupContext();
 		const [localChecked, setLocalChecked] = useUncontrolled({
 			value: () => props.modelValue !== void 0 ? props.modelValue : props.checked,
@@ -21854,7 +21990,7 @@ var Switch = factory(/* @__PURE__ */ defineComponent({
 		const slots = useSlots();
 		const attrs = useAttrs();
 		const props = useProps("Switch", defaultProps$13, rawProps);
-		const uuid = useId(props.id);
+		const uuid = useId$1(props.id);
 		const groupContext = useSwitchGroupContext();
 		const [checked, setChecked] = useUncontrolled({
 			value: () => props.modelValue,
@@ -22768,20 +22904,30 @@ function getEl$1(value) {
 function useDimensions(element) {
 	const dimensions = ref(null);
 	let observer = null;
+	let frame = 0;
 	onMounted(() => {
 		const el = getEl$1(element.value);
 		if (!el || typeof ResizeObserver === "undefined") return;
 		observer = new ResizeObserver(([entry]) => {
-			if (entry) dimensions.value = {
-				width: entry.borderBoxSize?.[0]?.inlineSize ?? entry.target.clientWidth,
-				height: entry.borderBoxSize?.[0]?.blockSize ?? entry.target.clientHeight,
-				contentWidth: entry.contentRect.width,
-				contentHeight: entry.contentRect.height
-			};
+			if (entry) {
+				const nextDimensions = {
+					width: entry.borderBoxSize?.[0]?.inlineSize ?? entry.target.clientWidth,
+					height: entry.borderBoxSize?.[0]?.blockSize ?? entry.target.clientHeight,
+					contentWidth: entry.contentRect.width,
+					contentHeight: entry.contentRect.height
+				};
+				cancelAnimationFrame(frame);
+				frame = requestAnimationFrame(() => {
+					dimensions.value = nextDimensions;
+				});
+			}
 		});
 		observer.observe(el);
 	});
-	onBeforeUnmount(() => observer?.disconnect());
+	onBeforeUnmount(() => {
+		cancelAnimationFrame(frame);
+		observer?.disconnect();
+	});
 	return dimensions;
 }
 var OverflowList_module_default = { root: "_root_uggjd_1" };
@@ -23065,7 +23211,7 @@ var TableOfContents = factory(/* @__PURE__ */ defineComponent({
 		const rawProps = __props;
 		const attrs = useAttrs();
 		const props = useProps("TableOfContents", defaultProps$9, rawProps);
-		const id = useId();
+		const id = useId$1();
 		const spy = useScrollSpy(props.scrollSpyOptions ?? {});
 		assignRef(props.reinitializeRef, spy.reinitialize);
 		const getStyles = useStyles({
@@ -28205,12 +28351,15 @@ function useLockScroll(opened) {
 //#endregion
 //#region src/components/ModalBase/use-modal.ts
 function useModal(input) {
-	const id = useId(input.id);
+	const id = useId$1(input.id);
 	const titleMounted = ref(false);
 	const bodyMounted = ref(false);
 	useWindowEvent("keydown", (event) => {
 		const stopped = event.target?.getAttribute?.("data-mantine-stop-propagation") === "true";
-		if (event.key === "Escape" && !event.isComposing && input.opened() && input.closeOnEscape() && !stopped) input.onClose();
+		if (event.key === "Escape" && !event.isComposing && input.opened() && input.closeOnEscape() && !input.handledEscapeEvents?.has(event) && !stopped) {
+			input.handledEscapeEvents?.add(event);
+			input.onClose();
+		}
 	}, { capture: true });
 	useFocusReturn({
 		opened: input.opened,
@@ -28229,6 +28378,7 @@ var ModalBase = factory(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ModalBase",
 	props: {
+		__handledEscapeEvents: {},
 		rootRef: {},
 		opened: { type: Boolean },
 		id: { default: void 0 },
@@ -28283,14 +28433,15 @@ var ModalBase = factory(/* @__PURE__ */ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const attrs = useAttrs();
-		const fallbackId = useId(props.id);
+		const fallbackId = useId$1(props.id);
 		const modal = useModal({
 			id: props.id,
 			opened: () => props.opened,
 			onClose: () => emit("close"),
 			trapFocus: () => props.trapFocus,
 			closeOnEscape: () => props.closeOnEscape,
-			returnFocus: () => props.returnFocus
+			returnFocus: () => props.returnFocus,
+			handledEscapeEvents: props.__handledEscapeEvents
 		});
 		useLockScroll(computed(() => props.opened && props.lockScroll));
 		provideModalBaseContext({
@@ -28721,6 +28872,7 @@ var ModalRoot_default = /* @__PURE__ */ defineComponent({
 		classNames: {},
 		styles: {},
 		vars: {},
+		__handledEscapeEvents: {},
 		rootRef: {},
 		opened: { type: Boolean },
 		id: {},
@@ -28884,6 +29036,7 @@ var Modal_default = /* @__PURE__ */ defineComponent({
 		classNames: {},
 		styles: {},
 		vars: {},
+		__handledEscapeEvents: {},
 		rootRef: {},
 		opened: { type: Boolean },
 		id: {},
@@ -29106,6 +29259,7 @@ var DrawerRoot_default = /* @__PURE__ */ defineComponent({
 		offset: { default: 0 },
 		size: { default: "md" },
 		scrollAreaComponent: {},
+		__handledEscapeEvents: {},
 		rootRef: {},
 		opened: { type: Boolean },
 		id: {},
@@ -29269,6 +29423,7 @@ var Drawer_default = /* @__PURE__ */ defineComponent({
 		offset: {},
 		size: {},
 		scrollAreaComponent: {},
+		__handledEscapeEvents: {},
 		rootRef: {},
 		opened: { type: Boolean },
 		id: {},
@@ -29340,7 +29495,8 @@ var Drawer_default = /* @__PURE__ */ defineComponent({
 			const isCurrent = stackCtx.currentId === props.stackId;
 			return {
 				closeOnEscape: isCurrent,
-				trapFocus: isCurrent
+				trapFocus: isCurrent,
+				__handledEscapeEvents: stackCtx.handledEscapeEvents
 			};
 		});
 		/** One overlay for the whole stack: only the topmost drawer renders it. */
@@ -29445,7 +29601,8 @@ var DrawerStack_default = /* @__PURE__ */ defineComponent({
 			},
 			get maxZIndex() {
 				return maxZIndex.value;
-			}
+			},
+			handledEscapeEvents: /* @__PURE__ */ new WeakSet()
 		}));
 		return (_ctx, _cache) => {
 			return renderSlot(_ctx.$slots, "default");
@@ -29955,7 +30112,7 @@ var Popover_default = /* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const props = useProps("Popover", defaults$2, rawProps);
 		const { dir } = useDirection();
-		const id = useId(props.id);
+		const id = useId$1(props.id);
 		const internal = ref(props.defaultOpened);
 		const isControlled = computed(() => rawProps.opened !== void 0);
 		const opened = computed(() => isControlled.value ? !!rawProps.opened : internal.value);
@@ -32191,6 +32348,8 @@ var MenuSub_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "MenuSub",
 	props: {
+		withinPortal: {},
+		portalProps: {},
 		opened: {
 			type: Boolean,
 			default: void 0
@@ -32224,7 +32383,7 @@ var MenuSub_default = /* @__PURE__ */ defineComponent({
 			transitionProps: props.transitionProps,
 			middlewares: props.middlewares,
 			closeOnItemClick: false,
-			withinPortal: attrs.withinPortal ?? false
+			withinPortal: false
 		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(Menu_default, normalizeProps(guardReactiveProps(menuBindings.value)), {
@@ -32581,7 +32740,7 @@ var Menubar_default = /* @__PURE__ */ defineComponent({
 		const setRootRef = (el) => {
 			rootRef.value = el?.$el ?? el;
 		};
-		const menubarId = useId();
+		const menubarId = useId$1();
 		const revision = ref(0);
 		const [openIndexRef, setOpenIndex] = useUncontrolled({
 			value: () => props.openIndex,
@@ -32845,7 +33004,7 @@ var MenubarMenu = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const attrs = useAttrs();
 		const ctx = useMenubarContext();
-		const id = useId();
+		const id = useId$1();
 		const index = computed(() => props.__index);
 		const opened = computed(() => ctx.openIndex !== null && index.value !== -1 && ctx.openIndex === index.value);
 		/** Getters keep the provided object reactive without changing the shape consumers read. */
@@ -33210,7 +33369,6 @@ function useCombobox(options = {}) {
 	const items = () => Array.from(list()?.querySelectorAll("[data-combobox-option]") ?? []);
 	const clearSelected = () => items().forEach((item) => {
 		item.removeAttribute("data-combobox-selected");
-		item.removeAttribute("aria-selected");
 	});
 	const selectOption = (index) => {
 		const optionsList = items();
@@ -33225,7 +33383,6 @@ function useCombobox(options = {}) {
 		selectedIndex.value = next;
 		clearSelected();
 		optionsList[next].setAttribute("data-combobox-selected", "true");
-		optionsList[next].setAttribute("aria-selected", "true");
 		optionsList[next].scrollIntoView?.({
 			block: "nearest",
 			behavior: options.scrollBehavior ?? "instant"
@@ -33675,7 +33832,7 @@ var ComboboxGroup_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const attrs = useAttrs();
 		const ctx = useComboboxContext();
-		const id = useId(props.id);
+		const id = useId$1(props.id);
 		const groupStyles = computed(() => ctx.getStyles("group", {
 			className: attrs.class,
 			style: attrs.style
@@ -33767,7 +33924,7 @@ var ComboboxOption_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const attrs = useAttrs();
 		const ctx = useComboboxContext();
-		const id = useId(props.id);
+		const id = useId$1(props.id);
 		/**
 		* The consumer handlers are chained explicitly below, so they must not also reach the
 		* element through the fallthrough attributes or they would fire twice.
@@ -33842,7 +33999,7 @@ var ComboboxOptions_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const attrs = useAttrs();
 		const ctx = useComboboxContext();
-		const id = useId(props.id);
+		const id = useId$1(props.id);
 		onMounted(() => ctx.store.setListId(id.value));
 		/**
 		* The consumer handler is chained explicitly below, so it must not also reach the
@@ -34677,7 +34834,6 @@ var ComboboxPopover_default = /* @__PURE__ */ defineComponent({
 			onDropdownClose: () => {
 				emit("dropdown-close");
 				combobox.resetSelectedOption();
-				if (props.searchable) combobox.focusTarget();
 			}
 		});
 		function handleSearchChange(val) {
@@ -34713,6 +34869,7 @@ var ComboboxPopover_default = /* @__PURE__ */ defineComponent({
 			styles: props.styles,
 			unstyled: props.unstyled,
 			onOptionSubmit: handleOptionSubmit,
+			returnFocus: true,
 			...props.comboboxProps,
 			...attrs
 		}));
@@ -35622,7 +35779,7 @@ var Select = Object.assign(/* @__PURE__ */ defineComponent({
 		watch(() => search(), () => {
 			if (props.selectFirstOptionOnChange) nextTick(combobox.selectFirstOption);
 		});
-		const id = useId(attrs.id);
+		const id = useId$1(attrs.id);
 		function clear(event) {
 			event?.stopPropagation();
 			changeValue(null, null);
@@ -35925,7 +36082,7 @@ var Autocomplete = Object.assign(/* @__PURE__ */ defineComponent({
 		watch(() => current(), () => {
 			if (props.selectFirstOptionOnChange) nextTick(combobox.selectFirstOption);
 		});
-		const id = useId(attrs.id);
+		const id = useId$1(attrs.id);
 		function clear(event) {
 			event?.stopPropagation();
 			change("");
@@ -37952,7 +38109,7 @@ var Cascader = Object.assign(/* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const slots = useSlots();
 		const attrs = useAttrs();
-		const id = useId(attrs.id);
+		const id = useId$1(attrs.id);
 		const internalValue = ref(props.defaultValue ?? null);
 		const currentValue = computed(() => props.modelValue !== void 0 ? props.modelValue : internalValue.value);
 		const pathOptions = computed(() => getCascaderPathOptions(props.data, currentValue.value));