@tamagui/web 3.0.0-beta.924.1 → 3.0.1

package/dist/esm/helpers/getSplitStyles.mjs

@@ -1,7 +1,8 @@
+import { getTransitionResolver } from "@tamagui/animation-helpers/transitionResolver";
 import { isClient } from "@tamagui/constants";
 import { nonAnimatableStyleProps, stylePropsAll, stylePropsInput, stylePropsText, stylePropsTransform, validStyles } from "@tamagui/helpers";
-import { addTransformValue, createTransformAccumulator, finalizeTransformAccumulator, getTransformPartKeys, removeTransformValue } from "@tamagui/style-grammar/runtime";
-import { getConfig, getConfigMaybe } from "../config.mjs";
+import { addTransformValue, createTransformAccumulator, finalizeTransformAccumulator, getTransformPartKeys, grammarMaxNonPlatformDepth, namedCssColors, removeTransformValue } from "@tamagui/style-grammar/runtime";
+import { getConfig, getConfigMaybe, getSetting } from "../config.mjs";
 import { isDevTools } from "../constants/isDevTools.mjs";
 import { defaultComponentStateMounted } from "../defaultComponentState.mjs";
 import { isVariable } from "../createVariable.mjs";
@@ -11,12 +12,14 @@ import { splitComponents, startsValueFunction } from "./borderComponents.mjs";
 import { getConfigRevisionState } from "./grammarConfig.mjs";
 import { mediaKeyMatch, mediaState } from "./mediaState.mjs";
 import { getStyleStaticConfig } from "./styleStaticConfig.mjs";
+import { mergeFrontendCondition } from "./styleFrontend.mjs";
 import { warnOnce, warnRefusedValue } from "./warnOnce.mjs";
 import { getDynamicEnv } from "./styledDynamic.mjs";
 import { getRulesForIdentifier, insertStyleRules, shouldInsertStyleRules } from "./insertStyleRule.mjs";
 import { log } from "./log.mjs";
 import { normalizeColor } from "./normalizeColor.mjs";
 import { normalizeValueWithProperty } from "./normalizeValueWithProperty.mjs";
+import { parseNativeTransform } from "./parseNativeTransform.native.js";
 import { resolveVariableValue } from "./resolveVariableValue.mjs";
 import { HOC_CLASSNAME_MARKER, skipProps } from "./skipProps.mjs";
 import { styleOriginalValues } from "./styleOriginalValues.mjs";
@@ -215,6 +218,7 @@ const passFrontendContainerType = 27;
 const passSourceLayer = 28;
 const passParentCursor = 29;
 const passMapSourceKey = 30;
+const passVariantOutput = 31;
 const passFlags = 13;
 const sourceLayerBase = 0;
 const sourceLayerVariant = 1;
@@ -229,6 +233,9 @@ const passHocFlag = 16;
 const passTextFlag = 32;
 const passInputFlag = 64;
 const passAsChildStyleFlag = 128;
+function isRemovedVendorStyleProp(property) {
+	return /^(Webkit|Moz|ms)[A-Z]/.test(property) && !(property in stylePropsAll);
+}
 function isValidStyleKey(key, validStyles) {
 	return key in validStyles;
 }
@@ -252,7 +259,6 @@ function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false
 	const shouldCheckSkipProps = !noSkip;
 	const asChildExceptStyleLike = Boolean(flags & passAsChildStyleFlag);
 	const isTextOrInput = isText || isInput;
-	const hocParentVariants = isHOC ? parentVariants : void 0;
 	let keyInit = keyOg;
 	let valInit = valOg;
 	if (keyInit === "children") {
@@ -276,17 +282,24 @@ function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false
 				return;
 			}
 			const resolveClassName = styleFrontend?.resolveClassName;
+			let composedProps = null;
 			const sink = (entry) => {
 				const property = entry[0];
-				if (entry[2] !== void 0) {
-					if (isValidStyleKey(property, validStyles)) contributeValue(styleState, property, entry[1], void 0, false, entry[2]);
+				const condition2 = entry[2];
+				if (property.charCodeAt(0) === 95 && property.charCodeAt(1) === 95) {
+					composedProps ||= {};
+					composedProps[property] = mergeFrontendCondition(composedProps[property], entry[1], condition2);
+					return;
+				}
+				if (condition2 !== void 0) {
+					if (isValidStyleKey(property, validStyles)) contributeValue(styleState, property, entry[1], void 0, false, condition2);
 					else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${property}" is not a valid style on this component; the frontend value is dropped.`);
-				} else {
-					if (property === "group") pass[passFrontendGroup] = entry[1];
-					else if (property === "container") pass[passFrontendContainer] = entry[1];
-					else if (property === "containerType") pass[passFrontendContainerType] = entry[1];
-					contributeProp(pass, property, entry[1]);
+					return;
 				}
+				if (property === "group") pass[passFrontendGroup] = entry[1];
+				else if (property === "container") pass[passFrontendContainer] = entry[1];
+				else if (property === "containerType") pass[passFrontendContainerType] = entry[1];
+				contributeProp(pass, property, entry[1]);
 			};
 			let start = 0;
 			for (let index = 0; index <= valInit.length; index++) {
@@ -312,18 +325,38 @@ function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false
 				}
 				start = index + 1;
 			}
+			if (composedProps) {
+				const composed = styleFrontend.compose?.(composedProps);
+				for (const property in composed) contributeProp(pass, property, composed[property]);
+			}
 		}
 		return;
 	}
 	if (keyInit === HOC_CLASSNAME_MARKER) {
-		if (valInit && typeof valInit === "object") {
+		if (valInit) {
+			const [hocClassNames, hocSlots] = valInit;
 			const direct = styleState;
 			const layers = direct.flatPropertyLayers ||= /* @__PURE__ */ new Map();
-			for (const property in valInit) {
+			for (const property in hocClassNames) {
+				if (hocSlots?.has(property)) continue;
 				clearDirectStyle(styleState, property);
-				styleState.classNames[property] = valInit[property];
+				styleState.classNames[property] = hocClassNames[property];
 				layers.set(property, pass[passSourceLayer]);
 			}
+			if (hocSlots) {
+				const slots = direct.flatSlots ||= /* @__PURE__ */ new Map();
+				const markerLayer = pass[passSourceLayer];
+				for (const [slot, entries] of hocSlots) for (const entry of entries) {
+					pass[passSourceLayer] = Math.max(entry[7] >> 5, sourceLayerResolver);
+					if (!ownsSourceLayer(styleState, entry[0], !!entry[2])) continue;
+					if (!isHOC && styleState.styleProps.isAnimated && (slot === "transition" || entry[8]) && !(entry[0] in nonAnimatableStyleProps)) {
+						const property = entry[0] === "--t-x" ? "x" : entry[0] === "--t-y" ? "y" : entry[0] === "--t-scale-x" ? "scaleX" : entry[0] === "--t-scale-y" ? "scaleY" : entry[0];
+						const value = styleState.animationDriver?.inputStyle === "value" ? entry[6] : entry[1];
+						entry[3] ? contributeValue(styleState, property, value, entry[6], false, entry[3]) : emitValue(styleState, property, value, null, entry[6], false);
+					} else writeStyleSlot(slots, slot, [...entry], pass[passSourceLayer]);
+				}
+				pass[passSourceLayer] = markerLayer;
+			}
 		}
 		return;
 	}
@@ -351,11 +384,30 @@ function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false
 				continue;
 			}
 			const styleOriginals = shouldTrackStyleTokenProvenance ? styleOriginalValues.get(style) : void 0;
-			for (const key in style) {
-				if (style[key] == null) continue;
-				if (key === "containerName") pass[passContainerName] = style[key];
-				else if (key === "containerType") pass[passContainerType] = style[key];
-				contributeValue(styleState, key, style[key], styleOriginals?.[key]);
+			for (const authoredKey in style) {
+				const value = style[authoredKey];
+				if (value == null) continue;
+				const key = disableExpandShorthands ? authoredKey : shorthands[authoredKey] || authoredKey;
+				let inline = !styleState.styleProps.stylePieceEntries;
+				if (key === "containerName") {
+					pass[passContainerName] = value;
+					inline = false;
+				} else if (key === "containerType") {
+					pass[passContainerType] = value;
+					inline = false;
+				}
+				if (inline) {
+					if (typeof value === "string") {
+						const [segments] = getConfigRevisionState(conf).parseFlatValue(value);
+						for (let index2 = 4; index2 < segments.length; index2 += 5) if (!(segments[index2] & 1)) {
+							inline = false;
+							break;
+						}
+					} else if (value && typeof value === "object" && !Array.isArray(value) && !isVariable(value) && classifyConditionalObject(value, styleState) !== 0) inline = false;
+				}
+				styleState.flatInlineStyleProp = inline;
+				contributeValue(styleState, key, value, styleOriginals?.[authoredKey]);
+				styleState.flatInlineStyleProp = false;
 			}
 		}
 		pass[passSourceLayer] = layerBeforeStyle;
@@ -365,12 +417,26 @@ function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false
 		const defaultVal = defaultProps[keyOg] ?? defaultProps[keyInit];
 		if (defaultVal !== void 0 && valInit === defaultVal) return;
 	}
