@yahoo/uds 3.100.0-beta.2 → 3.100.0-beta.4

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

@@ -6,7 +6,35 @@ import { jsx } from "react/jsx-runtime";
 import { TooltipProvider } from "@ariakit/react";
 
 //#region src/components/client/Tooltip/Tooltip.tsx
-function Tooltip({ children, placement = "top", open, portal = true }) {
+/**
+* **⚙️️ A Tooltip component that anchors to a trigger element
+*
+* @componentType Client component
+*
+* @description
+* Tooltips provide short, contextual help for UI elements. They appear on hover, focus, or long-press, and should clarify meaning—not introduce new concepts.
+*
+* Tooltips are not meant for critical information or required actions. If the user must take action, use a Dialog, Popover, or Inline messaging instead.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/tooltip Tooltip Docs} for more info
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@yahoo/uds";
+*
+* <Tooltip>
+*   <TooltipTrigger>
+*     <Button>Tooltip Trigger</Button>
+*   </TooltipTrigger>
+*   <TooltipContent>basic tooltip content</TooltipContent>
+* </Tooltip>
+*```
+*
+* @related [Toast](https://uds.build/docs/components/toast), Popover (coming soon).
+**/
+function Tooltip({ children, placement, open, portal = true }) {
 	const hideOnHoverOutside = open === void 0;
 	const controlledProps = open !== void 0 ? {
 		showTimeout: 0,

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

@@ -23,17 +23,17 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 	const currentPlacement = (0, _ariakit_react.useStoreState)(store, "currentPlacement");
 	const placement = (0, _ariakit_react.useStoreState)(store, "placement");
 	const effectivePlacement = currentPlacement ?? placement ?? "top";
-	const { backdropBlur, borderRadius } = require_components_client_Tooltip_UDSTooltipConfigProvider.useTooltipConfig();
+	const { borderRadius, animationDuration } = require_components_client_Tooltip_UDSTooltipConfigProvider.useTooltipConfig();
 	const defaultBorderRadius = borderRadius["default"];
 	const arrowRef = (0, react.useRef)(null);
-	const { internalRef, shadowFilterId, maxWidthClass, dimensions, shadows, shadowPadding, svgPath, blurStyle, childTransitionStyle, colorScheme, tooltipShift, onPositionUpdate } = require_components_client_Tooltip_useTooltipContent.useTooltipContent({
+	const { internalRef, shadowFilterId, maxWidthClass, dimensions, shadows, shadowPadding, svgPath, blurStyle, childTransitionStyle, tooltipShift, onPositionUpdate } = require_components_client_Tooltip_useTooltipContent.useTooltipContent({
 		open: open ?? false,
 		effectivePlacement,
 		maxWidth,
 		borderRadius: defaultBorderRadius,
-		arrowRef
+		arrowRef,
+		animationDuration
 	});
-	const defaultBackdropBlur = backdropBlur["default"][colorScheme];
 	const mergedRef = require_hooks_useForkRef.useForkRef(ref, internalRef);
 	const classNames = {
 		root: require_styles_styler.getStyles({
@@ -51,10 +51,11 @@ 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-200", "ease-in-out")
+			className: require_styles_styler.cx("uds-bgBlurFallback", "top-0", "left-0", "z-[1]", "transition-opacity", `duration-[${animationDuration}ms]`, "ease-in-out")
 		}),
 		title: require_styles_styler.getStyles({ tooltipSizeTitle: "default" }),
 		body: require_styles_styler.getStyles({ tooltipSizeBody: "default" }),
+		endContent: require_styles_styler.getStyles({ tooltipSizeEndContent: "default" }),
 		icon: require_styles_styler.getStyles({
 			tooltipSizeIcon: "default",
 			tooltipVariantIcon: "default"
@@ -69,7 +70,7 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 		updatePosition: onPositionUpdate,
 		style: tooltipShift.x !== 0 || tooltipShift.y !== 0 ? { transform: `translate(${tooltipShift.x}px, ${tooltipShift.y}px)` } : void 0,
 		children: [
-			defaultBackdropBlur > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 				className: classNames.blur,
 				style: {
 					...blurStyle,
@@ -90,35 +91,46 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 						width: dimensions.width + 2 * (shadowPadding + require_components_client_Tooltip_util.ARROW_HEIGHT),
 						height: dimensions.height + 2 * (shadowPadding + require_components_client_Tooltip_util.ARROW_HEIGHT),
 						colorInterpolationFilters: "sRGB",
-						children: [shadows.map((shadow, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
-							shadow.spread !== 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMorphology", {
-								in: "SourceAlpha",
-								operator: shadow.spread > 0 ? "dilate" : "erode",
-								radius: Math.abs(shadow.spread),
-								result: `spread${i}`
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feGaussianBlur", {
-								in: shadow.spread !== 0 ? `spread${i}` : "SourceAlpha",
-								stdDeviation: shadow.blur / 2,
-								result: `blurred${i}`
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feOffset", {
-								in: `blurred${i}`,
-								dx: shadow.x,
-								dy: shadow.y,
-								result: `offset${i}`
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feFlood", {
-								floodColor: shadow.color,
-								result: `color${i}`
+						children: [
+							shadows.map((shadow, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
+								shadow.spread !== 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMorphology", {
+									in: "SourceAlpha",
+									operator: shadow.spread > 0 ? "dilate" : "erode",
+									radius: Math.abs(shadow.spread),
+									result: `spread${i}`
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feGaussianBlur", {
+									in: shadow.spread !== 0 ? `spread${i}` : "SourceAlpha",
+									stdDeviation: shadow.blur / 2,
+									result: `blurred${i}`
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feOffset", {
+									in: `blurred${i}`,
+									dx: shadow.x,
+									dy: shadow.y,
+									result: `offset${i}`
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feFlood", {
+									floodColor: shadow.color,
+									result: `color${i}`
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feComposite", {
+									in: `color${i}`,
+									in2: `offset${i}`,
+									operator: "in",
+									result: `shadow${i}`
+								})
+							] }, i)),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMerge", {
+								result: "mergedShadows",
+								children: shadows.map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMergeNode", { in: `shadow${i}` }, i))
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feComposite", {
-								in: `color${i}`,
-								in2: `offset${i}`,
-								operator: "in",
-								result: `shadow${i}`
+								in: "mergedShadows",
+								in2: "SourceAlpha",
+								operator: "out"
 							})
-						] }, i)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMerge", { children: shadows.map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMergeNode", { in: `shadow${i}` }, i)) })]
+						]
 					}) }),
 					shadows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 						d: svgPath,
