@yahoo/uds 3.116.0-beta.1 → 3.116.0-beta.3

package/dist/components/SvgFloatingOverlay.cjs

@@ -8,7 +8,6 @@ let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/SvgFloatingOverlay.tsx
 const SvgFloatingOverlay = ({ blurClassName, blurStyle, childTransitionStyle, svgPath, dimensions, shadows, svgClassNames, shadowFilterId, shadowPadding, arrowHeight, contentWrapperSlotProps, children, borderRadius, svgBaseStyle, svgBorderStyle }) => {
-	const sharedSvgClasses = "absolute top-0 left-0 w-full h-full overflow-visible pointer-events-none";
 	const svgSharedProps = {
 		"aria-hidden": true,
 		style: childTransitionStyle,
@@ -24,7 +23,7 @@ const SvgFloatingOverlay = ({ blurClassName, blurStyle, childTransitionStyle, sv
 		}),
 		svgPath && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 			...svgSharedProps,
-			className: require_styles_styler.cx(sharedSvgClasses, "z-[2]"),
+			className: require_styles_styler.cx("absolute top-0 left-0 w-full h-full overflow-visible pointer-events-none", "z-[2]"),
 			children: [
 				shadows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("filter", {
 					id: shadowFilterId,
@@ -91,23 +90,23 @@ const SvgFloatingOverlay = ({ blurClassName, blurStyle, childTransitionStyle, sv
 			position: "relative",
 			flexGrow: "1",
 			overflow: "hidden",
-			className: require_styles_styler.cx("z-[3]", "max-h-full", contentWrapperSlotProps?.className),
+			...contentWrapperSlotProps,
+			className: require_styles_styler.cx("z-[3]", "max-h-full", "gap-[inherit]", contentWrapperSlotProps?.className),
 			style: {
 				...childTransitionStyle,
 				borderRadius
 			},
-			...contentWrapperSlotProps,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 				overflow: "auto",
 				flexGrow: "1",
 				display: "block",
-				className: "max-h-full",
+				className: "max-h-full gap-[inherit]",
 				children
 			})
 		}),
 		svgPath && svgClassNames.border && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 			...svgSharedProps,
-			className: require_styles_styler.cx(sharedSvgClasses, "z-[3]"),
+			className: require_styles_styler.cx("absolute top-0 left-0 w-full h-full overflow-visible pointer-events-none", "z-[3]"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 				d: svgPath,
 				className: svgClassNames.border,

package/dist/components/SvgFloatingOverlay.js

@@ -6,7 +6,6 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/SvgFloatingOverlay.tsx
 const SvgFloatingOverlay = ({ blurClassName, blurStyle, childTransitionStyle, svgPath, dimensions, shadows, svgClassNames, shadowFilterId, shadowPadding, arrowHeight, contentWrapperSlotProps, children, borderRadius, svgBaseStyle, svgBorderStyle }) => {
-	const sharedSvgClasses = "absolute top-0 left-0 w-full h-full overflow-visible pointer-events-none";
 	const svgSharedProps = {
 		"aria-hidden": true,
 		style: childTransitionStyle,
@@ -22,7 +21,7 @@ const SvgFloatingOverlay = ({ blurClassName, blurStyle, childTransitionStyle, sv
 		}),
 		svgPath && /* @__PURE__ */ jsxs("svg", {
 			...svgSharedProps,
-			className: cx(sharedSvgClasses, "z-[2]"),
+			className: cx("absolute top-0 left-0 w-full h-full overflow-visible pointer-events-none", "z-[2]"),
 			children: [
 				shadows.length > 0 && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
 					id: shadowFilterId,
@@ -89,23 +88,23 @@ const SvgFloatingOverlay = ({ blurClassName, blurStyle, childTransitionStyle, sv
 			position: "relative",
 			flexGrow: "1",
 			overflow: "hidden",
-			className: cx("z-[3]", "max-h-full", contentWrapperSlotProps?.className),
+			...contentWrapperSlotProps,
+			className: cx("z-[3]", "max-h-full", "gap-[inherit]", contentWrapperSlotProps?.className),
 			style: {
 				...childTransitionStyle,
 				borderRadius
 			},
-			...contentWrapperSlotProps,
 			children: /* @__PURE__ */ jsx(Box, {
 				overflow: "auto",
 				flexGrow: "1",
 				display: "block",
-				className: "max-h-full",
+				className: "max-h-full gap-[inherit]",
 				children
 			})
 		}),
 		svgPath && svgClassNames.border && /* @__PURE__ */ jsx("svg", {
 			...svgSharedProps,
-			className: cx(sharedSvgClasses, "z-[3]"),
+			className: cx("absolute top-0 left-0 w-full h-full overflow-visible pointer-events-none", "z-[3]"),
 			children: /* @__PURE__ */ jsx("path", {
 				d: svgPath,
 				className: svgClassNames.border,

package/dist/components/client/Popover/PopoverContent.cjs

@@ -40,7 +40,6 @@ const PopoverContent = (0, react.forwardRef)(function PopoverContent({ children,
 	const defaultDismissButtonSize = dismissButtonSize["default"];
 	const arrowRef = (0, react.useRef)(null);
 	const reducedMotion = internalContext ? internalContext.reducedMotion : false;
-	const cssAnimationDuration = reducedMotion ? "duration-0" : "duration-120";
 	const animationDuration = reducedMotion || !internalContext ? 0 : internalContext.animationDuration;
 	const { internalRef, shift, onPositionUpdate, ...svgFloatingContentProps } = require_hooks_useSvgFloatingContent.useSvgFloatingContent({
 		open: open ?? false,
@@ -93,7 +92,7 @@ const PopoverContent = (0, react.forwardRef)(function PopoverContent({ children,
 			alignItems: "center",
 			justifyContent: "center",
 			display: "flex",
-			className: require_styles_styler.cx(cssAnimationDuration, "transition-[background-color]", "bg-carbon-15/0", "hover:bg-carbon-15/10", "active:bg-carbon-15/15")
+			className: require_styles_styler.cx(reducedMotion ? "duration-0" : "duration-120", "transition-[background-color]", "bg-carbon-15/0", "hover:bg-carbon-15/10", "active:bg-carbon-15/15")
 		}),
 		closeIcon: require_styles_styler.getStyles({
 			popoverVariantCloseIcon: "default",
@@ -118,7 +117,10 @@ const PopoverContent = (0, react.forwardRef)(function PopoverContent({ children,
 		},
 		onClose: internalContext?.onClose,
 		sameWidth,
-		autoFocusOnShow: !internalContext?.disableAutoFocus,
+		autoFocusOnShow: internalContext?.disableAutoFocus ? false : (element) => {
+			element?.focus({ preventScroll: true });
+			return false;
+		},
 		autoFocusOnHide: !internalContext?.disableAutoFocus,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_SvgFloatingOverlay.SvgFloatingOverlay, {

package/dist/components/client/Popover/PopoverContent.js

@@ -38,7 +38,6 @@ const PopoverContent = forwardRef(function PopoverContent({ children, className,
 	const defaultDismissButtonSize = dismissButtonSize["default"];
 	const arrowRef = useRef(null);
 	const reducedMotion = internalContext ? internalContext.reducedMotion : false;
-	const cssAnimationDuration = reducedMotion ? "duration-0" : "duration-120";
 	const animationDuration = reducedMotion || !internalContext ? 0 : internalContext.animationDuration;
 	const { internalRef, shift, onPositionUpdate, ...svgFloatingContentProps } = useSvgFloatingContent({
 		open: open ?? false,
@@ -91,7 +90,7 @@ const PopoverContent = forwardRef(function PopoverContent({ children, className,
 			alignItems: "center",
 			justifyContent: "center",
 			display: "flex",
-			className: cx(cssAnimationDuration, "transition-[background-color]", "bg-carbon-15/0", "hover:bg-carbon-15/10", "active:bg-carbon-15/15")
+			className: cx(reducedMotion ? "duration-0" : "duration-120", "transition-[background-color]", "bg-carbon-15/0", "hover:bg-carbon-15/10", "active:bg-carbon-15/15")
 		}),
 		closeIcon: getStyles({
 			popoverVariantCloseIcon: "default",
@@ -116,7 +115,10 @@ const PopoverContent = forwardRef(function PopoverContent({ children, className,
 		},
 		onClose: internalContext?.onClose,
 		sameWidth,
-		autoFocusOnShow: !internalContext?.disableAutoFocus,
+		autoFocusOnShow: internalContext?.disableAutoFocus ? false : (element) => {
+			element?.focus({ preventScroll: true });
+			return false;
+		},
 		autoFocusOnHide: !internalContext?.disableAutoFocus,
 		children: [
 			/* @__PURE__ */ jsx(SvgFloatingOverlay, {

package/dist/components/client/Toast/Toast.cjs

@@ -49,7 +49,7 @@ const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantPr
 	const { className: startIconClassName, ...startIconProps } = slotProps?.startIcon ?? {};
 	const { className: closeIconContainerClassName, ...closeIconContainerProps } = slotProps?.closeIconContainer ?? {};
 	const { className: closeIconClassName, ...closeIconProps } = slotProps?.closeIcon ?? {};
-	const cssAnimationDuration = (0, motion_react.useReducedMotion)() || forceReduceMotion ? "duration-0" : "duration-120";
+	const reducedMotion = (0, motion_react.useReducedMotion)() || forceReduceMotion;
 	const handleClose = () => {
 		closeToast?.();
 		onClickCloseButton?.(id);
@@ -72,7 +72,7 @@ const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantPr
 		closeIconContainer: require_styles_styler.getStyles({
 			spacing: "2",
 			borderRadius: "full",
-			className: require_styles_styler.cx(cssAnimationDuration, "transition-[background-color]", "bg-carbon-15/0", "hover:bg-carbon-15/10", "active:bg-carbon-15/15", "uds-ring")
+			className: require_styles_styler.cx(reducedMotion ? "duration-0" : "duration-120", "transition-[background-color]", "bg-carbon-15/0", "hover:bg-carbon-15/10", "active:bg-carbon-15/15", "uds-ring")
 		}),
 		closeIcon: require_styles_styler.getStyles({
 			toastVariantCloseIcon: variant,

package/dist/components/client/Toast/Toast.js

@@ -47,7 +47,7 @@ const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantPr
 	const { className: startIconClassName, ...startIconProps } = slotProps?.startIcon ?? {};
 	const { className: closeIconContainerClassName, ...closeIconContainerProps } = slotProps?.closeIconContainer ?? {};
 	const { className: closeIconClassName, ...closeIconProps } = slotProps?.closeIcon ?? {};
-	const cssAnimationDuration = useReducedMotion() || forceReduceMotion ? "duration-0" : "duration-120";
+	const reducedMotion = useReducedMotion() || forceReduceMotion;
 	const handleClose = () => {
 		closeToast?.();
 		onClickCloseButton?.(id);
@@ -70,7 +70,7 @@ const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantPr
 		closeIconContainer: getStyles({
 			spacing: "2",
 			borderRadius: "full",
-			className: cx(cssAnimationDuration, "transition-[background-color]", "bg-carbon-15/0", "hover:bg-carbon-15/10", "active:bg-carbon-15/15", "uds-ring")
+			className: cx(reducedMotion ? "duration-0" : "duration-120", "transition-[background-color]", "bg-carbon-15/0", "hover:bg-carbon-15/10", "active:bg-carbon-15/15", "uds-ring")
 		}),
 		closeIcon: getStyles({
 			toastVariantCloseIcon: variant,

package/dist/components/client/Tooltip/TooltipContent.cjs

@@ -5,6 +5,7 @@ const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
 const require_components_Box = require('../../Box.cjs');
 const require_components_Text = require('../../Text.cjs');
+const require_components_VStack = require('../../VStack.cjs');
 const require_components_IconSlot = require('../../IconSlot.cjs');
 const require_hooks_useForkRef = require('../../../hooks/useForkRef.cjs');
 const require_hooks_useSvgFloatingContent = require('../../../hooks/useSvgFloatingContent.cjs');
@@ -44,10 +45,7 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 		root: require_styles_styler.getStyles({
 			tooltipSizeRoot: "default",
 			tooltipVariantRoot: "default",
-			className: require_styles_styler.cx((0, react.useMemo)(() => {
-				if (maxWidth !== void 0) return typeof maxWidth === "number" ? `max-w-[${maxWidth}px]` : `max-w-[${maxWidth}]`;
-				return "max-w-lg";
-			}, [maxWidth]), "flex", "z-[9999]", className)
+			className: require_styles_styler.cx(maxWidth === void 0 && "max-w-lg", "flex", "z-[9999]", className)
 		}),
 		svg: require_styles_styler.getStyles({
 			tooltipSizeSvg: "default",
@@ -59,7 +57,7 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 			position: "absolute",
 			width: "full",
 			height: "full",
-			className: require_styles_styler.cx("uds-bgBlurFallback", "top-0", "left-0", "z-[1]", "transition-opacity", `duration-[${animationDuration}ms]`, "ease-in-out")
+			className: require_styles_styler.cx("uds-bgBlurFallback", "top-0", "left-0", "z-[1]")
 		}),
 		title: require_styles_styler.getStyles({ tooltipSizeTitle: "default" }),
 		body: require_styles_styler.getStyles({ tooltipSizeBody: "default" }),
@@ -77,41 +75,44 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 		portal: internalContext ? internalContext.portal : true,
 		gutter: 10,
 		updatePosition: onPositionUpdate,
-		style: shift.x !== 0 || shift.y !== 0 ? { transform: `translate(${shift.x}px, ${shift.y}px)` } : void 0,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_SvgFloatingOverlay.SvgFloatingOverlay, {
+		style: {
+			...shift.x !== 0 || shift.y !== 0 ? { transform: `translate(${shift.x}px, ${shift.y}px)` } : void 0,
+			...maxWidth !== void 0 ? { maxWidth } : void 0
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_SvgFloatingOverlay.SvgFloatingOverlay, {
 			blurClassName: classNames.blur,
 			svgClassNames: { base: classNames.svg },
 			arrowHeight: ARROW_HEIGHT,
-			contentWrapperSlotProps: {
-				flexDirection: "column",
-				id
-			},
+			contentWrapperSlotProps: { id },
 			...svgFloatingContentProps,
-			children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
-				alignItems: "center",
-				columnGap: "1",
-				children: [startTitleIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
-					iconProps: { variant: "fill" },
-					icon: startTitleIcon,
-					className: classNames.icon
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
-					className: classNames.title,
-					color: "inherit",
-					children: title
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_VStack.VStack, {
+				className: "gap-[inherit]",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
+					alignItems: "center",
+					columnGap: "1",
+					children: [startTitleIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+						iconProps: { variant: "fill" },
+						icon: startTitleIcon,
+						className: classNames.icon
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+						className: classNames.title,
+						color: "inherit",
+						children: title
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
+					alignItems: "center",
+					columnGap: "1.5",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+						className: classNames.body,
+						color: "inherit",
+						children
+					}), endContent && !(0, react.isValidElement)(endContent) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+						className: classNames.endContent,
+						color: "inherit",
+						children: endContent
+					}) : endContent]
 				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
-				alignItems: "center",
-				columnGap: "1.5",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
-					className: classNames.body,
-					color: "inherit",
-					children
-				}), endContent && !(0, react.isValidElement)(endContent) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
-					className: classNames.endContent,
-					color: "inherit",
-					children: endContent
-				}) : endContent]
-			})]
+			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.TooltipArrow, {
 			ref: arrowRef,
 			style: { opacity: 0 }

package/dist/components/client/Tooltip/TooltipContent.js

@@ -3,13 +3,14 @@
 import { cx, getStyles } from "../../../styles/styler.js";
 import { Box } from "../../Box.js";
 import { Text } from "../../Text.js";
+import { VStack } from "../../VStack.js";
 import { IconSlot } from "../../IconSlot.js";
 import { useForkRef } from "../../../hooks/useForkRef.js";
 import { useSvgFloatingContent } from "../../../hooks/useSvgFloatingContent.js";
 import { SvgFloatingOverlay } from "../../SvgFloatingOverlay.js";
 import { useTooltipConfig } from "./UDSTooltipConfigProvider.js";
 import { TooltipInternalContext } from "./tooltipContext.js";
-import { forwardRef, isValidElement, useContext, useMemo, useRef } from "react";
+import { forwardRef, isValidElement, useContext, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip, TooltipArrow, useStoreState, useTooltipContext } from "@ariakit/react";
 
@@ -42,10 +43,7 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 		root: getStyles({
 			tooltipSizeRoot: "default",
 			tooltipVariantRoot: "default",
-			className: cx(useMemo(() => {
-				if (maxWidth !== void 0) return typeof maxWidth === "number" ? `max-w-[${maxWidth}px]` : `max-w-[${maxWidth}]`;
-				return "max-w-lg";
-			}, [maxWidth]), "flex", "z-[9999]", className)
+			className: cx(maxWidth === void 0 && "max-w-lg", "flex", "z-[9999]", className)
 		}),
 		svg: getStyles({
 			tooltipSizeSvg: "default",
@@ -57,7 +55,7 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 			position: "absolute",
 			width: "full",
 			height: "full",
-			className: cx("uds-bgBlurFallback", "top-0", "left-0", "z-[1]", "transition-opacity", `duration-[${animationDuration}ms]`, "ease-in-out")
+			className: cx("uds-bgBlurFallback", "top-0", "left-0", "z-[1]")
 		}),
 		title: getStyles({ tooltipSizeTitle: "default" }),
 		body: getStyles({ tooltipSizeBody: "default" }),
@@ -75,41 +73,44 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 		portal: internalContext ? internalContext.portal : true,
 		gutter: 10,
 		updatePosition: onPositionUpdate,
-		style: shift.x !== 0 || shift.y !== 0 ? { transform: `translate(${shift.x}px, ${shift.y}px)` } : void 0,
-		children: [/* @__PURE__ */ jsxs(SvgFloatingOverlay, {
+		style: {
+			...shift.x !== 0 || shift.y !== 0 ? { transform: `translate(${shift.x}px, ${shift.y}px)` } : void 0,
+			...maxWidth !== void 0 ? { maxWidth } : void 0
+		},
+		children: [/* @__PURE__ */ jsx(SvgFloatingOverlay, {
 			blurClassName: classNames.blur,
 			svgClassNames: { base: classNames.svg },
 			arrowHeight: ARROW_HEIGHT,
-			contentWrapperSlotProps: {
-				flexDirection: "column",
-				id
-			},
+			contentWrapperSlotProps: { id },
 			...svgFloatingContentProps,
-			children: [title && /* @__PURE__ */ jsxs(Box, {
-				alignItems: "center",
-				columnGap: "1",
-				children: [startTitleIcon && /* @__PURE__ */ jsx(IconSlot, {
-					iconProps: { variant: "fill" },
-					icon: startTitleIcon,
-					className: classNames.icon
-				}), /* @__PURE__ */ jsx(Text, {
-					className: classNames.title,
-					color: "inherit",
-					children: title
+			children: /* @__PURE__ */ jsxs(VStack, {
+				className: "gap-[inherit]",
+				children: [title && /* @__PURE__ */ jsxs(Box, {
+					alignItems: "center",
+					columnGap: "1",
+					children: [startTitleIcon && /* @__PURE__ */ jsx(IconSlot, {
+						iconProps: { variant: "fill" },
+						icon: startTitleIcon,
+						className: classNames.icon
+					}), /* @__PURE__ */ jsx(Text, {
+						className: classNames.title,
+						color: "inherit",
+						children: title
+					})]
+				}), /* @__PURE__ */ jsxs(Box, {
+					alignItems: "center",
+					columnGap: "1.5",
+					children: [/* @__PURE__ */ jsx(Text, {
+						className: classNames.body,
+						color: "inherit",
+						children
+					}), endContent && !isValidElement(endContent) ? /* @__PURE__ */ jsx(Text, {
+						className: classNames.endContent,
+						color: "inherit",
+						children: endContent
+					}) : endContent]
 				})]
-			}), /* @__PURE__ */ jsxs(Box, {
-				alignItems: "center",
-				columnGap: "1.5",
-				children: [/* @__PURE__ */ jsx(Text, {
-					className: classNames.body,
-					color: "inherit",
-					children
-				}), endContent && !isValidElement(endContent) ? /* @__PURE__ */ jsx(Text, {
-					className: classNames.endContent,
-					color: "inherit",
-					children: endContent
-				}) : endContent]
-			})]
+			})
 		}), /* @__PURE__ */ jsx(TooltipArrow, {
 			ref: arrowRef,
 			style: { opacity: 0 }

package/dist/hooks/useSvgFloatingContent.cjs

@@ -142,7 +142,22 @@ function useSvgFloatingContent({ open, effectivePlacement, borderRadius, arrowRe
 		arrowTipRadiusFraction
 	]);
 	const blurStyle = (0, react.useMemo)(() => {
-		const style = { clipPath: blurClipPath ? `path('${blurClipPath}')` : void 0 };
+		const style = {};
+		if (blurClipPath && dimensions.width > 0 && dimensions.height > 0) {
+			let maskWidth = dimensions.width;
+			let maskHeight = dimensions.height;
+			if (!hideArrow) {
+				const arrowSide = require_utils_svgFloatingContentUtils.getArrowSide(effectivePlacement);
+				if (arrowSide === "top" || arrowSide === "bottom") maskHeight += arrowHeight;
+				else maskWidth += arrowHeight;
+			}
+			const svgMask = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${maskWidth} ${maskHeight}'><path d='${blurClipPath}' fill='white'/></svg>`;
+			const maskUrl = `url("data:image/svg+xml,${encodeURIComponent(svgMask)}")`;
+			style.WebkitMaskImage = maskUrl;
+			style.maskImage = maskUrl;
+			style.WebkitMaskSize = "100% 100%";
+			style.maskSize = "100% 100%";
+		}
 		if (!hideArrow) switch (require_utils_svgFloatingContentUtils.getArrowSide(effectivePlacement)) {
 			case "top":
 				style.height = `calc(100% + ${arrowHeight}px)`;
@@ -164,6 +179,8 @@ function useSvgFloatingContent({ open, effectivePlacement, borderRadius, arrowRe
 		return style;
 	}, [
 		blurClipPath,
+		dimensions.width,
+		dimensions.height,
 		effectivePlacement,
 		hideArrow,
 		arrowHeight

package/dist/hooks/useSvgFloatingContent.js

@@ -140,7 +140,22 @@ function useSvgFloatingContent({ open, effectivePlacement, borderRadius, arrowRe
 		arrowTipRadiusFraction
 	]);
 	const blurStyle = useMemo(() => {
-		const style = { clipPath: blurClipPath ? `path('${blurClipPath}')` : void 0 };
+		const style = {};
+		if (blurClipPath && dimensions.width > 0 && dimensions.height > 0) {
+			let maskWidth = dimensions.width;
+			let maskHeight = dimensions.height;
+			if (!hideArrow) {
+				const arrowSide = getArrowSide(effectivePlacement);
+				if (arrowSide === "top" || arrowSide === "bottom") maskHeight += arrowHeight;
+				else maskWidth += arrowHeight;
+			}
+			const svgMask = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${maskWidth} ${maskHeight}'><path d='${blurClipPath}' fill='white'/></svg>`;
+			const maskUrl = `url("data:image/svg+xml,${encodeURIComponent(svgMask)}")`;
+			style.WebkitMaskImage = maskUrl;
+			style.maskImage = maskUrl;
+			style.WebkitMaskSize = "100% 100%";
+			style.maskSize = "100% 100%";
+		}
 		if (!hideArrow) switch (getArrowSide(effectivePlacement)) {
 			case "top":
 				style.height = `calc(100% + ${arrowHeight}px)`;
@@ -162,6 +177,8 @@ function useSvgFloatingContent({ open, effectivePlacement, borderRadius, arrowRe
 		return style;
 	}, [
 		blurClipPath,
+		dimensions.width,
+		dimensions.height,
 		effectivePlacement,
 		hideArrow,
 		arrowHeight

package/dist/styles/styler.d.cts

@@ -160,7 +160,7 @@ declare const getStylesInternal: (props?: ({
   fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "bold" | "extralight" | "light" | "regular" | "semibold" | "extrabold" | undefined;
   lineHeight?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
   letterSpacing?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
-  textAlign?: "center" | "start" | "end" | "justify" | undefined;
+  textAlign?: "start" | "end" | "center" | "justify" | undefined;
   textTransform?: "none" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "uppercase" | "lowercase" | "capitalize" | undefined;
   spacing?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
   spacingHorizontal?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
@@ -213,7 +213,7 @@ declare const getStylesInternal: (props?: ({
   overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
   overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
   position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
-  contentFit?: "none" | "fill" | "cover" | "contain" | "scale-down" | undefined;
+  contentFit?: "none" | "contain" | "fill" | "cover" | "scale-down" | undefined;
   colorMode?: "light" | "dark" | undefined;
   scaleMode?: "small" | "medium" | "xSmall" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
   width?: "full" | "fit" | "screen" | undefined;

package/dist/styles/styler.d.ts

@@ -160,7 +160,7 @@ declare const getStylesInternal: (props?: ({
   fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "bold" | "extralight" | "light" | "regular" | "semibold" | "extrabold" | undefined;
   lineHeight?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
   letterSpacing?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
-  textAlign?: "center" | "start" | "end" | "justify" | undefined;
+  textAlign?: "start" | "end" | "center" | "justify" | undefined;
   textTransform?: "none" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "uppercase" | "lowercase" | "capitalize" | undefined;
   spacing?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
   spacingHorizontal?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
@@ -213,7 +213,7 @@ declare const getStylesInternal: (props?: ({
   overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
   overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
   position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
-  contentFit?: "none" | "fill" | "cover" | "contain" | "scale-down" | undefined;
+  contentFit?: "none" | "contain" | "fill" | "cover" | "scale-down" | undefined;
   colorMode?: "light" | "dark" | undefined;
   scaleMode?: "small" | "medium" | "xSmall" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
   width?: "full" | "fit" | "screen" | undefined;

package/dist/tailwind/dist/tailwind/utils/getFontStyles.d.cts

@@ -19,6 +19,6 @@ import { FontConfig } from "../../../../types/dist/index.cjs";
  * addBase(fontVars);
  *
  */
-declare function getFontStyles(fontConfig: Partial<FontConfig>): Record<"--uds-font-sans" | "--uds-font-serif" | "--uds-font-mono" | "--uds-font-sans-alt" | "--uds-font-serif-alt", string>; //#endregion
+declare function getFontStyles(fontConfig: Partial<FontConfig>): Record<"--uds-font-sans" | "--uds-font-sans-alt" | "--uds-font-serif" | "--uds-font-serif-alt" | "--uds-font-mono", string>; //#endregion
 //#endregion
 export { getFontStyles };

package/dist/tailwind/dist/tailwind/utils/getFontStyles.d.ts

@@ -19,6 +19,6 @@ import { FontConfig } from "../../../../types/dist/index.js";
  * addBase(fontVars);
  *
  */
-declare function getFontStyles(fontConfig: Partial<FontConfig>): Record<"--uds-font-sans" | "--uds-font-serif" | "--uds-font-mono" | "--uds-font-sans-alt" | "--uds-font-serif-alt", string>; //#endregion
+declare function getFontStyles(fontConfig: Partial<FontConfig>): Record<"--uds-font-sans" | "--uds-font-sans-alt" | "--uds-font-serif" | "--uds-font-serif-alt" | "--uds-font-mono", string>; //#endregion
 //#endregion
 export { getFontStyles };