@yahoo/uds 3.102.0 → 3.103.0

package/dist/automated-config/dist/properties.d.ts

@@ -1,5 +1,6 @@
 
 import { ShadowPreset } from "../../types/dist/index.js";
+import { ArbitraryFixtures, InferArbitraryType } from "../../fixtures/dist/index.js";
 import { AllPossibleProperties, PossibleStates } from "./types/ComponentConfig.js";
 import { SchemaStateValue } from "./types/ConfigSchema.js";
 
@@ -15,17 +16,20 @@ interface ConfigurableProperty<T extends AllPossibleProperties, CVR = unknown> {
   name: string;
   cssProperties: string | string[];
   twThemePath: (fixtureType: T, value: string) => string;
-  possibleFixtures: T[];
+  possibleFixtures: readonly T[];
   extendedProperties?: ExtendablePropertiesName[] | ((context: ComponentConfigContext) => ExtendablePropertiesName[] | undefined | false);
-  customValueRenderer?: (schemaStateValue: SchemaStateValue<CVR>, schema: unknown, themeGetter: (path: string) => string) => string;
+  customValueRenderer?: (schemaStateValue: SchemaStateValue<CVR>, schema: unknown, themeGetter: (path: string) => string, originalPropertyDefinition?: SelectedConfigurableProperty<ConfigurablePropertiesName, any>) => string;
   concatenate?: boolean;
   concatenationDelimiter?: string;
 }
 declare const publicProperties: {
   readonly backgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
   readonly borderWidth: ConfigurableProperty<"elevationAliases" | "borderWidths" | "spacingAliases", unknown>;
+  readonly strokeWidth: ConfigurableProperty<"elevationAliases" | "borderWidths" | "spacingAliases", unknown>;
   readonly borderRadius: ConfigurableProperty<"borderRadii", unknown>;
+  readonly borderRadiusVar: ConfigurableProperty<"borderRadii", unknown>;
   readonly borderColor: ConfigurableProperty<"spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors", unknown>;
+  readonly stroke: ConfigurableProperty<"spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors", unknown>;
   readonly buttonSize: ConfigurableProperty<"buttonSizes", unknown>;
   readonly buttonVariant: ConfigurableProperty<"buttonVariantsFlat", unknown>;
   readonly fontFamily: ConfigurableProperty<"textVariants", unknown>;
@@ -37,6 +41,7 @@ declare const publicProperties: {
   readonly gap: ConfigurableProperty<"spacingAliases", unknown>;
   readonly color: ConfigurableProperty<"spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors", unknown>;
   readonly opacity: ConfigurableProperty<"opacitySteps", unknown>;
+  readonly fillOpacity: ConfigurableProperty<"opacitySteps", unknown>;
   readonly fontWeight: ConfigurableProperty<"textVariants", unknown>;
   readonly iconSize: ConfigurableProperty<"iconSizes", unknown>;
   readonly spacing: ConfigurableProperty<"spacingAliases", unknown>;
@@ -46,10 +51,14 @@ declare const publicProperties: {
   readonly textVariant: ConfigurableProperty<"textVariants", unknown>;
   readonly textDecorationLine: ConfigurableProperty<"textDecorationLines", unknown>;
   readonly shadow: ConfigurableProperty<"elevationAliases" | "shadowVariants" | "shadowVariantConfig", string | [] | [ShadowPreset] | [ShadowPreset, ShadowPreset] | [ShadowPreset, ShadowPreset, ShadowPreset]>;
+  readonly shadowVar: ConfigurableProperty<"elevationAliases" | "shadowVariants" | "shadowVariantConfig", string | [] | [ShadowPreset] | [ShadowPreset, ShadowPreset] | [ShadowPreset, ShadowPreset, ShadowPreset]>;
   readonly insetShadow: ConfigurableProperty<"shadowVariantConfig" | "shadowVariantsWithInvert", string | [] | [ShadowPreset] | [ShadowPreset, ShadowPreset] | [ShadowPreset, ShadowPreset, ShadowPreset]>;
   readonly height: ConfigurableProperty<"spacingAliases", unknown>;
   readonly width: ConfigurableProperty<"spacingAliases", unknown>;
   readonly scaleEffect: ConfigurableProperty<"scaleEffects", unknown>;
+  readonly backdropBlur: ConfigurableProperty<"positiveIntegers", unknown>;
+  readonly blurBackgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
+  readonly blurBackgroundColorFallback: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
 };
 declare const configurableProperties: {
   outlineWidth: ConfigurableProperty<"borderWidths" | "spacingAliases", unknown>;
@@ -58,8 +67,11 @@ declare const configurableProperties: {
   solidOutline: ConfigurableProperty<never, unknown>;
   backgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
   borderWidth: ConfigurableProperty<"elevationAliases" | "borderWidths" | "spacingAliases", unknown>;
+  strokeWidth: ConfigurableProperty<"elevationAliases" | "borderWidths" | "spacingAliases", unknown>;
   borderRadius: ConfigurableProperty<"borderRadii", unknown>;
+  borderRadiusVar: ConfigurableProperty<"borderRadii", unknown>;
   borderColor: ConfigurableProperty<"spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors", unknown>;
+  stroke: ConfigurableProperty<"spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors", unknown>;
   buttonSize: ConfigurableProperty<"buttonSizes", unknown>;
   buttonVariant: ConfigurableProperty<"buttonVariantsFlat", unknown>;
   fontFamily: ConfigurableProperty<"textVariants", unknown>;
@@ -71,6 +83,7 @@ declare const configurableProperties: {
   gap: ConfigurableProperty<"spacingAliases", unknown>;
   color: ConfigurableProperty<"spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors", unknown>;
   opacity: ConfigurableProperty<"opacitySteps", unknown>;
+  fillOpacity: ConfigurableProperty<"opacitySteps", unknown>;
   fontWeight: ConfigurableProperty<"textVariants", unknown>;
   iconSize: ConfigurableProperty<"iconSizes", unknown>;
   spacing: ConfigurableProperty<"spacingAliases", unknown>;
@@ -80,10 +93,14 @@ declare const configurableProperties: {
   textVariant: ConfigurableProperty<"textVariants", unknown>;
   textDecorationLine: ConfigurableProperty<"textDecorationLines", unknown>;
   shadow: ConfigurableProperty<"elevationAliases" | "shadowVariants" | "shadowVariantConfig", string | [] | [ShadowPreset] | [ShadowPreset, ShadowPreset] | [ShadowPreset, ShadowPreset, ShadowPreset]>;
+  shadowVar: ConfigurableProperty<"elevationAliases" | "shadowVariants" | "shadowVariantConfig", string | [] | [ShadowPreset] | [ShadowPreset, ShadowPreset] | [ShadowPreset, ShadowPreset, ShadowPreset]>;
   insetShadow: ConfigurableProperty<"shadowVariantConfig" | "shadowVariantsWithInvert", string | [] | [ShadowPreset] | [ShadowPreset, ShadowPreset] | [ShadowPreset, ShadowPreset, ShadowPreset]>;
   height: ConfigurableProperty<"spacingAliases", unknown>;
   width: ConfigurableProperty<"spacingAliases", unknown>;
   scaleEffect: ConfigurableProperty<"scaleEffects", unknown>;
+  backdropBlur: ConfigurableProperty<"positiveIntegers", unknown>;
+  blurBackgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
+  blurBackgroundColorFallback: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
 };
 type ExtendablePropertiesName = keyof typeof configurableProperties;
 type ConfigurablePropertiesName = keyof typeof publicProperties;
@@ -95,7 +112,11 @@ interface SelectedConfigurableProperty<C extends ConfigurablePropertiesName, O e
   skipRestState?: boolean;
   pseudoStates?: PossibleStates[];
   supportsCustom?: boolean;
-  defaults: { [K in O]: V[number][number] };
+  layerReference?: {
+    variablePath: string;
+    propertyName: string;
+  };
+  defaults: { [K in O]: V[number][number] | (Extract<T[number], ArbitraryFixtures> extends never ? never : InferArbitraryType<Extract<T[number], ArbitraryFixtures>>) };
 } //#endregion
 //#endregion
-export { type ComponentConfigContext, type ConfigurablePropertiesName, type ExtendablePropertiesName, type SelectedConfigurableProperty, configurableProperties };
+export { type ComponentConfigContext, type ConfigurablePropertiesName, type ConfigurableProperty, type ExtendablePropertiesName, type SelectedConfigurableProperty, configurableProperties };

package/dist/automated-config/dist/properties.js

@@ -1,5 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { BUTTON_SCALE_EFFECT, getShadowLayerValue, textVariantsSafe } from "../../css-tokens/dist/index.js";
+import { BACKGROUND_BLUR_COLOR_PREFIX, BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX, BORDER_RADIUS_PREFIX, BUTTON_SCALE_EFFECT, DROP_SHADOW_PREFIX, getShadowLayerValue, textVariantsSafe } from "../../css-tokens/dist/index.js";
 import { mapTextVariantFixtureToValue } from "./mapTextVariantFixtureToValue.js";
 import { assertUnreachable } from "./utils/assertUnreachable.js";
 import { mapColorFixtureToValue } from "./utils/mapColorFixtureToValue.js";
@@ -148,6 +148,11 @@ const borderWidth = {
 		return false;
 	}
 };
+const strokeWidth = {
+	...borderWidth,
+	name: "strokeWidth",
+	cssProperties: "stroke-width"
+};
 const borderColor = {
 	name: "borderColor",
 	cssProperties: "border-color",
@@ -163,6 +168,11 @@ const borderColor = {
 		return false;
 	}
 };
+const stroke = {
+	...borderColor,
+	name: "stroke",
+	cssProperties: "stroke"
+};
 const outlineWidth = {
 	name: "outlineWidth",
 	cssProperties: "outline-width",
@@ -195,16 +205,109 @@ const outlineColor = {
 		"linePaletteColors"
 	]
 };
+const borderRadius = {
+	name: "borderRadius",
+	cssProperties: "border-radius",
+	twThemePath: (_, value) => `udsBorderRadius.${value}`,
+	possibleFixtures: ["borderRadii"]
+};
+const borderRadiusVar = {
+	...borderRadius,
+	name: "borderRadiusVar",
+	cssProperties: `--${BORDER_RADIUS_PREFIX}`
+};
+const spacing = {
+	name: "spacing",
+	cssProperties: "padding",
+	twThemePath: (_, value) => `spacing[${value}]`,
+	possibleFixtures: ["spacingAliases"]
+};
+const spacingHorizontal = {
+	name: "spacingHorizontal",
+	cssProperties: ["padding-right", "padding-left"],
+	twThemePath: (_, value) => `spacing[${value}]`,
+	possibleFixtures: ["spacingAliases"]
+};
+const spacingVertical = {
+	name: "spacingVertical",
+	cssProperties: ["padding-top", "padding-bottom"],
+	twThemePath: (_, value) => `spacing[${value}]`,
+	possibleFixtures: ["spacingAliases"]
+};
+const height = {
+	name: "height",
+	cssProperties: "height",
+	twThemePath: (_, value) => {
+		return `height[${value}]`;
+	},
+	possibleFixtures: ["spacingAliases"]
+};
+const width = {
+	name: "width",
+	cssProperties: "width",
+	twThemePath: (_, value) => {
+		return `width[${value}]`;
+	},
+	possibleFixtures: ["spacingAliases"]
+};
+const shadow = {
+	name: "drop shadow",
+	cssProperties: "box-shadow",
+	twThemePath: () => {
+		return ``;
+	},
+	concatenate: true,
+	customValueRenderer: (schemaValue) => {
+		const shadowType = "drop";
+		const noneValue = "0 0 0 transparent";
+		if (schemaValue.valueType === "alias") {
+			const noneValue = "0 0 0 transparent";
+			if (schemaValue.value === "none") return noneValue;
+			if (schemaValue.value !== "custom") return `var(--uds-${shadowType}-shadow-${schemaValue.value})`;
+		} else if (schemaValue.valueType === "custom") return schemaValue.value.map((preset, index) => getShadowLayerValue({
+			preset,
+			shadowType,
+			prefix: index > 0 ? `${index + 1}` : void 0
+		}))?.join(", ") || noneValue;
+		throw new Error("Invalid valueType");
+	},
+	possibleFixtures: [
+		"shadowVariants",
+		"shadowVariantConfig",
+		"elevationAliases"
+	]
+};
+const insetShadow = {
+	name: "inset shadow",
+	cssProperties: "box-shadow",
+	twThemePath: () => {
+		return ``;
+	},
+	concatenate: true,
+	customValueRenderer: (schemaValue) => {
+		const shadowType = "inset";
+		const noneValue = "0 0 0 transparent";
+		if (schemaValue.valueType === "alias") {
+			const noneValue = "0 0 0 transparent";
+			if (schemaValue.value === "none") return noneValue;
+			if (schemaValue.value !== "custom") return `var(--uds-${shadowType}-shadow-${schemaValue.value})`;
+		} else if (schemaValue.valueType === "custom") return schemaValue.value.map((preset, index) => getShadowLayerValue({
+			preset,
+			shadowType,
+			prefix: index > 0 ? `${index + 1}` : void 0
+		}))?.join(", ") || noneValue;
+		throw new Error("Invalid valueType");
+	},
+	possibleFixtures: ["shadowVariantsWithInvert"]
+};
 const publicProperties = {
 	backgroundColor,
 	borderWidth,
-	borderRadius: {
-		name: "borderRadius",
-		cssProperties: "border-radius",
-		twThemePath: (_, value) => `udsBorderRadius.${value}`,
-		possibleFixtures: ["borderRadii"]
-	},
+	strokeWidth,
+	borderRadius,
+	borderRadiusVar,
 	borderColor,
+	stroke,
 	buttonSize: {
 		name: "buttonSize",
 		cssProperties: "--uds-button-size",
@@ -241,6 +344,12 @@ const publicProperties = {
 		twThemePath: (_, value) => `opacity[${value}]`,
 		possibleFixtures: ["opacitySteps"]
 	},
+	fillOpacity: {
+		name: "fillOpacity",
+		cssProperties: "fill-opacity",
+		twThemePath: (_, value) => `opacity[${value}]`,
+		possibleFixtures: ["opacitySteps"]
+	},
 	fontWeight,
 	iconSize: {
 		name: "iconSize",
@@ -248,12 +357,7 @@ const publicProperties = {
 		twThemePath: (_, value) => `sizing.icon.${value}`,
 		possibleFixtures: ["iconSizes"]
 	},
-	spacing: {
-		name: "spacing",
-		cssProperties: "padding",
-		twThemePath: (_, value) => `spacing[${value}]`,
-		possibleFixtures: ["spacingAliases"]
-	},
+	spacing,
 	iconVariant: {
 		name: "iconVariant",
 		cssProperties: "--uds-icon-variant",
@@ -265,86 +369,19 @@ const publicProperties = {
 			return String(schemaValue.value);
 		}
 	},
-	spacingHorizontal: {
-		name: "spacingHorizontal",
-		cssProperties: ["padding-right", "padding-left"],
-		twThemePath: (_, value) => `spacing[${value}]`,
-		possibleFixtures: ["spacingAliases"]
-	},
-	spacingVertical: {
-		name: "spacingVertical",
-		cssProperties: ["padding-top", "padding-bottom"],
-		twThemePath: (_, value) => `spacing[${value}]`,
-		possibleFixtures: ["spacingAliases"]
-	},
+	spacingHorizontal,
+	spacingVertical,
 	textVariant,
 	textDecorationLine,
-	shadow: {
-		name: "drop shadow",
-		cssProperties: "box-shadow",
-		twThemePath: () => {
-			return ``;
-		},
-		concatenate: true,
-		customValueRenderer: (schemaValue) => {
-			const shadowType = "drop";
-			const noneValue = "0 0 0 transparent";
-			if (schemaValue.valueType === "alias") {
-				const noneValue = "0 0 0 transparent";
-				if (schemaValue.value === "none") return noneValue;
-				if (schemaValue.value !== "custom") return `var(--uds-${shadowType}-shadow-${schemaValue.value})`;
-			} else if (schemaValue.valueType === "custom") return schemaValue.value.map((preset, index) => getShadowLayerValue({
-				preset,
-				shadowType,
-				prefix: index > 0 ? `${index + 1}` : void 0
-			}))?.join(", ") || noneValue;
-			throw new Error("Invalid valueType");
-		},
-		possibleFixtures: [
-			"shadowVariants",
-			"shadowVariantConfig",
-			"elevationAliases"
-		]
-	},
-	insetShadow: {
-		name: "inset shadow",
-		cssProperties: "box-shadow",
-		twThemePath: () => {
-			return ``;
-		},
-		concatenate: true,
-		customValueRenderer: (schemaValue) => {
-			const shadowType = "inset";
-			const noneValue = "0 0 0 transparent";
-			if (schemaValue.valueType === "alias") {
-				const noneValue = "0 0 0 transparent";
-				if (schemaValue.value === "none") return noneValue;
-				if (schemaValue.value !== "custom") return `var(--uds-${shadowType}-shadow-${schemaValue.value})`;
-			} else if (schemaValue.valueType === "custom") return schemaValue.value.map((preset, index) => getShadowLayerValue({
-				preset,
-				shadowType,
-				prefix: index > 0 ? `${index + 1}` : void 0
-			}))?.join(", ") || noneValue;
-			throw new Error("Invalid valueType");
-		},
-		possibleFixtures: ["shadowVariantsWithInvert"]
-	},
-	height: {
-		name: "height",
-		cssProperties: "height",
-		twThemePath: (_, value) => {
-			return `height[${value}]`;
-		},
-		possibleFixtures: ["spacingAliases"]
-	},
-	width: {
-		name: "width",
-		cssProperties: "width",
-		twThemePath: (_, value) => {
-			return `width[${value}]`;
-		},
-		possibleFixtures: ["spacingAliases"]
+	shadow,
+	shadowVar: {
+		...shadow,
+		name: "shadowVar",
+		cssProperties: `--${DROP_SHADOW_PREFIX}`
 	},
+	insetShadow,
+	height,
+	width,
 	scaleEffect: {
 		name: "scaleEffect",
 		cssProperties: BUTTON_SCALE_EFFECT,
@@ -357,6 +394,32 @@ const publicProperties = {
 			const stringValue = String(value);
 			return String(SCALE_EFFECTS[stringValue] ?? SCALE_EFFECTS.none);
 		}
+	},
+	backdropBlur: {
+		name: "backdropBlur",
+		possibleFixtures: ["positiveIntegers"],
+		cssProperties: "--uds-backdrop-blur",
+		twThemePath: () => {
+			return ``;
+		},
+		customValueRenderer: (schemaValue, schema, _theme, originalPropertyDefinition) => {
+			if (originalPropertyDefinition && originalPropertyDefinition.layerReference) {
+				const { variablePath, propertyName } = originalPropertyDefinition.layerReference;
+				const property = schema.variables[variablePath][propertyName].rest;
+				if (property.type === "elevationAliases") return `var(--uds-background-blur-radius-${property.value})`;
+			}
+			return `blur(${schemaValue.value}px)`;
+		}
+	},
+	blurBackgroundColor: {
+		...backgroundColor,
+		name: "blurBackgroundColor",
+		cssProperties: `--${BACKGROUND_BLUR_COLOR_PREFIX}`
+	},
+	blurBackgroundColorFallback: {
+		...backgroundColor,
+		name: "blurBackgroundColorFallback",
+		cssProperties: `--${BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}`
 	}
 };
 const internalProperties = {

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

@@ -1,6 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 const require_generateSchemaKey = require('./generateSchemaKey.cjs');
 const require_variantConfigGuards = require('./variantConfigGuards.cjs');
+const require_util = require('../../../fixtures/src/util.cjs');
 
 //#region ../automated-config/dist/utils/buildConfigSchema.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
@@ -8,7 +9,10 @@ const require_variantConfigGuards = require('./variantConfigGuards.cjs');
 function findFixtureType(property, variantKey) {
 	const defaultValue = property.defaults[variantKey];
 	const index = property.values.findIndex((arr) => arr.includes(defaultValue));
-	return property.typeOfFixture[index === -1 ? 0 : index];
+	const fixtureType = property.typeOfFixture[index === -1 ? 0 : index];
+	const arbitraryFixture = require_util.getArbitraryFixture(fixtureType);
+	if (arbitraryFixture && !require_util.validateArbitraryValue(arbitraryFixture, defaultValue)) throw new Error(`Invalid default value "${defaultValue}" for property "${property.name}" (variant "${variantKey}"): does not satisfy ${fixtureType} constraints`);
+	return fixtureType;
 }
 /** Builds component schema from ComponentConfig at runtime */
 function buildConfigSchema(config) {

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

@@ -1,5 +1,6 @@
 
 import { ElevationAlias, ShadowVariant, ShadowVariantConfig, ShadowVariantWithInvert } from "../../../types/dist/index.cjs";
+import { ArbitraryFixtures, InferArbitraryType } from "../../../fixtures/dist/index.cjs";
 import { AllPossibleProperties, ComponentConfig, LayerConfig, PossibleStates, VariantConfig, VariantConfigWithComponentStates, VariantConfigWithProperties } from "../types/ComponentConfig.cjs";
 import { SchemaStateValue } from "../types/ConfigSchema.cjs";
 import { ConfigurablePropertiesName, SelectedConfigurableProperty } from "../properties.cjs";
@@ -13,7 +14,7 @@ type InferredDefaults<C extends ComponentConfig> = (C['variants'] extends NonNul
 type InferredPropertySchema<Prop extends SelectedConfigurableProperty<ConfigurablePropertiesName, string>> = {
   type: Prop['typeOfFixture'][number];
   valueType: 'alias' | 'custom';
-  value: Prop['name'] extends 'shadow' ? ShadowVariant | ShadowVariantConfig | ElevationAlias : Prop['name'] extends 'insetShadow' ? ShadowVariantWithInvert | ShadowVariantConfig : Prop['values'][number][number];
+  value: Prop['name'] extends 'shadow' ? ShadowVariant | ShadowVariantConfig | ElevationAlias : Prop['name'] extends 'insetShadow' ? ShadowVariantWithInvert | ShadowVariantConfig : Prop['values'][number][number] | (Extract<Prop['typeOfFixture'][number], ArbitraryFixtures> extends never ? never : InferArbitraryType<Extract<Prop['typeOfFixture'][number], ArbitraryFixtures>>);
 };
 /** Infers state-to-schema mappings for a property (rest, hover, pressed, focus, etc.) */
 type InferredPropertyStates<Prop extends SelectedConfigurableProperty<ConfigurablePropertiesName, string>> = (Prop['skipRestState'] extends true ? {} : {

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

@@ -1,5 +1,6 @@
 
 import { ElevationAlias, ShadowVariant, ShadowVariantConfig, ShadowVariantWithInvert } from "../../../types/dist/index.js";
+import { ArbitraryFixtures, InferArbitraryType } from "../../../fixtures/dist/index.js";
 import { AllPossibleProperties, ComponentConfig, LayerConfig, PossibleStates, VariantConfig, VariantConfigWithComponentStates, VariantConfigWithProperties } from "../types/ComponentConfig.js";
 import { SchemaStateValue } from "../types/ConfigSchema.js";
 import { ConfigurablePropertiesName, SelectedConfigurableProperty } from "../properties.js";
@@ -13,7 +14,7 @@ type InferredDefaults<C extends ComponentConfig> = (C['variants'] extends NonNul
 type InferredPropertySchema<Prop extends SelectedConfigurableProperty<ConfigurablePropertiesName, string>> = {
   type: Prop['typeOfFixture'][number];
   valueType: 'alias' | 'custom';
-  value: Prop['name'] extends 'shadow' ? ShadowVariant | ShadowVariantConfig | ElevationAlias : Prop['name'] extends 'insetShadow' ? ShadowVariantWithInvert | ShadowVariantConfig : Prop['values'][number][number];
+  value: Prop['name'] extends 'shadow' ? ShadowVariant | ShadowVariantConfig | ElevationAlias : Prop['name'] extends 'insetShadow' ? ShadowVariantWithInvert | ShadowVariantConfig : Prop['values'][number][number] | (Extract<Prop['typeOfFixture'][number], ArbitraryFixtures> extends never ? never : InferArbitraryType<Extract<Prop['typeOfFixture'][number], ArbitraryFixtures>>);
 };
 /** Infers state-to-schema mappings for a property (rest, hover, pressed, focus, etc.) */
 type InferredPropertyStates<Prop extends SelectedConfigurableProperty<ConfigurablePropertiesName, string>> = (Prop['skipRestState'] extends true ? {} : {

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

@@ -1,6 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { generateSchemaKey } from "./generateSchemaKey.js";
 import { isVariantConfigWithComponentStates, isVariantConfigWithProperties } from "./variantConfigGuards.js";
+import { getArbitraryFixture, validateArbitraryValue } from "../../../fixtures/src/util.js";
 
 //#region ../automated-config/dist/utils/buildConfigSchema.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
@@ -8,7 +9,10 @@ import { isVariantConfigWithComponentStates, isVariantConfigWithProperties } fro
 function findFixtureType(property, variantKey) {
 	const defaultValue = property.defaults[variantKey];
 	const index = property.values.findIndex((arr) => arr.includes(defaultValue));
-	return property.typeOfFixture[index === -1 ? 0 : index];
+	const fixtureType = property.typeOfFixture[index === -1 ? 0 : index];
+	const arbitraryFixture = getArbitraryFixture(fixtureType);
+	if (arbitraryFixture && !validateArbitraryValue(arbitraryFixture, defaultValue)) throw new Error(`Invalid default value "${defaultValue}" for property "${property.name}" (variant "${variantKey}"): does not satisfy ${fixtureType} constraints`);
+	return fixtureType;
 }
 /** Builds component schema from ComponentConfig at runtime */
 function buildConfigSchema(config) {

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

@@ -11,8 +11,8 @@ import { SelectedConfigurableProperty } from "../properties.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" | "borderRadius" | "borderColor" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "insetShadow" | "height" | "width" | "scaleEffect", string, ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | ("elevationAliases" | "borderWidths" | "spacingAliases")[] | "borderRadii"[] | ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | "buttonSizes"[] | "buttonVariantsFlat"[] | "textVariants"[] | "spacingAliases"[] | ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | "opacitySteps"[] | "iconSizes"[] | "iconVariants"[] | "textDecorationLines"[] | ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | "scaleEffects"[], readonly (readonly unknown[])[]>>>;
-  root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "borderRadius" | "borderColor" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "insetShadow" | "height" | "width" | "scaleEffect", string, ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | ("elevationAliases" | "borderWidths" | "spacingAliases")[] | "borderRadii"[] | ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | "buttonSizes"[] | "buttonVariantsFlat"[] | "textVariants"[] | "spacingAliases"[] | ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | "opacitySteps"[] | "iconSizes"[] | "iconVariants"[] | "textDecorationLines"[] | ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | "scaleEffects"[], readonly (readonly unknown[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback", 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 "scaleEffects"[] | readonly "positiveIntegers"[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback", 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 "scaleEffects"[] | readonly "positiveIntegers"[], readonly (readonly unknown[])[]>>>;
 } | null; //#endregion
 //#endregion
 export { getConfigVariantProperties };

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

@@ -11,8 +11,8 @@ import { SelectedConfigurableProperty } from "../properties.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" | "borderRadius" | "borderColor" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "insetShadow" | "height" | "width" | "scaleEffect", string, ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | ("elevationAliases" | "borderWidths" | "spacingAliases")[] | "borderRadii"[] | ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | "buttonSizes"[] | "buttonVariantsFlat"[] | "textVariants"[] | "spacingAliases"[] | ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | "opacitySteps"[] | "iconSizes"[] | "iconVariants"[] | "textDecorationLines"[] | ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | "scaleEffects"[], readonly (readonly unknown[])[]>>>;
-  root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "borderRadius" | "borderColor" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "insetShadow" | "height" | "width" | "scaleEffect", string, ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | ("elevationAliases" | "borderWidths" | "spacingAliases")[] | "borderRadii"[] | ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | "buttonSizes"[] | "buttonVariantsFlat"[] | "textVariants"[] | "spacingAliases"[] | ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | "opacitySteps"[] | "iconSizes"[] | "iconVariants"[] | "textDecorationLines"[] | ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | "scaleEffects"[], readonly (readonly unknown[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback", 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 "scaleEffects"[] | readonly "positiveIntegers"[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback", 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 "scaleEffects"[] | readonly "positiveIntegers"[], readonly (readonly unknown[])[]>>>;
 } | null; //#endregion
 //#endregion
 export { getConfigVariantProperties };

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

@@ -115,11 +115,11 @@ function generateClassName({ componentName, subComponentName, variantKey, varian
 	if (layerOptionalPseudoSelector) className = `${className}${layerOptionalPseudoSelector}`;
 	return className.replaceAll(/\s+/g, "-");
 }
-const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue) => {
+const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue, originalPropertyDefinition) => {
 	const { value, type } = schemaStateValue;
 	const propertyConfig = require_properties.configurableProperties[propertyName];
 	let newValue;
-	if (propertyConfig.customValueRenderer) newValue = propertyConfig.customValueRenderer(schemaStateValue, schema, theme);
+	if (propertyConfig.customValueRenderer) newValue = propertyConfig.customValueRenderer(schemaStateValue, schema, theme, originalPropertyDefinition);
 	else {
 		const safeTwThemePath = propertyConfig.twThemePath;
 		newValue = theme(safeTwThemePath(type, String(value)));
@@ -222,10 +222,10 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 			}
 		} else if (typeof cssProperties === "string") {
 			const existingValue = currentStyles?.[fullClassName]?.[cssProperties];
-			cssDeclarations[cssProperties] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue);
+			cssDeclarations[cssProperties] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
 		} else if (Array.isArray(cssProperties)) for (const cssProp of cssProperties) {
 			const existingValue = currentStyles?.[fullClassName]?.[cssProp];
-			cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue);
+			cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
 		}
 		/**
 		* Button root layer workarounds & enhancements.

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

@@ -1,4 +1,5 @@
 
+import { ArbitraryFixtures, InferArbitraryType } from "../../../fixtures/dist/index.cjs";
 import { ComponentConfig, ComponentStateConfig, LayerConfig, PossibleStates, PossibleStatesWithRest, SubComponentConfig, VariantConfig, VariantConfigWithComponentStates, VariantConfigWithProperties } from "../types/ComponentConfig.cjs";
 import { ConfigurablePropertiesName, SelectedConfigurableProperty, configurableProperties } from "../properties.cjs";
 import { ComponentSchema, buildConfigSchema, findFixtureType } from "./buildConfigSchema.cjs";
@@ -87,11 +88,15 @@ declare function createConfigurableProperty<C extends ConfigurablePropertiesName
   name: C;
   typeOfFixture: T;
   values: V;
-  defaults: { [K in O]: V[number][number] };
+  defaults: { [K in O]: V[number][number] | (Extract<T[number], ArbitraryFixtures> extends never ? never : InferArbitraryType<Extract<T[number], ArbitraryFixtures>>) };
   label: string;
   skipRestState?: boolean;
   pseudoStates?: PossibleStates[];
   supportsCustom?: boolean;
+  layerReference?: {
+    variablePath: string;
+    propertyName: string;
+  };
 }): SelectedConfigurableProperty<C, O, T, V>;
 declare function createVariantConfig(config: {
   label: string;

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

@@ -1,4 +1,5 @@
 
+import { ArbitraryFixtures, InferArbitraryType } from "../../../fixtures/dist/index.js";
 import { ComponentConfig, ComponentStateConfig, LayerConfig, PossibleStates, PossibleStatesWithRest, SubComponentConfig, VariantConfig, VariantConfigWithComponentStates, VariantConfigWithProperties } from "../types/ComponentConfig.js";
 import { ConfigurablePropertiesName, SelectedConfigurableProperty, configurableProperties } from "../properties.js";
 import { ComponentSchema, buildConfigSchema, findFixtureType } from "./buildConfigSchema.js";
@@ -87,11 +88,15 @@ declare function createConfigurableProperty<C extends ConfigurablePropertiesName
   name: C;
   typeOfFixture: T;
   values: V;
-  defaults: { [K in O]: V[number][number] };
+  defaults: { [K in O]: V[number][number] | (Extract<T[number], ArbitraryFixtures> extends never ? never : InferArbitraryType<Extract<T[number], ArbitraryFixtures>>) };
   label: string;
   skipRestState?: boolean;
   pseudoStates?: PossibleStates[];
   supportsCustom?: boolean;
+  layerReference?: {
+    variablePath: string;
+    propertyName: string;
+  };
 }): SelectedConfigurableProperty<C, O, T, V>;
 declare function createVariantConfig(config: {
   label: string;

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

@@ -111,11 +111,11 @@ function generateClassName({ componentName, subComponentName, variantKey, varian
 	if (layerOptionalPseudoSelector) className = `${className}${layerOptionalPseudoSelector}`;
 	return className.replaceAll(/\s+/g, "-");
 }
-const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue) => {
+const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue, originalPropertyDefinition) => {
 	const { value, type } = schemaStateValue;
 	const propertyConfig = configurableProperties[propertyName];
 	let newValue;
-	if (propertyConfig.customValueRenderer) newValue = propertyConfig.customValueRenderer(schemaStateValue, schema, theme);
+	if (propertyConfig.customValueRenderer) newValue = propertyConfig.customValueRenderer(schemaStateValue, schema, theme, originalPropertyDefinition);
 	else {
 		const safeTwThemePath = propertyConfig.twThemePath;
 		newValue = theme(safeTwThemePath(type, String(value)));
@@ -218,10 +218,10 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 			}
 		} else if (typeof cssProperties === "string") {
 			const existingValue = currentStyles?.[fullClassName]?.[cssProperties];
-			cssDeclarations[cssProperties] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue);
+			cssDeclarations[cssProperties] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
 		} else if (Array.isArray(cssProperties)) for (const cssProp of cssProperties) {
 			const existingValue = currentStyles?.[fullClassName]?.[cssProp];
-			cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue);
+			cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
 		}
 		/**
 		* Button root layer workarounds & enhancements.