@yahoo/uds 3.169.1 → 3.171.0

package/dist/components/client/Modal/Modal.js

@@ -18,11 +18,11 @@ import { ModalTitle } from "./ModalTitle.js";
 import { separateChildren } from "./utils.js";
 import { Cross } from "@yahoo/uds-icons";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Dialog, DialogDismiss } from "@ariakit/react";
 //#region src/components/client/Modal/Modal.tsx
 exposeAriakitScrollbarWidth();
-const Modal = ({ children, open, onClose, onOpen, portal = true, modal = true, includeScrim, closeAriaLabel = "Close", slotProps, hideDismissButton = false, reduceMotion: forceReduceMotion = false, closeIcon = Cross, maxWidth = "auto", maxHeight: maxHeightProp = "auto", fullWidth = false, fullHeight = false, title: titleProp, description: descriptionProp, content: contentProp, actions: actionsProp, scrollBehavior = "outside", className, style }) => {
+const Modal = ({ children, open, unmountOnHide = false, onClose, onOpen, portal = true, modal = true, includeScrim, closeAriaLabel = "Close", slotProps, hideDismissButton = false, reduceMotion: forceReduceMotion = false, closeIcon = Cross, maxWidth = "auto", maxHeight: maxHeightProp = "auto", fullWidth = false, fullHeight = false, title: titleProp, description: descriptionProp, content: contentProp, actions: actionsProp, scrollBehavior = "outside", className, style }) => {
 	const prevOpen = useRef(open);
 	const positionerRef = useRef(null);
 	const { size, variant, animationDuration, animationEasing, gutter } = useModalConfig();
@@ -52,6 +52,7 @@ const Modal = ({ children, open, onClose, onOpen, portal = true, modal = true, i
 		reducedMotion,
 		durationOut
 	]);
+	const shouldRenderContent = !unmountOnHide || open || shouldLockScroll;
 	useLayoutEffect(() => {
 		if (!open) return;
 		const positioner = positionerRef.current;
@@ -149,20 +150,19 @@ const Modal = ({ children, open, onClose, onOpen, portal = true, modal = true, i
 				}
 			})
 		}),
-		children: /* @__PURE__ */ jsxs(ModalContext.Provider, {
+		children: /* @__PURE__ */ jsx(ModalContext.Provider, {
 			value: {
 				scrollBehavior,
 				shouldRenderHeader,
 				hasContent
 			},
-			children: [
+			children: shouldRenderContent && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				shouldRenderHeader && /* @__PURE__ */ jsxs(HStack, {
 					...slotProps?.header,
 					className: cx(classNames.header, slotProps?.header?.className),
 					children: [!hideDismissButton && /* @__PURE__ */ jsx(DialogDismiss, {
 						render: /* @__PURE__ */ jsx(Pressable, {
 							"aria-label": closeAriaLabel,
-							onClick: (e) => onClose?.(e.nativeEvent),
 							...slotProps?.closeIconContainer,
 							className: cx(classNames.closeIconContainer, slotProps?.closeIconContainer?.className)
 						}),
@@ -182,7 +182,7 @@ const Modal = ({ children, open, onClose, onOpen, portal = true, modal = true, i
 				}),
 				modalContent || (contentProp ? /* @__PURE__ */ jsx(ModalContent, { children: contentProp }) : /* @__PURE__ */ jsx(Box, { flexGrow: "1" })),
 				modalActions || (actionsProp ? /* @__PURE__ */ jsx(ModalActions, { children: actionsProp }) : null)
-			]
+			] })
 		})
 	});
 };

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

@@ -37,7 +37,7 @@ const POPOVER_OPEN_EVENT = "uds:popover-open";
 *
 * @related [Toast](https://uds.build/docs/components/toast), [Tooltip](https://uds.build/docs/components/tooltip)
 **/
-function Popover({ children, placement, open, defaultOpen = false, portal = true, hideArrow = false, hideDismissButton = false, onClose, onOpen, reduceMotion: forceReduceMotion = false, disableAutoFocus = false, disableVerticalSpacing = false, disableHorizontalSpacing = false, sameWidth = false, gutter = 4 }) {
+function Popover({ children, placement, open, defaultOpen = false, portal = true, hideArrow = false, hideDismissButton = false, onClose, onOpen, reduceMotion: forceReduceMotion = false, disableAutoFocus = false, disableVerticalSpacing = false, disableHorizontalSpacing = false, sameWidth = false, gutter = 4, unmountOnHide = false }) {
 	const controlledProps = open !== void 0 ? {
 		showTimeout: 0,
 		hideTimeout: 0,
@@ -76,7 +76,8 @@ function Popover({ children, placement, open, defaultOpen = false, portal = true
 			disableVerticalSpacing,
 			disableHorizontalSpacing,
 			sameWidth,
-			gutter
+			gutter,
+			unmountOnHide
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.PopoverProvider, {
 			placement: ariaKitPlacement,

package/dist/components/client/Popover/Popover.d.cts

@@ -46,7 +46,8 @@ declare function Popover({
   disableVerticalSpacing,
   disableHorizontalSpacing,
   sameWidth,
-  gutter
+  gutter,
+  unmountOnHide
 }: PopoverProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace Popover {
   var displayName: string;

package/dist/components/client/Popover/Popover.d.ts

@@ -47,7 +47,8 @@ declare function Popover({
   disableVerticalSpacing,
   disableHorizontalSpacing,
   sameWidth,
-  gutter
+  gutter,
+  unmountOnHide
 }: PopoverProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace Popover {
   var displayName: string;

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

@@ -35,7 +35,7 @@ const POPOVER_OPEN_EVENT = "uds:popover-open";
 *
 * @related [Toast](https://uds.build/docs/components/toast), [Tooltip](https://uds.build/docs/components/tooltip)
 **/
-function Popover({ children, placement, open, defaultOpen = false, portal = true, hideArrow = false, hideDismissButton = false, onClose, onOpen, reduceMotion: forceReduceMotion = false, disableAutoFocus = false, disableVerticalSpacing = false, disableHorizontalSpacing = false, sameWidth = false, gutter = 4 }) {
+function Popover({ children, placement, open, defaultOpen = false, portal = true, hideArrow = false, hideDismissButton = false, onClose, onOpen, reduceMotion: forceReduceMotion = false, disableAutoFocus = false, disableVerticalSpacing = false, disableHorizontalSpacing = false, sameWidth = false, gutter = 4, unmountOnHide = false }) {
 	const controlledProps = open !== void 0 ? {
 		showTimeout: 0,
 		hideTimeout: 0,
@@ -74,7 +74,8 @@ function Popover({ children, placement, open, defaultOpen = false, portal = true
 			disableVerticalSpacing,
 			disableHorizontalSpacing,
 			sameWidth,
-			gutter
+			gutter,
+			unmountOnHide
 		},
 		children: /* @__PURE__ */ jsx(PopoverProvider, {
 			placement: ariaKitPlacement,

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

@@ -2,9 +2,9 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../../_virtual/_rolldown/runtime.cjs");
-const require_index = require("../../../fixtures/dist/index.cjs");
 const require_styles_styler = require("../../../styles/styler.cjs");
 const require_components_client_Pressable = require("../Pressable.cjs");
+const require_index = require("../../../fixtures/dist/index.cjs");
 const require_components_IconSlot = require("../../IconSlot.cjs");
 const require_components_Box = require("../../Box.cjs");
 const require_components_client_Popover_PopoverContext = require("./PopoverContext.cjs");
@@ -103,6 +103,7 @@ const PopoverContent = (0, react.forwardRef)(function PopoverContent({ children,
 		},
 		ref: mergedRef,
 		className: classNames.root,
+		unmountOnHide: internalContext?.unmountOnHide,
 		...slotProps?.root,
 		portal: internalContext ? internalContext.portal : true,
 		gutter: internalContext?.hideArrow ? gutter : ARROW_HEIGHT + gutter,

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

@@ -1,8 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
-import { spacingMap } from "../../../fixtures/dist/index.js";
 import { cx, getStyles } from "../../../styles/styler.js";
 import { Pressable } from "../Pressable.js";
+import { spacingMap } from "../../../fixtures/dist/index.js";
 import { IconSlot } from "../../IconSlot.js";
 import { Box } from "../../Box.js";
 import { PopoverInternalContext } from "./PopoverContext.js";
@@ -101,6 +101,7 @@ const PopoverContent = forwardRef(function PopoverContent({ children, className,
 		},
 		ref: mergedRef,
 		className: classNames.root,
+		unmountOnHide: internalContext?.unmountOnHide,
 		...slotProps?.root,
 		portal: internalContext ? internalContext.portal : true,
 		gutter: internalContext?.hideArrow ? gutter : ARROW_HEIGHT + gutter,

package/dist/components/client/Popover/PopoverContext.d.cts

@@ -15,6 +15,7 @@ interface PopoverInternalContextType {
   disableHorizontalSpacing: boolean;
   sameWidth: boolean;
   gutter: number;
+  unmountOnHide: boolean;
 }
 declare const PopoverInternalContext: _$react.Context<PopoverInternalContextType | null>;
 //#endregion

package/dist/components/client/Popover/PopoverContext.d.ts

@@ -16,6 +16,7 @@ interface PopoverInternalContextType {
   disableHorizontalSpacing: boolean;
   sameWidth: boolean;
   gutter: number;
+  unmountOnHide: boolean;
 }
 declare const PopoverInternalContext: _$react.Context<PopoverInternalContextType | null>;
 //#endregion

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

@@ -8,14 +8,21 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _ariakit_react = require("@ariakit/react");
 //#region src/components/client/Popover/PopoverTrigger.tsx
 function PopoverTrigger({ children }) {
-	const toggleOnClick = !(0, react.useContext)(require_components_client_Popover_PopoverContext.PopoverInternalContext)?.isControlled;
+	const internalContext = (0, react.useContext)(require_components_client_Popover_PopoverContext.PopoverInternalContext);
+	const open = (0, _ariakit_react.useStoreState)((0, _ariakit_react.usePopoverContext)(), "open");
+	const toggleOnClick = !internalContext?.isControlled;
+	const handleClick = (event) => {
+		if (internalContext?.isControlled && open) internalContext.onClose?.(event.nativeEvent);
+	};
 	if ((0, react.isValidElement)(children) && children.type !== react.Fragment) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.PopoverDisclosure, {
 		render: children,
-		toggleOnClick
+		toggleOnClick,
+		onClick: handleClick
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.PopoverDisclosure, {
 		className: "inline",
 		toggleOnClick,
+		onClick: handleClick,
 		children
 	});
 }

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

@@ -3,17 +3,24 @@
 import { PopoverInternalContext } from "./PopoverContext.js";
 import { Fragment, isValidElement, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
-import { PopoverDisclosure } from "@ariakit/react";
+import { PopoverDisclosure, usePopoverContext, useStoreState } from "@ariakit/react";
 //#region src/components/client/Popover/PopoverTrigger.tsx
 function PopoverTrigger({ children }) {
-	const toggleOnClick = !useContext(PopoverInternalContext)?.isControlled;
+	const internalContext = useContext(PopoverInternalContext);
+	const open = useStoreState(usePopoverContext(), "open");
+	const toggleOnClick = !internalContext?.isControlled;
+	const handleClick = (event) => {
+		if (internalContext?.isControlled && open) internalContext.onClose?.(event.nativeEvent);
+	};
 	if (isValidElement(children) && children.type !== Fragment) return /* @__PURE__ */ jsx(PopoverDisclosure, {
 		render: children,
-		toggleOnClick
+		toggleOnClick,
+		onClick: handleClick
 	});
 	return /* @__PURE__ */ jsx(PopoverDisclosure, {
 		className: "inline",
 		toggleOnClick,
+		onClick: handleClick,
 		children
 	});
 }

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

@@ -35,7 +35,7 @@ let _ariakit_react = require("@ariakit/react");
 *
 * @related [Toast](https://uds.build/docs/components/toast), [Popover](https://uds.build/docs/components/popover)
 **/
-function Tooltip({ children, placement, open, portal = true, hideArrow = false }) {
+function Tooltip({ children, placement, open, portal = true, hideArrow = false, unmountOnHide = false, showTimeout, hideTimeout, gutter }) {
 	const isControlled = open !== void 0;
 	const controlledProps = isControlled ? {
 		showTimeout: 0,
@@ -48,12 +48,16 @@ function Tooltip({ children, placement, open, portal = true, hideArrow = false }
 		value: {
 			portal,
 			isControlled,
-			hideArrow
+			hideArrow,
+			unmountOnHide,
+			gutter
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.TooltipProvider, {
 			placement: ariaKitPlacement,
 			animated: animationDuration,
 			open,
+			showTimeout,
+			hideTimeout,
 			...controlledProps,
 			children
 		})

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

@@ -37,7 +37,11 @@ declare function Tooltip({
   placement,
   open,
   portal,
-  hideArrow
+  hideArrow,
+  unmountOnHide,
+  showTimeout,
+  hideTimeout,
+  gutter
 }: TooltipProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace Tooltip {
   var displayName: string;

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

@@ -38,7 +38,11 @@ declare function Tooltip({
   placement,
   open,
   portal,
-  hideArrow
+  hideArrow,
+  unmountOnHide,
+  showTimeout,
+  hideTimeout,
+  gutter
 }: TooltipProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace Tooltip {
   var displayName: string;

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

@@ -33,7 +33,7 @@ import { TooltipProvider } from "@ariakit/react";
 *
 * @related [Toast](https://uds.build/docs/components/toast), [Popover](https://uds.build/docs/components/popover)
 **/
-function Tooltip({ children, placement, open, portal = true, hideArrow = false }) {
+function Tooltip({ children, placement, open, portal = true, hideArrow = false, unmountOnHide = false, showTimeout, hideTimeout, gutter }) {
 	const isControlled = open !== void 0;
 	const controlledProps = isControlled ? {
 		showTimeout: 0,
@@ -46,12 +46,16 @@ function Tooltip({ children, placement, open, portal = true, hideArrow = false }
 		value: {
 			portal,
 			isControlled,
-			hideArrow
+			hideArrow,
+			unmountOnHide,
+			gutter
 		},
 		children: /* @__PURE__ */ jsx(TooltipProvider, {
 			placement: ariaKitPlacement,
 			animated: animationDuration,
 			open,
+			showTimeout,
+			hideTimeout,
 			...controlledProps,
 			children
 		})

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

@@ -20,7 +20,7 @@ let _ariakit_react = require("@ariakit/react");
 const ARROW_HEIGHT = 8;
 const ARROW_WIDTH = 12;
 const ARROW_TIP_RADIUS_FRACTION = .5;
-const GUTTER = 10;
+const DEFAULT_GUTTER = 10;
 const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children, maxWidth, startTitleIcon, title, endContent, className, id, slotProps }, ref) {
 	const store = (0, _ariakit_react.useTooltipContext)();
 	const open = (0, _ariakit_react.useStoreState)(store, "open");
@@ -72,11 +72,12 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Tooltip, {
 		ref: mergedRef,
 		className: classNames.root,
+		unmountOnHide: internalContext?.unmountOnHide,
 		...slotProps?.root,
 		hideOnHoverOutside: internalContext?.isControlled ? false : void 0,
 		hideOnInteractOutside: internalContext?.isControlled ? false : void 0,
 		portal: internalContext ? internalContext.portal : true,
-		gutter: GUTTER,
+		gutter: internalContext?.gutter ?? DEFAULT_GUTTER,
 		updatePosition: onPositionUpdate,
 		getAnchorRect: require_utils_getUnscaledAnchorRect.getUnscaledAnchorRect,
 		style: {

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

@@ -18,7 +18,7 @@ import { Tooltip, TooltipArrow, useStoreState, useTooltipContext } from "@ariaki
 const ARROW_HEIGHT = 8;
 const ARROW_WIDTH = 12;
 const ARROW_TIP_RADIUS_FRACTION = .5;
-const GUTTER = 10;
+const DEFAULT_GUTTER = 10;
 const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth, startTitleIcon, title, endContent, className, id, slotProps }, ref) {
 	const store = useTooltipContext();
 	const open = useStoreState(store, "open");
@@ -70,11 +70,12 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 	return /* @__PURE__ */ jsxs(Tooltip, {
 		ref: mergedRef,
 		className: classNames.root,
+		unmountOnHide: internalContext?.unmountOnHide,
 		...slotProps?.root,
 		hideOnHoverOutside: internalContext?.isControlled ? false : void 0,
 		hideOnInteractOutside: internalContext?.isControlled ? false : void 0,
 		portal: internalContext ? internalContext.portal : true,
-		gutter: GUTTER,
+		gutter: internalContext?.gutter ?? DEFAULT_GUTTER,
 		updatePosition: onPositionUpdate,
 		getAnchorRect: getUnscaledAnchorRect,
 		style: {

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

@@ -6,6 +6,8 @@ interface TooltipInternalContextType {
   portal: boolean;
   isControlled: boolean;
   hideArrow: boolean;
+  unmountOnHide: boolean;
+  gutter?: number;
 }
 declare const TooltipInternalContext: _$react.Context<TooltipInternalContextType | null>;
 //#endregion

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

@@ -7,6 +7,8 @@ interface TooltipInternalContextType {
   portal: boolean;
   isControlled: boolean;
   hideArrow: boolean;
+  unmountOnHide: boolean;
+  gutter?: number;
 }
 declare const TooltipInternalContext: _$react.Context<TooltipInternalContextType | null>;
 //#endregion

package/dist/index.cjs

@@ -1,10 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_index = require("./palette/dist/index.cjs");
-const require_index$1 = require("./css-tokens/dist/index.cjs");
-const require_styles_variants = require("./styles/variants.cjs");
 const require_styles_styler = require("./styles/styler.cjs");
 const require_components_client_Pressable = require("./components/client/Pressable.cjs");
+const require_index = require("./palette/dist/index.cjs");
+const require_index$1 = require("./css-tokens/dist/index.cjs");
 const require_components_Icon = require("./components/Icon.cjs");
 const require_components_Text = require("./components/Text.cjs");
 const require_components_Banner_Banner = require("./components/Banner/Banner.cjs");
@@ -103,6 +102,7 @@ const require_components_client_Pagination_PaginationNumbers = require("./compon
 const require_components_client_Pagination_PaginationPrev = require("./components/client/Pagination/PaginationPrev.cjs");
 const require_components_client_Popover_UDSPopoverConfigProvider = require("./components/client/Popover/UDSPopoverConfigProvider.cjs");
 const require_components_client_Popover_Popover = require("./components/client/Popover/Popover.cjs");
+const require_styles_variants = require("./styles/variants.cjs");
 const require_generatedConfigs = require("./automated-config/dist/generated/generatedConfigs.cjs");
 const require_tokens_configs_shadow = require("./tokens/configs/shadow.cjs");
 const require_index$3 = require("./modes/dist/index.cjs");

package/dist/index.js

@@ -1,9 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { ALWAYS_PREFIX, alwaysPalette, deprecatedAlwaysPalette, newAlwaysPalette } from "./palette/dist/index.js";
-import { AVATAR_SIZE_PREFIX, BACKGROUND_BLUR_COLOR_PREFIX, BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX, BACKGROUND_BLUR_RADIUS_PREFIX, BACKGROUND_COLOR_PREFIX, BORDER_RADIUS_PREFIX, BORDER_WIDTH_PREFIX, BUTTON_CONTROL_HEIGHT_VAR, BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, DROP_SHADOW_PREFIX, FONT_FAMILY_PREFIX, FONT_SIZE_PREFIX, FONT_SLANT_PREFIX, FONT_WEIGHT_PREFIX, FONT_WIDTH_PREFIX, ICON_COLOR_OVERRIDE_ATTRIBUTE, ICON_SIZE_OVERRIDE_ATTRIBUTE, ICON_SIZE_PREFIX, INSET_SHADOW_PREFIX, INVERT_COLOR_MODE_CLASSNAME, LARGE_SCALE_MODE_CLASSNAME, LETTER_SPACING_PREFIX, LIGHT_COLOR_MODE_CLASSNAME, LINE_COLOR_PREFIX, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, MOTION_PREFIX, OUTLINE_PREFIX, PSEUDO_STYLE_SELECTOR_MAP, SMALL_SCALE_MODE_CLASSNAME, SPECTRUM_COLOR_PREFIX, SYSTEM_COLOR_MODE_CLASSNAME, TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES, TEXT_RESPONSIVE_CLASSNAME, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, getMotionVar, getShadowLayerValue, textVariantsSafe } from "./css-tokens/dist/index.js";
-import { variants } from "./styles/variants.js";
 import { cva, cx, getStyles, getStylesCacheKeySymbol } from "./styles/styler.js";
 import { Pressable } from "./components/client/Pressable.js";
+import { ALWAYS_PREFIX, alwaysPalette, deprecatedAlwaysPalette, newAlwaysPalette } from "./palette/dist/index.js";
+import { AVATAR_SIZE_PREFIX, BACKGROUND_BLUR_COLOR_PREFIX, BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX, BACKGROUND_BLUR_RADIUS_PREFIX, BACKGROUND_COLOR_PREFIX, BORDER_RADIUS_PREFIX, BORDER_WIDTH_PREFIX, BUTTON_CONTROL_HEIGHT_VAR, BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, DROP_SHADOW_PREFIX, FONT_FAMILY_PREFIX, FONT_SIZE_PREFIX, FONT_SLANT_PREFIX, FONT_WEIGHT_PREFIX, FONT_WIDTH_PREFIX, ICON_COLOR_OVERRIDE_ATTRIBUTE, ICON_SIZE_OVERRIDE_ATTRIBUTE, ICON_SIZE_PREFIX, INSET_SHADOW_PREFIX, INVERT_COLOR_MODE_CLASSNAME, LARGE_SCALE_MODE_CLASSNAME, LETTER_SPACING_PREFIX, LIGHT_COLOR_MODE_CLASSNAME, LINE_COLOR_PREFIX, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, MOTION_PREFIX, OUTLINE_PREFIX, PSEUDO_STYLE_SELECTOR_MAP, SMALL_SCALE_MODE_CLASSNAME, SPECTRUM_COLOR_PREFIX, SYSTEM_COLOR_MODE_CLASSNAME, TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES, TEXT_RESPONSIVE_CLASSNAME, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, getMotionVar, getShadowLayerValue, textVariantsSafe } from "./css-tokens/dist/index.js";
 import { Icon } from "./components/Icon.js";
 import { Text } from "./components/Text.js";
 import { Banner } from "./components/Banner/Banner.js";
@@ -102,6 +101,7 @@ import { PaginationNumbers } from "./components/client/Pagination/PaginationNumb
 import { PaginationPrev } from "./components/client/Pagination/PaginationPrev.js";
 import { UDSPopoverConfigProvider } from "./components/client/Popover/UDSPopoverConfigProvider.js";
 import { Popover } from "./components/client/Popover/Popover.js";
+import { variants } from "./styles/variants.js";
 import { AvatarConfig, BadgeConfig, BannerConfig, BottomSheetConfig, ButtonConfig, CheckboxConfig, ChipConfig, DividerConfig, IconButtonConfig, InputConfig, LinkConfig, MenuContentConfig, MenuItemConfig, ModalConfig, PaddleNavConfig, PaginationConfig, PopoverConfig, RadioConfig, ScrimConfig, SelectConfig, SelectContentConfig, SelectItemConfig, SwitchConfig, TabConfig, TabsConfig, ToastConfig, TooltipConfig } from "./automated-config/dist/generated/generatedConfigs.js";
 import { shadow } from "./tokens/configs/shadow.js";
 import { DEFAULT_COLOR_MODE, DEFAULT_COLOR_MODE_FOR_APP, DEFAULT_HIGH_CONTRAST_MODE, DEFAULT_REGION_MODE, DEFAULT_SCALE_MODE, DEFAULT_SCALE_MODE_FOR_APP } from "./modes/dist/index.js";

package/dist/styles/styleVariantTemplates.cjs

@@ -0,0 +1,146 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/styles/styleVariantTemplates.ts
+/**
+* Compact class-name templates for the hand-written style props in
+* `./variants.ts`. The enumerated `variants` map stays the build-time source
+* of truth (CSS generation, purging, public `tokens` export); the runtime
+* styler derives class names from these templates instead so the ~50 kB
+* enumeration never enters the client bundle.
+*
+* `variantClass.test.ts` exhaustively asserts template-derived classes equal
+* the `variants` map, so any drift fails CI.
+*/
+const styleVariantTemplates = {
+	color: "text-%v",
+	placeholderColor: "placeholder:text-%v",
+	fontFamily: "uds-font-family-%v",
+	fontSize: "uds-font-size-%v",
+	fontWeight: "uds-font-weight-%v",
+	lineHeight: "uds-line-height-%v",
+	letterSpacing: "uds-letter-spacing-%v",
+	textAlign: "text-%v",
+	textTransform: {
+		t: "uds-text-transform-%v",
+		e: {
+			none: "normal-case",
+			uppercase: "uppercase",
+			lowercase: "lowercase",
+			capitalize: "capitalize"
+		}
+	},
+	spacing: "p-%v",
+	spacingHorizontal: "px-%v",
+	spacingVertical: "py-%v",
+	spacingBottom: "pb-%v",
+	spacingEnd: "pe-%v",
+	spacingStart: "ps-%v",
+	spacingTop: "pt-%v",
+	offset: "-m-%v",
+	offsetVertical: "-my-%v",
+	offsetHorizontal: "-mx-%v",
+	offsetBottom: "-mb-%v",
+	offsetEnd: "-me-%v",
+	offsetStart: "-ms-%v",
+	offsetTop: "-mt-%v",
+	columnGap: "gap-x-%v",
+	rowGap: "gap-y-%v",
+	backgroundColor: "bg-%v",
+	borderColor: "border-%v",
+	borderStartColor: "border-s-%v",
+	borderEndColor: "border-e-%v",
+	borderBottomColor: "border-b-%v",
+	borderTopColor: "border-t-%v",
+	borderRadius: "uds-border-radius-%v",
+	borderTopStartRadius: "uds-border-top-start-radius-%v",
+	borderTopEndRadius: "uds-border-top-end-radius-%v",
+	borderBottomStartRadius: "uds-border-bottom-start-radius-%v",
+	borderBottomEndRadius: "uds-border-bottom-end-radius-%v",
+	borderWidth: "uds-border-width-%v",
+	borderVerticalWidth: "uds-border-width-y-%v",
+	borderHorizontalWidth: "uds-border-width-x-%v",
+	borderStartWidth: "uds-border-width-start-%v",
+	borderEndWidth: "uds-border-width-end-%v",
+	borderTopWidth: "uds-border-width-top-%v",
+	borderBottomWidth: "uds-border-width-bottom-%v",
+	avatarSize: "avatarSize-%v",
+	iconSize: "iconSize-%v leading-none",
+	alignContent: {
+		t: "content-%v",
+		e: {
+			"flex-start": "content-start",
+			"flex-end": "content-end",
+			"space-between": "content-between",
+			"space-around": "content-around"
+		}
+	},
+	alignItems: {
+		t: "items-%v",
+		e: {
+			"flex-start": "items-start",
+			"flex-end": "items-end"
+		}
+	},
+	alignSelf: {
+		t: "self-%v",
+		e: {
+			"flex-start": "self-start",
+			"flex-end": "self-end"
+		}
+	},
+	flex: "flex-%v",
+	flexDirection: {
+		t: "flex-%v",
+		e: {
+			column: "flex-col",
+			"column-reverse": "flex-col-reverse"
+		}
+	},
+	flexGrow: {
+		t: "grow-[%v]",
+		e: {
+			"0": "grow-0",
+			"1": "grow"
+		}
+	},
+	flexShrink: {
+		t: "shrink-%v",
+		e: { "1": "shrink" }
+	},
+	flexWrap: "flex-%v",
+	justifyContent: {
+		t: "justify-%v",
+		e: {
+			"flex-start": "justify-start",
+			"flex-end": "justify-end",
+			"space-between": "justify-between",
+			"space-around": "justify-around",
+			"space-evenly": "justify-evenly"
+		}
+	},
+	flexBasis: "basis-[%v]",
+	display: {
+		t: "%v",
+		e: { none: "hidden" }
+	},
+	overflow: "overflow-%v",
+	overflowX: "overflow-x-%v",
+	overflowY: "overflow-y-%v",
+	position: "%v",
+	contentFit: "object-%v",
+	colorMode: "uds-color-mode-%v",
+	scaleMode: "uds-scale-mode-%v",
+	width: "w-%v",
+	height: "h-%v",
+	dropShadow: "uds-drop-shadow-%v",
+	insetShadow: "uds-inset-shadow-%v",
+	nestedBorderRadiusSize: "uds-nested-border-radius-size-%v",
+	nestedBorderRadiusWidth: "uds-nested-border-radius-width-%v",
+	nestedBorderRadiusSpacing: "uds-nested-border-radius-spacing-%v",
+	nestedBorderRadius: {
+		t: "uds-nested-border-radius-%v",
+		e: { true: "uds-nested-border-radius" }
+	}
+};
+//#endregion
+exports.styleVariantTemplates = styleVariantTemplates;