@yahoo/uds 3.176.0-beta.1 → 3.176.0

package/dist/components/client/Select/SelectItem.d.ts

@@ -2,9 +2,8 @@
 "use client";
 import { UniversalIconSlot } from "../../../types/dist/index.js";
 import { IconPropsWithSVGProps } from "../../../tokens/types.js";
-import * as _$react from "react";
+import "../../../tokens/index.js";
 import { SelectItemProps as SelectItemProps$1 } from "@ariakit/react";
-
 //#region src/components/client/Select/SelectItem.d.ts
 type DataAttributes = {
   [name: `data-${string}`]: string;
@@ -25,6 +24,6 @@ interface SelectItemProps extends Omit<SelectItemProps$1, 'className'> {
  *
  * @componentType Client component
  */
-declare const SelectItem: _$react.ForwardRefExoticComponent<Omit<SelectItemProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: import("react").ForwardRefExoticComponent<Omit<SelectItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
 export { SelectItem, type SelectItemProps };

package/dist/components/client/Select/SelectItem.js

@@ -32,7 +32,8 @@ const buildSelectItemClasses = ({ disabled, className }) => {
 * @componentType Client component
 */
 const SelectItem = forwardRef(function SelectItem({ children, className, slotProps, disabled, value, startIcon, ...props }, ref) {
-	const isSelected = useStoreState(useSelectContext(), ["value"], (state) => state?.value === value);
+	const select = useSelectContext();
+	const isSelected = useStoreState(select, ["value"], (state) => state?.value === value);
 	const { startIconSize, endIconSize } = useSelectItemConfig();
 	const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
 	const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};

package/dist/components/client/Select/SelectTrigger.cjs

@@ -2,11 +2,11 @@
 "use client";
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../../../_virtual/_rolldown/runtime.cjs");
 const require_styles_styler = require("../../../styles/styler.cjs");
 const require_components_IconSlot = require("../../IconSlot.cjs");
 const require_components_Box = require("../../Box.cjs");
 const require_components_HStack = require("../../HStack.cjs");
+const require_hooks_usePointerFocusTracker = require("../../../hooks/usePointerFocusTracker.cjs");
 const require_components_client_Select_selectContext = require("./selectContext.cjs");
 const require_components_client_Select_selectFieldStyles = require("./selectFieldStyles.cjs");
 const require_components_client_Select_SelectValue = require("./SelectValue.cjs");
@@ -42,6 +42,7 @@ const EndIcon = (0, react.memo)(function EndIcon({ icon, className, iconProps })
 EndIcon.displayName = "EndIcon";
 const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
 	const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, minWidth, triggerWrapperRef } = require_components_client_Select_selectContext.useSelectFieldContext();
+	const { isPointerFocus, onFocusChange } = require_hooks_usePointerFocusTracker.usePointerFocusTracker();
 	const select = (0, _ariakit_react.useSelectContext)();
 	const value = (0, _ariakit_react.useStoreState)(select, "value");
 	const open = (0, _ariakit_react.useStoreState)(select, "open");
@@ -58,6 +59,12 @@ const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder
 		}
 		triggerPassthroughOnPointerDown?.(event);
 	};
+	const handleFocus = () => {
+		onFocusChange(true);
+	};
+	const handleBlur = () => {
+		onFocusChange(false);
+	};
 	const handleClick = (event) => {
 		if (readOnly) {
 			event.preventDefault();
@@ -75,7 +82,7 @@ const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder
 		width: "full",
 		style: { minWidth: `${minWidth}px` },
 		...triggerWrapperProps,
-		className: require_components_client_Select_selectFieldStyles.getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName),
+		className: require_components_client_Select_selectFieldStyles.getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName, isPointerFocus),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Select, {
 			ref,
 			id: uid,
@@ -88,6 +95,8 @@ const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder
 			...triggerPassthroughProps,
 			...triggerProps,
 			onPointerDown: handlePointerDown,
+			onFocus: handleFocus,
+			onBlur: handleBlur,
 			onClick: handleClick,
 			className: require_styles_styler.cx("flex", "w-full", "min-w-0", "items-center", "border-0", "bg-transparent", "rounded-[inherit]", "outline-none", "shadow-none", "uds-hit-target", isDisabled ? "cursor-not-allowed" : "cursor-pointer"),
 			children: [

package/dist/components/client/Select/SelectTrigger.d.cts

@@ -1,9 +1,8 @@
 
 import { UniversalIconSlot } from "../../../types/dist/index.cjs";
 import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
 import { BoxProps } from "../../Box.cjs";
-import * as _$react from "react";
-
 //#region src/components/client/Select/SelectTrigger.d.ts
 type DataAttributes = {
   [name: `data-${string}`]: string;
@@ -22,6 +21,6 @@ interface SelectTriggerProps extends NativeSelectTriggerProps {
     endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
   };
 }
-declare const SelectTrigger: _$react.ForwardRefExoticComponent<SelectTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
+declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { SelectTrigger, type SelectTriggerProps };

package/dist/components/client/Select/SelectTrigger.d.ts

@@ -2,9 +2,8 @@
 "use client";
 import { UniversalIconSlot } from "../../../types/dist/index.js";
 import { IconPropsWithSVGProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
 import { BoxProps } from "../../Box.js";
-import * as _$react from "react";
-
 //#region src/components/client/Select/SelectTrigger.d.ts
 type DataAttributes = {
   [name: `data-${string}`]: string;
@@ -23,6 +22,6 @@ interface SelectTriggerProps extends NativeSelectTriggerProps {
     endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
   };
 }
-declare const SelectTrigger: _$react.ForwardRefExoticComponent<SelectTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
+declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { SelectTrigger, type SelectTriggerProps };

package/dist/components/client/Select/SelectTrigger.js

@@ -5,6 +5,7 @@ import { cx } from "../../../styles/styler.js";
 import { IconSlot } from "../../IconSlot.js";
 import { Box } from "../../Box.js";
 import { HStack } from "../../HStack.js";
+import { usePointerFocusTracker } from "../../../hooks/usePointerFocusTracker.js";
 import { useSelectFieldContext } from "./selectContext.js";
 import { getSelectEndIconClassName, getSelectStartIconClassName, getSelectTriggerClassName, getSelectTriggerWrapperClassName } from "./selectFieldStyles.js";
 import { SelectValue as SelectValue$1 } from "./SelectValue.js";
@@ -40,6 +41,7 @@ const EndIcon = memo(function EndIcon({ icon, className, iconProps }) {
 EndIcon.displayName = "EndIcon";
 const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
 	const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, minWidth, triggerWrapperRef } = useSelectFieldContext();
+	const { isPointerFocus, onFocusChange } = usePointerFocusTracker();
 	const select = useSelectContext();
 	const value = useStoreState(select, "value");
 	const open = useStoreState(select, "open");
@@ -56,6 +58,12 @@ const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon
 		}
 		triggerPassthroughOnPointerDown?.(event);
 	};
+	const handleFocus = () => {
+		onFocusChange(true);
+	};
+	const handleBlur = () => {
+		onFocusChange(false);
+	};
 	const handleClick = (event) => {
 		if (readOnly) {
 			event.preventDefault();
@@ -73,7 +81,7 @@ const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon
 		width: "full",
 		style: { minWidth: `${minWidth}px` },
 		...triggerWrapperProps,
-		className: getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName),
+		className: getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName, isPointerFocus),
 		children: /* @__PURE__ */ jsxs(Select, {
 			ref,
 			id: uid,
@@ -86,6 +94,8 @@ const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon
 			...triggerPassthroughProps,
 			...triggerProps,
 			onPointerDown: handlePointerDown,
+			onFocus: handleFocus,
+			onBlur: handleBlur,
 			onClick: handleClick,
 			className: cx("flex", "w-full", "min-w-0", "items-center", "border-0", "bg-transparent", "rounded-[inherit]", "outline-none", "shadow-none", "uds-hit-target", isDisabled ? "cursor-not-allowed" : "cursor-pointer"),
 			children: [

package/dist/components/client/Select/SelectValue.cjs

@@ -2,7 +2,6 @@
 "use client";
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../../../_virtual/_rolldown/runtime.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ariakit_react = require("@ariakit/react");
 //#region src/components/client/Select/SelectValue.tsx

package/dist/components/client/Select/SelectValue.d.cts

@@ -1,17 +1,12 @@
 
 import { ReactNode } from "react";
 import { SelectValueProps } from "@ariakit/react";
-
 //#region src/components/client/Select/SelectValue.d.ts
 interface SelectValueProps$1 extends Omit<SelectValueProps, 'children'> {
   fallback?: string;
   children?: (value: string) => ReactNode;
 }
-declare function SelectValue({
-  fallback,
-  children,
-  ...props
-}: SelectValueProps$1): ReactNode;
+declare function SelectValue({ fallback, children, ...props }: SelectValueProps$1): ReactNode;
 declare namespace SelectValue {
   var displayName: string;
 }

package/dist/components/client/Select/SelectValue.d.ts

@@ -2,17 +2,12 @@
 "use client";
 import { ReactNode } from "react";
 import { SelectValueProps } from "@ariakit/react";
-
 //#region src/components/client/Select/SelectValue.d.ts
 interface SelectValueProps$1 extends Omit<SelectValueProps, 'children'> {
   fallback?: string;
   children?: (value: string) => ReactNode;
 }
-declare function SelectValue({
-  fallback,
-  children,
-  ...props
-}: SelectValueProps$1): ReactNode;
+declare function SelectValue({ fallback, children, ...props }: SelectValueProps$1): ReactNode;
 declare namespace SelectValue {
   var displayName: string;
 }

package/dist/components/client/Select/UDSSelectItemConfigProvider.d.cts

@@ -1,15 +1,11 @@
 
 import { IconSize } from "../../../types/dist/index.cjs";
+import "../../../tokens/types.cjs";
 import { UDSConfigProviderProps } from "../providers/createUDSConfigProvider.cjs";
 import { UDSSelectItemConfigContextType } from "../../../runtime/selectItemConfig.cjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components/client/Select/UDSSelectItemConfigProvider.d.ts
 declare const UDSSelectItemConfigProvider: {
-  ({
-    children,
-    value
-  }: UDSConfigProviderProps<UDSSelectItemConfigContextType>): _$react_jsx_runtime0.JSX.Element;
+  ({ children, value }: UDSConfigProviderProps<UDSSelectItemConfigContextType>): import("react/jsx-runtime").JSX.Element;
   displayName: string;
 };
 type UDSSelectItemConfigProviderProps = UDSConfigProviderProps<UDSSelectItemConfigContextType>;

package/dist/components/client/Select/UDSSelectItemConfigProvider.d.ts

@@ -1,16 +1,12 @@
 
 "use client";
 import { IconSize } from "../../../types/dist/index.js";
+import "../../../tokens/types.js";
 import { UDSConfigProviderProps } from "../providers/createUDSConfigProvider.js";
 import { UDSSelectItemConfigContextType } from "../../../runtime/selectItemConfig.js";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components/client/Select/UDSSelectItemConfigProvider.d.ts
 declare const UDSSelectItemConfigProvider: {
-  ({
-    children,
-    value
-  }: UDSConfigProviderProps<UDSSelectItemConfigContextType>): _$react_jsx_runtime0.JSX.Element;
+  ({ children, value }: UDSConfigProviderProps<UDSSelectItemConfigContextType>): import("react/jsx-runtime").JSX.Element;
   displayName: string;
 };
 type UDSSelectItemConfigProviderProps = UDSConfigProviderProps<UDSSelectItemConfigContextType>;

package/dist/components/client/Select/index.d.cts

@@ -5,4 +5,4 @@ import { SelectContent, SelectContentProps } from "./SelectContent.cjs";
 import { SelectDivider, SelectDividerProps } from "./SelectDivider.cjs";
 import { SelectItem, SelectItemProps } from "./SelectItem.cjs";
 import { UDSSelectItemConfigProvider, UDSSelectItemConfigProviderProps, useSelectItemConfig } from "./UDSSelectItemConfigProvider.cjs";
-export { Select, SelectContent, SelectContentProps, SelectDivider, SelectDividerProps, SelectItem, SelectItemProps, SelectProps, UDSSelectItemConfigContextType, UDSSelectItemConfigProvider, UDSSelectItemConfigProviderProps, useSelectItemConfig };
+export { Select, SelectContent, type SelectContentProps, SelectDivider, type SelectDividerProps, SelectItem, type SelectItemProps, type SelectProps, type UDSSelectItemConfigContextType, UDSSelectItemConfigProvider, type UDSSelectItemConfigProviderProps, useSelectItemConfig };

package/dist/components/client/Select/index.d.ts

@@ -6,4 +6,4 @@ import { SelectContent, SelectContentProps } from "./SelectContent.js";
 import { SelectDivider, SelectDividerProps } from "./SelectDivider.js";
 import { SelectItem, SelectItemProps } from "./SelectItem.js";
 import { UDSSelectItemConfigProvider, UDSSelectItemConfigProviderProps, useSelectItemConfig } from "./UDSSelectItemConfigProvider.js";
-export { Select, SelectContent, SelectContentProps, SelectDivider, SelectDividerProps, SelectItem, SelectItemProps, SelectProps, UDSSelectItemConfigContextType, UDSSelectItemConfigProvider, UDSSelectItemConfigProviderProps, useSelectItemConfig };
+export { Select, SelectContent, type SelectContentProps, SelectDivider, type SelectDividerProps, SelectItem, type SelectItemProps, type SelectProps, type UDSSelectItemConfigContextType, UDSSelectItemConfigProvider, type UDSSelectItemConfigProviderProps, useSelectItemConfig };

package/dist/components/client/Select/selectContext.cjs

@@ -2,7 +2,6 @@
 "use client";
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../../../_virtual/_rolldown/runtime.cjs");
 let react = require("react");
 //#region src/components/client/Select/selectContext.tsx
 const SelectFieldContext = (0, react.createContext)(null);

package/dist/components/client/Select/selectContext.d.cts

@@ -1,8 +1,7 @@
 
 import { SelectSize, UniversalBoxProps } from "../../../types/dist/index.cjs";
-import * as _$react from "react";
+import "../../../tokens/index.cjs";
 import { RefObject } from "react";
-
 //#region src/components/client/Select/selectContext.d.ts
 type SelectFieldContextValue = {
   size: SelectSize;
@@ -14,10 +13,11 @@ type SelectFieldContextValue = {
   minWidth: number;
   reduceMotion?: boolean;
   uid: string;
-  helpTextId?: string; /** Outer field wrapper; used to anchor SelectContent width and gutter. */
+  helpTextId?: string;
+  /** Outer field wrapper; used to anchor SelectContent width and gutter. */
   triggerWrapperRef: RefObject<HTMLDivElement | null>;
 };
-declare const SelectFieldContext: _$react.Context<SelectFieldContextValue | null>;
+declare const SelectFieldContext: import("react").Context<SelectFieldContextValue | null>;
 declare function useSelectFieldContext(): SelectFieldContextValue;
 declare function useOptionalSelectFieldContext(): SelectFieldContextValue | null;
 //#endregion

package/dist/components/client/Select/selectContext.d.ts

@@ -1,9 +1,8 @@
 
 "use client";
 import { SelectSize, UniversalBoxProps } from "../../../types/dist/index.js";
-import * as _$react from "react";
+import "../../../tokens/index.js";
 import { RefObject } from "react";
-
 //#region src/components/client/Select/selectContext.d.ts
 type SelectFieldContextValue = {
   size: SelectSize;
@@ -15,10 +14,11 @@ type SelectFieldContextValue = {
   minWidth: number;
   reduceMotion?: boolean;
   uid: string;
-  helpTextId?: string; /** Outer field wrapper; used to anchor SelectContent width and gutter. */
+  helpTextId?: string;
+  /** Outer field wrapper; used to anchor SelectContent width and gutter. */
   triggerWrapperRef: RefObject<HTMLDivElement | null>;
 };
-declare const SelectFieldContext: _$react.Context<SelectFieldContextValue | null>;
+declare const SelectFieldContext: import("react").Context<SelectFieldContextValue | null>;
 declare function useSelectFieldContext(): SelectFieldContextValue;
 declare function useOptionalSelectFieldContext(): SelectFieldContextValue | null;
 //#endregion

package/dist/components/client/Select/selectFieldStyles.cjs

@@ -26,13 +26,13 @@ function getSelectLabelRequiredClassName(hasValue) {
 }
 /** Marks Select field triggers so Input `focus-within` wrapper rules skip them. */
 const SELECT_FIELD_TRIGGER_CLASS = "uds-select-field-trigger";
-function getSelectTriggerWrapperClassName(size, hasValue, className) {
+function getSelectTriggerWrapperClassName(size, hasValue, className, isPointerFocus) {
 	return require_styles_styler.cx(require_styles_styler.getStyles({
 		inputSizeInputWrapperStatic: size,
 		inputSizeInputWrapperDynamic: size,
 		inputVariantInputWrapper: "default",
 		inputVariantValueInputWrapper: !hasValue ? "empty" : "filled"
-	}), "flex", "w-full", "items-center", "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
+	}), "flex", "w-full", "items-center", !isPointerFocus && "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
 }
 function getSelectTriggerClassName({ size, hasValue, disabled, className }) {
 	return require_styles_styler.getStyles({

package/dist/components/client/Select/selectFieldStyles.d.cts

@@ -1,5 +1,6 @@
 
 import { SelectSize } from "../../../types/dist/index.cjs";
+import "../../../tokens/index.cjs";
 //#region src/components/client/Select/selectFieldStyles.d.ts
 type SelectTriggerStyleOptions = {
   size: SelectSize;
@@ -7,12 +8,7 @@ type SelectTriggerStyleOptions = {
   disabled?: boolean;
   className?: string;
 };
-declare function getSelectRootClassName({
-  size,
-  hasValue,
-  disabled,
-  className
-}: {
+declare function getSelectRootClassName({ size, hasValue, disabled, className }: {
   size: SelectSize;
   hasValue: boolean;
   disabled?: boolean;
@@ -22,13 +18,8 @@ declare function getSelectLabelClassName(size: SelectSize, hasValue: boolean): s
 declare function getSelectLabelRequiredClassName(hasValue: boolean): string;
 /** Marks Select field triggers so Input `focus-within` wrapper rules skip them. */
 declare const SELECT_FIELD_TRIGGER_CLASS = "uds-select-field-trigger";
-declare function getSelectTriggerWrapperClassName(size: SelectSize, hasValue: boolean, className?: string): string;
-declare function getSelectTriggerClassName({
-  size,
-  hasValue,
-  disabled,
-  className
-}: SelectTriggerStyleOptions): string;
+declare function getSelectTriggerWrapperClassName(size: SelectSize, hasValue: boolean, className?: string, isPointerFocus?: boolean): string;
+declare function getSelectTriggerClassName({ size, hasValue, disabled, className }: SelectTriggerStyleOptions): string;
 declare function getSelectStartIconClassName(size: SelectSize, hasValue: boolean): string;
 declare function getSelectEndIconClassName(size: SelectSize, hasValue: boolean): string;
 declare function getSelectHelpTextClassName(size: SelectSize, hasValue: boolean): string;

package/dist/components/client/Select/selectFieldStyles.d.ts

@@ -1,6 +1,7 @@
 
 "use client";
 import { SelectSize } from "../../../types/dist/index.js";
+import "../../../tokens/index.js";
 //#region src/components/client/Select/selectFieldStyles.d.ts
 type SelectTriggerStyleOptions = {
   size: SelectSize;
@@ -8,12 +9,7 @@ type SelectTriggerStyleOptions = {
   disabled?: boolean;
   className?: string;
 };
-declare function getSelectRootClassName({
-  size,
-  hasValue,
-  disabled,
-  className
-}: {
+declare function getSelectRootClassName({ size, hasValue, disabled, className }: {
   size: SelectSize;
   hasValue: boolean;
   disabled?: boolean;
@@ -23,13 +19,8 @@ declare function getSelectLabelClassName(size: SelectSize, hasValue: boolean): s
 declare function getSelectLabelRequiredClassName(hasValue: boolean): string;
 /** Marks Select field triggers so Input `focus-within` wrapper rules skip them. */
 declare const SELECT_FIELD_TRIGGER_CLASS = "uds-select-field-trigger";
-declare function getSelectTriggerWrapperClassName(size: SelectSize, hasValue: boolean, className?: string): string;
-declare function getSelectTriggerClassName({
-  size,
-  hasValue,
-  disabled,
-  className
-}: SelectTriggerStyleOptions): string;
+declare function getSelectTriggerWrapperClassName(size: SelectSize, hasValue: boolean, className?: string, isPointerFocus?: boolean): string;
+declare function getSelectTriggerClassName({ size, hasValue, disabled, className }: SelectTriggerStyleOptions): string;
 declare function getSelectStartIconClassName(size: SelectSize, hasValue: boolean): string;
 declare function getSelectEndIconClassName(size: SelectSize, hasValue: boolean): string;
 declare function getSelectHelpTextClassName(size: SelectSize, hasValue: boolean): string;

package/dist/components/client/Select/selectFieldStyles.js

@@ -25,13 +25,13 @@ function getSelectLabelRequiredClassName(hasValue) {
 }
 /** Marks Select field triggers so Input `focus-within` wrapper rules skip them. */
 const SELECT_FIELD_TRIGGER_CLASS = "uds-select-field-trigger";
-function getSelectTriggerWrapperClassName(size, hasValue, className) {
+function getSelectTriggerWrapperClassName(size, hasValue, className, isPointerFocus) {
 	return cx(getStyles({
 		inputSizeInputWrapperStatic: size,
 		inputSizeInputWrapperDynamic: size,
 		inputVariantInputWrapper: "default",
 		inputVariantValueInputWrapper: !hasValue ? "empty" : "filled"
-	}), "flex", "w-full", "items-center", "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
+	}), "flex", "w-full", "items-center", !isPointerFocus && "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
 }
 function getSelectTriggerClassName({ size, hasValue, disabled, className }) {
 	return getStyles({

package/dist/components/client/SpringMotionConfig.cjs

@@ -1,7 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../../_virtual/_rolldown/runtime.cjs");
 const require_index = require("../../css-tokens/dist/index.cjs");
 const require_index$1 = require("../../motion-tokens/dist/index.cjs");
 let react = require("react");
@@ -71,20 +70,21 @@ function SpringMotionConfig({ children, reducedMotion = "user", loadFeatures = d
 		layoutDampingVar,
 		layoutStiffnessVar
 	]);
+	const transition = (0, react.useMemo)(() => ({
+		type: "spring",
+		mass: 1,
+		...layoutConfig,
+		layout: layoutConfig,
+		opacity: colorConfig,
+		color: colorConfig,
+		borderColor: colorConfig,
+		backgroundColor: colorConfig
+	}), [colorConfig, layoutConfig]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.LazyMotion, {
 		features: loadFeatures,
 		strict: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.MotionConfig, {
-			transition: (0, react.useMemo)(() => ({
-				type: "spring",
-				mass: 1,
-				...layoutConfig,
-				layout: layoutConfig,
-				opacity: colorConfig,
-				color: colorConfig,
-				borderColor: colorConfig,
-				backgroundColor: colorConfig
-			}), [colorConfig, layoutConfig]),
+			transition,
 			reducedMotion,
 			children
 		})

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

@@ -1,8 +1,8 @@
 
 import { MotionVariant, MotionVariantSpeed } from "../../types/dist/index.cjs";
+import "../../tokens/index.cjs";
 import { ReactNode } from "react";
 import { LazyFeatureBundle, MotionConfigProps } from "motion/react";
-
 //#region src/components/client/SpringMotionConfig.d.ts
 interface SpringMotionConfigProps extends Pick<MotionConfigProps, 'children' | 'reducedMotion'> {
   /**
@@ -40,15 +40,7 @@ interface SpringMotionConfigProps extends Pick<MotionConfigProps, 'children' | '
  * The SpringConfig component provides a way to configure the spring animations for the entire application.
  * This component provides a way to use uds motion configs with Framer Motion.
  */
-declare function SpringMotionConfig({
-  children,
-  reducedMotion,
-  loadFeatures,
-  layoutVariant,
-  layoutSpeed,
-  colorVariant,
-  colorSpeed
-}: SpringMotionConfigProps): ReactNode;
+declare function SpringMotionConfig({ children, reducedMotion, loadFeatures, layoutVariant, layoutSpeed, colorVariant, colorSpeed }: SpringMotionConfigProps): ReactNode;
 declare namespace SpringMotionConfig {
   var displayName: string;
 }

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

@@ -1,9 +1,9 @@
 
 "use client";
 import { MotionVariant, MotionVariantSpeed } from "../../types/dist/index.js";
+import "../../tokens/index.js";
 import { ReactNode } from "react";
 import { LazyFeatureBundle, MotionConfigProps } from "motion/react";
-
 //#region src/components/client/SpringMotionConfig.d.ts
 interface SpringMotionConfigProps extends Pick<MotionConfigProps, 'children' | 'reducedMotion'> {
   /**
@@ -41,15 +41,7 @@ interface SpringMotionConfigProps extends Pick<MotionConfigProps, 'children' | '
  * The SpringConfig component provides a way to configure the spring animations for the entire application.
  * This component provides a way to use uds motion configs with Framer Motion.
  */
-declare function SpringMotionConfig({
-  children,
-  reducedMotion,
-  loadFeatures,
-  layoutVariant,
-  layoutSpeed,
-  colorVariant,
-  colorSpeed
-}: SpringMotionConfigProps): ReactNode;
+declare function SpringMotionConfig({ children, reducedMotion, loadFeatures, layoutVariant, layoutSpeed, colorVariant, colorSpeed }: SpringMotionConfigProps): ReactNode;
 declare namespace SpringMotionConfig {
   var displayName: string;
 }

package/dist/components/client/SpringMotionConfig.js

@@ -69,20 +69,21 @@ function SpringMotionConfig({ children, reducedMotion = "user", loadFeatures = d
 		layoutDampingVar,
 		layoutStiffnessVar
 	]);
+	const transition = useMemo(() => ({
+		type: "spring",
+		mass: 1,
+		...layoutConfig,
+		layout: layoutConfig,
+		opacity: colorConfig,
+		color: colorConfig,
+		borderColor: colorConfig,
+		backgroundColor: colorConfig
+	}), [colorConfig, layoutConfig]);
 	return /* @__PURE__ */ jsx(LazyMotion, {
 		features: loadFeatures,
 		strict: true,
 		children: /* @__PURE__ */ jsx(MotionConfig, {
-			transition: useMemo(() => ({
-				type: "spring",
-				mass: 1,
-				...layoutConfig,
-				layout: layoutConfig,
-				opacity: colorConfig,
-				color: colorConfig,
-				borderColor: colorConfig,
-				backgroundColor: colorConfig
-			}), [colorConfig, layoutConfig]),
+			transition,
 			reducedMotion,
 			children
 		})

package/dist/components/client/Switch/Switch.cjs

@@ -10,10 +10,10 @@ const require_components_client_SpringMotionConfig = require("../SpringMotionCon
 const require_hooks_useRtl = require("../../../hooks/useRtl.cjs");
 const require_components_client_Switch_SwitchBase = require("./SwitchBase.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let motion_react_m = require("motion/react-m");
-motion_react_m = require_runtime.__toESM(motion_react_m);
+motion_react_m = require_runtime.__toESM(motion_react_m, 1);
 //#region src/components/client/Switch/Switch.tsx
 const MotionBox = motion_react_m.create(require_components_Box.Box);
 MotionBox.displayName = "SwitchMotionBox";

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

@@ -1,7 +1,6 @@
 
 import { SwitchProps as SwitchProps$1 } from "./types.cjs";
 import React from "react";
-
 //#region src/components/client/Switch/Switch.d.ts
 type SwitchProps = SwitchProps$1;
 /**

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

@@ -2,7 +2,6 @@
 "use client";
 import { SwitchProps as SwitchProps$1 } from "./types.js";
 import React from "react";
-
 //#region src/components/client/Switch/Switch.d.ts
 type SwitchProps = SwitchProps$1;
 /**

package/dist/components/client/Switch/SwitchBase.cjs

@@ -7,7 +7,7 @@ const require_components_Box = require("../../Box.cjs");
 const require_components_FormLabel = require("../../FormLabel.cjs");
 const require_components_client_Switch_switchStyles = require("./switchStyles.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/client/Switch/SwitchBase.tsx
 const SwitchBase = (0, react.forwardRef)(function SwitchBase({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, disabled, required, onFocus, onBlur, className, style, slotProps, cssAnimationDuration, enableHoverTracking = false, renderHandle, ...switchProps }, parentRef) {

package/dist/components/client/Switch/SwitchBase.d.cts

@@ -1,7 +1,6 @@
 
 import { DataAttributes, SwitchProps } from "./types.cjs";
 import React, { ReactNode } from "react";
-
 //#region src/components/client/Switch/SwitchBase.d.ts
 type RenderHandleArgs = {
   size: NonNullable<SwitchProps['size']>;

package/dist/components/client/Switch/SwitchBase.d.ts

@@ -2,7 +2,6 @@
 "use client";
 import { DataAttributes, SwitchProps } from "./types.js";
 import React, { ReactNode } from "react";
-
 //#region src/components/client/Switch/SwitchBase.d.ts
 type RenderHandleArgs = {
   size: NonNullable<SwitchProps['size']>;

package/dist/components/client/Switch/switchStyles.d.cts

@@ -1,5 +1,6 @@
 
 import { SwitchSize } from "../../../types/dist/index.cjs";
+import "../../../tokens/index.cjs";
 //#region src/components/client/Switch/switchStyles.d.ts
 declare const SIZE_MAP: Record<SwitchSize, {
   isOnX: string;