@yahoo/uds 3.116.3 → 3.117.0

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,89 @@ const defaultTokensConfig = {
 			}
 		}
 	},
+	popover: {
+		defaults: {
+			size: "default",
+			variant: "default"
+		},
+		variables: {
+			"size/default/closeIcon": { size: { rest: {
+				type: "iconSizes",
+				value: "sm",
+				valueType: "alias"
+			} } },
+			"size/default/closeIconContainer": { spacing: { rest: {
+				type: "spacingAliases",
+				value: "2",
+				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,89 @@ const defaultTokensConfig = {
 			}
 		}
 	},
+	popover: {
+		defaults: {
+			size: "default",
+			variant: "default"
+		},
+		variables: {
+			"size/default/closeIcon": { size: { rest: {
+				type: "iconSizes",
+				value: "sm",
+				valueType: "alias"
+			} } },
+			"size/default/closeIconContainer": { spacing: { rest: {
+				type: "spacingAliases",
+				value: "2",
+				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/hooks/useSvgFloatingContent.cjs

@@ -0,0 +1,236 @@
+/*! © 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_utils_parseShadow = require('../utils/parseShadow.cjs');
+const require_utils_svgFloatingContentUtils = require('../utils/svgFloatingContentUtils.cjs');
+let react = require("react");
+
+//#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
+	});
+	(0, react.useEffect)(() => {
+		const el = internalRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver(() => {
+			setDimensions({
+				width: el.offsetWidth,
+				height: el.offsetHeight
+			});
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [open]);
+	const [shadows, setShadows] = (0, react.useState)([]);
+	const shadowValueRef = (0, react.useRef)("");
+	const readShadows = (0, react.useCallback)(() => {
+		if (!internalRef.current) return;
+		const shadowValue = getComputedStyle(internalRef.current).getPropertyValue(`--${require_index.DROP_SHADOW_PREFIX}`);
+		if (shadowValue !== shadowValueRef.current) {
+			shadowValueRef.current = shadowValue;
+			setShadows(require_utils_parseShadow.parseShadow(shadowValue));
+		}
+	}, []);
+	const shadowPadding = (0, react.useMemo)(() => {
+		if (shadows.length === 0) return 0;
+		return shadows.reduce((max, s) => {
+			const extentX = Math.abs(s.x) + s.blur + Math.abs(s.spread);
+			const extentY = Math.abs(s.y) + s.blur + Math.abs(s.spread);
+			return Math.max(max, extentX, extentY);
+		}, 0);
+	}, [shadows]);
+	const [arrowCenter, setArrowCenter] = (0, react.useState)(void 0);
+	const computeArrowCenter = (0, react.useCallback)(() => {
+		const arrowEl = arrowRef.current;
+		const el = internalRef.current;
+		if (!arrowEl || !el) return;
+		const arrowRect = arrowEl.getBoundingClientRect();
+		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 }) => {
+		await updatePosition();
+		const el = internalRef.current;
+		if (el) {
+			const { offsetWidth, offsetHeight } = el;
+			if (offsetWidth > 0 && offsetHeight > 0) setDimensions((prev) => {
+				if (prev.width === offsetWidth && prev.height === offsetHeight) return prev;
+				return {
+					width: offsetWidth,
+					height: offsetHeight
+				};
+			});
+			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_utils_svgFloatingContentUtils.generateSvgFloatingContentPath({
+			width: dimensions.width,
+			height: dimensions.height,
+			placement: effectivePlacement,
+			borderRadius,
+			arrowCenter: hideArrow ? void 0 : arrowCenter,
+			arrowWidth,
+			arrowHeight,
+			arrowTipRadiusFraction,
+			...hideArrow && {
+				arrowWidth: 0,
+				arrowHeight: 0
+			}
+		}) : null;
+	}, [
+		effectivePlacement,
+		dimensions.width,
+		dimensions.height,
+		borderRadius,
+		arrowCenter,
+		hideArrow,
+		arrowWidth,
+		arrowHeight,
+		arrowTipRadiusFraction
+	]);
+	const blurClipPath = (0, react.useMemo)(() => {
+		if (dimensions.width <= 0 || dimensions.height <= 0) return null;
+		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,
+			arrowWidth,
+			arrowHeight,
+			arrowTipRadiusFraction
+		});
+	}, [
+		effectivePlacement,
+		dimensions.width,
+		dimensions.height,
+		borderRadius,
+		arrowCenter,
+		hideArrow,
+		arrowHeight,
+		arrowWidth,
+		arrowTipRadiusFraction
+	]);
+	const blurStyle = (0, react.useMemo)(() => {
+		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)`;
+				style.top = "auto";
+				style.bottom = "0";
+				break;
+			case "bottom":
+				style.height = `calc(100% + ${arrowHeight}px)`;
+				break;
+			case "left":
+				style.width = `calc(100% + ${arrowHeight}px)`;
+				style.left = "auto";
+				style.right = "0";
+				break;
+			case "right":
+				style.width = `calc(100% + ${arrowHeight}px)`;
+				break;
+		}
+		return style;
+	}, [
+		blurClipPath,
+		dimensions.width,
+		dimensions.height,
+		effectivePlacement,
+		hideArrow,
+		arrowHeight
+	]);
+	const [visible, setVisible] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		const raf = requestAnimationFrame(() => {
+			setVisible(open && !!svgPath);
+		});
+		return () => cancelAnimationFrame(raf);
+	}, [open, svgPath]);
+	return {
+		internalRef,
+		shadowFilterId,
+		dimensions,
+		shadows,
+		shadowPadding,
+		svgPath,
+		blurClipPath,
+		blurStyle,
+		visible,
+		childTransitionStyle: {
+			opacity: visible ? 1 : 0,
+			transition: `opacity ${animationDuration}ms ease-in-out`
+		},
+		shift: (0, react.useMemo)(() => {
+			if (hideArrow || arrowCenter === void 0 || dimensions.width <= 0 || dimensions.height <= 0) return {
+				x: 0,
+				y: 0
+			};
+			return require_utils_svgFloatingContentUtils.getArrowClampDelta({
+				width: dimensions.width,
+				height: dimensions.height,
+				placement: effectivePlacement,
+				borderRadius,
+				arrowCenter,
+				arrowWidth
+			});
+		}, [
+			hideArrow,
+			arrowCenter,
+			dimensions.width,
+			dimensions.height,
+			effectivePlacement,
+			borderRadius,
+			arrowWidth
+		]),
+		onPositionUpdate
+	};
+}
+
+//#endregion
+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 };