@tenphi/tasty 3.9.10 → 3.10.0

package/dist/chunks/{runtime-state-BxaLhVdP.js → runtime-state-CZ2J5QiZ.js}

@@ -1,4 +1,4 @@
-import { L as DEFAULT_PROPERTIES } from "./css-definitions-DotDkIXt.js";
+import { z as DEFAULT_PROPERTIES } from "./css-definitions-DAIJxzFY.js";
 //#region src/config-resources.ts
 let runtimeConfig = null;
 let globalFontFace = null;
@@ -7,12 +7,14 @@ let globalFunction = null;
 let globalProperties = null;
 let globalConfigTokens = null;
 let globalStyles = null;
+let globalKeyframes = null;
 const GTKEY_TOKENS = "__tasty_cfg_tokens__";
 const GTKEY_FONT_FACE = "__tasty_cfg_font_face__";
 const GTKEY_COUNTER_STYLE = "__tasty_cfg_counter_style__";
 const GTKEY_FUNCTION = "__tasty_cfg_function__";
 const GTKEY_PROPERTIES = "__tasty_cfg_properties__";
 const GTKEY_GLOBAL_STYLES = "__tasty_cfg_global_styles__";
+const GTKEY_KEYFRAMES = "__tasty_cfg_keyframes__";
 function setOnGlobalThis(key, value) {
 	globalThis[key] = value;
 }
