@yahoo/uds 3.157.0 → 3.158.0

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

@@ -12,12 +12,16 @@ import { getConfigDefaultValue, isConfigDefaultValue } from "./defaults.js";
 import { generateDefaultClassName } from "./generateDefaultClassName.js";
 import { generateKeyFromFlatConfigPath } from "./generateKeyFromFlatConfigPath.js";
 import { generateSchemaKey } from "./generateSchemaKey.js";
+import { IconButtonMatchButtonHeightConfig, IconButtonMatchButtonHeightSize, disableIconButtonMatchButtonHeight, enableIconButtonMatchButtonHeight, isIconButtonMatchButtonHeightEnabled } from "./iconButtonMatchButtonHeight.js";
+import { ButtonControlSchema, SHARED_BUTTON_ICONBUTTON_SIZES, applyButtonControlHeightDeclarations, applyIconButtonControlHeightDeclarations, getButtonContentLineHeight, getButtonControlContentSize, getButtonControlHeight, getButtonIconSizeVar, getIconButtonControlHeight } from "./getButtonControlHeight.js";
+import { getButtonControlHeightPx, getIconButtonControlHeightPx, getIconButtonOnlyControlHeightPx, syncButtonControlHeightVarForSize, syncIconButtonControlHeightVarForSize, syncIconButtonOnlyControlHeightVarForSize } from "./getButtonControlHeightPx.js";
 import { getConfigComponentVariant } from "./getConfigComponentVariant.js";
 import { getConfigVariantComponentStates, getConfigVariantComponentStatesMatrix } from "./getConfigVariantComponentStatesMatrix.js";
 import { getConfigVariantProperties } from "./getConfigVariantProperties.js";
 import { getConfigVariantPseudoStates } from "./getConfigVariantPseudoStates.js";
 import { getConfigVariants } from "./getConfigVariants.js";
 import { PaginationWidthConfig, getPaginationControlWidthPx, syncPaginationWidthVarForSize } from "./getPaginationControlWidthPx.js";
+import { isConfiguratorPropertyVisible } from "./isConfiguratorPropertyVisible.js";
 import { getStateDocsClass, getStateSelector, isKnownStateAtom } from "./pseudoStateSelectors.js";
 import { resolvePropertyStates } from "./resolvePropertyStates.js";
 import { PropertyStates, StateSlot, propertyUsesPerStateEnabled, resolveSlotByCascade } from "./resolveSlotByCascade.js";
@@ -97,7 +101,8 @@ declare function generateDeclaration({
   excludedPseudoStates,
   emit,
   fallbackStateMap,
-  bumpRootSpecificity
+  bumpRootSpecificity,
+  buttonHeightReferenceSchema
 }: {
   componentName: string;
   subComponentName?: string;
@@ -121,10 +126,13 @@ declare function generateDeclaration({
   emit?: EmitMode;
   fallbackStateMap?: VariableState;
   bumpRootSpecificity?: boolean;
+  buttonHeightReferenceSchema?: ButtonControlSchema;
 }): Record<string, Record<string, string>>;
 declare function generateConfigStyles<C extends ComponentConfig>(config: C, schema: ComponentSchema<ComponentConfig>, theme: ThemeFn, previewOptions?: {
-  generatePseudoStateClassModifier: boolean;
-}, emit?: EmitMode): Record<string, Record<string, string>>;
+  generatePseudoStateClassModifier?: boolean;
+}, emit?: EmitMode, generateStylesContext?: {
+  buttonHeightReferenceSchema?: ButtonControlSchema;
+}): Record<string, Record<string, string>>;
 /**
  * Public entry point. Generates a component's CSS, emitting each declared state
  * as its own rule (one selector per rule) so the cascade is carried entirely by
@@ -143,6 +151,8 @@ declare function generateConfigStyles<C extends ComponentConfig>(config: C, sche
 declare const generateStyles: (config: ComponentConfig, schema: ComponentSchema<ComponentConfig>, theme: ThemeFn, previewOptions: {
   generatePseudoStateClassModifier: boolean;
   emit?: EmitMode;
+}, generateStylesContext?: {
+  buttonHeightReferenceSchema?: ButtonControlSchema;
 }) => Record<string, Record<string, string>>;
 declare function createConfigurableProperty<C extends ConfigurablePropertiesName, O extends string, T extends (typeof configurableProperties)[C]['possibleFixtures'], V extends readonly (readonly unknown[])[] = readonly (readonly unknown[])[]>(prop: {
   name: C;
@@ -150,7 +160,8 @@ declare function createConfigurableProperty<C extends ConfigurablePropertiesName
   values: V;
   defaults: { [K in O]: V[number][number] | (Extract<T[number], ArbitraryFixtures> extends never ? never : InferArbitraryType<Extract<T[number], ArbitraryFixtures>>) };
   label: string;
-  skipRestState?: boolean; /** @deprecated Prefer layer-level `atomicStates` + `excludeAtomics`. */
+  skipRestState?: boolean;
+  optionalInDefaultSchema?: boolean; /** @deprecated Prefer layer-level `atomicStates` + `excludeAtomics`. */
   pseudoStates?: PossibleStates[];
   excludeAtomics?: AtomicState[];
   supportsCustom?: boolean;