+	if (process.env.NODE_ENV === "development") {
+		if (!isValidStyleKey(keyInit, validStyles) && (keyInit === "animation" || !(keyInit in stylePropsAll)) && (!variants || !(keyInit in variants))) {
+			let replacement;
+			if (keyInit === "animation") replacement = "transition=";
+			else if (keyInit === "hoverStyle") replacement = "hover: clause";
+			else if (keyInit === "pressStyle") replacement = "press: clause";
+			else if (keyInit === "focusStyle") replacement = "focus: clause";
+			else if (keyInit === "enterStyle") replacement = "enter: clause";
+			else if (keyInit === "exitStyle") replacement = "exit: clause";
+			else if (keyInit.charCodeAt(0) === 36 && keyInit.length > 1) replacement = `${keyInit.slice(1)}: clause`;
+			if (replacement) warnOnce(`v2-prop:${keyInit}`, `prop "${keyInit}" was removed in v3; use ${replacement}`);
+		}
+	}
 	if (keyInit in skipProps && shouldSkipDirectProps && !neverSkipProps?.[keyInit]) {
 		if (keyInit === "container") pass[passContainerValue] = valInit;
 		if (keyInit === "transition" && typeof valInit === "string") {
-			const animationConfig = driverAnimations?.[valInit];
-			if (animationConfig && driverOutputStyle === "css" && process.env.IS_STATIC === "is_static") valInit = `all ${animationConfig}`;
-			else if (animationConfig) return;
+			const transitions = getTransitionResolver();
+			const resolved = transitions?.resolve(valInit, { animations: driverAnimations });
+			if (resolved?.fused) if (driverOutputStyle === "css" && process.env.IS_STATIC === "is_static") valInit = transitions.toCSS(resolved) ?? valInit;
+			else return;
 		} else return;
 	}
 	let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles);
@@ -378,11 +444,15 @@ function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false
 		viewProps[keyInit] = valInit;
 		return;
 	}
+	if (pass[passVariantOutput] && !isValidStyleKeyInit && !keyInit.startsWith("aria-") && !(keyInit in stylePropsAll) && !(keyInit in skipProps) && !(variants && keyInit in variants) && !(parentVariants && keyInit in parentVariants) && !styledContextKeys?.has(keyInit) && !(styledContext && keyInit in styledContext)) {
+		if (process.env.NODE_ENV === "development") warnOnce(`variant-non-style:${keyInit}`, `a variant set "${keyInit}", which is not a style. Variants hold styles and aria/data attributes only: set "${keyInit}" on the component one level up.`);
+		return;
+	}
 	if (!noExpand) {
 		if (keyInit === "disabled" && valInit === true) {
 			viewProps["aria-disabled"] = true;
 			if (isInput || elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") viewProps.disabled = true;
-			if (!variants?.disabled) return;
+			if (!variants?.disabled && !isHOC) return;
 		}
 		if (keyInit === "testID") {
 			viewProps["data-testid"] = valInit;
@@ -401,9 +471,8 @@ function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false
 	let isVariant = !isValidStyleKeyInit && variants && keyInit in variants;
 	const isStyleProp = isValidStyleKeyInit || isVariant && !noExpand;
 	if (isStyleProp && asChildExceptStyleLike) return;
-	const shouldPassProp = !isStyleProp && isHOC || hocParentVariants && keyInit in hocParentVariants || inlineProps?.has(keyInit);
-	const parentVariant = parentVariants?.[keyInit];
-	const isHOCShouldPassThrough = Boolean(isHOC && (parentVariant || keyInit in skipProps));
+	const shouldPassProp = !isStyleProp && isHOC || isHOC && keyInit === "disabled" || parentVariants && keyInit in parentVariants || inlineProps?.has(keyInit);
+	const isHOCShouldPassThrough = isHOC && keyInit in skipProps;
 	const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
 	if (process.env.NODE_ENV === "development" && debug === "verbose") {
 		console.groupCollapsed(`  \u{1F511} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""}`);
@@ -427,7 +496,7 @@ function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false
 		if (!isVariant) return;
 	}
 	if (shouldCheckSkipProps && !neverSkipProps?.[keyInit]) {
-		if (keyInit in skipProps && !(keyInit === "transition" && typeof valInit === "string" && !driverAnimations?.[valInit])) {
+		if (keyInit in skipProps && !(keyInit === "transition" && typeof valInit === "string" && !getTransitionResolver()?.resolve(valInit, { animations: driverAnimations }).fused)) {
 			if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
 			return;
 		}
@@ -455,7 +524,7 @@ function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false
 	}
 	const isHostStyleKey = isValidStyleKeyInit || false;
 	if (isHostStyleKey || isStyledContextProp) {
-		contributeValue(styleState, keyInit, valInit, originalOg, !isHostStyleKey);
+		contributeValue(styleState, keyInit, valInit, originalOg, !isHostStyleKey || isStyledContextProp && typeof valInit === "boolean");
 		return;
 	}
 	const condition = pass[passParentCursor];
@@ -468,8 +537,8 @@ function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false
 		} else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${keyInit}" is not a valid style on this component; the conditional variant value is dropped.`);
 		return;
 	}
-	if (keyInit in stylePropsAll) {
-		if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${keyInit}" is a text style prop and this component is not text \u2014 it would render on neither platform. Use a Text-based component, or html.* for raw web elements.`);
+	if (keyInit in stylePropsAll || isRemovedVendorStyleProp(keyInit)) {
+		if (process.env.NODE_ENV === "development" && true) console.warn(`[tamagui] "${keyInit}" is a text style prop and this component is not text \u2014 it would render on neither platform. Use a Text-based component, or html.* for raw web elements.`);
 		return;
 	}
 	viewProps[keyInit] = valInit;
@@ -497,7 +566,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 	const variants = styleStaticConfig.variants;
 	const viewProps = {};
 	const mediaState$1 = styleProps.mediaState || mediaState;
-	let shouldDoClasses = !process.env.TAMAGUI_DID_OUTPUT_CSS && acceptsClassName && !styleProps.noClass;
+	let shouldDoClasses = process.env.TAMAGUI_RUNTIME !== "island" && acceptsClassName && !styleProps.noClass;
 	const rulesToInsert = {};
 	const classNames = {};
 	let hasMedia = false;
@@ -553,7 +622,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 	let frontendContainer;
 	let frontendContainerType;
 	const processedProps = props;
-	const parentVariants = parentStaticConfig ? getStyleStaticConfig(parentStaticConfig, conf).variants : void 0;
+	const parentVariants = isHOC ? staticConfig.Component?.staticConfig?.variants : void 0;
 	const defaultProps = asChild ? styleStaticConfig.defaultProps : void 0;
 	const asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
 	let containerValue;
@@ -577,7 +646,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 		styledContextKeys,
 		(noSkip ? passNoSkipFlag : 0) | (disableExpandShorthands ? passDisableShorthandsFlag : 0) | (noExpand ? passNoExpandFlag : 0) | (noMergeStyle ? passNoMergeFlag : 0) | (isHOC ? passHocFlag : 0) | (isText ? passTextFlag : 0) | (isInput ? passInputFlag : 0) | (asChildExceptStyleLike ? passAsChildStyleFlag : 0),
 		debug,
-		parentStaticConfig,
+		process.env.NODE_ENV === "development" ? parentStaticConfig : void 0,
 		defaultProps,
 		driverAnimations,
 		driverOutputStyle,
@@ -624,6 +693,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 	}
 	const resolvers = staticConfig.resolvers;
 	if (resolvers && !noExpand) {
+		const prevSourceLayer = pass[passSourceLayer];
 		pass[passSourceLayer] = sourceLayerResolver;
 		const flagsBefore = pass[passFlags];
 		pass[passFlags] = flagsBefore | passNoExpandFlag;
@@ -636,6 +706,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 			}
 		}
 		pass[passFlags] = flagsBefore;
+		pass[passSourceLayer] = prevSourceLayer;
 	}
 	className = pass[passClassName];
 	shouldDoClasses = pass[passShouldDoClasses];
