@mantine-vue/core 3.6.0 → 3.7.0

package/cjs/index.cjs

@@ -1960,36 +1960,6 @@ var InlineStyles = (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region src/core/factory/use-forwarded-ref.ts
-/**
-* Re-targets the `ref` a parent attached to this component so it points at the rendered DOM node
-* instead of the component instance.
-*
-* @deprecated Reads `vnode.ref`'s normalized `{ i, r, k, f }` shape, which is a Vue internal --
-* best-effort, and degrades to a no-op rather than crashing if Vue changes it. Use the factory's
-* `rootRef` prop or the exposed `rootElement` instead. Kept only for components not yet migrated
-* to a factory payload.
-*/
-function useForwardedRef(elementRef) {
-	const instance = (0, vue.getCurrentInstance)();
-	const sync = () => {
-		const externalRef = getExternalRef(instance?.vnode.ref);
-		if (externalRef) (0, _mantine_vue_hooks.assignRef)(externalRef, elementRef.value);
-	};
-	(0, vue.onMounted)(sync);
-	(0, vue.onUpdated)(sync);
-	(0, vue.onBeforeUnmount)(() => {
-		const externalRef = getExternalRef(instance?.vnode.ref);
-		if (externalRef) (0, _mantine_vue_hooks.assignRef)(externalRef, null);
-	});
-}
-function getExternalRef(vnodeRef) {
-	if (!vnodeRef) return null;
-	const raw = typeof vnodeRef === "object" && vnodeRef !== null && "r" in vnodeRef ? vnodeRef.r : vnodeRef;
-	if (typeof raw === "function" || raw !== null && typeof raw === "object" && "value" in raw) return raw;
-	return null;
-}
-//#endregion
 //#region src/core/Box/Box.ts
 function styleProp() {
 	return [
@@ -2147,13 +2117,13 @@ var Box = (0, vue.defineComponent)({
 			default: void 0
 		}
 	},
-	setup(props, { attrs, slots }) {
+	setup(props, { attrs, slots, expose }) {
 		const theme = useSafeMantineTheme();
-		const elementRef = (0, vue.ref)(null);
-		useForwardedRef(elementRef);
+		const rootElement = (0, vue.ref)(null);
+		expose({ rootElement });
 		const setRootRef = (value) => {
 			const node = value?.$el ?? value ?? null;
-			elementRef.value = node;
+			rootElement.value = node;
 			(0, _mantine_vue_hooks.assignRef)(props.rootRef, node);
 		};
 		return () => {
@@ -2505,10 +2475,6 @@ var UnstyledButton = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)
 	inheritAttrs: false,
 	__name: "UnstyledButton",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		component: { default: "button" },
 		__staticSelector: { default: void 0 },
 		variant: { default: void 0 },
@@ -2519,6 +2485,10 @@ var UnstyledButton = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -2547,8 +2517,6 @@ var UnstyledButton = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)
 				return props.unstyled;
 			}
 		});
-		const elementRef = (0, vue.ref)(null);
-		useForwardedRef(elementRef);
 		const rootElement = (0, vue.ref)(null);
 		const setRootRef = (node) => {
 			rootElement.value = node;
@@ -2564,9 +2532,7 @@ var UnstyledButton = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)
 				variant: props.variant,
 				mod: props.mod,
 				type: (0, vue.unref)(attrs).type ?? (props.component === "button" ? "button" : void 0),
-				rootRef: setRootRef,
-				ref_key: "elementRef",
-				ref: elementRef
+				rootRef: setRootRef
 			}), {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -2594,10 +2560,6 @@ var Paper = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Paper",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		component: { default: "div" },
 		shadow: { default: void 0 },
 		radius: { default: void 0 },
@@ -2605,7 +2567,11 @@ var Paper = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -2621,8 +2587,6 @@ var Paper = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 			varsResolver: varsResolver$97,
 			unstyled: props.unstyled
 		});
