@mantine-vue/core 2.3.0 → 2.3.1

package/esm/index.mjs

@@ -4037,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);
@@ -26243,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",
@@ -26271,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%)"
 	};
 }
@@ -26296,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),
@@ -26372,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,
@@ -26818,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 }) => {