@yahoo/uds 3.115.0 → 3.116.0-beta.2

package/dist/config/dist/index.cjs

@@ -2,7 +2,7 @@
 
 //#region ../config/dist/index.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
-const LATEST_MIGRATION_VERSION = "v0.85.0";
+const LATEST_MIGRATION_VERSION = "v0.86.0";
 /**
 * NOTE: If you're building a feature with a migration,
 * this type will likely throw.  You can regenerate yosConfig
@@ -16440,6 +16440,84 @@ const defaultTokensConfig = {
 			}
 		}
 	},
+	popover: {
+		defaults: {
+			size: "default",
+			variant: "default"
+		},
+		variables: {
+			"size/default/closeIcon": { size: { rest: {
+				type: "iconSizes",
+				value: "sm",
+				valueType: "alias"
+			} } },
+			"size/default/contentWrapper": {
+				gap: { rest: {
+					type: "spacingAliases",
+					value: "3",
+					valueType: "alias"
+				} },
+				spacingHorizontal: { rest: {
+					type: "spacingAliases",
+					value: "5",
+					valueType: "alias"
+				} },
+				spacingVertical: { rest: {
+					type: "spacingAliases",
+					value: "5",
+					valueType: "alias"
+				} }
+			},
+			"size/default/root": { shadow: { rest: {
+				type: "elevationAliases",
+				value: "elevation-4",
+				valueType: "alias"
+			} } },
+			"size/default/svgBase": { borderRadius: { rest: {
+				type: "borderRadii",
+				value: "lg",
+				valueType: "alias"
+			} } },
+			"size/default/svgBorder": { strokeWidth: { rest: {
+				type: "elevationAliases",
+				value: "elevation-4",
+				valueType: "alias"
+			} } },
+			"variant/default/blur": { backdropBlur: { rest: {
+				type: "positiveIntegers",
+				value: 0,
+				valueType: "custom"
+			} } },
+			"variant/default/closeIcon": { color: { rest: {
+				type: "foregroundPaletteColors",
+				value: "primary",
+				valueType: "alias"
+			} } },
+			"variant/default/root": {},
+			"variant/default/svgBase": {
+				backgroundColor: { rest: {
+					type: "elevationAliases",
+					value: "elevation-4",
+					valueType: "alias"
+				} },
+				blurBackgroundColorFallback: { rest: {
+					type: "elevationAliases",
+					value: "elevation-4",
+					valueType: "alias"
+				} },
+				fillOpacity: { rest: {
+					type: "opacitySteps",
+					value: "100",
+					valueType: "alias"
+				} }
+			},
+			"variant/default/svgBorder": { stroke: { rest: {
+				type: "elevationAliases",
+				value: "elevation-4",
+				valueType: "alias"
+			} } }
+		}
+	},
 	radio: {
 		defaults: {
 			size: "sm",

package/dist/config/dist/index.js

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 //#region ../config/dist/index.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
-const LATEST_MIGRATION_VERSION = "v0.85.0";
+const LATEST_MIGRATION_VERSION = "v0.86.0";
 /**
 * NOTE: If you're building a feature with a migration,
 * this type will likely throw.  You can regenerate yosConfig
@@ -16439,6 +16439,84 @@ const defaultTokensConfig = {
 			}
 		}
 	},
+	popover: {
+		defaults: {
+			size: "default",
+			variant: "default"
+		},
+		variables: {
+			"size/default/closeIcon": { size: { rest: {
+				type: "iconSizes",
+				value: "sm",
+				valueType: "alias"
+			} } },
+			"size/default/contentWrapper": {
+				gap: { rest: {
+					type: "spacingAliases",
+					value: "3",
+					valueType: "alias"
+				} },
+				spacingHorizontal: { rest: {
+					type: "spacingAliases",
+					value: "5",
+					valueType: "alias"
+				} },
+				spacingVertical: { rest: {
+					type: "spacingAliases",
+					value: "5",
+					valueType: "alias"
+				} }
+			},
+			"size/default/root": { shadow: { rest: {
+				type: "elevationAliases",
+				value: "elevation-4",
+				valueType: "alias"
+			} } },
+			"size/default/svgBase": { borderRadius: { rest: {
+				type: "borderRadii",
+				value: "lg",
+				valueType: "alias"
+			} } },
+			"size/default/svgBorder": { strokeWidth: { rest: {
+				type: "elevationAliases",
+				value: "elevation-4",
+				valueType: "alias"
+			} } },
+			"variant/default/blur": { backdropBlur: { rest: {
+				type: "positiveIntegers",
+				value: 0,
+				valueType: "custom"
+			} } },
+			"variant/default/closeIcon": { color: { rest: {
+				type: "foregroundPaletteColors",
+				value: "primary",
+				valueType: "alias"
+			} } },
+			"variant/default/root": {},
+			"variant/default/svgBase": {
+				backgroundColor: { rest: {
+					type: "elevationAliases",
+					value: "elevation-4",
+					valueType: "alias"
+				} },
+				blurBackgroundColorFallback: { rest: {
+					type: "elevationAliases",
+					value: "elevation-4",
+					valueType: "alias"
+				} },
+				fillOpacity: { rest: {
+					type: "opacitySteps",
+					value: "100",
+					valueType: "alias"
+				} }
+			},
+			"variant/default/svgBorder": { stroke: { rest: {
+				type: "elevationAliases",
+				value: "elevation-4",
+				valueType: "alias"
+			} } }
+		}
+	},
 	radio: {
 		defaults: {
 			size: "sm",

package/dist/{components/client/Tooltip/useTooltipContent.cjs → hooks/useSvgFloatingContent.cjs}

@@ -1,23 +1,19 @@
-"use client";
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
-const require_index = require('../../../css-tokens/dist/index.cjs');
-const require_components_client_Tooltip_util = require('./util.cjs');
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../css-tokens/dist/index.cjs');
+const require_utils_parseShadow = require('../utils/parseShadow.cjs');
+const require_utils_svgFloatingContentUtils = require('../utils/svgFloatingContentUtils.cjs');
 let react = require("react");
 
-//#region src/components/client/Tooltip/useTooltipContent.ts
-function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, arrowRef, animationDuration }) {
+//#region src/hooks/useSvgFloatingContent.ts
+function useSvgFloatingContent({ open, effectivePlacement, borderRadius, arrowRef, animationDuration, hideArrow = false, arrowWidth, arrowHeight, arrowTipRadiusFraction }) {
 	const internalRef = (0, react.useRef)(null);
 	const shadowFilterId = (0, react.useId)();
 	const [dimensions, setDimensions] = (0, react.useState)({
 		width: 0,
 		height: 0
 	});
-	const maxWidthClass = (0, react.useMemo)(() => {
-		if (maxWidth !== void 0) return typeof maxWidth === "number" ? `max-w-[${maxWidth}px]` : `max-w-[${maxWidth}]`;
-		return "max-w-lg";
-	}, [maxWidth]);
 	(0, react.useEffect)(() => {
 		const el = internalRef.current;
 		if (!el) return;
@@ -37,7 +33,7 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
 		const shadowValue = getComputedStyle(internalRef.current).getPropertyValue(`--${require_index.DROP_SHADOW_PREFIX}`);
 		if (shadowValue !== shadowValueRef.current) {
 			shadowValueRef.current = shadowValue;
-			setShadows(require_components_client_Tooltip_util.parseShadow(shadowValue));
+			setShadows(require_utils_parseShadow.parseShadow(shadowValue));
 		}
 	}, []);
 	const shadowPadding = (0, react.useMemo)(() => {
@@ -51,12 +47,12 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
 	const [arrowCenter, setArrowCenter] = (0, react.useState)(void 0);
 	const computeArrowCenter = (0, react.useCallback)(() => {
 		const arrowEl = arrowRef.current;
-		const tooltipEl = internalRef.current;
-		if (!arrowEl || !tooltipEl) return;
+		const el = internalRef.current;
+		if (!arrowEl || !el) return;
 		const arrowRect = arrowEl.getBoundingClientRect();
-		const tooltipRect = tooltipEl.getBoundingClientRect();
-		const side = require_components_client_Tooltip_util.getArrowSide(effectivePlacement);
-		const raw = side === "top" || side === "bottom" ? arrowRect.left + arrowRect.width / 2 - tooltipRect.left : arrowRect.top + arrowRect.height / 2 - tooltipRect.top;
+		const rect = el.getBoundingClientRect();
+		const side = require_utils_svgFloatingContentUtils.getArrowSide(effectivePlacement);
+		const raw = side === "top" || side === "bottom" ? arrowRect.left + arrowRect.width / 2 - rect.left : arrowRect.top + arrowRect.height / 2 - rect.top;
 		return Math.round(raw);
 	}, [arrowRef, effectivePlacement]);
 	const onPositionUpdate = (0, react.useCallback)(async ({ updatePosition }) => {
@@ -73,81 +69,115 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
 			});
 			readShadows();
 		}
-		const next = computeArrowCenter();
-		if (next !== void 0) setArrowCenter((prev) => prev === next ? prev : next);
-	}, [computeArrowCenter, readShadows]);
+		if (!hideArrow) {
+			const next = computeArrowCenter();
+			if (next !== void 0) setArrowCenter((prev) => prev === next ? prev : next);
+		}
+	}, [
+		computeArrowCenter,
+		readShadows,
+		hideArrow
+	]);
 	const svgPath = (0, react.useMemo)(() => {
-		return dimensions.width > 0 && dimensions.height > 0 ? require_components_client_Tooltip_util.generateTooltipPath({
+		return dimensions.width > 0 && dimensions.height > 0 ? require_utils_svgFloatingContentUtils.generateSvgFloatingContentPath({
 			width: dimensions.width,
 			height: dimensions.height,
 			placement: effectivePlacement,
 			borderRadius,
-			arrowCenter
+			arrowCenter: hideArrow ? void 0 : arrowCenter,
+			arrowWidth,
+			arrowHeight,
+			arrowTipRadiusFraction,
+			...hideArrow && {
+				arrowWidth: 0,
+				arrowHeight: 0
+			}
 		}) : null;
 	}, [
 		effectivePlacement,
 		dimensions.width,
 		dimensions.height,
 		borderRadius,
-		arrowCenter
+		arrowCenter,
+		hideArrow,
+		arrowWidth,
+		arrowHeight,
+		arrowTipRadiusFraction
 	]);
 	const blurClipPath = (0, react.useMemo)(() => {
 		if (dimensions.width <= 0 || dimensions.height <= 0) return null;
-		const arrowSide = require_components_client_Tooltip_util.getArrowSide(effectivePlacement);
-		const offsetX = arrowSide === "left" ? require_components_client_Tooltip_util.ARROW_HEIGHT : 0;
-		const offsetY = arrowSide === "top" ? require_components_client_Tooltip_util.ARROW_HEIGHT : 0;
-		return require_components_client_Tooltip_util.generateTooltipPath({
+		if (hideArrow) return require_utils_svgFloatingContentUtils.generateSvgFloatingContentPath({
+			width: dimensions.width,
+			height: dimensions.height,
+			placement: effectivePlacement,
+			borderRadius,
+			arrowWidth: 0,
+			arrowHeight: 0,
+			arrowTipRadiusFraction
+		});
+		const arrowSide = require_utils_svgFloatingContentUtils.getArrowSide(effectivePlacement);
+		const offsetX = arrowSide === "left" ? arrowHeight : 0;
+		const offsetY = arrowSide === "top" ? arrowHeight : 0;
+		return require_utils_svgFloatingContentUtils.generateSvgFloatingContentPath({
 			width: dimensions.width,
 			height: dimensions.height,
 			placement: effectivePlacement,
 			borderRadius,
 			arrowCenter,
 			offsetX,
-			offsetY
+			offsetY,
+			arrowWidth,
+			arrowHeight,
+			arrowTipRadiusFraction
 		});
 	}, [
 		effectivePlacement,
 		dimensions.width,
 		dimensions.height,
 		borderRadius,
-		arrowCenter
+		arrowCenter,
+		hideArrow,
+		arrowHeight,
+		arrowWidth,
+		arrowTipRadiusFraction
 	]);
 	const blurStyle = (0, react.useMemo)(() => {
 		const style = { clipPath: blurClipPath ? `path('${blurClipPath}')` : void 0 };
-		switch (require_components_client_Tooltip_util.getArrowSide(effectivePlacement)) {
+		if (!hideArrow) switch (require_utils_svgFloatingContentUtils.getArrowSide(effectivePlacement)) {
 			case "top":
-				style.height = `calc(100% + ${require_components_client_Tooltip_util.ARROW_HEIGHT}px)`;
+				style.height = `calc(100% + ${arrowHeight}px)`;
 				style.top = "auto";
 				style.bottom = "0";
 				break;
 			case "bottom":
-				style.height = `calc(100% + ${require_components_client_Tooltip_util.ARROW_HEIGHT}px)`;
+				style.height = `calc(100% + ${arrowHeight}px)`;
 				break;
 			case "left":
-				style.width = `calc(100% + ${require_components_client_Tooltip_util.ARROW_HEIGHT}px)`;
+				style.width = `calc(100% + ${arrowHeight}px)`;
 				style.left = "auto";
 				style.right = "0";
 				break;
 			case "right":
-				style.width = `calc(100% + ${require_components_client_Tooltip_util.ARROW_HEIGHT}px)`;
+				style.width = `calc(100% + ${arrowHeight}px)`;
 				break;
 		}
 		return style;
-	}, [blurClipPath, effectivePlacement]);
+	}, [
+		blurClipPath,
+		effectivePlacement,
+		hideArrow,
+		arrowHeight
+	]);
 	const [visible, setVisible] = (0, react.useState)(false);
-	if ((!open || !svgPath) && visible) setVisible(false);
 	(0, react.useEffect)(() => {
-		if (open && svgPath) {
-			const raf = requestAnimationFrame(() => {
-				setVisible(true);
-			});
-			return () => cancelAnimationFrame(raf);
-		}
+		const raf = requestAnimationFrame(() => {
+			setVisible(open && !!svgPath);
+		});
+		return () => cancelAnimationFrame(raf);
 	}, [open, svgPath]);
 	return {
 		internalRef,
 		shadowFilterId,
-		maxWidthClass,
 		dimensions,
 		shadows,
 		shadowPadding,
@@ -159,28 +189,31 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
 			opacity: visible ? 1 : 0,
 			transition: `opacity ${animationDuration}ms ease-in-out`
 		},
-		tooltipShift: (0, react.useMemo)(() => {
-			if (arrowCenter === void 0 || dimensions.width <= 0 || dimensions.height <= 0) return {
+		shift: (0, react.useMemo)(() => {
+			if (hideArrow || arrowCenter === void 0 || dimensions.width <= 0 || dimensions.height <= 0) return {
 				x: 0,
 				y: 0
 			};
-			return require_components_client_Tooltip_util.getArrowClampDelta({
+			return require_utils_svgFloatingContentUtils.getArrowClampDelta({
 				width: dimensions.width,
 				height: dimensions.height,
 				placement: effectivePlacement,
 				borderRadius,
-				arrowCenter
+				arrowCenter,
+				arrowWidth
 			});
 		}, [
+			hideArrow,
 			arrowCenter,
 			dimensions.width,
 			dimensions.height,
 			effectivePlacement,
-			borderRadius
+			borderRadius,
+			arrowWidth
 		]),
 		onPositionUpdate
 	};
 }
 
 //#endregion
-exports.useTooltipContent = useTooltipContent;
+exports.useSvgFloatingContent = useSvgFloatingContent;

package/dist/hooks/useSvgFloatingContent.d.cts

@@ -0,0 +1,74 @@
+
+import { ParsedShadow } from "../utils/parseShadow.cjs";
+import { CSSProperties, RefObject } from "react";
+
+//#region src/hooks/useSvgFloatingContent.d.ts
+interface UseSvgFloatingContentOptions {
+  /** Whether the element is currently open. */
+  open: boolean;
+  /** Resolved placement after Ariakit positioning (e.g. `'top'`, `'bottom-start'`). */
+  effectivePlacement: string;
+  /** Border-radius from the component config (px). */
+  borderRadius: number;
+  /**
+   * Ref to the arrow element. Its position is read inside the `updatePosition`
+   * callback so the SVG arrow always mirrors where floating-ui places the
+   * native arrow.
+   */
+  arrowRef: RefObject<HTMLDivElement | null>;
+  /** Animation duration from the component config (ms). */
+  animationDuration: number;
+  /** Whether to hide the arrow. */
+  hideArrow?: boolean;
+  /** Width of the arrow (px). */
+  arrowWidth: number;
+  /** Height of the arrow (px). */
+  arrowHeight: number;
+  /** Fraction of the container border-radius applied to round the arrow tip (0 = sharp point, 1 = same radius as the container corners). */
+  arrowTipRadiusFraction: number;
+}
+interface UseSvgFloatingContentReturn {
+  internalRef: RefObject<HTMLElement | null>;
+  shadowFilterId: string;
+  dimensions: {
+    width: number;
+    height: number;
+  };
+  shadows: ParsedShadow[];
+  shadowPadding: number;
+  svgPath: string | null;
+  blurClipPath: string | null;
+  blurStyle: CSSProperties;
+  visible: boolean;
+  childTransitionStyle: CSSProperties;
+  /**
+   * Pixel offset to apply as a CSS transform on the element so that
+   * the (clamped) SVG arrow aligns with the trigger center even when the
+   * trigger is too small / close to a rounded corner for the arrow to reach.
+   */
+  shift: {
+    x: number;
+    y: number;
+  };
+  /**
+   * Pass as the `updatePosition` prop to the Ariakit component.
+   * This hooks into floating-ui's positioning lifecycle so the SVG arrow
+   * center is read after every `computePosition`
+   */
+  onPositionUpdate: (props: {
+    updatePosition: () => Promise<void>;
+  }) => Promise<void>;
+}
+declare function useSvgFloatingContent({
+  open,
+  effectivePlacement,
+  borderRadius,
+  arrowRef,
+  animationDuration,
+  hideArrow,
+  arrowWidth,
+  arrowHeight,
+  arrowTipRadiusFraction
+}: UseSvgFloatingContentOptions): UseSvgFloatingContentReturn;
+//#endregion
+export { type UseSvgFloatingContentOptions, type UseSvgFloatingContentReturn, useSvgFloatingContent };

