@yahoo/uds 3.98.0 → 3.100.0-beta.1

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";
@@ -163,6 +163,11 @@ const borderColor = {
 		return false;
 	}
 };
+const stroke = {
+	...borderColor,
+	name: "stroke",
+	cssProperties: "stroke"
+};
 const outlineWidth = {
 	name: "outlineWidth",
 	cssProperties: "outline-width",
@@ -195,16 +200,108 @@ 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"]
-	},
+	borderRadius,
+	borderRadiusVar,
 	borderColor,
+	stroke,
 	buttonSize: {
 		name: "buttonSize",
 		cssProperties: "--uds-button-size",
@@ -241,6 +338,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 +351,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 +363,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 +388,27 @@ 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) => {
+			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" | "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" | "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" | "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" | "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.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,7 +88,7 @@ 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[];

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,7 +88,7 @@ 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[];

package/dist/cli/commands/sync.cjs

@@ -4,6 +4,7 @@ const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_defaultTokensConfig = require('../../defaultTokensConfig.cjs');
 const require_runtime_breakpointsConfig = require('../../runtime/breakpointsConfig.cjs');
 const require_runtime_toastConfig = require('../../runtime/toastConfig.cjs');
+const require_runtime_tooltipConfig = require('../../runtime/tooltipConfig.cjs');
 const require_analytics = require('../dist/utils/analytics.cjs');
 const require_colors = require('../dist/lib/colors.cjs');
 const require_print = require('../dist/lib/print.cjs');
@@ -60,7 +61,8 @@ const syncCommand = {
 			const exportsJS = [`export const config = ${JSON.stringify(sortedConfig, null, 2)};`];
 			const runtimeConfigs = {
 				breakpoints: [require_runtime_breakpointsConfig.configToBreakpointsConfigContext(sortedConfig), "UDSBreakpointsConfigContextType"],
-				toast: [require_runtime_toastConfig.configToToastConfigContext(sortedConfig), "UDSToastConfigContextType"]
+				toast: [require_runtime_toastConfig.configToToastConfigContext(sortedConfig), "UDSToastConfigContextType"],
+				tooltip: [require_runtime_tooltipConfig.configToTooltipConfigContext(sortedConfig), "UDSTooltipConfigContextType"]
 			};
 			const runtimeTypeImports = [];
 			for (const [name, [json, type]] of Object.entries(runtimeConfigs)) {
@@ -74,10 +76,12 @@ const syncCommand = {
 			exportsTS.push(`export const runtimeConfig: UDSConfigContextType = {
   breakpoints: breakpointsRuntimeConfig,
   toast: toastRuntimeConfig,
+  tooltip: tooltipRuntimeConfig,
 };`);
 			exportsJS.push(`export const runtimeConfig = {
   breakpoints: breakpointsRuntimeConfig,
   toast: toastRuntimeConfig,
+  tooltip: tooltipRuntimeConfig,
 };`);
 			const configContentTs = `${importsTS.join("\n")}\n\n${exportsTS.join("\n\n")}\n`;
 			const configContentJs = `${exportsJS.join("\n\n")}\n`;

package/dist/cli/commands/sync.js

@@ -2,6 +2,7 @@
 import { defaultTokensConfig } from "../../defaultTokensConfig.js";
 import { configToBreakpointsConfigContext } from "../../runtime/breakpointsConfig.js";
 import { configToToastConfigContext } from "../../runtime/toastConfig.js";
+import { configToTooltipConfigContext } from "../../runtime/tooltipConfig.js";
 import { trackEvent } from "../dist/utils/analytics.js";
 import { green, magenta, red, yellow } from "../dist/lib/colors.js";
 import { print } from "../dist/lib/print.js";
@@ -57,7 +58,8 @@ const syncCommand = {
 			const exportsJS = [`export const config = ${JSON.stringify(sortedConfig, null, 2)};`];
 			const runtimeConfigs = {
 				breakpoints: [configToBreakpointsConfigContext(sortedConfig), "UDSBreakpointsConfigContextType"],
-				toast: [configToToastConfigContext(sortedConfig), "UDSToastConfigContextType"]
+				toast: [configToToastConfigContext(sortedConfig), "UDSToastConfigContextType"],
+				tooltip: [configToTooltipConfigContext(sortedConfig), "UDSTooltipConfigContextType"]
 			};
 			const runtimeTypeImports = [];
 			for (const [name, [json, type]] of Object.entries(runtimeConfigs)) {
@@ -71,10 +73,12 @@ const syncCommand = {
 			exportsTS.push(`export const runtimeConfig: UDSConfigContextType = {
   breakpoints: breakpointsRuntimeConfig,
   toast: toastRuntimeConfig,
+  tooltip: tooltipRuntimeConfig,
 };`);
 			exportsJS.push(`export const runtimeConfig = {
   breakpoints: breakpointsRuntimeConfig,
   toast: toastRuntimeConfig,
+  tooltip: tooltipRuntimeConfig,
 };`);
 			const configContentTs = `${importsTS.join("\n")}\n\n${exportsTS.join("\n\n")}\n`;
 			const configContentJs = `${exportsJS.join("\n\n")}\n`;

package/dist/components/client/Button.js

@@ -9,7 +9,7 @@ import { generateDefaultClassName } from "../../automated-config/dist/utils/inde
 import { SpringMotionConfig } from "./SpringMotionConfig.js";
 import React, { cloneElement, forwardRef, isValidElement, useImperativeHandle, useMemo, useRef } from "react";
 import { buttonIconSvgSize } from "@yahoo/uds/fixtures";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Progress } from "@yahoo/uds-icons";
 import { AnimatePresence, m, useReducedMotion } from "motion/react";
 
@@ -266,7 +266,7 @@ const Button = forwardRef(function Button({ size, variant, startIcon, endIcon, i
 				whileHover: "hover",
 				whileTap: "pressed",
 				...rest,
-				children: cloneElement(children, childProps, /* @__PURE__ */ jsxs(Fragment, { children: [
+				children: cloneElement(children, childProps, /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					startContent,
 					/* @__PURE__ */ jsx("span", {
 						className: styles.content,

package/dist/components/client/Tooltip/Tooltip.cjs

@@ -0,0 +1,37 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_components_client_Tooltip_UDSTooltipConfigProvider = require('./UDSTooltipConfigProvider.cjs');
+const require_components_client_Tooltip_tooltipContext = require('./tooltipContext.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
+
+//#region src/components/client/Tooltip/Tooltip.tsx
+function Tooltip({ children, placement = "top", open, portal = true }) {
+	const hideOnHoverOutside = open === void 0;
+	const controlledProps = open !== void 0 ? {
+		showTimeout: 0,
+		hideTimeout: 0,
+		timeout: 0,
+		mounted: open
+	} : void 0;
+	const { animationDuration, ariaKitPlacement } = require_components_client_Tooltip_UDSTooltipConfigProvider.useTooltipConfig({ placement });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Tooltip_tooltipContext.TooltipInternalContext.Provider, {
+		value: {
+			hideOnHoverOutside,
+			portal
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.TooltipProvider, {
+			placement: ariaKitPlacement,
+			animated: animationDuration,
+			open,
+			...controlledProps,
+			children
+		})
+	});
+}
+Tooltip.displayName = "Tooltip";
+
+//#endregion
+exports.Tooltip = Tooltip;

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

@@ -0,0 +1,16 @@
+
+import { UniversalTooltipProps } from "../../../types/dist/index.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Tooltip/Tooltip.d.ts
+declare function Tooltip({
+  children,
+  placement,
+  open,
+  portal
+}: UniversalTooltipProps): react_jsx_runtime0.JSX.Element;
+declare namespace Tooltip {
+  var displayName: string;
+}
+//#endregion
+export { Tooltip };

package/dist/components/client/Tooltip/Tooltip.d.ts

@@ -0,0 +1,16 @@
+
+import { UniversalTooltipProps } from "../../../types/dist/index.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Tooltip/Tooltip.d.ts
+declare function Tooltip({
+  children,
+  placement,
+  open,
+  portal
+}: UniversalTooltipProps): react_jsx_runtime0.JSX.Element;
+declare namespace Tooltip {
+  var displayName: string;
+}
+//#endregion
+export { Tooltip };

package/dist/components/client/Tooltip/Tooltip.js

@@ -0,0 +1,35 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { useTooltipConfig } from "./UDSTooltipConfigProvider.js";
+import { TooltipInternalContext } from "./tooltipContext.js";
+import { jsx } from "react/jsx-runtime";
+import { TooltipProvider } from "@ariakit/react";
+
+//#region src/components/client/Tooltip/Tooltip.tsx
+function Tooltip({ children, placement = "top", open, portal = true }) {
+	const hideOnHoverOutside = open === void 0;
+	const controlledProps = open !== void 0 ? {
+		showTimeout: 0,
+		hideTimeout: 0,
+		timeout: 0,
+		mounted: open
+	} : void 0;
+	const { animationDuration, ariaKitPlacement } = useTooltipConfig({ placement });
+	return /* @__PURE__ */ jsx(TooltipInternalContext.Provider, {
+		value: {
+			hideOnHoverOutside,
+			portal
+		},
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			placement: ariaKitPlacement,
+			animated: animationDuration,
+			open,
+			...controlledProps,
+			children
+		})
+	});
+}
+Tooltip.displayName = "Tooltip";
+
+//#endregion
+export { Tooltip };