@@ -189,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,13 +3,16 @@ 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";
 import { isVariantConfigWithComponentStates, isVariantConfigWithProperties } from "./variantConfigGuards.js";
 import { findFixtureTypeForValue } from "./buildConfigSchema.js";
 import { generateDefaultClassName } from "./generateDefaultClassName.js";
+import { applyButtonControlHeightDeclarations, applyIconButtonControlHeightDeclarations, getButtonContentLineHeight } from "./getButtonControlHeight.js";
+import "./iconButtonMatchButtonHeight.js";
+import "./getButtonControlHeightPx.js";
 import { getStateDocsClass, getStateSelector } from "./pseudoStateSelectors.js";
 import { resolveSlotByCascade } from "./resolveSlotByCascade.js";
 import "./cartesianProduct.js";
@@ -23,6 +26,7 @@ import "./getConfigVariantProperties.js";
 import "./getConfigVariantPseudoStates.js";
 import "./getConfigVariants.js";
 import "./getPaginationControlWidthPx.js";
+import "./isConfiguratorPropertyVisible.js";
 import { isFunction, mergeWith } from "lodash-es";
 //#region ../automated-config/dist/utils/index.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
@@ -85,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,
@@ -126,15 +131,9 @@ function buildStateRecord(transform) {
 }
 const statePseudoMapDocsMode = buildStateRecord(getStateDocsClass);
 /**
-* Generates button line-height with icon size minimum.
-* Ensures button line-height is at least as tall as the icon to prevent clipping.
-* @returns Enhanced line-height CSS value with max(), or original value if icon size unavailable
+* Layout line-height for button root: icon size only (not textVariant line-height).
+* @see getButtonContentLineHeight
 */