-		const elementRef = (0, vue.ref)(null);
-		useForwardedRef(elementRef);
 		const rootElement = (0, vue.ref)(null);
 		const setRootRef = (node) => {
 			rootElement.value = node;
@@ -2637,8 +2601,6 @@ var Paper = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 					style: (0, vue.unref)(attrs).style
 				})
 			}, {
-				ref_key: "elementRef",
-				ref: elementRef,
 				component: (0, vue.unref)(props).component,
 				mod: [{ "with-border": (0, vue.unref)(props).withBorder }, (0, vue.unref)(attrs).mod],
 				rootRef: setRootRef
@@ -2670,10 +2632,6 @@ var Overlay = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Overlay",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		component: { default: "div" },
 		backgroundOpacity: { default: void 0 },
 		color: { default: void 0 },
@@ -2695,6 +2653,10 @@ var Overlay = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -2832,7 +2794,6 @@ var Loader = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Loader",
 	props: {
-		rootRef: {},
 		size: { default: void 0 },
 		color: { default: void 0 },
 		type: { default: void 0 },
@@ -2843,7 +2804,8 @@ var Loader = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -2907,16 +2869,16 @@ var Center = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Center",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		component: { default: "div" },
 		inline: { type: Boolean },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -2966,10 +2928,6 @@ var Container = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Container",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		size: {},
 		fluid: {
 			type: Boolean,
@@ -2982,6 +2940,10 @@ var Container = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -3034,10 +2996,6 @@ var AspectRatio = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "AspectRatio",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		ratio: { default: void 0 },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
@@ -3045,6 +3003,10 @@ var AspectRatio = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -3105,10 +3067,6 @@ var Divider = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Divider",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		color: { default: void 0 },
 		size: {},
 		label: {
@@ -3129,7 +3087,11 @@ var Divider = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -3200,10 +3162,6 @@ var Text = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Text",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		component: { default: void 0 },
 		__staticSelector: { default: void 0 },
 		size: { default: void 0 },
@@ -3234,6 +3192,10 @@ var Text = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -3251,8 +3213,6 @@ var Text = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 			varsResolver: varsResolver$91,
 			unstyled: props.unstyled
 		});
-		const elementRef = (0, vue.ref)(null);
-		useForwardedRef(elementRef);
 		const getTextTruncate = (value) => value === "start" ? "start" : value === "end" || value ? "end" : void 0;
 		const rootElement = (0, vue.ref)(null);
 		const setRootRef = (node) => {
@@ -3273,8 +3233,6 @@ var Text = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 					inline: (0, vue.unref)(props).inline,
 					inherit: (0, vue.unref)(props).inherit
 				}, (0, vue.unref)(props).mod],
-				ref_key: "elementRef",
-				ref: elementRef,
 				rootRef: setRootRef
 			}), {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
@@ -3301,10 +3259,6 @@ var Anchor = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Anchor",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		component: { default: "a" },
 		underline: { default: void 0 },
 		variant: { default: void 0 },
@@ -3314,6 +3268,10 @@ var Anchor = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -3406,10 +3364,6 @@ var Title = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Title",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		order: { default: void 0 },
 		size: {},
 		lineClamp: { default: void 0 },
@@ -3417,7 +3371,11 @@ var Title = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -3484,16 +3442,16 @@ var Code = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Code",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		color: { default: void 0 },
 		block: { type: Boolean },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -3546,15 +3504,15 @@ var Kbd = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Kbd",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		size: { default: void 0 },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -3627,15 +3585,15 @@ var Mark = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Mark",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		color: { default: void 0 },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -3686,10 +3644,6 @@ var Image = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Image",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		src: { default: void 0 },
 		fallbackSrc: { default: void 0 },
 		radius: { default: void 0 },
@@ -3700,6 +3654,10 @@ var Image = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	emits: ["error"],
@@ -3762,10 +3720,6 @@ var BackgroundImage = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent
 	inheritAttrs: false,
 	__name: "BackgroundImage",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		src: {},
 		radius: {},
 		classNames: { default: void 0 },
@@ -3774,6 +3728,10 @@ var BackgroundImage = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -3834,10 +3792,6 @@ var Skeleton = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Skeleton",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		visible: {
 			type: Boolean,
 			default: void 0
@@ -3859,6 +3813,10 @@ var Skeleton = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -3920,10 +3878,6 @@ var ColorSwatch = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ColorSwatch",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		color: {},
 		size: { default: void 0 },
 		radius: { default: void 0 },
@@ -3937,6 +3891,10 @@ var ColorSwatch = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -4201,10 +4159,6 @@ var Badge = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Badge",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		component: { default: "div" },
 		size: { default: void 0 },
 		circle: { type: Boolean },
@@ -4244,7 +4198,11 @@ var Badge = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -4333,10 +4291,6 @@ var ThemeIcon = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ThemeIcon",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		size: { default: void 0 },
 		color: { default: void 0 },
 		radius: { default: void 0 },
@@ -4349,7 +4303,11 @@ var ThemeIcon = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -4797,16 +4755,16 @@ var ActionIconGroup = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ActionIconGroup",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		orientation: { default: void 0 },
 		borderWidth: {},
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -4873,10 +4831,6 @@ var ActionIconGroupSection = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ActionIconGroupSection",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		size: { default: void 0 },
 		color: { default: void 0 },
 		radius: { default: void 0 },
@@ -4892,6 +4846,10 @@ var ActionIconGroupSection = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: void 0
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -4956,10 +4914,6 @@ var ActionIcon = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ActionIcon",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		component: { default: "button" },
 		loading: {
 			type: Boolean,
@@ -4986,6 +4940,10 @@ var ActionIcon = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -5280,16 +5238,16 @@ var Button_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		mod: {},
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		classNames: {},
 		styles: {},
 		vars: {},
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -5302,8 +5260,6 @@ var Button_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const slots = (0, vue.useSlots)();
 		const attrs = (0, vue.useAttrs)();
 		const props = useProps("Button", null, rawProps);
-		const elementRef = (0, vue.ref)(null);
-		useForwardedRef(elementRef);
 		const rootElement = (0, vue.ref)(null);
 		const setRootRef = (node) => {
 			rootElement.value = node;
@@ -5358,9 +5314,6 @@ var Button_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(UnstyledButton), (0, vue.mergeProps)({
-				ref_key: "elementRef",
-				ref: elementRef
-			}, {
 				...(0, vue.unref)(attrs),
 				...rootStyles.value
 			}, {
@@ -5429,16 +5382,16 @@ var ButtonGroup = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ButtonGroup",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		orientation: { default: void 0 },
 		borderWidth: {},
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -5506,10 +5459,6 @@ var ButtonGroupSection = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ButtonGroupSection",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		size: { default: void 0 },
 		color: { default: void 0 },
 		radius: { default: void 0 },
@@ -5525,6 +5474,10 @@ var ButtonGroupSection = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: void 0
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -5590,10 +5543,6 @@ var Burger = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Burger",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		size: { default: void 0 },
 		lineSize: { default: void 0 },
 		color: { default: void 0 },
@@ -5609,6 +5558,10 @@ var Burger = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -5663,10 +5616,6 @@ var Collapse = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Collapse",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		orientation: { default: void 0 },
 		expanded: { type: Boolean },
 		transitionDuration: { default: void 0 },
@@ -5678,6 +5627,10 @@ var Collapse = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		keepMounted: {
 			type: Boolean,
 			default: void 0
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	emits: ["transition-end", "transition-start"],
@@ -5793,7 +5746,6 @@ var LoadingOverlay = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "LoadingOverlay",
 	props: {
-		rootRef: {},
 		transitionProps: { default: void 0 },
 		loaderProps: { default: void 0 },
 		overlayProps: { default: void 0 },
@@ -5808,7 +5760,8 @@ var LoadingOverlay = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: [
 		"enter",
@@ -5818,6 +5771,7 @@ var LoadingOverlay = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const rawProps = __props;
+		const slots = (0, vue.useSlots)();
 		const emit = __emit;
 		const attrs = (0, vue.useAttrs)();
 		const props = useProps("LoadingOverlay", defaultProps$57, rawProps);
@@ -5873,7 +5827,11 @@ var LoadingOverlay = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 								className: (0, vue.unref)(props).loaderProps?.class,
 								style: (0, vue.unref)(props).loaderProps?.style
 							})
-						}), null, 16, ["unstyled"]),
+						}), (0, vue.createSlots)({ _: 2 }, [slots.loader ? {
+							name: "default",
+							fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "loader")]),
+							key: "0"
+						} : void 0]), 1040, ["unstyled"]),
 						(0, vue.createVNode)((0, vue.unref)(Overlay), (0, vue.mergeProps)({
 							...overlayProps.value,
 							...(0, vue.unref)(getStyles)("overlay", {
@@ -5895,9 +5853,9 @@ var LoadingOverlay = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 							color: overlayProps.value.color || (0, vue.unref)(theme).colors.dark[5]
 						}), null, 16, ["unstyled", "color"])
 					]),
-					_: 1
+					_: 3
 				}, 16)) : (0, vue.createCommentVNode)("", true)]),
