@mantine-vue/core 2.4.0 → 3.0.0

package/cjs/index.cjs

@@ -3749,6 +3749,10 @@ var AngleSlider = withBoxProps((0, vue.defineComponent)({
 			type: Number,
 			default: void 0
 		},
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
 		value: {
 			type: Number,
 			default: void 0
@@ -3826,14 +3830,18 @@ var AngleSlider = withBoxProps((0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, emit }) {
 		const props = useProps("AngleSlider", defaultProps$52, rawProps);
 		const rootRef = (0, vue.ref)(null);
 		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: 0,
-			onChange: props.onChange
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const update = (nextValue) => {
 			if (!rootRef.value || props.disabled) return;
@@ -11123,9 +11131,17 @@ var FileButton = (0, vue.defineComponent)({
 	name: "FileButton",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: [
+				Object,
+				Array,
+				null
+			],
+			default: void 0
+		},
 		onChange: {
 			type: Function,
-			required: true
+			default: void 0
 		},
 		multiple: {
 			type: Boolean,
@@ -11164,7 +11180,8 @@ var FileButton = (0, vue.defineComponent)({
 			default: void 0
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const inputRef = (0, vue.ref)(null);
 		const reset = () => {
 			if (inputRef.value) inputRef.value.value = "";
@@ -11189,10 +11206,14 @@ var FileButton = (0, vue.defineComponent)({
 			onChange: (event) => {
 				const files = event.currentTarget.files;
 				if (files === null) {
-					props.onChange(props.multiple ? [] : null);
+					const nextValue = props.multiple ? [] : null;
+					emit("update:modelValue", nextValue);
+					emit("change", nextValue);
 					return;
 				}
-				props.onChange(props.multiple ? Array.from(files) : files[0] || null);
+				const nextValue = props.multiple ? Array.from(files) : files[0] || null;
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
 			}
 		}), slots.default?.({
 			onClick,
@@ -11833,6 +11854,22 @@ var InputBase$1 = (0, vue.defineComponent)({
 			],
 			default: "input"
 		},
+		modelValue: {
+			type: null,
+			default: void 0
+		},
+		value: {
+			type: null,
+			default: void 0
+		},
+		defaultValue: {
+			type: null,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		__staticSelector: {
 			type: String,
 			default: void 0
@@ -12002,7 +12039,21 @@ var InputBase$1 = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
+		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
+			defaultValue: props.defaultValue,
+			finalValue: void 0,
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
+		const callHandler = (handler, event) => {
+			if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
+			else if (typeof handler === "function") handler(event);
+		};
 		const wrapperCtx = useInputWrapperContext();
 		const stylesCtx = (0, vue.reactive)({
 			offsetBottom: false,
@@ -12072,6 +12123,14 @@ var InputBase$1 = (0, vue.defineComponent)({
 				(0, vue.h)(Box, {
 					...attrs,
 					...ariaAttributes,
+					value: props.component === "button" || props.component === "div" ? void 0 : value.value,
+					onInput: (event) => {
+						callHandler(attrs.onInput, event);
+						if (props.component !== "select") setValue(event.currentTarget.value);
+					},
+					onChange: (event) => {
+						if (props.component === "select") setValue(event.currentTarget.value);
+					},
 					component: props.component,
 					required: props.required,
 					disabled: props.disabled,
@@ -12127,6 +12186,22 @@ var InputBase = withBoxProps((0, vue.defineComponent)({
 			],
 			default: "input"
 		},
+		modelValue: {
+			type: null,
+			default: void 0
+		},
+		value: {
+			type: null,
+			default: void 0
+		},
+		defaultValue: {
+			type: null,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		__staticSelector: {
 			type: String,
 			default: "InputBase"
@@ -12332,7 +12407,17 @@ var InputBase = withBoxProps((0, vue.defineComponent)({
 			default: void 0
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
+		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
+			defaultValue: props.defaultValue,
+			finalValue: void 0,
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		return () => (0, vue.h)(Input.Wrapper, {
 			...props.wrapperProps,
 			id: props.id,
@@ -12360,6 +12445,8 @@ var InputBase = withBoxProps((0, vue.defineComponent)({
 			error: slots.error,
 			default: () => (0, vue.h)(Input, {
 				...attrs,
+				modelValue: value.value,
+				"onUpdate:modelValue": setValue,
 				component: props.component,
 				__staticSelector: props.__staticSelector,
 				__stylesApiProps: props.__stylesApiProps ?? props,
@@ -12423,6 +12510,14 @@ var FileInput = (0, vue.defineComponent)({
 			type: String,
 			default: "button"
 		},
+		modelValue: {
+			type: [
+				Object,
+				Array,
+				null
+			],
+			default: void 0
+		},
 		onChange: {
 			type: Function,
 			default: void 0
@@ -12544,13 +12639,17 @@ var FileInput = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const resetRef = (0, vue.ref)(null);
 		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: props.multiple ? [] : null,
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const hasValue = (0, vue.computed)(() => Array.isArray(value.value) ? value.value.length !== 0 : value.value !== null);
 		const reset = () => {
@@ -13010,6 +13109,14 @@ var NumberInput = (0, vue.defineComponent)({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: [
+				String,
+				Number,
+				BigInt
+			],
+			default: void 0
+		},
 		value: {
 			type: [
 				String,
@@ -13199,15 +13306,19 @@ var NumberInput = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const inputRef = (0, vue.ref)(null);
 		const isEditing = (0, vue.ref)(false);
-		const isBigIntMode = (0, vue.computed)(() => typeof props.value === "bigint" || typeof props.defaultValue === "bigint");
+		const isBigIntMode = (0, vue.computed)(() => typeof props.modelValue === "bigint" || typeof props.value === "bigint" || typeof props.defaultValue === "bigint");
 		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: "",
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const getStyles = useStyles({
 			name: "NumberInput",
@@ -13604,6 +13715,10 @@ var PinInput = withBoxProps((0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
+		modelValue: {
+			type: String,
+			default: void 0
+		},
 		value: {
 			type: String,
 			default: void 0
@@ -13709,7 +13824,8 @@ var PinInput = withBoxProps((0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, emit }) {
 		const props = useProps("PinInput", defaultProps$21, rawProps);
 		const uuid = (0, _mantine_vue_hooks.useId)(props.id);
 		const focusedIndex = (0, vue.ref)(-1);
@@ -13729,12 +13845,13 @@ var PinInput = withBoxProps((0, vue.defineComponent)({
 			varsResolver: varsResolver$38
 		});
 		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value !== void 0 ? createPinArray(currentLength.value, props.value) : void 0,
+			value: () => props.modelValue !== void 0 || props.value !== void 0 ? createPinArray(currentLength.value, props.modelValue ?? props.value ?? "") : void 0,
 			defaultValue: props.defaultValue?.split("").slice(0, currentLength.value),
 			finalValue: createPinArray(currentLength.value, ""),
 			onChange: (nextValue) => {
 				const stringValue = nextValue.join("").trim();
-				props.onChange?.(stringValue);
+				emit("update:modelValue", stringValue);
+				emit("change", stringValue);
 				if (stringValue.length === currentLength.value && !completed.value) {
 					completed.value = true;
 					props.onComplete?.(stringValue);
@@ -13868,7 +13985,6 @@ var PinInput = withBoxProps((0, vue.defineComponent)({
 				id: `${uuid.value}-${index + 1}`,
 				inputMode: props.inputMode || (props.type === "number" ? "numeric" : "text"),
 				onInput: (event) => handleInput(event, index),
-				onChange: (event) => handleInput(event, index),
 				onKeydown: (event) => handleKeyDown(event, index),
 				onFocus: (event) => {
 					event.target.select();
@@ -14034,6 +14150,10 @@ var NativeSelect = (0, vue.defineComponent)({
 			type: String,
 			default: void 0
 		},
+		modelValue: {
+			type: String,
+			default: void 0
+		},
 		value: {
 			type: String,
 			default: void 0
@@ -14071,7 +14191,8 @@ var NativeSelect = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, slots, emit }) {
 		const props = useProps("NativeSelect", defaultProps$20, rawProps);
 		return () => {
 			const parsedOptions = getParsedNativeSelectData(props.data).map((item, index) => (0, vue.h)(NativeSelectOption, {
@@ -14095,9 +14216,11 @@ var NativeSelect = (0, vue.defineComponent)({
 				id: props.id,
 				name: props.name,
 				form: props.form,
-				...props.value !== void 0 ? { value: props.value } : null,
-				...props.defaultValue !== void 0 ? { value: props.defaultValue } : null,
-				onChange: props.onChange,
+				modelValue: props.modelValue,
+				value: props.value,
+				defaultValue: props.defaultValue,
+				"onUpdate:modelValue": (value) => emit("update:modelValue", value),
+				onChange: (value) => emit("change", value),
 				variant: props.variant,
 				radius: props.radius,
 				classNames: props.classNames,
@@ -14145,7 +14268,7 @@ var varsResolver$37 = createVarsResolver((theme, { variant, color, childrenOffse
 function renderContent(content) {
 	return typeof content === "function" ? content() : content;
 }
-function callHandler$8(handler, event) {
+function callHandler$5(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
 	else handler?.(event);
 }
@@ -14298,11 +14421,11 @@ var NavLink = withBoxProps((0, vue.defineComponent)({
 					expanded: opened.value
 				}, props.mod],
 				onClick: (event) => {
-					callHandler$8(attrs.onClick, event);
+					callHandler$5(attrs.onClick, event);
 					toggle(event);
 				},
 				onKeydown: (event) => {
-					callHandler$8(attrs.onKeydown ?? attrs.onKeyDown, event);
+					callHandler$5(attrs.onKeydown ?? attrs.onKeyDown, event);
 					if (event.code === "Space" && withChildren) toggle(event);
 				}
 			}, () => [
@@ -14867,6 +14990,10 @@ var Rating = withBoxProps((0, vue.defineComponent)({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
 		defaultValue: {
 			type: Number,
 			default: void 0
@@ -14948,7 +15075,8 @@ var Rating = withBoxProps((0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, slots, emit }) {
 		const props = useProps("Rating", defaultProps$16, rawProps);
 		const rootRef = (0, vue.ref)(null);
 		const hovered = (0, vue.ref)(-1);
@@ -14957,10 +15085,13 @@ var Rating = withBoxProps((0, vue.defineComponent)({
 		const name = (0, _mantine_vue_hooks.useId)(props.name);
 		const id = (0, _mantine_vue_hooks.useId)(props.id);
 		const [currentValue, setCurrentValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: 0,
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const getStyles = useStyles({
 			name: "Rating",
@@ -15297,6 +15428,14 @@ var SegmentedControl = (0, vue.defineComponent)({
 			type: Array,
 			required: true
 		},
+		modelValue: {
+			type: [
+				String,
+				Number,
+				Boolean
+			],
+			default: void 0
+		},
 		value: {
 			type: [
 				String,
@@ -15390,7 +15529,8 @@ var SegmentedControl = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const theme = useMantineTheme();
 		const uuid = (0, _mantine_vue_hooks.useId)(props.name);
 		const mounted = (0, _mantine_vue_hooks.useMounted)();
@@ -15398,10 +15538,13 @@ var SegmentedControl = (0, vue.defineComponent)({
 		const itemRefs = (0, vue.reactive)({});
 		const normalizedData = (0, vue.computed)(() => normalizeData(props.data));
 		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: normalizedData.value.find((item) => !item.disabled)?.value ?? normalizedData.value[0]?.value,
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const getStyles = useStyles({
 			name: "SegmentedControl",
@@ -16671,6 +16814,18 @@ var Textarea = (0, vue.defineComponent)({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
+		value: {
+			type: String,
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
+		},
 		autosize: {
 			type: Boolean,
 			default: false
@@ -16705,7 +16860,8 @@ var Textarea = (0, vue.defineComponent)({
 			default: void 0
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		return () => {
 			const shouldAutosize = props.autosize;
 			const autosizeProps = shouldAutosize ? {
@@ -16714,6 +16870,11 @@ var Textarea = (0, vue.defineComponent)({
 			} : { rows: props.minRows };
 			return (0, vue.h)(InputBase, {
 				...attrs,
+				modelValue: props.modelValue,
+				value: props.value,
+				defaultValue: props.defaultValue,
+				"onUpdate:modelValue": (value) => emit("update:modelValue", value),
+				onChange: (value) => emit("change", value),
 				component: shouldAutosize ? TextareaAutosize : "textarea",
 				__staticSelector: props.__staticSelector || "Textarea",
 				multiline: true,
@@ -16740,7 +16901,7 @@ function validateJson(value, deserialize) {
 }
 //#endregion
 //#region src/components/JsonInput/JsonInput.ts
-function callHandler$7(handler, event) {
+function callHandler$4(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
 	else handler?.(event);
 }
@@ -16748,6 +16909,10 @@ var JsonInput = (0, vue.defineComponent)({
 	name: "JsonInput",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
 		value: {
 			type: String,
 			default: void 0
@@ -16801,12 +16966,16 @@ var JsonInput = (0, vue.defineComponent)({
 			default: void 0
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: "",
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const valid = (0, vue.ref)(validateJson(value.value, props.deserialize));
 		return () => (0, vue.h)(Textarea, {
@@ -16818,15 +16987,15 @@ var JsonInput = (0, vue.defineComponent)({
 			error: valid.value ? props.error : props.validationError || true,
 			"data-monospace": true,
 			onInput: (event) => {
-				callHandler$7(attrs.onInput, event);
+				callHandler$4(attrs.onInput, event);
 				setValue(event.currentTarget.value);
 			},
 			onFocus: (event) => {
-				callHandler$7(attrs.onFocus, event);
+				callHandler$4(attrs.onFocus, event);
 				valid.value = true;
 			},
 			onBlur: (event) => {
-				callHandler$7(attrs.onBlur, event);
+				callHandler$4(attrs.onBlur, event);
 				const target = event.currentTarget;
 				const isValid = validateJson(target.value, props.deserialize);
 				if (props.formatOnBlur && !props.readOnly && isValid && target.value.trim() !== "") setValue(props.serialize(props.deserialize(target.value), null, props.indentSpaces));
@@ -16841,9 +17010,29 @@ Object.assign(JsonInput, { classes: InputBase.classes });
 var TextInput = (0, vue.defineComponent)({
 	name: "TextInput",
 	inheritAttrs: false,
-	setup(_, { attrs, slots }) {
+	props: {
+		modelValue: {
+			type: [String, Number],
+			default: void 0
+		},
+		value: {
+			type: [String, Number],
+			default: void 0
+		},
+		defaultValue: {
+			type: [String, Number],
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		return () => (0, vue.h)(InputBase, {
 			...attrs,
+			modelValue: props.modelValue,
+			value: props.value,
+			defaultValue: props.defaultValue,
+			"onUpdate:modelValue": (value) => emit("update:modelValue", value),
+			onChange: (value) => emit("change", value),
 			component: "input",
 			__staticSelector: "TextInput",
 			__stylesApiProps: attrs
@@ -16935,6 +17124,22 @@ var PasswordInput = (0, vue.defineComponent)({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
+		value: {
+			type: String,
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		visibilityToggleIcon: {
 			type: [Object, Function],
 			default: void 0
@@ -17072,7 +17277,8 @@ var PasswordInput = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const uuid = (0, _mantine_vue_hooks.useId)(props.id);
 		const fallbackId = (0, vue.ref)(`password-input-${Math.random().toString(36).slice(2)}`);
 		const [visible, setVisible] = (0, _mantine_vue_hooks.useUncontrolled)({
@@ -17081,6 +17287,15 @@ var PasswordInput = (0, vue.defineComponent)({
 			finalValue: false,
 			onChange: (value) => props.onVisibilityChange?.(value)
 		});
+		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
+			defaultValue: props.defaultValue,
+			finalValue: "",
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		const getStyles = useStyles({
 			name: "PasswordInput",
 			props,
@@ -17201,6 +17416,7 @@ var PasswordInput = (0, vue.defineComponent)({
 					default: () => (0, vue.h)("input", {
 						...attrs,
 						...getStyles("innerInput"),
+						value: value.value,
 						required: props.required,
 						"data-invalid": props.error || slots.error ? true : void 0,
 						"data-with-left-section": props.leftSection !== void 0 || slots.leftSection ? true : void 0,
@@ -17208,7 +17424,12 @@ var PasswordInput = (0, vue.defineComponent)({
 						id,
 						"aria-describedby": describedBy,
 						autocomplete: attrs.autocomplete || "off",
-						type: visible.value ? "text" : "password"
+						type: visible.value ? "text" : "password",
+						onInput: (event) => {
+							const handler = attrs.onInput;
+							handler?.(event);
+							setValue(event.currentTarget.value);
+						}
 					}),
 					leftSection: slots.leftSection,
 					rightSection: slots.rightSection
@@ -17454,6 +17675,10 @@ var CheckboxGroup = (0, vue.defineComponent)({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: Array,
+			default: void 0
+		},
 		value: {
 			type: Array,
 			default: void 0
@@ -17527,12 +17752,16 @@ var CheckboxGroup = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: [],
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const handleChange = (eventOrValue) => {
 			if (props.readOnly) return;
@@ -17595,6 +17824,10 @@ var CheckboxCard = withBoxProps((0, vue.defineComponent)({
 	name: "CheckboxCard",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
 		checked: {
 			type: Boolean,
 			default: void 0
@@ -17640,13 +17873,22 @@ var CheckboxCard = withBoxProps((0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: [
+		"update:modelValue",
+		"update:checked",
+		"change"
+	],
+	setup(props, { attrs, slots, emit }) {
 		const groupContext = useCheckboxGroupContext();
 		const [checked, setChecked] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => typeof props.checked === "boolean" ? props.checked : groupContext ? groupContext.value.includes(props.value || "") : void 0,
+			value: () => typeof props.modelValue === "boolean" ? props.modelValue : typeof props.checked === "boolean" ? props.checked : groupContext ? groupContext.value.includes(props.value || "") : void 0,
 			defaultValue: props.defaultChecked,
 			finalValue: false,
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("update:checked", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const getStyles = useStyles({
 			name: "CheckboxCard",
@@ -17837,7 +18079,7 @@ var varsResolver$25 = createVarsResolver((theme, { radius, color, size, iconColo
 		autoContrast
 	}) : void 0
 } }));
-function callHandler$6(handler, event) {
+function callHandler$3(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
 	else handler?.(event);
 }
@@ -17906,10 +18148,22 @@ var CheckboxBase = (0, vue.defineComponent)({
 			type: Boolean,
 			default: true
 		},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
 		checked: {
 			type: Boolean,
 			default: void 0
 		},
+		defaultChecked: {
+			type: Boolean,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -17943,9 +18197,24 @@ var CheckboxBase = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: [
+		"update:modelValue",
+		"update:checked",
+		"change"
+	],
+	setup(props, { attrs, slots, emit }) {
 		const uuid = (0, _mantine_vue_hooks.useId)(props.id);
 		const groupContext = useCheckboxGroupContext();
+		const [localChecked, setLocalChecked] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.checked,
+			defaultValue: props.defaultChecked,
+			finalValue: false,
+			onChange: (checked) => {
+				emit("update:modelValue", checked);
+				emit("update:checked", checked);
+				emit("change", checked);
+			}
+		});
 		const getStyles = useStyles({
 			name: "Checkbox",
 			props,
@@ -17975,7 +18244,7 @@ var CheckboxBase = (0, vue.defineComponent)({
 			};
 			const Icon = props.icon || CheckboxIcon;
 			const value = String(attrs.value ?? "");
-			const checked = groupContext ? groupContext.value.includes(value) : props.checked;
+			const checked = groupContext ? groupContext.value.includes(value) : localChecked.value;
 			const disabled = groupContext?.isDisabled?.(value) || props.disabled;
 			const size = groupContext?.size ?? props.size;
 			return (0, vue.h)(InlineInput, {
@@ -18020,13 +18289,14 @@ var CheckboxBase = (0, vue.defineComponent)({
 				},
 				variant: props.variant,
 				onClick: (event) => {
-					callHandler$6(attrs.onClick, event);
-					if (props.readOnly && checked === void 0) event.preventDefault();
+					callHandler$3(attrs.onClick, event);
+					if (props.readOnly) event.preventDefault();
 				},
 				onChange: (event) => {
 					if (props.readOnly) return;
-					callHandler$6(attrs.onChange, event);
+					const nextChecked = event.currentTarget.checked;
 					groupContext?.onChange(event);
+					setLocalChecked(nextChecked);
 				}
 			}), slots.icon ? slots.icon(iconSlotProps) : (0, vue.h)(Icon, {
 				indeterminate: props.indeterminate,
@@ -18055,6 +18325,10 @@ var ChipGroup = (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
+		modelValue: {
+			type: [String, Array],
+			default: void 0
+		},
 		value: {
 			type: [String, Array],
 			default: void 0
@@ -18068,12 +18342,16 @@ var ChipGroup = (0, vue.defineComponent)({
 			default: void 0
 		}
 	},
-	setup(props, { slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { slots, emit }) {
 		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: props.multiple ? [] : null,
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const isChipSelected = (chipValue) => Array.isArray(value.value) ? value.value.includes(chipValue) : value.value === chipValue;
 		const handleChange = (event) => {
@@ -18121,10 +18399,6 @@ var varsResolver$24 = createVarsResolver((theme, { size, radius, variant, color,
 		"--chip-spacing": getSize(size, "chip-spacing")
 	} };
 });
-function callHandler$5(handler, event) {
-	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
-	else handler?.(event);
-}
 var ChipBase = (0, vue.defineComponent)({
 	name: "Chip",
 	inheritAttrs: false,
@@ -18145,6 +18419,10 @@ var ChipBase = (0, vue.defineComponent)({
 			type: String,
 			default: "checkbox"
 		},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
 		checked: {
 			type: Boolean,
 			default: void 0
@@ -18216,15 +18494,24 @@ var ChipBase = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs, slots }) {
+	emits: [
+		"update:modelValue",
+		"update:checked",
+		"change"
+	],
+	setup(rawProps, { attrs, slots, emit }) {
 		const props = useProps("Chip", null, rawProps);
 		const groupContext = useChipGroupContext();
 		const uuid = (0, _mantine_vue_hooks.useId)(props.id);
 		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.checked,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.checked,
 			defaultValue: props.defaultChecked,
 			finalValue: false,
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("update:checked", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const getStyles = useStyles({
 			name: "Chip",
@@ -18245,7 +18532,7 @@ var ChipBase = (0, vue.defineComponent)({
 			const inputType = groupContext ? groupContext.multiple ? "checkbox" : "radio" : props.type;
 			const icon = props.icon ?? slots.icon;
 			const showIcon = checked && icon !== null && icon !== false;
-			const { class: _class, style: _style, onChange: attrsOnChange, value: _attrsValue, ...inputAttrs } = attrs;
+			const { class: _class, style: _style, value: _attrsValue, ...inputAttrs } = attrs;
 			const renderIcon = () => {
 				const iconProps = getStyles("checkIcon");
 				if (icon === void 0) return (0, vue.h)(CheckIcon, iconProps);
@@ -18270,11 +18557,9 @@ var ChipBase = (0, vue.defineComponent)({
 				disabled: props.disabled,
 				value: chipValue,
 				onChange: (event) => {
-					callHandler$5(attrsOnChange, event);
-					if (groupContext) {
-						groupContext.onChange(event);
-						props.onChange?.(event.currentTarget.checked);
-					} else setValue(event.currentTarget.checked);
+					const nextChecked = event.currentTarget.checked;
+					if (groupContext) groupContext.onChange(event);
+					setValue(nextChecked);
 				}
 			}), (0, vue.h)(Box, {
 				component: "label",
@@ -18398,7 +18683,7 @@ var varsResolver$22 = createVarsResolver((_, { radius }, ctx) => ({ root: {
 	"--pill-height": getSize(ctx.size, "pill-height"),
 	"--pill-radius": radius === void 0 ? void 0 : getRadius(radius)
 } }));
-function callHandler$4(handler, event) {
+function callHandler$2(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
 	else handler?.(event);
 }
@@ -18507,12 +18792,12 @@ var PillBase = (0, vue.defineComponent)({
 				onMousedown: (event) => {
 					event.preventDefault();
 					event.stopPropagation();
-					callHandler$4(removeButtonProps.onMousedown ?? removeButtonProps.onMousedown ?? removeButtonProps.onMouseDown, event);
+					callHandler$2(removeButtonProps.onMousedown ?? removeButtonProps.onMousedown ?? removeButtonProps.onMouseDown, event);
 				},
 				onClick: (event) => {
 					event.stopPropagation();
 					props.onRemove?.();
-					callHandler$4(removeButtonProps.onClick, event);
+					callHandler$2(removeButtonProps.onClick, event);
 				}
 			}) : null]);
 		};
@@ -18530,6 +18815,22 @@ var PillsInputField = withBoxProps((0, vue.defineComponent)({
 	name: "PillsInputField",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
+		value: {
+			type: String,
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		type: {
 			type: String,
 			default: "visible"
@@ -18571,8 +18872,18 @@ var PillsInputField = withBoxProps((0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, emit }) {
 		const props = useProps("PillsInputField", null, rawProps);
+		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
+			defaultValue: props.defaultValue,
+			finalValue: "",
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		const context = usePillsInputContext();
 		const inputWrapperContext = useInputWrapperContext();
 		const getStyles = useStyles({
@@ -18594,6 +18905,7 @@ var PillsInputField = withBoxProps((0, vue.defineComponent)({
 					style: attrs.style
 				}),
 				component: "input",
+				value: value.value,
 				ref: (node) => {
 					const input = node?.$el ?? node ?? null;
 					if (context) context.fieldRef.value = input;
@@ -18609,6 +18921,11 @@ var PillsInputField = withBoxProps((0, vue.defineComponent)({
 				"aria-invalid": context?.hasError || void 0,
 				"aria-describedby": inputWrapperContext.describedBy,
 				type: "text",
+				onInput: (event) => {
+					const handler = attrs.onInput;
+					handler?.(event);
+					setValue(event.currentTarget.value);
+				},
 				onMousedown: (event) => {
 					if (!props.pointer) event.stopPropagation();
 				}
@@ -18775,6 +19092,10 @@ var RadioGroup = (0, vue.defineComponent)({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
 		value: {
 			type: String,
 			default: void 0
@@ -18836,13 +19157,17 @@ var RadioGroup = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const name = (0, _mantine_vue_hooks.useId)(props.name);
 		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: "",
-			onChange: (nextValue) => props.onChange?.(String(nextValue ?? ""))
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const handleChange = (eventOrValue) => {
 			if (props.readOnly) return;
@@ -18888,7 +19213,7 @@ function useRadioCardContext() {
 	return (0, vue.inject)(RadioCardContextKey, null);
 }
 var varsResolver$21 = createVarsResolver((_, { radius }) => ({ card: { "--card-radius": getRadius(radius) } }));
-function callHandler$3(handler, event) {
+function callHandler$1(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
 	else handler?.(event);
 }
@@ -18896,10 +19221,22 @@ var RadioCard = withBoxProps((0, vue.defineComponent)({
 	name: "RadioCard",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
 		checked: {
 			type: Boolean,
 			default: void 0
 		},
+		defaultChecked: {
+			type: Boolean,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		withBorder: {
 			type: Boolean,
 			default: true
@@ -18937,8 +19274,23 @@ var RadioCard = withBoxProps((0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: [
+		"update:modelValue",
+		"update:checked",
+		"change"
+	],
+	setup(props, { attrs, slots, emit }) {
 		const groupContext = useRadioGroupContext();
+		const [localChecked, setLocalChecked] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.checked,
+			defaultValue: props.defaultChecked,
+			finalValue: false,
+			onChange: (checked) => {
+				emit("update:modelValue", checked);
+				emit("update:checked", checked);
+				emit("change", checked);
+			}
+		});
 		const getStyles = useStyles({
 			name: "RadioCard",
 			props,
@@ -18951,7 +19303,7 @@ var RadioCard = withBoxProps((0, vue.defineComponent)({
 			vars: props.vars,
 			varsResolver: varsResolver$21
 		});
-		const isChecked = () => typeof props.checked === "boolean" ? props.checked : groupContext?.value === props.value || false;
+		const isChecked = () => groupContext ? groupContext.value === props.value : localChecked.value;
 		(0, vue.provide)(RadioCardContextKey, { get checked() {
 			return isChecked();
 		} });
@@ -18973,8 +19325,9 @@ var RadioCard = withBoxProps((0, vue.defineComponent)({
 				name,
 				"aria-checked": checked,
 				onClick: (event) => {
-					callHandler$3(attrs.onClick, event);
+					callHandler$1(attrs.onClick, event);
 					groupContext?.onChange(props.value || "");
+					setLocalChecked(true);
 				}
 			}, () => slots.default?.());
 		};
@@ -19144,10 +19497,6 @@ var varsResolver$19 = createVarsResolver((theme, { size, radius, color, iconColo
 	}) : void 0,
 	"--radio-icon-size": getSize(size, "radio-icon-size")
 } }));
-function callHandler$2(handler, event) {
-	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
-	else handler?.(event);
-}
 var RadioBase = (0, vue.defineComponent)({
 	name: "Radio",
 	inheritAttrs: false,
@@ -19209,14 +19558,30 @@ var RadioBase = (0, vue.defineComponent)({
 			type: Boolean,
 			default: true
 		},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
 		checked: {
 			type: Boolean,
 			default: void 0
 		},
+		defaultChecked: {
+			type: Boolean,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
 			default: false
 		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
 		variant: {
 			type: String,
 			default: "filled"
@@ -19242,9 +19607,24 @@ var RadioBase = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: [
+		"update:modelValue",
+		"update:checked",
+		"change"
+	],
+	setup(props, { attrs, slots, emit }) {
 		const uuid = (0, _mantine_vue_hooks.useId)(props.id);
 		const groupContext = useRadioGroupContext();
+		const [localChecked, setLocalChecked] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.checked,
+			defaultValue: props.defaultChecked,
+			finalValue: false,
+			onChange: (checked) => {
+				emit("update:modelValue", checked);
+				emit("update:checked", checked);
+				emit("change", checked);
+			}
+		});
 		const getStyles = useStyles({
 			name: "Radio",
 			props,
@@ -19270,7 +19650,7 @@ var RadioBase = (0, vue.defineComponent)({
 			const iconStyles = getStyles("icon");
 			const Icon = props.icon || RadioIcon;
 			const value = String(attrs.value ?? "");
-			const checked = groupContext ? groupContext.value === value : props.checked;
+			const checked = groupContext ? groupContext.value === value : localChecked.value;
 			const disabled = groupContext?.disabled || props.disabled;
 			const size = groupContext?.size ?? props.size;
 			const name = groupContext?.name ?? attrs.name;
@@ -19306,6 +19686,7 @@ var RadioBase = (0, vue.defineComponent)({
 				id,
 				checked,
 				disabled,
+				readonly: props.readOnly,
 				name,
 				type: "radio",
 				"aria-describedby": describedBy,
@@ -19315,8 +19696,12 @@ var RadioBase = (0, vue.defineComponent)({
 				},
 				variant: props.variant,
 				onChange: (event) => {
-					callHandler$2(attrs.onChange, event);
+					if (props.readOnly) {
+						event.currentTarget.checked = Boolean(checked);
+						return;
+					}
 					groupContext?.onChange(event);
+					setLocalChecked(event.currentTarget.checked);
 				}
 			}), slots.icon ? slots.icon(iconStyles) : (0, vue.h)(Icon, iconStyles)]));
 		};
@@ -19340,6 +19725,10 @@ var SwitchGroup = (0, vue.defineComponent)({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: Array,
+			default: void 0
+		},
 		value: {
 			type: Array,
 			default: void 0
@@ -19413,16 +19802,20 @@ var SwitchGroup = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: [],
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
-		const handleChange = (event) => {
+		const handleChange = (eventOrValue) => {
 			if (props.readOnly) return;
-			const itemValue = String(event.currentTarget?.value ?? "");
+			const itemValue = typeof eventOrValue === "string" ? eventOrValue : String(eventOrValue.currentTarget?.value ?? "");
 			const isCurrentlySelected = value.value.includes(itemValue);
 			if (!isCurrentlySelected && props.maxSelectedValues && value.value.length >= props.maxSelectedValues) return;
 			setValue(isCurrentlySelected ? value.value.filter((item) => item !== itemValue) : [...value.value, itemValue]);
@@ -19488,10 +19881,6 @@ var varsResolver$18 = createVarsResolver((theme, { radius, color, size }) => ({
 	"--switch-track-label-padding": getSize(size, "switch-track-label-padding"),
 	"--switch-color": color ? getThemeColor(color, theme) : void 0
 } }));
-function callHandler$1(handler, event) {
-	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
-	else handler?.(event);
-}
 var SwitchBase = (0, vue.defineComponent)({
 	name: "Switch",
 	inheritAttrs: false,
@@ -19553,6 +19942,10 @@ var SwitchBase = (0, vue.defineComponent)({
 			type: Boolean,
 			default: true
 		},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
 		checked: {
 			type: Boolean,
 			default: void 0
@@ -19569,6 +19962,10 @@ var SwitchBase = (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
 		variant: {
 			type: String,
 			default: void 0
@@ -19594,16 +19991,22 @@ var SwitchBase = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: [
+		"update:modelValue",
+		"update:checked",
+		"change"
+	],
+	setup(props, { attrs, slots, emit }) {
 		const uuid = (0, _mantine_vue_hooks.useId)(props.id);
 		const groupContext = useSwitchGroupContext();
-		const internalChecked = (0, vue.ref)(false);
 		const [checked, setChecked] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.checked,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.checked,
 			defaultValue: props.defaultChecked,
 			finalValue: false,
 			onChange: (value) => {
-				internalChecked.value = value;
+				emit("update:modelValue", value);
+				emit("update:checked", value);
+				emit("change", value);
 			}
 		});
 		const getStyles = useStyles({
@@ -19664,15 +20067,19 @@ var SwitchBase = (0, vue.defineComponent)({
 				...getStyles("input"),
 				disabled,
 				checked: currentChecked,
+				readonly: props.readOnly,
 				id,
 				type: "checkbox",
 				role: "switch",
 				"aria-describedby": describedBy,
 				onChange: (event) => {
-					callHandler$1(attrs.onChange, event);
-					props.onChange?.(event);
+					if (props.readOnly) {
+						event.currentTarget.checked = currentChecked;
+						return;
+					}
+					const nextChecked = event.currentTarget.checked;
 					if (groupContext) groupContext.onChange(event);
-					else setChecked(event.currentTarget.checked);
+					setChecked(nextChecked);
 				}
 			}), (0, vue.h)(Box, {
 				component: "span",
@@ -21519,6 +21926,10 @@ var Slider = withBoxProps((0, vue.defineComponent)({
 			type: Number,
 			default: void 0
 		},
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
 		value: {
 			type: Number,
 			default: void 0
@@ -21634,16 +22045,23 @@ var Slider = withBoxProps((0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, slots, emit }) {
 		const props = useProps("Slider", defaultProps$6, rawProps);
 		const direction = useDirection();
 		const hovered = (0, vue.ref)(false);
 		const thumb = (0, vue.ref)(null);
 		const [current, setCurrent] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value === void 0 ? void 0 : clamp$1(props.value, props.min, props.max),
+			value: () => {
+				const controlledValue = props.modelValue !== void 0 ? props.modelValue : props.value;
+				return controlledValue === void 0 ? void 0 : clamp$1(controlledValue, props.min, props.max);
+			},
 			defaultValue: props.defaultValue === void 0 ? void 0 : clamp$1(props.defaultValue, props.min, props.max),
 			finalValue: clamp$1(0, props.min, props.max),
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const valueRef = (0, vue.ref)(current.value);
 		(0, vue.watch)(current, (value) => {
@@ -21781,6 +22199,10 @@ var RangeSlider = (0, vue.defineComponent)({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: Array,
+			default: void 0
+		},
 		value: {
 			type: Array,
 			default: void 0
@@ -21927,17 +22349,21 @@ var RangeSlider = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, slots, emit }) {
 		const props = useProps("RangeSlider", defaults$5, rawProps);
 		const direction = useDirection();
 		const activeThumb = (0, vue.ref)(0);
 		const focused = (0, vue.ref)(0);
 		const hovered = (0, vue.ref)(false);
 		const [current, setCurrent] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: [props.min, props.max],
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const valueRef = (0, vue.ref)([...current.value]);
 		(0, vue.watch)(current, (value) => valueRef.value = [...value]);
@@ -22104,9 +22530,17 @@ var ColorSlider = (0, vue.defineComponent)({
 	name: "ColorSlider",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
 		value: {
 			type: Number,
-			required: true
+			default: void 0
+		},
+		defaultValue: {
+			type: Number,
+			default: void 0
 		},
 		onChange: {
 			type: Function,
@@ -22165,11 +22599,21 @@ var ColorSlider = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const ctx = useColorPickerContext();
 		const theme = useMantineTheme();
+		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
+			defaultValue: props.defaultValue,
+			finalValue: 0,
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		const position = (0, vue.ref)({
-			x: props.value / props.maxValue,
+			x: value.value / props.maxValue,
 			y: 0
 		});
 		const positionRef = (0, vue.ref)(position.value);
@@ -22194,7 +22638,7 @@ var ColorSlider = (0, vue.defineComponent)({
 				x,
 				y: 0
 			};
-			props.onChange?.(changeValue(x));
+			setValue(changeValue(x));
 		}, {
 			onScrubStart: props.onScrubStart,
 			onScrubEnd: () => {
@@ -22202,7 +22646,7 @@ var ColorSlider = (0, vue.defineComponent)({
 				props.onScrubEnd?.();
 			}
 		});
-		(0, vue.watch)(() => props.value, (value) => position.value = {
+		(0, vue.watch)(value, (value) => position.value = {
 			x: value / props.maxValue,
 			y: 0
 		});
@@ -22213,7 +22657,7 @@ var ColorSlider = (0, vue.defineComponent)({
 				x: position.value.x + (event.key === "ArrowRight" ? .05 : -.05),
 				y: 0
 			}).x);
-			props.onChange?.(value);
+			setValue(value);
 			props.onChangeEnd?.(value);
 		};
 		return () => (0, vue.h)(Box, {
@@ -22224,7 +22668,7 @@ var ColorSlider = (0, vue.defineComponent)({
 				style: attrs.style
 			}),
 			role: "slider",
-			"aria-valuenow": props.value,
+			"aria-valuenow": value.value,
 			"aria-valuemax": props.maxValue,
 			"aria-valuemin": 0,
 			tabindex: props.focusable ? 0 : -1,
@@ -22459,9 +22903,17 @@ var AlphaSlider = (0, vue.defineComponent)({
 	name: "AlphaSlider",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
 		value: {
 			type: Number,
-			required: true
+			default: void 0
+		},
+		defaultValue: {
+			type: Number,
+			default: void 0
 		},
 		color: {
 			type: String,
@@ -22492,7 +22944,8 @@ var AlphaSlider = (0, vue.defineComponent)({
 			default: true
 		}
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		return () => (0, vue.h)(ColorSlider, {
 			...attrs,
 			...props,
@@ -22500,7 +22953,8 @@ var AlphaSlider = (0, vue.defineComponent)({
 			maxValue: 1,
 			round: false,
 			"data-alpha": "",
-			onChange: (value) => props.onChange?.(round(value, 2)),
+			"onUpdate:modelValue": (value) => emit("update:modelValue", round(value, 2)),
+			onChange: (value) => emit("change", round(value, 2)),
 			onChangeEnd: (value) => props.onChangeEnd?.(round(value, 2)),
 			overlays: [
 				{
@@ -22520,9 +22974,17 @@ var HueSlider = (0, vue.defineComponent)({
 	name: "HueSlider",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
 		value: {
 			type: Number,
-			required: true
+			default: void 0
+		},
+		defaultValue: {
+			type: Number,
+			default: void 0
 		},
 		onChange: {
 			type: Function,
@@ -22549,13 +23011,16 @@ var HueSlider = (0, vue.defineComponent)({
 			default: true
 		}
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		return () => (0, vue.h)(ColorSlider, {
 			...attrs,
 			...props,
+			"onUpdate:modelValue": (value) => emit("update:modelValue", value),
+			onChange: (value) => emit("change", value),
 			__staticSelector: "HueSlider",
 			maxValue: 360,
-			thumbColor: `hsl(${props.value}, 100%, 50%)`,
+			thumbColor: `hsl(${props.modelValue ?? props.value ?? props.defaultValue ?? 0}, 100%, 50%)`,
 			round: true,
 			"data-hue": "",
 			overlays: [{ backgroundImage: "linear-gradient(to right,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(170,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%))" }, { boxShadow: `rgba(0,0,0,.1) 0 0 0 ${rem(1)} inset, rgba(0,0,0,.15) 0 0 ${rem(4)} inset` }]
@@ -22753,6 +23218,10 @@ var ColorPicker = (0, vue.defineComponent)({
 	name: "ColorPicker",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
 		value: {
 			type: String,
 			default: void 0
@@ -22846,13 +23315,17 @@ var ColorPicker = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, emit }) {
 		const props = useProps("ColorPicker", defaults$4, rawProps);
 		const [current, setCurrent, controlled] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: "#FFFFFF",
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const parsed = (0, vue.ref)(parseColor(current.value));
 		let scrubbing = false;
@@ -23616,6 +24089,22 @@ var MaskInput = (0, vue.defineComponent)({
 			type: [String, Array],
 			required: true
 		},
+		modelValue: {
+			type: String,
+			default: void 0
+		},
+		value: {
+			type: String,
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		tokens: {
 			type: Object,
 			default: void 0
@@ -23665,7 +24154,8 @@ var MaskInput = (0, vue.defineComponent)({
 			default: void 0
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const input = (0, vue.ref)(null);
 		const processed = (0, vue.ref)("");
 		const rawValue = (0, vue.ref)("");
@@ -23726,6 +24216,8 @@ var MaskInput = (0, vue.defineComponent)({
 			}
 			const complete = isComplete(reprocessed, resolved.slots);
 			if (notify) {
+				emit("update:modelValue", nextDisplay);
+				emit("change", nextDisplay);
 				props.onChangeRaw?.(resolvedRaw, nextDisplay);
 				if (complete && !wasComplete.value) props.onComplete?.(nextDisplay, resolvedRaw);
 			}
@@ -23738,11 +24230,13 @@ var MaskInput = (0, vue.defineComponent)({
 			const resolved = resolveMaskOptions(options(), "");
 			displayValue.value = props.alwaysShowMask ? buildDisplayValue("", resolved.slots, resolved.slotChar, true) : "";
 			if (input.value) input.value.value = displayValue.value;
+			emit("update:modelValue", "");
+			emit("change", "");
 			props.onChangeRaw?.("", "");
 		};
 		(0, _mantine_vue_hooks.assignRef)(props.resetRef, reset);
 		(0, vue.watch)(() => props.resetRef, (value) => (0, _mantine_vue_hooks.assignRef)(value, reset));
-		(0, vue.watch)(() => attrs.value, (value) => {
+		(0, vue.watch)(() => props.modelValue !== void 0 ? props.modelValue : props.value, (value) => {
 			if (input.value && value !== void 0 && String(value) !== displayValue.value) commit(String(value), void 0, false, String(value));
 		});
 		(0, vue.onBeforeUnmount)(() => (0, _mantine_vue_hooks.assignRef)(props.resetRef, null));
@@ -23751,7 +24245,7 @@ var MaskInput = (0, vue.defineComponent)({
 			input.value = element instanceof HTMLInputElement ? element : null;
 			(0, _mantine_vue_hooks.assignRef)(attrs.rootRef, root?.$el ?? root ?? null);
 			if (!input.value) return;
-			const initial = attrs.value ?? attrs.defaultValue ?? input.value.value;
+			const initial = props.modelValue ?? props.value ?? props.defaultValue ?? input.value.value;
 			if (initial) commit(String(initial), void 0, false, String(initial));
 			else if (props.alwaysShowMask) {
 				const resolved = resolveMaskOptions(options(), "");
@@ -23862,6 +24356,7 @@ var MaskInput = (0, vue.defineComponent)({
 				type: forwarded.type ?? "text",
 				__staticSelector: "MaskInput",
 				__stylesApiProps: attrs,
+				value: displayValue.value,
 				rootRef: attach,
 				onInput: handleInput,
 				onFocus: handleFocus,
@@ -28351,19 +28846,44 @@ var MenuDivider = (0, vue.defineComponent)({
 var MenuSearch = (0, vue.defineComponent)({
 	name: "MenuSearch",
 	inheritAttrs: false,
-	props: { clearSearchOnClose: {
-		type: Boolean,
-		default: true
-	} },
-	setup(props, { attrs }) {
+	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
+		value: {
+			type: String,
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
+		clearSearchOnClose: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const ctx = useMenuContext();
+		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
+			defaultValue: props.defaultValue,
+			finalValue: "",
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		const unregister = ctx.registerSearch();
 		ctx.setSearchExitClear(props.clearSearchOnClose ? () => {
 			clearActive(document.querySelector("[data-menu-dropdown]"));
-			attrs.onChange?.({
-				currentTarget: { value: "" },
-				target: { value: "" }
-			});
+			setValue("");
 		} : null);
 		(0, vue.onUnmounted)(() => {
 			unregister();
@@ -28387,6 +28907,7 @@ var MenuSearch = (0, vue.defineComponent)({
 			const inputStyles = attrs.styles;
 			return (0, vue.h)(Input, {
 				...forwarded,
+				value: value.value,
 				type: "search",
 				"data-autofocus": "",
 				"data-mantine-stop-propagation": "",
@@ -28404,11 +28925,7 @@ var MenuSearch = (0, vue.defineComponent)({
 				},
 				onInput: (event) => {
 					call$1(attrs.onInput, event);
-					call$1(attrs.onChange, event);
-					clearActive(event.currentTarget.closest("[data-menu-dropdown]"));
-				},
-				onChange: (event) => {
-					call$1(attrs.onChange, event);
+					setValue(event.currentTarget.value);
 					clearActive(event.currentTarget.closest("[data-menu-dropdown]"));
 				},
 				onKeydown: (event) => {
@@ -29809,6 +30326,18 @@ var ComboboxSearch = (0, vue.defineComponent)({
 	name: "ComboboxSearch",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
+		value: {
+			type: String,
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
+		},
 		withAriaAttributes: {
 			type: Boolean,
 			default: true
@@ -29819,7 +30348,8 @@ var ComboboxSearch = (0, vue.defineComponent)({
 		},
 		size: String
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const ctx = useComboboxContext();
 		const targetProps = useComboboxTargetProps({
 			targetType: "input",
@@ -29832,6 +30362,11 @@ var ComboboxSearch = (0, vue.defineComponent)({
 		});
 		return () => (0, vue.h)(Input, {
 			...attrs,
+			modelValue: props.modelValue,
+			value: props.value,
+			defaultValue: props.defaultValue,
+			"onUpdate:modelValue": (value) => emit("update:modelValue", value),
+			onChange: (value) => emit("change", value),
 			...targetProps,
 			ref: (node) => {
 				const element = node?.$el?.querySelector?.("input") ?? node?.$el ?? node;
@@ -30370,6 +30905,10 @@ var ComboboxPopoverBase = (0, vue.defineComponent)({
 			type: Boolean,
 			default: void 0
 		},
+		modelValue: {
+			type: null,
+			default: void 0
+		},
 		value: {
 			type: null,
 			default: void 0
@@ -30507,7 +31046,8 @@ var ComboboxPopoverBase = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, slots, emit }) {
 		const props = new Proxy(rawProps, { get(target, key) {
 			const value = target[key];
 			return value === void 0 && key in defaultProps$2 ? defaultProps$2[key] : value;
@@ -30515,10 +31055,13 @@ var ComboboxPopoverBase = (0, vue.defineComponent)({
 		const parsedData = (0, vue.computed)(() => getParsedComboboxData(props.data));
 		const optionsLockup = (0, vue.computed)(() => getOptionsLockup(parsedData.value));
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: props.multiple ? [] : null,
-			onChange: (val) => props.onChange?.(val)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const [_searchValue, setSearchValue] = (0, _mantine_vue_hooks.useUncontrolled)({
 			value: () => props.searchValue,
@@ -31269,7 +31812,11 @@ var Select = (0, vue.defineComponent)({
 			default: void 0
 		}
 	},
-	emits: ["update:modelValue", "update:searchValue"],
+	emits: [
+		"update:modelValue",
+		"update:searchValue",
+		"change"
+	],
 	setup(props, { attrs, emit, slots }) {
 		const parsed = (0, vue.computed)(() => getParsedComboboxData(props.data));
 		const lockup = (0, vue.computed)(() => getOptionsLockup(parsed.value));
@@ -31289,8 +31836,8 @@ var Select = (0, vue.defineComponent)({
 		};
 		const changeValue = (value, option) => {
 			if (!controlled()) internal.value = value;
-			props.onChange?.(value, option);
 			emit("update:modelValue", value);
+			emit("change", value, option);
 		};
 		const combobox = useCombobox({
 			opened: () => props.dropdownOpened,
@@ -31478,15 +32025,18 @@ var Autocomplete = (0, vue.defineComponent)({
 			default: true
 		}
 	},
-	emits: { "update:modelValue": (value) => typeof value === "string" },
+	emits: {
+		"update:modelValue": (value) => typeof value === "string",
+		change: (value) => typeof value === "string"
+	},
 	setup(props, { attrs, emit, slots }) {
 		const internal = (0, vue.ref)(props.defaultValue);
 		const current = () => props.modelValue ?? props.value ?? internal.value;
 		const controlled = () => props.modelValue !== void 0 || props.value !== void 0;
 		const change = (value) => {
 			if (!controlled()) internal.value = value;
-			props.onChange?.(value);
 			emit("update:modelValue", value);
+			emit("change", value);
 			combobox.resetSelectedOption();
 		};
 		const parsed = (0, vue.computed)(() => getParsedComboboxData(props.data));
@@ -31673,7 +32223,11 @@ var MultiSelect = (0, vue.defineComponent)({
 		},
 		selectFirstOptionOnDropdownOpen: Boolean
 	},
-	emits: ["update:modelValue", "update:searchValue"],
+	emits: [
+		"update:modelValue",
+		"update:searchValue",
+		"change"
+	],
 	setup(props, { attrs, emit, slots }) {
 		const parsed = (0, vue.computed)(() => getParsedComboboxData(props.data));
 		const lockup = (0, vue.computed)(() => getOptionsLockup(parsed.value));
@@ -31691,8 +32245,8 @@ var MultiSelect = (0, vue.defineComponent)({
 		};
 		const setValue = (value) => {
 			if (!controlled()) internal.value = value;
-			props.onChange?.(value);
 			emit("update:modelValue", value);
+			emit("change", value);
 		};
 		const combobox = useCombobox({
 			opened: () => props.dropdownOpened,
@@ -31932,7 +32486,11 @@ var TagsInput = (0, vue.defineComponent)({
 		},
 		selectFirstOptionOnDropdownOpen: Boolean
 	},
-	emits: ["update:modelValue", "update:searchValue"],
+	emits: [
+		"update:modelValue",
+		"update:searchValue",
+		"change"
+	],
 	setup(props, { attrs, emit, slots }) {
 		const parsed = (0, vue.computed)(() => getParsedComboboxData(props.data));
 		const lockup = (0, vue.computed)(() => getOptionsLockup(parsed.value));
@@ -31949,8 +32507,8 @@ var TagsInput = (0, vue.defineComponent)({
 		};
 		const setValue = (value) => {
 			if (!controlled()) internal.value = value;
-			props.onChange?.(value);
 			emit("update:modelValue", value);
+			emit("change", value);
 		};
 		const combobox = useCombobox({
 			opened: () => props.dropdownOpened,
@@ -32224,7 +32782,7 @@ var ColorInput = (0, vue.defineComponent)({
 			default: 7
 		}
 	},
-	emits: ["update:modelValue"],
+	emits: ["update:modelValue", "change"],
 	setup(props, { attrs, emit, slots }) {
 		const internal = (0, vue.ref)(props.defaultValue);
 		const current = () => props.modelValue ?? props.value ?? internal.value;
@@ -32233,8 +32791,8 @@ var ColorInput = (0, vue.defineComponent)({
 		const lastValid = (0, vue.ref)(isColorValid(current()) ? current() : "");
 		const setValue = (value, end = false) => {
 			if (!controlled()) internal.value = value;
-			props.onChange?.(value);
 			emit("update:modelValue", value);
+			emit("change", value);
 			if (isColorValid(value)) {
 				lastValid.value = value;
 				if (end) props.onChangeEnd?.(convertHsvaTo(props.format, parseColor(value)));
@@ -32642,15 +33200,19 @@ var TreeSelect = (0, vue.defineComponent)({
 		},
 		chevronAriaLabels: Object
 	},
-	emits: ["update:modelValue", "update:searchValue"],
+	emits: [
+		"update:modelValue",
+		"update:searchValue",
+		"change"
+	],
 	setup(props, { attrs, emit, slots }) {
 		const isMulti = () => props.mode !== "single";
 		const internal = (0, vue.ref)(props.defaultValue !== void 0 ? props.defaultValue : isMulti() ? [] : null);
-		const current = () => props.modelValue ?? props.value ?? internal.value;
+		const current = () => props.modelValue !== void 0 ? props.modelValue : props.value !== void 0 ? props.value : internal.value;
 		const setValue = (value) => {
 			if (props.modelValue === void 0 && props.value === void 0) internal.value = value;
-			props.onChange?.(value);
 			emit("update:modelValue", value);
+			emit("change", value);
 		};
 		const expandedInternal = (0, vue.ref)(props.defaultExpandAll ? allValues(props.data) : props.defaultExpandedValues ?? []);
 		const expanded = () => props.expandedValues ?? expandedInternal.value;
@@ -33069,11 +33631,15 @@ var Cascader = (0, vue.defineComponent)({
 		styles: [Object, Function],
 		unstyled: Boolean
 	},
-	emits: ["update:modelValue", "update:searchValue"],
+	emits: [
+		"update:modelValue",
+		"update:searchValue",
+		"change"
+	],
 	setup(props, { attrs, emit, slots }) {
 		const id = (0, _mantine_vue_hooks.useId)(attrs.id);
 		const internalValue = (0, vue.ref)(props.defaultValue ?? null);
-		const currentValue = (0, vue.computed)(() => props.modelValue ?? props.value ?? internalValue.value);
+		const currentValue = (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value !== void 0 ? props.value : internalValue.value);
 		const pathOptions = (0, vue.computed)(() => getCascaderPathOptions(props.data, currentValue.value));
 		const separatorString = (0, vue.computed)(() => typeof props.separator === "string" || typeof props.separator === "number" ? String(props.separator) : "/");
 		const separatorContent = () => resolveNode(props.separator, slots.separator) ?? "/";
@@ -33101,8 +33667,9 @@ var Cascader = (0, vue.defineComponent)({
 		};
 		const setValue = (value) => {
 			if (props.modelValue === void 0 && props.value === void 0) internalValue.value = value;
-			props.onChange?.(value, getCascaderPathOptions(props.data, value));
+			const selectedOptions = getCascaderPathOptions(props.data, value);
 			emit("update:modelValue", value);
+			emit("change", value, selectedOptions);
 		};
 		const resetActivePath = () => {
 			activePath.value = currentValue.value ? [...currentValue.value] : [];