@mantine-vue/core 2.3.1 → 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;
@@ -5108,7 +5116,7 @@ var varsResolver$70 = createVarsResolver((theme, { radius, color, gradient, vari
 		"--button-hover-color": color || variant ? colors.hoverColor : void 0
 	} };
 });
-function renderContent$5(content) {
+function renderContent$4(content) {
 	return typeof content === "function" ? content() : content;
 }
 var ButtonBase = (0, vue.defineComponent)({
@@ -5237,7 +5245,7 @@ var ButtonBase = (0, vue.defineComponent)({
 			component: "span",
 			...getStyles("section"),
 			mod: { position }
-		}, () => renderContent$5(content)) : null;
+		}, () => renderContent$4(content)) : null;
 		return () => {
 			const leftSection = resolveNode(props.leftSection, slots.leftSection);
 			const rightSection = resolveNode(props.rightSection, slots.rightSection);
@@ -8017,13 +8025,13 @@ var ScrollAreaViewport = withBoxProps((0, vue.defineComponent)({
 	}
 }));
 var ScrollArea_module_default = {
-	root: "_root_kwra0_1",
-	content: "_content_kwra0_7",
-	viewport: "_viewport_kwra0_12",
-	viewportInner: "_viewportInner_kwra0_59",
-	scrollbar: "_scrollbar_kwra0_64",
-	thumb: "_thumb_kwra0_81",
-	corner: "_corner_kwra0_144"
+	root: "_root_1sy9q_1",
+	content: "_content_1sy9q_7",
+	viewport: "_viewport_1sy9q_12",
+	viewportInner: "_viewportInner_1sy9q_71",
+	scrollbar: "_scrollbar_1sy9q_76",
+	thumb: "_thumb_1sy9q_93",
+	corner: "_corner_1sy9q_182"
 };
 //#endregion
 //#region src/components/ScrollArea/ScrollArea.ts
@@ -8099,6 +8107,10 @@ var ScrollAreaBase = (0, vue.defineComponent)({
 			type: Object,
 			default: void 0
 		},
+		verticalScrollbarPosition: {
+			type: String,
+			default: void 0
+		},
 		classNames: {
 			type: [Object, Function],
 			default: void 0
@@ -8257,11 +8269,13 @@ var ScrollAreaBase = (0, vue.defineComponent)({
 				},
 				"data-offset-scrollbars": toOffsetScrollbars(props.offsetScrollbars),
 				"data-scrollbars": props.scrollbars || void 0,
+				"data-vertical-scrollbar-position": props.verticalScrollbarPosition,
 				onScroll: handleScroll
 			}, () => slots.default?.()),
 			(props.scrollbars === "xy" || props.scrollbars === "x") && (0, vue.h)(ScrollAreaScrollbar, {
 				...getStyles("scrollbar"),
 				orientation: "horizontal",
+				"data-vertical-scrollbar-position": props.verticalScrollbarPosition,
 				"data-hidden": props.type === "never" ? true : void 0,
 				"data-state": getScrollbarState("horizontal"),
 				forceMount: true
@@ -8269,12 +8283,14 @@ var ScrollAreaBase = (0, vue.defineComponent)({
 			(props.scrollbars === "xy" || props.scrollbars === "y") && (0, vue.h)(ScrollAreaScrollbar, {
 				...getStyles("scrollbar"),
 				orientation: "vertical",
+				"data-vertical-scrollbar-position": props.verticalScrollbarPosition,
 				"data-hidden": props.type === "never" ? true : void 0,
 				"data-state": getScrollbarState("vertical"),
 				forceMount: true
 			}, () => (0, vue.h)(ScrollAreaThumb, getStyles("thumb"))),
 			(0, vue.h)(ScrollAreaCorner, {
 				...getStyles("corner"),
+				"data-vertical-scrollbar-position": props.verticalScrollbarPosition,
 				"data-hidden": props.type === "never" ? true : void 0
 			})
 		]);
@@ -8595,6 +8611,7 @@ var defaultProps$35 = {
 	multiple: false,
 	loop: true,
 	disableChevronRotation: false,
+	disableCollapse: false,
 	chevronPosition: "right",
 	variant: "default",
 	chevronSize: "auto",
@@ -8606,7 +8623,7 @@ function getSafeId$2(prefix) {
 		return `${prefix}-${value}`;
 	};
 }
-function renderContent$4(content) {
+function renderContent$3(content) {
 	return typeof content === "function" ? content() : content;
 }
 var varsResolver$57 = createVarsResolver((_, { transitionDuration, chevronSize, radius }) => ({ root: {
@@ -8617,6 +8634,7 @@ var varsResolver$57 = createVarsResolver((_, { transitionDuration, chevronSize,
 var AccordionBase = (0, vue.defineComponent)({
 	name: "Accordion",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		multiple: {
 			type: Boolean,
@@ -8650,6 +8668,10 @@ var AccordionBase = (0, vue.defineComponent)({
 			type: Boolean,
 			default: void 0
 		},
+		disableCollapse: {
+			type: Boolean,
+			default: void 0
+		},
 		chevronPosition: {
 			type: String,
 			default: void 0
@@ -8729,6 +8751,7 @@ var AccordionBase = (0, vue.defineComponent)({
 		const isItemActive = (itemValue) => Array.isArray(currentValue.value) ? currentValue.value.includes(itemValue) : itemValue === currentValue.value;
 		const handleItemChange = (itemValue) => {
 			const value = currentValue.value;
+			if (!Array.isArray(value) && props.disableCollapse && itemValue === value) return;
 			setCurrentValue(Array.isArray(value) ? value.includes(itemValue) ? value.filter((selectedValue) => selectedValue !== itemValue) : [...value, itemValue] : itemValue === value ? null : itemValue);
 		};
 		provideAccordionContext((0, vue.reactive)({
@@ -8748,7 +8771,8 @@ var AccordionBase = (0, vue.defineComponent)({
 				return props.order;
 			},
 			get chevron() {
-				return props.chevron === null ? null : props.chevron ?? (() => (0, vue.h)(AccordionChevron, { size: props.chevronIconSize }));
+				if (props.chevron === null) return null;
+				return props.chevron ?? slots.chevron ?? (() => (0, vue.h)(AccordionChevron, { size: props.chevronIconSize }));
 			},
 			onChange: handleItemChange,
 			isItemActive,
@@ -8778,7 +8802,7 @@ var AccordionBase = (0, vue.defineComponent)({
 			id: uid.value,
 			variant: props.variant,
 			"data-accordion": true
-		}, () => renderContent$4(slots.default));
+		}, () => renderContent$3(slots.default));
 	}
 });
 var Accordion = Object.assign(AccordionBase, {
@@ -8806,12 +8830,10 @@ var varsResolver$56 = createVarsResolver((theme, { controlSize, edgeGradientColo
 	"--scroller-control-size": controlSize === void 0 ? void 0 : rem(controlSize),
 	"--scroller-background-color": edgeGradientColor ? getThemeColor(edgeGradientColor, theme) : void 0
 } }));
-function renderContent$3(content) {
-	return typeof content === "function" ? content() : content;
-}
 var Scroller = withBoxProps((0, vue.defineComponent)({
 	name: "Scroller",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		scrollAmount: {
 			type: Number,
@@ -8916,7 +8938,7 @@ var Scroller = withBoxProps((0, vue.defineComponent)({
 					"data-hidden": !showStart || void 0,
 					"aria-label": "Scroll left",
 					tabindex: showStart ? 0 : -1
-				}, () => renderContent$3(props.startControlIcon) || (0, vue.h)(AccordionChevron, getStyles("chevron"))),
+				}, () => resolveNode(props.startControlIcon, slots.startControlIcon) || (0, vue.h)(AccordionChevron, getStyles("chevron"))),
 				(0, vue.h)("div", {
 					...getStyles("container"),
 					ref: scroller.ref,
@@ -8932,7 +8954,7 @@ var Scroller = withBoxProps((0, vue.defineComponent)({
 					"data-hidden": !showEnd || void 0,
 					"aria-label": "Scroll right",
 					tabindex: showEnd ? 0 : -1
-				}, () => renderContent$3(props.endControlIcon) || (0, vue.h)(AccordionChevron, getStyles("chevron")))
+				}, () => resolveNode(props.endControlIcon, slots.endControlIcon) || (0, vue.h)(AccordionChevron, getStyles("chevron")))
 			]);
 		};
 	}
@@ -9911,8 +9933,9 @@ function getDigitParts({ value, decimalScale, fixedDecimalScale }) {
 	const dotIdx = str.indexOf(".");
 	const intStr = dotIdx >= 0 ? str.slice(0, dotIdx) : str;
 	const fracStr = dotIdx >= 0 ? str.slice(dotIdx + 1) : "";
+	const roundedToZero = !/[1-9]/.test(str);
 	return {
-		negative: value < 0,
+		negative: value < 0 && !roundedToZero,
 		intDigits: intStr.split(""),
 		fracDigits: fracStr ? fracStr.split("") : [],
 		hasDecimal: dotIdx >= 0
@@ -10258,11 +10281,12 @@ Object.assign(RollingNumber, {
 //#region src/components/Timeline/Timeline.context.ts
 var [provideTimelineContext, useTimelineContext] = createSafeContext("Timeline component was not found in tree");
 var Timeline_module_default = {
-	root: "_root_x5q16_1",
-	itemTitle: "_itemTitle_x5q16_17",
-	item: "_item_x5q16_17",
-	itemBullet: "_itemBullet_x5q16_84",
-	itemBody: "_itemBody_x5q16_139"
+	root: "_root_1p5xp_1",
+	itemTitle: "_itemTitle_1p5xp_19",
+	item: "_item_1p5xp_19",
+	itemBullet: "_itemBullet_1p5xp_96",
+	itemBody: "_itemBody_1p5xp_159",
+	itemOpposite: "_itemOpposite_1p5xp_199"
 };
 //#endregion
 //#region src/components/Timeline/TimelineItem/TimelineItem.ts
@@ -10299,6 +10323,14 @@ var TimelineItem = withBoxProps((0, vue.defineComponent)({
 			type: null,
 			default: void 0
 		},
+		opposite: {
+			type: null,
+			default: void 0
+		},
+		alternate: {
+			type: Boolean,
+			default: false
+		},
 		radius: {
 			type: [String, Number],
 			default: void 0
@@ -10349,6 +10381,7 @@ var TimelineItem = withBoxProps((0, vue.defineComponent)({
 			const lineActive = props.lineActive ?? props.__lineActive;
 			const bullet = resolveNode(props.bullet, slots.bullet);
 			const title = resolveNode(props.title, slots.title);
+			const opposite = resolveNode(props.opposite, slots.opposite);
 			const stylesApiProps = {
 				className: props.className ?? attrs.class,
 				props
@@ -10357,7 +10390,8 @@ var TimelineItem = withBoxProps((0, vue.defineComponent)({
 				...attrs,
 				mod: [{
 					lineActive,
-					active
+					active,
+					alternate: props.alternate
 				}, props.mod],
 				...ctx.getStyles("item", {
 					...stylesApiProps,
@@ -10369,14 +10403,18 @@ var TimelineItem = withBoxProps((0, vue.defineComponent)({
 						...attrs.style
 					}
 				})
-			}, () => [(0, vue.h)(Box, {
-				...ctx.getStyles("itemBullet", { props }),
-				mod: {
-					withChild: hasNode(bullet),
-					align: props.__align,
-					active
-				}
-			}, () => bullet), (0, vue.h)("div", ctx.getStyles("itemBody", { props }), [hasNode(title) ? (0, vue.h)("div", ctx.getStyles("itemTitle", { props }), title) : null, (0, vue.h)("div", ctx.getStyles("itemContent", { props }), slots.default?.())])]);
+			}, () => [
+				(0, vue.h)(Box, {
+					...ctx.getStyles("itemBullet", { props }),
+					mod: {
+						withChild: hasNode(bullet),
+						align: props.__align,
+						active
+					}
+				}, () => bullet),
+				hasNode(opposite) ? (0, vue.h)("div", ctx.getStyles("itemOpposite", { props }), opposite) : null,
+				(0, vue.h)("div", ctx.getStyles("itemBody", { props }), [hasNode(title) ? (0, vue.h)("div", ctx.getStyles("itemTitle", { props }), title) : null, (0, vue.h)("div", ctx.getStyles("itemContent", { props }), slots.default?.())])
+			]);
 		};
 	}
 }));
@@ -10472,6 +10510,10 @@ var TimelineBase = (0, vue.defineComponent)({
 		provideTimelineContext({ getStyles });
 		return () => {
 			const children = (slots.default?.() ?? []).filter(Boolean);
+			const hasOpposite = children.some((item) => {
+				const childSlots = item.children;
+				return item.props?.opposite != null || childSlots?.opposite != null;
+			});
 			const active = props.active ?? defaultProps$28.active;
 			const items = children.map((item, index) => (0, vue.cloneVNode)(item, {
 				unstyled: props.unstyled,
@@ -10481,7 +10523,10 @@ var TimelineBase = (0, vue.defineComponent)({
 			}, true));
 			return (0, vue.h)(Box, {
 				...attrs,
-				mod: [{ align: props.align }, props.mod],
+				mod: [{
+					align: props.align,
+					opposite: hasOpposite
+				}, props.mod],
 				...getStyles("root", {
 					className: attrs.class,
 					style: attrs.style
@@ -11086,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,
@@ -11127,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 = "";
@@ -11152,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,
@@ -11796,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
@@ -11965,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,
@@ -12035,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,
@@ -12090,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"
@@ -12295,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,
@@ -12323,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,
@@ -12386,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
@@ -12507,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 = () => {
@@ -12973,6 +13109,14 @@ var NumberInput = (0, vue.defineComponent)({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: [
+				String,
+				Number,
+				BigInt
+			],
+			default: void 0
+		},
 		value: {
 			type: [
 				String,
@@ -13162,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",
@@ -13567,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
@@ -13672,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);
@@ -13692,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);
@@ -13831,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();
@@ -13997,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
@@ -14034,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, {
@@ -14058,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,
@@ -14108,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);
 }
@@ -14261,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);
 				}
 			}, () => [
@@ -14830,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
@@ -14911,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);
@@ -14920,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",
@@ -15260,6 +15428,14 @@ var SegmentedControl = (0, vue.defineComponent)({
 			type: Array,
 			required: true
 		},
+		modelValue: {
+			type: [
+				String,
+				Number,
+				Boolean
+			],
+			default: void 0
+		},
 		value: {
 			type: [
 				String,
@@ -15353,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)();
@@ -15361,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",
@@ -16265,7 +16445,6 @@ var Tabs_module_default = {
 var VALUE_ERROR = "Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value";
 var defaultProps$13 = {
 	keepMounted: true,
-	keepMountedMode: "activity",
 	orientation: "horizontal",
 	loop: true,
 	activateTabWithKeyboard: true,
@@ -16347,10 +16526,6 @@ var TabsBase = (0, vue.defineComponent)({
 			type: Boolean,
 			default: void 0
 		},
-		keepMountedMode: {
-			type: String,
-			default: void 0
-		},
 		autoContrast: {
 			type: Boolean,
 			default: void 0
@@ -16426,9 +16601,6 @@ var TabsBase = (0, vue.defineComponent)({
 			get keepMounted() {
 				return props.keepMounted;
 			},
-			get keepMountedMode() {
-				return props.keepMountedMode;
-			},
 			get placement() {
 				return props.placement;
 			},
@@ -16640,7 +16812,20 @@ var TextareaAutosize = (0, vue.defineComponent)({
 var Textarea = (0, vue.defineComponent)({
 	name: "Textarea",
 	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
@@ -16675,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 ? {
@@ -16684,11 +16870,16 @@ 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,
 				"data-no-overflow": shouldAutosize && props.maxRows === void 0 ? true : void 0,
-				__bottomSection: props.bottomSection,
+				__bottomSection: resolveNode(props.bottomSection, slots.bottomSection),
 				__bottomSectionProps: props.bottomSectionProps,
 				style: [{ "--input-resize": props.resize }, attrs.style],
 				...autosizeProps
@@ -16710,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);
 }
@@ -16718,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
@@ -16771,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, {
@@ -16788,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));
@@ -16811,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
@@ -16905,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
@@ -17042,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)({
@@ -17051,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,
@@ -17071,7 +17316,11 @@ var PasswordInput = (0, vue.defineComponent)({
 			const hasError = props.error !== void 0 ? Boolean(props.error) && typeof props.error !== "boolean" : Boolean(slots.error);
 			const hasDescription = props.description !== void 0 ? props.description !== null : Boolean(slots.description);
 			const describedBy = `${hasError ? errorId : ""} ${hasDescription ? descriptionId : ""}`.trim() || void 0;
-			const VisibilityToggleIcon = props.visibilityToggleIcon || PasswordToggleIcon;
+			const renderVisibilityToggleIcon = () => {
+				if (props.visibilityToggleIcon) return (0, vue.h)(props.visibilityToggleIcon, { reveal: visible.value });
+				if (slots.visibilityToggleIcon) return slots.visibilityToggleIcon({ reveal: visible.value });
+				return (0, vue.h)(PasswordToggleIcon, { reveal: visible.value });
+			};
 			const visibilityToggleButton = (0, vue.h)(ActionIcon, {
 				...getStyles("visibilityToggle"),
 				...props.visibilityToggleButtonProps,
@@ -17100,7 +17349,7 @@ var PasswordInput = (0, vue.defineComponent)({
 						toggleVisibility();
 					}
 				}
-			}, () => (0, vue.h)(VisibilityToggleIcon, { reveal: visible.value }));
+			}, renderVisibilityToggleIcon);
 			return (0, vue.h)(Input.Wrapper, {
 				...props.wrapperProps,
 				id,
@@ -17167,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,
@@ -17174,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
@@ -17420,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
@@ -17493,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;
@@ -17561,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
@@ -17606,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",
@@ -17803,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);
 }
@@ -17872,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
@@ -17909,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,
@@ -17941,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, {
@@ -17986,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,
@@ -18021,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
@@ -18034,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) => {
@@ -18087,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,
@@ -18111,6 +18419,10 @@ var ChipBase = (0, vue.defineComponent)({
 			type: String,
 			default: "checkbox"
 		},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
 		checked: {
 			type: Boolean,
 			default: void 0
@@ -18182,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",
@@ -18211,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);
@@ -18236,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",
@@ -18364,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);
 }
@@ -18473,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]);
 		};
@@ -18496,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"
@@ -18537,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({
@@ -18560,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;
@@ -18575,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();
 				}
@@ -18741,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
@@ -18802,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;
@@ -18854,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);
 }
@@ -18862,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
@@ -18903,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,
@@ -18917,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();
 		} });
@@ -18939,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?.());
 		};
@@ -19110,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,
@@ -19175,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"
@@ -19208,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,
@@ -19236,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;
@@ -19272,6 +19686,7 @@ var RadioBase = (0, vue.defineComponent)({
 				id,
 				checked,
 				disabled,
+				readonly: props.readOnly,
 				name,
 				type: "radio",
 				"aria-describedby": describedBy,
@@ -19281,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)]));
 		};
@@ -19306,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
@@ -19379,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]);
@@ -19454,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,
@@ -19519,6 +19942,10 @@ var SwitchBase = (0, vue.defineComponent)({
 			type: Boolean,
 			default: true
 		},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
 		checked: {
 			type: Boolean,
 			default: void 0
@@ -19535,6 +19962,10 @@ var SwitchBase = (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
 		variant: {
 			type: String,
 			default: void 0
@@ -19560,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({
@@ -19630,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",
@@ -20275,16 +20716,17 @@ var StepperBase = (0, vue.defineComponent)({
 			const items = [];
 			steps.forEach((item, index) => {
 				const itemProps = item.props ?? {};
+				const itemSlots = item.children ?? {};
 				const state = props.active === index ? "stepProgress" : props.active > index ? "stepCompleted" : "stepInactive";
 				const selectable = typeof props.onStepClick === "function" && (typeof itemProps.allowStepSelect === "boolean" ? itemProps.allowStepSelect : state === "stepCompleted" || props.allowNextStepsSelect);
 				items.push((0, vue.cloneVNode)(item, {
-					icon: itemProps.icon ?? props.icon ?? (slots.icon ? (payload) => slots.icon(payload) : index + 1),
+					icon: itemSlots.icon ? itemProps.icon : itemProps.icon ?? props.icon ?? (slots.icon ? (payload) => slots.icon(payload) : index + 1),
 					step: index,
 					state,
 					onClick: () => selectable && props.onStepClick?.(index),
 					allowStepClick: selectable,
-					completedIcon: itemProps.completedIcon ?? props.completedIcon ?? (slots.completedIcon ? (payload) => slots.completedIcon(payload) : void 0),
-					progressIcon: itemProps.progressIcon ?? props.progressIcon ?? (slots.progressIcon ? (payload) => slots.progressIcon(payload) : void 0),
+					completedIcon: itemSlots.completedIcon ? itemProps.completedIcon : itemProps.completedIcon ?? props.completedIcon ?? (slots.completedIcon ? (payload) => slots.completedIcon(payload) : void 0),
+					progressIcon: itemSlots.progressIcon ? itemProps.progressIcon : itemProps.progressIcon ?? props.progressIcon ?? (slots.progressIcon ? (payload) => slots.progressIcon(payload) : void 0),
 					color: itemProps.color ?? props.color,
 					iconSize: props.iconSize,
 					iconPosition: itemProps.iconPosition ?? props.iconPosition,
@@ -20740,9 +21182,154 @@ Object.assign(TableOfContents, {
 	classes: TableOfContents_module_default,
 	varsResolver: varsResolver$14
 });
-var FloatingWindow_module_default = { root: "_root_kejg3_1" };
+//#endregion
+//#region src/components/FloatingWindow/FloatingWindow.context.ts
+var [provideFloatingWindowContext, useFloatingWindowContext] = createSafeContext("FloatingWindow.ResizeHandle must be used within FloatingWindow");
+//#endregion
+//#region src/components/FloatingWindow/FloatingWindowResizeHandle.ts
+var KEYBOARD_STEP = 10;
+function clampDimension$1(value, min, max, viewportMax) {
+	let result = value;
+	if (min != null) result = Math.max(result, min);
+	if (max != null) result = Math.min(result, max);
+	if (viewportMax != null) result = Math.min(result, viewportMax);
+	return result;
+}
+var FloatingWindowResizeHandle = withBoxProps((0, vue.defineComponent)({
+	name: "FloatingWindowResizeHandle",
+	inheritAttrs: false,
+	props: {
+		ariaLabel: {
+			type: String,
+			default: "Resize window"
+		},
+		tabindex: {
+			type: Number,
+			default: 0
+		},
+		onKeydown: Function
+	},
+	setup(props, { attrs, slots }) {
+		const ctx = useFloatingWindowContext();
+		let handle = null;
+		let isResizing = false;
+		let startX = 0;
+		let startY = 0;
+		let startWidth = 0;
+		let startHeight = 0;
+		const hasWidth = () => ctx.dimensions?.initialWidth != null || ctx.dimensions?.minWidth != null || ctx.dimensions?.maxWidth != null;
+		const hasHeight = () => ctx.dimensions?.initialHeight != null || ctx.dimensions?.minHeight != null || ctx.dimensions?.maxHeight != null;
+		const applySize = (width, height) => {
+			const root = ctx.rootRef.value;
+			if (!root || width === null && height === null) return;
+			const rect = root.getBoundingClientRect();
+			const offset = ctx.constrainOffset ?? 0;
+			const maxViewportWidth = ctx.constrainToViewport ? window.innerWidth - rect.left - offset : void 0;
+			const maxViewportHeight = ctx.constrainToViewport ? window.innerHeight - rect.top - offset : void 0;
+			if (width !== null) root.style.width = `${clampDimension$1(width, ctx.dimensions?.minWidth, ctx.dimensions?.maxWidth, maxViewportWidth)}px`;
+			if (height !== null) root.style.height = `${clampDimension$1(height, ctx.dimensions?.minHeight, ctx.dimensions?.maxHeight, maxViewportHeight)}px`;
+			const resized = root.getBoundingClientRect();
+			if (width !== null) handle?.setAttribute("aria-valuenow", String(Math.round(resized.width)));
+			ctx.onSizeChange?.({
+				width: resized.width,
+				height: resized.height
+			});
+		};
+		const end = () => {
+			if (!isResizing) return;
+			isResizing = false;
+			document.body.style.userSelect = "";
+			document.body.style.webkitUserSelect = "";
+			ctx.onResizeEnd?.();
+			document.removeEventListener("mousemove", move);
+			document.removeEventListener("mouseup", end);
+			document.removeEventListener("touchmove", move);
+			document.removeEventListener("touchend", end);
+			document.removeEventListener("touchcancel", end);
+		};
+		const move = (event) => {
+			if (!isResizing) return;
+			event.preventDefault();
+			const point = "touches" in event ? event.touches[0] : event;
+			applySize(hasWidth() ? startWidth + point.clientX - startX : null, hasHeight() ? startHeight + point.clientY - startY : null);
+		};
+		const start = (event) => {
+			if ("button" in event && event.button !== 0) return;
+			event.stopPropagation();
+			event.preventDefault();
+			if (!hasWidth() && !hasHeight()) return;
+			const root = ctx.rootRef.value;
+			if (!root) return;
+			const point = "touches" in event ? event.touches[0] : event;
+			const rect = root.getBoundingClientRect();
+			startX = point.clientX;
+			startY = point.clientY;
+			startWidth = rect.width;
+			startHeight = rect.height;
+			isResizing = true;
+			document.body.style.userSelect = "none";
+			document.body.style.webkitUserSelect = "none";
+			ctx.onResizeStart?.();
+			document.addEventListener("mousemove", move);
+			document.addEventListener("mouseup", end);
+			document.addEventListener("touchmove", move, { passive: false });
+			document.addEventListener("touchend", end);
+			document.addEventListener("touchcancel", end);
+		};
+		const onKeydown = (event) => {
+			props.onKeydown?.(event);
+			if (event.defaultPrevented) return;
+			const root = ctx.rootRef.value;
+			if (!root) return;
+			const rect = root.getBoundingClientRect();
+			let width = null;
+			let height = null;
+			if (event.key === "ArrowRight" && hasWidth()) width = rect.width + KEYBOARD_STEP;
+			else if (event.key === "ArrowLeft" && hasWidth()) width = rect.width - KEYBOARD_STEP;
+			else if (event.key === "ArrowDown" && hasHeight()) height = rect.height + KEYBOARD_STEP;
+			else if (event.key === "ArrowUp" && hasHeight()) height = rect.height - KEYBOARD_STEP;
+			else if (event.key === "Home") {
+				if (hasWidth()) width = ctx.dimensions?.minWidth ?? rect.width;
+				if (hasHeight()) height = ctx.dimensions?.minHeight ?? rect.height;
+			} else if (event.key === "End") {
+				if (hasWidth()) width = ctx.dimensions?.maxWidth ?? rect.width;
+				if (hasHeight()) height = ctx.dimensions?.maxHeight ?? rect.height;
+			}
+			if (width !== null || height !== null) {
+				event.preventDefault();
+				applySize(width, height);
+			}
+		};
+		(0, vue.onMounted)(() => {
+			if (hasWidth() && ctx.dimensions?.initialWidth != null) handle?.setAttribute("aria-valuenow", String(Math.round(clampDimension$1(ctx.dimensions.initialWidth, ctx.dimensions.minWidth, ctx.dimensions.maxWidth, void 0))));
+		});
+		(0, vue.onBeforeUnmount)(end);
+		return () => (0, vue.h)(Box, {
+			...attrs,
+			ref: (node) => {
+				handle = node?.$el ?? node;
+			},
+			role: "separator",
+			"aria-label": attrs["aria-label"] ?? props.ariaLabel,
+			"aria-valuemin": ctx.dimensions?.minWidth,
+			"aria-valuemax": ctx.dimensions?.maxWidth,
+			tabindex: props.tabindex,
+			style: [{ touchAction: "none" }, attrs.style],
+			onMousedown: start,
+			onTouchstart: start,
+			onKeydown
+		}, () => slots.default?.());
+	}
+}));
+var FloatingWindow_module_default = { root: "_root_mstr0_1" };
 //#endregion
 //#region src/components/FloatingWindow/FloatingWindow.ts
+function clampDimension(value, min, max) {
+	let result = value;
+	if (min != null) result = Math.max(result, min);
+	if (max != null) result = Math.min(result, max);
+	return result;
+}
 var defaultProps$7 = {
 	constrainToViewport: true,
 	withinPortal: true,
@@ -20808,6 +21395,22 @@ var FloatingWindow = (0, vue.defineComponent)({
 			type: [String, Number],
 			default: void 0
 		},
+		dimensions: {
+			type: Object,
+			default: void 0
+		},
+		onSizeChange: {
+			type: Function,
+			default: void 0
+		},
+		onResizeStart: {
+			type: Function,
+			default: void 0
+		},
+		onResizeEnd: {
+			type: Function,
+			default: void 0
+		},
 		shadow: {
 			type: String,
 			default: void 0
@@ -20844,6 +21447,7 @@ var FloatingWindow = (0, vue.defineComponent)({
 	setup(rawProps, { attrs, slots, expose }) {
 		const props = useProps("FloatingWindow", defaultProps$7, rawProps);
 		const floating = (0, _mantine_vue_hooks.useFloatingWindow)(props);
+		const rootRef = (0, vue.ref)(null);
 		(0, _mantine_vue_hooks.assignRef)(props.setPositionRef, floating.setPosition);
 		expose({ setPosition: floating.setPosition });
 		const getStyles = useStyles({
@@ -20857,12 +21461,37 @@ var FloatingWindow = (0, vue.defineComponent)({
 			vars: props.vars,
 			unstyled: props.unstyled
 		});
+		provideFloatingWindowContext({
+			rootRef,
+			get dimensions() {
+				return props.dimensions;
+			},
+			get constrainToViewport() {
+				return props.constrainToViewport;
+			},
+			get constrainOffset() {
+				return props.constrainOffset;
+			},
+			get onSizeChange() {
+				return props.onSizeChange;
+			},
+			get onResizeStart() {
+				return props.onResizeStart;
+			},
+			get onResizeEnd() {
+				return props.onResizeEnd;
+			}
+		});
 		return () => (0, vue.h)(OptionalPortal, {
 			withinPortal: props.withinPortal,
 			...props.portalProps
 		}, () => (0, vue.h)(Paper, {
 			...attrs,
-			ref: ((value) => floating.ref(value?.$el ?? value)),
+			ref: ((value) => {
+				const node = value?.$el ?? value;
+				rootRef.value = node;
+				floating.ref(node);
+			}),
 			shadow: props.shadow,
 			radius: props.radius,
 			withBorder: props.withBorder,
@@ -20873,13 +21502,20 @@ var FloatingWindow = (0, vue.defineComponent)({
 			}),
 			style: [
 				getStyles("root").style,
-				{ "--floating-window-z-index": String(props.zIndex) },
+				{
+					"--floating-window-z-index": String(props.zIndex),
+					"--floating-window-width": props.dimensions?.initialWidth == null ? void 0 : `${clampDimension(props.dimensions.initialWidth, props.dimensions.minWidth, props.dimensions.maxWidth)}px`,
+					"--floating-window-height": props.dimensions?.initialHeight == null ? void 0 : `${clampDimension(props.dimensions.initialHeight, props.dimensions.minHeight, props.dimensions.maxHeight)}px`
+				},
 				attrs.style
 			]
 		}, () => slots.default?.()));
 	}
 });
-Object.assign(FloatingWindow, { classes: FloatingWindow_module_default });
+Object.assign(FloatingWindow, {
+	classes: FloatingWindow_module_default,
+	ResizeHandle: FloatingWindowResizeHandle
+});
 //#endregion
 //#region src/components/Slider/Slider.context.ts
 var [provideSliderContext, useSliderContext] = createSafeContext("SliderProvider was not found in tree");
@@ -21222,15 +21858,15 @@ var Track = (0, vue.defineComponent)({
 	}
 });
 var Slider_module_default = {
-	root: "_root_16d42_1",
-	label: "_label_16d42_39",
-	thumb: "_thumb_16d42_65",
-	trackContainer: "_trackContainer_16d42_131",
-	track: "_track_16d42_131",
-	bar: "_bar_16d42_187",
-	markWrapper: "_markWrapper_16d42_215",
-	mark: "_mark_16d42_215",
-	markLabel: "_markLabel_16d42_257"
+	root: "_root_1osrz_1",
+	label: "_label_1osrz_39",
+	thumb: "_thumb_1osrz_65",
+	trackContainer: "_trackContainer_1osrz_131",
+	track: "_track_1osrz_131",
+	bar: "_bar_1osrz_187",
+	markWrapper: "_markWrapper_1osrz_215",
+	mark: "_mark_1osrz_215",
+	markLabel: "_markLabel_1osrz_257"
 };
 //#endregion
 //#region src/components/Slider/Slider/Slider.ts
@@ -21290,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
@@ -21405,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) => {
@@ -21467,7 +22114,7 @@ var Slider = withBoxProps((0, vue.defineComponent)({
 				max: domain.value[1]
 			});
 			const scaled = props.scale(current.value);
-			const label = slots.label ? slots.label({ value: scaled }) : typeof props.label === "function" ? props.label(scaled) : props.label;
+			const label = rawProps.label !== void 0 ? typeof props.label === "function" ? props.label(scaled) : props.label : slots.label?.({ value: scaled }) ?? (typeof props.label === "function" ? props.label(scaled) : props.label);
 			const start = typeof props.startPointValue === "number" && !props.inverted ? getPosition$1({
 				value: props.startPointValue,
 				min: domain.value[0],
@@ -21552,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
@@ -21698,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]);
@@ -21800,10 +22455,10 @@ var RangeSlider = (0, vue.defineComponent)({
 				value: props.scale(current.value[index]),
 				position: positions[index],
 				dragging: move.active.value && activeThumb.value === index,
-				label: slots.label ? slots.label({
+				label: rawProps.label !== void 0 ? typeof props.label === "function" ? props.label(props.scale(current.value[index])) : props.label : slots.label?.({
 					value: props.scale(current.value[index]),
 					index
-				}) : typeof props.label === "function" ? props.label(props.scale(current.value[index])) : props.label,
+				}) ?? (typeof props.label === "function" ? props.label(props.scale(current.value[index])) : props.label),
 				labelAlwaysOn: props.labelAlwaysOn,
 				thumbLabel: props.thumbLabel?.[index],
 				thumbValueText: props.thumbValueText,
@@ -21814,7 +22469,7 @@ var RangeSlider = (0, vue.defineComponent)({
 				onMousedown: () => activeThumb.value = index,
 				onFocus: () => focused.value = index,
 				onKeydown: (event) => keydown(index, event)
-			}, () => slots.thumbChildren ? slots.thumbChildren({ index }) : props.thumbChildren?.[index])) }), props.name ? [(0, vue.h)("input", {
+			}, () => props.thumbChildren !== void 0 ? props.thumbChildren[index] : slots.thumbChildren?.({ index }))) }), props.name ? [(0, vue.h)("input", {
 				type: "hidden",
 				name: `${props.name}_from`,
 				value: current.value[0],
@@ -21875,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,
@@ -21936,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);
@@ -21965,7 +22638,7 @@ var ColorSlider = (0, vue.defineComponent)({
 				x,
 				y: 0
 			};
-			props.onChange?.(changeValue(x));
+			setValue(changeValue(x));
 		}, {
 			onScrubStart: props.onScrubStart,
 			onScrubEnd: () => {
@@ -21973,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
 		});
@@ -21984,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, {
@@ -21995,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,
@@ -22230,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,
@@ -22263,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,
@@ -22271,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: [
 				{
@@ -22291,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,
@@ -22320,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` }]
@@ -22524,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
@@ -22617,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;
@@ -23387,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
@@ -23436,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)("");
@@ -23497,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);
 			}
@@ -23509,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));
@@ -23522,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(), "");
@@ -23633,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,
@@ -24090,6 +24814,7 @@ function flattenChildren$1(children) {
 var SplitterBase = (0, vue.defineComponent)({
 	name: "Splitter",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		orientation: {
 			type: String,
@@ -24236,7 +24961,7 @@ var SplitterBase = (0, vue.defineComponent)({
 						...getStyles("thumb"),
 						"data-orientation": props.orientation,
 						"data-active": splitter.activeHandle === handleIndex || void 0
-					}, [props.handleIcon !== void 0 ? props.handleIcon : (0, vue.h)(props.orientation === "vertical" ? GripHorizontalIcon : GripVerticalIcon)]) : void 0));
+					}, [props.handleIcon !== void 0 || slots.handleIcon ? resolveNode(props.handleIcon, slots.handleIcon) : (0, vue.h)(props.orientation === "vertical" ? GripHorizontalIcon : GripVerticalIcon)]) : void 0));
 				}
 				items.push((0, vue.cloneVNode)(child, {
 					key: `pane-${index}`,
@@ -24496,7 +25221,10 @@ var TreeNode = (0, vue.defineComponent)({
 	},
 	setup(props) {
 		const element = (0, vue.ref)(null);
-		const hasChildren = () => Array.isArray(props.node.children) || !!props.node.hasChildren && !Array.isArray(props.node.children);
+		const hasChildren = () => {
+			const hasLoadedChildren = Array.isArray(props.node.children) && props.node.children.length > 0;
+			return hasLoadedChildren || !!props.node.hasChildren && !hasLoadedChildren;
+		};
 		const expanded = () => props.controller.expandedState.value[props.node.value] || false;
 		const dnd = useTreeNodeDragDrop({
 			nodeValue: props.node.value,
@@ -24512,13 +25240,20 @@ var TreeNode = (0, vue.defineComponent)({
 			if (event.code === "ArrowRight") {
 				event.stopPropagation();
 				event.preventDefault();
-				if (expanded()) element.value?.querySelector("[role=treeitem]")?.focus();
-				else if (hasChildren()) props.controller.expand(props.node.value);
+				if (expanded()) {
+					const nextNode = element.value?.querySelector("[role=treeitem]");
+					nextNode?.setAttribute("data-focus-ring", "true");
+					nextNode?.focus();
+				} else if (hasChildren()) props.controller.expand(props.node.value);
 			} else if (event.code === "ArrowLeft") {
 				event.stopPropagation();
 				event.preventDefault();
 				if (expanded() && hasChildren()) props.controller.collapse(props.node.value);
-				else if (props.isSubtree) element.value?.parentElement?.closest("[role=treeitem]")?.focus();
+				else if (props.isSubtree) {
+					const parentNode = element.value?.parentElement?.closest("[role=treeitem]");
+					parentNode?.setAttribute("data-focus-ring", "true");
+					parentNode?.focus();
+				}
 			} else if (event.code === "ArrowDown" || event.code === "ArrowUp") {
 				const root = element.value?.closest("[data-tree-root]");
 				if (!root || !element.value) return;
@@ -24527,6 +25262,7 @@ var TreeNode = (0, vue.defineComponent)({
 				const nodes = Array.from(root.querySelectorAll("[role=treeitem]")).filter((node) => visible(node, root));
 				const index = nodes.indexOf(element.value);
 				const next = nodes[event.code === "ArrowDown" ? index + 1 : index - 1];
+				next?.setAttribute("data-focus-ring", "true");
 				next?.focus();
 				if (event.shiftKey && next) props.controller.setSelectedState(getValuesRange(props.controller.anchorNode.value, next.dataset.value, props.flatValues));
 			} else if (event.code === "Space") {
@@ -24611,6 +25347,10 @@ var TreeNode = (0, vue.defineComponent)({
 				"data-level": props.level,
 				tabindex: props.rootIndex === 0 ? 0 : -1,
 				onKeydown,
+				onBlur: (event) => {
+					const currentTarget = event.currentTarget;
+					if (!currentTarget.contains(event.relatedTarget)) currentTarget.removeAttribute("data-focus-ring");
+				},
 				ref: element
 			}, [
 				label,
@@ -24871,12 +25611,12 @@ function useTree(input = {}) {
 	};
 }
 var Tree_module_default = {
-	root: "_root_42z3r_7",
-	subtree: "_subtree_42z3r_13",
-	node: "_node_42z3r_18",
-	label: "_label_42z3r_26",
-	flatLine: "_flatLine_42z3r_125",
-	flatLineClosing: "_flatLineClosing_42z3r_151"
+	root: "_root_ea12t_7",
+	subtree: "_subtree_ea12t_13",
+	node: "_node_ea12t_18",
+	label: "_label_ea12t_27",
+	flatLine: "_flatLine_ea12t_126",
+	flatLineClosing: "_flatLineClosing_ea12t_152"
 };
 //#endregion
 //#region src/components/Tree/Tree.ts
@@ -24887,6 +25627,7 @@ var varsResolver$8 = createVarsResolver((_, { levelOffset }) => ({ root: { "--le
 var Tree = withBoxProps((0, vue.defineComponent)({
 	name: "Tree",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: [
@@ -25002,7 +25743,7 @@ var Tree = withBoxProps((0, vue.defineComponent)({
 		(0, vue.onBeforeUnmount)(() => document.removeEventListener("mousedown", outside));
 		return () => {
 			const flatValues = getFlatValues(props.data);
-			const renderNode = props.renderNode || (slots.node ? (payload) => slots.node?.(payload) : void 0);
+			const renderNode = props.renderNode || (slots.renderNode ? (payload) => slots.renderNode?.(payload) : slots.node ? (payload) => slots.node?.(payload) : void 0);
 			const nodes = props.data.map((node, index) => (0, vue.h)(TreeNode, {
 				key: node.value,
 				node,
@@ -25289,7 +26030,7 @@ function filterTreeData(data, query, filter = defaultTreeNodeFilter) {
 function flattenTo$1(acc, data, state, parent, level, ancestorIsLast) {
 	data.forEach((node, index) => {
 		const isLast = index === data.length - 1;
-		const loaded = Array.isArray(node.children);
+		const loaded = Array.isArray(node.children) && node.children.length > 0;
 		const hasChildren = loaded || !!node.hasChildren && !loaded;
 		const expanded = state[node.value] || false;
 		const linesPath = [];
@@ -25783,6 +26524,10 @@ var ModalRoot = (0, vue.defineComponent)({
 			type: Function,
 			required: true
 		},
+		keepMounted: {
+			type: Boolean,
+			default: false
+		},
 		centered: Boolean,
 		fullScreen: Boolean,
 		radius: [String, Number],
@@ -25845,6 +26590,7 @@ var ModalRoot = (0, vue.defineComponent)({
 			...attrs,
 			opened: props.opened,
 			onClose: props.onClose,
+			keepMounted: props.keepMounted,
 			unstyled: props.unstyled,
 			...getStyles("root"),
 			mod: {
@@ -25899,6 +26645,10 @@ var ModalBaseComponent = (0, vue.defineComponent)({
 			type: Function,
 			required: true
 		},
+		keepMounted: {
+			type: Boolean,
+			default: false
+		},
 		title: {
 			type: null,
 			default: void 0
@@ -25921,7 +26671,8 @@ var ModalBaseComponent = (0, vue.defineComponent)({
 			return (0, vue.h)(ModalRoot, {
 				...attrs,
 				opened: props.opened,
-				onClose: props.onClose
+				onClose: props.onClose,
+				keepMounted: props.keepMounted
 			}, { default: () => [props.withOverlay && (0, vue.h)(ModalOverlay, props.overlayProps), (0, vue.h)(ModalContent, null, { default: () => [header && (0, vue.h)(ModalHeader, null, { default: () => [hasNode(title) && (0, vue.h)(ModalTitle, null, { default: () => title }), props.withCloseButton && (0, vue.h)(ModalCloseButton, props.closeButtonProps)] }), (0, vue.h)(ModalBody, null, { default: () => slots.default?.() })] })] });
 		};
 	}
@@ -26046,6 +26797,10 @@ var DrawerRoot = (0, vue.defineComponent)({
 			type: Function,
 			required: true
 		},
+		keepMounted: {
+			type: Boolean,
+			default: false
+		},
 		position: {
 			type: String,
 			default: "left"
@@ -26105,6 +26860,7 @@ var DrawerRoot = (0, vue.defineComponent)({
 			...attrs,
 			opened: props.opened,
 			onClose: props.onClose,
+			keepMounted: props.keepMounted,
 			unstyled: props.unstyled,
 			...getStyles("root"),
 			transitionProps: {
@@ -26163,6 +26919,10 @@ var DrawerBaseComponent = (0, vue.defineComponent)({
 			type: Function,
 			required: true
 		},
+		keepMounted: {
+			type: Boolean,
+			default: false
+		},
 		title: {
 			type: null,
 			default: void 0
@@ -26220,6 +26980,7 @@ var DrawerBaseComponent = (0, vue.defineComponent)({
 				...attrs,
 				opened: props.opened,
 				onClose: props.onClose,
+				keepMounted: props.keepMounted,
 				zIndex: resolvedZIndex.value,
 				...stackProps.value
 			}, { default: () => [props.withOverlay && (0, vue.h)(DrawerOverlay, {
@@ -26421,7 +27182,7 @@ function useDelayedHover(input) {
 }
 //#endregion
 //#region src/utils/Floating/use-context-menu-handlers.ts
-function call$3(handler, event) {
+function call$4(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((item) => typeof item === "function" && item(event));
 	else if (typeof handler === "function") handler(event);
 }
@@ -26473,11 +27234,11 @@ function useContextMenuHandlers(options) {
 	});
 	return {
 		onMousedown: (event) => {
-			call$3(options.childProps.onMousedown ?? options.childProps.onMouseDown, event);
+			call$4(options.childProps.onMousedown ?? options.childProps.onMouseDown, event);
 			if (!options.disabled && event.button === 2) event.stopPropagation();
 		},
 		onContextmenu: (event) => {
-			call$3(options.childProps.onContextmenu ?? options.childProps.onContextMenu, event);
+			call$4(options.childProps.onContextmenu ?? options.childProps.onContextMenu, event);
 			if (options.disabled || event.defaultPrevented) return;
 			event.preventDefault();
 			if (gestureHandled.value) return;
@@ -26485,19 +27246,19 @@ function useContextMenuHandlers(options) {
 			if (touchActive.value) gestureHandled.value = true;
 		},
 		onTouchstart: (event) => {
-			call$3(options.childProps.onTouchstart ?? options.childProps.onTouchStart, event);
+			call$4(options.childProps.onTouchstart ?? options.childProps.onTouchStart, event);
 			longPress.onTouchstart?.(event);
 		},
 		onTouchend: (event) => {
-			call$3(options.childProps.onTouchend ?? options.childProps.onTouchEnd, event);
+			call$4(options.childProps.onTouchend ?? options.childProps.onTouchEnd, event);
 			longPress.onTouchend?.(event);
 		},
 		onTouchcancel: (event) => {
-			call$3(options.childProps.onTouchcancel ?? options.childProps.onTouchCancel, event);
+			call$4(options.childProps.onTouchcancel ?? options.childProps.onTouchCancel, event);
 			longPress.onTouchcancel?.(event);
 		},
 		onTouchmove: (event) => {
-			call$3(options.childProps.onTouchmove ?? options.childProps.onTouchMove, event);
+			call$4(options.childProps.onTouchmove ?? options.childProps.onTouchMove, event);
 			longPress.onTouchmove?.(event);
 		},
 		style: options.disabled ? options.childProps.style : {
@@ -26553,7 +27314,7 @@ function one$3(slots, name) {
 	if (children.length !== 1) throw new Error(`${name} component children should be a single element or component that accepts ref`);
 	return children[0];
 }
-function call$2(handler, event) {
+function call$3(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((fn) => fn?.(event));
 	else handler?.(event);
 }
@@ -26593,7 +27354,7 @@ var PopoverTarget = (0, vue.defineComponent)({
 			});
 			if (!ctx.controlled) forwarded.onClick = (event) => {
 				ctx.onToggle();
-				call$2(childProps.onClick, event);
+				call$3(childProps.onClick, event);
 			};
 			return (0, vue.cloneVNode)(child, forwarded, true);
 		};
@@ -26669,7 +27430,7 @@ var PopoverDropdown = (0, vue.defineComponent)({
 			"data-position": ctx.placement,
 			"data-fixed": ctx.floatingStrategy === "fixed" || void 0,
 			onKeydownCapture: (event) => {
-				call$2(attrs.onKeydownCapture, event);
+				call$3(attrs.onKeydownCapture, event);
 				if (event.key === "Escape" && ctx.closeOnEscape) {
 					ctx.onClose();
 					ctx.onDismiss?.();
@@ -27505,7 +28266,7 @@ var Tooltip = Object.assign(TooltipBase, {
 var [provideHoverCardContext, useHoverCardContext] = createSafeContext("HoverCard component was not found in the tree");
 //#endregion
 //#region src/components/HoverCard/HoverCardDropdown/HoverCardDropdown.ts
-function call$1(handler, event) {
+function call$2(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((fn) => fn?.(event));
 	else handler?.(event);
 }
@@ -27517,11 +28278,11 @@ var HoverCardDropdown = (0, vue.defineComponent)({
 		return () => (0, vue.h)(PopoverDropdown, {
 			...attrs,
 			onMouseenter: (event) => {
-				call$1(attrs.onMouseenter ?? attrs.onMouseEnter, event);
+				call$2(attrs.onMouseenter ?? attrs.onMouseEnter, event);
 				ctx.openDropdown();
 			},
 			onMouseleave: (event) => {
-				call$1(attrs.onMouseleave ?? attrs.onMouseLeave, event);
+				call$2(attrs.onMouseleave ?? attrs.onMouseLeave, event);
 				ctx.closeDropdown();
 			}
 		}, slots);
@@ -27724,7 +28485,7 @@ var Menu_module_default = {
 };
 //#endregion
 //#region src/components/Menu/Menu.ts
-function call(handler, event) {
+function call$1(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((fn) => fn?.(event));
 	else handler?.(event);
 }
@@ -27845,6 +28606,9 @@ var MenuBase = (0, vue.defineComponent)({
 			get hasSearch() {
 				return searchCount.value > 0;
 			},
+			get withInitialFocusPlaceholder() {
+				return props.withInitialFocusPlaceholder;
+			},
 			registerSearch: () => {
 				searchCount.value += 1;
 				return () => {
@@ -27944,7 +28708,7 @@ var MenuDropdown = (0, vue.defineComponent)({
 			onMouseenter: ctx.trigger !== "click" ? ctx.openDropdown : void 0,
 			onMouseleave: ctx.trigger !== "click" ? ctx.closeDropdown : void 0,
 			onKeydown: (event) => {
-				call(attrs.onKeydown, event);
+				call$1(attrs.onKeydown, event);
 				if (event.defaultPrevented || ctx.hasSearch) return;
 				const root = event.currentTarget;
 				const active = document.activeElement;
@@ -27967,7 +28731,13 @@ var MenuDropdown = (0, vue.defineComponent)({
 					menuItems(root).find((item) => item.textContent?.trim().toLowerCase().startsWith(query))?.focus();
 				}
 			}
-		}, slots);
+		}, () => [ctx.withInitialFocusPlaceholder && !ctx.hasSearch ? (0, vue.h)("div", {
+			role: "presentation",
+			tabindex: -1,
+			"data-autofocus": true,
+			"data-mantine-stop-propagation": true,
+			style: { outline: 0 }
+		}) : null, slots.default?.()]);
 	}
 });
 var MenuItem = (0, vue.defineComponent)({
@@ -28026,7 +28796,7 @@ var MenuItem = (0, vue.defineComponent)({
 				}),
 				onMousedown: (event) => event.preventDefault(),
 				onClick: (event) => {
-					call(attrs.onClick, event);
+					call$1(attrs.onClick, event);
 					if (!props.disabled && !attrs["data-disabled"] && (props.closeMenuOnClick ?? ctx.closeOnItemClick)) ctx.closeDropdownImmediately();
 				}
 			}, () => [
@@ -28076,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();
@@ -28112,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": "",
@@ -28128,16 +28924,12 @@ var MenuSearch = (0, vue.defineComponent)({
 					}
 				},
 				onInput: (event) => {
-					call(attrs.onInput, event);
-					call(attrs.onChange, event);
-					clearActive(event.currentTarget.closest("[data-menu-dropdown]"));
-				},
-				onChange: (event) => {
-					call(attrs.onChange, event);
+					call$1(attrs.onInput, event);
+					setValue(event.currentTarget.value);
 					clearActive(event.currentTarget.closest("[data-menu-dropdown]"));
 				},
 				onKeydown: (event) => {
-					call(attrs.onKeydown ?? attrs.onKeyDown, event);
+					call$1(attrs.onKeydown ?? attrs.onKeyDown, event);
 					if (event.defaultPrevented) return;
 					const root = event.currentTarget.closest("[data-menu-dropdown]");
 					const items = menuItems(root);
@@ -28410,13 +29202,13 @@ var MenuSubTarget = (0, vue.defineComponent)({
 			const childProps = child.props ?? {};
 			return (0, vue.cloneVNode)(child, {
 				onClick: (event) => {
-					call(childProps.onClick, event);
+					call$1(childProps.onClick, event);
 					ctx.toggleDropdown();
 				},
 				onMouseenter: ctx.openDropdown,
 				onMouseleave: ctx.closeDropdown,
 				onKeydown: (event) => {
-					call(childProps.onKeydown ?? childProps.onKeyDown, event);
+					call$1(childProps.onKeydown ?? childProps.onKeyDown, event);
 					if (event.defaultPrevented) return;
 					if (event.key === "ArrowRight") {
 						event.preventDefault();
@@ -28436,7 +29228,7 @@ var MenuSubDropdown = (0, vue.defineComponent)({
 		return () => (0, vue.h)(MenuDropdown, {
 			...attrs,
 			onKeydown: (event) => {
-				call(attrs.onKeydown, event);
+				call$1(attrs.onKeydown, event);
 				if (event.defaultPrevented) return;
 				const currentDropdown = event.currentTarget;
 				const focused = event.target;
@@ -29534,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
@@ -29544,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",
@@ -29557,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;
@@ -29918,7 +30728,8 @@ var OptionsDropdown = (0, vue.defineComponent)({
 		return () => {
 			validateOptions(props.data);
 			const renderOption = props.renderOption ?? (slots.renderOption ? (input) => slots.renderOption(input) : void 0);
-			const nothingFound = props.nothingFoundMessage ?? (slots.nothingFound ? slots.nothingFound() : void 0);
+			const nothingFoundSlot = slots.nothingFoundMessage ?? slots.nothingFound;
+			const nothingFound = props.nothingFoundMessage ?? (nothingFoundSlot ? nothingFoundSlot() : void 0);
 			const data = typeof props.search === "string" ? (props.filter || defaultOptionsFilter)({
 				options: props.data,
 				search: props.filterOptions ? props.search : "",
@@ -30094,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
@@ -30231,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;
@@ -30239,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,
@@ -30282,8 +31101,8 @@ var ComboboxPopoverBase = (0, vue.defineComponent)({
 			}
 			if (props.searchable) handleSearchChange("");
 		};
-		const resolveRenderOption = () => props.renderOption ?? (slots.option ? (input) => slots.option(input) : void 0);
-		const resolveNothingFound = () => resolveNode(props.nothingFoundMessage, slots.nothingFound);
+		const resolveRenderOption = () => props.renderOption ?? (slots.renderOption ?? slots.option ? (input) => (slots.renderOption ?? slots.option)(input) : void 0);
+		const resolveNothingFound = () => resolveNode(props.nothingFoundMessage, slots.nothingFoundMessage ?? slots.nothingFound);
 		const renderSearchableDropdown = () => {
 			const filteredData = (props.filter || defaultOptionsFilter)({
 				options: parsedData.value,
@@ -30993,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));
@@ -31013,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,
@@ -31135,7 +31958,7 @@ var Select = (0, vue.defineComponent)({
 				scrollAreaProps: props.scrollAreaProps
 			}, {
 				renderOption: slots.renderOption,
-				nothingFound: slots.nothingFound
+				nothingFound: slots.nothingFoundMessage ?? slots.nothingFound
 			})]), (0, vue.h)(Combobox.HiddenInput, {
 				value: current(),
 				name: attrs.name,
@@ -31202,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));
@@ -31397,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));
@@ -31415,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,
@@ -31497,12 +32327,13 @@ var MultiSelect = (0, vue.defineComponent)({
 						label: String(item)
 					};
 					const onRemove = () => remove(item);
-					return props.renderPill ? props.renderPill({
+					const renderPillInput = {
 						option,
 						value: item,
 						onRemove,
 						disabled
-					}) : (0, vue.h)(Pill, {
+					};
+					return props.renderPill ? props.renderPill(renderPillInput) : slots.renderPill ? slots.renderPill(renderPillInput) : (0, vue.h)(Pill, {
 						key: `${String(item)}-${index}`,
 						withRemoveButton: !readOnly && !option.disabled,
 						disabled,
@@ -31541,7 +32372,7 @@ var MultiSelect = (0, vue.defineComponent)({
 				filter: props.filter,
 				limit: props.limit,
 				filterOptions: props.searchable,
-				hiddenWhenEmpty: props.nothingFoundMessage == null && !slots.nothingFound,
+				hiddenWhenEmpty: props.nothingFoundMessage == null && !slots.nothingFoundMessage && !slots.nothingFound,
 				nothingFoundMessage: props.nothingFoundMessage,
 				value: values,
 				withCheckIcon: props.withCheckIcon,
@@ -31553,7 +32384,7 @@ var MultiSelect = (0, vue.defineComponent)({
 				scrollAreaProps: props.scrollAreaProps
 			}, {
 				renderOption: slots.renderOption,
-				nothingFound: slots.nothingFound
+				nothingFound: slots.nothingFoundMessage ?? slots.nothingFound
 			})]), (0, vue.h)(Combobox.HiddenInput, {
 				value: values,
 				valuesDivider: props.hiddenInputValuesDivider,
@@ -31655,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));
@@ -31672,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,
@@ -31772,17 +32607,17 @@ var TagsInput = (0, vue.defineComponent)({
 				rightSection: slots.rightSection,
 				default: () => (0, vue.h)(Pill.Group, null, () => [...current.map((item, index) => {
 					const onRemove = () => removeAt(index);
-					const option = lockup.value[item] ?? {
-						value: item,
-						label: item,
-						disabled: false
-					};
-					return props.renderPill ? props.renderPill({
-						option,
+					const renderPillInput = {
+						option: lockup.value[item] ?? {
+							value: item,
+							label: item,
+							disabled: false
+						},
 						value: item,
 						onRemove,
 						disabled
-					}) : (0, vue.h)(Pill, {
+					};
+					return props.renderPill ? props.renderPill(renderPillInput) : slots.renderPill ? slots.renderPill(renderPillInput) : (0, vue.h)(Pill, {
 						key: `${item}-${index}`,
 						withRemoveButton: !readOnly,
 						disabled,
@@ -31833,7 +32668,7 @@ var TagsInput = (0, vue.defineComponent)({
 				search: search(),
 				filter: props.filter,
 				limit: props.limit,
-				hiddenWhenEmpty: props.nothingFoundMessage == null && !slots.nothingFound,
+				hiddenWhenEmpty: props.nothingFoundMessage == null && !slots.nothingFoundMessage && !slots.nothingFound,
 				nothingFoundMessage: props.nothingFoundMessage,
 				withScrollArea: props.withScrollArea,
 				maxDropdownHeight: props.maxDropdownHeight,
@@ -31841,7 +32676,7 @@ var TagsInput = (0, vue.defineComponent)({
 				scrollAreaProps: props.scrollAreaProps
 			}, {
 				renderOption: slots.renderOption,
-				nothingFound: slots.nothingFound
+				nothingFound: slots.nothingFoundMessage ?? slots.nothingFound
 			})]), (0, vue.h)(Combobox.HiddenInput, {
 				value: current,
 				valuesDivider: props.hiddenInputValuesDivider,
@@ -31903,6 +32738,7 @@ var ColorInput_module_default = {
 var ColorInput = (0, vue.defineComponent)({
 	name: "ColorInput",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		modelValue: String,
 		value: String,
@@ -31946,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;
@@ -31955,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)));
@@ -31997,7 +32833,7 @@ var ColorInput = (0, vue.defineComponent)({
 				class: ColorInput_module_default.eyeDropperButton,
 				"aria-label": "Pick color from screen",
 				onClick: useEyeDropper
-			}, () => props.eyeDropperIcon ?? (0, vue.h)(EyeDropperIcon, { class: ColorInput_module_default.eyeDropperIcon })) : void 0;
+			}, () => resolveNode(props.eyeDropperIcon, slots.eyeDropperIcon) ?? (0, vue.h)(EyeDropperIcon, { class: ColorInput_module_default.eyeDropperIcon })) : void 0;
 			return (0, vue.h)(Popover, {
 				position: "bottom-start",
 				offset: 5,
@@ -32080,7 +32916,7 @@ function flattenTo(acc, data, expandedSet, parent, level, parentGuides) {
 	for (let i = 0; i < data.length; i++) {
 		const node = data[i];
 		const isLast = i === data.length - 1;
-		const hasLoadedChildren = Array.isArray(node.children);
+		const hasLoadedChildren = Array.isArray(node.children) && node.children.length > 0;
 		const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;
 		const hasChildren = hasLoadedChildren || hasAsyncChildren;
 		const expanded = expandedSet.has(node.value);
@@ -32193,6 +33029,11 @@ var TreeSelectOption = (0, vue.defineComponent)({
 			const paddingInlineStart = BASE_PADDING + (props.level - 1) * LEVEL_OFFSET + (props.withLines && props.level > 1 ? LINE_CONTENT_GAP : 0) + (!props.hasChildren ? OPTION_GAP : 0);
 			const isActive = props.selected || props.checked;
 			const ariaChecked = props.showCheckbox ? props.indeterminate && !props.checked ? "mixed" : props.checked : void 0;
+			const expand = (event) => {
+				event?.preventDefault();
+				event?.stopPropagation();
+				if (props.hasChildren) props.onToggleExpand?.(props.node.value);
+			};
 			const payload = {
 				node: props.node,
 				level: props.level,
@@ -32200,7 +33041,8 @@ var TreeSelectOption = (0, vue.defineComponent)({
 				hasChildren: props.hasChildren,
 				selected: props.selected,
 				checked: props.checked,
-				indeterminate: props.indeterminate
+				indeterminate: props.indeterminate,
+				expand
 			};
 			const lineElements = props.withLines && props.level > 1 ? [
 				...props.lineGuides.map((show, g) => show ? (0, vue.h)("span", {
@@ -32243,16 +33085,10 @@ var TreeSelectOption = (0, vue.defineComponent)({
 					"aria-label": props.expanded ? props.chevronAriaLabels?.collapse ?? "Collapse" : props.chevronAriaLabels?.expand ?? "Expand",
 					onMousedown: (event) => event.preventDefault(),
 					onClick: (event) => {
-						event.preventDefault();
-						event.stopPropagation();
-						props.onToggleExpand?.(props.node.value);
+						expand(event);
 					},
 					onKeydown: (event) => {
-						if (event.key === "Enter") {
-							event.preventDefault();
-							event.stopPropagation();
-							props.onToggleExpand?.(props.node.value);
-						}
+						if (event.key === "Enter") expand(event);
 					}
 				}, (0, vue.h)(AccordionChevron, { size: "80%" })) : null,
 				props.showCheckbox ? (0, vue.h)(CheckboxIndicator, {
@@ -32364,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;
@@ -32467,7 +33307,8 @@ var TreeSelect = (0, vue.defineComponent)({
 			const multiValues = selectedArray();
 			const hasValue = isMulti() ? multiValues.length > 0 : current() != null;
 			const canClear = props.clearable && hasValue && !disabled && !readOnly;
-			const nothingFound = props.nothingFoundMessage ?? (slots.nothingFound ? slots.nothingFound() : void 0);
+			const nothingFoundSlot = slots.nothingFoundMessage ?? slots.nothingFound;
+			const nothingFound = props.nothingFoundMessage ?? (nothingFoundSlot ? nothingFoundSlot() : void 0);
 			const renderNode = props.renderNode ?? (slots.renderNode ? (payload) => slots.renderNode(payload) : void 0);
 			const clear = (event) => {
 				event.stopPropagation();
@@ -32606,6 +33447,585 @@ Object.assign(TreeSelect, { classes: {
 	...Combobox.classes,
 	...TreeSelect_module_default
 } });
+var Cascader_module_default = {
+	columnsList: "_columnsList_1xc8g_1",
+	column: "_column_1xc8g_1",
+	columnScroll: "_columnScroll_1xc8g_21",
+	columnsOverflow: "_columnsOverflow_1xc8g_26",
+	columnOption: "_columnOption_1xc8g_78",
+	flatOption: "_flatOption_1xc8g_127",
+	columnOptionLabel: "_columnOptionLabel_1xc8g_134",
+	columnOptionIcon: "_columnOptionIcon_1xc8g_141",
+	columnOptionCheck: "_columnOptionCheck_1xc8g_160",
+	columnEmpty: "_columnEmpty_1xc8g_172"
+};
+//#endregion
+//#region src/components/Cascader/cascader-utils.ts
+function cascaderOptionHasChildren(option) {
+	return Array.isArray(option.children) && option.children.length > 0;
+}
+function getCascaderColumns(data, activePath) {
+	const columns = [data];
+	let level = data;
+	for (let index = 0; index < activePath.length; index++) {
+		const node = level.find((option) => option.value === activePath[index]);
+		if (!node) break;
+		if (cascaderOptionHasChildren(node) && index < activePath.length - 1) {
+			columns.push(node.children);
+			level = node.children;
+		} else break;
+	}
+	return columns;
+}
+function getCascaderPathOptions(data, value) {
+	if (!value?.length) return [];
+	const result = [];
+	let level = data;
+	for (const current of value) {
+		const option = level?.find((item) => item.value === current);
+		if (!option) break;
+		result.push(option);
+		level = option.children;
+	}
+	return result;
+}
+function flattenCascaderPaths(data) {
+	const result = [];
+	const walk = (nodes, parentPath, parentOptions, parentDisabled) => {
+		nodes.forEach((node) => {
+			const path = [...parentPath, node.value];
+			const options = [...parentOptions, node];
+			const disabled = parentDisabled || !!node.disabled;
+			const leaf = !cascaderOptionHasChildren(node);
+			result.push({
+				path,
+				options,
+				leaf,
+				disabled
+			});
+			if (!leaf) walk(node.children, path, options, disabled);
+		});
+	};
+	walk(data, [], [], false);
+	return result;
+}
+//#endregion
+//#region src/components/Cascader/Cascader.ts
+var optionLabelToString = (option) => typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : option.value;
+var pathsEqual = (first, second) => !!first && !!second && first.length === second.length && first.every((item, index) => item === second[index]);
+var findEnabledIndex = (options, from, direction) => {
+	let index = from + direction;
+	while (index >= 0 && index < options.length) {
+		if (!options[index].disabled) return index;
+		index += direction;
+	}
+	return -1;
+};
+var call = (handler, event) => {
+	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
+	else if (typeof handler === "function") handler(event);
+};
+var Cascader = (0, vue.defineComponent)({
+	name: "Cascader",
+	inheritAttrs: false,
+	slots: Object,
+	props: {
+		data: {
+			type: Array,
+			required: true
+		},
+		modelValue: Array,
+		value: Array,
+		defaultValue: Array,
+		onChange: Function,
+		changeOnSelect: Boolean,
+		closeOnSelect: {
+			type: Boolean,
+			default: void 0
+		},
+		allowDeselect: {
+			type: Boolean,
+			default: true
+		},
+		withCheckIcon: {
+			type: Boolean,
+			default: true
+		},
+		checkIconPosition: {
+			type: String,
+			default: "right"
+		},
+		withColumns: {
+			type: Boolean,
+			default: true
+		},
+		expandTrigger: {
+			type: String,
+			default: "click"
+		},
+		searchable: Boolean,
+		searchValue: String,
+		defaultSearchValue: String,
+		onSearchChange: Function,
+		filter: Function,
+		renderSearchOption: Function,
+		formatValue: Function,
+		renderOption: Function,
+		separator: {
+			type: null,
+			default: void 0
+		},
+		columnWidth: {
+			type: [Number, String],
+			default: 200
+		},
+		maxDisplayedLevels: {
+			type: Number,
+			default: 3
+		},
+		previousLevelsControlLabel: {
+			type: String,
+			default: "Show previous levels"
+		},
+		nextLevelsControlLabel: {
+			type: String,
+			default: "Show next levels"
+		},
+		maxDropdownHeight: {
+			type: [Number, String],
+			default: 260
+		},
+		nothingFoundMessage: {
+			type: null,
+			default: void 0
+		},
+		clearable: Boolean,
+		clearSectionMode: {
+			type: String,
+			default: "both"
+		},
+		clearButtonProps: Object,
+		onClear: Function,
+		dropdownOpened: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultDropdownOpened: Boolean,
+		onDropdownOpen: Function,
+		onDropdownClose: Function,
+		comboboxProps: Object,
+		scrollAreaProps: Object,
+		chevronColor: String,
+		hiddenInputProps: Object,
+		openOnFocus: {
+			type: Boolean,
+			default: true
+		},
+		readOnly: Boolean,
+		disabled: Boolean,
+		size: {
+			type: [String, Number],
+			default: "sm"
+		},
+		classNames: [Object, Function],
+		styles: [Object, Function],
+		unstyled: Boolean
+	},
+	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 !== 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) ?? "/";
+		const nothingFoundContent = () => resolveNode(props.nothingFoundMessage, slots.nothingFoundMessage ?? slots.nothingFound);
+		const displayString = (0, vue.computed)(() => {
+			if (!currentValue.value || pathOptions.value.length === 0) return "";
+			const formatted = props.formatValue?.({
+				value: currentValue.value,
+				options: pathOptions.value
+			});
+			if (typeof formatted === "string" || typeof formatted === "number") return String(formatted);
+			return pathOptions.value.map(optionLabelToString).join(` ${separatorString.value} `);
+		});
+		const internalSearch = (0, vue.ref)(props.defaultSearchValue ?? (props.searchable && props.defaultValue ? getCascaderPathOptions(props.data, props.defaultValue).map(optionLabelToString).join(` ${separatorString.value} `) : ""));
+		const search = (0, vue.computed)(() => props.searchValue ?? internalSearch.value);
+		const activePath = (0, vue.ref)(currentValue.value ? [...currentValue.value] : []);
+		const keyboardNav = (0, vue.ref)(false);
+		const windowOffset = (0, vue.ref)(0);
+		const canInteract = (0, vue.computed)(() => !props.readOnly && !props.disabled);
+		const shouldCloseOnSelect = (0, vue.computed)(() => props.closeOnSelect ?? !props.allowDeselect);
+		const setSearch = (value) => {
+			if (props.searchValue === void 0) internalSearch.value = value;
+			props.onSearchChange?.(value);
+			emit("update:searchValue", value);
+		};
+		const setValue = (value) => {
+			if (props.modelValue === void 0 && props.value === void 0) internalValue.value = value;
+			const selectedOptions = getCascaderPathOptions(props.data, value);
+			emit("update:modelValue", value);
+			emit("change", value, selectedOptions);
+		};
+		const resetActivePath = () => {
+			activePath.value = currentValue.value ? [...currentValue.value] : [];
+		};
+		const combobox = useCombobox({
+			opened: () => props.dropdownOpened,
+			defaultOpened: props.defaultDropdownOpened,
+			onDropdownOpen: () => {
+				props.onDropdownOpen?.();
+				resetActivePath();
+			},
+			onDropdownClose: () => {
+				props.onDropdownClose?.();
+				if (props.searchable) setSearch(currentValue.value ? displayString.value : "");
+			}
+		});
+		(0, vue.watch)(currentValue, (value) => {
+			if (props.searchable) setSearch(value ? displayString.value : "");
+		}, { deep: true });
+		(0, vue.watch)(activePath, () => windowOffset.value = 0, { deep: true });
+		const selectPath = (path) => {
+			setValue(props.allowDeselect && pathsEqual(currentValue.value, path) ? null : path);
+		};
+		const expandOption = (level, option) => {
+			const optionPath = [...activePath.value.slice(0, level), option.value];
+			if (cascaderOptionHasChildren(option)) {
+				const first = findEnabledIndex(option.children, -1, 1);
+				activePath.value = first >= 0 ? [...optionPath, option.children[first].value] : optionPath;
+			} else activePath.value = optionPath;
+		};
+		const finishSelection = () => {
+			if (shouldCloseOnSelect.value) combobox.closeDropdown("mouse");
+		};
+		const handleOptionClick = (level, option) => {
+			if (option.disabled) return;
+			keyboardNav.value = false;
+			const path = [...activePath.value.slice(0, level), option.value];
+			if (cascaderOptionHasChildren(option)) {
+				if (props.changeOnSelect) {
+					selectPath(path);
+					finishSelection();
+				}
+				expandOption(level, option);
+			} else {
+				selectPath(path);
+				finishSelection();
+			}
+		};
+		const handleOptionMouseEnter = (level, option) => {
+			if (option.disabled) return;
+			keyboardNav.value = false;
+			if (props.expandTrigger !== "hover") return;
+			if (cascaderOptionHasChildren(option)) expandOption(level, option);
+			else activePath.value = [...activePath.value.slice(0, level), option.value];
+		};
+		const flatPaths = (0, vue.computed)(() => flattenCascaderPaths(props.data));
+		const isSearching = (0, vue.computed)(() => props.searchable && search.value.trim().length > 0 && search.value !== displayString.value);
+		const showFlatList = (0, vue.computed)(() => isSearching.value || !props.withColumns);
+		const flatListItems = (0, vue.computed)(() => {
+			const base = flatPaths.value.filter((path) => props.changeOnSelect || path.leaf);
+			if (!isSearching.value) return base;
+			return base.filter((path) => props.filter ? props.filter(search.value, path.options) : path.options.map(optionLabelToString).join(` ${separatorString.value} `).toLowerCase().includes(search.value.trim().toLowerCase()));
+		});
+		const renderSearchLabel = (options) => {
+			if (props.renderSearchOption) return props.renderSearchOption(search.value, options);
+			if (slots.renderSearchOption) return slots.renderSearchOption({
+				query: search.value,
+				options
+			});
+			return options.flatMap((option, index) => [index ? (0, vue.h)("span", { "data-cascader-separator": true }, [
+				" ",
+				separatorContent(),
+				" "
+			]) : null, option.label ?? option.value]);
+		};
+		const renderFlatList = () => (0, vue.h)(Combobox.Options, { "aria-label": typeof attrs.label === "string" ? attrs.label : void 0 }, () => [(0, vue.h)(ScrollArea.Autosize, {
+			mah: props.maxDropdownHeight,
+			type: "scroll",
+			scrollbarSize: "var(--combobox-padding)",
+			offsetScrollbars: "y",
+			...props.scrollAreaProps
+		}, () => flatListItems.value.map((item, index) => {
+			const selected = pathsEqual(currentValue.value, item.path);
+			return (0, vue.h)(Combobox.Option, {
+				value: index,
+				active: selected,
+				disabled: item.disabled
+			}, () => (0, vue.h)("span", { class: Cascader_module_default.flatOption }, [
+				selected && props.withCheckIcon && props.checkIconPosition === "left" ? (0, vue.h)(CheckIcon, { class: Cascader_module_default.columnOptionCheck }) : null,
+				(0, vue.h)("span", { class: Cascader_module_default.columnOptionLabel }, [renderSearchLabel(item.options)]),
+				selected && props.withCheckIcon && props.checkIconPosition !== "left" ? (0, vue.h)(CheckIcon, { class: Cascader_module_default.columnOptionCheck }) : null
+			]));
+		})), flatListItems.value.length === 0 && (props.nothingFoundMessage !== void 0 || slots.nothingFoundMessage || slots.nothingFound) ? (0, vue.h)(Combobox.Empty, {}, nothingFoundContent) : null]);
+		const optionId = (level, value) => id.value ? `${id.value}-cascader-list-${level}-${value}` : void 0;
+		const renderColumns = () => {
+			const allColumns = getCascaderColumns(props.data, activePath.value);
+			const totalColumns = allColumns.length;
+			const maxLevels = props.maxDisplayedLevels > 0 ? props.maxDisplayedLevels : totalColumns;
+			const maxOffset = Math.max(0, totalColumns - maxLevels);
+			const clampedOffset = Math.min(windowOffset.value, maxOffset);
+			const windowStart = Math.max(0, maxOffset - clampedOffset);
+			const windowEnd = Math.min(totalColumns, windowStart + maxLevels);
+			const visibleColumns = allColumns.slice(windowStart, windowEnd);
+			const hiddenBefore = windowStart;
+			const hiddenAfter = totalColumns - windowEnd;
+			const focusedLevel = activePath.value.length - 1;
+			const overflowControl = (position) => (0, vue.h)(UnstyledButton, {
+				class: Cascader_module_default.columnsOverflow,
+				"data-position": position,
+				tabindex: -1,
+				"aria-label": position === "start" ? props.previousLevelsControlLabel : props.nextLevelsControlLabel,
+				title: position === "start" ? props.previousLevelsControlLabel : props.nextLevelsControlLabel,
+				onMousedown: (event) => event.preventDefault(),
+				onClick: () => {
+					windowOffset.value = position === "start" ? Math.min(maxOffset, windowOffset.value + 1) : Math.max(0, windowOffset.value - 1);
+				}
+			}, () => (0, vue.h)(AccordionChevron));
+			return (0, vue.h)("div", {
+				class: Cascader_module_default.columnsList,
+				role: "presentation",
+				onMouseleave: () => {
+					if (props.expandTrigger === "hover") resetActivePath();
+				},
+				onMousemove: () => keyboardNav.value = false
+			}, [
+				hiddenBefore > 0 ? overflowControl("start") : null,
+				...visibleColumns.map((options, index) => {
+					const level = windowStart + index;
+					const isLast = index === visibleColumns.length - 1 && hiddenAfter === 0;
+					return (0, vue.h)("div", {
+						class: Cascader_module_default.column,
+						"data-last": isLast || void 0,
+						style: {
+							width: typeof props.columnWidth === "number" ? `${props.columnWidth}px` : props.columnWidth,
+							minWidth: typeof props.columnWidth === "number" ? `${props.columnWidth}px` : props.columnWidth
+						}
+					}, [(0, vue.h)(ScrollArea.Autosize, {
+						class: Cascader_module_default.columnScroll,
+						mah: props.maxDropdownHeight,
+						type: "scroll",
+						scrollbarSize: "var(--combobox-padding)",
+						role: "listbox",
+						...props.scrollAreaProps
+					}, () => options.length ? options.map((option) => {
+						const active = activePath.value[level] === option.value;
+						const current = active && level === focusedLevel && keyboardNav.value;
+						const inPath = active && level < focusedLevel;
+						const selected = !!currentValue.value && currentValue.value.length === level + 1 && currentValue.value[level] === option.value;
+						return (0, vue.h)(UnstyledButton, {
+							id: optionId(level, option.value),
+							class: Cascader_module_default.columnOption,
+							role: "option",
+							tabindex: -1,
+							"aria-selected": current || void 0,
+							"aria-disabled": option.disabled || void 0,
+							"data-active": current || void 0,
+							"data-in-path": inPath || void 0,
+							"data-selected": selected || void 0,
+							"data-disabled": option.disabled || void 0,
+							onMousedown: (event) => event.preventDefault(),
+							onClick: () => handleOptionClick(level, option),
+							onMouseenter: () => handleOptionMouseEnter(level, option)
+						}, () => [
+							selected && props.withCheckIcon && props.checkIconPosition === "left" ? (0, vue.h)(CheckIcon, { class: Cascader_module_default.columnOptionCheck }) : null,
+							(0, vue.h)("span", { class: Cascader_module_default.columnOptionLabel }, [props.renderOption ? props.renderOption(option, level) : slots.renderOption?.({
+								option,
+								level
+							}) ?? option.label ?? option.value]),
+							selected && props.withCheckIcon && props.checkIconPosition !== "left" ? (0, vue.h)(CheckIcon, { class: Cascader_module_default.columnOptionCheck }) : null,
+							cascaderOptionHasChildren(option) ? (0, vue.h)("span", { class: Cascader_module_default.columnOptionIcon }, (0, vue.h)(AccordionChevron)) : null
+						]);
+					}) : (0, vue.h)("div", { class: Cascader_module_default.columnEmpty }, [nothingFoundContent()]))]);
+				}),
+				hiddenAfter > 0 ? overflowControl("end") : null
+			]);
+		};
+		const handleColumnsKeyDown = (event) => {
+			keyboardNav.value = true;
+			const columns = getCascaderColumns(props.data, activePath.value);
+			const focusedLevel = Math.max(0, activePath.value.length - 1);
+			const currentColumn = columns[focusedLevel] ?? columns[0] ?? [];
+			const focusedIndex = currentColumn.findIndex((item) => item.value === activePath.value[focusedLevel]);
+			const focusedOption = focusedIndex >= 0 ? currentColumn[focusedIndex] : void 0;
+			if (event.key === "ArrowDown") {
+				const next = findEnabledIndex(currentColumn, focusedIndex, 1);
+				if (next >= 0) activePath.value = [...activePath.value.slice(0, focusedLevel), currentColumn[next].value];
+				return true;
+			}
+			if (event.key === "ArrowUp") {
+				const previous = findEnabledIndex(currentColumn, focusedIndex < 0 ? currentColumn.length : focusedIndex, -1);
+				if (previous >= 0) activePath.value = [...activePath.value.slice(0, focusedLevel), currentColumn[previous].value];
+				return true;
+			}
+			if (event.key === "ArrowRight") {
+				if (focusedOption && cascaderOptionHasChildren(focusedOption)) expandOption(focusedLevel, focusedOption);
+				return true;
+			}
+			if (event.key === "ArrowLeft") {
+				if (activePath.value.length > 1) activePath.value = activePath.value.slice(0, -1);
+				return true;
+			}
+			if (event.key === "Enter" && focusedOption) {
+				const path = [...activePath.value.slice(0, focusedLevel), focusedOption.value];
+				if (cascaderOptionHasChildren(focusedOption)) {
+					if (props.changeOnSelect) {
+						selectPath(path);
+						finishSelection();
+					}
+					expandOption(focusedLevel, focusedOption);
+				} else {
+					selectPath(path);
+					finishSelection();
+				}
+				return true;
+			}
+			return false;
+		};
+		const handleKeydown = (event) => {
+			call(attrs.onKeydown, event);
+			if (event.defaultPrevented) return;
+			if (event.key === "Escape") {
+				combobox.closeDropdown("keyboard");
+				return;
+			}
+			if (showFlatList.value || !canInteract.value) return;
+			if (!combobox.dropdownOpened) {
+				if ([
+					"ArrowDown",
+					"ArrowUp",
+					"ArrowRight",
+					"Enter"
+				].includes(event.key) || !props.searchable && event.key === " ") {
+					event.preventDefault();
+					keyboardNav.value = true;
+					combobox.openDropdown("keyboard");
+					if (!currentValue.value && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+						const rootIndex = event.key === "ArrowDown" ? findEnabledIndex(props.data, -1, 1) : findEnabledIndex(props.data, props.data.length, -1);
+						if (rootIndex >= 0) activePath.value = [props.data[rootIndex].value];
+					}
+				}
+				return;
+			}
+			if (handleColumnsKeyDown(event)) event.preventDefault();
+			else if (!props.searchable && event.key === " ") event.preventDefault();
+		};
+		return () => {
+			const inputAttrs = { ...attrs };
+			delete inputAttrs.name;
+			delete inputAttrs.onKeydown;
+			delete inputAttrs.onFocus;
+			delete inputAttrs.onBlur;
+			delete inputAttrs.onClick;
+			delete inputAttrs.onInput;
+			const clearButton = (0, vue.h)(Combobox.ClearButton, {
+				...props.clearButtonProps,
+				onMousedown: (event) => event.preventDefault(),
+				onClick: () => {
+					props.onClear?.();
+					setValue(null);
+					activePath.value = [];
+					setSearch("");
+					combobox.focusTarget();
+				}
+			});
+			const hasValue = !!currentValue.value?.length;
+			const listId = id.value ? `${id.value}-cascader-list` : void 0;
+			const focusedLevel = activePath.value.length - 1;
+			const activeDescendant = keyboardNav.value && focusedLevel >= 0 ? optionId(focusedLevel, activePath.value[focusedLevel]) : void 0;
+			return (0, vue.h)("div", { style: { display: "contents" } }, [(0, vue.h)(Combobox, {
+				store: combobox,
+				__staticSelector: "Cascader",
+				classNames: props.classNames,
+				styles: props.styles,
+				unstyled: props.unstyled,
+				readOnly: props.readOnly,
+				size: String(props.size),
+				width: showFlatList.value ? "target" : "max-content",
+				position: "bottom-start",
+				...props.comboboxProps,
+				onOptionSubmit: (raw) => {
+					const item = flatListItems.value[Number(raw)];
+					if (!item || item.disabled) return;
+					selectPath(item.path);
+					activePath.value = [...item.path];
+					finishSelection();
+				}
+			}, { default: () => [(0, vue.h)(Combobox.Target, {
+				targetType: props.searchable ? "input" : "button",
+				withKeyboardNavigation: showFlatList.value
+			}, () => (0, vue.h)(InputBase, {
+				...inputAttrs,
+				id: id.value,
+				__staticSelector: "Cascader",
+				size: props.size,
+				classNames: props.classNames,
+				styles: props.styles,
+				unstyled: props.unstyled,
+				disabled: props.disabled,
+				readonly: props.readOnly || !props.searchable,
+				pointer: !props.searchable,
+				value: props.searchable ? search.value : displayString.value,
+				"aria-controls": listId,
+				"aria-activedescendant": activeDescendant,
+				__defaultRightSection: (0, vue.h)(Combobox.Chevron, {
+					size: String(props.size),
+					color: props.chevronColor
+				}),
+				__clearSection: clearButton,
+				__clearable: props.clearable && hasValue && !props.disabled && !props.readOnly,
+				__clearSectionMode: props.clearSectionMode,
+				rightSectionPointerEvents: attrs.rightSectionPointerEvents || "none",
+				onInput: (event) => {
+					setSearch(event.target.value);
+					if (canInteract.value) combobox.openDropdown("keyboard");
+				},
+				onFocus: (event) => {
+					if (props.openOnFocus && props.searchable && canInteract.value) combobox.openDropdown("keyboard");
+					call(attrs.onFocus, event);
+				},
+				onBlur: (event) => {
+					combobox.closeDropdown("unknown");
+					call(attrs.onBlur, event);
+				},
+				onClick: (event) => {
+					if (canInteract.value) {
+						keyboardNav.value = false;
+						if (props.searchable) combobox.openDropdown("mouse");
+						else combobox.toggleDropdown("mouse");
+					}
+					call(attrs.onClick, event);
+				},
+				onKeydown: handleKeydown
+			}, {
+				label: slots.label,
+				description: slots.description,
+				error: slots.error,
+				leftSection: slots.leftSection,
+				rightSection: slots.rightSection
+			})), (0, vue.h)(Combobox.Dropdown, {
+				hidden: props.readOnly || props.disabled,
+				style: showFlatList.value ? void 0 : { padding: 0 }
+			}, () => showFlatList.value ? renderFlatList() : renderColumns())] }), (0, vue.h)(Combobox.HiddenInput, {
+				name: attrs.name,
+				form: attrs.form,
+				disabled: props.disabled,
+				value: currentValue.value,
+				...props.hiddenInputProps
+			})]);
+		};
+	}
+});
+Object.assign(Cascader, { classes: {
+	...InputBase.classes,
+	...Combobox.classes,
+	...Cascader_module_default
+} });
 //#endregion
 exports.Accordion = Accordion;
 exports.AccordionChevron = AccordionChevron;
@@ -32644,6 +34064,7 @@ exports.ButtonGroup = ButtonGroup;
 exports.ButtonGroupSection = ButtonGroupSection;
 exports.Card = Card;
 exports.CardSection = CardSection;
+exports.Cascader = Cascader;
 exports.Center = Center;
 exports.CheckIcon = CheckIcon;
 exports.Checkbox = Checkbox;
@@ -32713,6 +34134,7 @@ exports.FlatTreeNode = FlatTreeNode;
 exports.Flex = Flex;
 exports.FloatingIndicator = FloatingIndicator;
 exports.FloatingWindow = FloatingWindow;
+exports.FloatingWindowResizeHandle = FloatingWindowResizeHandle;
 exports.FocusTrap = FocusTrap;
 exports.FocusTrapInitialFocus = FocusTrapInitialFocus;
 exports.Grid = Grid;
@@ -32896,6 +34318,7 @@ exports.VisuallyHidden = VisuallyHidden;
 exports.alpha = alpha;
 exports.buildValue = buildValue;
 exports.camelToKebabCase = camelToKebabCase;
+exports.cascaderOptionHasChildren = cascaderOptionHasChildren;
 exports.colorsTuple = colorsTuple;
 exports.convertCssVariables = convertCssVariables;
 exports.convertHsvaTo = convertHsvaTo;
@@ -32918,6 +34341,7 @@ exports.factory = factory;
 exports.filterProps = filterProps;
 exports.filterTreeData = filterTreeData;
 exports.findClosestNumber = findClosestNumber;
+exports.flattenCascaderPaths = flattenCascaderPaths;
 exports.flattenTreeData = flattenTreeData;
 exports.foldAccents = foldAccents;
 exports.formatNumber = formatNumber;
@@ -32925,6 +34349,8 @@ exports.getAppShellVariables = getVariables;
 exports.getAutoContrastValue = getAutoContrastValue;
 exports.getBaseValue = getBaseValue;
 exports.getBreakpointValue = getBreakpointValue;
+exports.getCascaderColumns = getCascaderColumns;
+exports.getCascaderPathOptions = getCascaderPathOptions;
 exports.getContrastColor = getContrastColor;
 exports.getDefaultZIndex = getDefaultZIndex;
 exports.getDigitParts = getDigitParts;