@tenphi/tasty 3.9.11 → 3.11.0

package/dist/chunks/{style-engine-BBbBuSkT.js → style-engine-BX2LshDZ.js}

@@ -1,4 +1,4 @@
-import { M as toSnakeCase, N as CSS_WIDE_KEYWORDS, T as makeEmptyDetails, _ as stringifyStyles, d as parseColor, f as parseStyle, h as resolveCustomProperties, i as DIRECTIONS, j as normalizeDslName, u as normalizeColorTokenValue, w as Lru } from "./dsl-DRhFWQzo.js";
+import { M as toSnakeCase, N as CSS_WIDE_KEYWORDS, T as makeEmptyDetails, _ as stringifyStyles, c as getGlobalParser, d as parseColor, f as parseStyle, h as resolveCustomProperties, i as DIRECTIONS, j as normalizeDslName, u as normalizeColorTokenValue, w as Lru } from "./dsl-DYSJc1-T.js";
 import { a as warnOnceDev, i as warn, n as isSelector, o as isDevEnv } from "./shared-utils-y-HjvPN4.js";
 //#region src/config-state.ts
 let stylesGenerated = false;
@@ -87,6 +87,10 @@ function setGlobalPredefinedStates(states) {
 function getGlobalPredefinedStates() {
 	return globalPredefinedStates;
 }
+function clearGlobalPredefinedStates() {
+	globalPredefinedStates = {};
+	emittedWarnings.clear();
+}
 const PREDEFINED_STATE_PATTERN = /@[A-Za-z][A-Za-z0-9-]*(?![A-Za-z0-9-:(])/g;
 function extractPredefinedStateRefs(value) {
 	const matches = value.match(PREDEFINED_STATE_PATTERN);
@@ -130,8 +134,28 @@ function resolvePredefinedState(stateKey, ctx) {
 function expandDimensionShorthands(condition) {
 	return condition.replace(/\b(?:w|h|is|bs)\b/g, (dimension) => dimension === "w" ? "width" : dimension === "h" ? "height" : dimension === "is" ? "inline-size" : "block-size");
 }
+const RE_QUERY_UNIT_NUMBER = /(?<![\w.-])(?:\d*\.\d+|\d+)([a-z][a-z0-9]*)\b/g;
 function expandTastyUnits(value) {
-	return value.replace(/(\d+(?:\.\d+)?)\s*x\b/g, (_, num) => `calc(var(--gap) * ${num})`);
+	const units = getGlobalParser().getUnits();
+	if (!units) return value;
+	return value.replace(RE_QUERY_UNIT_NUMBER, (token, unit) => {
+		if (!Object.prototype.hasOwnProperty.call(units, unit)) return token;
+		const resolved = parseStyle(token).groups[0]?.values[0] ?? token;
+		if (resolved.includes("var(")) warnOnce(`query-unit-var:${unit}`, `[Tasty] Unit '${unit}' resolves to '${resolved}', which @media and @container conditions cannot read: custom properties are not available there. Write '${token}' as a px, em, or rem length.`);
+		return resolved;
+	});
+}
+const RE_LENGTH_FEATURE = /^(?:min-|max-)?(?:width|height|inline-size|block-size)$/;
+const RE_QUERY_OPERATOR = /<=|>=|<|>|=/;
+const RE_FEATURE_NAME = /^[a-z][a-z-]*$/;
+function expandQueryUnits(condition) {
+	let feature;
+	if (RE_QUERY_OPERATOR.test(condition)) feature = condition.split(RE_QUERY_OPERATOR).map((operand) => operand.trim()).find((operand) => RE_FEATURE_NAME.test(operand));
+	else {
+		const colonIdx = condition.indexOf(":");
+		feature = (colonIdx === -1 ? condition : condition.slice(0, colonIdx)).trim();
+	}
+	return feature && RE_LENGTH_FEATURE.test(feature) ? expandTastyUnits(condition) : condition;
 }
 function findTopLevelComma(s) {
 	let depth = 0;
@@ -175,6 +199,16 @@ const CHUNK_NAMES = {
 };
 const APPEARANCE_CHUNK_STYLES = [
 	"fill",
+	"backgroundColor",
+	"image",
+	"backgroundImage",
+	"backgroundPosition",
+	"backgroundSize",
+	"backgroundRepeat",
+	"backgroundAttachment",
+	"backgroundOrigin",
+	"backgroundClip",
+	"background",
 	"color",
 	"opacity",
 	"border",
@@ -299,6 +333,113 @@ function resetStyleChunks() {
 	for (const [style, chunk] of builtinSnapshot) STYLE_TO_CHUNK.set(style, chunk);
 }
 //#endregion
+//#region src/styles/createStyle.ts
+const CACHE = {};
+function createStyle(styleName, cssStyle, converter) {
+	const key = `${styleName}.${cssStyle ?? ""}`;
+	if (!CACHE[key]) {
+		const styleHandler = (styleMap) => {
+			let styleValue = styleMap[styleName];
+			if (styleValue == null || styleValue === false) return null;
+			let finalCssStyle;
+			const isColorToken = !cssStyle && typeof styleName === "string" && styleName.startsWith("#");
+			if (isColorToken) finalCssStyle = `--${normalizeDslName(styleName.slice(1))}-color`;
+			else if (!cssStyle && styleName[0] === "$") finalCssStyle = `--${normalizeDslName(styleName.slice(1))}`;
+			else finalCssStyle = cssStyle || toSnakeCase(styleName);
+			if (isColorToken) {
+				const normalized = normalizeColorTokenValue(styleValue);
+				if (normalized === null) return null;
+				styleValue = normalized;
+			}
+			if (converter) {
+				const converted = converter(styleValue);
+				if (converted) styleValue = converted;
+				else if (typeof styleValue !== "string") return null;
+			}
+			if (typeof styleValue === "string" && finalCssStyle.startsWith("--") && finalCssStyle.endsWith("-color")) {
+				styleValue = styleValue.trim();
+				return { [finalCssStyle]: parseColor(styleValue).color ?? "" };
+			}
+			const processed = parseStyle(styleValue);
+			return { [finalCssStyle]: processed.output };
+		};
+		styleHandler.__lookupStyles = [styleName];
+		CACHE[key] = styleHandler;
+	}
+	return CACHE[key];
+}
+//#endregion
+//#region src/styles/animation.ts
+const NON_NAME_KEYWORDS = new Set("none initial inherit unset revert revert-layer auto normal running paused reverse alternate alternate-reverse forwards backwards both infinite ease linear ease-in ease-out ease-in-out step-start step-end".split(" "));
+const RE_NAME = /^(?:--|-?[a-zA-Z_\u0080-￿])[\w\-\u0080-￿]*$/;
+function nameAt(value, start, end) {
+	const token = value.slice(start, end);
+	return RE_NAME.test(token) && !NON_NAME_KEYWORDS.has(token.toLowerCase()) ? {
+		name: token,
+		index: start
+	} : null;
+}
+function scanAnimationNames(value) {
+	const items = [];
+	let found = null;
+	let start = -1;
+	let depth = 0;
+	let quote = "";
+	for (let i = 0; i < value.length; i++) {
+		const ch = value[i];
+		if (quote) {
+			if (ch === "\\") i++;
+			else if (ch === quote) quote = "";
+			continue;
+		}
+		if (depth === 0 && (ch === "," || /\s/.test(ch))) {
+			if (start !== -1) found ??= nameAt(value, start, i);
+			start = -1;
+			if (ch === ",") {
+				items.push(found);
+				found = null;
+			}
+			continue;
+		}
+		if (start === -1) start = i;
+		if (ch === "\"" || ch === "'") quote = ch;
+		else if (ch === "\\") i++;
+		else if (ch === "(") depth++;
+		else if (ch === ")" && depth > 0) depth--;
+	}
+	if (start !== -1) found ??= nameAt(value, start, value.length);
+	items.push(found);
+	return items;
+}
+function restoreAnimationNameCase(authored, output) {
+	if (authored === output || authored === authored.toLowerCase()) return output;
+	const authoredNames = scanAnimationNames(authored);
+	const outputNames = scanAnimationNames(output);
+	if (authoredNames.length !== outputNames.length) return output;
+	let result = output;
+	for (let i = outputNames.length - 1; i >= 0; i--) {
+		const from = outputNames[i];
+		const to = authoredNames[i];
+		if (!from || !to || from.name === to.name) continue;
+		if (from.name !== to.name.toLowerCase()) continue;
+		result = result.slice(0, from.index) + to.name + result.slice(from.index + from.name.length);
+	}
+	return result;
+}
+function animationNameHandler(styleName, property) {
+	const base = createStyle(styleName);
+	const handler = (styleMap) => {
+		const result = base(styleMap);
+		const value = styleMap[styleName];
+		if (!result || typeof value !== "string") return result;
+		return { [property]: restoreAnimationNameCase(value, String(result[property])) };
+	};
+	handler.__lookupStyles = [styleName];
+	return handler;
+}
+const animationStyle = animationNameHandler("animation", "animation");
+const animationNameStyle = animationNameHandler("animationName", "animation-name");
+//#endregion
 //#region src/styles/const.ts
 const BORDER_STYLES = [
 	"none",
@@ -314,6 +455,9 @@ const BORDER_STYLES = [
 ];
 //#endregion
 //#region src/styles/shared.ts
+function resolveDefaultValue(value) {
+	return parseStyle(value).groups[0]?.values[0] ?? value;
+}
 function extractCSSWideKeyword(group) {
 	if (group.values.length !== 1 || group.colors.length > 0) return null;
 	return CSS_WIDE_KEYWORDS.has(group.values[0]) ? group.values[0] : null;
@@ -353,9 +497,9 @@ function processGroup$1(group) {
 	else if (mod === "longhand") modFlags |= 16;
 	else if (lineStyle === void 0 && BORDER_STYLES.includes(mod)) lineStyle = mod;
 	const slots = assignLineSlots(values, lineStyle, colors[0]);
-	const width = values[0] || "var(--border-width)";
+	const width = values[0] || resolveDefaultValue("1bw");
 	const style = slots.style || "solid";
-	const color = slots.color || "var(--border-color, currentColor)";
+	const color = slots.color || "var(--border-color)";
 	return {
 		modFlags,
 		width,
@@ -438,7 +582,7 @@ function borderStyle({ border }) {
 	}
 	const result = {};
 	const fallbackStyle = allDirectionsValue?.style || "solid";
-	const fallbackColor = allDirectionsValue?.color || "var(--border-color, currentColor)";
+	const fallbackColor = allDirectionsValue?.color || "var(--border-color)";
 	for (const dir of DIRECTIONS) {
 		const value = directionMap[dir];
 		if (value) result[`border-${dir}`] = formatBorderValue(value);
@@ -449,8 +593,13 @@ function borderStyle({ border }) {
 borderStyle.__lookupStyles = ["border"];
 //#endregion
 //#region src/styles/dimension.ts
-const DEFAULT_MIN_SIZE = "var(--gap)";
+const DEFAULT_MIN_SIZE = "1x";
 const DEFAULT_MAX_SIZE = "100%";
+const STRETCH_FALLBACKS = [
+	"-webkit-fill-available",
+	"-moz-available",
+	"stretch"
+];
 function parseDimensionValue(val) {
 	if (val == null) return null;
 	if (typeof val === "number") return `${val}px`;
@@ -499,7 +648,7 @@ function dimensionStyle(name) {
 			let flag = false;
 			for (const mod of mods) switch (mod) {
 				case "min":
-					styles[minStyle] = values[0] || DEFAULT_MIN_SIZE;
+					styles[minStyle] = values[0] || resolveDefaultValue(DEFAULT_MIN_SIZE);
 					flag = true;
 					break;
 				case "max":
@@ -525,14 +674,7 @@ function dimensionStyle(name) {
 					styles[maxStyle] = values[2];
 				} else styles[name] = values[0] || "auto";
 			}
-			if (styles[name] === "stretch") {
-				if (name === "width") styles[name] = [
-					"stretch",
-					"-webkit-fill-available",
-					"-moz-available"
-				];
-				else styles[name] = "auto";
-			}
+			if (styles[name] === "stretch") styles[name] = STRETCH_FALLBACKS;
 		}
 		const minVal = parseDimensionValue(min);
 		const maxVal = parseDimensionValue(max);
@@ -554,53 +696,18 @@ function blockSizeStyle({ blockSize, minBlockSize, maxBlockSize }) {
 blockSizeStyle.__lookupStyles = [...BLOCK_SIZE_STYLES];
 //#endregion
 //#region src/styles/color.ts
+const RE_HEX_LITERAL = /^#[0-9a-f]+$/i;
 const RE_READS_CURRENT = /var\(--current-color[,)]|currentcolor/i;
 function colorStyle({ color }) {
 	if (!color) return null;
 	if (color === true) color = "currentColor";
-	color = parseColor(color, true).color || resolveCustomProperties(color);
+	color = (RE_HEX_LITERAL.test(color) ? parseStyle(color).groups[0]?.colors[0] : parseColor(color, true).color) || resolveCustomProperties(color);
 	const styles = { color };
 	if (!RE_READS_CURRENT.test(color)) styles["--current-color"] = color;
 	return styles;
 }
 colorStyle.__lookupStyles = ["color"];
 //#endregion
-//#region src/styles/createStyle.ts
-const CACHE = {};
-function createStyle(styleName, cssStyle, converter) {
-	const key = `${styleName}.${cssStyle ?? ""}`;
-	if (!CACHE[key]) {
-		const styleHandler = (styleMap) => {
-			let styleValue = styleMap[styleName];
-			if (styleValue == null || styleValue === false) return null;
-			let finalCssStyle;
-			const isColorToken = !cssStyle && typeof styleName === "string" && styleName.startsWith("#");
-			if (isColorToken) finalCssStyle = `--${normalizeDslName(styleName.slice(1))}-color`;
-			else if (!cssStyle && styleName[0] === "$") finalCssStyle = `--${normalizeDslName(styleName.slice(1))}`;
-			else finalCssStyle = cssStyle || toSnakeCase(styleName);
-			if (isColorToken) {
-				const normalized = normalizeColorTokenValue(styleValue);
-				if (normalized === null) return null;
-				styleValue = normalized;
-			}
-			if (converter) {
-				const converted = converter(styleValue);
-				if (converted) styleValue = converted;
-				else if (typeof styleValue !== "string") return null;
-			}
-			if (typeof styleValue === "string" && finalCssStyle.startsWith("--") && finalCssStyle.endsWith("-color")) {
-				styleValue = styleValue.trim();
-				return { [finalCssStyle]: parseColor(styleValue).color ?? "" };
-			}
-			const processed = parseStyle(styleValue);
-			return { [finalCssStyle]: processed.output };
-		};
-		styleHandler.__lookupStyles = [styleName];
-		CACHE[key] = styleHandler;
-	}
-	return CACHE[key];
-}
-//#endregion
 //#region src/styles/display.ts
 function applyTextOverflow(result, textOverflow, whiteSpace) {
 	if (textOverflow === true || textOverflow === "initial") {
@@ -662,7 +769,7 @@ function processGroup(group, isOnlyGroup, gradients) {
 	const { input, values, mods, colors } = group;
 	const transparentColor = colors[0] || DEFAULT_TRANSPARENT_COLOR;
 	const opaqueColor = colors[1] || DEFAULT_OPAQUE_COLOR;
-	const firstSize = values.length ? values[0] : "calc(2 * var(--gap))";
+	const firstSize = values.length ? values[0] : resolveDefaultValue("2x");
 	let namedCount = 0;
 	for (const mod of mods) {
 		const directionIndex = DIRECTIONS.indexOf(mod);
@@ -699,7 +806,8 @@ fadeStyle.__lookupStyles = ["fade"];
 function fillStyle({ fill, backgroundColor, image, backgroundImage, backgroundPosition, backgroundSize, backgroundRepeat, backgroundAttachment, backgroundOrigin, backgroundClip, background }) {
 	if (background) return { background: parseStyle(background).output || background };
 	const result = {};
-	const colorValue = backgroundColor ?? fill;
+	if (fill === true) warnOnceDev("fill-true", "fill: true has no default color and is ignored. Write a color (fill: '#surface'), or false for no fill.");
+	const colorValue = backgroundColor ?? (typeof fill === "string" ? fill : void 0);
 	if (colorValue) {
 		const parsed = parseStyle(colorValue);
 		const firstColor = parsed.groups[0]?.colors[0];
@@ -814,7 +922,7 @@ function parseSingleValue(val, defaultValue, trueValue) {
 	const strVal = String(val);
 	if (CSS_WIDE_KEYWORDS.has(strVal)) return strVal;
 	const { values } = parseStyle(strVal).groups[0] ?? { values: [] };
-	return values[0] || defaultValue;
+	return values[0] || resolveDefaultValue(defaultValue);
 }
 function directionModFlags(mods, spanModifiers) {
 	let flags = 0;
@@ -832,7 +940,7 @@ function directionModFlags(mods, spanModifiers) {
 	return flags;
 }
 function applyGroup(dirs, group, modFlags, property, defaultValue) {
-	const values = group.values.length ? group.values : [defaultValue];
+	const values = group.values.length ? group.values : [resolveDefaultValue(defaultValue)];
 	const directions = modFlags & DIRECTION_MASK;
 	const span = modFlags & DIRECTION_SPAN;
 	if (directions && values.length > (span ? 2 : 1)) warnExtraGroupValues(property, group.input, span ? 2 : 1);
@@ -1018,7 +1126,7 @@ function logicalAxisStyle({ styleName, cssProperty, defaultValue, trueValue, def
 			const modFlags = logicalModFlags(group.mods);
 			const hasDirection = modFlags & 3;
 			const keyword = extractCSSWideKeyword(group);
-			const values = keyword ? [keyword] : group.values.length ? group.values : [defaultValue];
+			const values = keyword ? [keyword] : group.values.length ? group.values : [resolveDefaultValue(defaultValue)];
 			if (hasDirection && values.length > 1) warnExtraGroupValues(styleName, group.input, 1, LOGICAL_DIRECTIONS);
 			else if (!hasDirection && values.length > 2) warnOnceDev(`extra-logical-axis-values:${styleName}:${group.input}`, `${styleName}="${group.input}": a logical axis takes at most two values in start/end order. The extra values are ignored.`);
 			if (modFlags & LOGICAL_LONGHAND) useLonghand = true;
@@ -1041,7 +1149,7 @@ function logicalAxisStyle({ styleName, cssProperty, defaultValue, trueValue, def
 }
 function zeroBorderValue(value) {
 	const firstSpace = value.indexOf(" ");
-	return firstSpace === -1 ? "0 solid var(--border-color, currentColor)" : `0${value.slice(firstSpace)}`;
+	return firstSpace === -1 ? "0 solid var(--border-color)" : `0${value.slice(firstSpace)}`;
 }
 function logicalBorderStyle(styleName, cssProperty) {
 	const handler = ((styles) => {
@@ -1055,7 +1163,7 @@ function logicalBorderStyle(styleName, cssProperty) {
 			start: null,
 			end: null
 		};
-		let fallback = "0 solid var(--border-color, currentColor)";
+		let fallback = "0 solid var(--border-color)";
 		let useLonghand = false;
 		for (const group of groups) {
 			const borderValue = parseBorderValue(group.input);
@@ -1096,8 +1204,8 @@ function logicalBorderStyles(styleNames) {
 	return Object.fromEntries(styleNames.map((styleName, index) => [styleName, logicalBorderStyle(styleName, `border-${index ? "inline" : "block"}`)]));
 }
 const logicalStyleHandlers = {
-	...logicalAxisStyles(LOGICAL_PADDING_STYLES, "padding", "var(--gap)", "1x", "0"),
-	...logicalAxisStyles(LOGICAL_MARGIN_STYLES, "margin", "var(--gap)", "1x", "0"),
+	...logicalAxisStyles(LOGICAL_PADDING_STYLES, "padding", "1x", "1x", "0"),
+	...logicalAxisStyles(LOGICAL_MARGIN_STYLES, "margin", "1x", "1x", "0"),
 	...logicalAxisStyles(LOGICAL_INSET_STYLES, "inset", "0", "0", "auto"),
 	...logicalAxisStyles(LOGICAL_SCROLL_MARGIN_STYLES, "scroll-margin", "0", "1x", "0"),
 	...logicalAxisStyles(LOGICAL_SCROLL_PADDING_STYLES, "scroll-padding", "0", "1x", "0"),
@@ -1107,7 +1215,7 @@ const logicalStyleHandlers = {
 //#region src/styles/margin.ts
 const MARGIN_CONFIG = {
 	property: "margin",
-	defaultValue: "var(--gap)",
+	defaultValue: "1x",
 	trueValue: "1x",
 	defaultInit: "0"
 };
@@ -1152,7 +1260,7 @@ function outlineStyle({ outline, outlineOffset }) {
 					break;
 				}
 				const slots = assignLineSlots(outlinePart.values, lineStyle, outlinePart.colors[0]);
-				result.outline = `${outlinePart.values[0] || "var(--outline-width)"} ${slots.style || "solid"} ${slots.color || "var(--outline-color)"}`;
+				result.outline = `${outlinePart.values[0] || resolveDefaultValue("1ow")} ${slots.style || "solid"} ${slots.color || "var(--outline-color)"}`;
 				if (offsetPart?.values[0]) result["outline-offset"] = offsetPart.values[0];
 			}
 		}
@@ -1168,7 +1276,7 @@ outlineStyle.__lookupStyles = ["outline", "outlineOffset"];
 //#region src/styles/padding.ts
 const PADDING_CONFIG = {
 	property: "padding",
-	defaultValue: "var(--gap)",
+	defaultValue: "1x",
 	trueValue: "1x",
 	defaultInit: "0"
 };
@@ -1262,6 +1370,7 @@ const PRESET_MODIFIERS = /* @__PURE__ */ new Set([
 	"normal"
 ]);
 const SANS_FONT = "var(--font-sans, var(--font-sans-fallback))";
+const MONO_FONT = "var(--font-mono, var(--font-mono-fallback))";
 function toCSS(value, isNumeric) {
 	if (value == null) return null;
 	if (typeof value === "number") return isNumeric ? `${value}px` : String(value);
@@ -1281,7 +1390,7 @@ function setCSSValue(styles, styleName, presetName, mode) {
 function resolveFontFamily(font, fontFamily) {
 	if (fontFamily) return resolveCustomProperties(fontFamily);
 	if (font == null || font === false) return null;
-	if (font === "monospace") return "var(--font-mono, var(--font-mono-fallback))";
+	if (font === "monospace") return MONO_FONT;
 	if (font === true) return SANS_FONT;
 	return `${resolveCustomProperties(font)}, ${SANS_FONT}`;
 }
@@ -1350,7 +1459,7 @@ presetStyle.__lookupStyles = [
 ];
 //#endregion
 //#region src/styles/radius.ts
-const PROP = "var(--radius)";
+const DEFAULT_RADIUS = "1r";
 const SHARP = "var(--sharp-radius)";
 const RADIUS_LONGHANDS = [
 	"border-top-left-radius",
@@ -1395,19 +1504,20 @@ function radiusStyle({ radius }) {
 		for (const i of corners) result[RADIUS_LONGHANDS[i]] = keyword;
 		return result;
 	}
+	const defaultRadius = resolveDefaultValue(DEFAULT_RADIUS);
 	if (mods.includes("round")) values = ["9999rem"];
 	else if (mods.includes("ellipse")) values = ["50%"];
-	else if (!values.length) values = [PROP];
+	else if (!values.length) values = [defaultRadius];
 	if (mods.includes("leaf")) values = [
 		values[1] || SHARP,
-		values[0] || PROP,
+		values[0] || defaultRadius,
 		values[1] || SHARP,
-		values[0] || PROP
+		values[0] || defaultRadius
 	];
 	else if (mods.includes("backleaf")) values = [
-		values[0] || PROP,
+		values[0] || defaultRadius,
 		values[1] || SHARP,
-		values[0] || PROP,
+		values[0] || defaultRadius,
 		values[1] || SHARP
 	];
 	else if (mods.length) {
@@ -1419,7 +1529,7 @@ function radiusStyle({ radius }) {
 				"0",
 				"0"
 			];
-			for (const i of corners) arr[i] = values[0] || PROP;
+			for (const i of corners) arr[i] = values[0] || defaultRadius;
 			values = arr;
 		}
 	}
@@ -1611,7 +1721,6 @@ const MAP = {
 		"height"
 	],
 	gap: ["gap", "margin"],
-	zIndex: ["z-index"],
 	inset: [
 		"inset",
 		"top",
@@ -1620,6 +1729,7 @@ const MAP = {
 		"left"
 	]
 };
+const NAME_ALIASES = { zindex: "z-index" };
 const DEFAULT_EASING = "linear";
 const EASING_KEYWORDS = new Set("ease ease-in ease-out ease-in-out linear step-start step-end".split(" "));
 function isEasing(token) {
@@ -1636,8 +1746,9 @@ function transitionStyle({ transition }) {
 	const named = /* @__PURE__ */ new Set();
 	for (const group of processed.groups) {
 		const tokens = group.all;
-		const name = tokens[0];
+		let name = tokens[0];
 		if (!name || isTokenNameReference("transition", name)) continue;
+		name = NAME_ALIASES[name] ?? name;
 		let timing;
 		let easing;
 		let delay;
@@ -1723,6 +1834,8 @@ function predefine() {
 	[
 		displayStyle,
 		transitionStyle,
+		animationStyle,
+		animationNameStyle,
 		fillStyle,
 		svgFillStyle,
 		widthStyle,
@@ -1879,6 +1992,58 @@ const ELEMENT_NAME_RE = /(^|[\s>+~,(])([A-Z][a-zA-Z0-9]*)/g;
 function transformSelectorContent(content) {
 	return content.replace(ELEMENT_NAME_RE, (_, prefix, name) => `${prefix}[data-element="${name}"]`);
 }
+const HTML_TYPE_RE = /^html(?![\w\-|\\\u0080-\uffff])/i;
+const LEGACY_PSEUDO_ELEMENT_RE = /^:(?:before|after|first-line|first-letter)$/i;
+function rootStateIndex(selector) {
+	let isRoot = HTML_TYPE_RE.test(selector);
+	let pseudoElementAt = -1;
+	let squareDepth = 0;
+	let parenDepth = 0;
+	let quote = "";
+	let rootFunctionParen = -1;
+	let rootFunctionArgs = -1;
+	for (let i = 0; i < selector.length; i++) {
+		const char = selector[i];
+		if (char === "\\") {
+			i++;
+			continue;
+		}
+		if (quote) {
+			if (char === quote) quote = "";
+			continue;
+		}
+		if (char === "\"" || char === "'") {
+			quote = char;
+			continue;
+		}
+		if (char === "[") squareDepth++;
+		else if (char === "]") squareDepth = Math.max(0, squareDepth - 1);
+		else if (char === "(") {
+			if (i === rootFunctionParen && parenDepth === 0) rootFunctionArgs = i + 1;
+			parenDepth++;
+		} else if (char === ")") {
+			parenDepth = Math.max(0, parenDepth - 1);
+			if (parenDepth === 0 && rootFunctionArgs !== -1) {
+				const args = splitSelectorsSafely(selector.slice(rootFunctionArgs, i));
+				if (args.length > 0 && args.every((arg) => rootStateIndex(arg) === arg.length)) isRoot = true;
+				rootFunctionArgs = -1;
+			}
+		}
+		if (squareDepth > 0 || parenDepth > 0) continue;
+		if (/[\s>+~,]/.test(char) || char === "/" && selector[i + 1] === "*") return -1;
+		if (char !== ":" || pseudoElementAt !== -1) continue;
+		if (selector[i + 1] === ":") {
+			pseudoElementAt = i;
+			continue;
+		}
+		const name = (/^:[\w-]+/.exec(selector.slice(i))?.[0] ?? "").toLowerCase();
+		if (name === ":root") isRoot = true;
+		else if (LEGACY_PSEUDO_ELEMENT_RE.test(name)) pseudoElementAt = i;
+		else if ((name === ":is" || name === ":where") && selector[i + name.length] === "(") rootFunctionParen = i + name.length;
+	}
+	if (!isRoot) return -1;
+	return pseudoElementAt === -1 ? selector.length : pseudoElementAt;
+}
 function splitSelectorsSafely(selectorList) {
 	if (!selectorList.includes(",")) {
 		const selector = selectorList.trim();
@@ -1925,6 +2090,17 @@ function splitSelectorsSafely(selectorList) {
 }
 //#endregion
 //#region src/pipeline/conditions.ts
+function getRangeUnit(range) {
+	const lower = range.lowerBound && getBoundUnit(range.lowerBound);
+	const upper = range.upperBound && getBoundUnit(range.upperBound);
+	if (lower === null || upper === null) return null;
+	if (lower !== void 0 && upper !== void 0 && lower !== upper) return null;
+	return lower ?? upper ?? null;
+}
+function getBoundUnit(bound) {
+	if (bound.valueNumeric == null) return null;
+	return /[a-z%]*$/i.exec(bound.value)[0].toLowerCase();
+}
 function buildDimensionCondition(dimension, lowerBound, upperBound, emptyDimension = dimension) {
 	if (lowerBound && upperBound) {
 		const lowerOp = lowerBound.inclusive ? "<=" : "<";
@@ -2359,8 +2535,12 @@ function hasRangeContradiction(terms) {
 	const containerByDim = /* @__PURE__ */ new Map();
 	for (const term of terms) {
 		if (term.kind !== "state") continue;
-		if (term.type === "media" && term.subtype === "dimension") {
-			const key = term.dimension || "width";
+		if (term.type !== "media" && term.type !== "container") continue;
+		if (term.subtype !== "dimension") continue;
+		const unit = getRangeUnit(term);
+		if (unit === null) continue;
+		if (term.type === "media") {
+			const key = `${term.dimension || "width"}|${unit}`;
 			let group = mediaByDim.get(key);
 			if (!group) {
 				group = {
@@ -2372,8 +2552,8 @@ function hasRangeContradiction(terms) {
 			if (term.negated) group.negated.push(term);
 			else group.positive.push(term);
 		}
-		if (term.type === "container" && term.subtype === "dimension") {
-			const key = `${term.containerName || "_"}:${term.dimension || "width"}`;
+		if (term.type === "container") {
+			const key = `${term.containerName || "_"}:${term.dimension || "width"}|${unit}`;
 			let group = containerByDim.get(key);
 			if (!group) {
 				group = {
@@ -2568,8 +2748,12 @@ function mergeRanges(terms) {
 	const containerByDim = /* @__PURE__ */ new Map();
 	terms.forEach((term, index) => {
 		if (term.kind !== "state") return;
-		if (term.type === "media" && term.subtype === "dimension" && !term.negated) {
-			const key = term.dimension || "width";
+		if (term.type !== "media" && term.type !== "container") return;
+		if (term.subtype !== "dimension" || term.negated) return;
+		const unit = getRangeUnit(term);
+		if (unit === null) return;
+		if (term.type === "media") {
+			const key = `${term.dimension || "width"}|${unit}`;
 			let group = mediaByDim.get(key);
 			if (!group) {
 				group = {
@@ -2581,8 +2765,8 @@ function mergeRanges(terms) {
 			group.conditions.push(term);
 			group.indices.push(index);
 		}
-		if (term.type === "container" && term.subtype === "dimension" && !term.negated) {
-			const key = `${term.containerName || "_"}:${term.dimension || "width"}`;
+		if (term.type === "container") {
+			const key = `${term.containerName || "_"}:${term.dimension || "width"}|${unit}`;
 			let group = containerByDim.get(key);
 			if (!group) {
 				group = {
@@ -2843,14 +3027,16 @@ function hasMediaContradiction(conditions) {
 		if (existing !== void 0 && existing !== !cond.negated) return true;
 		polarities.set(key, !cond.negated);
 		if (cond.subtype !== "dimension" || cond.negated) continue;
-		const dim = cond.dimension || "width";
-		let bounds = dimensionsByDim.get(dim);
+		const unit = getRangeUnit(cond);
+		if (unit === null) continue;
+		const rangeKey = `${cond.dimension || "width"}|${unit}`;
+		let bounds = dimensionsByDim.get(rangeKey);
 		if (!bounds) {
 			bounds = {
 				lowerBound: null,
 				upperBound: null
 			};
-			dimensionsByDim.set(dim, bounds);
+			dimensionsByDim.set(rangeKey, bounds);
 		}
 		if (cond.lowerBound?.valueNumeric != null) {
 			const value = cond.lowerBound.valueNumeric;
@@ -3207,13 +3393,16 @@ function optimizeGroups(groups) {
 		}, facts);
 	});
 }
-function rootGroupsToCSS(groups) {
+function rootGroupsToStateCSS(groups) {
 	if (groups.length === 0) return void 0;
 	const optimized = optimizeGroups(groups);
 	if (optimized.length === 0) return void 0;
-	let prefix = ":root";
-	for (const group of optimized) prefix += selectorGroupToCSS(group);
-	return wrapWhere(prefix);
+	let state = "";
+	for (const group of optimized) state += selectorGroupToCSS(group);
+	return state;
+}
+function rootStateToPrefix(state) {
+	return wrapWhere(`:root${state}`);
 }
 function parentGroupsToCSS(groups) {
 	let result = "";
@@ -4230,14 +4419,14 @@ var Parser = class {
 		const content = raw.slice(7, -1);
 		if (!content.trim()) return trueCondition();
 		let condition = expandDimensionShorthands(content);
-		condition = expandTastyUnits(condition);
+		condition = expandQueryUnits(condition);
 		if (condition.includes(":") && !condition.includes("<") && !condition.includes(">") && !condition.includes("=")) {
 			const colonIdx = condition.indexOf(":");
 			return createMediaFeatureCondition(condition.slice(0, colonIdx).trim(), condition.slice(colonIdx + 1).trim(), false, raw);
 		}
 		if (!condition.includes("<") && !condition.includes(">") && !condition.includes("=")) return createMediaFeatureCondition(condition.trim(), void 0, false, raw);
 		const { dimension, lowerBound, upperBound } = this.parseDimensionCondition(condition);
-		if (!dimension) return createPseudoCondition(raw, false, raw);
+		if (!dimension) return createMediaFeatureCondition(condition.trim(), void 0, false, raw);
 		return createMediaDimensionCondition(dimension, lowerBound, upperBound, false, raw);
 	}
 	parseDimensionCondition(condition) {
@@ -4370,9 +4559,9 @@ var Parser = class {
 		}
 		if (/^[a-zA-Z][\w-]*\s*\(/.test(condition)) return createContainerRawCondition(condition, containerName, false, raw);
 		let expandedCondition = expandDimensionShorthands(condition);
-		expandedCondition = expandTastyUnits(expandedCondition);
+		expandedCondition = expandQueryUnits(expandedCondition);
 		const { dimension, lowerBound, upperBound } = this.parseDimensionCondition(expandedCondition);
-		if (!dimension) return createPseudoCondition(raw, false, raw);
+		if (!dimension) return createContainerRawCondition(`(${expandedCondition.trim()})`, containerName, false, raw);
 		return createContainerDimensionCondition(dimension, lowerBound, upperBound, containerName, false, raw);
 	}
 	parsePredefinedState(raw) {
@@ -4422,6 +4611,9 @@ function parseStateKey(stateKey, options = {}) {
 	parseCache.set(cacheKey, result);
 	return result;
 }
+function clearParseCache() {
+	parseCache.clear();
+}
 //#endregion
 //#region src/pipeline/index.ts
 const RE_UPPER_CASE = /[A-Z]/;
@@ -4534,7 +4726,10 @@ function invokeHandler(handler, stateSnapshots, selectorSuffix) {
 			const declarations = {};
 			for (const [prop, val] of Object.entries(styleProps)) {
 				if (RE_UPPER_CASE.test(prop) && !prop.startsWith("--") && isDevEnv()) emitWarning("HANDLER_CAMEL_CASE_KEY", `A style handler returned "${prop}". CSS property names must be kebab-case ("${toSnakeCase(prop)}"). The declaration was emitted verbatim and the browser will ignore it.`);
-				if (val != null && val !== "") declarations[prop] = String(val);
+				if (Array.isArray(val)) {
+					const chain = val.filter((v) => v != null && v !== "").map((v) => String(v));
+					if (chain.length) declarations[prop] = chain.length === 1 ? chain[0] : chain;
+				} else if (val != null && val !== "") declarations[prop] = String(val);
 			}
 			if (Object.keys(declarations).length === 0) continue;
 			const suffixes = $ ? (Array.isArray($) ? $ : [$]).map((s) => selectorSuffix + normalizeSelectorSuffix(String(s))) : [selectorSuffix];
@@ -4865,12 +5060,13 @@ function buildSelectorFromVariant(variant, selectorSuffix) {
 function materializeComputedRule(rule) {
 	const components = conditionToCSS(rule.condition);
 	if (components.isImpossible || components.variants.length === 0) return [];
-	const declarations = Object.entries(rule.declarations).map(([prop, value]) => `${prop}: ${value};`).join(" ");
+	const declarations = Object.entries(rule.declarations).map(([prop, value]) => Array.isArray(value) ? value.map((v) => `${prop}: ${v};`).join(" ") : `${prop}: ${value};`).join(" ");
 	const byAtRules = /* @__PURE__ */ new Map();
 	for (const variant of components.variants) {
 		const atRules = buildAtRulesFromVariant(variant);
 		const startingStyle = variant.startingStyle;
-		const rootPrefix = rootGroupsToCSS(variant.rootGroups);
+		const rootState = rootGroupsToStateCSS(variant.rootGroups);
+		const rootPrefix = rootState === void 0 ? void 0 : rootStateToPrefix(rootState);
 		const key = atRules.sort().join("|||") + "###" + (rootPrefix || "") + "###" + (startingStyle ? "1" : "0");
 		const group = byAtRules.get(key);
 		if (group) group.variants.push(variant);
@@ -4878,6 +5074,7 @@ function materializeComputedRule(rule) {
 			variants: [variant],
 			atRules,
 			rootPrefix,
+			rootState,
 			startingStyle: startingStyle || void 0
 		});
 	}
@@ -4890,7 +5087,10 @@ function materializeComputedRule(rule) {
 			order: rule.order
 		};
 		if (group.atRules.length > 0) cssRule.atRules = group.atRules;
-		if (group.rootPrefix) cssRule.rootPrefix = group.rootPrefix;
+		if (group.rootPrefix) {
+			cssRule.rootPrefix = group.rootPrefix;
+			cssRule.rootState = group.rootState;
+		}
 		if (group.startingStyle) cssRule.startingStyle = true;
 		rules.push(cssRule);
 	}
@@ -4920,17 +5120,23 @@ function renderStyles(styles, classNameOrSelector, options, pipelineCacheKey) {
 	}
 	if (directSelector) {
 		const shouldDouble = options?.doubleSelector ?? false;
+		const items = splitSelectorsSafely(classNameOrSelector);
+		const bases = (items.length > 0 ? items : [classNameOrSelector]).map((base) => ({
+			base,
+			rootAt: rootStateIndex(base)
+		}));
 		return mergeStyleResults(rules.map((rule) => {
 			const result = {
-				selector: (Array.isArray(rule.selector) ? rule.selector : rule.selector ? [rule.selector] : [""]).map((part) => {
-					let sel = part ? `${classNameOrSelector}${part}` : classNameOrSelector;
+				selector: (Array.isArray(rule.selector) ? rule.selector : rule.selector ? [rule.selector] : [""]).flatMap((part) => bases.map(({ base, rootAt }) => {
+					const joinsRoot = rule.rootState !== void 0 && rootAt !== -1;
+					let sel = joinsRoot ? `${base.slice(0, rootAt)}${wrapWhere(rule.rootState)}${base.slice(rootAt)}${part}` : `${base}${part}`;
 					if (shouldDouble && sel.startsWith(".")) {
 						const classMatch = sel.match(/^\.[a-zA-Z_-][a-zA-Z0-9_-]*/);
 						if (classMatch) sel = classMatch[0] + sel;
 					}
-					if (rule.rootPrefix) sel = `${rule.rootPrefix} ${sel}`;
+					if (rule.rootPrefix && !joinsRoot) sel = `${rule.rootPrefix} ${sel}`;
 					return sel;
-				}).join(", "),
+				})).join(", "),
 				declarations: rule.declarations
 			};
 			if (rule.atRules && rule.atRules.length > 0) result.atRules = rule.atRules;
@@ -5255,6 +5461,6 @@ function renderStylesForChunk(styles, chunkName, styleKeys, pipelineCacheKey) {
 	return renderStyles(chunkName === CHUNK_NAMES.SUBCOMPONENTS ? buildSubcomponentFilteredStyles(styles, styleKeys) : buildFilteredStyles(styles, styleKeys), void 0, void 0, pipelineCacheKey);
 }
 //#endregion
-export { createStyle as A, createStateParserContext as B, splitSelectorsSafely as C, registerHandler as D, normalizeHandlerDefinition as E, FONT_CHUNK_STYLES as F, markStylesGeneratedState as G, setGlobalPredefinedStates as H, LAYOUT_CHUNK_STYLES as I, setGlobalPolyfillsState as J, resetGlobalPolyfillsState as K, POSITION_CHUNK_STYLES as L, CHUNK_NAMES as M, DIMENSION_CHUNK_STYLES as N, resetHandlers as O, DISPLAY_CHUNK_STYLES as P, STYLE_TO_CHUNK as R, camelToKebab as S, defineHandler as T, hasStylesGenerated as U, getGlobalPredefinedStates as V, isFunctionsPolyfillEnabled as W, POSITION_STYLES as _, registerBaseStyleProps as a, renderStyles as b, BLOCK_INNER_STYLES as c, COLOR_STYLES as d, CONTAINER_STYLES as f, OUTER_STYLES as g, INNER_STYLES as h, baseStylePropsRegistry as i, APPEARANCE_CHUNK_STYLES as j, styleHandlers as k, BLOCK_OUTER_STYLES as l, FLOW_STYLES as m, generateChunkCacheKey as n, resetBaseStyleProps as o, DIMENSION_STYLES as p, resetStylesGeneratedState as q, categorizeStyleKeys as r, BASE_STYLES as s, renderStylesForChunk as t, BLOCK_STYLES as u, TEXT_STYLES as v, STYLE_HANDLER_MAP as w, parseStateKey as x, clearPipelineCache as y, resetStyleChunks as z };
+export { styleHandlers as A, STYLE_TO_CHUNK as B, camelToKebab as C, normalizeHandlerDefinition as D, defineHandler as E, DIMENSION_CHUNK_STYLES as F, setGlobalPredefinedStates as G, clearGlobalPredefinedStates as H, DISPLAY_CHUNK_STYLES as I, markStylesGeneratedState as J, hasStylesGenerated as K, FONT_CHUNK_STYLES as L, createStyle as M, APPEARANCE_CHUNK_STYLES as N, registerHandler as O, CHUNK_NAMES as P, LAYOUT_CHUNK_STYLES as R, parseStateKey as S, STYLE_HANDLER_MAP as T, createStateParserContext as U, resetStyleChunks as V, getGlobalPredefinedStates as W, resetStylesGeneratedState as X, resetGlobalPolyfillsState as Y, setGlobalPolyfillsState as Z, POSITION_STYLES as _, registerBaseStyleProps as a, renderStyles as b, BLOCK_INNER_STYLES as c, COLOR_STYLES as d, CONTAINER_STYLES as f, OUTER_STYLES as g, INNER_STYLES as h, baseStylePropsRegistry as i, scanAnimationNames as j, resetHandlers as k, BLOCK_OUTER_STYLES as l, FLOW_STYLES as m, generateChunkCacheKey as n, resetBaseStyleProps as o, DIMENSION_STYLES as p, isFunctionsPolyfillEnabled as q, categorizeStyleKeys as r, BASE_STYLES as s, renderStylesForChunk as t, BLOCK_STYLES as u, TEXT_STYLES as v, splitSelectorsSafely as w, clearParseCache as x, clearPipelineCache as y, POSITION_CHUNK_STYLES as z };
 
-//# sourceMappingURL=style-engine-BBbBuSkT.js.map
+//# sourceMappingURL=style-engine-BX2LshDZ.js.map