@yahoo/uds 3.157.0 → 3.158.0

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

@@ -0,0 +1,122 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { BUTTON_CONTROL_HEIGHT_VAR } from "../../../css-tokens/dist/index.js";
+import { mapTextVariantFixtureToValue } from "../mapTextVariantFixtureToValue.js";
+import { configurableProperties } from "../properties.js";
+import { isIconButtonMatchButtonHeightEnabled } from "./iconButtonMatchButtonHeight.js";
+//#region ../automated-config/dist/utils/getButtonControlHeight.js
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+/** Sizes where IconButton control height should match Button. */
+const SHARED_BUTTON_ICONBUTTON_SIZES = new Set([
+	"xs",
+	"sm",
+	"md",
+	"lg"
+]);
+function getButtonIconSizeVar({ schema, iconLayerKey, state, theme }) {
+	const iconSizeValue = schema.variables?.[iconLayerKey]?.size?.[state]?.value;
+	if (typeof iconSizeValue === "string" && iconSizeValue) return theme(configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue));
+}
+/**
+* Button content box: max(icon size, text line-height).
+* Matches Figma auto-layout and keeps IconButton height aligned with Button.
+*/
+function getButtonControlContentSize({ schema, rootLayerKey, iconLayerKey, state, theme }) {
+	const iconSizeVar = getButtonIconSizeVar({
+		schema,
+		iconLayerKey,
+		state,
+		theme
+	});
+	const textVariantValue = schema.variables?.[rootLayerKey]?.textVariant?.[state]?.value;
+	if (iconSizeVar && typeof textVariantValue === "string" && textVariantValue) return `max(${iconSizeVar}, ${theme(mapTextVariantFixtureToValue("lineHeight")("textVariants", textVariantValue))})`;
+	if (iconSizeVar) return iconSizeVar;
+}
+/** `round(up, …, 1px)` matches Math.ceil in getButtonControlHeightPx and Figma hug height. */
+function formatControlHeightCalc(calcExpression) {
+	return `round(up, ${calcExpression}, 1px)`;
+}
+/**
+* Button control height: vertical padding on both sides plus max(icon size, text line-height).
+*/
+function getButtonControlHeight({ paddingVertical, schema, rootLayerKey, iconLayerKey, state, theme }) {
+	const contentSize = getButtonControlContentSize({
+		schema,
+		rootLayerKey,
+		iconLayerKey,
+		state,
+		theme
+	});
+	if (!contentSize) return;
+	return formatControlHeightCalc(`calc(2 * ${paddingVertical} + ${contentSize})`);
+}
+/**
+* IconButton control height: uniform padding plus icon size only (no typography).
+*/
+function getIconButtonControlHeight({ paddingVertical, schema, iconLayerKey, state, theme }) {
+	const iconSizeVar = getButtonIconSizeVar({
+		schema,
+		iconLayerKey,
+		state,
+		theme
+	});
+	if (!iconSizeVar) return;
+	return formatControlHeightCalc(`calc(2 * ${paddingVertical} + ${iconSizeVar})`);
+}
+/**
+* Layout line-height for button root: max(icon size, text line-height).
+*/
+function getButtonContentLineHeight({ schema, rootLayerKey, iconLayerKey, state, theme }) {
+	return getButtonControlContentSize({
+		schema,
+		rootLayerKey,
+		iconLayerKey,
+		state,
+		theme
+	}) ?? "1em";
+}
+function applyButtonControlHeightDeclarations({ cssDeclarations, paddingVertical, schema, rootLayerKey, iconLayerKey, state, theme }) {
+	const controlHeight = rootLayerKey ? getButtonControlHeight({
+		paddingVertical,
+		schema,
+		rootLayerKey,
+		iconLayerKey,
+		state,
+		theme
+	}) : getIconButtonControlHeight({
+		paddingVertical,
+		schema,
+		iconLayerKey,
+		state,
+		theme
+	});
+	if (controlHeight) {
+		cssDeclarations[BUTTON_CONTROL_HEIGHT_VAR] = controlHeight;
+		cssDeclarations.height = `var(${BUTTON_CONTROL_HEIGHT_VAR})`;
+	}
+}
+function applyIconButtonSquareDimensions(cssDeclarations) {
+	if (cssDeclarations[BUTTON_CONTROL_HEIGHT_VAR]) cssDeclarations.width = `var(${BUTTON_CONTROL_HEIGHT_VAR})`;
+}
+/**
+* IconButton height for xs–lg mirrors Button (padding + max(icon, line-height)).
+* xl uses icon-only height from IconButton tokens.
+*/
+function applyIconButtonControlHeightDeclarations({ cssDeclarations, paddingVertical, iconButtonSchema, buttonHeightReferenceSchema, variantValue, iconLayerKey: _iconLayerKey, state, theme }) {
+	if (buttonHeightReferenceSchema && SHARED_BUTTON_ICONBUTTON_SIZES.has(variantValue) && isIconButtonMatchButtonHeightEnabled(iconButtonSchema, variantValue)) {
+		const buttonRootLayerKey = `size/${variantValue}/root`;
+		const buttonIconLayerKey = `size/${variantValue}/icon`;
+		const buttonSpacingValue = buttonHeightReferenceSchema.variables?.[buttonRootLayerKey]?.spacingVertical?.[state]?.value;
+		applyButtonControlHeightDeclarations({
+			cssDeclarations,
+			paddingVertical: typeof buttonSpacingValue === "string" && buttonSpacingValue ? theme(configurableProperties.spacingVertical.twThemePath("spacingAliases", buttonSpacingValue)) : paddingVertical,
+			schema: buttonHeightReferenceSchema,
+			rootLayerKey: buttonRootLayerKey,
+			iconLayerKey: buttonIconLayerKey,
+			state,
+			theme
+		});
+		applyIconButtonSquareDimensions(cssDeclarations);
+	}
+}
+//#endregion
+export { SHARED_BUTTON_ICONBUTTON_SIZES, applyButtonControlHeightDeclarations, applyIconButtonControlHeightDeclarations, getButtonContentLineHeight, getButtonControlContentSize, getButtonControlHeight, getButtonIconSizeVar, getIconButtonControlHeight };

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

