clava 0.4.2 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # clava
 
+## 0.5.0
+
+### Computed default variants
+
+**BREAKING** if you're using `setDefaultVariants` in [`cv`](https://clava.style/docs/reference/cv) `refine` callbacks.
+
+The `setDefaultVariants` function has been removed from `refine`. Define dependent defaults directly in `defaultVariants` by passing a function for the variant key. The function receives the current `defaultValue` for that key and the resolved `variants` snapshot.
+
+Computed default variants run before `refine`, so `refine` callbacks now read computed default values during their first pass. If a variant value itself is a function, return that function from a computed default variant instead of passing it directly as a static default.
+
+Before:
+
+```ts
+const button = cv({
+  variants: {
+    size: { sm: "sm", lg: "lg" },
+    intent: { neutral: "neutral", brand: "brand" },
+  },
+  refine: ({ variants, setDefaultVariants }) => {
+    if (variants.size === "lg") {
+      setDefaultVariants({ intent: "neutral" });
+    }
+  },
+});
+```
+
+After:
+
+```ts
+const button = cv({
+  variants: {
+    size: { sm: "sm", lg: "lg" },
+    intent: { neutral: "neutral", brand: "brand" },
+  },
+  defaultVariants: {
+    intent: ({ defaultValue, variants }) =>
+      variants.size === "lg" ? "neutral" : defaultValue,
+  },
+});
+```
+
 ## 0.4.2
 
 - Improved [`refine`](https://clava.style/docs/reference/refine) iteration warnings to show the latest changing variant values with a shorter component creation stack.

package/README.md

@@ -316,7 +316,9 @@ You can extend any component mode, including `baseButton.jsx`, `baseButton.html`
 
 ## Refine
 
-Use `refine` for compound conditions, dependent defaults, and final class/style adjustments. It receives the resolved variant values for the component and can return class/style output.
+Use computed `defaultVariants` for dependent defaults. A function entry receives the current default value for that key plus the resolved variants snapshot, and returns the next default value.
+
+Use `refine` for final variant overrides and class/style adjustments. It receives the resolved variant values for the component and can return class/style output.
 
 ```ts
 const toolbarButton = cv({
@@ -328,21 +330,15 @@ const toolbarButton = cv({
     },
     loading: "toolbar-button-loading",
   },
-  refine: ({
-    variants,
-    setVariants,
-    setDefaultVariants,
-    addClass,
-    addStyle,
-  }) => {
+  defaultVariants: {
+    intent: ({ defaultValue, variants }) =>
+      variants.size === "lg" ? "neutral" : defaultValue,
+  },
+  refine: ({ variants, setVariants, addClass, addStyle }) => {
     if (variants.loading) {
       setVariants({ pressed: false });
     }
 
-    if (variants.size === "lg") {
-      setDefaultVariants({ intent: "neutral" });
-    }
-
     if (variants.pressed && variants.intent === "brand") {
       addClass("toolbar-button-brand-pressed");
       addStyle({ transform: "translateY(1px)" });
@@ -353,9 +349,24 @@ const toolbarButton = cv({
 });
 ```
 
-`setVariants()` overrides explicit props. `setDefaultVariants()` overrides static `defaultVariants` and inherited defaults, but it does not override a prop the user explicitly passed unless that prop value is `undefined`. `addClass()` and `addStyle()` append output without changing resolved variant values. `getVariants()` includes values changed by `setVariants()` and `setDefaultVariants()`.
+Computed `defaultVariants` do not override a prop the user explicitly passed unless that prop value is `undefined`. Return `defaultValue` to preserve the inherited or static default value. Return `undefined` to clear the default value. If a variant's value is a function, return that function from a computed default:
+
+```ts
+const transform = (value: string) => value.toUpperCase();
+
+const input = cv({
+  variants: {
+    transform: (fn: (value: string) => string) => fn("example"),
+  },
+  defaultVariants: {
+    transform: () => transform,
+  },
+});
+```
+
+`setVariants()` overrides explicit props. `addClass()` and `addStyle()` append output without changing resolved variant values. `getVariants()` includes values changed by computed `defaultVariants` and `setVariants()`.
 
-When a `refine` callback changes variants, Clava re-runs the refine chain so later reads see the latest values. Re-runs are capped at 50 iterations, after which Clava stops and logs a warning in development.
+When a computed default or `refine` callback changes variants, Clava re-runs the refine chain so later reads see the latest values. Re-runs are capped at 50 iterations, after which Clava stops and logs a warning in development.
 
 ## Splitting Props
 
@@ -539,7 +550,7 @@ The package also exports `ClassValue`, `StyleValue`, `StyleClassProps`, `StyleCl
 
 `component.style(props?)` returns only the resolved style value for that component mode.
 
-`component.getVariants(props?)` returns resolved variant values after static defaults, inherited defaults, and `refine` updates.
+`component.getVariants(props?)` returns resolved variant values after static defaults, inherited defaults, computed defaults, and `refine` updates.
 
 `component.propKeys` lists style props plus variant props for that component mode.
 

package/dist/index.d.ts

@@ -76,7 +76,15 @@ type StringToBoolean<T> = T extends "true" | "false" ? boolean : T;
 type VariantValue = ClassValue | StyleClassValue;
 type NonNullKeys<T> = { [K in keyof T]: T[K] extends null ? never : K }[keyof T];
 type ExtractVariantValue<T> = T extends null ? never : T extends ((value: infer V) => any) ? V : T extends readonly unknown[] ? boolean : T extends Record<string, any> ? StringToBoolean<NonNullKeys<T>> : T extends ClassValue ? boolean : never;
-type VariantValues<V> = { [K in keyof V]?: ExtractVariantValue<V[K]> };
+type VariantValues<V> = { [K in keyof V]?: ExtractVariantValue<V[K]> | undefined };
+interface DefaultVariantContext<V, K extends keyof V> {
+  defaultValue: ExtractVariantValue<V[K]> | undefined;
+  variants: Readonly<VariantValues<V>>;
+}
+type ComputedDefaultVariant<V, K extends keyof V> = (context: DefaultVariantContext<V, K>) => ExtractVariantValue<V[K]> | undefined;
+type NonFunctionVariantValue<T> = Exclude<T, (...args: any[]) => any>;
+type DefaultVariantValue<V, K extends keyof V> = [NonFunctionVariantValue<ExtractVariantValue<V[K]>>] extends [never] ? ComputedDefaultVariant<V, K> : NonFunctionVariantValue<ExtractVariantValue<V[K]>> | ComputedDefaultVariant<V, K>;
+type DefaultVariants<V> = { [K in keyof V]?: DefaultVariantValue<V, K> | undefined };
 type StyleValue = CSS.Properties & {
   [key: `--${string}`]: string;
 };
@@ -87,7 +95,6 @@ interface StyleClassValue {
 interface RefineContext<V> {
   variants: VariantValues<V>;
   setVariants: (variants: VariantValues<V>) => void;
-  setDefaultVariants: (variants: VariantValues<V>) => void;
   addClass: (className: ClassValue) => void;
   addStyle: (style: StyleValue) => void;
 }
@@ -106,7 +113,7 @@ interface CVConfig<V extends Variants = {}, E extends AnyComponent[] = []> {
   class?: ClassValue;
   style?: StyleValue;
   variants?: ExtendableVariants<V, E>;
-  defaultVariants?: VariantValues<MergeVariants<V, E>>;
+  defaultVariants?: DefaultVariants<MergeVariants<V, E>>;
   refine?: Refine<MergeVariants<V, E>>;
 }
 interface CreateParams {

package/dist/index.js

@@ -75,7 +75,7 @@ function warnRefineLimit({ runState, creationFrame, unstableChanges }) {
 	if (process.env.NODE_ENV === "production") return;
 	if (runState.warned) return;
 	runState.warned = true;
-	let message = "Clava: Maximum refine iterations exceeded. This can happen when a refine callback calls setVariants or setDefaultVariants, but one of the variants changes on every run.";
+	let message = "Clava: Maximum refine iterations exceeded. This can happen when a computed default variant or refine callback changes one of the variants on every run.";
 	if (unstableChanges && unstableChanges.size > 0) {
 		message += `\nVariant(s) that did not stabilize: ${Array.from(unstableChanges.keys()).join(", ")}.`;
 		message += `\nLatest variant changes before warning: ${formatVariantChanges(unstableChanges)}.`;
@@ -350,6 +350,23 @@ function mergeVariants(target, source, skipKeys) {
 	}
 	return changed;
 }
+function mergeProtectedIntoBase(baseResolved, protectedVariants) {
+	if (!protectedVariants) return baseResolved;
+	let hasProtected = false;
+	for (const key in protectedVariants) {
+		if (!Object.hasOwn(protectedVariants, key)) continue;
+		hasProtected = true;
+		break;
+	}
+	if (!hasProtected) return baseResolved;
+	const resolved = {};
+	Object.assign(resolved, baseResolved);
+	for (const key in protectedVariants) {
+		if (!Object.hasOwn(protectedVariants, key)) continue;
+		resolved[key] = protectedVariants[key];
+	}
+	return resolved;
+}
 function getComponentMeta(component) {
 	return component[META_KEY];
 }
@@ -419,21 +436,11 @@ function collectVariantKeys(config) {
 	}
 	return Array.from(keys);
 }
-function isVariantDisabled(config, key) {
-	return config.variants?.[key] === null;
-}
 function getVariantValueKey(value) {
 	if (typeof value === "string") return value;
 	if (typeof value === "number") return String(value);
 	if (typeof value === "boolean") return String(value);
 }
-function isVariantValueDisabled(config, key, value) {
-	const valueKey = getVariantValueKey(value);
-	if (valueKey == null) return false;
-	const variant = config.variants?.[key];
-	if (!isRecordObject(variant)) return false;
-	return variant[valueKey] === null;
-}
 function collectDisabledVariantKeys(config) {
 	const keys = /* @__PURE__ */ new Set();
 	if (!config.variants) return keys;
@@ -614,6 +621,9 @@ function create({ transformClass = (className) => className } = {}) {
 		}
 		const variantEntryCount = variantEntryNames.length;
 		const functionVariantCount = functionVariantNames.length;
+		const computedDefaultNames = [];
+		const computedDefaultFns = [];
+		const defaultVariants = config.defaultVariants;
 		const staticDefaults = {};
 		if (extend) for (const ext of extend) {
 			const meta = getComponentMeta(ext);
@@ -625,7 +635,21 @@ function create({ transformClass = (className) => className } = {}) {
 			if (!isRecordObject(variantDef)) continue;
 			if (Object.hasOwn(variantDef, "false") && staticDefaults[name] === void 0) staticDefaults[name] = false;
 		}
-		if (config.defaultVariants) Object.assign(staticDefaults, config.defaultVariants);
+		if (defaultVariants) for (const name in defaultVariants) {
+			if (!Object.hasOwn(defaultVariants, name)) continue;
+			const value = defaultVariants[name];
+			if (typeof value === "function") {
+				computedDefaultNames.push(name);
+				computedDefaultFns.push(value);
+				continue;
+			}
+			if (value === void 0) {
+				Reflect.deleteProperty(staticDefaults, name);
+				continue;
+			}
+			staticDefaults[name] = value;
+		}
+		const computedDefaultCount = computedDefaultNames.length;
 		if (hasAnyDisabled) for (const key in staticDefaults) {
 			if (!Object.hasOwn(staticDefaults, key)) continue;
 			if (disabledVariantKeys.has(key)) {
@@ -654,14 +678,19 @@ function create({ transformClass = (className) => className } = {}) {
 			} else extBaseClassesArr.push(meta.baseClass);
 		}
 		const extCount = extMetas.length;
+		const inheritedComputedDefaultKeys = /* @__PURE__ */ new Set();
+		for (let i = 0; i < extCount; i++) {
+			const keys = extMetas[i].computedDefaultKeys;
+			for (const key of keys) inheritedComputedDefaultKeys.add(key);
+		}
 		const extMetasWithRefine = [];
 		for (let i = 0; i < extCount; i++) {
 			const meta = extMetas[i];
-			if (meta.resolveDefaults) extMetasWithRefine.push(meta);
+			if (meta.resolveRefine) extMetasWithRefine.push(meta);
 		}
 		const extMetasWithRefineCount = extMetasWithRefine.length;
 		const shouldCollectChangedVariants = extMetasWithRefineCount > 0;
-		const creationFrame = !!refine || extMetasWithRefineCount > 0 ? captureCreationFrame(cv) : void 0;
+		const creationFrame = !!refine || computedDefaultCount > 0 || extMetasWithRefineCount > 0 ? captureCreationFrame(cv) : void 0;
 		const functionVariantKeys = /* @__PURE__ */ new Set();
 		for (let i = 0; i < extCount; i++) {
 			const fnKeys = extMetas[i].functionVariantKeys;
@@ -672,6 +701,8 @@ function create({ transformClass = (className) => className } = {}) {
 		}
 		for (let i = 0; i < functionVariantCount; i++) functionVariantKeys.add(functionVariantNames[i]);
 		for (let i = 0; i < variantEntryCount; i++) functionVariantKeys.delete(variantEntryNames[i]);
+		const computedDefaultKeys = new Set(inheritedComputedDefaultKeys);
+		for (let i = 0; i < computedDefaultCount; i++) computedDefaultKeys.add(computedDefaultNames[i]);
 		let staticVariantsOverridingExtFn = null;
 		if (variantEntryCount > 0 && extCount > 0) for (let i = 0; i < variantEntryCount; i++) {
 			const name = variantEntryNames[i];
@@ -705,64 +736,42 @@ function create({ transformClass = (className) => className } = {}) {
 				out[key] = value;
 			}
 		}
-		const resolveDefaultsFn = refine || extMetasWithRefineCount > 0 ? (childDefaults, userProps = EMPTY_DEFAULTS) => {
-			const resolvedVariants = {};
-			Object.assign(resolvedVariants, staticDefaults);
-			for (const key in childDefaults) {
-				if (!Object.hasOwn(childDefaults, key)) continue;
-				const v = childDefaults[key];
-				if (v === void 0) continue;
-				resolvedVariants[key] = v;
-			}
-			for (const key in userProps) {
-				if (!Object.hasOwn(userProps, key)) continue;
-				const v = userProps[key];
-				if (v === void 0) continue;
-				resolvedVariants[key] = v;
+		const isOwnDisabledValue = (key, value) => {
+			if (disabledVariantKeys.has(key)) return true;
+			if (hasDisabledVariantValues) {
+				const valueKey = getVariantValueKey(value);
+				if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) return true;
 			}
-			const refineDefaults = {};
-			for (let i = 0; i < extMetasWithRefineCount; i++) {
-				const extDefaults = extMetasWithRefine[i].resolveDefaults(childDefaults, userProps);
-				for (const k in extDefaults) {
-					if (!Object.hasOwn(extDefaults, k)) continue;
-					refineDefaults[k] = extDefaults[k];
+			return false;
+		};
+		const filterOwnDisabledVariants = (input, fallback) => {
+			if (!hasAnyDisabled) return input;
+			let hasOwnDisabledValue = false;
+			for (const key in input) {
+				if (!Object.hasOwn(input, key)) continue;
+				const value = input[key];
+				if (isOwnDisabledValue(key, value)) {
+					hasOwnDisabledValue = true;
+					break;
 				}
 			}
-			if (refine) {
-				const ownVariants = {};
-				for (let i = 0; i < variantKeysLength; i++) {
-					const k = variantKeys[i];
-					if (Object.hasOwn(resolvedVariants, k)) ownVariants[k] = resolvedVariants[k];
+			if (!hasOwnDisabledValue) return input;
+			const filtered = {};
+			for (const key in input) {
+				if (!Object.hasOwn(input, key)) continue;
+				const value = input[key];
+				if (!isOwnDisabledValue(key, value)) {
+					filtered[key] = value;
+					continue;
 				}
-				refine({
-					variants: ownVariants,
-					setVariants: noop,
-					setDefaultVariants: (newDefaults) => {
-						for (const key in newDefaults) {
-							if (!Object.hasOwn(newDefaults, key)) continue;
-							const value = newDefaults[key];
-							if (userProps[key] !== void 0) continue;
-							if (isVariantDisabled(config, key)) continue;
-							if (isVariantValueDisabled(config, key, value)) continue;
-							refineDefaults[key] = value;
-						}
-					},
-					addClass: noop,
-					addStyle: noop
-				});
+				const fallbackValue = fallback[key];
+				if (fallbackValue !== void 0 && !isOwnDisabledValue(key, fallbackValue)) filtered[key] = fallbackValue;
 			}
-			return refineDefaults;
-		} : null;
+			return filtered;
+		};
 		function resolveVariantsHot(propsVariants) {
 			const defaults = {};
 			Object.assign(defaults, staticDefaults);
-			for (let i = 0; i < extMetasWithRefineCount; i++) {
-				const extDefaults = extMetasWithRefine[i].resolveDefaults(defaults, propsVariants);
-				for (const k in extDefaults) {
-					if (!Object.hasOwn(extDefaults, k)) continue;
-					defaults[k] = extDefaults[k];
-				}
-			}
 			for (const k in propsVariants) {
 				if (!Object.hasOwn(propsVariants, k)) continue;
 				const v = propsVariants[k];
@@ -774,7 +783,70 @@ function create({ transformClass = (className) => className } = {}) {
 			filterDisabledInto(defaults, result);
 			return result;
 		}
-		const runRefineContext = (resolved, userVariantProps, filterOwnVariants, collectOutput, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+		const runComputedDefaults = (resolved, defaultResolved, userVariantProps, filterOwnVariants, protectedVariantKeys) => {
+			if (computedDefaultCount === 0) return {
+				workingResolved: resolved,
+				changedVariants: null
+			};
+			let ownVariants = filterOwnVariants ? null : resolved;
+			const getOwnVariants = () => {
+				if (ownVariants) return ownVariants;
+				const filteredVariants = {};
+				for (let i = 0; i < variantKeysLength; i++) {
+					const key = variantKeys[i];
+					if (Object.hasOwn(resolved, key)) filteredVariants[key] = resolved[key];
+				}
+				ownVariants = filteredVariants;
+				return filteredVariants;
+			};
+			let updatedVariants = null;
+			let changedVariants = null;
+			const ensureUpdated = () => {
+				if (updatedVariants) return updatedVariants;
+				const updated = {};
+				Object.assign(updated, resolved);
+				updatedVariants = updated;
+				return updated;
+			};
+			for (let i = 0; i < computedDefaultCount; i++) {
+				const key = computedDefaultNames[i];
+				if (Object.hasOwn(userVariantProps, key)) {
+					if (userVariantProps[key] !== void 0) continue;
+				}
+				if (protectedVariantKeys?.has(key)) continue;
+				const variantSnapshot = getOwnVariants();
+				const defaultValue = inheritedComputedDefaultKeys.has(key) ? variantSnapshot[key] : defaultResolved[key];
+				const value = computedDefaultFns[i]({
+					defaultValue,
+					variants: variantSnapshot
+				});
+				if (hasAnyDisabled) {
+					if (disabledVariantKeys.has(key)) continue;
+					const valueKey = getVariantValueKey(value);
+					if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) continue;
+				}
+				if (value === void 0) {
+					if (!Object.hasOwn(variantSnapshot, key)) continue;
+					if (shouldCollectChangedVariants) {
+						changedVariants ??= {};
+						changedVariants[key] = value;
+					}
+					Reflect.deleteProperty(ensureUpdated(), key);
+					continue;
+				}
+				if (Object.is(variantSnapshot[key], value)) continue;
+				if (shouldCollectChangedVariants) {
+					changedVariants ??= {};
+					changedVariants[key] = value;
+				}
+				ensureUpdated()[key] = value;
+			}
+			return {
+				workingResolved: updatedVariants ?? resolved,
+				changedVariants
+			};
+		};
+		const runRefineContext = (resolved, userVariantProps, filterOwnVariants, collectOutput, applyVariantUpdates, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
 			let workingResolved = resolved;
 			let cClasses = null;
 			let cStyle = null;
@@ -815,6 +887,7 @@ function create({ transformClass = (className) => className } = {}) {
 				const result = refine({
 					variants: ownVariants,
 					setVariants: (newVariants) => {
+						if (!applyVariantUpdates) return;
 						if (!hasAnyDisabled) {
 							for (const key in newVariants) {
 								if (!Object.hasOwn(newVariants, key)) continue;
@@ -838,23 +911,6 @@ function create({ transformClass = (className) => className } = {}) {
 							ensureUpdated()[key] = value;
 						}
 					},
-					setDefaultVariants: (newDefaults) => {
-						for (const key in newDefaults) {
-							if (!Object.hasOwn(newDefaults, key)) continue;
-							if (userVariantProps[key] !== void 0) continue;
-							if (protectedVariantKeys?.has(key)) continue;
-							const value = newDefaults[key];
-							if (hasAnyDisabled) {
-								if (disabledVariantKeys.has(key)) continue;
-								const valueKey = getVariantValueKey(value);
-								if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) continue;
-							}
-							if (Object.is(getCurrentVariantValue(key), value)) continue;
-							setChangedVariant(key, value);
-							if (pendingProtectedVariants) pendingProtectedVariants[key] = value;
-							ensureUpdated()[key] = value;
-						}
-					},
 					addClass: (className) => {
 						localCClasses?.push(className);
 					},
@@ -892,18 +948,11 @@ function create({ transformClass = (className) => className } = {}) {
 				style: cStyle
 			};
 		};
-		const computeOnce = (resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+		const computeOnce = (resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, defaultResolved = resolved, renderOnly = false) => {
 			let workingResolved = resolved;
 			let cClasses = null;
 			let cStyle = null;
 			let changedVariants = null;
-			if (refine) {
-				const refineResult = runRefineContext(resolved, userVariantProps, true, true, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
-				workingResolved = refineResult.workingResolved;
-				cClasses = refineResult.classes;
-				cStyle = refineResult.style;
-				changedVariants = refineResult.changedVariants;
-			}
 			if (hasExtend) {
 				let extSkipKeys;
 				if (skipKeys === null) extSkipKeys = staticExtSkipKeys;
@@ -931,15 +980,31 @@ function create({ transformClass = (className) => className } = {}) {
 				for (let i = 0; i < extCount; i++) {
 					if (hasIsolatedExt && extIsolated[i]) {
 						const extClasses = [];
-						workingResolved = extMetas[i].compute(workingResolved, extUserVariantProps, extSkipKeys, extSkipVals, extClasses, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+						workingResolved = extMetas[i].compute(workingResolved, extUserVariantProps, extSkipKeys, extSkipVals, extClasses, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, defaultResolved, renderOnly);
 						if (extClasses.length > 0) {
 							const joined = clsx(extClasses);
 							if (joined.length > 0) classesOut.push(extMetas[i].transformClass(joined));
 						}
-					} else workingResolved = extMetas[i].compute(workingResolved, extUserVariantProps, extSkipKeys, extSkipVals, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+					} else workingResolved = extMetas[i].compute(workingResolved, extUserVariantProps, extSkipKeys, extSkipVals, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, defaultResolved, renderOnly);
+					workingResolved = filterOwnDisabledVariants(workingResolved, defaultResolved);
 					if (protectedVariants && extMetasWithRefineCount > 0) Object.assign(extUserVariantProps, protectedVariants);
 				}
 			}
+			if (!renderOnly && computedDefaultCount > 0) {
+				const computedResult = runComputedDefaults(workingResolved, defaultResolved, userVariantProps, true, protectedVariantKeys);
+				workingResolved = computedResult.workingResolved;
+				changedVariants = computedResult.changedVariants;
+			}
+			if (refine) {
+				const refineResult = runRefineContext(workingResolved, userVariantProps, true, true, !renderOnly, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+				workingResolved = refineResult.workingResolved;
+				cClasses = refineResult.classes;
+				cStyle = refineResult.style;
+				if (refineResult.changedVariants) {
+					changedVariants ??= {};
+					Object.assign(changedVariants, refineResult.changedVariants);
+				}
+			}
 			if (hasBaseStyle) Object.assign(styleOut, baseStyle);
 			const ownSkipKeys = skipKeys;
 			const ownSkipValues = skipValues;
@@ -982,7 +1047,8 @@ function create({ transformClass = (className) => className } = {}) {
 			if (cStyle) Object.assign(styleOut, cStyle);
 			return workingResolved;
 		};
-		const compute = !refine && extMetasWithRefineCount === 0 ? computeOnce : (resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+		const compute = !refine && computedDefaultCount === 0 && extMetasWithRefineCount === 0 ? computeOnce : (resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, incomingDefaultResolved = resolved, renderOnly = false) => {
+			if (renderOnly) return computeOnce(resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, incomingDefaultResolved, true);
 			runState ??= { remaining: MAX_REFINE_RUNS };
 			protectedVariants ??= {};
 			protectedVariantKeys ??= /* @__PURE__ */ new Set();
@@ -1004,12 +1070,19 @@ function create({ transformClass = (className) => className } = {}) {
 				const nextPendingProtectedVariants = {};
 				const nextClasses = useDirectOutput ? classesOut : [];
 				const nextStyle = useDirectOutput ? styleOut : {};
-				const nextResolved = computeOnce(workingResolved, userVariantProps, skipKeys, skipValues, nextClasses, nextStyle, runState, protectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
+				const defaultResolved = mergeProtectedIntoBase(incomingDefaultResolved, protectedVariants);
+				const nextResolved = computeOnce(workingResolved, userVariantProps, skipKeys, skipValues, nextClasses, nextStyle, runState, protectedVariants, nextPendingProtectedVariants, protectedVariantKeys, defaultResolved);
 				let protectedChanged;
 				if (pendingProtectedVariants) protectedChanged = mergeVariants(pendingProtectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
 				else protectedChanged = mergeVariants(protectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
 				if (!protectedChanged && (nextResolved === workingResolved || areVariantsEqual(workingResolved, nextResolved))) {
-					if (!useDirectOutput) {
+					if (nextResolved !== workingResolved) {
+						if (useDirectOutput) {
+							classesOut.length = classCount;
+							for (const key in styleOut) if (Object.hasOwn(styleOut, key)) Reflect.deleteProperty(styleOut, key);
+						}
+						computeOnce(nextResolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, null, protectedVariantKeys, defaultResolved, true);
+					} else if (!useDirectOutput) {
 						for (let i = 0; i < nextClasses.length; i++) classesOut.push(nextClasses[i]);
 						Object.assign(styleOut, nextStyle);
 					}
@@ -1046,26 +1119,35 @@ function create({ transformClass = (className) => className } = {}) {
 			Object.assign(styleOut, lastStyle);
 			return workingResolved;
 		};
-		const resolveRefineOnce = (resolved, userVariantProps, filterOwnVariants = true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+		const resolveRefineOnce = (resolved, userVariantProps, filterOwnVariants = true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, defaultResolved = resolved) => {
 			let workingResolved = resolved;
 			let changedVariants = null;
-			if (refine) {
-				const refineResult = runRefineContext(resolved, userVariantProps, filterOwnVariants, false, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
-				workingResolved = refineResult.workingResolved;
-				changedVariants = refineResult.changedVariants;
-			}
 			if (extMetasWithRefineCount > 0) {
 				const extUserVariantProps = getExtUserVariantProps(userVariantProps, protectedVariants ?? null, changedVariants);
 				for (let i = 0; i < extMetasWithRefineCount; i++) {
 					const resolveRefine = extMetasWithRefine[i].resolveRefine;
 					if (!resolveRefine) continue;
-					workingResolved = resolveRefine(workingResolved, extUserVariantProps, true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+					workingResolved = resolveRefine(workingResolved, extUserVariantProps, true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, defaultResolved);
+					workingResolved = filterOwnDisabledVariants(workingResolved, defaultResolved);
 					if (protectedVariants) Object.assign(extUserVariantProps, protectedVariants);
 				}
 			}
+			if (computedDefaultCount > 0) {
+				const computedResult = runComputedDefaults(workingResolved, defaultResolved, userVariantProps, filterOwnVariants, protectedVariantKeys);
+				workingResolved = computedResult.workingResolved;
+				changedVariants = computedResult.changedVariants;
+			}
+			if (refine) {
+				const refineResult = runRefineContext(workingResolved, userVariantProps, filterOwnVariants, false, true, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+				workingResolved = refineResult.workingResolved;
+				if (refineResult.changedVariants) {
+					changedVariants ??= {};
+					Object.assign(changedVariants, refineResult.changedVariants);
+				}
+			}
 			return workingResolved;
 		};
-		const resolveRefine = refine || extMetasWithRefineCount > 0 ? (resolved, userVariantProps, filterOwnVariants = true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+		const resolveRefine = refine || computedDefaultCount > 0 || extMetasWithRefineCount > 0 ? (resolved, userVariantProps, filterOwnVariants = true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, incomingDefaultResolved = resolved) => {
 			runState ??= { remaining: MAX_REFINE_RUNS };
 			protectedVariants ??= {};
 			protectedVariantKeys ??= /* @__PURE__ */ new Set();
@@ -1075,7 +1157,8 @@ function create({ transformClass = (className) => className } = {}) {
 			while (runState.remaining > 0) {
 				runState.remaining -= 1;
 				const nextPendingProtectedVariants = {};
-				const nextResolved = resolveRefineOnce(workingResolved, userVariantProps, filterOwnVariants, runState, protectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
+				const defaultResolved = mergeProtectedIntoBase(incomingDefaultResolved, protectedVariants);
+				const nextResolved = resolveRefineOnce(workingResolved, userVariantProps, filterOwnVariants, runState, protectedVariants, nextPendingProtectedVariants, protectedVariantKeys, defaultResolved);
 				let protectedChanged;
 				if (pendingProtectedVariants) protectedChanged = mergeVariants(pendingProtectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
 				else protectedChanged = mergeVariants(protectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
@@ -1102,19 +1185,12 @@ function create({ transformClass = (className) => className } = {}) {
 			let resolved = {};
 			Object.assign(resolved, staticDefaults);
 			let userVariantProps;
-			if (extMetasWithRefineCount > 0) {
+			if (refine || computedDefaultCount > 0 || extMetasWithRefineCount > 0) {
 				const variantProps = {};
 				for (let i = 0; i < variantKeysLength; i++) {
 					const key = variantKeys[i];
 					if (Object.hasOwn(propsRecord, key)) variantProps[key] = propsRecord[key];
 				}
-				for (let i = 0; i < extMetasWithRefineCount; i++) {
-					const extDefaults = extMetasWithRefine[i].resolveDefaults(resolved, variantProps);
-					for (const k in extDefaults) {
-						if (!Object.hasOwn(extDefaults, k)) continue;
-						resolved[k] = extDefaults[k];
-					}
-				}
 				for (const k in variantProps) {
 					if (!Object.hasOwn(variantProps, k)) continue;
 					const v = variantProps[k];
@@ -1173,11 +1249,11 @@ function create({ transformClass = (className) => className } = {}) {
 		const meta = {
 			baseClass: computedBaseClass,
 			staticDefaults,
-			resolveDefaults: resolveDefaultsFn,
 			compute,
 			resolveRefine,
 			transformClass,
-			functionVariantKeys
+			functionVariantKeys,
+			computedDefaultKeys
 		};
 		const initComponent = (c, propKeys, style) => {
 			c.class = classFn;
@@ -1244,7 +1320,6 @@ function create({ transformClass = (className) => className } = {}) {
 		cx
 	};
 }
-function noop() {}
 const { cv, cx } = create();
 //#endregion
 export { create, cv, cx, splitProps };