@tenphi/tasty 2.6.5 → 2.8.0

package/dist/{config-IzenlK2R.js → config-BDnvK42H.js}

@@ -453,7 +453,19 @@ const K2 = .03;
 const K3 = (1 + K1) / (1 + K2);
 const clamp$1 = (value, min, max) => Math.max(Math.min(value, max), min);
 const constrainAngle = (angle) => (angle % 360 + 360) % 360;
+const toe = (x) => .5 * (K3 * x - K1 + Math.sqrt((K3 * x - K1) * (K3 * x - K1) + 4 * K2 * K3 * x));
 const toeInv = (x) => (x ** 2 + K1 * x) / (K3 * (x + K2));
+const OKHST_REF_EPS = .05;
+function yToL(y) {
+	return toe(Math.cbrt(Math.max(0, y)));
+}
+function yFromTone(t, eps = OKHST_REF_EPS) {
+	const den = Math.log(1 + eps) - Math.log(eps);
+	return Math.exp(t / 100 * den + Math.log(eps)) - eps;
+}
+function fromTone(t, eps = OKHST_REF_EPS) {
+	return yToL(yFromTone(t, eps));
+}
 const oklabToLinearSrgb = (lab) => {
 	const L = lab[0];
 	const a = lab[1];
@@ -745,6 +757,16 @@ function okhslToSrgb(h, s, l) {
 	];
 }
 /**
+* OKHST to sRGB (0-1 range).
+* @param h - Hue in degrees (0-360)
+* @param s - Saturation (0-1)
+* @param t - Tone (0-1)
+* @returns sRGB values in 0-1 range, clamped to gamut
+*/
+function okhstToSrgb(h, s, t) {
+	return okhslToSrgb(h, clamp$1(s, 0, 1), clamp$1(fromTone(t * 100), 0, 1));
+}
+/**
 * OKLCH to sRGB (0-255 range).
 * @param L - Lightness (0-1)
 * @param C - Chroma (typically 0-0.4)
@@ -1024,7 +1046,7 @@ function getRgbValuesFromRgbaString(str) {
 }
 /**
 * Convert any recognized color string to an `rgb()` CSS string.
-* Handles hex, `okhsl()`, `hsl()`/`hsla()`, named CSS colors,
+* Handles hex, `okhsl()`, `okhst()`, `hsl()`/`hsla()`, named CSS colors,
 * and `rgb()`/`rgba()` pass-through.
 */
 function strToRgb(color, _ignoreAlpha = false) {
@@ -1033,6 +1055,7 @@ function strToRgb(color, _ignoreAlpha = false) {
 	if (color.startsWith("#")) return hexToRgb(color);
 	if (color.startsWith("oklch(")) return oklchStringToRgb(color);
 	if (color.startsWith("okhsl(")) return okhslStringToRgb(color);
+	if (color.startsWith("okhst(")) return okhstStringToRgb(color);
 	if (color.startsWith("hsl")) return hslStringToRgb(color);
 	const namedHex = getNamedColorHex().get(color.toLowerCase());
 	if (namedHex) return hexToRgb(namedHex);
@@ -1097,6 +1120,34 @@ function okhslStringToRgb(okhslStr) {
 	return `rgb(${r255} ${g255} ${b255})`;
 }
 /**
+* Convert an `okhst()` color string to an `rgb()`/`rgba()` CSS string.
+* Supports deg/turn/rad hue units and percentage saturation/tone.
+*/
+function okhstStringToRgb(okhstStr) {
+	const match = okhstStr.match(/okhst\(([^)]+)\)/i);
+	if (!match) return null;
+	const [colorPart, alphaPart] = match[1].trim().split("/");
+	const parts = colorPart.trim().split(/[,\s]+/).filter(Boolean);
+	if (parts.length < 3) return null;
+	let h = parseFloat(parts[0]);
+	const hueStr = parts[0].toLowerCase();
+	if (hueStr.endsWith("turn")) h = parseFloat(hueStr) * 360;
+	else if (hueStr.endsWith("rad")) h = parseFloat(hueStr) * 180 / Math.PI;
+	else if (hueStr.endsWith("deg")) h = parseFloat(hueStr);
+	const parsePercent = (val) => {
+		const num = parseFloat(val);
+		return val.includes("%") ? num / 100 : num;
+	};
+	const s = Math.max(0, Math.min(1, parsePercent(parts[1])));
+	const t = Math.max(0, Math.min(1, parsePercent(parts[2])));
+	const [r, g, b] = okhstToSrgb(h, s, t);
+	const r255 = Math.round(Math.max(0, Math.min(1, r)) * 255);
+	const g255 = Math.round(Math.max(0, Math.min(1, g)) * 255);
+	const b255 = Math.round(Math.max(0, Math.min(1, b)) * 255);
+	if (alphaPart) return `rgba(${r255}, ${g255}, ${b255}, ${parseFloat(alphaPart.trim())})`;
+	return `rgb(${r255} ${g255} ${b255})`;
+}
+/**
 * Convert an `oklch()` color string to an `rgb()`/`rgba()` CSS string.
 * Supports deg/turn/rad hue units and percentage lightness.
 */
@@ -1269,6 +1320,17 @@ function resolveToRgbaValues(color) {
 			parsed.alpha
 		];
 	}