@@ -0,0 +1,114 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../../../fixtures/dist/index.cjs");
+const require_iconButtonMatchButtonHeight = require("./iconButtonMatchButtonHeight.cjs");
+let _yahoo_uds_icons_tokens = require("@yahoo/uds-icons/tokens");
+let lodash_es = require("lodash-es");
+//#region ../automated-config/dist/utils/getButtonControlHeightPx.js
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+const SHARED_BUTTON_ICONBUTTON_SIZES = new Set([
+	"xs",
+	"sm",
+	"md",
+	"lg"
+]);
+function resolveSpacingPx(config, alias) {
+	if (!alias) return 0;
+	const scaleValue = (0, lodash_es.get)(config, [
+		"scaleMode",
+		"large",
+		"spacing",
+		alias.replace(".", "_")
+	]);
+	if (typeof scaleValue === "number") return scaleValue;
+	return require_index.spacingMap[alias] ?? 0;
+}
+function resolveTypographyPx(config, textVariant, property) {
+	if (!textVariant) return 0;
+	const typographyConfig = config.typography[textVariant];
+	if (!typographyConfig?.[property]) return 0;
+	const defaultBreakpoint = config.globalDefaults.breakpoint;
+	const value = defaultBreakpoint === "base" ? typographyConfig[property].base : typographyConfig[property].breakpoints[defaultBreakpoint];
+	if (typeof value === "number") return value;
+	if (value && typeof value === "object" && "value" in value) return value.value;
+	return 0;
+}
+/** Ceil fractional totals so Figma-bound controlHeight matches auto-layout hug (e.g. xs + ui3 15.4lh → 28). */
+function snapControlHeightPx(value) {
+	return Math.ceil(value);
+}
+/** Pixel control height for Button: padding + max(icon size, text line-height). */
+function getButtonControlHeightPx(config, size) {
+	const button = config.button;
+	if (!button?.variables) return 0;
+	const layerPrefix = `size/${size}`;
+	const paddingAlias = button.variables[`${layerPrefix}/root`]?.spacingVertical?.rest?.value;
+	const iconSizeAlias = button.variables[`${layerPrefix}/icon`]?.size?.rest?.value;
+	const textVariant = button.variables[`${layerPrefix}/root`]?.textVariant?.rest?.value;
+	const padding = resolveSpacingPx(config, paddingAlias);
+	const iconSize = _yahoo_uds_icons_tokens.ICON_SIZE_MAP[iconSizeAlias ?? "sm"] ?? 16;
+	const lineHeight = resolveTypographyPx(config, textVariant, "lineHeight");
+	return snapControlHeightPx(padding * 2 + Math.max(iconSize, lineHeight || iconSize));
+}
+/** Pixel control height for IconButton: uniform padding plus icon size only. */
+function getIconButtonOnlyControlHeightPx(config, size) {
+	const iconButton = config.iconButton;
+	if (!iconButton?.variables) return 0;
+	const layerPrefix = `size/${size}`;
+	const paddingAlias = iconButton.variables[`${layerPrefix}/root`]?.spacing?.rest?.value;
+	const iconSizeAlias = iconButton.variables[`${layerPrefix}/icon`]?.size?.rest?.value;
+	const padding = resolveSpacingPx(config, paddingAlias);
+	const iconSize = _yahoo_uds_icons_tokens.ICON_SIZE_MAP[iconSizeAlias ?? "sm"] ?? 16;
+	return snapControlHeightPx(padding * 2 + iconSize);
+}
+/** Pixel control height for IconButton when match-button-height is enabled for that size. */
+function getIconButtonControlHeightPx(config, size) {
+	if (SHARED_BUTTON_ICONBUTTON_SIZES.has(size)) {
+		if (!require_iconButtonMatchButtonHeight.isIconButtonMatchButtonHeightEnabled(config, size)) return 0;
+		return getButtonControlHeightPx(config, size);
+	}
+	return 0;
+}
+function setControlHeightVar(config, componentKey, size, heightPx) {
+	const rootKey = `size/${size}/root`;
+	const componentConfig = config[componentKey];
+	const existingRoot = componentConfig?.variables?.[rootKey] ?? {};
+	return {
+		...config,
+		[componentKey]: {
+			...componentConfig,
+			variables: {
+				...componentConfig?.variables,
+				[rootKey]: {
+					...existingRoot,
+					controlHeight: { rest: {
+						type: "positiveIntegers",
+						value: snapControlHeightPx(heightPx),
+						valueType: "alias"
+					} }
+				}
+			}
+		}
+	};
+}
+function syncButtonControlHeightVarForSize(config, size) {
+	if (!SHARED_BUTTON_ICONBUTTON_SIZES.has(size) || !require_iconButtonMatchButtonHeight.isIconButtonMatchButtonHeightEnabled(config, size)) return config;
+	return setControlHeightVar(config, "iconButton", size, getButtonControlHeightPx(config, size));
+}
+function syncIconButtonControlHeightVarForSize(config, size) {
+	const heightPx = getIconButtonControlHeightPx(config, size);
+	if (heightPx <= 0) return config;
+	return setControlHeightVar(config, "iconButton", size, heightPx);
+}
+function syncIconButtonOnlyControlHeightVarForSize(config, size) {
+	const heightPx = getIconButtonOnlyControlHeightPx(config, size);
+	if (heightPx <= 0) return config;
+	return setControlHeightVar(config, "iconButton", size, heightPx);
+}
+//#endregion
+exports.getButtonControlHeightPx = getButtonControlHeightPx;
+exports.getIconButtonControlHeightPx = getIconButtonControlHeightPx;
+exports.getIconButtonOnlyControlHeightPx = getIconButtonOnlyControlHeightPx;
+exports.syncButtonControlHeightVarForSize = syncButtonControlHeightVarForSize;
+exports.syncIconButtonControlHeightVarForSize = syncIconButtonControlHeightVarForSize;
+exports.syncIconButtonOnlyControlHeightVarForSize = syncIconButtonOnlyControlHeightVarForSize;

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