-function getButtonLineHeightWithIconMinimum({ lineHeight, schema, iconLayerKey, state, theme }) {
-	const iconSizeValue = schema.variables?.[iconLayerKey]?.size?.[state]?.value;
-	if (iconSizeValue) return `max(${lineHeight}, ${theme(configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue))})`;
-	return lineHeight;
-}
 /**
 * Shared pagination control content size: max(icon size, text line-height).
 * Keeps page numbers and prev/next icons vertically centered when typography exceeds icon height.
@@ -255,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];
@@ -316,8 +323,16 @@ function selectiveEmittedStates(stateMap, orderedStateKeys, emittableStates) {
 	}
 	return emitted;
 }
-function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, declaredStates, layerUsesAtomicStates, theme, currentStyles, previewOptions, excludedPseudoStates = [], emit, fallbackStateMap, bumpRootSpecificity }) {
+function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, declaredStates, layerUsesAtomicStates, theme, currentStyles, previewOptions, excludedPseudoStates = [], emit, fallbackStateMap, bumpRootSpecificity, buttonHeightReferenceSchema }) {
 	const shouldUseExhaustive = (emit ?? "exhaustive") === "exhaustive" && layerUsesAtomicStates;
+	const { cssProperties: configuredCssProperties, extendedProperties: configuredExtendedGetter } = configurableProperties[originalPropertyDefinition.name];
+	const configuredExtendedProperties = isFunction(configuredExtendedGetter) ? configuredExtendedGetter({
+		componentName,
+		subComponentName,
+		layer,
+		propertyKey
+	}) : configuredExtendedGetter;
+	if (!(typeof configuredCssProperties === "string" && configuredCssProperties.length > 0 || Array.isArray(configuredCssProperties) && configuredCssProperties.length > 0 || Array.isArray(configuredExtendedProperties) && configuredExtendedProperties.length > 0)) return {};
 	const schemaKey = generateSchemaKey({
 		variantKey,
 		variantValue,
@@ -346,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) {
@@ -405,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,
@@ -415,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];
@@ -452,6 +470,28 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 		*/
 		if (componentName === "button" && layer === "root") {
 			if (propertyKey === CSS_GAP) cssDeclarations[BUTTON_GAP_VAR] = cssDeclarations[CSS_GAP];
+			if (propertyKey === "spacingVertical") {
+				const paddingVertical = cssDeclarations["padding-top"];
+				if (paddingVertical) applyButtonControlHeightDeclarations({
+					cssDeclarations,
+					paddingVertical,
+					schema,
+					rootLayerKey: generateSchemaKey({
+						variantKey,
+						variantValue,
+						layer: "root",
+						subComponentName
+					}),
+					iconLayerKey: generateSchemaKey({
+						variantKey,
+						variantValue,
+						layer: "icon",
+						subComponentName
+					}),
+					state: propertyState,
+					theme
+				});
+			}
 			if (propertyKey === "scaleEffect" && propertyState === "hover") {
 				const rootClassName = `.${className}`;
 				const renderValue = (schemaValue) => configurableProperties.scaleEffect.customValueRenderer?.(schemaValue, schema, () => "") ?? "1";
@@ -460,17 +500,39 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 				if (propertyStateMap.hover) styles[rootClassName][BUTTON_SCALE_EFFECT_HOVER] = renderValue(propertyStateMap.hover);
 				if (propertyStateMap.pressed) styles[rootClassName][BUTTON_SCALE_EFFECT_PRESSED] = renderValue(propertyStateMap.pressed);
 			}
-			if (cssDeclarations[CSS_LINE_HEIGHT]) {
-				const iconLayerKey = generateSchemaKey({
+			if (cssDeclarations[CSS_LINE_HEIGHT]) cssDeclarations[CSS_LINE_HEIGHT] = getButtonContentLineHeight({
+				schema,
+				rootLayerKey: generateSchemaKey({
+					variantKey,
+					variantValue,
+					layer: "root",
+					subComponentName
+				}),
+				iconLayerKey: generateSchemaKey({
 					variantKey,
 					variantValue,
 					layer: "icon",
 					subComponentName
-				});
-				cssDeclarations[CSS_LINE_HEIGHT] = getButtonLineHeightWithIconMinimum({
-					lineHeight: cssDeclarations[CSS_LINE_HEIGHT],
-					schema,
-					iconLayerKey,
+				}),
+				state: propertyState,
+				theme
+			});
+		}
+		if (componentName === "iconbutton" && layer === "root") {
+			if (propertyKey === "spacing") {
+				const paddingVertical = cssDeclarations[CSS_PADDING];
+				if (paddingVertical) applyIconButtonControlHeightDeclarations({
+					cssDeclarations,
+					paddingVertical,
+					iconButtonSchema: schema,
+					buttonHeightReferenceSchema,
+					variantValue,
+					iconLayerKey: generateSchemaKey({
+						variantKey,
+						variantValue,
+						layer: "icon",
+						subComponentName
+					}),
 					state: propertyState,
 					theme
 				});
@@ -512,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") {
@@ -649,7 +711,7 @@ function emitSchemaOverrideStyles({ componentName, subComponentName, variantKey,
 * layers express the variant's universal baseline, with per-state overrides
 * winning via class-compound specificity).
 */
-function emitUniversalLayers({ componentName, subComponentName, variantKey, variantOption, layers, schema, theme, previewOptions, emit, currentStyles, bumpRootSpecificity }) {
+function emitUniversalLayers({ componentName, subComponentName, variantKey, variantOption, layers, schema, theme, previewOptions, emit, currentStyles, bumpRootSpecificity, buttonHeightReferenceSchema }) {
 	let styles = currentStyles;
 	const variables = schema.variables;
 	for (const layerKey in layers) {
@@ -680,14 +742,15 @@ function emitUniversalLayers({ componentName, subComponentName, variantKey, vari
 				currentStyles: styles,
 				previewOptions,
 				emit,
-				bumpRootSpecificity
+				bumpRootSpecificity,
+				buttonHeightReferenceSchema
 			});
 			styles = deepMerge(styles, declarations);
 		}
 	}
 	return styles;
 }
-function generateConfigStyles(config, schema, theme, previewOptions, emit) {
+function generateConfigStyles(config, schema, theme, previewOptions, emit, generateStylesContext) {
 	const componentName = config.label.toLowerCase();
 	let styles = {};
 	for (const variantKey in config.variants) {
@@ -703,14 +766,17 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 				previewOptions,
 				emit,
 				currentStyles: styles,
-				bumpRootSpecificity: true
+				bumpRootSpecificity: true,
+				buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 			});
 			const componentStates = variantConfig.componentStates;
 			for (const componentStateKey in componentStates) {
 				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];
@@ -731,7 +797,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 								currentStyles: styles,
 								previewOptions,
 								excludedPseudoStates,
-								emit
+								emit,
+								buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 							});
 							styles = deepMerge(styles, declarations);
 						}
@@ -758,7 +825,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 			theme,
 			previewOptions,
 			emit,
-			currentStyles: styles
+			currentStyles: styles,
+			buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 		});
 	}
 	if (config.subComponents) {
@@ -777,14 +845,17 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 					previewOptions,
 					emit,
 					currentStyles: styles,
-					bumpRootSpecificity: true
+					bumpRootSpecificity: true,
+					buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 				});
 				const componentStates = variantConfig.componentStates;
 				for (const componentStateKey in componentStates) {
 					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];