@@ -669,6 +740,8 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 		if (slots) for (const [slot, entries] of slots) styleProps.stylePieceEntries[slot] = entries;
 	}
 	completeResolvedStyles(styleState);
+	if (styleState.flatGroupKeys?.size) pseudoGroups = styleState.flatGroupKeys;
+	if (styleState.flatGroupMedia?.size) mediaGroups = styleState.flatGroupMedia;
 	if (styleProps.isStatic) for (const property in classNames) {
 		const identifier = classNames[property];
 		if (rulesToInsert[identifier]) continue;
@@ -748,7 +821,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 				const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "";
 				const group = props.group ?? frontendGroup;
 				const groupClassName = group ? `t_group_${group}` : "";
-				let finalClassName = isText ? "is_Text" : "is_View";
+				let finalClassName = staticConfig.isDOM ? "is_DOM" : isText ? "is_Text" : "is_View";
 				if (fontFamilyClassName) finalClassName += ` ${fontFamilyClassName}`;
 				let hasPropertyClassNames = false;
 				if (classNames) for (const key in classNames) {
@@ -757,7 +830,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 				}
 				if (groupClassName) finalClassName += ` ${groupClassName}`;
 				if (className) finalClassName += ` ${className}`;
-				if (isHOC && hasPropertyClassNames) viewProps[HOC_CLASSNAME_MARKER] = classNames;
+				if (isHOC && hasPropertyClassNames) viewProps[HOC_CLASSNAME_MARKER] = [classNames, styleState.flatCapturedSlots];
 				if (finalClassName) viewProps.className = finalClassName;
 				if (style) viewProps.style = style;
 			}