@@ -0,0 +1,78 @@
+
+import { ButtonSize, IconButtonSize } from "../../../types/dist/index.cjs";
+import { IconButtonMatchButtonHeightConfig } from "./iconButtonMatchButtonHeight.cjs";
+
+//#region ../automated-config/dist/utils/getButtonControlHeightPx.d.ts
+//#region src/utils/getButtonControlHeightPx.d.ts
+type ButtonControlHeightConfig = IconButtonMatchButtonHeightConfig & {
+  button?: {
+    variables?: Record<string, {
+      spacingVertical?: {
+        rest?: {
+          value?: string;
+        };
+      };
+      textVariant?: {
+        rest?: {
+          value?: string;
+        };
+      };
+      size?: {
+        rest?: {
+          value?: string;
+        };
+      };
+    }>;
+  };
+  iconButton?: {
+    variables?: Record<string, {
+      spacing?: {
+        rest?: {
+          value?: string;
+        };
+      };
+      size?: {
+        rest?: {
+          value?: string;
+        };
+      };
+    }>;
+  };
+  typography: Record<string, {
+    fontSize: {
+      base: number | {
+        value: number;
+      };
+      breakpoints: Record<string, number | {
+        value: number;
+      }>;
+    };
+    lineHeight: {
+      base: number | {
+        value: number;
+      };
+      breakpoints: Record<string, number | {
+        value: number;
+      }>;
+    };
+  }>;
+  scaleMode: {
+    large: {
+      spacing: Record<string, number>;
+    };
+  };
+  globalDefaults: {
+    breakpoint: string;
+  };
+};
+/** Pixel control height for Button: padding + max(icon size, text line-height). */
+declare function getButtonControlHeightPx(config: ButtonControlHeightConfig, size: ButtonSize): number;
+/** Pixel control height for IconButton: uniform padding plus icon size only. */
+declare function getIconButtonOnlyControlHeightPx(config: ButtonControlHeightConfig, size: IconButtonSize): number;
+/** Pixel control height for IconButton when match-button-height is enabled for that size. */
+declare function getIconButtonControlHeightPx(config: ButtonControlHeightConfig, size: IconButtonSize): number;
+declare function syncButtonControlHeightVarForSize<T extends object>(config: T, size: ButtonSize): T;
+declare function syncIconButtonControlHeightVarForSize<T extends object>(config: T, size: IconButtonSize): T;
+declare function syncIconButtonOnlyControlHeightVarForSize<T extends object>(config: T, size: IconButtonSize): T; //#endregion
+//#endregion
+export { getButtonControlHeightPx, getIconButtonControlHeightPx, getIconButtonOnlyControlHeightPx, syncButtonControlHeightVarForSize, syncIconButtonControlHeightVarForSize, syncIconButtonOnlyControlHeightVarForSize };

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

