@mantine-vue/core 3.3.0 → 3.4.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,
@@ -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,9 +13895,19 @@ 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)}`;
@@ -14109,7 +14127,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 +14159,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 +14172,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 +14191,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 +14293,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 +14310,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 +14364,7 @@ var NumberInput = factory(/* @__PURE__ */ defineComponent({
 				event.preventDefault();
 				stepValue(-1);
 			}
-			scheduleCaretClamp(event.currentTarget);
+			scheduleCaretClamp(input);
 		}
 		function onKeyup(event) {
 			scheduleCaretClamp(event.currentTarget);
@@ -14321,12 +14373,10 @@ 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 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;
@@ -14638,7 +14688,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 +16055,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 +16495,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({});
@@ -17514,7 +17564,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,
@@ -18850,7 +18900,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 +19917,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 +20227,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 +20984,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 +21438,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 +21904,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,
@@ -23065,7 +23115,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,7 +28255,7 @@ 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) => {
@@ -28283,7 +28333,7 @@ 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,
@@ -29955,7 +30005,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);
@@ -32581,7 +32631,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 +32895,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. */
@@ -33675,7 +33725,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 +33817,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 +33892,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
@@ -35622,7 +35672,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 +35975,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 +38002,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));