@mantine-vue/core 2.2.2 → 2.3.1

package/esm/index.mjs

@@ -3966,7 +3966,10 @@ var Badge = withBoxProps(defineComponent({
 			type: String,
 			default: "div"
 		},
-		size: [String, Number],
+		size: {
+			type: String,
+			default: void 0
+		},
 		circle: {
 			type: Boolean,
 			default: false
@@ -4034,7 +4037,7 @@ var Badge = withBoxProps(defineComponent({
 		const renderSection = (section, position) => hasNode(section) ? h("span", {
 			...getStyles("section"),
 			"data-position": position
-		}, () => section) : null;
+		}, section) : null;
 		return () => {
 			const children = slots.default?.() ?? [];
 			const leftSection = resolveNode(props.leftSection, slots.leftSection);
@@ -6980,7 +6983,8 @@ var GridColVariables = defineComponent({
 					acc[breakpoint]["--col-max-width"] = getColumnMaxWidth(span, ctx.columns, ctx.grow);
 				}
 				if (isObject$1(props.offset) && props.offset[breakpoint] !== void 0) acc[breakpoint]["--col-offset"] = getColumnOffset(props.offset[breakpoint], ctx.columns);
-				if (isObject$1(props.align) && props.align[breakpoint] !== void 0) acc[breakpoint]["--col-align-self"] = props.align[breakpoint];
+				const responsiveAlign = isObject$1(props.align) ? props.align[breakpoint] : void 0;
+				if (responsiveAlign !== void 0) acc[breakpoint]["--col-align-self"] = responsiveAlign;
 				return acc;
 			}, {});
 			const values = getSortedBreakpoints(breakpoints).reduce((acc, item) => {
@@ -11174,7 +11178,7 @@ var InputClearButton = withBoxProps(defineComponent({
 	inheritAttrs: false,
 	props: {
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		variant: {
@@ -13555,7 +13559,7 @@ var PinInput = withBoxProps(defineComponent({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		autoFocus: {
@@ -15292,7 +15296,7 @@ var SegmentedControl = defineComponent({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: "sm"
 		},
 		radius: {
@@ -17428,7 +17432,7 @@ var CheckboxGroup = defineComponent({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		wrapperProps: {
@@ -17820,7 +17824,7 @@ var CheckboxBase = defineComponent({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: "sm"
 		},
 		radius: {
@@ -18099,7 +18103,7 @@ var ChipBase = defineComponent({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: "sm"
 		},
 		type: {
@@ -18286,7 +18290,7 @@ var PillGroup = withBoxProps(defineComponent({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		disabled: {
@@ -18368,7 +18372,7 @@ var PillBase = defineComponent({
 	inheritAttrs: false,
 	props: {
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		withRemoveButton: {
@@ -18749,7 +18753,7 @@ var RadioGroup = defineComponent({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		wrapperProps: {
@@ -19127,7 +19131,7 @@ var RadioBase = defineComponent({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: "sm"
 		},
 		icon: {
@@ -19314,7 +19318,7 @@ var SwitchGroup = defineComponent({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		wrapperProps: {
@@ -19479,7 +19483,7 @@ var SwitchBase = defineComponent({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: "sm"
 		},
 		radius: {
@@ -19766,8 +19770,8 @@ var Flex = withBoxProps(defineComponent({
 			name: "Flex",
 			classes: Flex_module_default,
 			props,
-			className: attrs.class,
-			style: attrs.style,
+			className: void 0,
+			style: void 0,
 			classNames: props.classNames,
 			styles: props.styles,
 			vars: props.vars,
@@ -19797,8 +19801,8 @@ var Flex = withBoxProps(defineComponent({
 				component: props.component,
 				...attrs,
 				...getStyles("root", {
-					className: parsedStyleProps.hasResponsiveStyles ? responsiveClassName : void 0,
-					style: filterProps(parsedStyleProps.inlineStyles)
+					className: [attrs.class, parsedStyleProps.hasResponsiveStyles ? responsiveClassName : void 0],
+					style: [attrs.style, filterProps(parsedStyleProps.inlineStyles)]
 				})
 			}, () => slots.default?.())];
 		};
@@ -20196,7 +20200,7 @@ var StepperBase = defineComponent({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		radius: {
@@ -26239,14 +26243,17 @@ var Drawer = Object.assign(DrawerBaseComponent, {
 });
 //#endregion
 //#region src/utils/Floating/FloatingArrow/get-arrow-position-styles.ts
+function px$1(value) {
+	return value === void 0 ? void 0 : `${value}px`;
+}
 function horizontalSide(placement, arrowY, offset, position) {
-	if (placement === "center" || position === "center") return { top: arrowY };
-	return placement === "end" ? { bottom: offset } : { top: offset };
+	if (placement === "center" || position === "center") return { top: px$1(arrowY) };
+	return placement === "end" ? { bottom: px$1(offset) } : { top: px$1(offset) };
 }
 function verticalSide(placement, arrowX, offset, position, dir) {
-	if (placement === "center" || position === "center") return { left: arrowX };
-	if (placement === "end") return { [dir === "ltr" ? "right" : "left"]: offset };
-	return { [dir === "ltr" ? "left" : "right"]: offset };
+	if (placement === "center" || position === "center") return { left: px$1(arrowX) };
+	if (placement === "end") return { [dir === "ltr" ? "right" : "left"]: px$1(offset) };
+	return { [dir === "ltr" ? "left" : "right"]: px$1(offset) };
 }
 var radiusBySide = {
 	bottom: "borderTopLeftRadius",
@@ -26267,15 +26274,15 @@ function mergeStyles(position, size, dir) {
 		const startShape = placement === "start" !== (dir === "rtl");
 		return {
 			...base,
-			[side === "bottom" ? "top" : "bottom"]: -size,
-			[physical]: 0,
+			[side === "bottom" ? "top" : "bottom"]: px$1(-size),
+			[physical]: px$1(0),
 			clipPath: side === "bottom" ? startShape ? "polygon(0% 0%, 0% 100%, 100% 100%)" : "polygon(100% 0%, 0% 100%, 100% 100%)" : startShape ? "polygon(0% 0%, 100% 0%, 0% 100%)" : "polygon(0% 0%, 100% 0%, 100% 100%)"
 		};
 	}
 	return {
 		...base,
-		[side === "left" ? "right" : "left"]: -size,
-		[placement === "start" ? "top" : "bottom"]: 0,
+		[side === "left" ? "right" : "left"]: px$1(-size),
+		[placement === "start" ? "top" : "bottom"]: px$1(0),
 		clipPath: side === "left" ? placement === "start" ? "polygon(0% 0%, 100% 0%, 0% 100%)" : "polygon(0% 0%, 0% 100%, 100% 100%)" : placement === "start" ? "polygon(0% 0%, 100% 0%, 100% 100%)" : "polygon(100% 0%, 0% 100%, 100% 100%)"
 	};
 }
@@ -26292,7 +26299,7 @@ function getArrowPositionStyles(input) {
 		position: "absolute",
 		[radiusBySide[side]]: `${input.arrowRadius}px`
 	};
-	const edge = -input.arrowSize / 2;
+	const edge = px$1(-input.arrowSize / 2);
 	if (side === "left") return {
 		...base,
 		...horizontalSide(placement, input.arrowY, input.arrowOffset, input.arrowPosition),
@@ -26368,6 +26375,7 @@ var FloatingArrow = defineComponent({
 	setup(props, { attrs }) {
 		const { dir } = useDirection();
 		return () => props.visible ? h("div", {
+			role: "presentation",
 			...attrs,
 			style: [attrs.style, getArrowPositionStyles({
 				...props,
@@ -26814,7 +26822,11 @@ var PopoverBase = defineComponent({
 					...shiftOptions
 				};
 			}));
-			result.push(arrow({ element: arrowElement }));
+			if (props.middlewares?.inline) result.push(inline(typeof props.middlewares.inline === "object" ? props.middlewares.inline : void 0));
+			result.push(arrow({
+				element: arrowElement,
+				padding: props.arrowOffset
+			}));
 			if (props.middlewares?.size || props.width === "target") result.push(size({
 				...typeof props.middlewares?.size === "object" ? props.middlewares.size : {},
 				apply: ({ rects, availableWidth, availableHeight, elements, ...rest }) => {