@@ -0,0 +1,78 @@
+
+import { ButtonSize, IconButtonSize } from "../../../types/dist/index.js";
+import { IconButtonMatchButtonHeightConfig } from "./iconButtonMatchButtonHeight.js";
+
+//#region ../automated-config/dist/utils/getButtonControlHeightPx.d.ts
+//#region src/utils/getButtonControlHeightPx.d.ts
+type ButtonControlHeightConfig = IconButtonMatchButtonHeightConfig & {
+  button?: {
+    variables?: Record<string, {
+      spacingVertical?: {
+        rest?: {
+          value?: string;
+        };
+      };
+      textVariant?: {
+        rest?: {
+          value?: string;
+        };
+      };
+      size?: {
+        rest?: {
+          value?: string;
+        };
+      };
+    }>;
+  };
+  iconButton?: {
+    variables?: Record<string, {
+      spacing?: {
+        rest?: {
+          value?: string;
+        };
+      };
+      size?: {
+        rest?: {
+          value?: string;
+        };
+      };
+    }>;
+  };
+  typography: Record<string, {
+    fontSize: {
+      base: number | {
+        value: number;
+      };
+      breakpoints: Record<string, number | {
+        value: number;
+      }>;
+    };
+    lineHeight: {
+      base: number | {
+        value: number;
+      };
+      breakpoints: Record<string, number | {
+        value: number;
+      }>;
+    };
+  }>;
+  scaleMode: {
+    large: {
+      spacing: Record<string, number>;
+    };
+  };
+  globalDefaults: {
+    breakpoint: string;
+  };
+};
+/** Pixel control height for Button: padding + max(icon size, text line-height). */
+declare function getButtonControlHeightPx(config: ButtonControlHeightConfig, size: ButtonSize): number;
+/** Pixel control height for IconButton: uniform padding plus icon size only. */
+declare function getIconButtonOnlyControlHeightPx(config: ButtonControlHeightConfig, size: IconButtonSize): number;
+/** Pixel control height for IconButton when match-button-height is enabled for that size. */
+declare function getIconButtonControlHeightPx(config: ButtonControlHeightConfig, size: IconButtonSize): number;
+declare function syncButtonControlHeightVarForSize<T extends object>(config: T, size: ButtonSize): T;
+declare function syncIconButtonControlHeightVarForSize<T extends object>(config: T, size: IconButtonSize): T;
+declare function syncIconButtonOnlyControlHeightVarForSize<T extends object>(config: T, size: IconButtonSize): T; //#endregion
+//#endregion
+export { getButtonControlHeightPx, getIconButtonControlHeightPx, getIconButtonOnlyControlHeightPx, syncButtonControlHeightVarForSize, syncIconButtonControlHeightVarForSize, syncIconButtonOnlyControlHeightVarForSize };

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

