@yahoo/uds 3.116.3 → 3.117.0

package/dist/utils/parseShadow.d.ts

@@ -0,0 +1,33 @@
+
+//#region src/utils/parseShadow.d.ts
+interface ParsedShadow {
+  /** Horizontal offset in px. */
+  x: number;
+  /** Vertical offset in px. */
+  y: number;
+  /** Blur radius in px. */
+  blur: number;
+  /** Spread radius in px (always 0 for drop-shadow filter functions). */
+  spread: number;
+  /** The raw CSS color string (e.g. `rgb(0 0 0 / 0.12)`, `#ff0000`, `red`). */
+  color: string;
+}
+/**
+ * Parses a CSS shadow value — which may contain multiple comma-separated
+ * layers — into an array of {@link ParsedShadow} objects.
+ *
+ * @example
+ * ```ts
+ * parseShadow('0px 4px 8px 0px rgb(0 0 0 / 0.12)')
+ * // → [{ x: 0, y: 4, blur: 8, spread: 0, color: 'rgb(0 0 0 / 0.12)' }]
+ *
+ * parseShadow('0px 4px 8px rgb(0 0 0 / 0.12), 0px 1px 2px rgba(0, 0, 0, 0.08)')
+ * // → [
+ * //     { x: 0, y: 4, blur: 8, spread: 0, color: 'rgb(0 0 0 / 0.12)' },
+ * //     { x: 0, y: 1, blur: 2, spread: 0, color: 'rgba(0, 0, 0, 0.08)' },
+ * //   ]
+ * ```
+ */
+declare function parseShadow(shadowValue: string): ParsedShadow[];
+//#endregion
+export { type ParsedShadow, parseShadow };

package/dist/utils/parseShadow.js

@@ -0,0 +1,118 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region src/utils/parseShadow.ts
+/**
+* Splits a CSS multi-shadow value (comma-separated) into individual
+* shadow strings, correctly handling commas nested inside color functions
+* like `rgb()`, `rgba()`, `hsl()`, etc.
+*/
+function splitShadows(value) {
+	const shadows = [];
+	let current = "";
+	let depth = 0;
+	for (let i = 0; i < value.length; i++) {
+		const char = value[i];
+		if (char === "(") {
+			depth++;
+			current += char;
+		} else if (char === ")") {
+			depth--;
+			current += char;
+		} else if (char === "," && depth === 0) {
+			if (current.trim()) shadows.push(current.trim());
+			current = "";
+		} else current += char;
+	}
+	if (current.trim()) shadows.push(current.trim());
+	return shadows;
+}
+/**
+* Returns `true` if the token is a CSS color value.
+*
+* In a box-shadow context (after filtering `inset`), every token is either a
+* length or a color. Colors always start with `#` (hex), a letter (named
+* colors like `red`, `transparent`, `currentcolor`), or are a CSS function
+* containing `(` (e.g. `rgb(…)`, `hsl(…)`, `oklch(…)`).
+*/
+function isColorToken(token) {
+	const ch = token[0];
+	return ch !== "-" && ch !== "." && (ch < "0" || ch > "9");
+}
+/**
+* Splits a CSS value on whitespace, but keeps parenthesized groups
+* (e.g. `rgb(0, 0, 0)`) together as single tokens.
+*/
+function tokenizeCSSValue(value) {
+	const tokens = [];
+	let current = "";
+	let depth = 0;
+	for (const char of value) {
+		if (char === "(") depth++;
+		if (char === ")") depth--;
+		if (char === " " && depth === 0) {
+			if (current) tokens.push(current);
+			current = "";
+		} else current += char;
+	}
+	if (current) tokens.push(current);
+	return tokens;
+}
+/**
+* Parses a single CSS shadow value string into its constituent parts.
+*
+* Handles all standard CSS box-shadow / drop-shadow permutations:
+* - Color before or after length values (`red 0 4px 8px` or `0 4px 8px red`)
+* - Optional blur and spread radii (defaults to 0)
+* - `inset` keyword at any position (silently ignored)
+* - All color formats: named, hex (3/4/6/8-digit), rgb/rgba, hsl/hsla, oklch,
+*   oklab, lab, lch, color(), color-mix(), light-dark(), etc.
+* - `none` / empty values → zeroed-out result with `transparent` color
+*/
+function parseSingleShadow(shadow) {
+	const value = shadow.trim();
+	if (!value || value.toLowerCase() === "none") return {
+		x: 0,
+		y: 0,
+		blur: 0,
+		spread: 0,
+		color: "transparent"
+	};
+	const tokens = tokenizeCSSValue(value);
+	const lengths = [];
+	const colorParts = [];
+	for (const token of tokens) {
+		if (token.toLowerCase() === "inset") continue;
+		if (isColorToken(token)) colorParts.push(token);
+		else lengths.push(token);
+	}
+	return {
+		x: lengths.length > 0 ? parseFloat(lengths[0]) : 0,
+		y: lengths.length > 1 ? parseFloat(lengths[1]) : 0,
+		blur: lengths.length > 2 ? parseFloat(lengths[2]) : 0,
+		spread: lengths.length > 3 ? parseFloat(lengths[3]) : 0,
+		color: colorParts.length > 0 ? colorParts.join(" ") : "rgb(0 0 0 / 1)"
+	};
+}
+/**
+* Parses a CSS shadow value — which may contain multiple comma-separated
+* layers — into an array of {@link ParsedShadow} objects.
+*
+* @example
+* ```ts
+* parseShadow('0px 4px 8px 0px rgb(0 0 0 / 0.12)')
+* // → [{ x: 0, y: 4, blur: 8, spread: 0, color: 'rgb(0 0 0 / 0.12)' }]
+*
+* parseShadow('0px 4px 8px rgb(0 0 0 / 0.12), 0px 1px 2px rgba(0, 0, 0, 0.08)')
+* // → [
+* //     { x: 0, y: 4, blur: 8, spread: 0, color: 'rgb(0 0 0 / 0.12)' },
+* //     { x: 0, y: 1, blur: 2, spread: 0, color: 'rgba(0, 0, 0, 0.08)' },
+* //   ]
+* ```
+*/
+function parseShadow(shadowValue) {
+	const trimmed = shadowValue.trim();
+	if (!trimmed || trimmed.toLowerCase() === "none") return [];
+	return splitShadows(trimmed).map(parseSingleShadow);
+}
+
+//#endregion
+export { parseShadow };