package/dist/hooks/useSvgFloatingContent.d.ts

@@ -0,0 +1,74 @@
+
+import { ParsedShadow } from "../utils/parseShadow.js";
+import { CSSProperties, RefObject } from "react";
+
+//#region src/hooks/useSvgFloatingContent.d.ts
+interface UseSvgFloatingContentOptions {
+  /** Whether the element is currently open. */
+  open: boolean;
+  /** Resolved placement after Ariakit positioning (e.g. `'top'`, `'bottom-start'`). */
+  effectivePlacement: string;
+  /** Border-radius from the component config (px). */
+  borderRadius: number;
+  /**
+   * Ref to the arrow element. Its position is read inside the `updatePosition`
+   * callback so the SVG arrow always mirrors where floating-ui places the
+   * native arrow.
+   */
+  arrowRef: RefObject<HTMLDivElement | null>;
+  /** Animation duration from the component config (ms). */
+  animationDuration: number;
+  /** Whether to hide the arrow. */
+  hideArrow?: boolean;
+  /** Width of the arrow (px). */
+  arrowWidth: number;
+  /** Height of the arrow (px). */
+  arrowHeight: number;
+  /** Fraction of the container border-radius applied to round the arrow tip (0 = sharp point, 1 = same radius as the container corners). */
+  arrowTipRadiusFraction: number;
+}
+interface UseSvgFloatingContentReturn {
+  internalRef: RefObject<HTMLElement | null>;
+  shadowFilterId: string;
+  dimensions: {
+    width: number;
+    height: number;
+  };
+  shadows: ParsedShadow[];
+  shadowPadding: number;
+  svgPath: string | null;
+  blurClipPath: string | null;
+  blurStyle: CSSProperties;
+  visible: boolean;
+  childTransitionStyle: CSSProperties;
+  /**
+   * Pixel offset to apply as a CSS transform on the element so that
+   * the (clamped) SVG arrow aligns with the trigger center even when the
+   * trigger is too small / close to a rounded corner for the arrow to reach.
+   */
+  shift: {
+    x: number;
+    y: number;
+  };
+  /**
+   * Pass as the `updatePosition` prop to the Ariakit component.
+   * This hooks into floating-ui's positioning lifecycle so the SVG arrow
+   * center is read after every `computePosition`
+   */
+  onPositionUpdate: (props: {
+    updatePosition: () => Promise<void>;
+  }) => Promise<void>;
+}
+declare function useSvgFloatingContent({
+  open,
+  effectivePlacement,
+  borderRadius,
+  arrowRef,
+  animationDuration,
+  hideArrow,
+  arrowWidth,
+  arrowHeight,
+  arrowTipRadiusFraction
+}: UseSvgFloatingContentOptions): UseSvgFloatingContentReturn;
+//#endregion
+export { type UseSvgFloatingContentOptions, type UseSvgFloatingContentReturn, useSvgFloatingContent };