@yahoo/uds 3.114.0-beta.2 → 3.114.0

package/dist/automated-config/dist/generated/universalTokensConfigAuto.cjs

@@ -882,6 +882,70 @@ const defaultUniversalTokensConfigAuto = {
 			}
 		}
 	},
+	bottomSheet: {
+		defaults: { variant: "default" },
+		variables: {
+			"variant/default/header": {
+				color: { rest: {
+					type: "foregroundPaletteColors",
+					value: "primary",
+					valueType: "alias"
+				} },
+				textVariant: { rest: {
+					type: "textVariants",
+					value: "headline1",
+					valueType: "alias"
+				} }
+			},
+			"variant/default/root": {
+				backgroundColor: { rest: {
+					type: "backgroundPaletteColors",
+					value: "primary",
+					valueType: "alias"
+				} },
+				borderColor: { rest: {
+					type: "linePaletteColors",
+					value: "primary",
+					valueType: "alias"
+				} },
+				borderRadius: { rest: {
+					type: "borderRadii",
+					value: "lg",
+					valueType: "alias"
+				} },
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} },
+				bottomMargin: { rest: {
+					type: "spacingAliases",
+					value: "0",
+					valueType: "alias"
+				} },
+				horizontalMargin: { rest: {
+					type: "spacingAliases",
+					value: "0",
+					valueType: "alias"
+				} },
+				shadow: { rest: {
+					type: "elevationAliases",
+					value: "elevation-2",
+					valueType: "alias"
+				} },
+				spacingHorizontal: { rest: {
+					type: "spacingAliases",
+					value: "4",
+					valueType: "alias"
+				} },
+				spacingVertical: { rest: {
+					type: "spacingAliases",
+					value: "0",
+					valueType: "alias"
+				} }
+			}
+		}
+	},
 	button: {
 		defaults: {
 			size: "md",
@@ -11898,6 +11962,26 @@ const defaultUniversalTokensConfigAuto = {
 			} }
 		}
 	},