@@ -47,6 +49,9 @@ function getGlobalConfigTokens() {
 function getGlobalStyles() {
 	return globalStyles ?? getFromGlobalThis(GTKEY_GLOBAL_STYLES) ?? null;
 }
+function getGlobalKeyframes() {
+	return globalKeyframes ?? getFromGlobalThis(GTKEY_KEYFRAMES) ?? null;
+}
 function mergeGlobalProperties(properties) {
 	globalProperties = {
 		...globalProperties ?? getFromGlobalThis(GTKEY_PROPERTIES) ?? {},
@@ -90,6 +95,13 @@ function mergeGlobalStyles(styles) {
 	else globalStyles = { ...styles };
 	setOnGlobalThis(GTKEY_GLOBAL_STYLES, globalStyles);
 }
+function mergeGlobalKeyframes(keyframes) {
+	globalKeyframes = {
+		...getGlobalKeyframes() ?? {},
+		...keyframes
+	};
+	setOnGlobalThis(GTKEY_KEYFRAMES, globalKeyframes);
+}
 function resetConfigResources() {
 	runtimeConfig = null;
 	globalProperties = null;
@@ -98,6 +110,7 @@ function resetConfigResources() {
 	globalFunction = null;
 	globalConfigTokens = null;
 	globalStyles = null;
+	globalKeyframes = null;
 	const globalState = globalThis;
 	delete globalState[GTKEY_TOKENS];
 	delete globalState[GTKEY_FONT_FACE];
@@ -105,6 +118,7 @@ function resetConfigResources() {
 	delete globalState[GTKEY_FUNCTION];
 	delete globalState[GTKEY_PROPERTIES];
 	delete globalState[GTKEY_GLOBAL_STYLES];
+	delete globalState[GTKEY_KEYFRAMES];
 }
 //#endregion
 //#region src/ssr/ssr-collector-ref.ts
@@ -122,6 +136,6 @@ function getRegisteredSSRCollector() {
 	return getter ? getter() : null;
 }
 //#endregion
-export { resetConfigResources as _, getGlobalConfigTokens as a, getGlobalFunctions as c, mergeGlobalConfigTokens as d, mergeGlobalCounterStyles as f, mergeGlobalStyles as g, mergeGlobalProperties as h, getEffectiveProperties as i, getGlobalStyles as l, mergeGlobalFunctions as m, registerSSRCollectorGetter as n, getGlobalCounterStyles as o, mergeGlobalFontFaces as p, registerSSRCollectorGetterGlobal as r, getGlobalFontFaces as s, getRegisteredSSRCollector as t, getRuntimeConfigState as u, setRuntimeConfigState as v };
+export { mergeGlobalProperties as _, getGlobalConfigTokens as a, setRuntimeConfigState as b, getGlobalFunctions as c, getRuntimeConfigState as d, mergeGlobalConfigTokens as f, mergeGlobalKeyframes as g, mergeGlobalFunctions as h, getEffectiveProperties as i, getGlobalKeyframes as l, mergeGlobalFontFaces as m, registerSSRCollectorGetter as n, getGlobalCounterStyles as o, mergeGlobalCounterStyles as p, registerSSRCollectorGetterGlobal as r, getGlobalFontFaces as s, getRegisteredSSRCollector as t, getGlobalStyles as u, mergeGlobalStyles as v, resetConfigResources as y };
 
-//# sourceMappingURL=runtime-state-BxaLhVdP.js.map
+//# sourceMappingURL=runtime-state-CZ2J5QiZ.js.map

package/dist/chunks/runtime-state-CZ2J5QiZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime-state-CZ2J5QiZ.js","names":[],"sources":["../../src/config-resources.ts","../../src/ssr/ssr-collector-ref.ts"],"sourcesContent":["/**\n * DOM-free storage for configured CSS resources shared by the browser runtime\n * and server collectors.\n *\n * Astro can evaluate middleware and application code in separate module\n * graphs, so resources used by SSR are mirrored on globalThis. Keeping this\n * state outside config.ts lets server-only entrypoints read it without loading\n * StyleInjector and the rest of the browser runtime.\n */\n\nimport type {\n  CounterStyleDescriptors,\n  FontFaceInput,\n  FunctionDefinition,\n  KeyframesSteps,\n  PropertyDefinition,\n} from './injector/types';\nimport { DEFAULT_PROPERTIES } from './properties/defaults';\nimport type { ConfigTokens, Styles } from './styles/types';\n\ninterface RuntimeConfigState {\n  namePrefix?: string;\n  nonce?: string;\n}\n\nlet runtimeConfig: RuntimeConfigState | null = null;\nlet globalFontFace: Record<string, FontFaceInput> | null = null;\nlet globalCounterStyle: Record<string, CounterStyleDescriptors> | null = null;\nlet globalFunction: Record<string, FunctionDefinition> | null = null;\nlet globalProperties: Record<string, PropertyDefinition> | null = null;\nlet globalConfigTokens: ConfigTokens | null = null;\nlet globalStyles: Record<string, Styles> | null = null;\nlet globalKeyframes: Record<string, KeyframesSteps> | null = null;\n\nconst GTKEY_TOKENS = '__tasty_cfg_tokens__';\nconst GTKEY_FONT_FACE = '__tasty_cfg_font_face__';\nconst GTKEY_COUNTER_STYLE = '__tasty_cfg_counter_style__';\nconst GTKEY_FUNCTION = '__tasty_cfg_function__';\nconst GTKEY_PROPERTIES = '__tasty_cfg_properties__';\nconst GTKEY_GLOBAL_STYLES = '__tasty_cfg_global_styles__';\nconst GTKEY_KEYFRAMES = '__tasty_cfg_keyframes__';\n\nfunction setOnGlobalThis(key: string, value: unknown): void {\n  (globalThis as Record<string, unknown>)[key] = value;\n}\n\nfunction getFromGlobalThis<T>(key: string): T | undefined {\n  return (globalThis as Record<string, unknown>)[key] as T | undefined;\n}\n\nexport function getRuntimeConfigState(): RuntimeConfigState | null {\n  return runtimeConfig;\n}\n\nexport function setRuntimeConfigState(config: RuntimeConfigState): void {\n  runtimeConfig = config;\n}\n\nexport function getEffectiveProperties(): Record<string, PropertyDefinition> {\n  const properties =\n    globalProperties ??\n    getFromGlobalThis<Record<string, PropertyDefinition>>(GTKEY_PROPERTIES);\n  return properties\n    ? { ...DEFAULT_PROPERTIES, ...properties }\n    : DEFAULT_PROPERTIES;\n}\n\nexport function getGlobalFontFaces(): Record<string, FontFaceInput> | null {\n  return (\n    globalFontFace ??\n    getFromGlobalThis<Record<string, FontFaceInput>>(GTKEY_FONT_FACE) ??\n    null\n  );\n}\n\nexport function getGlobalCounterStyles(): Record<\n  string,\n  CounterStyleDescriptors\n> | null {\n  return (\n    globalCounterStyle ??\n    getFromGlobalThis<Record<string, CounterStyleDescriptors>>(\n      GTKEY_COUNTER_STYLE,\n    ) ??\n    null\n  );\n}\n\nexport function getGlobalFunctions(): Record<\n  string,\n  FunctionDefinition\n> | null {\n  return (\n    globalFunction ??\n    getFromGlobalThis<Record<string, FunctionDefinition>>(GTKEY_FUNCTION) ??\n    null\n  );\n}\n\nexport function getGlobalConfigTokens(): ConfigTokens | null {\n  return (\n    globalConfigTokens ?? getFromGlobalThis<ConfigTokens>(GTKEY_TOKENS) ?? null\n  );\n}\n\nexport function getGlobalStyles(): Record<string, Styles> | null {\n  return (\n    globalStyles ??\n    getFromGlobalThis<Record<string, Styles>>(GTKEY_GLOBAL_STYLES) ??\n    null\n  );\n}\n\n/**\n * Get global keyframes configuration.\n * Returns null if no keyframes configured (fast path for zero-overhead).\n */\nexport function getGlobalKeyframes(): Record<string, KeyframesSteps> | null {\n  return (\n    globalKeyframes ??\n    getFromGlobalThis<Record<string, KeyframesSteps>>(GTKEY_KEYFRAMES) ??\n    null\n  );\n}\n\nexport function mergeGlobalProperties(\n  properties: Record<string, PropertyDefinition>,\n): void {\n  globalProperties = {\n    ...(globalProperties ?? getFromGlobalThis(GTKEY_PROPERTIES) ?? {}),\n    ...properties,\n  };\n  setOnGlobalThis(GTKEY_PROPERTIES, globalProperties);\n}\n\nexport function mergeGlobalFontFaces(\n  fontFaces: Record<string, FontFaceInput>,\n): void {\n  globalFontFace = { ...(getGlobalFontFaces() ?? {}), ...fontFaces };\n  setOnGlobalThis(GTKEY_FONT_FACE, globalFontFace);\n}\n\nexport function mergeGlobalCounterStyles(\n  counterStyles: Record<string, CounterStyleDescriptors>,\n): void {\n  globalCounterStyle = {\n    ...(getGlobalCounterStyles() ?? {}),\n    ...counterStyles,\n  };\n  setOnGlobalThis(GTKEY_COUNTER_STYLE, globalCounterStyle);\n}\n\nexport function mergeGlobalFunctions(\n  functions: Record<string, FunctionDefinition>,\n): void {\n  globalFunction = { ...(getGlobalFunctions() ?? {}), ...functions };\n  setOnGlobalThis(GTKEY_FUNCTION, globalFunction);\n}\n\nexport function mergeGlobalConfigTokens(styles: ConfigTokens): void {\n  globalConfigTokens = globalConfigTokens\n    ? { ...globalConfigTokens, ...styles }\n    : styles;\n  setOnGlobalThis(GTKEY_TOKENS, globalConfigTokens);\n}\n\nexport function mergeGlobalStyles(styles: Record<string, Styles>): void {\n  if (globalStyles) {\n    for (const [selector, selectorStyles] of Object.entries(styles)) {\n      globalStyles[selector] = globalStyles[selector]\n        ? { ...globalStyles[selector], ...selectorStyles }\n        : selectorStyles;\n    }\n  } else {\n    globalStyles = { ...styles };\n  }\n  setOnGlobalThis(GTKEY_GLOBAL_STYLES, globalStyles);\n}\n\nexport function mergeGlobalKeyframes(\n  keyframes: Record<string, KeyframesSteps>,\n): void {\n  globalKeyframes = { ...(getGlobalKeyframes() ?? {}), ...keyframes };\n  setOnGlobalThis(GTKEY_KEYFRAMES, globalKeyframes);\n}\n\nexport function resetConfigResources(): void {\n  runtimeConfig = null;\n  globalProperties = null;\n  globalFontFace = null;\n  globalCounterStyle = null;\n  globalFunction = null;\n  globalConfigTokens = null;\n  globalStyles = null;\n  globalKeyframes = null;\n\n  const globalState = globalThis as Record<string, unknown>;\n  delete globalState[GTKEY_TOKENS];\n  delete globalState[GTKEY_FONT_FACE];\n  delete globalState[GTKEY_COUNTER_STYLE];\n  delete globalState[GTKEY_FUNCTION];\n  delete globalState[GTKEY_PROPERTIES];\n  delete globalState[GTKEY_GLOBAL_STYLES];\n  delete globalState[GTKEY_KEYFRAMES];\n}\n","/**\n * Global reference to the SSR collector getter function.\n *\n * This indirection avoids importing 'node:async_hooks' in the browser bundle.\n * The SSR entry point sets this ref when loaded on the server. The useStyles\n * hook calls it if set; on the client it stays null and is never called.\n *\n * Uses a module-level variable as the primary mechanism. In Next.js App\n * Router the RSC and SSR module graphs load separate copies of this module,\n * so the getter registered by TastyRegistry (SSR layer) is invisible to\n * server components (RSC layer) — which correctly fall through to inline\n * RSC styles.\n *\n * A globalThis fallback (`registerSSRCollectorGetterGlobal`) is provided\n * for frameworks like Astro where middleware and page components live in\n * different module graphs and must share the getter across them.\n */\n\nimport type { ServerStyleCollector } from './collector';\n\ntype SSRCollectorGetter = () => ServerStyleCollector | null;\n\nconst GETTER_KEY = '__tasty_ssr_collector_getter__';\n\nlet _getSSRCollector: SSRCollectorGetter | null = null;\n\n/**\n * Register the collector getter in the current module graph only.\n * Used by Next.js TastyRegistry.\n */\nexport function registerSSRCollectorGetter(fn: SSRCollectorGetter): void {\n  _getSSRCollector = fn;\n}\n\n/**\n * Register the collector getter on globalThis so it is visible across\n * separate module graphs (e.g. Astro middleware ↔ page components).\n */\nexport function registerSSRCollectorGetterGlobal(fn: SSRCollectorGetter): void {\n  (globalThis as Record<string, unknown>)[GETTER_KEY] = fn;\n}\n\n/**\n * Retrieve the SSR collector: module-level first, globalThis fallback.\n */\nexport function getRegisteredSSRCollector(): ServerStyleCollector | null {\n  if (_getSSRCollector) return _getSSRCollector();\n  const getter = (globalThis as Record<string, unknown>)[GETTER_KEY] as\n    SSRCollectorGetter | undefined;\n  return getter ? getter() : null;\n}\n"],"mappings":"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"}

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

@@ -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);
@@ -299,6 +303,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",
@@ -565,42 +676,6 @@ function colorStyle({ color }) {
 }
 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") {
@@ -1723,6 +1798,8 @@ function predefine() {
 	[
 		displayStyle,
 		transitionStyle,
+		animationStyle,
+		animationNameStyle,
 		fillStyle,
 		svgFillStyle,
 		widthStyle,
@@ -1879,6 +1956,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();
@@ -3207,13 +3336,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 = "";
@@ -4422,6 +4554,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]/;
@@ -4870,7 +5005,8 @@ function materializeComputedRule(rule) {
 	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 +5014,7 @@ function materializeComputedRule(rule) {
 			variants: [variant],
 			atRules,
 			rootPrefix,
+			rootState,
 			startingStyle: startingStyle || void 0
 		});
 	}
@@ -4890,7 +5027,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 +5060,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 +5401,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-CeKsjtIr.js.map