-				_: 1
+				_: 3
 			}, 8, [
 				"transition",
 				"duration",
@@ -5972,10 +5930,6 @@ var Card = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Card",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		component: { default: "div" },
 		shadow: { default: void 0 },
 		radius: { default: void 0 },
@@ -5991,6 +5945,10 @@ var Card = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -6085,10 +6043,6 @@ var Alert = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Alert",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		id: { default: void 0 },
 		radius: { default: void 0 },
 		color: { default: void 0 },
@@ -6127,7 +6081,11 @@ var Alert = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	emits: ["close"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -6237,10 +6195,6 @@ var Blockquote = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Blockquote",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		icon: {
 			type: [
 				Object,
@@ -6272,7 +6226,11 @@ var Blockquote = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -6331,7 +6289,6 @@ var Breadcrumbs = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Breadcrumbs",
 	props: {
-		rootRef: {},
 		separator: {
 			type: [
 				Object,
@@ -6351,7 +6308,8 @@ var Breadcrumbs = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -6415,10 +6373,6 @@ var ListItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ListItem",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		icon: {
 			type: [
 				Object,
@@ -6434,7 +6388,11 @@ var ListItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		mod: { default: void 0 },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
-		vars: { default: void 0 }
+		vars: { default: void 0 },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -6502,10 +6460,6 @@ var List = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "List",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		type: { default: void 0 },
 		withPadding: {
 			type: Boolean,
@@ -6542,6 +6496,10 @@ var List = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -6677,10 +6635,6 @@ var Indicator = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Indicator",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		position: { default: void 0 },
 		offset: { default: void 0 },
 		inline: { type: Boolean },
@@ -6716,7 +6670,11 @@ var Indicator = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -6787,10 +6745,6 @@ var AvatarGroup = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "AvatarGroup",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		spacing: { default: void 0 },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
@@ -6798,6 +6752,10 @@ var AvatarGroup = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -6922,10 +6880,6 @@ var Avatar = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Avatar",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		component: { default: "div" },
 		size: { default: void 0 },
 		radius: { default: void 0 },
@@ -6948,6 +6902,10 @@ var Avatar = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -7153,7 +7111,6 @@ var SimpleGrid = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "SimpleGrid",
 	props: {
-		rootRef: {},
 		cols: { default: void 0 },
 		spacing: { default: void 0 },
 		verticalSpacing: { default: void 0 },
@@ -7167,7 +7124,8 @@ var SimpleGrid = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -7336,14 +7294,14 @@ var GridCol_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "GridCol",
 	props: {
-		rootRef: {},
 		span: { default: void 0 },
 		order: { default: void 0 },
 		offset: { default: void 0 },
 		align: { default: void 0 },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
-		vars: { default: void 0 }
+		vars: { default: void 0 },
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -7473,7 +7431,6 @@ var Grid = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Grid",
 	props: {
-		rootRef: {},
 		gap: { default: void 0 },
 		rowGap: { default: void 0 },
 		columnGap: { default: void 0 },
@@ -7493,7 +7450,8 @@ var Grid = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -7641,17 +7599,17 @@ var ScrollAreaRoot = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ScrollAreaRoot",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		getStyles: {},
 		type: {},
 		scrollbars: {
 			type: [String, Boolean],
 			default: void 0
 		},
-		scrollHideDelay: {}
+		scrollHideDelay: {},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		/**
@@ -8377,7 +8335,6 @@ var ScrollArea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ScrollArea",
 	props: {
-		rootRef: {},
 		scrollbarSize: {},
 		type: {},
 		scrollHideDelay: {},
@@ -8399,7 +8356,8 @@ var ScrollArea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: [
 		"scroll-position-change",
@@ -8556,7 +8514,10 @@ var ScrollArea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			rootElement.value = node;
 			(0, _mantine_vue_hooks.assignRef)(props.rootRef, node);
 		};
-		__expose({ rootElement });
+		__expose({
+			rootElement,
+			viewport
+		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ScrollAreaRoot), (0, vue.mergeProps)({ "root-ref": setRootRef }, {
 				...(0, vue.unref)(attrs),
@@ -8631,7 +8592,6 @@ var ScrollAreaAutosize = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ScrollAreaAutosize",
 	props: {
-		rootRef: {},
 		scrollbarSize: {},
 		type: {},
 		scrollHideDelay: {},
@@ -8775,10 +8735,6 @@ var varsResolver$60 = createVarsResolver((_, { transitionDuration, chevronSize,
 	"--accordion-chevron-size": chevronSize === void 0 ? void 0 : rem(chevronSize),
 	"--accordion-radius": radius === void 0 ? void 0 : getRadius(radius)
 } }));
-/** The default slot may be a function or already-rendered children. */
-function renderContent$2(content) {
-	return typeof content === "function" ? content() : content;
-}
 //#endregion
 //#region src/components/Accordion/Accordion.vue
 var Accordion_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -8905,10 +8861,6 @@ var Accordion_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			className: attrs.class,
 			style: attrs.style
 		}));
-		const renderDefault = Object.assign((slotProps) => renderContent$2(slotProps.nodes), { props: { nodes: {
-			type: Function,
-			required: false
-		} } });
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(Box), (0, vue.mergeProps)({
 				...(0, vue.unref)(attrs),
@@ -8918,8 +8870,8 @@ var Accordion_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				variant: (0, vue.unref)(props).variant,
 				"data-accordion": true
 			}), {
-				default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(renderDefault)), { nodes: (0, vue.unref)(slots).default }, null, 8, ["nodes"]))]),
-				_: 1
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
 			}, 16, ["id", "variant"]);
 		};
 	}