+	scrim: {
+		defaults: { variant: "default" },
+		variables: { "variant/default/root": {
+			backdropBlur: { rest: {
+				type: "positiveIntegers",
+				value: 0,
+				valueType: "alias"
+			} },
+			backgroundColor: { rest: {
+				type: "alwaysPaletteAliases",
+				value: "always/black",
+				valueType: "alias"
+			} },
+			opacity: { rest: {
+				type: "opacitySteps",
+				value: "20",
+				valueType: "alias"
+			} }
+		} }
+	},
 	switch: {
 		defaults: {
 			size: "md",

package/dist/automated-config/dist/generated/universalTokensConfigAuto.d.cts

@@ -1,5 +1,5 @@
 
-import { AvatarConfig, BadgeConfig, ButtonConfig, CheckboxConfig, ChipConfig, DividerConfig, IconButtonConfig, InputConfig, LinkConfig, MenuContentConfig, MenuItemConfig, RadioConfig, SwitchConfig, ToastConfig, TooltipConfig } from "./generatedConfigs.cjs";
+import { AvatarConfig, BadgeConfig, BottomSheetConfig, ButtonConfig, CheckboxConfig, ChipConfig, DividerConfig, IconButtonConfig, InputConfig, LinkConfig, MenuContentConfig, MenuItemConfig, RadioConfig, ScrimConfig, SwitchConfig, ToastConfig, TooltipConfig } from "./generatedConfigs.cjs";
 import { ComponentSchema } from "../utils/buildConfigSchema.cjs";
 
 //#region ../automated-config/dist/generated/universalTokensConfigAuto.d.ts
@@ -7,6 +7,7 @@ import { ComponentSchema } from "../utils/buildConfigSchema.cjs";
 interface UniversalTokensConfigAuto {
   avatar: ComponentSchema<typeof AvatarConfig>;
   badge: ComponentSchema<typeof BadgeConfig>;
+  bottomSheet: ComponentSchema<typeof BottomSheetConfig>;
   button: ComponentSchema<typeof ButtonConfig>;
   checkbox: ComponentSchema<typeof CheckboxConfig>;
   chip: ComponentSchema<typeof ChipConfig>;
@@ -17,6 +18,7 @@ interface UniversalTokensConfigAuto {
   menuContent: ComponentSchema<typeof MenuContentConfig>;
   menuItem: ComponentSchema<typeof MenuItemConfig>;
   radio: ComponentSchema<typeof RadioConfig>;
+  scrim: ComponentSchema<typeof ScrimConfig>;
   switch: ComponentSchema<typeof SwitchConfig>;
   toast: ComponentSchema<typeof ToastConfig>;
   tooltip: ComponentSchema<typeof TooltipConfig>;

package/dist/automated-config/dist/generated/universalTokensConfigAuto.d.ts

@@ -1,5 +1,5 @@
 
-import { AvatarConfig, BadgeConfig, ButtonConfig, CheckboxConfig, ChipConfig, DividerConfig, IconButtonConfig, InputConfig, LinkConfig, MenuContentConfig, MenuItemConfig, RadioConfig, SwitchConfig, ToastConfig, TooltipConfig } from "./generatedConfigs.js";
+import { AvatarConfig, BadgeConfig, BottomSheetConfig, ButtonConfig, CheckboxConfig, ChipConfig, DividerConfig, IconButtonConfig, InputConfig, LinkConfig, MenuContentConfig, MenuItemConfig, RadioConfig, ScrimConfig, SwitchConfig, ToastConfig, TooltipConfig } from "./generatedConfigs.js";
 import { ComponentSchema } from "../utils/buildConfigSchema.js";
 
 //#region ../automated-config/dist/generated/universalTokensConfigAuto.d.ts
@@ -7,6 +7,7 @@ import { ComponentSchema } from "../utils/buildConfigSchema.js";
 interface UniversalTokensConfigAuto {
   avatar: ComponentSchema<typeof AvatarConfig>;
   badge: ComponentSchema<typeof BadgeConfig>;
+  bottomSheet: ComponentSchema<typeof BottomSheetConfig>;
   button: ComponentSchema<typeof ButtonConfig>;
   checkbox: ComponentSchema<typeof CheckboxConfig>;
   chip: ComponentSchema<typeof ChipConfig>;
@@ -17,6 +18,7 @@ interface UniversalTokensConfigAuto {
   menuContent: ComponentSchema<typeof MenuContentConfig>;
   menuItem: ComponentSchema<typeof MenuItemConfig>;
   radio: ComponentSchema<typeof RadioConfig>;
+  scrim: ComponentSchema<typeof ScrimConfig>;
   switch: ComponentSchema<typeof SwitchConfig>;
   toast: ComponentSchema<typeof ToastConfig>;
   tooltip: ComponentSchema<typeof TooltipConfig>;

package/dist/automated-config/dist/generated/universalTokensConfigAuto.js

@@ -881,6 +881,70 @@ const defaultUniversalTokensConfigAuto = {
 			}
 		}
 	},
+	bottomSheet: {
+		defaults: { variant: "default" },
+		variables: {
+			"variant/default/header": {
+				color: { rest: {
+					type: "foregroundPaletteColors",
+					value: "primary",
+					valueType: "alias"
+				} },
+				textVariant: { rest: {
+					type: "textVariants",
+					value: "headline1",
+					valueType: "alias"
+				} }
+			},
+			"variant/default/root": {
+				backgroundColor: { rest: {
+					type: "backgroundPaletteColors",
+					value: "primary",
+					valueType: "alias"
+				} },
+				borderColor: { rest: {
+					type: "linePaletteColors",
+					value: "primary",
+					valueType: "alias"
+				} },
+				borderRadius: { rest: {
+					type: "borderRadii",
+					value: "lg",
+					valueType: "alias"
+				} },
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} },
+				bottomMargin: { rest: {
+					type: "spacingAliases",
+					value: "0",
+					valueType: "alias"
+				} },
+				horizontalMargin: { rest: {
+					type: "spacingAliases",
+					value: "0",
+					valueType: "alias"
+				} },
+				shadow: { rest: {
+					type: "elevationAliases",
+					value: "elevation-2",
+					valueType: "alias"
+				} },
+				spacingHorizontal: { rest: {
+					type: "spacingAliases",
+					value: "4",
+					valueType: "alias"
+				} },
+				spacingVertical: { rest: {
+					type: "spacingAliases",
+					value: "0",
+					valueType: "alias"
+				} }
+			}
+		}
+	},
 	button: {
 		defaults: {
 			size: "md",
@@ -11897,6 +11961,26 @@ const defaultUniversalTokensConfigAuto = {
 			} }
 		}
 	},
+	scrim: {
+		defaults: { variant: "default" },
+		variables: { "variant/default/root": {
+			backdropBlur: { rest: {
+				type: "positiveIntegers",
+				value: 0,
+				valueType: "alias"
+			} },
+			backgroundColor: { rest: {
+				type: "alwaysPaletteAliases",
+				value: "always/black",
+				valueType: "alias"
+			} },
+			opacity: { rest: {
+				type: "opacitySteps",
+				value: "20",
+				valueType: "alias"
+			} }
+		} }
+	},
 	switch: {
 		defaults: {
 			size: "md",

package/dist/automated-config/dist/mapTextVariantFixtureToValue.cjs

@@ -1,20 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 const require_index = require('../../css-tokens/dist/index.cjs');
-const require_assertUnreachable = require('./utils/assertUnreachable.cjs');
 
 //#region ../automated-config/dist/mapTextVariantFixtureToValue.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
-const mapTextVariantFixtureToValue = (key) => (selected, value) => {
-	switch (key) {
-		case "fontFamily": return `udsFontFamily[${require_index.textVariantsSafe(value)}]`;
-		case "fontSize": return `udsFontSize[${require_index.textVariantsSafe(value)}]`;
-		case "lineHeight": return `udsLineHeight[${require_index.textVariantsSafe(value)}]`;
-		case "letterSpacing": return `udsLetterSpacing[${require_index.textVariantsSafe(value)}]`;
-		case "textTransform": return `udsTextTransform[${require_index.textVariantsSafe(value)}]`;
-		case "fontWeight": return `udsFontWeight[${require_index.textVariantsSafe(value)}]`;
-	}
-	return require_assertUnreachable.assertUnreachable(key);
-};
+const mapTextVariantFixtureToValue = (key) => (selected, value) => `typography.${key}.${require_index.textVariantsSafe(value)}`;
 
 //#endregion
 exports.mapTextVariantFixtureToValue = mapTextVariantFixtureToValue;

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

@@ -1,20 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { textVariantsSafe } from "../../css-tokens/dist/index.js";
-import { assertUnreachable } from "./utils/assertUnreachable.js";
 
 //#region ../automated-config/dist/mapTextVariantFixtureToValue.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
-const mapTextVariantFixtureToValue = (key) => (selected, value) => {
-	switch (key) {
-		case "fontFamily": return `udsFontFamily[${textVariantsSafe(value)}]`;
-		case "fontSize": return `udsFontSize[${textVariantsSafe(value)}]`;
-		case "lineHeight": return `udsLineHeight[${textVariantsSafe(value)}]`;
-		case "letterSpacing": return `udsLetterSpacing[${textVariantsSafe(value)}]`;
-		case "textTransform": return `udsTextTransform[${textVariantsSafe(value)}]`;
-		case "fontWeight": return `udsFontWeight[${textVariantsSafe(value)}]`;
-	}
-	return assertUnreachable(key);
-};
+const mapTextVariantFixtureToValue = (key) => (selected, value) => `typography.${key}.${textVariantsSafe(value)}`;
 
 //#endregion
 export { mapTextVariantFixtureToValue };

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

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 const require_index = require('../../css-tokens/dist/index.cjs');
-const require_assertUnreachable = require('./utils/assertUnreachable.cjs');
 const require_mapTextVariantFixtureToValue = require('./mapTextVariantFixtureToValue.cjs');
+const require_assertUnreachable = require('./utils/assertUnreachable.cjs');
 const require_mapColorFixtureToValue = require('./utils/mapColorFixtureToValue.cjs');
 const require_index$1 = require('../../motion-tokens/dist/index.cjs');
 
@@ -10,6 +10,11 @@ const require_index$1 = require('../../motion-tokens/dist/index.cjs');
 const isInputWrapperCtx = (context) => {
 	return context.componentName === "input" && context.layer === "inputWrapper";
 };
+const hexToRgb = (hex) => {
+	hex = hex.replace("#", "");
+	if (hex.length === 3) hex = hex.split("").map((char) => char + char).join("");
+	return `${parseInt(hex.substring(0, 2), 16)} ${parseInt(hex.substring(2, 4), 16)} ${parseInt(hex.substring(4, 6), 16)}`;
+};
 const backgroundColor = {
 	name: "backgroundColor",
 	cssProperties: "background-color",
@@ -231,6 +236,18 @@ const spacingVertical = {
 	twThemePath: (_, value) => `spacing[${value}]`,
 	possibleFixtures: ["spacingAliases"]
 };
+const horizontalMargin = {
+	name: "horizontalMargin",
+	cssProperties: ["margin-left", "margin-right"],
+	twThemePath: (_, value) => `spacing[${value}]`,
+	possibleFixtures: ["spacingAliases"]
+};
+const bottomMargin = {
+	name: "bottomMargin",
+	cssProperties: "margin-bottom",
+	twThemePath: (_, value) => `spacing[${value}]`,
+	possibleFixtures: ["spacingAliases"]
+};
 const height = {
 	name: "height",
 	cssProperties: "height",
@@ -297,6 +314,17 @@ const insetShadow = {
 	},
 	possibleFixtures: ["shadowVariantsWithInvert"]
 };
+const shadowVar = {
+	...shadow,
+	name: "shadowVar",
+	cssProperties: `--${require_index.DROP_SHADOW_PREFIX}`
+};
+const opacity = {
+	name: "opacity",
+	cssProperties: "opacity",
+	twThemePath: (_, value) => `opacity[${value}]`,
+	possibleFixtures: ["opacitySteps"]
+};
 const publicProperties = {
 	backgroundColor,
 	borderWidth,
@@ -335,12 +363,7 @@ const publicProperties = {
 	letterSpacing,
 	gap,
 	color,
-	opacity: {
-		name: "opacity",
-		cssProperties: "opacity",
-		twThemePath: (_, value) => `opacity[${value}]`,
-		possibleFixtures: ["opacitySteps"]
-	},
+	opacity,
 	fillOpacity: {
 		name: "fillOpacity",
 		cssProperties: "fill-opacity",
@@ -366,16 +389,14 @@ const publicProperties = {
 			return String(schemaValue.value);
 		}
 	},
+	horizontalMargin,
+	bottomMargin,
 	spacingHorizontal,
 	spacingVertical,
 	textVariant,
 	textDecorationLine,
 	shadow,
-	shadowVar: {
-		...shadow,
-		name: "shadowVar",
-		cssProperties: `--${require_index.DROP_SHADOW_PREFIX}`
-	},
+	shadowVar,
 	insetShadow,
 	height,
 	width,
@@ -417,6 +438,31 @@ const publicProperties = {
 		...backgroundColor,
 		name: "blurBackgroundColorFallback",
 		cssProperties: `--${require_index.BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}`
+	},
+	scrimBackgroundColor: {
+		name: "scrimBackgroundColor",
+		cssProperties: "--uds-scrim-background-color",
+		twThemePath: () => {
+			return ``;
+		},
+		possibleFixtures: [
+			"backgroundPaletteColors",
+			"spectrumColors",
+			"alwaysPaletteAliases"
+		],
+		customValueRenderer: ({ value, type }, schema, theme) => {
+			const resolved = theme(require_mapColorFixtureToValue.mapColorFixtureToValue(type, value));
+			if (resolved.startsWith("#")) return hexToRgb(resolved) ?? resolved;
+			if (resolved.startsWith("rgb(") && resolved.endsWith(")")) return resolved.slice(4, -1);
+			return resolved;
+		}
+	},
+	scrimOpacity: {
+		...opacity,
+		name: "scrimOpacity",
+		cssProperties: "--uds-scrim-opacity",
+		twThemePath: () => "",
+		customValueRenderer: ({ value }) => `${String(value)}%`
 	}
 };
 const internalProperties = {

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

@@ -46,6 +46,8 @@ declare const publicProperties: {
   readonly iconSize: ConfigurableProperty<"iconSizes", unknown>;
   readonly spacing: ConfigurableProperty<"spacingAliases", unknown>;
   readonly iconVariant: ConfigurableProperty<"iconVariants", unknown>;
+  readonly horizontalMargin: ConfigurableProperty<"spacingAliases", unknown>;
+  readonly bottomMargin: ConfigurableProperty<"spacingAliases", unknown>;
   readonly spacingHorizontal: ConfigurableProperty<"spacingAliases", unknown>;
   readonly spacingVertical: ConfigurableProperty<"spacingAliases", unknown>;
   readonly textVariant: ConfigurableProperty<"textVariants", unknown>;
@@ -59,6 +61,8 @@ declare const publicProperties: {
   readonly backdropBlur: ConfigurableProperty<"positiveIntegers", unknown>;
   readonly blurBackgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
   readonly blurBackgroundColorFallback: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
+  readonly scrimBackgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
+  readonly scrimOpacity: ConfigurableProperty<"opacitySteps", unknown>;
 };
 declare const configurableProperties: {
   outlineWidth: ConfigurableProperty<"borderWidths" | "spacingAliases", unknown>;
@@ -88,6 +92,8 @@ declare const configurableProperties: {
   iconSize: ConfigurableProperty<"iconSizes", unknown>;
   spacing: ConfigurableProperty<"spacingAliases", unknown>;
   iconVariant: ConfigurableProperty<"iconVariants", unknown>;
+  horizontalMargin: ConfigurableProperty<"spacingAliases", unknown>;
+  bottomMargin: ConfigurableProperty<"spacingAliases", unknown>;
   spacingHorizontal: ConfigurableProperty<"spacingAliases", unknown>;
   spacingVertical: ConfigurableProperty<"spacingAliases", unknown>;
   textVariant: ConfigurableProperty<"textVariants", unknown>;
@@ -101,6 +107,8 @@ declare const configurableProperties: {
   backdropBlur: ConfigurableProperty<"positiveIntegers", unknown>;
   blurBackgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
   blurBackgroundColorFallback: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
+  scrimBackgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
+  scrimOpacity: ConfigurableProperty<"opacitySteps", unknown>;
 };
 type ExtendablePropertiesName = keyof typeof configurableProperties;
 type ConfigurablePropertiesName = keyof typeof publicProperties;

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

@@ -46,6 +46,8 @@ declare const publicProperties: {
   readonly iconSize: ConfigurableProperty<"iconSizes", unknown>;
   readonly spacing: ConfigurableProperty<"spacingAliases", unknown>;
   readonly iconVariant: ConfigurableProperty<"iconVariants", unknown>;
+  readonly horizontalMargin: ConfigurableProperty<"spacingAliases", unknown>;
+  readonly bottomMargin: ConfigurableProperty<"spacingAliases", unknown>;
   readonly spacingHorizontal: ConfigurableProperty<"spacingAliases", unknown>;
   readonly spacingVertical: ConfigurableProperty<"spacingAliases", unknown>;
   readonly textVariant: ConfigurableProperty<"textVariants", unknown>;
@@ -59,6 +61,8 @@ declare const publicProperties: {
   readonly backdropBlur: ConfigurableProperty<"positiveIntegers", unknown>;
   readonly blurBackgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
   readonly blurBackgroundColorFallback: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
+  readonly scrimBackgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
+  readonly scrimOpacity: ConfigurableProperty<"opacitySteps", unknown>;
 };
 declare const configurableProperties: {
   outlineWidth: ConfigurableProperty<"borderWidths" | "spacingAliases", unknown>;
@@ -88,6 +92,8 @@ declare const configurableProperties: {
   iconSize: ConfigurableProperty<"iconSizes", unknown>;
   spacing: ConfigurableProperty<"spacingAliases", unknown>;
   iconVariant: ConfigurableProperty<"iconVariants", unknown>;
+  horizontalMargin: ConfigurableProperty<"spacingAliases", unknown>;
+  bottomMargin: ConfigurableProperty<"spacingAliases", unknown>;
   spacingHorizontal: ConfigurableProperty<"spacingAliases", unknown>;
   spacingVertical: ConfigurableProperty<"spacingAliases", unknown>;
   textVariant: ConfigurableProperty<"textVariants", unknown>;
@@ -101,6 +107,8 @@ declare const configurableProperties: {
   backdropBlur: ConfigurableProperty<"positiveIntegers", unknown>;
   blurBackgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
   blurBackgroundColorFallback: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
+  scrimBackgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
+  scrimOpacity: ConfigurableProperty<"opacitySteps", unknown>;
 };
 type ExtendablePropertiesName = keyof typeof configurableProperties;
 type ConfigurablePropertiesName = keyof typeof publicProperties;

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

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 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 { assertUnreachable } from "./utils/assertUnreachable.js";
 import { mapTextVariantFixtureToValue } from "./mapTextVariantFixtureToValue.js";
+import { assertUnreachable } from "./utils/assertUnreachable.js";
 import { mapColorFixtureToValue } from "./utils/mapColorFixtureToValue.js";
 import { SCALE_EFFECTS } from "../../motion-tokens/dist/index.js";
 
@@ -10,6 +10,11 @@ import { SCALE_EFFECTS } from "../../motion-tokens/dist/index.js";
 const isInputWrapperCtx = (context) => {
 	return context.componentName === "input" && context.layer === "inputWrapper";
 };
+const hexToRgb = (hex) => {
+	hex = hex.replace("#", "");
+	if (hex.length === 3) hex = hex.split("").map((char) => char + char).join("");
+	return `${parseInt(hex.substring(0, 2), 16)} ${parseInt(hex.substring(2, 4), 16)} ${parseInt(hex.substring(4, 6), 16)}`;
+};
 const backgroundColor = {
 	name: "backgroundColor",
 	cssProperties: "background-color",
@@ -231,6 +236,18 @@ const spacingVertical = {
 	twThemePath: (_, value) => `spacing[${value}]`,
 	possibleFixtures: ["spacingAliases"]
 };
+const horizontalMargin = {
+	name: "horizontalMargin",
+	cssProperties: ["margin-left", "margin-right"],
+	twThemePath: (_, value) => `spacing[${value}]`,
+	possibleFixtures: ["spacingAliases"]
+};
+const bottomMargin = {
+	name: "bottomMargin",
+	cssProperties: "margin-bottom",
+	twThemePath: (_, value) => `spacing[${value}]`,
+	possibleFixtures: ["spacingAliases"]
+};
 const height = {
 	name: "height",
 	cssProperties: "height",
@@ -297,6 +314,17 @@ const insetShadow = {
 	},
 	possibleFixtures: ["shadowVariantsWithInvert"]
 };
+const shadowVar = {
+	...shadow,
+	name: "shadowVar",
+	cssProperties: `--${DROP_SHADOW_PREFIX}`
+};
+const opacity = {
+	name: "opacity",
+	cssProperties: "opacity",
+	twThemePath: (_, value) => `opacity[${value}]`,
+	possibleFixtures: ["opacitySteps"]
+};
 const publicProperties = {
 	backgroundColor,
 	borderWidth,
@@ -335,12 +363,7 @@ const publicProperties = {
 	letterSpacing,
 	gap,
 	color,
-	opacity: {
-		name: "opacity",
-		cssProperties: "opacity",
-		twThemePath: (_, value) => `opacity[${value}]`,
-		possibleFixtures: ["opacitySteps"]
-	},
+	opacity,
 	fillOpacity: {
 		name: "fillOpacity",
 		cssProperties: "fill-opacity",
@@ -366,16 +389,14 @@ const publicProperties = {
 			return String(schemaValue.value);
 		}
 	},
+	horizontalMargin,
+	bottomMargin,
 	spacingHorizontal,
 	spacingVertical,
 	textVariant,
 	textDecorationLine,
 	shadow,
-	shadowVar: {
-		...shadow,
-		name: "shadowVar",
-		cssProperties: `--${DROP_SHADOW_PREFIX}`
-	},
+	shadowVar,
 	insetShadow,
 	height,
 	width,
@@ -417,6 +438,31 @@ const publicProperties = {
 		...backgroundColor,
 		name: "blurBackgroundColorFallback",
 		cssProperties: `--${BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}`
+	},
+	scrimBackgroundColor: {
+		name: "scrimBackgroundColor",
+		cssProperties: "--uds-scrim-background-color",
+		twThemePath: () => {
+			return ``;
+		},
+		possibleFixtures: [
+			"backgroundPaletteColors",
+			"spectrumColors",
+			"alwaysPaletteAliases"
+		],
+		customValueRenderer: ({ value, type }, schema, theme) => {
+			const resolved = theme(mapColorFixtureToValue(type, value));
+			if (resolved.startsWith("#")) return hexToRgb(resolved) ?? resolved;
+			if (resolved.startsWith("rgb(") && resolved.endsWith(")")) return resolved.slice(4, -1);
+			return resolved;
+		}
+	},
+	scrimOpacity: {
+		...opacity,
+		name: "scrimOpacity",
+		cssProperties: "--uds-scrim-opacity",
+		twThemePath: () => "",
+		customValueRenderer: ({ value }) => `${String(value)}%`
 	}
 };
 const internalProperties = {

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<"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[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", 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 ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", 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 ("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 { 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<"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[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", 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 ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", 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 ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
 } | null; //#endregion
 //#endregion
 export { getConfigVariantProperties };