@yahoo/uds 3.157.0 → 3.158.0

package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/index.js

@@ -3,12 +3,13 @@ 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 { 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 { getStateDocsClass, getStateSelector } from "./pseudoStateSelectors.js";
 import { resolveSlotByCascade } from "./resolveSlotByCascade.js";
 import { isFunction, mergeWith } from "lodash-es";
@@ -74,7 +75,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,
@@ -115,15 +117,9 @@ function buildStateRecord(transform) {
 }
 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.
@@ -244,6 +240,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];
@@ -305,8 +309,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,
@@ -335,7 +347,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) {
@@ -394,7 +407,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,
@@ -404,7 +418,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];
@@ -441,6 +456,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";
@@ -449,17 +486,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
 				});
@@ -501,8 +560,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") {
@@ -638,7 +697,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) {
@@ -669,14 +728,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) {
@@ -692,14 +752,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];
@@ -720,7 +783,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 								currentStyles: styles,
 								previewOptions,
 								excludedPseudoStates,
-								emit
+								emit,
+								buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 							});
 							styles = deepMerge(styles, declarations);
 						}
@@ -747,7 +811,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 			theme,
 			previewOptions,
 			emit,
-			currentStyles: styles
+			currentStyles: styles,
+			buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 		});
 	}
 	if (config.subComponents) {
@@ -766,14 +831,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];
@@ -795,7 +863,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 									currentStyles: styles,
 									previewOptions,
 									excludedPseudoStates,
-									emit
+									emit,
+									buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 								});
 								styles = deepMerge(styles, declarations);
 							}
@@ -824,7 +893,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 				theme,
 				previewOptions,
 				emit,
-				currentStyles: styles
+				currentStyles: styles,
+				buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 			});
 		}
 	}
@@ -858,8 +928,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;
@@ -940,6 +1010,6 @@ 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);
 //#endregion
 export { generateStyles };

package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/pseudoStateSelectors.cjs

@@ -7,7 +7,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);
@@ -65,7 +66,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",
@@ -79,7 +81,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/tailwind-internal/dist/packages/automated-config/dist/utils/pseudoStateSelectors.js

@@ -7,7 +7,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);
@@ -65,7 +66,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",
@@ -79,7 +81,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.