@@ -0,0 +1,108 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { spacingMap } from "../../../fixtures/dist/index.js";
+import { isIconButtonMatchButtonHeightEnabled } from "./iconButtonMatchButtonHeight.js";
+import { get } from "lodash-es";
+import { ICON_SIZE_MAP } from "@yahoo/uds-icons/tokens";
+//#region ../automated-config/dist/utils/getButtonControlHeightPx.js
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+const SHARED_BUTTON_ICONBUTTON_SIZES = new Set([
+	"xs",
+	"sm",
+	"md",
+	"lg"
+]);
+function resolveSpacingPx(config, alias) {
+	if (!alias) return 0;
+	const scaleValue = get(config, [
+		"scaleMode",
+		"large",
+		"spacing",
+		alias.replace(".", "_")
+	]);
+	if (typeof scaleValue === "number") return scaleValue;
+	return spacingMap[alias] ?? 0;
+}
+function resolveTypographyPx(config, textVariant, property) {
+	if (!textVariant) return 0;
+	const typographyConfig = config.typography[textVariant];
+	if (!typographyConfig?.[property]) return 0;
+	const defaultBreakpoint = config.globalDefaults.breakpoint;
+	const value = defaultBreakpoint === "base" ? typographyConfig[property].base : typographyConfig[property].breakpoints[defaultBreakpoint];
+	if (typeof value === "number") return value;
+	if (value && typeof value === "object" && "value" in value) return value.value;
+	return 0;
+}
+/** Ceil fractional totals so Figma-bound controlHeight matches auto-layout hug (e.g. xs + ui3 15.4lh → 28). */
+function snapControlHeightPx(value) {
+	return Math.ceil(value);
+}
+/** Pixel control height for Button: padding + max(icon size, text line-height). */
+function getButtonControlHeightPx(config, size) {
+	const button = config.button;
+	if (!button?.variables) return 0;
+	const layerPrefix = `size/${size}`;
+	const paddingAlias = button.variables[`${layerPrefix}/root`]?.spacingVertical?.rest?.value;
+	const iconSizeAlias = button.variables[`${layerPrefix}/icon`]?.size?.rest?.value;
+	const textVariant = button.variables[`${layerPrefix}/root`]?.textVariant?.rest?.value;
+	const padding = resolveSpacingPx(config, paddingAlias);
+	const iconSize = ICON_SIZE_MAP[iconSizeAlias ?? "sm"] ?? 16;
+	const lineHeight = resolveTypographyPx(config, textVariant, "lineHeight");
+	return snapControlHeightPx(padding * 2 + Math.max(iconSize, lineHeight || iconSize));
+}
+/** Pixel control height for IconButton: uniform padding plus icon size only. */
+function getIconButtonOnlyControlHeightPx(config, size) {
+	const iconButton = config.iconButton;
+	if (!iconButton?.variables) return 0;
+	const layerPrefix = `size/${size}`;
+	const paddingAlias = iconButton.variables[`${layerPrefix}/root`]?.spacing?.rest?.value;
+	const iconSizeAlias = iconButton.variables[`${layerPrefix}/icon`]?.size?.rest?.value;
+	const padding = resolveSpacingPx(config, paddingAlias);
+	const iconSize = ICON_SIZE_MAP[iconSizeAlias ?? "sm"] ?? 16;
+	return snapControlHeightPx(padding * 2 + iconSize);
+}
+/** Pixel control height for IconButton when match-button-height is enabled for that size. */
+function getIconButtonControlHeightPx(config, size) {
+	if (SHARED_BUTTON_ICONBUTTON_SIZES.has(size)) {
+		if (!isIconButtonMatchButtonHeightEnabled(config, size)) return 0;
+		return getButtonControlHeightPx(config, size);
+	}
+	return 0;
+}
+function setControlHeightVar(config, componentKey, size, heightPx) {
+	const rootKey = `size/${size}/root`;
+	const componentConfig = config[componentKey];
+	const existingRoot = componentConfig?.variables?.[rootKey] ?? {};
+	return {
+		...config,
+		[componentKey]: {
+			...componentConfig,
+			variables: {
+				...componentConfig?.variables,
+				[rootKey]: {
+					...existingRoot,
+					controlHeight: { rest: {
+						type: "positiveIntegers",
+						value: snapControlHeightPx(heightPx),
+						valueType: "alias"
+					} }
+				}
+			}
+		}
+	};
+}
+function syncButtonControlHeightVarForSize(config, size) {
+	if (!SHARED_BUTTON_ICONBUTTON_SIZES.has(size) || !isIconButtonMatchButtonHeightEnabled(config, size)) return config;
+	return setControlHeightVar(config, "iconButton", size, getButtonControlHeightPx(config, size));
+}
+function syncIconButtonControlHeightVarForSize(config, size) {
+	const heightPx = getIconButtonControlHeightPx(config, size);
+	if (heightPx <= 0) return config;
+	return setControlHeightVar(config, "iconButton", size, heightPx);
+}
+function syncIconButtonOnlyControlHeightVarForSize(config, size) {
+	const heightPx = getIconButtonOnlyControlHeightPx(config, size);
+	if (heightPx <= 0) return config;
+	return setControlHeightVar(config, "iconButton", size, heightPx);
+}
+//#endregion
+export { getButtonControlHeightPx, getIconButtonControlHeightPx, getIconButtonOnlyControlHeightPx, syncButtonControlHeightVarForSize, syncIconButtonControlHeightVarForSize, syncIconButtonOnlyControlHeightVarForSize };

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

@@ -11,8 +11,8 @@ import { VariantConfig } from "../types/ComponentConfig.cjs";
  * @returns A Record of layer names to their properties, or null if no properties are found
  */
 declare function getConfigVariantProperties(variant?: VariantConfig): {
-  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
-  root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
 } | null; //#endregion
 //#endregion
 export { getConfigVariantProperties };

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

@@ -11,8 +11,8 @@ import { VariantConfig } from "../types/ComponentConfig.js";
  * @returns A Record of layer names to their properties, or null if no properties are found
  */
 declare function getConfigVariantProperties(variant?: VariantConfig): {
-  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
-  root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
 } | null; //#endregion
 //#endregion
 export { getConfigVariantProperties };

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,