@@ -806,7 +877,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 									currentStyles: styles,
 									previewOptions,
 									excludedPseudoStates,
-									emit
+									emit,
+									buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 								});
 								styles = deepMerge(styles, declarations);
 							}
@@ -835,7 +907,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 				theme,
 				previewOptions,
 				emit,
-				currentStyles: styles
+				currentStyles: styles,
+				buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 			});
 		}
 	}
@@ -869,8 +942,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 * @param previewOptions - Options for generating preview mode class modifiers
 * @returns CSS styles object with grouped selectors for default aliases
 */
-const generateStylesInner = (config, schema, theme, previewOptions) => {
-	const styles = generateConfigStyles(config, schema, theme, previewOptions, previewOptions.emit ?? "exhaustive");
+const generateStylesInner = (config, schema, theme, previewOptions, generateStylesContext) => {
+	const styles = generateConfigStyles(config, schema, theme, previewOptions, previewOptions.emit ?? "exhaustive", generateStylesContext);
 	if (!config.variants && !config.subComponents) return styles;
 	const componentName = config.label.toLowerCase();
 	if (componentName !== "button" && componentName !== "iconbutton") return styles;
@@ -951,7 +1024,7 @@ const generateStylesInner = (config, schema, theme, previewOptions) => {
 * list, so minifiers leave their specificity intact. (gzip already collapses the
 * repeated declaration blocks, so the shipped-size cost is minimal.)
 */
-const generateStyles = (config, schema, theme, previewOptions) => generateStylesInner(config, schema, theme, previewOptions);
+const generateStyles = (config, schema, theme, previewOptions, generateStylesContext) => generateStylesInner(config, schema, theme, previewOptions, generateStylesContext);
 /**
 * Throws if `values` contains a duplicate entry. Runs at config-import time so
 * a typo like `atomicStates: ['hover', 'hover']` fails the UDS build instead

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

@@ -0,0 +1,15 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region ../automated-config/dist/utils/isConfiguratorPropertyVisible.js
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+/**
+* Opt-in schema properties (`optionalInDefaultSchema`) are written at runtime
+* (e.g. IconButton `controlHeight` when match-button-height is enabled) for
+* CSS/Figma sync — not for direct editing in the configurator. Hide them so the
+* sidebar never calls `getConfigPseudoStateVariables` on slots that may exist
+* on `branch.config` before `resolvedConfig` catches up.
+*/
+function isConfiguratorPropertyVisible(_config, _componentName, _variableKey, _propertyKey, property) {
+	return property.optionalInDefaultSchema !== true;
+}
+//#endregion
+exports.isConfiguratorPropertyVisible = isConfiguratorPropertyVisible;

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

@@ -0,0 +1,20 @@
+
+import { UniversalTokensConfigAuto } from "../generated/universalTokensConfigAuto.cjs";
+
+//#region ../automated-config/dist/utils/isConfiguratorPropertyVisible.d.ts
+//#region src/utils/isConfiguratorPropertyVisible.d.ts
+type ConfigWithComponentVariables = { [K in keyof UniversalTokensConfigAuto]?: {
+  variables?: Record<string, Record<string, unknown>>;
+} };
+/**
+ * Opt-in schema properties (`optionalInDefaultSchema`) are written at runtime
+ * (e.g. IconButton `controlHeight` when match-button-height is enabled) for
+ * CSS/Figma sync — not for direct editing in the configurator. Hide them so the
+ * sidebar never calls `getConfigPseudoStateVariables` on slots that may exist
+ * on `branch.config` before `resolvedConfig` catches up.
+ */
+declare function isConfiguratorPropertyVisible(_config: Readonly<ConfigWithComponentVariables>, _componentName: keyof UniversalTokensConfigAuto, _variableKey: string, _propertyKey: string, property: {
+  optionalInDefaultSchema?: boolean;
+}): boolean; //#endregion
+//#endregion
+export { isConfiguratorPropertyVisible };

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

@@ -0,0 +1,20 @@
+
+import { UniversalTokensConfigAuto } from "../generated/universalTokensConfigAuto.js";
+
+//#region ../automated-config/dist/utils/isConfiguratorPropertyVisible.d.ts
+//#region src/utils/isConfiguratorPropertyVisible.d.ts
+type ConfigWithComponentVariables = { [K in keyof UniversalTokensConfigAuto]?: {
+  variables?: Record<string, Record<string, unknown>>;
+} };
+/**
+ * Opt-in schema properties (`optionalInDefaultSchema`) are written at runtime
+ * (e.g. IconButton `controlHeight` when match-button-height is enabled) for
+ * CSS/Figma sync — not for direct editing in the configurator. Hide them so the
+ * sidebar never calls `getConfigPseudoStateVariables` on slots that may exist
+ * on `branch.config` before `resolvedConfig` catches up.
+ */
+declare function isConfiguratorPropertyVisible(_config: Readonly<ConfigWithComponentVariables>, _componentName: keyof UniversalTokensConfigAuto, _variableKey: string, _propertyKey: string, property: {
+  optionalInDefaultSchema?: boolean;
+}): boolean; //#endregion
+//#endregion
+export { isConfiguratorPropertyVisible };

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

@@ -0,0 +1,15 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region ../automated-config/dist/utils/isConfiguratorPropertyVisible.js
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+/**
+* Opt-in schema properties (`optionalInDefaultSchema`) are written at runtime
+* (e.g. IconButton `controlHeight` when match-button-height is enabled) for
+* CSS/Figma sync — not for direct editing in the configurator. Hide them so the
+* sidebar never calls `getConfigPseudoStateVariables` on slots that may exist
+* on `branch.config` before `resolvedConfig` catches up.
+*/
+function isConfiguratorPropertyVisible(_config, _componentName, _variableKey, _propertyKey, property) {
+	return property.optionalInDefaultSchema !== true;
+}
+//#endregion
+export { isConfiguratorPropertyVisible };

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/Button.cjs

@@ -146,7 +146,7 @@ const Button = (0, react.forwardRef)(function Button({ size, variant, startIcon,
 			className: require_styles_styler.cx([
 				"uds-ring",
 				"uds-hit-target",
-				"inline-flex overflow-hidden justify-center items-center whitespace-nowrap select-none",
+				"inline-flex max-w-full overflow-hidden justify-center items-center whitespace-nowrap select-none",
 				"[transform-origin:center]",
 				"[backface-visibility:hidden]",
 				"[transition-property:color,background-color,border-color,box-shadow,text-decoration-color,fill,stroke]",
@@ -161,14 +161,14 @@ const Button = (0, react.forwardRef)(function Button({ size, variant, startIcon,
 				className
 			])
 		}),
-		iconContainer: "flex overflow-clip uds-button-icon-container",
+		iconContainer: "flex shrink-0 overflow-clip uds-button-icon-container",
 		icon: require_styles_styler.getStyles({ className: require_styles_styler.cx([iconSizeClass, iconVariantClass]) }),
 		loadingIcon: require_styles_styler.getStyles({ className: require_styles_styler.cx([
 			"animate-spin",
 			iconSizeClass,
 			iconVariantClass
 		]) }),
-		content: require_styles_styler.cx(["truncate"])
+		content: require_styles_styler.cx(["min-w-0 truncate"])
 	}), [
 		className,
 		disableEffects,

package/dist/components/client/Button.js

@@ -143,7 +143,7 @@ const Button = forwardRef(function Button({ size, variant, startIcon, endIcon, i
 			className: cx([
 				"uds-ring",
 				"uds-hit-target",
-				"inline-flex overflow-hidden justify-center items-center whitespace-nowrap select-none",
+				"inline-flex max-w-full overflow-hidden justify-center items-center whitespace-nowrap select-none",
 				"[transform-origin:center]",
 				"[backface-visibility:hidden]",
 				"[transition-property:color,background-color,border-color,box-shadow,text-decoration-color,fill,stroke]",
@@ -158,14 +158,14 @@ const Button = forwardRef(function Button({ size, variant, startIcon, endIcon, i
 				className
 			])
 		}),
-		iconContainer: "flex overflow-clip uds-button-icon-container",
+		iconContainer: "flex shrink-0 overflow-clip uds-button-icon-container",
 		icon: getStyles({ className: cx([iconSizeClass, iconVariantClass]) }),
 		loadingIcon: getStyles({ className: cx([
 			"animate-spin",
 			iconSizeClass,
 			iconVariantClass
 		]) }),
-		content: cx(["truncate"])
+		content: cx(["min-w-0 truncate"])
 	}), [
 		className,
 		disableEffects,

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),