@@ -8943,10 +8895,6 @@ var AccordionControl = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "AccordionControl",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -8979,7 +8927,11 @@ var AccordionControl = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: {},
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	emits: ["click", "keydown"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -9107,13 +9059,13 @@ var AccordionItem = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "AccordionItem",
 	props: {
-		rootRef: { type: [Object, Function] },
 		value: {},
 		mod: {},
 		classNames: {},
 		styles: {},
 		vars: {},
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: { type: [Object, Function] }
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -9155,13 +9107,13 @@ var AccordionPanel = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "AccordionPanel",
 	props: {
-		rootRef: {},
 		keepMounted: {
 			type: Boolean,
 			default: void 0
 		},
 		classNames: { default: void 0 },
-		styles: { default: void 0 }
+		styles: { default: void 0 },
+		rootRef: {}
 	},
 	emits: ["transition-end", "transition-start"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -9243,10 +9195,6 @@ var Scroller = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Scroller",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		scrollAmount: { default: void 0 },
 		controlSize: { default: void 0 },
 		edgeGradientColor: { default: void 0 },
@@ -9294,6 +9242,10 @@ var Scroller = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -9414,7 +9366,6 @@ var TableScrollContainer = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "TableScrollContainer",
 	props: {
-		rootRef: {},
 		minWidth: {},
 		maxHeight: { default: void 0 },
 		type: { default: void 0 },
@@ -9425,7 +9376,8 @@ var TableScrollContainer = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -9801,10 +9753,6 @@ var Table = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Table",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		layout: {},
 		captionSide: {},
 		borderColor: {},
@@ -9850,6 +9798,10 @@ var Table = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -9949,14 +9901,14 @@ var ProgressLabel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ProgressLabel",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		className: { default: void 0 },
-		style: { default: void 0 }
+		style: { default: void 0 },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -10008,10 +9960,6 @@ var ProgressRoot = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ProgressRoot",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		size: { default: void 0 },
 		radius: { default: void 0 },
 		autoContrast: {
@@ -10027,6 +9975,10 @@ var ProgressRoot = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -10081,10 +10033,6 @@ var ProgressSection = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ProgressSection",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		value: {},
 		withAria: {
 			type: Boolean,
@@ -10102,7 +10050,11 @@ var ProgressSection = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		mod: { default: void 0 },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
-		vars: { default: void 0 }
+		vars: { default: void 0 },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -10161,7 +10113,6 @@ var Progress = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Progress",
 	props: {
-		rootRef: {},
 		value: {},
 		color: { default: void 0 },
 		striped: { type: Boolean },
@@ -10177,7 +10128,8 @@ var Progress = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -10394,10 +10346,6 @@ var RingProgress = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "RingProgress",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		label: {
 			type: [
 				Object,
@@ -10427,6 +10375,10 @@ var RingProgress = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -10764,10 +10716,6 @@ var RollingNumber = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "RollingNumber",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		value: {},
 		prefix: {},
 		suffix: {},
@@ -10795,6 +10743,10 @@ var RollingNumber = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -10915,10 +10867,6 @@ var TimelineItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "TimelineItem",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		__active: {
 			type: Boolean,
 			default: false
@@ -10983,7 +10931,11 @@ var TimelineItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		className: { default: void 0 },
-		style: { default: void 0 }
+		style: { default: void 0 },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -11109,7 +11061,6 @@ var Timeline = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Timeline",
 	props: {
-		rootRef: {},
 		active: { default: void 0 },
 		color: { default: void 0 },
 		radius: { default: void 0 },
@@ -11131,7 +11082,8 @@ var Timeline = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -11300,10 +11252,6 @@ var Highlight = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Highlight",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		highlight: {},
 		color: { default: void 0 },
 		highlightStyles: {
@@ -11333,6 +11281,10 @@ var Highlight = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -11508,10 +11460,6 @@ var SemiCircleProgress = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "SemiCircleProgress",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		value: {},
 		size: { default: void 0 },
 		thickness: { default: void 0 },
@@ -11536,7 +11484,11 @@ var SemiCircleProgress = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -11632,10 +11584,6 @@ var Spoiler = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Spoiler",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		maxHeight: { default: void 0 },
 		showLabel: {
 			type: [
@@ -11676,7 +11624,11 @@ var Spoiler = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	emits: ["update:expanded"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -11777,10 +11729,6 @@ var Fieldset = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Fieldset",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		legend: {
 			type: [
 				Object,
@@ -11798,7 +11746,11 @@ var Fieldset = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -11941,11 +11893,11 @@ var InputClearButton = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "InputClearButton",
 	props: {
-		rootRef: {},
 		size: { default: void 0 },
 		variant: { default: void 0 },
 		classNames: { default: void 0 },
-		styles: { default: void 0 }
+		styles: { default: void 0 },
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -12017,10 +11969,6 @@ var InputDescription = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "InputDescription",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		size: {},
 		__inheritStyles: {
 			type: Boolean,
@@ -12032,6 +11980,10 @@ var InputDescription = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -12088,10 +12040,6 @@ var InputError = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "InputError",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		size: {},
 		__inheritStyles: {
 			type: Boolean,
@@ -12103,6 +12051,10 @@ var InputError = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -12163,10 +12115,6 @@ var InputLabel = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "InputLabel",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		required: {
 			type: Boolean,
 			default: false
@@ -12181,6 +12129,10 @@ var InputLabel = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -12246,15 +12198,15 @@ var InputPlaceholder = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "InputPlaceholder",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		error: { default: void 0 },
 		mod: { default: void 0 },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -12748,7 +12700,6 @@ var Input = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 			default: void 0
 		},
 		wrapperProps: {},
-		rootRef: {},
 		mod: {},
 		classNames: {},
 		styles: {},
@@ -12756,7 +12707,8 @@ var Input = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: ["update:modelValue", "change"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -12765,7 +12717,7 @@ var Input = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		const slots = (0, vue.useSlots)();
 		const attrs = (0, vue.useAttrs)();
 		const props = useProps("Input", defaultProps$33, rawProps);
-		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
+		const [value, setValue, isControlled] = (0, _mantine_vue_hooks.useUncontrolled)({
 			value: () => props.modelValue,
 			defaultValue: props.defaultValue,
 			finalValue: void 0,
@@ -12846,12 +12798,32 @@ var Input = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 			if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
 			else if (typeof handler === "function") handler(event);
 		}
+		/**
+		* A controlled field shows `modelValue`, not what was typed. When the parent does not take the
+		* new value there is nothing to re-render, so the element is put back once the parent has had
+		* its tick to respond.
+		*/
+		function restoreControlledValue(element) {
+			if (!isControlled.value) return;
+			(0, vue.nextTick)(() => {
+				const expected = inputValue.value == null ? "" : String(inputValue.value);
+				if (element.value !== expected) element.value = expected;
+			});
+		}
 		function onInput(event) {
 			callHandler(attrs.onInput, event);
-			if (props.component !== "select") setValue(event.currentTarget.value);
+			if (props.component !== "select") {
+				const element = event.currentTarget;
+				setValue(element.value);
+				restoreControlledValue(element);
+			}
 		}
 		function onChange(event) {
-			if (props.component === "select") setValue(event.currentTarget.value);
+			if (props.component === "select") {
+				const element = event.currentTarget;
+				setValue(element.value);
+				restoreControlledValue(element);
+			}
 		}
 		/**
 		* `onInput` is forwarded explicitly by the handler above, and `onChange` is reserved
@@ -13122,7 +13094,6 @@ var InputBase = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 			default: void 0
 		},
 		__bottomSectionProps: {},
-		rootRef: {},
 		mod: {},
 		classNames: {},
 		styles: {},
@@ -13130,7 +13101,8 @@ var InputBase = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: ["update:modelValue", "change"],
 	setup(__props, { emit: __emit }) {
@@ -13584,10 +13556,6 @@ var Notification = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Notification",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		color: { default: void 0 },
 		radius: { default: void 0 },
 		icon: {
@@ -13626,7 +13594,11 @@ var Notification = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	emits: ["close"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -14012,7 +13984,6 @@ var NumberInput = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "NumberInput",
 	props: {
-		rootRef: {},
 		modelValue: { default: void 0 },
 		defaultValue: { default: void 0 },
 		allowLeadingZeros: {
@@ -14139,7 +14110,8 @@ var NumberInput = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		classNames: {},
 		styles: {},
-		vars: {}
+		vars: {},
+		rootRef: {}
 	},
 	emits: [
 		"update:modelValue",
@@ -14552,7 +14524,6 @@ var Group = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Group",
 	props: {
-		rootRef: {},
 		justify: { default: void 0 },
 		align: { default: void 0 },
 		wrap: { default: void 0 },
@@ -14565,7 +14536,8 @@ var Group = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -14722,7 +14694,6 @@ var PinInput = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		inputMode: {},
 		ariaLabel: {},
 		hiddenInputProps: {},
-		rootRef: {},
 		inputRef: {},
 		getInputProps: {},
 		variant: {},
@@ -14732,7 +14703,8 @@ var PinInput = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: [
 		"update:modelValue",
@@ -15077,7 +15049,6 @@ var NativeSelect = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "NativeSelect",
 	props: {
-		rootRef: {},
 		data: {},
 		size: {},
 		error: {
@@ -15150,7 +15121,8 @@ var NativeSelect = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: ["update:modelValue", "change"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -15294,10 +15266,6 @@ var NavLink = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "NavLink",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		component: { default: "a" },
 		label: {
 			type: [
@@ -15374,7 +15342,11 @@ var NavLink = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	emits: ["update:opened"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -15542,10 +15514,6 @@ var Marquee = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Marquee",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		reverse: {
 			type: Boolean,
 			default: false
@@ -15571,6 +15539,10 @@ var Marquee = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -15643,7 +15615,6 @@ var Affix = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Affix",
 	props: {
-		rootRef: {},
 		zIndex: { default: void 0 },
 		withinPortal: {
 			type: Boolean,
@@ -15657,7 +15628,8 @@ var Affix = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -16394,10 +16366,6 @@ var FloatingIndicator = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "FloatingIndicator",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		target: { default: void 0 },
 		parent: { default: void 0 },
 		transitionDuration: { default: void 0 },
@@ -16413,6 +16381,10 @@ var FloatingIndicator = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	emits: ["transition-start", "transition-end"],
@@ -16616,9 +16588,15 @@ var SegmentedControl = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
 		const handleClick = (event) => {
 			if (props.readOnly) event.preventDefault();
 		};
-		const handleChange = (event, item, active) => {
-			if (props.readOnly) event.currentTarget.checked = active;
-			else setValue(item.value);
+		const handleChange = (event, item) => {
+			if (!props.readOnly) {
+				setValue(item.value);
+				return;
+			}
+			const input = event.currentTarget;
+			(input.name ? Array.from(input.getRootNode().querySelectorAll("input[type=\"radio\"]")).filter((radio) => radio.name === input.name) : [input]).forEach((radio) => {
+				radio.checked = radio.value === String(value.value);
+			});
 		};
 		return (_ctx, _cache) => {
 			return normalizedData.value.length ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(Box), (0, vue.mergeProps)({ key: 0 }, {
@@ -16663,7 +16641,7 @@ var SegmentedControl = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
 							checked: (0, vue.unref)(value) === item.value,
 							"data-focus-ring": (0, vue.unref)(theme).focusRing,
 							onClick: handleClick,
-							onChange: ($event) => handleChange($event, item, (0, vue.unref)(value) === item.value)
+							onChange: ($event) => handleChange($event, item)
 						}), null, 16, _hoisted_1$21), (0, vue.createVNode)((0, vue.unref)(Box), (0, vue.mergeProps)({ component: "label" }, { ref_for: true }, (0, vue.unref)(getStyles)("label"), {
 							for: `${(0, vue.unref)(uuid) || props.name || "segmented"}-${String(item.value)}`,
 							ref_for: true,
@@ -16702,10 +16680,6 @@ var PaginationControl_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "PaginationControl",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		active: {
 			type: Boolean,
 			default: false
@@ -16720,7 +16694,11 @@ var PaginationControl_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		mod: {},
 		class: {},
-		style: {}
+		style: {},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -16953,13 +16931,13 @@ var PaginationEdge_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "PaginationEdge",
 	props: {
-		rootRef: {},
 		icon: { default: void 0 },
 		disabled: {
 			type: Boolean,
 			default: false
 		},
-		__edge: {}
+		__edge: {},
+		rootRef: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -16996,12 +16974,12 @@ var PaginationFirst_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "PaginationFirst",
 	props: {
-		rootRef: {},
 		icon: { default: void 0 },
 		disabled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -17031,12 +17009,12 @@ var PaginationLast_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "PaginationLast",
 	props: {
-		rootRef: {},
 		icon: { default: void 0 },
 		disabled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -17066,12 +17044,12 @@ var PaginationNext_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "PaginationNext",
 	props: {
-		rootRef: {},
 		icon: { default: void 0 },
 		disabled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -17101,12 +17079,12 @@ var PaginationPrevious_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "PaginationPrevious",
 	props: {
-		rootRef: {},
 		icon: { default: void 0 },
 		disabled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -17147,11 +17125,11 @@ var PaginationDots = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "PaginationDots",
 	props: {
+		icon: { default: void 0 },
 		rootRef: {
 			type: [Object, Function],
 			default: void 0
-		},
-		icon: { default: void 0 }
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -17741,15 +17719,15 @@ var TabsList = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "TabsList",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		grow: { type: Boolean },
 		justify: { default: void 0 },
 		mod: { default: void 0 },
 		classNames: { default: void 0 },
-		styles: { default: void 0 }
+		styles: { default: void 0 },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -17803,10 +17781,6 @@ var TabsPanel = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "TabsPanel",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		value: {},
 		keepMounted: {
 			type: Boolean,
@@ -17814,7 +17788,11 @@ var TabsPanel = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		mod: { default: void 0 },
 		classNames: { default: void 0 },
-		styles: { default: void 0 }
+		styles: { default: void 0 },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -17865,10 +17843,6 @@ var TabsTab = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "TabsTab",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		value: {},
 		rightSection: {
 			type: [
@@ -17908,6 +17882,10 @@ var TabsTab = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		styles: {
 			type: [Object, Function],
 			default: void 0
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	emits: ["click", "keydown"],
@@ -18096,10 +18074,6 @@ var ActionBar = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ActionBar",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		opened: { type: Boolean },
 		transitionProps: { default: void 0 },
 		shadow: { default: void 0 },
@@ -18131,6 +18105,10 @@ var ActionBar = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	emits: ["close", "update:opened"],
@@ -18421,7 +18399,6 @@ var Textarea = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Textarea",
 	props: {
-		rootRef: {},
 		modelValue: { default: void 0 },
 		defaultValue: { default: void 0 },
 		autosize: {
@@ -18444,7 +18421,8 @@ var Textarea = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 			default: void 0
 		},
 		bottomSectionProps: { default: void 0 },
-		__staticSelector: { default: void 0 }
+		__staticSelector: { default: void 0 },
+		rootRef: {}
 	},
 	emits: ["update:modelValue", "change"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -19579,10 +19557,6 @@ var CheckboxCard = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "CheckboxCard",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		modelValue: {
 			type: Boolean,
 			default: void 0
@@ -19609,6 +19583,10 @@ var CheckboxCard = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	emits: [
@@ -19792,10 +19770,6 @@ var CheckboxIndicator = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "CheckboxIndicator",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		color: { default: void 0 },
 		size: { default: "sm" },
 		radius: { default: "sm" },
@@ -19819,7 +19793,11 @@ var CheckboxIndicator = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -19975,7 +19953,6 @@ var Checkbox = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		icon: {},
-		rootRef: {},
 		iconColor: {},
 		autoContrast: {
 			type: Boolean,
@@ -20013,7 +19990,8 @@ var Checkbox = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: [
 		"update:modelValue",
@@ -20312,7 +20290,6 @@ var Chip = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		wrapperProps: {},
 		icon: { default: void 0 },
-		rootRef: {},
 		autoContrast: {
 			type: Boolean,
 			default: void 0
@@ -20325,7 +20302,8 @@ var Chip = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: [
 		"update:modelValue",
@@ -20473,10 +20451,6 @@ var PillGroup = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "PillGroup",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		gap: { default: void 0 },
 		size: { default: void 0 },
 		disabled: {
@@ -20489,6 +20463,10 @@ var PillGroup = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -20561,10 +20539,6 @@ var Pill = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Pill",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		size: { default: void 0 },
 		withRemoveButton: {
 			type: Boolean,
@@ -20584,6 +20558,10 @@ var Pill = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	emits: ["remove"],
@@ -20692,7 +20670,6 @@ var PillsInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "PillsInput",
 	props: {
-		rootRef: {},
 		size: { default: "sm" },
 		disabled: {
 			type: Boolean,
@@ -20754,7 +20731,8 @@ var PillsInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -20892,10 +20870,6 @@ var PillsInputField = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "PillsInputField",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		modelValue: {},
 		defaultValue: {},
 		type: { default: "visible" },
@@ -20916,6 +20890,10 @@ var PillsInputField = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	emits: ["update:modelValue", "change"],
@@ -21177,10 +21155,6 @@ var RadioCard = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "RadioCard",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		modelValue: {
 			type: Boolean,
 			default: void 0
@@ -21207,6 +21181,10 @@ var RadioCard = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	emits: [
@@ -21356,10 +21334,6 @@ var RadioIndicator = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "RadioIndicator",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		color: { default: void 0 },
 		size: { default: "sm" },
 		radius: { default: void 0 },
@@ -21379,7 +21353,11 @@ var RadioIndicator = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -21522,7 +21500,6 @@ var Radio = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 			default: void 0
 		},
 		radius: {},
-		rootRef: {},
 		iconColor: {},
 		autoContrast: {
 			type: Boolean,
@@ -21560,7 +21537,8 @@ var Radio = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: [
 		"update:modelValue",
@@ -22006,7 +21984,6 @@ var Switch = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 			],
 			default: void 0
 		},
-		rootRef: {},
 		withThumbIndicator: {
 			type: Boolean,
 			default: void 0
@@ -22035,7 +22012,8 @@ var Switch = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: [
 		"update:modelValue",
@@ -22200,11 +22178,11 @@ var Space = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Space",
 	props: {
-		rootRef: { type: [Object, Function] },
 		w: {},
 		h: {},
 		miw: {},
-		mih: {}
+		mih: {},
+		rootRef: { type: [Object, Function] }
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -22274,10 +22252,6 @@ var Flex = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Flex",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		component: { default: "div" },
 		gap: {},
 		rowGap: {},
@@ -22289,7 +22263,11 @@ var Flex = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
-		unstyled: { type: Boolean }
+		unstyled: { type: Boolean },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -22378,10 +22356,6 @@ var Stack = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Stack",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		gap: {},
 		align: { default: void 0 },
 		justify: { default: void 0 },
@@ -22391,6 +22365,10 @@ var Stack = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -22501,10 +22479,6 @@ var Stepper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Stepper",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		active: {},
 		icon: {
 			type: [
@@ -22573,6 +22547,10 @@ var Stepper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	emits: ["update:active", "step-click"],
@@ -22716,10 +22694,6 @@ var StepperStep = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "StepperStep",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		step: { default: void 0 },
 		state: { default: void 0 },
 		color: { default: void 0 },
@@ -22803,7 +22777,11 @@ var StepperStep = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		className: { default: void 0 },
-		style: { default: void 0 }
+		style: { default: void 0 },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -23016,10 +22994,6 @@ var OverflowList = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "OverflowList",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		data: {},
 		renderItem: {},
 		renderOverflow: {},
@@ -23034,6 +23008,10 @@ var OverflowList = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -23185,7 +23163,7 @@ var OverflowList = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 			(0, _mantine_vue_hooks.assignRef)(props.rootRef, node);
 		};
 		__expose({
-			root: rootRef,
+			root: rootElement,
 			rootElement
 		});
 		return (_ctx, _cache) => {
@@ -23238,7 +23216,6 @@ var TableOfContents = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "TableOfContents",
 	props: {
-		rootRef: {},
 		color: { default: void 0 },
 		size: { default: void 0 },
 		autoContrast: {
@@ -23262,7 +23239,8 @@ var TableOfContents = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -23507,12 +23485,12 @@ var FloatingWindowResizeHandle = factory(/* @__PURE__ */ (0, vue.defineComponent
 	inheritAttrs: false,
 	__name: "FloatingWindowResizeHandle",
 	props: {
+		ariaLabel: { default: "Resize window" },
+		tabindex: { default: 0 },
 		rootRef: {
 			type: [Object, Function],
 			default: void 0
-		},
-		ariaLabel: { default: "Resize window" },
-		tabindex: { default: 0 }
+		}
 	},
 	emits: ["keydown"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -23673,17 +23651,17 @@ var SliderRoot = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "SliderRoot",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		size: {},
 		disabled: {
 			type: Boolean,
 			default: false
 		},
 		variant: {},
-		orientation: { default: "horizontal" }
+		orientation: { default: "horizontal" },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -24064,7 +24042,6 @@ var Slider = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Slider",
 	props: {
-		rootRef: {},
 		color: {},
 		radius: {},
 		size: {},
@@ -24136,7 +24113,8 @@ var Slider = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: [
 		"update:modelValue",
@@ -24366,7 +24344,6 @@ var RangeSlider = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "RangeSlider",
 	props: {
-		rootRef: {},
 		modelValue: { default: void 0 },
 		defaultValue: { default: void 0 },
 		domain: {},
@@ -24432,7 +24409,8 @@ var RangeSlider = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: [
 		"update:modelValue",
@@ -25901,10 +25879,6 @@ var AppShell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "AppShell",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		withBorder: {
 			type: Boolean,
 			default: void 0
@@ -25935,6 +25909,10 @@ var AppShell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -26423,13 +26401,13 @@ var AppShellMain = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "AppShellMain",
 	props: {
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		vars: { default: void 0 },
 		rootRef: {
 			type: [Object, Function],
 			default: void 0
-		},
-		classNames: { default: void 0 },
-		styles: { default: void 0 },
-		vars: { default: void 0 }
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -27412,10 +27390,6 @@ var Splitter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Splitter",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		orientation: {},
 		sizes: {},
 		redistribute: {},
@@ -27450,6 +27424,10 @@ var Splitter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	emits: [
@@ -27584,10 +27562,6 @@ var SplitterPane = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "SplitterPane",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		defaultSize: {},
 		min: { default: void 0 },
 		max: { default: void 0 },
@@ -27600,7 +27574,11 @@ var SplitterPane = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		mod: {},
 		classNames: {},
 		styles: {},
-		vars: {}
+		vars: {},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -28323,10 +28301,6 @@ var Tree = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Tree",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		component: { default: "ul" },
 		data: {},
 		levelOffset: { default: "lg" },
@@ -28375,6 +28349,10 @@ var Tree = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	emits: ["drag-drop"],
@@ -28883,7 +28861,6 @@ var ModalBase = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "ModalBase",
 	props: {
 		__handledEscapeEvents: {},
-		rootRef: {},
 		opened: { type: Boolean },
 		id: { default: void 0 },
 		keepMounted: {
@@ -28930,7 +28907,8 @@ var ModalBase = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: ["close"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -29102,9 +29080,9 @@ var ModalBaseContent = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "ModalBaseContent",
 	props: {
-		rootRef: {},
 		transitionProps: { default: void 0 },
-		innerProps: { default: () => ({}) }
+		innerProps: { default: () => ({}) },
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -29377,7 +29355,6 @@ var ModalRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		styles: {},
 		vars: {},
 		__handledEscapeEvents: {},
-		rootRef: {},
 		opened: { type: Boolean },
 		id: {},
 		keepMounted: {
@@ -29540,7 +29517,6 @@ var Modal_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		styles: {},
 		vars: {},
 		__handledEscapeEvents: {},
-		rootRef: {},
 		opened: { type: Boolean },
 		id: {},
 		keepMounted: {
@@ -29763,7 +29739,6 @@ var DrawerRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		size: { default: "md" },
 		scrollAreaComponent: {},
 		__handledEscapeEvents: {},
-		rootRef: {},
 		opened: { type: Boolean },
 		id: {},
 		keepMounted: {
@@ -29926,7 +29901,6 @@ var Drawer_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		size: {},
 		scrollAreaComponent: {},
 		__handledEscapeEvents: {},
-		rootRef: {},
 		opened: { type: Boolean },
 		id: {},
 		keepMounted: {
@@ -30514,6 +30488,7 @@ var defaults$2 = {
 	clickOutsideCapture: false,
 	zIndex: getDefaultZIndex("popover"),
 	floatingStrategy: "absolute",
+	hideDetached: true,
 	transitionProps: {
 		transition: "fade",
 		duration: 150
@@ -30590,6 +30565,10 @@ var Popover_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		zIndex: {},
 		floatingStrategy: {},
 		middlewares: {},
+		hideDetached: {
+			type: Boolean,
+			default: void 0
+		},
 		id: {},
 		targetProps: {},
 		withOverlay: {
@@ -30822,6 +30801,9 @@ var Popover_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			get floatingStrategy() {
 				return props.floatingStrategy ?? "absolute";
 			},
+			get referenceHidden() {
+				return props.hideDetached !== false && !!floatingState.middlewareData.value.hide?.referenceHidden;
+			},
 			getStyles
 		});
 		(0, vue.watch)(() => rawProps.opened, (value, old) => {
@@ -30953,7 +30935,8 @@ var PopoverDropdown_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				zIndex: ctx.zIndex,
 				top: `${ctx.y}px`,
 				left: `${ctx.x}px`,
-				width: ctx.width === "target" ? ctx.targetWidth === void 0 ? void 0 : `${ctx.targetWidth}px` : rem(ctx.width)
+				width: ctx.width === "target" ? ctx.targetWidth === void 0 ? void 0 : `${ctx.targetWidth}px` : rem(ctx.width),
+				...ctx.referenceHidden ? { display: "none" } : null
 			},
 			attrs.style
 		]);
@@ -32051,7 +32034,6 @@ var Toggle = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Toggle",
 	props: {
-		rootRef: {},
 		component: { default: "button" },
 		active: {
 			type: Boolean,
@@ -32083,7 +32065,8 @@ var Toggle = polymorphicFactory(/* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: ["update:active", "activeChange"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -32207,7 +32190,6 @@ var Toolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Toolbar",
 	props: {
-		rootRef: {},
 		orientation: { default: void 0 },
 		loop: {
 			type: Boolean,
@@ -32231,7 +32213,8 @@ var Toolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -32355,7 +32338,6 @@ var ToolbarGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		lightHidden: { type: Boolean },
 		darkHidden: { type: Boolean },
 		mod: {},
-		rootRef: { type: [Object, Function] },
 		m: {},
 		my: {},
 		mx: {},
@@ -32464,7 +32446,6 @@ var ToolbarToggle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		lightHidden: { type: Boolean },
 		darkHidden: { type: Boolean },
 		mod: {},
-		rootRef: {},
 		m: {},
 		my: {},
 		mx: {},
@@ -32597,7 +32578,6 @@ var ToolbarToggleGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		lightHidden: { type: Boolean },
 		darkHidden: { type: Boolean },
 		mod: {},
-		rootRef: {},
 		m: {},
 		my: {},
 		mx: {},
@@ -32734,7 +32714,6 @@ var ToolbarToggleItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		lightHidden: { type: Boolean },
 		darkHidden: { type: Boolean },
 		mod: {},
-		rootRef: {},
 		m: {},
 		my: {},
 		mx: {},
@@ -32860,7 +32839,6 @@ var ToolbarDivider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		lightHidden: { type: Boolean },
 		darkHidden: { type: Boolean },
 		mod: {},
-		rootRef: { type: [Object, Function] },
 		m: {},
 		my: {},
 		mx: {},
@@ -33110,7 +33088,6 @@ var Tour_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "Tour",
 	props: {
-		rootRef: {},
 		active: {
 			type: Boolean,
 			default: false
@@ -33171,7 +33148,8 @@ var Tour_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: [
 		"close",
@@ -33630,7 +33608,6 @@ var TourRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TourRoot",
 	props: {
 		stepsCount: {},
-		rootRef: {},
 		active: {
 			type: Boolean,
 			default: false
@@ -33685,7 +33662,8 @@ var TourRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		rootRef: {}
 	},
 	emits: [
 		"close",
@@ -33910,7 +33888,6 @@ var TourTooltip_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		lightHidden: { type: Boolean },
 		darkHidden: { type: Boolean },
 		mod: {},
-		rootRef: {},
 		m: {},
 		my: {},
 		mx: {},
@@ -34046,7 +34023,6 @@ var TourBeacon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		lightHidden: { type: Boolean },
 		darkHidden: { type: Boolean },
 		mod: {},
-		rootRef: { type: [Object, Function] },
 		m: {},
 		my: {},
 		mx: {},
@@ -34383,6 +34359,7 @@ var Menu_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		zIndex: {},
 		floatingStrategy: {},
 		middlewares: {},
+		hideDetached: { type: Boolean },
 		id: {},
 		targetProps: {},
 		withOverlay: {
@@ -36403,6 +36380,7 @@ var Combobox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		zIndex: {},
 		floatingStrategy: {},
 		middlewares: {},
+		hideDetached: { type: Boolean },
 		id: {},
 		targetProps: {},
 		withOverlay: {
@@ -37886,10 +37864,6 @@ var DataList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "DataList",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		size: {},
 		gap: {},
 		orientation: {},
@@ -37905,6 +37879,10 @@ var DataList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -37953,13 +37931,13 @@ var DataListItem = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "DataListItem",
 	props: {
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		mod: { default: void 0 },
 		rootRef: {
 			type: [Object, Function],
 			default: void 0
-		},
-		classNames: { default: void 0 },
-		styles: { default: void 0 },
-		mod: { default: void 0 }
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -37995,13 +37973,13 @@ var DataListItemLabel = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "DataListItemLabel",
 	props: {
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		mod: { default: void 0 },
 		rootRef: {
 			type: [Object, Function],
 			default: void 0
-		},
-		classNames: { default: void 0 },
-		styles: { default: void 0 },
-		mod: { default: void 0 }
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -38040,13 +38018,13 @@ var DataListItemValue = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "DataListItemValue",
 	props: {
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		mod: { default: void 0 },
 		rootRef: {
 			type: [Object, Function],
 			default: void 0
-		},
-		classNames: { default: void 0 },
-		styles: { default: void 0 },
-		mod: { default: void 0 }
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -38097,13 +38075,13 @@ var EmptyStateDescription_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "EmptyStateDescription",
 	props: {
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		mod: { default: void 0 },
 		rootRef: {
 			type: [Object, Function],
 			default: void 0
-		},
-		classNames: { default: void 0 },
-		styles: { default: void 0 },
-		mod: { default: void 0 }
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -38153,13 +38131,13 @@ var EmptyStateIndicator = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "EmptyStateIndicator",
 	props: {
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		mod: { default: void 0 },
 		rootRef: {
 			type: [Object, Function],
 			default: void 0
-		},
-		classNames: { default: void 0 },
-		styles: { default: void 0 },
-		mod: { default: void 0 }
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -38195,14 +38173,14 @@ var EmptyStateTitle = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "EmptyStateTitle",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		order: { default: void 0 },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
-		mod: { default: void 0 }
+		mod: { default: void 0 },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -38287,10 +38265,6 @@ var EmptyState_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "EmptyState",
 	props: {
-		rootRef: {
-			type: [Object, Function],
-			default: void 0
-		},
 		size: {},
 		align: {},
 		variant: {},
@@ -38342,6 +38316,10 @@ var EmptyState_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		unstyled: {
 			type: Boolean,
 			default: false
+		},
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -38432,13 +38410,13 @@ var EmptyStateActions = factory(/* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "EmptyStateActions",
 	props: {
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		mod: { default: void 0 },
 		rootRef: {
 			type: [Object, Function],
 			default: void 0
-		},
-		classNames: { default: void 0 },
-		styles: { default: void 0 },
-		mod: { default: void 0 }
+		}
 	},
 	setup(__props, { expose: __expose }) {
 		const rawProps = __props;
@@ -38731,7 +38709,7 @@ var Select = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
 						"__static-selector": "Select",
 						component: "input",
 						disabled: disabled.value,
-						"read-only": readOnly.value || !props.searchable,
+						readOnly: readOnly.value || !props.searchable,
 						pointer: !props.searchable,
 						"model-value": search(),
 						"right-section": (0, vue.unref)(attrs).rightSection,
@@ -38773,7 +38751,7 @@ var Select = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
 						"__clearable",
 						"__clear-section-mode",
 						"disabled",
-						"read-only",
+						"readOnly",
 						"pointer",
 						"model-value",
 						"right-section",
@@ -41929,7 +41907,6 @@ exports.useDirection = useDirection;
 exports.useDrawersStack = useDrawersStack;
 exports.useEmptyStateContext = useEmptyStateContext;
 exports.useFloatingIndicator = useFloatingIndicator;
-exports.useForwardedRef = useForwardedRef;
 exports.useGridContext = useGridContext;
 exports.useHoverCardContext = useHoverCardContext;
 exports.useInputContext = useInputContext;