@@ -788,7 +861,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 const stylePieceStaticConfig = {
 	acceptsClassName: true,
 	isText: true,
-	validStyles: stylePropsAll
+	validStyles: stylePropsInput
 };
 const compiledStylePieces = /* @__PURE__ */ new WeakMap();
 const compileStylePieceRuntime = (piece, layer) => {
@@ -865,7 +938,7 @@ function applyStylePieceClasses(styleState, piece, sourceLayer) {
 		for (const slot in compiled.slots) for (const entry of compiled.slots[slot]) {
 			const property = entry[0];
 			if (!ownsSourceLayer(styleState, property, !!entry[2])) continue;
-			writeCapturedStyleRecord(slots, slot, entry, sourceLayer);
+			writeStyleSlot(slots, slot, [...entry], sourceLayer);
 		}
 		if (compiled.programStates) {
 			const target = styleState.flatStateKeys ||= /* @__PURE__ */ new Set();
@@ -911,7 +984,7 @@ function applyStylePieceClasses(styleState, piece, sourceLayer) {
 	}
 	return applied;
 }
-function writeCapturedStyleRecord(slots, slot, source, sourceLayer) {
+function writeStyleSlot(slots, slot, source, sourceLayer) {
 	let list = slots.get(slot);
 	if (!list) slots.set(slot, list = []);
 	const flags = source[7] & 31;
@@ -920,7 +993,10 @@ function writeCapturedStyleRecord(slots, slot, source, sourceLayer) {
 	for (let index = 0; index < list.length; index++) {
 		const entry = list[index];
 		const entryFlags = entry[7] & 31;
-		if ((entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) continue;
+		if ((entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) {
+			if (sourceLayer === sourceLayerStyle && entry[7] >> 5 === sourceLayerStyle && entry[0] === source[0] && !condition && !entry[2]) list.splice(index--, 1);
+			continue;
+		}
 		if (entry[0] !== source[0]) continue;
 		if (flags & recordDefault) {
 			if (!(entryFlags & recordDefault) && (!entry[2] || entry[3] === identity)) return;
@@ -933,9 +1009,8 @@ function writeCapturedStyleRecord(slots, slot, source, sourceLayer) {
 			break;
 		}
 	}
-	const next = [...source];
-	next[7] = flags | sourceLayer << 5;
-	list.push(next);
+	source[7] = flags | sourceLayer << 5;
+	list.push(source);
 }
 function mergeStyle(styleState, key, val, disableNormalize = false, originalVal) {
 	const { viewProps, styleProps, staticConfig } = styleState;
@@ -948,7 +1023,7 @@ function mergeStyle(styleState, key, val, disableNormalize = false, originalVal)
 		styleState.transformAccumulator ||= createTransformAccumulator();
 		addTransformValue(styleState.transformAccumulator, key, val);
 	} else {
-		const out = !disableNormalize && !styleProps.noNormalize ? normalizeValueWithProperty(val, key) : val;
+		let out = !disableNormalize && !styleProps.noNormalize ? normalizeValueWithProperty(val, key) : val;
 		styleState.style ||= {};
 		styleState.style[key] = out;
 		if (shouldTrackStyleTokenProvenance) recordStyleTokenProvenance(styleState, key, originalVal);
@@ -958,8 +1033,8 @@ function recordStyleTokenProvenance(styleState, key, originalVal) {
 	let tokenName = typeof originalVal === "string" ? originalVal : "";
 	if (tokenName) {
 		const slash = tokenName.lastIndexOf("/");
-		const opacity = slash === -1 ? NaN : Number(tokenName.slice(slash + 1));
-		if (Number.isInteger(opacity) && opacity >= 0 && opacity <= 100) tokenName = tokenName.slice(0, slash);
+		const opacity = slash === -1 ? NaN : +tokenName.slice(slash + 1);
+		if (opacity % 1 === 0 && opacity >= 0 && opacity <= 100) tokenName = tokenName.slice(0, slash);
 	}
 	if (tokenName !== "" && (tokenName in styleState.theme || tokenName in (styleState.conf.themes?.[styleState.flatThemeName || ""] || {}) || Object.values(styleState.conf.tokensParsed).some((category) => tokenName in category))) (styleState.tokenProvenance ||= {})[key] = originalVal;
 	else if (styleState.tokenProvenance && key in styleState.tokenProvenance) delete styleState.tokenProvenance[key];
@@ -1002,11 +1077,34 @@ const recordNormalize = 2;
 const recordRetract = 4;
 const recordDefault = 8;
 const recordCSS = 16;
+const webRTLRenames = {
+	marginHorizontal: "marginInline",
+	marginVertical: "marginBlock",
+	paddingHorizontal: "paddingInline",
+	paddingVertical: "paddingBlock",
+	writingDirection: "direction",
+	paddingStart: "paddingInlineStart",
+	paddingEnd: "paddingInlineEnd",
+	marginStart: "marginInlineStart",
+	marginEnd: "marginInlineEnd",
+	borderStartWidth: "borderInlineStartWidth",
+	borderEndWidth: "borderInlineEndWidth",
+	borderStartColor: "borderInlineStartColor",
+	borderEndColor: "borderInlineEndColor",
+	borderStartStyle: "borderInlineStartStyle",
+	borderEndStyle: "borderInlineEndStyle",
+	borderTopStartRadius: "borderStartStartRadius",
+	borderTopEndRadius: "borderStartEndRadius",
+	borderBottomStartRadius: "borderEndStartRadius",
+	borderBottomEndRadius: "borderEndEndRadius",
+	start: "insetInlineStart",
+	end: "insetInlineEnd"
+};
 const webStyleProperties = /* @__PURE__ */ new Map();
 function webStyleProperty(property) {
 	let web = webStyleProperties.get(property);
 	if (web === void 0) {
-		web = property === "writingDirection" ? "direction" : property.endsWith("Horizontal") ? `${property.slice(0, -10)}Inline` : property.endsWith("Vertical") ? `${property.slice(0, -8)}Block` : property;
+		web = webRTLRenames[property] || property;
 		webStyleProperties.set(property, web);
 	}
 	return web;
@@ -1025,26 +1123,21 @@ function writeStyleRecord(state, property, value, cursor, original, flags, condi
 	const identity = cursor ? cursor[conditionKey] : "";
 	const direct = state;
 	const slots = direct.flatSlots ||= /* @__PURE__ */ new Map();
-	const slot = canGenerateCSS && (state.flatShouldDoClasses || flags & recordCSS) ? styleSlot(property) : property.startsWith("transition") ? "transition" : property;
+	const sourceLayer = direct.flatPass?.[passSourceLayer] || 0;
+	if (direct.flatInlineStyleProp) flags |= recordInline;
+	const cssSlot = canGenerateCSS && (state.flatShouldDoClasses || flags & recordCSS) ? styleSlot(property) : property.startsWith("transition") ? "transition" : property;
+	const slot = flags & recordInline && cssSlot !== property ? property : cssSlot;
 	let list = slots.get(slot);
 	if (!list) slots.set(slot, list = []);
-	for (let index = 0; index < list.length; index++) {
-		const entry = list[index];
-		const entryFlags = entry[7];
-		if ((entryFlags & 17) !== (flags & 17)) continue;
-		if (entry[0] !== property) continue;
-		if (flags & recordDefault) {
-			if (!(entryFlags & recordDefault) && (!entry[2] || entry[3] === identity)) return;
-		} else if (entryFlags & recordDefault && (!condition || entry[3] === identity)) {
-			list.splice(index--, 1);
-			continue;
-		}
-		if (entry[3] === identity) {
-			list.splice(index, 1);
-			break;
+	if (sourceLayer === sourceLayerStyle && !condition) {
+		const other = slot === cssSlot ? list : slots.get(flags & recordInline ? cssSlot : property);
+		if (other) for (let index = 0; index < other.length; index++) {
+			const entry = other[index];
+			const entryFlags = entry[7];
+			if (entry[0] === property && !entry[2] && entryFlags >> 5 === sourceLayerStyle && (entryFlags & 17) !== (flags & 17)) other.splice(index--, 1);
 		}
 	}
-	list.push([
+	writeStyleSlot(slots, slot, [
 		property,
 		value,
 		condition,
@@ -1052,8 +1145,10 @@ function writeStyleRecord(state, property, value, cursor, original, flags, condi
 		cursor ? cursor[conditionSelector] : "",
 		cursor ? cursor[conditionWrappers] : void 0,
 		original,
-		flags | (state.flatPass?.[passSourceLayer] || 0) << 5
-	]);
+		flags,
+		void 0,
+		!sourceLayer && direct.flatPass?.[passVariantOutput]
+	], sourceLayer);
 }
 function streamWriteInline(state, property, value, cursor, original, normalize = property === "lineHeight", conditionOverride = -1, force = false) {
 	writeStyleRecord(state, property, value, cursor, original, (normalize ? recordNormalize : 0) | (force ? recordInline : 0), conditionOverride);
@@ -1080,6 +1175,7 @@ function completeResolvedStyles(state, merge = mergeStyle) {
 	}
 	const slots = direct.flatSlots;
 	if (!slots) return;
+	const capture = state.staticConfig.isHOC ? direct.flatCapturedSlots ||= /* @__PURE__ */ new Map() : void 0;
 	for (const [property, entries] of slots) {
 		let cssEntries;
 		let inlineWinner;
@@ -1108,7 +1204,17 @@ function completeResolvedStyles(state, merge = mergeStyle) {
 				}
 			}
 		}
-		if (cssEntries) registerAtomicSlot(direct, property, cssEntries);
+		if (cssEntries) {
+			registerAtomicSlot(direct, property, cssEntries);
+			if (capture) {
+				for (const entry of cssEntries) {
+					entry[7] = entry[7] | recordCSS;
+					if (!(entry[2] & 12)) continue;
+					for (const sibling of cssEntries) if (sibling[0] === entry[0]) sibling[8] = true;
+				}
+				capture.set(property, cssEntries);
+			}
+		}
 		if (inlineWinner) if (inlineWinner[7] & recordRetract) {
 			if (state.style) delete state.style[inlineWinner[0]];
 		} else merge(state, inlineWinner[0], inlineWinner[1], !(inlineWinner[7] & recordNormalize), inlineWinner[6] !== void 0 ? inlineWinner[6] : inlineWinner[1]);
@@ -1133,7 +1239,7 @@ function emitUnderCondition(state, property, value, cursor, originalValue, conte
 	}
 	return condition;
 }
-const formatScanFailure = (failure, source, failureIndex) => failure === "invalid-character" ? `"${source[failureIndex]}" would end the declaration or rule` : failure === "unterminated-string" ? "an unterminated string" : failure === "unterminated-comment" ? "an unterminated \"/*\" comment" : failure === "stray-comment-close" ? "a stray \"*/\"" : "an unterminated \"(\"";
+const formatScanFailure = (failure, source, failureIndex) => failure === "invalid-character" ? `"${source[failureIndex]}" would end the declaration or rule` : failure === "unterminated-string" ? "an unterminated string" : failure === "unterminated-comment" ? "an unterminated \"/*\" comment" : failure === "stray-comment-close" ? "a stray \"*/\"" : failure === "over-deep-clause" ? `a clause with more than ${grammarMaxNonPlatformDepth} non-platform conditions` : "an unterminated \"(\"";
 const warnScanFailure = (property, source, failure, failureIndex) => {
 	if (process.env.NODE_ENV === "development") warnRefusedValue(property, source, formatScanFailure(failure, source, failureIndex));
 };
@@ -1143,15 +1249,28 @@ let valueCaches = /* @__PURE__ */ new WeakMap();
 let valueCacheEntries = 0;
 const valueCacheRoot = {};
 const parsedSlices = /* @__PURE__ */ new WeakMap();
-const fontProperties = /* @__PURE__ */ new Map();
-function configuredValue(state, property, raw, embedded = false) {
+const cssWideColorKeywords = /* @__PURE__ */ new Set([
+	"inherit",
+	"initial",
+	"unset",
+	"revert",
+	"revert-layer",
+	"currentcolor",
+	"transparent"
+]);
+const shadowRecipeProperties = /* @__PURE__ */ new Set([
+	"boxShadow",
+	"textShadow",
+	"filter"
+]);
+function configuredValue(state, property, raw, embedded = false, nativeColors) {
 	const grammar = getConfigRevisionState(state.conf);
 	let name = raw;
 	let opacity;
 	const slash = raw.lastIndexOf("/");
 	if (slash > 0) {
-		const amount = Number(raw.slice(slash + 1));
-		if (Number.isInteger(amount) && amount >= 0 && amount <= 100) {
+		const amount = +raw.slice(slash + 1);
+		if (amount % 1 === 0 && amount >= 0 && amount <= 100) {
 			name = raw.slice(0, slash);
 			opacity = amount;
 		}
@@ -1161,36 +1280,32 @@ function configuredValue(state, property, raw, embedded = false) {
 		state.flatUsesSafeArea = true;
 		return safeArea;
 	}
-	let fontProperty = fontProperties.get(property);
-	if (fontProperty === void 0) {
-		fontProperty = property.startsWith("font") || property === "lineHeight" || property === "letterSpacing";
-		fontProperties.set(property, fontProperty);
-	}
-	const revision = grammar.revision;
-	if (state.conf !== valueCacheConf || revision !== valueCacheRevision) {
-		valueCacheConf = state.conf;
-		valueCacheRevision = revision;
-		valueCaches = /* @__PURE__ */ new WeakMap();
-		valueCacheEntries = 0;
-		state.flatValueScope = void 0;
-	}
-	const resolveValues = !state.flatShouldDoClasses && state.styleProps.resolveValues === "auto" ? "value" : state.styleProps.resolveValues;
-	const direct = state;
-	let scope = direct.flatValueScope;
-	if (scope === void 0 || direct.flatValueScopeKind !== resolveValues) {
-		const themeObject = state.theme && typeof state.theme === "object" ? state.theme : valueCacheRoot;
-		let byScope = valueCaches.get(themeObject);
-		if (!byScope) valueCaches.set(themeObject, byScope = /* @__PURE__ */ new Map());
-		const scopeKey = `${state.flatThemeName || ""}${resolveValues}`;
-		scope = byScope.get(scopeKey);
-		if (!scope) byScope.set(scopeKey, scope = /* @__PURE__ */ new Map());
-		direct.flatValueScope = scope;
-		direct.flatValueScopeKind = resolveValues;
-	}
-	let maps = scope.get(property);
-	if (maps === void 0) scope.set(property, maps = { direct: /* @__PURE__ */ new Map() });
-	const byRaw = embedded ? maps.embedded ||= /* @__PURE__ */ new Map() : maps.direct;
-	if (!fontProperty) {
+	const fontProperty = property.startsWith("font") || property === "lineHeight" || property === "letterSpacing";
+	const resolveValues = state.styleProps.resolveValues;
+	let byRaw;
+	if (!fontProperty && !nativeColors) {
+		const revision = grammar.revision;
+		if (state.conf !== valueCacheConf || revision !== valueCacheRevision) {
+			valueCacheConf = state.conf;
+			valueCacheRevision = revision;
+			valueCaches = /* @__PURE__ */ new WeakMap();
+			valueCacheEntries = 0;
+			state.flatValueScope = void 0;
+		}
+		const direct = state;
+		let scope = direct.flatValueScope;
+		if (scope === void 0) {
+			const themeObject = state.theme && typeof state.theme === "object" ? state.theme : valueCacheRoot;
+			let byScope = valueCaches.get(themeObject);
+			if (!byScope) valueCaches.set(themeObject, byScope = /* @__PURE__ */ new Map());
+			const scopeKey = `${state.flatThemeName || ""}${resolveValues}`;
+			scope = byScope.get(scopeKey);
+			if (!scope) byScope.set(scopeKey, scope = /* @__PURE__ */ new Map());
+			direct.flatValueScope = scope;
+		}
+		let maps = scope.get(property);
+		if (maps === void 0) scope.set(property, maps = { direct: /* @__PURE__ */ new Map() });
+		byRaw = embedded ? maps.embedded ||= /* @__PURE__ */ new Map() : maps.direct;
 		const known = byRaw.get(raw);
 		if (known !== void 0 || byRaw.has(raw)) return known;
 	}
@@ -1220,20 +1335,87 @@ function configuredValue(state, property, raw, embedded = false) {
 		}
 	}
 	if (process.env.NODE_ENV === "development") {
-		const category = grammar.tokenCategory(property);
-		if (category && category !== "color" && state.conf.tokensParsed.color?.[name]) warnOnce(`"${name}" contributes to "color", not "${property}"`);
+		const category = grammar.tokenCategory(property) || grammar.tokenCategory(state.conf.shorthands[property] || property);
+		if (category && category !== "color" && category !== "boxShadow" && category !== "textShadow" && state.conf.tokensParsed.color?.[name]) warnOnce(`"${name}" contributes to "color", not "${property}"`);
+		if (!value && !fontProperty) {
+			if (name.charCodeAt(0) === 36 || raw.charCodeAt(0) === 36) {
+				const suggested = name.charCodeAt(0) === 36 ? name.slice(1) : raw.slice(1);
+				warnOnce(`v2-token:${property}=${raw}`, `${property}="${raw}": v3 tokens have no "$" prefix, did you mean "${suggested}"?`);
+			} else if ((category === "size" || category === "space" || category === "radius" || category === "zIndex") && /^-?\d+(?:\.\d+)?$/.test(name)) {
+				let nearest;
+				let minDistance = Infinity;
+				const rawNum = Number(name);
+				const tokens = category ? state.conf.tokensParsed[category] : void 0;
+				if (tokens && Number.isFinite(rawNum)) for (const key in tokens) {
+					const val = tokens[key]?.val;
+					const valNum = typeof val === "number" ? val : Number(val);
+					if (Number.isFinite(valNum)) {
+						const dist = Math.abs(valNum - rawNum);
+						if (dist < minDistance) {
+							minDistance = dist;
+							nearest = key;
+						}
+					}
+				}
+				if (nearest) warnOnce(`numeric-token:${property}=${raw}`, `${property}="${raw}" was passed to CSS as-is${category === "zIndex" ? "" : " with px units"}${nearest ? `; nearest token is "${nearest}"` : ""}`);
+			} else if (category === "color" && /^[a-zA-Z0-9-]+$/.test(name) && /[a-zA-Z]/.test(name)) {
+				const lower = name.toLowerCase();
+				if (!namedCssColors.has(lower) && !cssWideColorKeywords.has(lower)) {
+					const themeKeys = [];
+					if (state.theme && typeof state.theme === "object") for (const k in state.theme) themeKeys.push(k);
+					if (state.conf.themes) {
+						const active = state.conf.themes[state.flatThemeName || ""];
+						if (active) for (const k in active) themeKeys.push(k);
+						else for (const t in state.conf.themes) for (const k in state.conf.themes[t]) themeKeys.push(k);
+					}
+					let bestMatch;
+					let minDistance = 3;
+					for (const key of themeKeys) {
+						if (Math.abs(key.length - name.length) > 2) continue;
+						const m = name.length;
+						const n = key.length;
+						const d = [];
+						for (let i = 0; i <= m; i++) d[i] = i;
+						for (let j = 1; j <= n; j++) {
+							let prev = d[0];
+							d[0] = j;
+							for (let i = 1; i <= m; i++) {
+								const temp = d[i];
+								d[i] = name[i - 1] === key[j - 1] ? prev : Math.min(prev, d[i], d[i - 1]) + 1;
+								prev = temp;
+							}
+						}
+						const dist = d[m];
+						if (dist <= 2 && dist < minDistance) {
+							minDistance = dist;
+							bestMatch = key;
+						}
+					}
+					warnOnce(`unknown-color:${property}=${raw}`, bestMatch ? `unknown color "${name}", did you mean "${bestMatch}"?` : `unknown color "${name}"`);
+				}
+			}
+		}
 	}
 	let out = raw;
 	if (isVariable(value)) {
-		out = resolveValues === "except-theme" && fromTheme ? `${THEME_REF_PREFIX}${lookupName}${opacity !== void 0 ? `/${opacity}` : ""}` : resolveVariableValue(property, value, resolveValues);
+		out = resolveValues === "except-theme" && fromTheme ? `${THEME_REF_PREFIX}${lookupName}${opacity !== void 0 ? `/${opacity}` : ""}` : resolveVariableValue(nativeColors ? "color" : property, value, resolveValues);
 		if (opacity !== void 0) out = `color-mix(in srgb, ${out} ${opacity}%, transparent)`;
 	}
+	if (nativeColors && out && typeof out === "object") {
+		const reference = `__tamagui_native_color_${nativeColors.size}`;
+		nativeColors.set(reference, out);
+		out = reference;
+	}
 	if (embedded && out === raw) {
 		const usedSafeArea = state.flatUsesSafeArea;
-		out = grammar.embeddedTokens(raw, (word) => configuredValue(state, property, word));
+		out = grammar.embeddedTokens(raw, (word) => {
+			const resolved = configuredValue(state, property, word, false, nativeColors);
+			if (resolved !== word || !shadowRecipeProperties.has(property) || !/^[a-z][\w-]*$/i.test(word)) return resolved;
+			return configuredValue(state, "color", word, false, nativeColors);
+		});
 		if (!usedSafeArea && state.flatUsesSafeArea) return out;
 	}
-	if (!fontProperty && !fromTheme) if (valueCacheEntries > 8192) {
+	if (!fontProperty && !fromTheme && !nativeColors) if (valueCacheEntries > 8192) {
 		valueCaches = /* @__PURE__ */ new WeakMap();
 		valueCacheEntries = 0;
 	} else {
@@ -1247,13 +1429,15 @@ function ownsSourceLayer(state, property, conditional = false) {
 	const layer = direct.flatPass?.[passSourceLayer] || 0;
 	const layers = direct.flatPropertyLayers ||= /* @__PURE__ */ new Map();
 	const previous = layers.get(property);
-	if (previous !== void 0) {
-		if (previous > layer) return false;
-		if (previous < layer) {
-			if (conditional) return true;
-			clearDirectStyle(state, property);
+	if (!layer && !conditional && !direct.flatPass?.[passVariantOutput]) {
+		const entries = direct.flatSlots?.get(styleSlot(property));
+		if (entries) {
+			for (let index = entries.length; index--;) if (entries[index][0] === property && entries[index][9]) entries.splice(index, 1);
 		}
-	} else if (conditional) return true;
+	}
+	if (previous > layer) return false;
+	if (conditional && previous !== layer) return true;
+	if (previous < layer) clearDirectStyle(state, property);
 	layers.set(property, layer);
 	return true;
 }
@@ -1280,6 +1464,10 @@ function emitProperty(state, property, value, cursor, originalValue, contextOnly
 		addTransformValue(state.transformAccumulator, property, value);
 		return;
 	}
+	if (property === "transition" && condition & 12 && !state.staticConfig.isHOC && state.styleProps.isAnimated) {
+		streamWriteInline(state, property, value, cursor, originalValue, false, -1, true);
+		return;
+	}
 	const shouldPromoteAnimatedStyle = canGenerateCSS && !condition && !state.flatShouldDoClasses && !state.styleProps.noMergeStyle && state.styleProps.isAnimated && state.animationDriver?.inputStyle === "css" && property in nonAnimatableStyleProps;
 	if (canGenerateCSS && (state.flatShouldDoClasses || shouldPromoteAnimatedStyle)) {
 		writeStyleRecord(state, property, value, cursor, originalValue, shouldPromoteAnimatedStyle ? recordCSS : 0);
@@ -1288,19 +1476,19 @@ function emitProperty(state, property, value, cursor, originalValue, contextOnly
 	streamWriteInline(state, property, value, cursor, originalValue);
 }
 function numericUnitValue(value, first, second) {
-	const unitLength = value.endsWith(first) || second !== void 0 && value.endsWith(second) ? first.length : 0;
-	if (!unitLength || value.length === unitLength) return NaN;
-	const numeric = Number(value.slice(0, value.length - unitLength));
-	return Number.isFinite(numeric) ? numeric : NaN;
+	return value.length > first.length && (value.endsWith(first) || value.endsWith(second)) ? +value.slice(0, -first.length) : NaN;
+}
+function resolveNumericValue(value) {
+	let numeric = numericUnitValue(value, "px", "dp");
+	return isFinite(numeric) ? numeric : isFinite(numeric = +value) ? numeric : value;
 }
 function emitResolved(state, property, raw, cursor, originalValue, contextOnly) {
-	let value = configuredValue(state, property, raw, true);
-	if (!state.flatShouldDoClasses && typeof value === "string") {
-		const unitValue = numericUnitValue(value, "px", "dp");
-		if (Number.isFinite(unitValue)) value = unitValue;
-		else if (value !== "" && Number.isFinite(Number(value))) value = Number(value);
-	}
-	emitProperty(state, property, value, cursor, originalValue, contextOnly);
+	emitProperty(state, property, resolveValue(state, property, raw), cursor, originalValue, contextOnly);
+}
+function resolveValue(state, property, raw, nativeColors) {
+	let value = typeof raw === "string" ? configuredValue(state, property, raw, true, nativeColors) : raw;
+	if (!state.flatShouldDoClasses && typeof value === "string" && value !== "" && property !== "lineHeight") value = resolveNumericValue(value);
+	return value;
 }
 function shadowUnit(part) {
 	return typeof part === "number" ? `${part}px` : part || "0px";
@@ -1320,7 +1508,13 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 	const grammar = getConfigRevisionState(state.conf);
 	property = webStyleProperty(property);
 	if (property === "backdropFilter") emitValue(state, "WebkitBackdropFilter", raw, cursor, originalValue, contextOnly);
-	if (isVariable(raw)) raw = resolveVariableValue(property, raw, !state.flatShouldDoClasses && state.styleProps.resolveValues === "auto" ? "value" : state.styleProps.resolveValues);
+	if (isVariable(raw)) {
+		raw = resolveVariableValue(property, raw, state.styleProps.resolveValues);
+		if (property === "lineHeight") {
+			emitProperty(state, property, raw, cursor, originalValue, contextOnly);
+			return;
+		}
+	}
 	if (typeof raw === "string" && (property === "transition" || property === "transitionProperty")) raw = grammar.normalizeTransition(raw);
 	if ((property === "borderWidth" || property === "borderTopWidth" || property === "borderRightWidth" || property === "borderBottomWidth" || property === "borderLeftWidth") && state.styleProps.noNormalize !== false) writeStyleRecord(state, property.slice(0, -5) + "Style", "solid", cursor, originalValue, recordDefault);
 	const propertyKind = grammar.propertyKind(property);
@@ -1357,10 +1551,17 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 	}
 	if (property === "transform") {
 		if (canGenerateCSS && state.flatShouldDoClasses && Array.isArray(raw)) raw = transformsToString(raw);
+		if (typeof raw === "string" && !state.flatShouldDoClasses && state.animationDriver?.inputStyle === "value") {
+			const transform = parseNativeTransform(raw);
+			if (transform) {
+				emitProperty(state, property, transform, cursor, originalValue, contextOnly);
+				return;
+			}
+		}
 	}
 	if (typeof raw === "string" && property === "background") {
 		const parts = splitComponents(raw);
-		if (parts.length === 1 && !startsValueFunction(parts[0])) {
+		if (parts.length === 1 && (!startsValueFunction(parts[0]) || false)) {
 			emitResolved(state, "backgroundColor", parts[0], cursor, originalValue, contextOnly);
 			return;
 		}
@@ -1368,7 +1569,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 	if (property === "x" || property === "y" || property === "scale" || property === "scaleX" || property === "scaleY" || property === "rotate") {
 		let value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
 		if (!state.flatShouldDoClasses && typeof value2 === "string" && !value2.startsWith(THEME_REF_PREFIX)) {
-			if (property === "rotate" && !Number.isFinite(numericUnitValue(value2, "deg", "rad"))) {
+			if (property === "rotate" && !isFinite(numericUnitValue(value2, "deg", "rad")) && !startsValueFunction(value2)) {
 				if (process.env.NODE_ENV === "development") warnOnce(`native transform "${property}" cannot represent "${value2}"; dropping it`);
 				if (condition & 1) {
 					removeTransformValue(state.transformAccumulator, property);
@@ -1376,9 +1577,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 				}
 				return;
 			}
-			const unitValue = numericUnitValue(value2, "px", "dp");
-			if (Number.isFinite(unitValue)) value2 = unitValue;
-			else if (Number.isFinite(Number(value2))) value2 = Number(value2);
+			value2 = resolveNumericValue(value2);
 		}
 		if (!canGenerateCSS || !state.flatShouldDoClasses) {
 			emitProperty(state, property, value2, cursor, originalValue, contextOnly);
@@ -1402,13 +1601,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 		else emitProperty(state, property, raw, cursor, originalValue, contextOnly);
 		return;
 	}
-	let value = raw;
-	if (typeof raw === "string") value = configuredValue(state, property, raw, true);
-	if (!state.flatShouldDoClasses && typeof value === "string") {
-		const unitValue = numericUnitValue(value, "px", "dp");
-		if (Number.isFinite(unitValue)) value = unitValue;
-		else if (value !== "" && Number.isFinite(Number(value))) value = Number(value);
-	}
+	let value = resolveValue(state, property, raw, void 0);
 	if (canGenerateCSS && state.flatShouldDoClasses && property === "boxShadow" && !condition) {
 		state.flatBoxShadow = value;
 		state.flatBoxShadowSequence = frameSequence + 1;
@@ -1419,7 +1612,12 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 	}
 	emitProperty(state, property, value, cursor, originalValue, contextOnly);
 }
-function walkConditionalValue(state, property, value, parent, sink, warnMode = 0) {
+function emitConditionalValue(state, property, payload, condition, source, sink, mode, contextOnly) {
+	if (sink) sink(payload, condition, source);
+	else if (condition) emitUnderCondition(state, property, payload, condition, mode === 2 || state.staticConfig.isHOC || state.styleProps.stylePieceEntries ? payload : void 0, contextOnly, mode, source);
+	else emitValue(state, property, payload, null, payload, contextOnly);
+}
+function walkConditionalValue(state, property, value, parent, sink, warnMode = 0, contextOnly = false) {
 	const parentCondition = parent || null;
 	let hasBase = false;
 	let conditions = 0;
@@ -1427,13 +1625,18 @@ function walkConditionalValue(state, property, value, parent, sink, warnMode = 0
 	if (typeof value === "string") {
 		const parsed = getConfigRevisionState(state.conf).parseFlatValue(value);
 		const [segments, failure, failureIndex] = parsed;
+		if (process.env.NODE_ENV === "development") {
+			if (getSetting("styleValueSyntax") === "object") {
+				if (segments.length > 5 || segments.length >= 5 && segments[2] !== -1 || value.includes(":")) warnOnce(`syntax:string:${property}=${value}`, `string syntax is disabled by config (styleValueSyntax: 'object'); received "${property}=${value}"`);
+			}
+		}
 		let slices = parsedSlices.get(parsed);
 		if (slices === void 0) parsedSlices.set(parsed, slices = []);
 		const chainCount = segments.length / 5 - 1;
 		if (property === "aspectRatio" && chainCount === 1) {
-			const left = Number(value.slice(segments[7], segments[8]));
-			const right = Number(value.slice(segments[5], segments[6]));
-			if (left > 0 && right > 0 && Number.isFinite(left) && Number.isFinite(right)) return false;
+			const left = +value.slice(segments[7], segments[8]);
+			const right = +value.slice(segments[5], segments[6]);
+			if (left > 0 && right > 0 && isFinite(left) && isFinite(right)) return false;
 		}
 		for (let index = 0; index < segments.length; index += 5) {
 			const start = segments[index];
@@ -1443,10 +1646,10 @@ function walkConditionalValue(state, property, value, parent, sink, warnMode = 0
 			if (start === end) continue;
 			if (flags & 2) {
 				const payload = slices[index] ??= value.slice(start, end);
-				sink(payload, parentCondition, payload);
+				emitConditionalValue(state, property, payload, parentCondition, payload, sink, warnMode, contextOnly);
 				hasBase = true;
 			} else if (process.env.NODE_ENV !== "production" && warnMode && !chainCount && (failure === "invalid-character" || failure === "stray-comment-close")) {
-				sink(value, parentCondition, value);
+				emitConditionalValue(state, property, value, parentCondition, value, sink, warnMode, contextOnly);
 				hasBase = true;
 			} else if (warnMode) warnScanFailure(property, value, failure, failureIndex);
 		}
@@ -1467,30 +1670,36 @@ function walkConditionalValue(state, property, value, parent, sink, warnMode = 0
 			}
 			const cursor = conditionFromKey(state, slices[index + 2] ??= value.slice(segments[index + 2], segments[index + 3]), parentCondition);
 			conditions |= cursor[conditionValue];
-			if (cursor[conditionValue] & conditionResolvedFlag || warnMode) sink(slices[index] ??= value.slice(start, end), cursor, value);
+			if (cursor[conditionValue] & conditionResolvedFlag || warnMode) emitConditionalValue(state, property, slices[index] ??= value.slice(start, end), cursor, value, sink, warnMode, contextOnly);
 		}
 		if (process.env.NODE_ENV !== "production") lastPayload = value.slice(lastPayloadStart);
 	} else {
 		if (!value || typeof value !== "object" || Array.isArray(value) || isVariable(value) || !classifyConditionalObject(value, state)) return false;
+		if (process.env.NODE_ENV === "development") {
+			if (getSetting("styleValueSyntax") === "string") warnOnce(`syntax:object:${property}=${JSON.stringify(value)}`, `object-form conditional syntax is disabled by config (styleValueSyntax: 'string'); received "${property}"`);
+		}
 		if (value.default != null) {
-			sink(value.default, parentCondition, value.default);
+			emitConditionalValue(state, property, value.default, parentCondition, value.default, sink, warnMode, contextOnly);
 			hasBase = true;
 		}
 		for (const key in value) {
 			if (key === "default" || value[key] == null) continue;
 			const cursor = conditionFromKey(state, key, parentCondition);
 			conditions |= cursor[conditionValue];
-			if (cursor[conditionValue] & conditionResolvedFlag || warnMode) sink(value[key], cursor, value[key]);
+			if (cursor[conditionValue] & conditionResolvedFlag || warnMode) emitConditionalValue(state, property, value[key], cursor, value[key], sink, warnMode, contextOnly);
 		}
 	}
-	if (warnMode && process.env.NODE_ENV === "development" && typeof value === "string" && !hasBase && conditions && getConfigRevisionState(state.conf).tokenCategory(property) && splitComponents(lastPayload).length > 1) warnOnce(`${property}="${value}" has multiple values after its first conditional. Write the base value before the first conditional.`);
-	if (warnMode === 1 && (!canGenerateCSS || !state.flatShouldDoClasses) && conditions & 12 && !hasBase) {
+	if (warnMode && process.env.NODE_ENV === "development" && typeof value === "string" && !hasBase && conditions && getConfigRevisionState(state.conf).tokenCategory(property) && getConfigRevisionState(state.conf).propertyKind(property) !== 8 && property !== "boxShadow" && property !== "textShadow" && property !== "fontFamily" && property !== "gap" && splitComponents(lastPayload).length > 1) warnOnce(`${property}="${value}" has multiple values after its first conditional. Write the base value before the first conditional.`);
+	if (warnMode === 1 && conditions & 12 && !hasBase) {
 		const resting = property === "opacity" || property.startsWith("scale") ? 1 : property === "rotate" ? "0deg" : property === "x" || property === "y" ? 0 : null;
-		if (resting !== null && !state.flatPropertyLayers?.has(property)) sink(resting, parentCondition, resting);
+		const layers = state.flatPropertyLayers;
+		const owned = !canGenerateCSS || !state.flatShouldDoClasses ? layers?.has(property) : property === "scale" ? layers?.has("--t-scale-x") || layers?.has("--t-scale-y") : layers?.has(property === "x" ? "--t-x" : property === "y" ? "--t-y" : property === "scaleX" ? "--t-scale-x" : property === "scaleY" ? "--t-scale-y" : property);
+		if (resting !== null && !owned) emitConditionalValue(state, property, resting, parentCondition, resting, sink, warnMode, contextOnly);
 	}
 	return true;
 }
 function contributeValue(state, property, value, originalValue, contextOnly = false, condition) {
+	if (!contextOnly && isRemovedVendorStyleProp(property) && !(state.staticConfig.validStyles && property in state.staticConfig.validStyles)) return;
 	if (condition !== void 0) {
 		const parent2 = state.flatPass?.[passParentCursor] || null;
 		let effective;
@@ -1500,7 +1709,7 @@ function contributeValue(state, property, value, originalValue, contextOnly = fa
 			if (!(condition[conditionValue] & conditionResolvedFlag)) setConditionUnresolved(effective);
 			commitCondition(effective);
 		} else effective = condition;
-		if (typeof value !== "string" && walkConditionalValue(state, property, value, effective, (payload, cursor, source) => emitUnderCondition(state, property, payload, cursor, payload, contextOnly, 2, source), 2)) return true;
+		if (typeof value !== "string" && walkConditionalValue(state, property, value, effective, null, 2, contextOnly)) return true;
 		emitUnderCondition(state, property, value, effective, originalValue, contextOnly, 2, value);
 		return true;
 	}
@@ -1517,7 +1726,7 @@ function contributeValue(state, property, value, originalValue, contextOnly = fa
 			return true;
 		}
 	}
-	if (walkConditionalValue(state, property, value, state.flatPass?.[passParentCursor] || null, (payload, cursor, source) => cursor ? emitUnderCondition(state, property, payload, cursor, void 0, contextOnly, 1, source) : emitValue(state, property, payload, null, payload, contextOnly), 1)) return true;
+	if (walkConditionalValue(state, property, value, state.flatPass?.[passParentCursor] || null, null, 1, contextOnly)) return true;
 	if (value != null) {
 		emitAtParentCondition(state, property, value, originalValue ?? value, contextOnly);
 		return true;
@@ -1526,19 +1735,21 @@ function contributeValue(state, property, value, originalValue, contextOnly = fa
 }
 function clearDirectStyle(state, property) {
 	const direct = state;
+	if (direct.flatDynamicColors) delete direct.flatDynamicColors[property];
 	property = webStyleProperty(property);
 	const propertyKind = getConfigRevisionState(state.conf).propertyKind(property);
 	const atomicKey = property.startsWith("transition") ? "transition" : propertyKind > 0 && propertyKind < 5 ? "boxShadow" : propertyKind === 6 ? "textShadow" : propertyKind === 5 ? "transform" : property;
 	const slot = styleSlot(atomicKey);
 	direct.flatAtomics?.delete(slot);
 	if (direct.flatSlots) {
-		if (slot !== atomicKey) {
+		if (slot !== atomicKey || atomicKey === "flex") {
 			const entries = direct.flatSlots.get(slot);
 			if (entries) {
 				for (let index = entries.length; index--;) if (entries[index][0] === atomicKey) entries.splice(index, 1);
+				if (!entries.length) direct.flatSlots.delete(slot);
 			}
 		}
-		direct.flatSlots.delete(atomicKey);
+		if (atomicKey !== "flex") direct.flatSlots.delete(atomicKey);
 	}
 	if (atomicKey === "transform") state.transformAccumulator = void 0;
 	if (state.style) delete state.style[atomicKey];
@@ -1550,9 +1761,12 @@ function emitVariantStyle(state, key, value, original, condition, disabled) {
 	if (key !== pass[passMapSourceKey] && state.flatCallerVariantKeys?.has(key)) return;
 	if (state.flatStyleStaticConfig.styledContextKeys?.has(key)) (state.overriddenContextProps ||= {})[key] = (state.originalContextPropValues ||= {})[key] = original;
 	const parent = pass[passParentCursor];
+	const parentVariantOutput = pass[passVariantOutput];
 	pass[passParentCursor] = condition;
+	pass[passVariantOutput] = true;
 	contributeProp(pass, key, value, original, disabled);
 	pass[passParentCursor] = parent;
+	pass[passVariantOutput] = parentVariantOutput;
 }
 function getFontFamilyFromNameOrVariable(input, conf) {
 	if (isVariable(input)) {