package/dist/utils/svgFloatingContentUtils.cjs

@@ -0,0 +1,121 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+//#region src/utils/svgFloatingContentUtils.ts
+/**
+* Returns the side of the element where the arrow should appear.
+* The arrow points *toward* the trigger, so it lives on the opposite
+* side of the placement direction.
+*/
+function getArrowSide(placement) {
+	switch (placement.split("-")[0]) {
+		case "bottom": return "top";
+		case "top": return "bottom";
+		case "left": return "right";
+		case "right": return "left";
+		default: return "top";
+	}
+}
+/**
+* Generates an SVG `<path>` string for a rounded rectangle with an arrow
+* pointing toward the trigger element.
+*
+* The path is traced clockwise, inserting the arrow triangle on the
+* appropriate edge.  The arrow extends *outside* the 0,0 → width,height
+* rectangle so the host `<svg>` must use `overflow: visible`.
+*/
+function generateSvgFloatingContentPath({ width, height, placement, borderRadius, arrowWidth, arrowHeight, arrowTipRadiusFraction, arrowCenter, offsetX: ox = 0, offsetY: oy = 0 }) {
+	const aw = arrowWidth / 2;
+	const ah = arrowHeight;
+	const arrowSide = getArrowSide(placement);
+	const arrowEdge = arrowSide === "top" || arrowSide === "bottom" ? width : height;
+	const otherEdge = arrowSide === "top" || arrowSide === "bottom" ? height : width;
+	const maxRadius = Math.min(otherEdge / 2, (arrowEdge - arrowWidth) / 2);
+	const r = Math.max(0, Math.min(borderRadius, maxRadius));
+	const minAc = r + aw;
+	const edgeLength = arrowSide === "top" || arrowSide === "bottom" ? width : height;
+	let ac = arrowCenter ?? edgeLength / 2;
+	ac = Math.max(minAc, Math.min(edgeLength - minAc, ac));
+	const edgeLen = Math.sqrt(aw * aw + ah * ah);
+	const tipR = r > 0 && edgeLen > 0 ? Math.min(r * arrowTipRadiusFraction, edgeLen / 2) : 0;
+	const daw = edgeLen > 0 ? aw / edgeLen : 0;
+	const dah = edgeLen > 0 ? ah / edgeLen : 0;
+	const d = [];
+	d.push(`M ${r + ox} ${oy}`);
+	if (arrowSide === "top") {
+		d.push(`L ${ac - aw + ox} ${oy}`);
+		if (tipR > 0) {
+			d.push(`L ${ac - tipR * daw + ox} ${-ah + tipR * dah + oy}`);
+			d.push(`Q ${ac + ox} ${-ah + oy} ${ac + tipR * daw + ox} ${-ah + tipR * dah + oy}`);
+		} else d.push(`L ${ac + ox} ${-ah + oy}`);
+		d.push(`L ${ac + aw + ox} ${oy}`);
+	}
+	d.push(`L ${width - r + ox} ${oy}`);
+	d.push(`A ${r} ${r} 0 0 1 ${width + ox} ${r + oy}`);
+	if (arrowSide === "right") {
+		d.push(`L ${width + ox} ${ac - aw + oy}`);
+		if (tipR > 0) {
+			d.push(`L ${width + ah - tipR * dah + ox} ${ac - tipR * daw + oy}`);
+			d.push(`Q ${width + ah + ox} ${ac + oy} ${width + ah - tipR * dah + ox} ${ac + tipR * daw + oy}`);
+		} else d.push(`L ${width + ah + ox} ${ac + oy}`);
+		d.push(`L ${width + ox} ${ac + aw + oy}`);
+	}
+	d.push(`L ${width + ox} ${height - r + oy}`);
+	d.push(`A ${r} ${r} 0 0 1 ${width - r + ox} ${height + oy}`);
+	if (arrowSide === "bottom") {
+		d.push(`L ${ac + aw + ox} ${height + oy}`);
+		if (tipR > 0) {
+			d.push(`L ${ac + tipR * daw + ox} ${height + ah - tipR * dah + oy}`);
+			d.push(`Q ${ac + ox} ${height + ah + oy} ${ac - tipR * daw + ox} ${height + ah - tipR * dah + oy}`);
+		} else d.push(`L ${ac + ox} ${height + ah + oy}`);
+		d.push(`L ${ac - aw + ox} ${height + oy}`);
+	}
+	d.push(`L ${r + ox} ${height + oy}`);
+	d.push(`A ${r} ${r} 0 0 1 ${ox} ${height - r + oy}`);
+	if (arrowSide === "left") {
+		d.push(`L ${ox} ${ac + aw + oy}`);
+		if (tipR > 0) {
+			d.push(`L ${-ah + tipR * dah + ox} ${ac + tipR * daw + oy}`);
+			d.push(`Q ${-ah + ox} ${ac + oy} ${-ah + tipR * dah + ox} ${ac - tipR * daw + oy}`);
+		} else d.push(`L ${-ah + ox} ${ac + oy}`);
+		d.push(`L ${ox} ${ac - aw + oy}`);
+	}
+	d.push(`L ${ox} ${r + oy}`);
+	d.push(`A ${r} ${r} 0 0 1 ${r + ox} ${oy}`);
+	d.push("Z");
+	return d.join(" ");
+}
+/**
+* Computes the pixel offset the tooltip must shift so that the SVG arrow
+* (after clamping) visually aligns with the Ariakit arrow's actual position.
+*
+* When the desired `arrowCenter` falls inside the safe zone the delta is 0.
+* When it falls outside (e.g. a tiny trigger near a rounded corner), the
+* returned delta tells the caller how far to translate the tooltip element
+* so the clamped arrow ends up over the trigger center.
+*/
+function getArrowClampDelta({ width, height, placement, borderRadius, arrowCenter, arrowWidth }) {
+	const aw = arrowWidth / 2;
+	const side = getArrowSide(placement);
+	const arrowEdge = side === "top" || side === "bottom" ? width : height;
+	const otherEdge = side === "top" || side === "bottom" ? height : width;
+	const maxRadius = Math.min(otherEdge / 2, (arrowEdge - arrowWidth) / 2);
+	const minAc = Math.max(0, Math.min(borderRadius, maxRadius)) + aw;
+	const maxAc = arrowEdge - minAc;
+	let delta = 0;
+	if (arrowCenter < minAc) delta = arrowCenter - minAc;
+	else if (arrowCenter > maxAc) delta = arrowCenter - maxAc;
+	if (side === "top" || side === "bottom") return {
+		x: delta,
+		y: 0
+	};
+	return {
+		x: 0,
+		y: delta
+	};
+}
+
+//#endregion
+exports.generateSvgFloatingContentPath = generateSvgFloatingContentPath;
+exports.getArrowClampDelta = getArrowClampDelta;
+exports.getArrowSide = getArrowSide;