+	if (trimmed.startsWith("okhst(")) {
+		const parsed = parseColorFuncArgs(trimmed, "okhst");
+		if (!parsed) return null;
+		const [r, g, b] = okhstToSrgb(parseHue(parsed.parts[0]), clamp01(parsePercent(parsed.parts[1])), clamp01(parsePercent(parsed.parts[2])));
+		return [
+			clamp01(r) * 255,
+			clamp01(g) * 255,
+			clamp01(b) * 255,
+			parsed.alpha
+		];
+	}
 	const fallback = strToRgb(trimmed);
 	if (fallback) {
 		if (fallback !== trimmed) return resolveToRgbaValues(fallback);
@@ -1602,7 +1664,7 @@ function classify(raw, opts, recurse) {
 					if (baseToken in predefinedTokens) {
 						const resolvedValue = predefinedTokens[baseToken];
 						if (resolvedValue.startsWith("#")) return classify(`${resolvedValue.toLowerCase()}.${rawAlpha}`, opts, recurse);
-						const funcMatch = resolvedValue.match(/^(rgba?|hsla?|hwb|oklab|oklch|lab|lch|color|okhsl|device-cmyk|gray|color-mix|color-contrast)\((.+)\)$/i);
+						const funcMatch = resolvedValue.match(/^(rgba?|hsla?|hwb|oklab|oklch|lab|lch|color|okhsl|okhst|device-cmyk|gray|color-mix|color-contrast)\((.+)\)$/i);
 						if (funcMatch) {
 							const [, funcName, args] = funcMatch;
 							let alpha;
@@ -1983,20 +2045,7 @@ var StyleParser = class {
 	}
 };
 //#endregion
-//#region src/plugins/okhsl-plugin.ts
-/**
-* OKHSL Plugin for Tasty
-*
-* Converts OKHSL color syntax to RGB notation.
-* Supports angle units: deg, turn, rad, or unitless (degrees).
-*
-* Examples:
-*   okhsl(240.5 50% 50%)
-*   okhsl(240.5deg 50% 50%)
-*   okhsl(0.25turn 50% 50%)
-*   okhsl(1.57rad 50% 50%)
-*/
-const conversionCache = new Lru(500);
+//#region src/plugins/color-func.ts
 const clamp = (value, min, max) => Math.max(Math.min(value, max), min);
 /**
 * Parse an angle value with optional unit.
@@ -2022,32 +2071,56 @@ const parsePercentage = (value) => {
 	return value.includes("%") ? num / 100 : num;
 };
 /**
+* Creates a color function handler for the tasty parser.
+* @param name The name of the color space (e.g., 'okhsl', 'okhst')
+* @param channelLabel The label for the channels in warnings (e.g., 'H S L')
+* @param convert A function that converts the parsed H, C2, C3 values to sRGB [r, g, b] (0-1)
+*/
+function createColorFunc(name, channelLabel, convert) {
+	const conversionCache = new Lru(500);
+	return (groups) => {
+		if (groups.length === 0 || groups[0].all.length < 3) {
+			console.warn(`[${name}] Expected 3 values (${channelLabel}), got:`, groups);
+			return "rgb(0% 0% 0%)";
+		}
+		const group = groups[0];
+		const tokens = group.all;
+		const alpha = group.parts.length > 1 && group.parts[1].all.length > 0 ? group.parts[1].output : void 0;
+		const cacheKey = tokens.slice(0, 3).join(" ") + (alpha ? ` / ${alpha}` : "");
+		const cached = conversionCache.get(cacheKey);
+		if (cached) return cached;
+		const h = parseAngle(tokens[0]);
+		const c2 = parsePercentage(tokens[1]);
+		const c3 = parsePercentage(tokens[2]);
+		const [r, g, b] = convert(h, clamp(c2, 0, 1), clamp(c3, 0, 1));
+		const format = (n) => {
+			const pct = n * 100;
+			return parseFloat(pct.toFixed(1)).toString() + "%";
+		};
+		const result = alpha ? `rgb(${format(r)} ${format(g)} ${format(b)} / ${alpha})` : `rgb(${format(r)} ${format(g)} ${format(b)})`;
+		conversionCache.set(cacheKey, result);
+		return result;
+	};
+}
+//#endregion
+//#region src/plugins/okhsl-plugin.ts
+/**
+* OKHSL Plugin for Tasty
+*
+* Converts OKHSL color syntax to RGB notation.
+* Supports angle units: deg, turn, rad, or unitless (degrees).
+*
+* Examples:
+*   okhsl(240.5 50% 50%)
+*   okhsl(240.5deg 50% 50%)
+*   okhsl(0.25turn 50% 50%)
+*   okhsl(1.57rad 50% 50%)
+*/
+/**
 * The okhsl function handler for tasty parser.
 * Receives parsed style groups and returns an RGB color string.
 */
-const okhslFunc = (groups) => {
-	if (groups.length === 0 || groups[0].all.length < 3) {
-		console.warn("[okhsl] Expected 3 values (H S L), got:", groups);
-		return "rgb(0% 0% 0%)";
-	}
-	const group = groups[0];
-	const tokens = group.all;
-	const alpha = group.parts.length > 1 && group.parts[1].all.length > 0 ? group.parts[1].output : void 0;
-	const cacheKey = tokens.slice(0, 3).join(" ") + (alpha ? ` / ${alpha}` : "");
-	const cached = conversionCache.get(cacheKey);
-	if (cached) return cached;
-	const h = parseAngle(tokens[0]);
-	const s = parsePercentage(tokens[1]);
-	const l = parsePercentage(tokens[2]);
-	const [r, g, b] = okhslToSrgb(h, clamp(s, 0, 1), clamp(l, 0, 1));
-	const format = (n) => {
-		const pct = n * 100;
-		return parseFloat(pct.toFixed(1)).toString() + "%";
-	};
-	const result = alpha ? `rgb(${format(r)} ${format(g)} ${format(b)} / ${alpha})` : `rgb(${format(r)} ${format(g)} ${format(b)})`;
-	conversionCache.set(cacheKey, result);
-	return result;
-};
+const okhslFunc = createColorFunc("okhsl", "H S L", okhslToSrgb);
 /**
 * OKHSL Plugin for Tasty.
 *
@@ -2075,6 +2148,52 @@ const okhslPlugin = () => ({
 	funcs: { okhsl: okhslFunc }
 });
 //#endregion
+//#region src/plugins/okhst-plugin.ts
+/**
+* OKHST Plugin for Tasty
+*
+* Converts OKHST color syntax to RGB notation.
+* OKHST is OKHSL with the lightness axis replaced by a contrast-uniform tone axis.
+* Supports angle units: deg, turn, rad, or unitless (degrees).
+*
+* Examples:
+*   okhst(240.5 50% 50%)
+*   okhst(240.5deg 50% 50%)
+*   okhst(0.25turn 50% 50%)
+*   okhst(1.57rad 50% 50%)
+*/
+/**
+* The okhst function handler for tasty parser.
+* Receives parsed style groups and returns an RGB color string.
+*/
+const okhstFunc = createColorFunc("okhst", "H S T", okhstToSrgb);
+/**
+* OKHST Plugin for Tasty.
+*
+* Adds support for the `okhst()` color function in tasty styles.
+*
+* @example
+* ```ts
+* import { configure } from '@tenphi/tasty';
+* import { okhstPlugin } from '@tenphi/tasty';
+*
+* configure({
+*   plugins: [okhstPlugin()],
+* });
+*
+* // Now you can use okhst in styles:
+* const Box = tasty({
+*   styles: {
+*     fill: 'okhst(240 50% 50%)',
+*   },
+* });
+* ```
+*/
+const okhstPlugin = () => ({
+	name: "okhst",
+	funcs: { okhst: okhstFunc }
+});
+//#endregion
 //#region src/utils/styles.ts
 /**
 * Normalize a color token value.
@@ -2101,7 +2220,7 @@ function isSimpleColorFast(val) {
 		case 114: return val.charCodeAt(1) === 103 && val.charCodeAt(2) === 98;
 		case 104: return val.charCodeAt(1) === 115 && val.charCodeAt(2) === 108;
 		case 108: return val.charCodeAt(1) === 99 && val.charCodeAt(2) === 104;
-		case 111: return val.startsWith("oklch(") || val.startsWith("okhsl(");
+		case 111: return val.startsWith("oklch(") || val.startsWith("okhsl(") || val.startsWith("okhst(");
 		case 118: return RE_VAR_COLOR.test(val);
 		case 99: return val === "currentColor" || val === "currentcolor";
 		case 116: return val === "transparent";
@@ -2134,7 +2253,10 @@ function getOrCreateParser() {
 	}
 	return __tastyParser;
 }
-const __tastyFuncs = { okhsl: okhslFunc };
+const __tastyFuncs = {
+	okhsl: okhslFunc,
+	okhst: okhstFunc
+};
 function customFunc(name, fn) {
 	__tastyFuncs[name] = fn;
 	getOrCreateParser().setFuncs(__tastyFuncs);
@@ -7442,6 +7564,18 @@ function wrapInIsOrNot(args, negated) {
 	return `${negated ? ":not" : ":is"}(${args.sort().join(", ")})`;
 }
 /**
+* Wrap a non-empty selector fragment in `:where(...)` to zero its
+* specificity. Tasty anchors specificity solely on the doubled class
+* (`.tXX.tXX`) and `data-element` attributes; every stateful selector
+* (modifiers, pseudos, :is()/:not() groups, root/parent context) is wrapped
+* so it contributes nothing to specificity and the cascade is decided by
+* source order alone. Empty input passes through unchanged.
+*/
+function wrapWhere(inner) {
+	if (!inner) return "";
+	return `:where(${inner})`;
+}
+/**
 * Convert a selector group to a CSS selector fragment.
 *
 * Single-branch groups are unwrapped (no :is() wrapper).
@@ -7545,7 +7679,7 @@ function rootGroupsToCSS(groups) {
 	if (optimized.length === 0) return void 0;
 	let prefix = ":root";
 	for (const group of optimized) prefix += selectorGroupToCSS(group);
-	return prefix;
+	return wrapWhere(prefix);
 }
 /**
 * Convert parent groups to CSS selector fragments (for final output).
@@ -7557,7 +7691,8 @@ function parentGroupsToCSS(groups) {
 	for (const group of groups) {
 		const combinator = group.direct ? " > *" : " *";
 		const args = group.branches.map((branch) => branchToCSS(branch) + combinator);
-		result += wrapInIsOrNot(args, group.negated);
+		const inner = group.negated ? `:not(${args.sort().join(", ")})` : args.sort().join(", ");
+		result += wrapWhere(inner);
 	}
 	return result;
 }
@@ -8227,6 +8362,21 @@ function buildAtRulesFromVariant(variant) {
 	return atRules;
 }
 //#endregion
+//#region src/pipeline/warnings.ts
+const defaultWarningHandler = (warning) => {
+	console.warn(`[Tasty] ${warning.message}`);
+};
+let warningHandler = defaultWarningHandler;
+/**
+* Emit a structured pipeline warning via the configured handler.
+*/
+function emitWarning(code, message) {
+	warningHandler({
+		code,
+		message
+	});
+}
+//#endregion
 //#region src/pipeline/exclusive.ts
 /**
 * Build exclusive conditions for a list of parsed style entries.
@@ -8255,7 +8405,12 @@ function buildAtRulesFromVariant(variant) {
 function buildExclusiveConditions(entries) {
 	const result = [];
 	const priorConditions = [];
+	const floors = [];
 	for (const entry of entries) {
+		if (entry.floor) {
+			floors.push(entry);
+			continue;
+		}
 		let exclusive = entry.condition;
 		for (const prior of priorConditions) {
 			if (prior.kind === "true") continue;
@@ -8270,6 +8425,10 @@ function buildExclusiveConditions(entries) {
 		});
 		if (entry.condition.kind !== "true") priorConditions.push(entry.condition);
 	}
+	for (const floor of floors) result.push({
+		...floor,
+		exclusiveCondition: floor.condition
+	});
 	return result;
 }
 /**
@@ -8282,19 +8441,85 @@ function buildExclusiveConditions(entries) {
 */
 function parseStyleEntries(styleKey, valueMap, parseCondition) {
 	const entries = [];
-	Object.keys(valueMap).forEach((stateKey, index) => {
+	let floorEntry = null;
+	Object.keys(valueMap).forEach((stateKey) => {
 		const value = valueMap[stateKey];
+		if (stateKey === "_") {
+			floorEntry = {
+				styleKey,
+				stateKey,
+				value,
+				condition: trueCondition(),
+				priority: 0,
+				floor: true
+			};
+			return;
+		}
+		if (isMisusedFallbackKey(stateKey)) {
+			emitWarning("INVALID_FALLBACK_KEY", `Style key "${stateKey}" (in "${styleKey}") combines the fallback "_" with other state logic. "_" can only be used on its own as a map-wide fallback floor. The key has been ignored.`);
+			return;
+		}
 		const condition = stateKey === "" ? trueCondition() : parseCondition(stateKey);
 		entries.push({
 			styleKey,
 			stateKey,
 			value,
 			condition,
-			priority: index
+			priority: 0
 		});
 	});
-	entries.reverse();
-	return entries;
+	if (floorEntry !== null) {
+		const hasOtherStates = entries.some((e) => e.condition.kind !== "true");
+		const hasDefault = entries.some((e) => e.condition.kind === "true");
+		if (!hasOtherStates && hasDefault) {
+			emitWarning("REDUNDANT_DEFAULT_STATE", `Style "${styleKey}" defines both a "_" fallback and a "" default with no other states. The "" default is redundant (always superseded by "_"); the "_" value is used and the "" default is ignored.`);
+			entries.length = 0;
+		}
+	}
+	const normalized = normalizeDefaultStates(entries, styleKey);
+	const ordered = floorEntry !== null ? [floorEntry, ...normalized] : normalized;
+	ordered.forEach((entry, index) => {
+		entry.priority = index;
+	});
+	ordered.reverse();
+	return ordered;
+}
+/**
+* Detect a misused standalone `_` fallback key: a key that is not exactly
+* `_` but contains `_` as a standalone atom among state-logic operators
+* (`&`, `|`, `^`, `,`) or grouping parens. A `_` embedded in a longer token
+* (e.g. a modifier named `_private`) is not a misuse.
+*/
+function isMisusedFallbackKey(stateKey) {
+	if (stateKey === "_" || !stateKey.includes("_")) return false;
+	return /(?:^|[\s&|^,(])_(?:[\s&|^,)]|$)/.test(stateKey);
+}
+/**
+* Resolve the bare `''` default state (`condition.kind === 'true'`) in a
+* style value map.
+*
+* The bare default only behaves correctly as the **first** (lowest-priority)
+* key. When it appears later, `buildExclusiveConditions` processes it first
+* (after the reverse), never adds it to the prior list, and never negates it
+* — so it silently overrides every state authored before it.
+*
+* This function, given entries in authored order, moves a misplaced bare
+* default to the front (lowest priority), preserving the relative order of
+* all other entries, and emits a `MISPLACED_DEFAULT_STATE` warning.
+*
+* The `_` fallback floor is pulled out before this runs (see
+* `parseStyleEntries`), so only the bare `''` default is considered here.
+*/
+function normalizeDefaultStates(entries, styleKey) {
+	const defaultPos = entries.findIndex((e) => e.condition.kind === "true");
+	if (defaultPos <= 0) return entries;
+	const defaultEntry = entries[defaultPos];
+	emitWarning("MISPLACED_DEFAULT_STATE", `Style "${styleKey}" defines the default state "${defaultEntry.stateKey}" after other states. A bare default ("") must be the first key, otherwise it overrides the states above it. It has been moved to the first position. Define default states first.`);
+	return [
+		defaultEntry,
+		...entries.slice(0, defaultPos),
+		...entries.slice(defaultPos + 1)
+	];
 }
 /**
 * Merge parsed entries that share the same value.
@@ -8417,8 +8642,9 @@ function extractCompoundStates(valueMap) {
 	const keys = Object.keys(valueMap);
 	if (keys.length < 3 || !keys.some((k) => k.includes("&"))) return valueMap;
 	const entries = keys.map((key) => {
+		const atoms = splitTopLevelAnd(key);
 		return {
-			atoms: splitTopLevelAnd(key) ?? [key],
+			atoms: atoms === null || atoms.includes("_") ? [key] : atoms,
 			value: valueMap[key]
 		};
 	});
@@ -8723,21 +8949,6 @@ function transformSelectorContent(content) {
 	return content.replace(ELEMENT_NAME_RE, (_, prefix, name) => `${prefix}[data-element="${name}"]`);
 }
 //#endregion
-//#region src/pipeline/warnings.ts
-const defaultWarningHandler = (warning) => {
-	console.warn(`[Tasty] ${warning.message}`);
-};
-let warningHandler = defaultWarningHandler;
-/**
-* Emit a structured pipeline warning via the configured handler.
-*/
-function emitWarning(code, message) {
-	warningHandler({
-		code,
-		message
-	});
-}
-//#endregion
 //#region src/pipeline/parseStateKey.ts
 /**
 * State Key Parser
@@ -9252,7 +9463,17 @@ function runPipeline(styles, parserContext) {
 	const starting = [];
 	for (const rule of dedupedRules) if (rule.startingStyle) starting.push(rule);
 	else normal.push(rule);
-	return normal.concat(starting);
+	return stableSortByOrder(normal).concat(stableSortByOrder(starting));
+}
+/**
+* Stable sort CSS rules by their `order` hint ascending. Rules without an
+* `order` are treated as 0. `Array.prototype.sort` is stable (ES2019+,
+* Node >= 20), so equal-order rules keep their emission order — the `_`
+* fallback floor (low order) stays before the overrides that layer over it.
+*/
+function stableSortByOrder(rules) {
+	if (rules.length <= 1) return rules;
+	return [...rules].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 }
 /**
 * Process styles at a given nesting level.
@@ -9360,7 +9581,8 @@ function invokeHandler(handler, stateSnapshots, selectorSuffix) {
 			for (const suffix of suffixes) computedRules.push({
 				condition: snapshot.condition,
 				declarations,
-				selectorSuffix: suffix
+				selectorSuffix: suffix,
+				order: snapshot.order
 			});
 		}
 	}
@@ -9778,10 +10000,15 @@ function computeStateCombinations(exclusiveByStyle, lookupStyles) {
 		const simplified = simplifyCondition(and(...combo.map((e) => e.exclusiveCondition)));
 		if (simplified.kind === "false") continue;
 		const values = {};
-		for (const entry of combo) values[entry.styleKey] = entry.value;
+		let order = 0;
+		for (const entry of combo) {
+			values[entry.styleKey] = entry.value;
+			if (entry.priority > order) order = entry.priority;
+		}
 		snapshots.push({
 			condition: simplified,
-			values
+			values,
+			order
 		});
 	}
 	return snapshots;
@@ -9829,10 +10056,13 @@ function mergeByValue(rules) {
 	for (const [, groupRules] of groups) if (groupRules.length === 1) merged.push(groupRules[0]);
 	else {
 		const mergedCondition = simplifyCondition(or(...groupRules.map((r) => r.condition)));
+		let order = groupRules[0].order;
+		for (const r of groupRules) if (r.order < order) order = r.order;
 		merged.push({
 			condition: mergedCondition,
 			declarations: groupRules[0].declarations,
-			selectorSuffix: groupRules[0].selectorSuffix
+			selectorSuffix: groupRules[0].selectorSuffix,
+			order
 		});
 	}
 	return merged;
@@ -9842,12 +10072,15 @@ function mergeByValue(rules) {
 */
 function buildSelectorFromVariant(variant, selectorSuffix) {
 	let selector = "";
-	selector += branchToCSS([...variant.modifierConditions, ...variant.pseudoConditions]);
-	for (const group of variant.selectorGroups) selector += selectorGroupToCSS(group);
+	let rootSegment = branchToCSS([...variant.modifierConditions, ...variant.pseudoConditions]);
+	for (const group of variant.selectorGroups) rootSegment += selectorGroupToCSS(group);
+	selector += wrapWhere(rootSegment);
 	if (variant.parentGroups.length > 0) selector += parentGroupsToCSS(variant.parentGroups);
 	selector += selectorSuffix;
 	const ownOptimized = optimizeGroups(variant.ownGroups);
-	for (const group of ownOptimized) selector += selectorGroupToCSS(group);
+	let ownSegment = "";
+	for (const group of ownOptimized) ownSegment += selectorGroupToCSS(group);
+	selector += wrapWhere(ownSegment);
 	return selector;
 }
 /**
@@ -9882,7 +10115,8 @@ function materializeComputedRule(rule) {
 		const selectorFragments = mergeVariantsIntoSelectorGroups(group.variants).map((v) => buildSelectorFromVariant(v, rule.selectorSuffix));
 		const cssRule = {
 			selector: selectorFragments.length === 1 ? selectorFragments[0] : selectorFragments,
-			declarations
+			declarations,
+			order: rule.order
 		};
 		if (group.atRules.length > 0) cssRule.atRules = group.atRules;
 		if (group.rootPrefix) cssRule.rootPrefix = group.rootPrefix;
@@ -10594,6 +10828,6 @@ function resetConfig() {
 	delete storage[GLOBAL_INJECTOR_KEY];
 }
 //#endregion
-export { parseColor as $, StyleInjector as A, hasLocalProperties as At, styleHandlers as B, parseStateKey as C, getRgbValuesFromRgbaString as Ct, extractPredefinedStateRefs as D, Lru as Dt, extractLocalPredefinedStates as E, strToRgb as Et, fontFaceContentHash as F, CUSTOM_UNITS as G, warn as H, formatFontFaceRule as I, filterMods as J, DIRECTIONS as K, hasLocalFontFace as L, formatCounterStyleRule as M, hasLocalCounterStyle as N, getGlobalPredefinedStates as O, extractLocalProperties as Ot, extractLocalFontFace as P, normalizeColorTokenValue as Q, SheetManager as R, renderStyles as S, getNamedColorHex as St, createStateParserContext as T, hslToRgbValues as Tt, createStyle as U, deprecationWarning as V, PropertyTypeResolver as W, getGlobalParser as X, getGlobalFuncs as Y, getGlobalPredefinedTokens as Z, markStylesGenerated as _, colorInitialValueToComponents as _t, getGlobalCounterStyle as a, okhslPlugin as at, hasPipelineCacheEntry as b, getColorSpaceSuffix as bt, getGlobalKeyframes as c, DEFAULT_NAME_PREFIX as ct, getNamePrefix as d, makeCounterStyleName as dt, parseStyle as et, hasGlobalKeyframes as f, makeKeyframeName as ft, isTestEnvironment as g, hashString as gt, isConfigLocked as h, isDevEnv as ht, getGlobalConfigTokens as i, okhslFunc as it, extractLocalCounterStyle as j, parsePropertyToken as jt, setGlobalPredefinedStates as k, getEffectiveDefinition as kt, getGlobalRecipes as l, DEFAULT_ZERO_NAME_PREFIX as lt, hasStylesGenerated as m, validateNamePrefix as mt, getConfig as n, setGlobalPredefinedTokens as nt, getGlobalFontFace as o, StyleParser as ot, hasGlobalRecipes as p, tastyClassRegex as pt, customFunc as q, getEffectiveProperties as r, stringifyStyles as rt, getGlobalInjector as s, Bucket as st, configure as t, resetGlobalPredefinedTokens as tt, getGlobalStyles as u, makeClassName as ut, resetConfig as v, getColorSpaceComponents as vt, camelToKebab as w, hexToRgb as wt, isSelector as x, getComponentPropertySyntax as xt, generateTypographyTokens as y, getColorSpaceFunc as yt, STYLE_HANDLER_MAP as z };
+export { parseColor as $, StyleInjector as A, extractLocalProperties as At, styleHandlers as B, parseStateKey as C, getComponentPropertySyntax as Ct, extractPredefinedStateRefs as D, hslToRgbValues as Dt, extractLocalPredefinedStates as E, hexToRgb as Et, fontFaceContentHash as F, CUSTOM_UNITS as G, warn as H, formatFontFaceRule as I, filterMods as J, DIRECTIONS as K, hasLocalFontFace as L, formatCounterStyleRule as M, hasLocalProperties as Mt, hasLocalCounterStyle as N, parsePropertyToken as Nt, getGlobalPredefinedStates as O, strToRgb as Ot, extractLocalFontFace as P, normalizeColorTokenValue as Q, SheetManager as R, renderStyles as S, getColorSpaceSuffix as St, createStateParserContext as T, getRgbValuesFromRgbaString as Tt, createStyle as U, deprecationWarning as V, PropertyTypeResolver as W, getGlobalParser as X, getGlobalFuncs as Y, getGlobalPredefinedTokens as Z, markStylesGenerated as _, isDevEnv as _t, getGlobalCounterStyle as a, okhstPlugin as at, hasPipelineCacheEntry as b, getColorSpaceComponents as bt, getGlobalKeyframes as c, StyleParser as ct, getNamePrefix as d, DEFAULT_ZERO_NAME_PREFIX as dt, parseStyle as et, hasGlobalKeyframes as f, makeClassName as ft, isTestEnvironment as g, validateNamePrefix as gt, isConfigLocked as h, tastyClassRegex as ht, getGlobalConfigTokens as i, okhstFunc as it, extractLocalCounterStyle as j, getEffectiveDefinition as jt, setGlobalPredefinedStates as k, Lru as kt, getGlobalRecipes as l, Bucket as lt, hasStylesGenerated as m, makeKeyframeName as mt, getConfig as n, setGlobalPredefinedTokens as nt, getGlobalFontFace as o, okhslFunc as ot, hasGlobalRecipes as p, makeCounterStyleName as pt, customFunc as q, getEffectiveProperties as r, stringifyStyles as rt, getGlobalInjector as s, okhslPlugin as st, configure as t, resetGlobalPredefinedTokens as tt, getGlobalStyles as u, DEFAULT_NAME_PREFIX as ut, resetConfig as v, hashString as vt, camelToKebab as w, getNamedColorHex as wt, isSelector as x, getColorSpaceFunc as xt, generateTypographyTokens as y, colorInitialValueToComponents as yt, STYLE_HANDLER_MAP as z };
 
-//# sourceMappingURL=config-IzenlK2R.js.map
+//# sourceMappingURL=config-BDnvK42H.js.map