@yahoo/uds 3.157.1 → 3.158.1

package/dist/automated-config/dist/utils/getConfigVariantPseudoStates.cjs

@@ -15,10 +15,13 @@ const require_getConfigComponentVariant = require("./getConfigComponentVariant.c
 function getConfigVariantPseudoStates(config, variantKey, state, subComponentName, componentStateValue) {
 	const componentVariant = require_getConfigComponentVariant.getConfigComponentVariant(config, variantKey, subComponentName);
 	if (!componentVariant) return null;
-	const excludedPseudoStates = state && componentStateValue && require_variantConfigGuards.isVariantConfigWithComponentStates(componentVariant) ? require_componentStatePseudoStates.getExcludedPseudoStatesForComponentStateOption(componentVariant.componentStates[state], componentStateValue) : [];
+	const componentStateConfig = state && require_variantConfigGuards.isVariantConfigWithComponentStates(componentVariant) ? componentVariant.componentStates[state] : void 0;
+	const excludedPseudoStates = componentStateConfig && componentStateValue ? require_componentStatePseudoStates.getExcludedPseudoStatesForComponentStateOption(componentStateConfig, componentStateValue) : [];
+	const excludedLayers = componentStateConfig && componentStateValue ? require_componentStatePseudoStates.getExcludedLayersForComponentStateOption(componentStateConfig, componentStateValue) : [];
 	const variantLayers = require_variantConfigGuards.isVariantConfigWithProperties(componentVariant) ? Object.entries(componentVariant?.layers ?? {}) : [];
 	const stateLayers = require_variantConfigGuards.isVariantConfigWithComponentStates(componentVariant) && state ? Object.entries(componentVariant.componentStates[state].layers ?? {}) : [];
-	return [...variantLayers, ...stateLayers].flatMap(([layerKey, layer]) => Object.entries(layer.properties).map(([propertyKey, property]) => [
+	const excludedLayerSet = new Set(excludedLayers);
+	return [...variantLayers, ...stateLayers].filter(([layerKey]) => !excludedLayerSet.has(layerKey)).flatMap(([layerKey, layer]) => Object.entries(layer.properties).map(([propertyKey, property]) => [
 		layerKey,
 		layer,
 		propertyKey,

package/dist/automated-config/dist/utils/getConfigVariantPseudoStates.js

@@ -1,5 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { filterPseudoStatesByExclusion, getExcludedPseudoStatesForComponentStateOption } from "./componentStatePseudoStates.js";
+import { filterPseudoStatesByExclusion, getExcludedLayersForComponentStateOption, getExcludedPseudoStatesForComponentStateOption } from "./componentStatePseudoStates.js";
 import { resolvePropertyStates } from "./resolvePropertyStates.js";
 import { isVariantConfigWithComponentStates, isVariantConfigWithProperties } from "./variantConfigGuards.js";
 import { getConfigComponentVariant } from "./getConfigComponentVariant.js";
@@ -15,10 +15,13 @@ import { getConfigComponentVariant } from "./getConfigComponentVariant.js";
 function getConfigVariantPseudoStates(config, variantKey, state, subComponentName, componentStateValue) {
 	const componentVariant = getConfigComponentVariant(config, variantKey, subComponentName);
 	if (!componentVariant) return null;
-	const excludedPseudoStates = state && componentStateValue && isVariantConfigWithComponentStates(componentVariant) ? getExcludedPseudoStatesForComponentStateOption(componentVariant.componentStates[state], componentStateValue) : [];
+	const componentStateConfig = state && isVariantConfigWithComponentStates(componentVariant) ? componentVariant.componentStates[state] : void 0;
+	const excludedPseudoStates = componentStateConfig && componentStateValue ? getExcludedPseudoStatesForComponentStateOption(componentStateConfig, componentStateValue) : [];
+	const excludedLayers = componentStateConfig && componentStateValue ? getExcludedLayersForComponentStateOption(componentStateConfig, componentStateValue) : [];
 	const variantLayers = isVariantConfigWithProperties(componentVariant) ? Object.entries(componentVariant?.layers ?? {}) : [];
 	const stateLayers = isVariantConfigWithComponentStates(componentVariant) && state ? Object.entries(componentVariant.componentStates[state].layers ?? {}) : [];
-	return [...variantLayers, ...stateLayers].flatMap(([layerKey, layer]) => Object.entries(layer.properties).map(([propertyKey, property]) => [
+	const excludedLayerSet = new Set(excludedLayers);
+	return [...variantLayers, ...stateLayers].filter(([layerKey]) => !excludedLayerSet.has(layerKey)).flatMap(([layerKey, layer]) => Object.entries(layer.properties).map(([propertyKey, property]) => [
 		layerKey,
 		layer,
 		propertyKey,

package/dist/automated-config/dist/utils/index.cjs

@@ -90,7 +90,8 @@ const COMPONENTS_WITH_SHADOW_BORDERS = [
 const LEGACY_STATE_KEYS = [
 	"disabled",
 	"focused",
-	"focused-keyboard"
+	"focused-keyboard",
+	"selected"
 ];
 /**
 * Enumerates every canonical state key the system supports: rest, every atom,
@@ -254,6 +255,14 @@ function generateClassName({ componentName, subComponentName, variantKey, varian
 	if (layerOptionalPseudoSelector) className = `${className}${layerOptionalPseudoSelector}`;
 	return className.replaceAll(/\s+/g, "-");
 }
+/**
+* Select triggers carry `uds-ring-shadow` and draw focus via the focus-ring tokens.
+* Input wrappers still use `focus-within` border styling, so exclude `.uds-ring` and
+* `.uds-select-field-trigger` descendants from those rules.
+*/
+function getLayerClassSelector(layer, className, componentName, propertyStateSelector) {
+	return componentName === "input" && (layer === "inputWrapperDynamic" || layer === "inputWrapper") && propertyStateSelector.includes("focus-within") ? `.${className}:not(.uds-ring):not(.uds-select-field-trigger)` : `.${className}`;
+}
 const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue, originalPropertyDefinition) => {
 	const { value, type } = schemaStateValue;
 	const propertyConfig = require_properties.configurableProperties[propertyName];
@@ -353,7 +362,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 	for (const propStateStr of orderedStateKeys) {
 		if (!emittableStates.has(propStateStr)) continue;
 		const propertyState = propStateStr;
-		const propertyStateSelector = require_pseudoStateSelectors.getStateSelector(propertyState);
+		let propertyStateSelector = require_pseudoStateSelectors.getStateSelector(propertyState);
+		if (componentName === "selectitem" && propertyState === "focused") propertyStateSelector = ":is(:focus, [data-active-item])";
 		const schemaValueForState = shouldUseExhaustive || layerUsesAtomicStates ? require_resolveSlotByCascade.resolveSlotByCascade(propStateStr, resolutionStates) : propertyStateMap[propertyState];
 		if (!schemaValueForState) continue;
 		if (!shouldUseExhaustive) {
@@ -412,7 +422,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 					layerOptionalPseudoSelector,
 					subComponentName
 				});
-				fullClassName = `.${rootVariantClassName}${propertyStateSelector}.${rootVariantClassNameWithComponentState} .${className}`;
+				const layerClassSelector = getLayerClassSelector(layer, className, componentName, propertyStateSelector);
+				fullClassName = `.${rootVariantClassName}${propertyStateSelector}.${rootVariantClassNameWithComponentState} ${layerClassSelector}`;
 			} else {
 				className = generateClassName({
 					componentName,
@@ -422,7 +433,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 					layerOptionalPseudoSelector,
 					subComponentName
 				});
-				fullClassName = bumpRootSpecificity ? `.${rootVariantClassName}.${rootVariantClassName}${propertyStateSelector} .${className}` : `.${rootVariantClassName}${propertyStateSelector} .${className}`;
+				const layerClassSelector = getLayerClassSelector(layer, className, componentName, propertyStateSelector);
+				fullClassName = bumpRootSpecificity ? `.${rootVariantClassName}.${rootVariantClassName}${propertyStateSelector} ${layerClassSelector}` : `.${rootVariantClassName}${propertyStateSelector} ${layerClassSelector}`;
 			}
 		}
 		const { cssProperties, extendedProperties: extendedPropertiesGetter } = require_properties.configurableProperties[originalPropertyDefinition.name];
@@ -563,8 +575,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 				});
 			}
 		}
+		if (propertyKey === "borderRadius" && cssDeclarations[CSS_BORDER_RADIUS] && (componentName === "paddlenav" && layer === "root" || componentName === "input" && layer === "inputWrapperDynamic")) cssDeclarations[NESTED_BORDER_RADIUS_SIZE_VAR] = cssDeclarations[CSS_BORDER_RADIUS];
 		if (componentName === "paddlenav" && layer === "root") {
-			if (propertyKey === "borderRadius" && cssDeclarations[CSS_BORDER_RADIUS]) cssDeclarations[NESTED_BORDER_RADIUS_SIZE_VAR] = cssDeclarations[CSS_BORDER_RADIUS];
 			if (propertyKey === "borderWidth" && cssDeclarations[CSS_BORDER_WIDTH]) cssDeclarations[NESTED_BORDER_RADIUS_WIDTH_VAR] = cssDeclarations[CSS_BORDER_WIDTH];
 		}
 		if ((componentName === "tabs" || componentName === "tab") && layer === "root") {
@@ -763,7 +775,9 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit, gener
 				const componentState = componentStates[componentStateKey];
 				for (const componentStateOption of componentState.options) {
 					const excludedPseudoStates = require_componentStatePseudoStates.getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption);
+					const excludedLayers = new Set(require_componentStatePseudoStates.getExcludedLayersForComponentStateOption(componentState, componentStateOption));
 					for (const layerKey in componentState.layers) {
+						if (excludedLayers.has(layerKey)) continue;
 						const layer = componentState.layers[layerKey];
 						for (const propertyKey in layer.properties) {
 							const originalPropertyDefinition = layer.properties[propertyKey];
@@ -840,7 +854,9 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit, gener
 					const componentState = componentStates[componentStateKey];
 					for (const componentStateOption of componentState.options) {
 						const excludedPseudoStates = require_componentStatePseudoStates.getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption);
+						const excludedLayers = new Set(require_componentStatePseudoStates.getExcludedLayersForComponentStateOption(componentState, componentStateOption));
 						for (const layerKey in componentState.layers) {
+							if (excludedLayers.has(layerKey)) continue;
 							const layer = componentState.layers[layerKey];
 							for (const propertyKey in layer.properties) {
 								const originalPropertyDefinition = layer.properties[propertyKey];

package/dist/automated-config/dist/utils/index.d.cts

@@ -200,6 +200,7 @@ declare function createComponentStates<T extends {
   label: string;
   options: readonly string[];
   excludePseudoStatesForOptions?: Partial<Record<string, readonly PossibleStates[]>>;
+  excludeLayersForOptions?: Partial<Record<string, readonly string[]>>;
   layers?: {
     root: LayerConfig;
   } & Record<string, LayerConfig>;

package/dist/automated-config/dist/utils/index.d.ts

@@ -200,6 +200,7 @@ declare function createComponentStates<T extends {
   label: string;
   options: readonly string[];
   excludePseudoStatesForOptions?: Partial<Record<string, readonly PossibleStates[]>>;
+  excludeLayersForOptions?: Partial<Record<string, readonly string[]>>;
   layers?: {
     root: LayerConfig;
   } & Record<string, LayerConfig>;

package/dist/automated-config/dist/utils/index.js

@@ -3,7 +3,7 @@ import { BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED,
 import { mapTextVariantFixtureToValue } from "../mapTextVariantFixtureToValue.js";
 import { configurableProperties } from "../properties.js";
 import { INTERACTIVE_ATOMICS, MODIFIER_ATOMICS, comparePriority } from "../types/StateAxis.js";
-import { getExcludedPseudoStatesForComponentStateOption } from "./componentStatePseudoStates.js";
+import { getExcludedLayersForComponentStateOption, getExcludedPseudoStatesForComponentStateOption } from "./componentStatePseudoStates.js";
 import { generateSchemaKey } from "./generateSchemaKey.js";
 import "./canonicalizeStateKey.js";
 import { atomicAndCompoundStateKeys, resolvePropertyStates } from "./resolvePropertyStates.js";
@@ -89,7 +89,8 @@ const COMPONENTS_WITH_SHADOW_BORDERS = [
 const LEGACY_STATE_KEYS = [
 	"disabled",
 	"focused",
-	"focused-keyboard"
+	"focused-keyboard",
+	"selected"
 ];
 /**
 * Enumerates every canonical state key the system supports: rest, every atom,
@@ -253,6 +254,14 @@ function generateClassName({ componentName, subComponentName, variantKey, varian
 	if (layerOptionalPseudoSelector) className = `${className}${layerOptionalPseudoSelector}`;
 	return className.replaceAll(/\s+/g, "-");
 }
+/**
+* Select triggers carry `uds-ring-shadow` and draw focus via the focus-ring tokens.
+* Input wrappers still use `focus-within` border styling, so exclude `.uds-ring` and
+* `.uds-select-field-trigger` descendants from those rules.
+*/
+function getLayerClassSelector(layer, className, componentName, propertyStateSelector) {
+	return componentName === "input" && (layer === "inputWrapperDynamic" || layer === "inputWrapper") && propertyStateSelector.includes("focus-within") ? `.${className}:not(.uds-ring):not(.uds-select-field-trigger)` : `.${className}`;
+}
 const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue, originalPropertyDefinition) => {
 	const { value, type } = schemaStateValue;
 	const propertyConfig = configurableProperties[propertyName];
@@ -352,7 +361,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 	for (const propStateStr of orderedStateKeys) {
 		if (!emittableStates.has(propStateStr)) continue;
 		const propertyState = propStateStr;
-		const propertyStateSelector = getStateSelector(propertyState);
+		let propertyStateSelector = getStateSelector(propertyState);
+		if (componentName === "selectitem" && propertyState === "focused") propertyStateSelector = ":is(:focus, [data-active-item])";
 		const schemaValueForState = shouldUseExhaustive || layerUsesAtomicStates ? resolveSlotByCascade(propStateStr, resolutionStates) : propertyStateMap[propertyState];
 		if (!schemaValueForState) continue;
 		if (!shouldUseExhaustive) {
@@ -411,7 +421,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 					layerOptionalPseudoSelector,
 					subComponentName
 				});
-				fullClassName = `.${rootVariantClassName}${propertyStateSelector}.${rootVariantClassNameWithComponentState} .${className}`;
+				const layerClassSelector = getLayerClassSelector(layer, className, componentName, propertyStateSelector);
+				fullClassName = `.${rootVariantClassName}${propertyStateSelector}.${rootVariantClassNameWithComponentState} ${layerClassSelector}`;
 			} else {
 				className = generateClassName({
 					componentName,
@@ -421,7 +432,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 					layerOptionalPseudoSelector,
 					subComponentName
 				});
-				fullClassName = bumpRootSpecificity ? `.${rootVariantClassName}.${rootVariantClassName}${propertyStateSelector} .${className}` : `.${rootVariantClassName}${propertyStateSelector} .${className}`;
+				const layerClassSelector = getLayerClassSelector(layer, className, componentName, propertyStateSelector);
+				fullClassName = bumpRootSpecificity ? `.${rootVariantClassName}.${rootVariantClassName}${propertyStateSelector} ${layerClassSelector}` : `.${rootVariantClassName}${propertyStateSelector} ${layerClassSelector}`;
 			}
 		}
 		const { cssProperties, extendedProperties: extendedPropertiesGetter } = configurableProperties[originalPropertyDefinition.name];
@@ -562,8 +574,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 				});
 			}
 		}
+		if (propertyKey === "borderRadius" && cssDeclarations[CSS_BORDER_RADIUS] && (componentName === "paddlenav" && layer === "root" || componentName === "input" && layer === "inputWrapperDynamic")) cssDeclarations[NESTED_BORDER_RADIUS_SIZE_VAR] = cssDeclarations[CSS_BORDER_RADIUS];
 		if (componentName === "paddlenav" && layer === "root") {
-			if (propertyKey === "borderRadius" && cssDeclarations[CSS_BORDER_RADIUS]) cssDeclarations[NESTED_BORDER_RADIUS_SIZE_VAR] = cssDeclarations[CSS_BORDER_RADIUS];
 			if (propertyKey === "borderWidth" && cssDeclarations[CSS_BORDER_WIDTH]) cssDeclarations[NESTED_BORDER_RADIUS_WIDTH_VAR] = cssDeclarations[CSS_BORDER_WIDTH];
 		}
 		if ((componentName === "tabs" || componentName === "tab") && layer === "root") {
@@ -762,7 +774,9 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit, gener
 				const componentState = componentStates[componentStateKey];
 				for (const componentStateOption of componentState.options) {
 					const excludedPseudoStates = getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption);
+					const excludedLayers = new Set(getExcludedLayersForComponentStateOption(componentState, componentStateOption));
 					for (const layerKey in componentState.layers) {
+						if (excludedLayers.has(layerKey)) continue;
 						const layer = componentState.layers[layerKey];
 						for (const propertyKey in layer.properties) {
 							const originalPropertyDefinition = layer.properties[propertyKey];
@@ -839,7 +853,9 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit, gener
 					const componentState = componentStates[componentStateKey];
 					for (const componentStateOption of componentState.options) {
 						const excludedPseudoStates = getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption);
+						const excludedLayers = new Set(getExcludedLayersForComponentStateOption(componentState, componentStateOption));
 						for (const layerKey in componentState.layers) {
+							if (excludedLayers.has(layerKey)) continue;
 							const layer = componentState.layers[layerKey];
 							for (const propertyKey in layer.properties) {
 								const originalPropertyDefinition = layer.properties[propertyKey];

package/dist/automated-config/dist/utils/pseudoStateSelectors.cjs

@@ -6,7 +6,8 @@ const require_canonicalizeStateKey = require("./canonicalizeStateKey.cjs");
 const LEGACY_STATE_ATOMS = new Set([
 	"disabled",
 	"focused",
-	"focused-keyboard"
+	"focused-keyboard",
+	"selected"
 ]);
 function isKnownStateAtom(atom) {
 	return require_StateAxis.isAtomicState(atom) || LEGACY_STATE_ATOMS.has(atom);
@@ -64,7 +65,8 @@ const ATOMIC_SELECTORS = {
 	readonly: ":has(:read-only:where(input, textarea))",
 	invalid: ":has([aria-invalid=\"true\"])",
 	"placeholder-shown": ":has(:placeholder-shown)",
-	autofill: ":has(:autofill, :-webkit-autofill)"
+	autofill: ":has(:autofill, :-webkit-autofill)",
+	selected: "[aria-selected=\"true\"]"
 };
 const ATOMIC_DOCS_CLASSES = {
 	hover: "hover",
@@ -78,7 +80,8 @@ const ATOMIC_DOCS_CLASSES = {
 	readonly: "input-readonly",
 	invalid: "has-input-invalid",
 	"placeholder-shown": "has-input-placeholder-shown",
-	autofill: "has-input-autofill"
+	autofill: "has-input-autofill",
+	selected: "aria-selected"
 };
 /**
 * Returns the CSS pseudo-selector string for a state key.

package/dist/automated-config/dist/utils/pseudoStateSelectors.d.cts

@@ -8,7 +8,7 @@ import { AtomicState } from "../types/StateAxis.cjs";
  * unmigrated configs. They aren't composable through `StateAxis`, so the new
  * resolver/StateBuilder never emit them.
  */
-type LegacyStateAtom = 'disabled' | 'focused' | 'focused-keyboard';
+type LegacyStateAtom = 'disabled' | 'focused' | 'focused-keyboard' | 'selected';
 type KnownStateAtom = AtomicState | LegacyStateAtom;
 declare function isKnownStateAtom(atom: string): atom is KnownStateAtom;
 /**

package/dist/automated-config/dist/utils/pseudoStateSelectors.d.ts

@@ -8,7 +8,7 @@ import { AtomicState } from "../types/StateAxis.js";
  * unmigrated configs. They aren't composable through `StateAxis`, so the new
  * resolver/StateBuilder never emit them.
  */
-type LegacyStateAtom = 'disabled' | 'focused' | 'focused-keyboard';
+type LegacyStateAtom = 'disabled' | 'focused' | 'focused-keyboard' | 'selected';
 type KnownStateAtom = AtomicState | LegacyStateAtom;
 declare function isKnownStateAtom(atom: string): atom is KnownStateAtom;
 /**

package/dist/automated-config/dist/utils/pseudoStateSelectors.js

@@ -6,7 +6,8 @@ import { splitStateKey } from "./canonicalizeStateKey.js";
 const LEGACY_STATE_ATOMS = new Set([
 	"disabled",
 	"focused",
-	"focused-keyboard"
+	"focused-keyboard",
+	"selected"
 ]);
 function isKnownStateAtom(atom) {
 	return isAtomicState(atom) || LEGACY_STATE_ATOMS.has(atom);
@@ -64,7 +65,8 @@ const ATOMIC_SELECTORS = {
 	readonly: ":has(:read-only:where(input, textarea))",
 	invalid: ":has([aria-invalid=\"true\"])",
 	"placeholder-shown": ":has(:placeholder-shown)",
-	autofill: ":has(:autofill, :-webkit-autofill)"
+	autofill: ":has(:autofill, :-webkit-autofill)",
+	selected: "[aria-selected=\"true\"]"
 };
 const ATOMIC_DOCS_CLASSES = {
 	hover: "hover",
@@ -78,7 +80,8 @@ const ATOMIC_DOCS_CLASSES = {
 	readonly: "input-readonly",
 	invalid: "has-input-invalid",
 	"placeholder-shown": "has-input-placeholder-shown",
-	autofill: "has-input-autofill"
+	autofill: "has-input-autofill",
+	selected: "aria-selected"
 };
 /**
 * Returns the CSS pseudo-selector string for a state key.

package/dist/components/client/Input/Input.cjs

@@ -147,7 +147,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 			inputSizeInputWrapperDynamic: size,
 			inputVariantInputWrapper: "default",
 			inputVariantValueInputWrapper: !value ? "empty" : "filled"
-		}), "min-w-[200px]", inputWrapperClassName),
+		}), "min-w-[200px]", "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
 		input: require_styles_styler.getStyles({
 			inputSizeInput: size,
 			inputVariantInput: "default",

package/dist/components/client/Input/Input.js

@@ -144,7 +144,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 			inputSizeInputWrapperDynamic: size,
 			inputVariantInputWrapper: "default",
 			inputVariantValueInputWrapper: !value ? "empty" : "filled"
-		}), "min-w-[200px]", inputWrapperClassName),
+		}), "min-w-[200px]", "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
 		input: getStyles({
 			inputSizeInput: size,
 			inputVariantInput: "default",

package/dist/components/client/Menu/Menu.Item.cjs

@@ -66,6 +66,7 @@ const MenuItem = (0, react.forwardRef)(function MenuItem({ active, hideOnClick,
 			},
 			text: {
 				className: require_styles_styler.cx(require_styles_styler.getStyles({
+					menuitemSizeText: "default",
 					menuitemItemVariantText: "default",
 					menuitemItemVariantActiveText: active ? "on" : "off"
 				}), slotProps?.text?.className),

package/dist/components/client/Menu/Menu.Item.js

@@ -64,6 +64,7 @@ const MenuItem = forwardRef(function MenuItem({ active, hideOnClick, slotProps,
 			},
 			text: {
 				className: cx(getStyles({
+					menuitemSizeText: "default",
 					menuitemItemVariantText: "default",
 					menuitemItemVariantActiveText: active ? "on" : "off"
 				}), slotProps?.text?.className),

package/dist/components/client/Menu/Menu.ItemCheckbox.d.cts

@@ -87,6 +87,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "rootProps" | "hideEndIcon" | "active"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts

@@ -88,6 +88,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "rootProps" | "hideEndIcon" | "active"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

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

@@ -0,0 +1,179 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_styles_styler = require("../../../styles/styler.cjs");
+const require_components_Box = require("../../Box.cjs");
+const require_components_VStack = require("../../VStack.cjs");
+const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
+const require_components_client_Select_selectContext = require("./selectContext.cjs");
+const require_components_client_Select_selectFieldStyles = require("./selectFieldStyles.cjs");
+const require_components_client_Select_SelectHelpText = require("./SelectHelpText.cjs");
+const require_components_client_Select_SelectTrigger = require("./SelectTrigger.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lodash_isFunction_js = require("lodash/isFunction.js");
+lodash_isFunction_js = require_runtime.__toESM(lodash_isFunction_js);
+let _ariakit_react = require("@ariakit/react");
+//#region src/components/client/Select/Select.tsx
+const SelectRoot = (0, react.forwardRef)(function SelectRoot({ children, label, helpText, helperTextIcon, placeholder, name, size = "md", disabled, required, hasError, readOnly, width = "full", reduceMotion: forceReduceMotion, startIcon, endIcon, className, style, slotProps }, ref) {
+	const value = (0, _ariakit_react.useStoreState)((0, _ariakit_react.useSelectContext)(), "value");
+	const hasValue = value != null && value !== "";
+	const hasHelpText = Boolean(helpText || helperTextIcon);
+	const uid = `uds-select-${(0, react.useId)()}`;
+	const helpTextId = hasHelpText ? `${uid}-help-text` : void 0;
+	const triggerWrapperRef = (0, react.useRef)(null);
+	const contextValue = (0, react.useMemo)(() => ({
+		size,
+		disabled,
+		readOnly,
+		required,
+		hasError,
+		width,
+		reduceMotion: forceReduceMotion,
+		uid,
+		helpTextId,
+		triggerWrapperRef
+	}), [
+		size,
+		disabled,
+		readOnly,
+		required,
+		hasError,
+		width,
+		forceReduceMotion,
+		uid,
+		helpTextId
+	]);
+	const { className: rootSlotClassName, ...rootSlotProps } = slotProps?.root ?? {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Select_selectContext.SelectFieldContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_VStack.VStack, {
+			width,
+			className: require_styles_styler.cx(require_components_client_Select_selectFieldStyles.getSelectRootClassName({
+				size,
+				hasValue,
+				disabled,
+				className
+			}), rootSlotClassName),
+			style,
+			...rootSlotProps,
+			children: [
+				label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
+					spacingBottom: "2",
+					columnGap: "0.5",
+					alignItems: "flex-end",
+					className: require_components_client_Select_selectFieldStyles.getSelectLabelClassName(size, hasValue),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+						htmlFor: uid,
+						...slotProps?.label,
+						children: (0, lodash_isFunction_js.default)(label) ? label() : label
+					}), required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: require_components_client_Select_selectFieldStyles.getSelectLabelRequiredClassName(hasValue),
+						children: "*"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Select_SelectTrigger.SelectTrigger, {
+					ref,
+					placeholder,
+					name,
+					startIcon,
+					endIcon,
+					disabled,
+					slotProps: slotProps?.trigger
+				}),
+				hasHelpText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Select_SelectHelpText.SelectHelpText, {
+					helpText,
+					helperTextIcon,
+					slotProps: {
+						helperText: slotProps?.helperText,
+						helperTextIcon: slotProps?.helperTextIcon
+					}
+				}),
+				children
+			]
+		})
+	});
+});
+SelectRoot.displayName = "SelectRoot";
+/**
+* **⚙️ A composable Select component**
+*
+* @componentType Client component
+*
+* @description
+* Select lets users pick one value from a list. Compose with `SelectContent` and
+* `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Select, SelectContent, SelectItem } from '@yahoo/uds';
+*
+* <Select label="Country" placeholder="Select a country" defaultValue="us">
+*   <SelectContent>
+*     <SelectItem value="us">United States</SelectItem>
+*     <SelectItem value="ca">Canada</SelectItem>
+*   </SelectContent>
+* </Select>
+* ```
+*/
+const Select = (0, react.forwardRef)(function Select({ children, label, helpText, helperTextIcon, placeholder, name, size, disabled, required, hasError, readOnly, width, reduceMotion, startIcon, endIcon, className, style, slotProps, defaultValue = "", value, setValue: setValueProp, onChange, open: openProp, defaultOpen, setOpen: setOpenProp, ...providerProps }, ref) {
+	const setValue = setValueProp ?? onChange;
+	const isOpenControlled = openProp !== void 0;
+	const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(defaultOpen ?? false);
+	const open = isOpenControlled ? openProp : uncontrolledOpen;
+	const handleSetOpen = (0, react.useCallback)((nextOpen) => {
+		if (readOnly && isOpenControlled) return;
+		if (nextOpen && (readOnly || disabled)) return;
+		if (!isOpenControlled) setUncontrolledOpen(nextOpen);
+		setOpenProp?.(nextOpen);
+	}, [
+		disabled,
+		isOpenControlled,
+		readOnly,
+		setOpenProp
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.SelectProvider, {
+			...value !== void 0 ? {
+				...providerProps,
+				value,
+				setValue,
+				open,
+				setOpen: handleSetOpen
+			} : {
+				...providerProps,
+				defaultValue,
+				open,
+				setOpen: handleSetOpen
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectRoot, {
+				ref,
+				label,
+				helpText,
+				helperTextIcon,
+				placeholder,
+				name,
+				size,
+				disabled,
+				required,
+				hasError,
+				readOnly,
+				width,
+				reduceMotion,
+				startIcon,
+				endIcon,
+				className,
+				style,
+				slotProps,
+				children
+			})
+		})
+	});
+});
+Select.displayName = "Select";
+//#endregion
+exports.Select = Select;

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

@@ -0,0 +1,55 @@
+
+import { UniversalSelectProps } from "../../../types/dist/index.cjs";
+import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
+import { SelectTriggerProps } from "./SelectTrigger.cjs";
+import * as _$react from "react";
+import { SelectProviderProps } from "@ariakit/react";
+
+//#region src/components/client/Select/Select.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface SelectProps extends Pick<UniversalSelectProps, 'label' | 'disabled' | 'required' | 'helpText' | 'helperTextIcon' | 'hasError' | 'size' | 'startIcon' | 'endIcon' | 'reduceMotion' | 'readOnly' | 'width'>, Omit<SelectProviderProps, 'children' | 'setValue'> {
+  children?: React.ReactNode;
+  /** Placeholder text shown when no value is selected. */
+  placeholder?: string;
+  /** Native form field name. Renders a hidden `<select>` for form submission. */
+  name?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  /** Called when the selected value changes. Alias for Ariakit `setValue`. */
+  onChange?: (value: string) => void;
+  setValue?: SelectProviderProps['setValue'];
+  slotProps?: {
+    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    label?: Partial<React.LabelHTMLAttributes<HTMLLabelElement> & DataAttributes>;
+    trigger?: SelectTriggerProps['slotProps'];
+    helperText?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+    helperTextIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+/**
+ * **⚙️ A composable Select component**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Select lets users pick one value from a list. Compose with `SelectContent` and
+ * `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Select, SelectContent, SelectItem } from '@yahoo/uds';
+ *
+ * <Select label="Country" placeholder="Select a country" defaultValue="us">
+ *   <SelectContent>
+ *     <SelectItem value="us">United States</SelectItem>
+ *     <SelectItem value="ca">Canada</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ */
+declare const Select: _$react.ForwardRefExoticComponent<SelectProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Select, type SelectProps };