@@ -134,8 +146,7 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
 				position: "relative",
 				flexDirection: "column",
-				rowGap: "1",
-				className: "z-[3]",
+				className: "z-[3] gap-[inherit]",
 				style: childTransitionStyle,
 				id,
 				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
@@ -147,6 +158,7 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 						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, {
@@ -154,9 +166,11 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 					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, {
-						variant: "caption1",
+						className: classNames.endContent,
+						color: "inherit",
 						children: endContent
 					}) : endContent]
 				})]

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

@@ -21,17 +21,17 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 	const currentPlacement = useStoreState(store, "currentPlacement");
 	const placement = useStoreState(store, "placement");
 	const effectivePlacement = currentPlacement ?? placement ?? "top";
-	const { backdropBlur, borderRadius } = useTooltipConfig();
+	const { borderRadius, animationDuration } = useTooltipConfig();
 	const defaultBorderRadius = borderRadius["default"];
 	const arrowRef = useRef(null);
-	const { internalRef, shadowFilterId, maxWidthClass, dimensions, shadows, shadowPadding, svgPath, blurStyle, childTransitionStyle, colorScheme, tooltipShift, onPositionUpdate } = useTooltipContent({
+	const { internalRef, shadowFilterId, maxWidthClass, dimensions, shadows, shadowPadding, svgPath, blurStyle, childTransitionStyle, tooltipShift, onPositionUpdate } = useTooltipContent({
 		open: open ?? false,
 		effectivePlacement,
 		maxWidth,
 		borderRadius: defaultBorderRadius,
-		arrowRef
+		arrowRef,
+		animationDuration
 	});
-	const defaultBackdropBlur = backdropBlur["default"][colorScheme];
 	const mergedRef = useForkRef(ref, internalRef);
 	const classNames = {
 		root: getStyles({
@@ -49,10 +49,11 @@ 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-200", "ease-in-out")
+			className: cx("uds-bgBlurFallback", "top-0", "left-0", "z-[1]", "transition-opacity", `duration-[${animationDuration}ms]`, "ease-in-out")
 		}),
 		title: getStyles({ tooltipSizeTitle: "default" }),
 		body: getStyles({ tooltipSizeBody: "default" }),
+		endContent: getStyles({ tooltipSizeEndContent: "default" }),
 		icon: getStyles({
 			tooltipSizeIcon: "default",
 			tooltipVariantIcon: "default"
@@ -67,7 +68,7 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 		updatePosition: onPositionUpdate,
 		style: tooltipShift.x !== 0 || tooltipShift.y !== 0 ? { transform: `translate(${tooltipShift.x}px, ${tooltipShift.y}px)` } : void 0,
 		children: [
-			defaultBackdropBlur > 0 && /* @__PURE__ */ jsx(Box, {
+			/* @__PURE__ */ jsx(Box, {
 				className: classNames.blur,
 				style: {
 					...blurStyle,
@@ -88,35 +89,46 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 						width: dimensions.width + 2 * (shadowPadding + ARROW_HEIGHT),
 						height: dimensions.height + 2 * (shadowPadding + ARROW_HEIGHT),
 						colorInterpolationFilters: "sRGB",
-						children: [shadows.map((shadow, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
-							shadow.spread !== 0 && /* @__PURE__ */ jsx("feMorphology", {
-								in: "SourceAlpha",
-								operator: shadow.spread > 0 ? "dilate" : "erode",
-								radius: Math.abs(shadow.spread),
-								result: `spread${i}`
-							}),
-							/* @__PURE__ */ jsx("feGaussianBlur", {
-								in: shadow.spread !== 0 ? `spread${i}` : "SourceAlpha",
-								stdDeviation: shadow.blur / 2,
-								result: `blurred${i}`
-							}),
-							/* @__PURE__ */ jsx("feOffset", {
-								in: `blurred${i}`,
-								dx: shadow.x,
-								dy: shadow.y,
-								result: `offset${i}`
-							}),
-							/* @__PURE__ */ jsx("feFlood", {
-								floodColor: shadow.color,
-								result: `color${i}`
+						children: [
+							shadows.map((shadow, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
+								shadow.spread !== 0 && /* @__PURE__ */ jsx("feMorphology", {
+									in: "SourceAlpha",
+									operator: shadow.spread > 0 ? "dilate" : "erode",
+									radius: Math.abs(shadow.spread),
+									result: `spread${i}`
+								}),
+								/* @__PURE__ */ jsx("feGaussianBlur", {
+									in: shadow.spread !== 0 ? `spread${i}` : "SourceAlpha",
+									stdDeviation: shadow.blur / 2,
+									result: `blurred${i}`
+								}),
+								/* @__PURE__ */ jsx("feOffset", {
+									in: `blurred${i}`,
+									dx: shadow.x,
+									dy: shadow.y,
+									result: `offset${i}`
+								}),
+								/* @__PURE__ */ jsx("feFlood", {
+									floodColor: shadow.color,
+									result: `color${i}`
+								}),
+								/* @__PURE__ */ jsx("feComposite", {
+									in: `color${i}`,
+									in2: `offset${i}`,
+									operator: "in",
+									result: `shadow${i}`
+								})
+							] }, i)),
+							/* @__PURE__ */ jsx("feMerge", {
+								result: "mergedShadows",
+								children: shadows.map((_, i) => /* @__PURE__ */ jsx("feMergeNode", { in: `shadow${i}` }, i))
 							}),
 							/* @__PURE__ */ jsx("feComposite", {
-								in: `color${i}`,
-								in2: `offset${i}`,
-								operator: "in",
-								result: `shadow${i}`
+								in: "mergedShadows",
+								in2: "SourceAlpha",
+								operator: "out"
 							})
-						] }, i)), /* @__PURE__ */ jsx("feMerge", { children: shadows.map((_, i) => /* @__PURE__ */ jsx("feMergeNode", { in: `shadow${i}` }, i)) })]
+						]
 					}) }),
 					shadows.length > 0 && /* @__PURE__ */ jsx("path", {
 						d: svgPath,
@@ -132,8 +144,7 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 			/* @__PURE__ */ jsxs(Box, {
 				position: "relative",
 				flexDirection: "column",
-				rowGap: "1",
-				className: "z-[3]",
+				className: "z-[3] gap-[inherit]",
 				style: childTransitionStyle,
 				id,
 				children: [title && /* @__PURE__ */ jsxs(Box, {
@@ -145,6 +156,7 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 						className: classNames.icon
 					}), /* @__PURE__ */ jsx(Text, {
 						className: classNames.title,
+						color: "inherit",
 						children: title
 					})]
 				}), /* @__PURE__ */ jsxs(Box, {
@@ -152,9 +164,11 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 					columnGap: "1.5",
 					children: [/* @__PURE__ */ jsx(Text, {
 						className: classNames.body,
+						color: "inherit",
 						children
 					}), endContent && !isValidElement(endContent) ? /* @__PURE__ */ jsx(Text, {
-						variant: "caption1",
+						className: classNames.endContent,
+						color: "inherit",
 						children: endContent
 					}) : endContent]
 				})]

package/dist/components/client/Tooltip/TooltipTrigger.d.cts

@@ -3,9 +3,10 @@ import { UniversalTooltipTriggerProps } from "../../../types/dist/index.cjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/client/Tooltip/TooltipTrigger.d.ts
+type TooltipTriggerProps = UniversalTooltipTriggerProps;
 declare function TooltipTrigger({
   children
-}: UniversalTooltipTriggerProps): react_jsx_runtime0.JSX.Element;
+}: TooltipTriggerProps): react_jsx_runtime0.JSX.Element;
 declare namespace TooltipTrigger {
   var displayName: string;
 }

package/dist/components/client/Tooltip/TooltipTrigger.d.ts

@@ -3,9 +3,10 @@ import { UniversalTooltipTriggerProps } from "../../../types/dist/index.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/client/Tooltip/TooltipTrigger.d.ts
+type TooltipTriggerProps = UniversalTooltipTriggerProps;
 declare function TooltipTrigger({
   children
-}: UniversalTooltipTriggerProps): react_jsx_runtime0.JSX.Element;
+}: TooltipTriggerProps): react_jsx_runtime0.JSX.Element;
 declare namespace TooltipTrigger {
   var displayName: string;
 }

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

@@ -28,12 +28,11 @@ UDSTooltipConfigProvider.displayName = "UDSTooltipConfigProvider";
 function useTooltipConfig(options) {
 	const context = (0, react.useContext)(TooltipContext);
 	if (!context) throw new Error("useTooltipConfig must be used within a UDSConfigProvider or UDSTooltipConfigProvider");
-	const { placementMap, ...contextRest } = context;
-	if (options) return {
+	const { placementMap, placement, ...contextRest } = context;
+	return {
 		...contextRest,
-		ariaKitPlacement: placementMap[options.placement]
+		ariaKitPlacement: placementMap[options?.placement ?? placement]
 	};
-	return contextRest;
 }
 
 //#endregion

package/dist/components/client/Tooltip/UDSTooltipConfigProvider.d.cts

@@ -19,10 +19,9 @@ declare const UDSTooltipConfigProvider: {
   }: UDSTooltipConfigProviderProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
-declare function useTooltipConfig(): Omit<UDSTooltipConfigContextType, 'placementMap'>;
-declare function useTooltipConfig(options: {
-  placement: TooltipPlacement;
-}): Omit<UDSTooltipConfigContextType, 'placementMap'> & {
+declare function useTooltipConfig(options?: {
+  placement?: TooltipPlacement;
+}): Omit<UDSTooltipConfigContextType, 'placementMap' | 'placement'> & {
   ariaKitPlacement: TooltipProviderProps['placement'];
 };
 //#endregion

package/dist/components/client/Tooltip/UDSTooltipConfigProvider.d.ts

@@ -19,10 +19,9 @@ declare const UDSTooltipConfigProvider: {
   }: UDSTooltipConfigProviderProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
-declare function useTooltipConfig(): Omit<UDSTooltipConfigContextType, 'placementMap'>;
-declare function useTooltipConfig(options: {
-  placement: TooltipPlacement;
-}): Omit<UDSTooltipConfigContextType, 'placementMap'> & {
+declare function useTooltipConfig(options?: {
+  placement?: TooltipPlacement;
+}): Omit<UDSTooltipConfigContextType, 'placementMap' | 'placement'> & {
   ariaKitPlacement: TooltipProviderProps['placement'];
 };
 //#endregion

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

@@ -26,12 +26,11 @@ UDSTooltipConfigProvider.displayName = "UDSTooltipConfigProvider";
 function useTooltipConfig(options) {
 	const context = useContext(TooltipContext);
 	if (!context) throw new Error("useTooltipConfig must be used within a UDSConfigProvider or UDSTooltipConfigProvider");
-	const { placementMap, ...contextRest } = context;
-	if (options) return {
+	const { placementMap, placement, ...contextRest } = context;
+	return {
 		...contextRest,
-		ariaKitPlacement: placementMap[options.placement]
+		ariaKitPlacement: placementMap[options?.placement ?? placement]
 	};
-	return contextRest;
 }
 
 //#endregion

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

@@ -7,7 +7,7 @@ const require_components_client_Tooltip_util = require('./util.cjs');
 let react = require("react");
 
 //#region src/components/client/Tooltip/useTooltipContent.ts
-function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, arrowRef }) {
+function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, arrowRef, animationDuration }) {
 	const internalRef = (0, react.useRef)(null);
 	const shadowFilterId = (0, react.useId)();
 	const [dimensions, setDimensions] = (0, react.useState)({
@@ -48,13 +48,6 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
 			return Math.max(max, extentX, extentY);
 		}, 0);
 	}, [shadows]);
-	const [colorScheme, setColorScheme] = (0, react.useState)("light");
-	const readColorScheme = (0, react.useCallback)(() => {
-		const el = internalRef.current;
-		if (!el) return;
-		const scheme = getComputedStyle(el).colorScheme;
-		setColorScheme(scheme === "dark" ? "dark" : "light");
-	}, []);
 	const [arrowCenter, setArrowCenter] = (0, react.useState)(void 0);
 	const computeArrowCenter = (0, react.useCallback)(() => {
 		const arrowEl = arrowRef.current;
@@ -79,15 +72,10 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
 				};
 			});
 			readShadows();
-			readColorScheme();
 		}
 		const next = computeArrowCenter();
 		if (next !== void 0) setArrowCenter((prev) => prev === next ? prev : next);