package/dist/{components/client/Tooltip/util.d.cts → utils/svgFloatingContentUtils.d.cts}

@@ -1,62 +1,17 @@
 
-//#region src/components/client/Tooltip/util.d.ts
-interface ParsedShadow {
-  /** Horizontal offset in px. */
-  x: number;
-  /** Vertical offset in px. */
-  y: number;
-  /** Blur radius in px. */
-  blur: number;
-  /** Spread radius in px (always 0 for drop-shadow filter functions). */
-  spread: number;
-  /** The raw CSS color string (e.g. `rgb(0 0 0 / 0.12)`, `#ff0000`, `red`). */
-  color: string;
-}
-/**
- * Parses a CSS shadow value — which may contain multiple comma-separated
- * layers — into an array of {@link ParsedShadow} objects.
- *
- * @example
- * ```ts
- * parseShadow('0px 4px 8px 0px rgb(0 0 0 / 0.12)')
- * // → [{ x: 0, y: 4, blur: 8, spread: 0, color: 'rgb(0 0 0 / 0.12)' }]
- *
- * parseShadow('0px 4px 8px rgb(0 0 0 / 0.12), 0px 1px 2px rgba(0, 0, 0, 0.08)')
- * // → [
- * //     { x: 0, y: 4, blur: 8, spread: 0, color: 'rgb(0 0 0 / 0.12)' },
- * //     { x: 0, y: 1, blur: 2, spread: 0, color: 'rgba(0, 0, 0, 0.08)' },
- * //   ]
- * ```
- */
-declare function parseShadow(shadowValue: string): ParsedShadow[];
-/** Base width of the arrow triangle (px). */
-declare const ARROW_WIDTH = 12;
-/** Height (protrusion) of the arrow triangle from the edge (px). */
-declare const ARROW_HEIGHT = 8;
-/**
- * Fraction of the container border-radius applied to round the arrow tip
- * (0 = sharp point, 1 = same radius as the container corners).
- */
-declare const ARROW_TIP_RADIUS_FRACTION = 0.5;
-type ArrowSide = 'top' | 'bottom' | 'left' | 'right';
-/**
- * Returns the side of the tooltip where the arrow should appear.
- * The arrow points *toward* the trigger, so it lives on the opposite
- * side of the placement direction.
- */
-declare function getArrowSide(placement: string): ArrowSide;
-interface TooltipPathOptions {
+//#region src/utils/svgFloatingContentUtils.d.ts
+interface SVGFloatingContentPathOptions {
   width: number;
   height: number;
   placement: string;
   borderRadius: number;
-  arrowWidth?: number;
-  arrowHeight?: number;
+  arrowWidth: number;
+  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;
   /**
    * Position of the arrow center along the arrow's edge (px), measured from
    * the start of that edge (left for top/bottom sides, top for left/right).
-   * Typically derived from the Ariakit `TooltipArrow` element's position
-   * within the tooltip.
    *
    * Clamped so the arrow never collides with the border-radius curve
    * Falls back to the midpoint of the edge when omitted.
@@ -67,6 +22,21 @@ interface TooltipPathOptions {
   /** Shift every coordinate in the path by this many pixels on the y-axis. */
   offsetY?: number;
 }
+interface ArrowClampDeltaOptions {
+  width: number;
+  height: number;
+  placement: string;
+  borderRadius: number;
+  arrowCenter: number;
+  arrowWidth: number;
+}
+type ArrowSide = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Returns the side of the element where the arrow should appear.
+ * The arrow points *toward* the trigger, so it lives on the opposite
+ * side of the placement direction.
+ */
+declare function getArrowSide(placement: string): ArrowSide;
 /**
  * Generates an SVG `<path>` string for a rounded rectangle with an arrow
  * pointing toward the trigger element.
@@ -75,25 +45,18 @@ interface TooltipPathOptions {
  * appropriate edge.  The arrow extends *outside* the 0,0 → width,height
  * rectangle so the host `<svg>` must use `overflow: visible`.
  */
-declare function generateTooltipPath({
+declare function generateSvgFloatingContentPath({
   width,
   height,
   placement,
   borderRadius,
   arrowWidth,
   arrowHeight,
+  arrowTipRadiusFraction,
   arrowCenter,
   offsetX: ox,
   offsetY: oy
-}: TooltipPathOptions): string;
-interface ArrowClampDeltaOptions {
-  width: number;
-  height: number;
-  placement: string;
-  borderRadius: number;
-  arrowCenter: number;
-  arrowWidth?: number;
-}
+}: SVGFloatingContentPathOptions): string;
 /**
  * Computes the pixel offset the tooltip must shift so that the SVG arrow
  * (after clamping) visually aligns with the Ariakit arrow's actual position.
@@ -115,4 +78,4 @@ declare function getArrowClampDelta({
   y: number;
 };
 //#endregion
-export { ARROW_HEIGHT, ARROW_TIP_RADIUS_FRACTION, ARROW_WIDTH, type ArrowClampDeltaOptions, type ArrowSide, type ParsedShadow, type TooltipPathOptions, generateTooltipPath, getArrowClampDelta, getArrowSide, parseShadow };
+export { generateSvgFloatingContentPath, getArrowClampDelta, getArrowSide };

package/dist/{components/client/Tooltip/util.d.ts → utils/svgFloatingContentUtils.d.ts}

@@ -1,62 +1,17 @@
 
-//#region src/components/client/Tooltip/util.d.ts
-interface ParsedShadow {
-  /** Horizontal offset in px. */
-  x: number;
-  /** Vertical offset in px. */
-  y: number;
-  /** Blur radius in px. */
-  blur: number;
-  /** Spread radius in px (always 0 for drop-shadow filter functions). */
-  spread: number;
-  /** The raw CSS color string (e.g. `rgb(0 0 0 / 0.12)`, `#ff0000`, `red`). */
-  color: string;
-}
-/**
- * Parses a CSS shadow value — which may contain multiple comma-separated
- * layers — into an array of {@link ParsedShadow} objects.
- *
- * @example
- * ```ts
- * parseShadow('0px 4px 8px 0px rgb(0 0 0 / 0.12)')
- * // → [{ x: 0, y: 4, blur: 8, spread: 0, color: 'rgb(0 0 0 / 0.12)' }]
- *
- * parseShadow('0px 4px 8px rgb(0 0 0 / 0.12), 0px 1px 2px rgba(0, 0, 0, 0.08)')
- * // → [
- * //     { x: 0, y: 4, blur: 8, spread: 0, color: 'rgb(0 0 0 / 0.12)' },
- * //     { x: 0, y: 1, blur: 2, spread: 0, color: 'rgba(0, 0, 0, 0.08)' },
- * //   ]
- * ```
- */
-declare function parseShadow(shadowValue: string): ParsedShadow[];
-/** Base width of the arrow triangle (px). */
-declare const ARROW_WIDTH = 12;
-/** Height (protrusion) of the arrow triangle from the edge (px). */
-declare const ARROW_HEIGHT = 8;
-/**
- * Fraction of the container border-radius applied to round the arrow tip
- * (0 = sharp point, 1 = same radius as the container corners).
- */
-declare const ARROW_TIP_RADIUS_FRACTION = 0.5;
-type ArrowSide = 'top' | 'bottom' | 'left' | 'right';
-/**
- * Returns the side of the tooltip where the arrow should appear.
- * The arrow points *toward* the trigger, so it lives on the opposite
- * side of the placement direction.
- */
-declare function getArrowSide(placement: string): ArrowSide;
-interface TooltipPathOptions {
+//#region src/utils/svgFloatingContentUtils.d.ts
+interface SVGFloatingContentPathOptions {
   width: number;
   height: number;
   placement: string;
   borderRadius: number;
-  arrowWidth?: number;
-  arrowHeight?: number;
+  arrowWidth: number;
+  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;
   /**
    * Position of the arrow center along the arrow's edge (px), measured from
    * the start of that edge (left for top/bottom sides, top for left/right).
-   * Typically derived from the Ariakit `TooltipArrow` element's position
-   * within the tooltip.
    *
    * Clamped so the arrow never collides with the border-radius curve
    * Falls back to the midpoint of the edge when omitted.
@@ -67,6 +22,21 @@ interface TooltipPathOptions {
   /** Shift every coordinate in the path by this many pixels on the y-axis. */
   offsetY?: number;
 }
+interface ArrowClampDeltaOptions {
+  width: number;
+  height: number;
+  placement: string;
+  borderRadius: number;
+  arrowCenter: number;
+  arrowWidth: number;
+}
+type ArrowSide = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Returns the side of the element where the arrow should appear.
+ * The arrow points *toward* the trigger, so it lives on the opposite
+ * side of the placement direction.
+ */
+declare function getArrowSide(placement: string): ArrowSide;
 /**
  * Generates an SVG `<path>` string for a rounded rectangle with an arrow
  * pointing toward the trigger element.
@@ -75,25 +45,18 @@ interface TooltipPathOptions {
  * appropriate edge.  The arrow extends *outside* the 0,0 → width,height
  * rectangle so the host `<svg>` must use `overflow: visible`.
  */
-declare function generateTooltipPath({
+declare function generateSvgFloatingContentPath({
   width,
   height,
   placement,
   borderRadius,
   arrowWidth,
   arrowHeight,
+  arrowTipRadiusFraction,
   arrowCenter,
   offsetX: ox,
   offsetY: oy
-}: TooltipPathOptions): string;
-interface ArrowClampDeltaOptions {
-  width: number;
-  height: number;
-  placement: string;
-  borderRadius: number;
-  arrowCenter: number;
-  arrowWidth?: number;
-}
+}: SVGFloatingContentPathOptions): string;
 /**
  * Computes the pixel offset the tooltip must shift so that the SVG arrow
  * (after clamping) visually aligns with the Ariakit arrow's actual position.
@@ -115,4 +78,4 @@ declare function getArrowClampDelta({
   y: number;
 };
 //#endregion
-export { ARROW_HEIGHT, ARROW_TIP_RADIUS_FRACTION, ARROW_WIDTH, type ArrowClampDeltaOptions, type ArrowSide, type ParsedShadow, type TooltipPathOptions, generateTooltipPath, getArrowClampDelta, getArrowSide, parseShadow };
+export { generateSvgFloatingContentPath, getArrowClampDelta, getArrowSide };

package/dist/utils/svgFloatingContentUtils.js

@@ -0,0 +1,117 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region src/utils/svgFloatingContentUtils.ts
+/**
+* Returns the side of the element where the arrow should appear.
+* The arrow points *toward* the trigger, so it lives on the opposite
+* side of the placement direction.
+*/
+function getArrowSide(placement) {
+	switch (placement.split("-")[0]) {
+		case "bottom": return "top";
+		case "top": return "bottom";
+		case "left": return "right";
+		case "right": return "left";
+		default: return "top";
+	}
+}
+/**
+* Generates an SVG `<path>` string for a rounded rectangle with an arrow
+* pointing toward the trigger element.
+*
+* The path is traced clockwise, inserting the arrow triangle on the
+* appropriate edge.  The arrow extends *outside* the 0,0 → width,height
+* rectangle so the host `<svg>` must use `overflow: visible`.
+*/
+function generateSvgFloatingContentPath({ width, height, placement, borderRadius, arrowWidth, arrowHeight, arrowTipRadiusFraction, arrowCenter, offsetX: ox = 0, offsetY: oy = 0 }) {
+	const aw = arrowWidth / 2;
+	const ah = arrowHeight;
+	const arrowSide = getArrowSide(placement);
+	const arrowEdge = arrowSide === "top" || arrowSide === "bottom" ? width : height;
+	const otherEdge = arrowSide === "top" || arrowSide === "bottom" ? height : width;
+	const maxRadius = Math.min(otherEdge / 2, (arrowEdge - arrowWidth) / 2);
+	const r = Math.max(0, Math.min(borderRadius, maxRadius));
+	const minAc = r + aw;
+	const edgeLength = arrowSide === "top" || arrowSide === "bottom" ? width : height;
+	let ac = arrowCenter ?? edgeLength / 2;
+	ac = Math.max(minAc, Math.min(edgeLength - minAc, ac));
+	const edgeLen = Math.sqrt(aw * aw + ah * ah);
+	const tipR = r > 0 && edgeLen > 0 ? Math.min(r * arrowTipRadiusFraction, edgeLen / 2) : 0;
+	const daw = edgeLen > 0 ? aw / edgeLen : 0;
+	const dah = edgeLen > 0 ? ah / edgeLen : 0;
+	const d = [];
+	d.push(`M ${r + ox} ${oy}`);
+	if (arrowSide === "top") {
+		d.push(`L ${ac - aw + ox} ${oy}`);
+		if (tipR > 0) {
+			d.push(`L ${ac - tipR * daw + ox} ${-ah + tipR * dah + oy}`);
+			d.push(`Q ${ac + ox} ${-ah + oy} ${ac + tipR * daw + ox} ${-ah + tipR * dah + oy}`);
+		} else d.push(`L ${ac + ox} ${-ah + oy}`);
+		d.push(`L ${ac + aw + ox} ${oy}`);
+	}
+	d.push(`L ${width - r + ox} ${oy}`);
+	d.push(`A ${r} ${r} 0 0 1 ${width + ox} ${r + oy}`);
+	if (arrowSide === "right") {
+		d.push(`L ${width + ox} ${ac - aw + oy}`);
+		if (tipR > 0) {
+			d.push(`L ${width + ah - tipR * dah + ox} ${ac - tipR * daw + oy}`);
+			d.push(`Q ${width + ah + ox} ${ac + oy} ${width + ah - tipR * dah + ox} ${ac + tipR * daw + oy}`);
+		} else d.push(`L ${width + ah + ox} ${ac + oy}`);
+		d.push(`L ${width + ox} ${ac + aw + oy}`);
+	}
+	d.push(`L ${width + ox} ${height - r + oy}`);
+	d.push(`A ${r} ${r} 0 0 1 ${width - r + ox} ${height + oy}`);
+	if (arrowSide === "bottom") {
+		d.push(`L ${ac + aw + ox} ${height + oy}`);
+		if (tipR > 0) {
+			d.push(`L ${ac + tipR * daw + ox} ${height + ah - tipR * dah + oy}`);
+			d.push(`Q ${ac + ox} ${height + ah + oy} ${ac - tipR * daw + ox} ${height + ah - tipR * dah + oy}`);
+		} else d.push(`L ${ac + ox} ${height + ah + oy}`);
+		d.push(`L ${ac - aw + ox} ${height + oy}`);
+	}
+	d.push(`L ${r + ox} ${height + oy}`);
+	d.push(`A ${r} ${r} 0 0 1 ${ox} ${height - r + oy}`);
+	if (arrowSide === "left") {
+		d.push(`L ${ox} ${ac + aw + oy}`);
+		if (tipR > 0) {
+			d.push(`L ${-ah + tipR * dah + ox} ${ac + tipR * daw + oy}`);
+			d.push(`Q ${-ah + ox} ${ac + oy} ${-ah + tipR * dah + ox} ${ac - tipR * daw + oy}`);
+		} else d.push(`L ${-ah + ox} ${ac + oy}`);
+		d.push(`L ${ox} ${ac - aw + oy}`);
+	}
+	d.push(`L ${ox} ${r + oy}`);
+	d.push(`A ${r} ${r} 0 0 1 ${r + ox} ${oy}`);
+	d.push("Z");
+	return d.join(" ");
+}
+/**
+* Computes the pixel offset the tooltip must shift so that the SVG arrow
+* (after clamping) visually aligns with the Ariakit arrow's actual position.
+*
+* When the desired `arrowCenter` falls inside the safe zone the delta is 0.
+* When it falls outside (e.g. a tiny trigger near a rounded corner), the
+* returned delta tells the caller how far to translate the tooltip element
+* so the clamped arrow ends up over the trigger center.
+*/
+function getArrowClampDelta({ width, height, placement, borderRadius, arrowCenter, arrowWidth }) {
+	const aw = arrowWidth / 2;
+	const side = getArrowSide(placement);
+	const arrowEdge = side === "top" || side === "bottom" ? width : height;
+	const otherEdge = side === "top" || side === "bottom" ? height : width;
+	const maxRadius = Math.min(otherEdge / 2, (arrowEdge - arrowWidth) / 2);
+	const minAc = Math.max(0, Math.min(borderRadius, maxRadius)) + aw;
+	const maxAc = arrowEdge - minAc;
+	let delta = 0;
+	if (arrowCenter < minAc) delta = arrowCenter - minAc;
+	else if (arrowCenter > maxAc) delta = arrowCenter - maxAc;
+	if (side === "top" || side === "bottom") return {
+		x: delta,
+		y: 0
+	};
+	return {
+		x: 0,
+		y: delta
+	};
+}
+
+//#endregion
+export { generateSvgFloatingContentPath, getArrowClampDelta, getArrowSide };