-	}, [
-		computeArrowCenter,
-		readShadows,
-		readColorScheme
-	]);
+	}, [computeArrowCenter, readShadows]);
 	const svgPath = (0, react.useMemo)(() => {
 		return dimensions.width > 0 && dimensions.height > 0 ? require_components_client_Tooltip_util.generateTooltipPath({
 			width: dimensions.width,
@@ -169,9 +157,8 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
 		visible,
 		childTransitionStyle: {
 			opacity: visible ? 1 : 0,
-			transition: "opacity 200ms ease-in-out"
+			transition: `opacity ${animationDuration}ms ease-in-out`
 		},
-		colorScheme,
 		tooltipShift: (0, react.useMemo)(() => {
 			if (arrowCenter === void 0 || dimensions.width <= 0 || dimensions.height <= 0) return {
 				x: 0,

package/dist/components/client/Tooltip/useTooltipContent.d.cts

@@ -18,6 +18,8 @@ interface UseTooltipContentOptions {
    * SVG arrow always mirrors where floating-ui places the native arrow.
    */
   arrowRef: RefObject<HTMLDivElement | null>;
+  /** Animation duration from the tooltip config (ms). */
+  animationDuration: number;
 }
 interface UseTooltipContentReturn {
   internalRef: RefObject<HTMLElement | null>;
@@ -34,8 +36,6 @@ interface UseTooltipContentReturn {
   blurStyle: CSSProperties;
   visible: boolean;
   childTransitionStyle: CSSProperties;
-  /** Resolved CSS `color-scheme` of the tooltip element: `'light'` or `'dark'`. */
-  colorScheme: 'light' | 'dark';
   /**
    * Pixel offset to apply as a CSS transform on the tooltip element so that
    * the (clamped) SVG arrow aligns with the trigger center even when the
@@ -59,7 +59,8 @@ declare function useTooltipContent({
   effectivePlacement,
   maxWidth,
   borderRadius,
-  arrowRef
+  arrowRef,
+  animationDuration
 }: UseTooltipContentOptions): UseTooltipContentReturn;
 //#endregion
 export { type UseTooltipContentOptions, type UseTooltipContentReturn, useTooltipContent };

package/dist/components/client/Tooltip/useTooltipContent.d.ts

@@ -18,6 +18,8 @@ interface UseTooltipContentOptions {
    * SVG arrow always mirrors where floating-ui places the native arrow.
    */
   arrowRef: RefObject<HTMLDivElement | null>;
+  /** Animation duration from the tooltip config (ms). */
+  animationDuration: number;
 }
 interface UseTooltipContentReturn {
   internalRef: RefObject<HTMLElement | null>;
@@ -34,8 +36,6 @@ interface UseTooltipContentReturn {
   blurStyle: CSSProperties;
   visible: boolean;
   childTransitionStyle: CSSProperties;
-  /** Resolved CSS `color-scheme` of the tooltip element: `'light'` or `'dark'`. */
-  colorScheme: 'light' | 'dark';
   /**
    * Pixel offset to apply as a CSS transform on the tooltip element so that
    * the (clamped) SVG arrow aligns with the trigger center even when the
@@ -59,7 +59,8 @@ declare function useTooltipContent({
   effectivePlacement,
   maxWidth,
   borderRadius,
-  arrowRef
+  arrowRef,
+  animationDuration
 }: UseTooltipContentOptions): UseTooltipContentReturn;
 //#endregion
 export { type UseTooltipContentOptions, type UseTooltipContentReturn, useTooltipContent };

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

@@ -5,7 +5,7 @@ import { ARROW_HEIGHT, generateTooltipPath, getArrowClampDelta, getArrowSide, pa
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 
 //#region src/components/client/Tooltip/useTooltipContent.ts
-function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, arrowRef }) {
+function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, arrowRef, animationDuration }) {
 	const internalRef = useRef(null);
 	const shadowFilterId = useId();
 	const [dimensions, setDimensions] = useState({
@@ -46,13 +46,6 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
 			return Math.max(max, extentX, extentY);
 		}, 0);
 	}, [shadows]);
-	const [colorScheme, setColorScheme] = useState("light");
-	const readColorScheme = useCallback(() => {
-		const el = internalRef.current;
-		if (!el) return;
-		const scheme = getComputedStyle(el).colorScheme;
-		setColorScheme(scheme === "dark" ? "dark" : "light");
-	}, []);
 	const [arrowCenter, setArrowCenter] = useState(void 0);
 	const computeArrowCenter = useCallback(() => {
 		const arrowEl = arrowRef.current;
@@ -77,15 +70,10 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
 				};
 			});
 			readShadows();
-			readColorScheme();
 		}
 		const next = computeArrowCenter();
 		if (next !== void 0) setArrowCenter((prev) => prev === next ? prev : next);
-	}, [
-		computeArrowCenter,
-		readShadows,
-		readColorScheme
-	]);
+	}, [computeArrowCenter, readShadows]);
 	const svgPath = useMemo(() => {
 		return dimensions.width > 0 && dimensions.height > 0 ? generateTooltipPath({
 			width: dimensions.width,
@@ -167,9 +155,8 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
 		visible,
 		childTransitionStyle: {
 			opacity: visible ? 1 : 0,
-			transition: "opacity 200ms ease-in-out"
+			transition: `opacity ${animationDuration}ms ease-in-out`
 		},
-		colorScheme,
 		tooltipShift: useMemo(() => {
 			if (arrowCenter === void 0 || dimensions.width <= 0 || dimensions.height <= 0) return {
 				x: 0,

package/dist/config/dist/index.cjs

@@ -49,6 +49,11 @@ const yosConfig = {
 				valueType: "alias",
 				value: "ui3/emphasized"
 			} } },
+			"size/default/endContent": { textVariant: { rest: {
+				type: "textVariants",
+				valueType: "alias",
+				value: "caption1"
+			} } },
 			"size/default/icon": { size: { rest: {
 				type: "iconSizes",
 				valueType: "alias",

package/dist/config/dist/index.d.cts

@@ -77,6 +77,15 @@ declare const yosConfig: {
           };
         };
       };
+      readonly 'size/default/endContent': {
+        readonly textVariant: {
+          readonly rest: {
+            readonly type: "textVariants";
+            readonly valueType: "alias";
+            readonly value: "caption1";
+          };
+        };
+      };
       readonly 'size/default/icon': {
         readonly size: {
           readonly rest: {

package/dist/config/dist/index.d.ts

@@ -77,6 +77,15 @@ declare const yosConfig: {
           };
         };
       };
+      readonly 'size/default/endContent': {
+        readonly textVariant: {
+          readonly rest: {
+            readonly type: "textVariants";
+            readonly valueType: "alias";
+            readonly value: "caption1";
+          };
+        };
+      };
       readonly 'size/default/icon': {
         readonly size: {
           readonly rest: {

package/dist/config/dist/index.js

@@ -48,6 +48,11 @@ const yosConfig = {
 				valueType: "alias",
 				value: "ui3/emphasized"
 			} } },
+			"size/default/endContent": { textVariant: { rest: {
+				type: "textVariants",
+				valueType: "alias",
+				value: "caption1"
+			} } },
 			"size/default/icon": { size: { rest: {
 				type: "iconSizes",
 				valueType: "alias",