@tenphi/tasty 3.0.2 → 3.2.0

package/dist/{config-DOCuTykY.js → config-BrDt11hO.js}

@@ -18,6 +18,23 @@ const CSS_WIDE_KEYWORDS = new Set([
 	"unset",
 	"revert-layer"
 ]);
+/**
+* Color functions that *derive* a color from other colors. They take no alpha
+* channel, so opacity has to wrap the whole call in `color-mix()` instead of
+* being appended after a slash.
+*/
+const DERIVED_COLOR_FUNCS_LIST = [
+	"color-mix",
+	"color-contrast",
+	"contrast-color",
+	"light-dark"
+];
+const DERIVED_COLOR_FUNCS = new Set(DERIVED_COLOR_FUNCS_LIST);
+/**
+* Every color function the parser recognizes. The ones outside
+* `DERIVED_COLOR_FUNCS` take channels as arguments, optionally followed by
+* `/ <alpha>` — which is where an opacity suffix writes.
+*/
 const COLOR_FUNCS = new Set([
 	"rgb",
 	"rgba",
@@ -31,9 +48,20 @@ const COLOR_FUNCS = new Set([
 	"color",
 	"device-cmyk",
 	"gray",
-	"color-mix",
-	"color-contrast"
+	...DERIVED_COLOR_FUNCS_LIST
 ]);
+/** A value that is a single `name(args)` call: captures the name and the args. */
+const RE_FUNC_CALL = /^([a-z][a-z0-9-]*)\((.+)\)$/i;
+/**
+* The color function a value calls at its top level, lowercased — or `null` when
+* the value is not a single color function call.
+*/
+function colorFuncName(value) {
+	const match = value.match(RE_FUNC_CALL);
+	if (!match) return null;
+	const name = match[1].toLowerCase();
+	return COLOR_FUNCS.has(name) ? name : null;
+}
 const RE_UNIT_NUM = /^[+-]?(?:\d*\.\d+|\d+)([a-z][a-z0-9]*)$/;
 const RE_NUMBER = /^[+-]?(?:\d*\.\d+|\d+)$/;
 const RE_HEX = /^(?:[0-9a-f]{3,4}|[0-9a-f]{6}(?:[0-9a-f]{2})?)$/;
@@ -110,141 +138,6 @@ function foldDslCase(src) {
 	return out + src.slice(last).toLowerCase();
 }
 //#endregion
-//#region src/parser/lru.ts
-var Lru = class {
-	limit;
-	map = /* @__PURE__ */ new Map();
-	head = null;
-	tail = null;
-	onEvict;
-	constructor(limit = 1e3, onEvict) {
-		this.limit = limit;
-		let normalized = Number.isFinite(this.limit) ? Math.floor(this.limit) : 1e3;
-		if (normalized <= 0) normalized = 1e3;
-		this.limit = normalized;
-		this.onEvict = onEvict;
-	}
-	setOnEvict(fn) {
-		this.onEvict = fn;
-	}
-	get(key) {
-		const node = this.map.get(key);
-		if (!node) return void 0;
-		this.touch(key, node);
-		return node.value;
-	}
-	set(key, value) {
-		let node = this.map.get(key);
-		if (node) {
-			node.value = value;
-			this.touch(key, node);
-			return;
-		}
-		node = {
-			prev: null,
-			next: this.head,
-			value
-		};
-		if (this.head) {
-			const headNode = this.map.get(this.head);
-			if (headNode) headNode.prev = key;
-		}
-		this.head = key;
-		if (!this.tail) this.tail = key;
-		this.map.set(key, node);
-		if (this.map.size > this.limit) this.evict();
-	}
-	delete(key) {
-		const node = this.map.get(key);
-		if (!node) return;
-		if (node.prev) {
-			const prevNode = this.map.get(node.prev);
-			if (prevNode) prevNode.next = node.next;
-		}
-		if (node.next) {
-			const nextNode = this.map.get(node.next);
-			if (nextNode) nextNode.prev = node.prev;
-		}
-		if (this.head === key) this.head = node.next;
-		if (this.tail === key) this.tail = node.prev;
-		this.map.delete(key);
-	}
-	keys() {
-		return this.map.keys();
-	}
-	touch(key, node) {
-		if (this.head === key) return;
-		if (node.prev) {
-			const prevNode = this.map.get(node.prev);
-			if (prevNode) prevNode.next = node.next;
-		}
-		if (node.next) {
-			const nextNode = this.map.get(node.next);
-			if (nextNode) nextNode.prev = node.prev;
-		}
-		if (this.tail === key) this.tail = node.prev;
-		node.prev = null;
-		node.next = this.head;
-		if (this.head) {
-			const headNode = this.map.get(this.head);
-			if (headNode) headNode.prev = key;
-		}
-		this.head = key;
-	}
-	evict() {
-		const old = this.tail;
-		if (!old) return;
-		const node = this.map.get(old);
-		if (!node) {
-			if (this.head === old) this.head = null;
-			this.tail = null;
-			return;
-		}
-		if (node.prev) {
-			const prevNode = this.map.get(node.prev);
-			if (prevNode) prevNode.next = null;
-		}
-		this.tail = node.prev;
-		if (this.head === old) this.head = null;
-		this.map.delete(old);
-		if (this.onEvict) try {
-			this.onEvict(old, node.value);
-		} catch {}
-	}
-	clear() {
-		this.map.clear();
-		this.head = this.tail = null;
-	}
-};
-//#endregion
-//#region src/utils/function-color.ts
-const RE_FUNC_NAME = /^([a-z][a-z0-9-]*)\s*\(/i;
-const RE_COLOR_OUT = /^(?:rgb|hsl|hwb|lab|lch|oklab|oklch|color)\(|^#|^var\(--/i;
-/**
-* Resolve a `name(...)` value produced by a registered custom parse function
-* into its concrete color output.
-*
-* A color function is just a `functions` entry whose output is an already
-* supported color (`rgb`, `hsl`, `#…`, `oklch`, …). This helper delegates the
-* value to the global parser (which already runs the registered parse function)
-* and returns the result only when it looks like a color. Returns `null` when
-* `str` is not a registered custom function or its output is not a color.
-*
-* This is the generic replacement for the previously hardcoded okhsl/okhst
-* conversion branches scattered across `strToRgb`, `resolveToRgbaValues`, and
-* the `#token.alpha` injection path.
-*/
-function resolveFunctionColor(str) {
-	const m = RE_FUNC_NAME.exec(str);
-	if (!m) return null;
-	const name = m[1].toLowerCase();
-	getGlobalParser();
-	if (!(name in getGlobalParseFunctions())) return null;
-	const out = getGlobalParser().process(str).output;
-	if (!out || !RE_COLOR_OUT.test(out)) return null;
-	return out;
-}
-//#endregion
 //#region src/utils/color-math.ts
 const OKLab_to_LMS_M = [
 	[
@@ -984,6 +877,141 @@ function oklchStringToRgb(oklchStr) {
 	return `rgb(${Math.round(r)} ${Math.round(g)} ${Math.round(b)})`;
 }
 //#endregion
+//#region src/parser/lru.ts
+var Lru = class {
+	limit;
+	map = /* @__PURE__ */ new Map();
+	head = null;
+	tail = null;
+	onEvict;
+	constructor(limit = 1e3, onEvict) {
+		this.limit = limit;
+		let normalized = Number.isFinite(this.limit) ? Math.floor(this.limit) : 1e3;
+		if (normalized <= 0) normalized = 1e3;
+		this.limit = normalized;
+		this.onEvict = onEvict;
+	}
+	setOnEvict(fn) {
+		this.onEvict = fn;
+	}
+	get(key) {
+		const node = this.map.get(key);
+		if (!node) return void 0;
+		this.touch(key, node);
+		return node.value;
+	}
+	set(key, value) {
+		let node = this.map.get(key);
+		if (node) {
+			node.value = value;
+			this.touch(key, node);
+			return;
+		}
+		node = {
+			prev: null,
+			next: this.head,
+			value
+		};
+		if (this.head) {
+			const headNode = this.map.get(this.head);
+			if (headNode) headNode.prev = key;
+		}
+		this.head = key;
+		if (!this.tail) this.tail = key;
+		this.map.set(key, node);
+		if (this.map.size > this.limit) this.evict();
+	}
+	delete(key) {
+		const node = this.map.get(key);
+		if (!node) return;
+		if (node.prev) {
+			const prevNode = this.map.get(node.prev);
+			if (prevNode) prevNode.next = node.next;
+		}
+		if (node.next) {
+			const nextNode = this.map.get(node.next);
+			if (nextNode) nextNode.prev = node.prev;
+		}
+		if (this.head === key) this.head = node.next;
+		if (this.tail === key) this.tail = node.prev;
+		this.map.delete(key);
+	}
+	keys() {
+		return this.map.keys();
+	}
+	touch(key, node) {
+		if (this.head === key) return;
+		if (node.prev) {
+			const prevNode = this.map.get(node.prev);
+			if (prevNode) prevNode.next = node.next;
+		}
+		if (node.next) {
+			const nextNode = this.map.get(node.next);
+			if (nextNode) nextNode.prev = node.prev;
+		}
+		if (this.tail === key) this.tail = node.prev;
+		node.prev = null;
+		node.next = this.head;
+		if (this.head) {
+			const headNode = this.map.get(this.head);
+			if (headNode) headNode.prev = key;
+		}
+		this.head = key;
+	}
+	evict() {
+		const old = this.tail;
+		if (!old) return;
+		const node = this.map.get(old);
+		if (!node) {
+			if (this.head === old) this.head = null;
+			this.tail = null;
+			return;
+		}
+		if (node.prev) {
+			const prevNode = this.map.get(node.prev);
+			if (prevNode) prevNode.next = null;
+		}
+		this.tail = node.prev;
+		if (this.head === old) this.head = null;
+		this.map.delete(old);
+		if (this.onEvict) try {
+			this.onEvict(old, node.value);
+		} catch {}
+	}
+	clear() {
+		this.map.clear();
+		this.head = this.tail = null;
+	}
+};
+//#endregion
+//#region src/utils/function-color.ts
+const RE_FUNC_NAME = /^([a-z][a-z0-9-]*)\s*\(/i;
+const RE_COLOR_OUT = /^(?:rgb|hsl|hwb|lab|lch|oklab|oklch|color)\(|^#|^var\(--/i;
+/**
+* Resolve a `name(...)` value produced by a registered custom parse function
+* into its concrete color output.
+*
+* A color function is just a `functions` entry whose output is an already
+* supported color (`rgb`, `hsl`, `#…`, `oklch`, …). This helper delegates the
+* value to the global parser (which already runs the registered parse function)
+* and returns the result only when it looks like a color. Returns `null` when
+* `str` is not a registered custom function or its output is not a color.
+*
+* This is the generic replacement for the previously hardcoded okhsl/okhst
+* conversion branches scattered across `strToRgb`, `resolveToRgbaValues`, and
+* the `#token.alpha` injection path.
+*/
+function resolveFunctionColor(str) {
+	const m = RE_FUNC_NAME.exec(str);
+	if (!m) return null;
+	const name = m[1].toLowerCase();
+	getGlobalParser();
+	if (!(name in getGlobalParseFunctions())) return null;
+	const out = getGlobalParser().process(str).output;
+	if (!out || !RE_COLOR_OUT.test(out)) return null;
+	return out;
+}
+//#endregion
 //#region src/utils/color-space.ts
 let currentColorSpace = "oklch";
 const colorSpaceCache = new Lru(500);
@@ -1003,9 +1031,6 @@ function resetColorSpace() {
 function getColorSpaceSuffix() {
 	return currentColorSpace;
 }
-function getColorSpaceFunc() {
-	return currentColorSpace;
-}
 function formatNum(n, precision) {
 	return parseFloat(n.toFixed(precision)).toString();
 }
@@ -1262,6 +1287,91 @@ function strToColorSpace(color) {
 	return result;
 }
 /**
+* Set the alpha of a whole color, replacing any it already carries.
+*
+* CSS relative color syntax is how opacity is applied to every color Tasty
+* emits. `oklch(from <color> l c h / <alpha>)` copies the channels over and
+* writes the alpha slot, which needs nothing from the color except that it *is*
+* a color: a `color-mix()`, a `light-dark()`, a `currentcolor`, a
+* `--name-color` written by hand-authored CSS with no companion variable — all
+* of them work, where writing into a channel slot directly requires components
+* the engine may have no way to compute.
+*
+* Alpha is *replaced*, not composed. A token holding `rgb(255 0 0 / .8)` faded
+* to `.5` is alpha `.5`, matching what the channel-components form did and what
+* a statically-known color still does. `color-mix()` against `transparent`
+* cannot do this — it would multiply the two to `.4`.
+*
+* The alpha slot takes a `<number>` or a `<percentage>`, so an opacity custom
+* property passes straight through in whichever form the author declared it.
+*
+* The space is always `oklch`, regardless of the configured {@link ColorSpace}:
+* it is unbounded, so a wide-gamut color survives the round trip that a
+* gamut-limited space would clamp, and it is the space the computed value used
+* to be reported in. Channels are copied rather than interpolated, so the polar
+* form costs nothing even for an achromatic color, whose hue is carried through
+* untouched.
+*/
+function overrideColorAlpha(color, alpha) {
+	return `oklch(from ${color} l c h / ${alpha})`;
+}
+/**
+* Compose an alpha onto a color, multiplying with any it already carries.
+*
+* This is the counterpart to {@link overrideColorAlpha}, and the difference is
+* the point. A design token names a color, so fading it *sets* its alpha. But
+* `currentcolor` is the color an element **inherits**, which an ancestor may
+* already have faded — `#current.4` there means "40% of what reaches me", and a
+* nested `#current.18` under it composes to `.072`. Design systems build ramps
+* out of exactly that, so `#current` composes and a token replaces.
+*
+* `color-mix()` against `transparent` is what composes: mixing premultiplied
+* leaves the channels alone and multiplies the alphas. Its percentage slot takes
+* no `<number>`, so a `$prop` alpha has to be scaled — which is why an opacity
+* property used as `#current.$prop` has to hold a unitless number, where a token
+* accepts either form.
+*/
+function mixColorAlpha(color, percentage) {
+	return `color-mix(in oklab, ${color} ${percentage}, transparent)`;
+}
+/**
+* Matches what {@link overrideColorAlpha} builds. The first group is greedy so a
+* nested override splits on its outermost layer.
+*/
+const RE_ALPHA_OVERRIDE = /^oklch\(from (.+) l c h \/ (.+)\)$/;
+/**
+* Split what {@link overrideColorAlpha} builds back into the color it faded and
+* the alpha, or `null` when the value is not one of those.
+*/
+function parseAlphaOverride(value) {
+	const match = value.match(RE_ALPHA_OVERRIDE);
+	return match ? {
+		color: match[1],
+		alpha: match[2]
+	} : null;
+}
+/** Channel names of each color space, in `<func>()` argument order. */
+const COLOR_SPACE_CHANNELS = {
+	rgb: "r g b",
+	hsl: "h s l",
+	oklch: "l c h"
+};
+/**
+* Express a color as components of the configured color space *by reference*,
+* using CSS relative color syntax: `from <color> l c h`.
+*
+* Static colors are decomposed into numbers (see `getColorSpaceComponents`), but
+* a color the engine cannot evaluate at build time — a `color-mix()`, a
+* `light-dark()`, a `color()` in a space with no conversion, anything reached
+* through `var()` — has no numbers to decompose. Handing back the relative form
+* keeps the `--name-color-{space}` companion usable anyway: the browser resolves
+* the channels, so `oklch(var(--name-color-oklch) / .5)` still applies opacity to
+* whatever the color turns out to be.
+*/
+function toRelativeColorSpaceComponents(color) {
+	return `from ${color} ${COLOR_SPACE_CHANNELS[currentColorSpace]}`;
+}
+/**
 * Extract the decomposed components of a color in the configured color space.
 * Returns a space-separated string of components without the wrapping function.
 * Alpha is NOT included — components are used for alpha composition via `/ alpha`.
@@ -1282,6 +1392,41 @@ function getColorSpaceComponents(color) {
 	return result;
 }
 /**
+* Rewrite a color into the `--name-color-{space}` components that `#name.alpha`
+* composes opacity onto.
+*
+* A `var()` chain is rewritten reference by reference so the fallback order
+* survives; a color the engine can evaluate is decomposed into numbers; anything
+* left — a derived color function, a `color()` in a space with no conversion —
+* falls back to relative color syntax and lets the browser do it.
+*
+* Returns the input unchanged when there is nothing to rewrite, so callers can
+* tell whether the conversion found anything.
+*
+* Example: `var(--primary-color, var(--secondary-color))`
+*   → `var(--primary-color-oklch, var(--secondary-color-oklch))`
+*/
+function convertColorChainToComponentChain(colorValue) {
+	const suffix = getColorSpaceSuffix();
+	const faded = parseAlphaOverride(colorValue);
+	if (faded) return convertColorChainToComponentChain(faded.color);
+	const componentVarMatch = colorValue.match(/^(?:rgb|hsl|oklch)a?\(\s*(var\(--[a-z0-9-]+-color-(?:rgb|hsl|oklch)\))\s*\//);
+	if (componentVarMatch) return componentVarMatch[1];
+	if (colorFuncName(colorValue)) {
+		const components = getColorSpaceComponents(colorValue);
+		return components !== colorValue ? components : toRelativeColorSpaceComponents(colorValue);
+	}
+	const match = colorValue.match(/var\(--([a-z0-9-]+)-color\s*(?:,\s*(.+))?\)/);
+	if (!match) {
+		const components = getColorSpaceComponents(colorValue);
+		if (components !== colorValue) return components;
+		return colorValue;
+	}
+	const [, name, fallback] = match;
+	if (!fallback) return `var(--${name}-color-${suffix})`;
+	return `var(--${name}-color-${suffix}, ${convertColorChainToComponentChain(fallback.trim())})`;
+}
+/**
 * Convert a color initial value (from @property definitions) to components
 * in the configured color space.
 */
@@ -1354,6 +1499,53 @@ const finalizeGroup = (d, parts) => {
 //#endregion
 //#region src/parser/classify.ts
 /**
+* Convert an opacity suffix to the alpha value it denotes.
+*
+* The authored digits are kept verbatim — `.07` stays `.07` rather than being
+* multiplied into `7.000000000000001%` — and a `$prop` suffix passes the
+* reference straight through, so it works whether the property holds a
+* `<number>` or a `<percentage>`. Both are what the alpha slot accepts.
+*/
+function alphaSuffixToAlpha(rawAlpha) {
+	if (rawAlpha.startsWith("$")) return `var(--${rawAlpha.slice(1)})`;
+	if (rawAlpha === "0") return "0";
+	return `.${rawAlpha}`;
+}
+/** Apply an opacity suffix to a color, replacing any alpha it already carries. */
+function fadeColor(color, rawAlpha) {
+	return overrideColorAlpha(color, alphaSuffixToAlpha(rawAlpha));
+}
+/**
+* Convert an opacity suffix to the percentage `color-mix()` needs, by shifting
+* the decimal point rather than multiplying: `.07` is `7%`, not the
+* `7.000000000000001%` that `parseFloat('.07') * 100` produces.
+*/
+function alphaSuffixToPercentage(rawAlpha) {
+	if (rawAlpha.startsWith("$")) return `calc(var(--${rawAlpha.slice(1)}) * 100%)`;
+	if (rawAlpha === "0") return "0%";
+	const digits = rawAlpha.length === 1 ? `${rawAlpha}0` : rawAlpha;
+	const whole = String(Number(digits.slice(0, 2)));
+	const fraction = digits.slice(2);
+	return `${fraction ? `${whole}.${fraction}` : whole}%`;
+}
+/**
+* Apply an opacity suffix to `currentcolor`, composing with any alpha an
+* ancestor already applied. See {@link mixColorAlpha} for why this differs from
+* how a token is faded.
+*/
+function fadeCurrentColor(rawAlpha) {
+	return mixColorAlpha("currentcolor", alphaSuffixToPercentage(rawAlpha));
+}
+/**
+* Whether parsed function arguments hold a color. Colors reach either the color
+* bucket (`#token`, a nested color function, `transparent`) or — for the CSS
+* named colors, which the parser has no token syntax for — the modifier bucket.
+*/
+function hasColorArgs(parsed) {
+	const namedColors = getNamedColorHex();
+	return parsed.groups.some((group) => group.colors.length > 0 || group.mods.some((mod) => namedColors.has(mod)));
+}
+/**
 * Re-parses a value through the parser until it stabilizes (no changes)
 * or max iterations reached. This allows units to reference other units.
 * Example: { x: '8px', y: '2x' } -> '1y' resolves to '16px'
@@ -1455,17 +1647,10 @@ function classify(raw, opts, recurse) {
 		processed: "currentcolor"
 	};
 	const currentAlphaMatch = token.match(/^#current\.(\$[a-z_][a-z0-9-_]*|[0-9]+)$/i);
-	if (currentAlphaMatch) {
-		const rawAlpha = currentAlphaMatch[1];
-		let percentage;
-		if (rawAlpha.startsWith("$")) percentage = `calc(var(--${rawAlpha.slice(1)}) * 100%)`;
-		else if (rawAlpha === "0") percentage = "0%";
-		else percentage = `${parseFloat("." + rawAlpha) * 100}%`;
-		return {
-			bucket: 0,
-			processed: `color-mix(in oklab, currentcolor ${percentage}, transparent)`
-		};
-	}
+	if (currentAlphaMatch) return {
+		bucket: 0,
+		processed: fadeCurrentColor(currentAlphaMatch[1])
+	};
 	if (token[0] === "$" || token[0] === "#") {
 		const predefinedTokens = getGlobalPredefinedTokens();
 		if (predefinedTokens) {
@@ -1482,10 +1667,14 @@ function classify(raw, opts, recurse) {
 					if (baseKey in predefinedTokens) {
 						const resolvedValue = predefinedTokens[baseKey];
 						if (resolvedValue.startsWith("#")) return classify(`${foldDslCase(resolvedValue)}.${rawAlpha}`, opts, recurse);
-						const funcMatch = resolvedValue.match(/^([a-z][a-z0-9-]*)\((.+)\)$/i);
+						const funcMatch = resolvedValue.match(RE_FUNC_CALL);
 						if (funcMatch) {
 							const [, funcName, args] = funcMatch;
 							const lowerFunc = funcName.toLowerCase();
+							if (DERIVED_COLOR_FUNCS.has(lowerFunc)) return {
+								bucket: 0,
+								processed: fadeColor(classify(foldDslCase(resolvedValue), opts, recurse).processed, rawAlpha)
+							};
 							const isCustomFunc = !!(opts.functions && lowerFunc in opts.functions && !COLOR_FUNCS.has(lowerFunc) && !COLOR_FUNCS.has(funcName.replace(/a$/i, "").toLowerCase()));
 							const normalizedFunc = isCustomFunc ? lowerFunc : funcName.replace(/a$/i, "").toLowerCase();
 							if (!(COLOR_FUNCS.has(normalizedFunc) || COLOR_FUNCS.has(lowerFunc) || isCustomFunc)) return classify(`${resolvedValue}.${rawAlpha}`, opts, recurse);
@@ -1573,13 +1762,9 @@ function classify(raw, opts, recurse) {
 		const alphaMatch = token.match(/^#([a-z0-9-]+)\.(\$[a-z_][a-z0-9-_]*|[0-9]+)$/i);
 		if (alphaMatch) {
 			const [, base, rawAlpha] = alphaMatch;
-			let alpha;
-			if (rawAlpha.startsWith("$")) alpha = `var(--${rawAlpha.slice(1)})`;
-			else if (rawAlpha === "0") alpha = "0";
-			else alpha = `.${rawAlpha}`;
 			return {
 				bucket: 0,
-				processed: `${getColorSpaceFunc()}(var(--${base}-color-${getColorSpaceSuffix()}) / ${alpha})`
+				processed: fadeColor(`var(--${base}-color)`, rawAlpha)
 			};
 		}
 		const name = token.slice(1);
@@ -1597,10 +1782,12 @@ function classify(raw, opts, recurse) {
 		const fname = token.slice(0, openIdx);
 		const inner = token.slice(openIdx + 1, -1);
 		if (COLOR_FUNCS.has(fname)) {
-			const argProcessed = recurse(inner).output.replace(/,\s+/g, ",");
+			const parsedInner = recurse(inner);
+			const argProcessed = parsedInner.output.replace(/,\s+/g, ",");
+			const processed = `${canonicalFuncName(fname)}(${argProcessed})`;
 			return {
-				bucket: 0,
-				processed: `${canonicalFuncName(fname)}(${argProcessed})`
+				bucket: fname === "light-dark" && !hasColorArgs(parsedInner) ? 1 : 0,
+				processed
 			};
 		}
 		if (opts.functions && fname in opts.functions) {
@@ -2076,8 +2263,8 @@ function normalizeColorTokenValue(value) {
 	if (value === false) return null;
 	return value;
 }
-const COLOR_VAR_PATTERN = /var\(--([a-z0-9-]+)-color/;
-const COLOR_VAR_COMPONENTS_PATTERN = /var\(--([a-z0-9-]+)-color-(?:rgb|hsl|oklch)/;
+const COLOR_VAR_PATTERN = /^var\(--([a-z0-9-]+)-color[,)]/;
+const COLOR_VAR_COMPONENTS_PATTERN = /^(?:[a-z-]+\(\s*)?var\(--([a-z0-9-]+)-color-(?:rgb|hsl|oklch)[,)]/;
 const RGB_ALPHA_PATTERN = /\/\s*([0-9.]+)\)/;
 const RE_HEX_COLOR = /^#[0-9a-fA-F]{3,8}$/;
 const RE_VAR_COLOR = /^var\(--[a-z0-9-]+-color/;
@@ -2267,11 +2454,17 @@ function parseColor(val, ignoreError = false) {
 		}
 		firstColor = extractedColor;
 	}
-	let nameMatch = firstColor.match(COLOR_VAR_PATTERN);
-	if (!nameMatch) nameMatch = firstColor.match(COLOR_VAR_COMPONENTS_PATTERN);
+	const faded = parseAlphaOverride(firstColor);
+	const baseColor = faded ? faded.color : firstColor;
+	let nameMatch = baseColor.match(COLOR_VAR_PATTERN);
+	if (!nameMatch) nameMatch = baseColor.match(COLOR_VAR_COMPONENTS_PATTERN);
 	let opacity;
-	if (firstColor.startsWith("rgb") || firstColor.startsWith("hsl") || firstColor.startsWith("lch") || firstColor.startsWith("oklch")) {
-		const alphaMatch = firstColor.match(RGB_ALPHA_PATTERN);
+	if (faded) {
+		const { alpha } = faded;
+		const v = parseFloat(alpha);
+		if (!isNaN(v)) opacity = alpha.endsWith("%") ? v : v * 100;
+	} else if (baseColor.startsWith("rgb") || baseColor.startsWith("hsl") || baseColor.startsWith("lch") || baseColor.startsWith("oklch")) {
+		const alphaMatch = baseColor.match(RGB_ALPHA_PATTERN);
 		if (alphaMatch) {
 			const v = parseFloat(alphaMatch[1]);
 			if (!isNaN(v)) opacity = v * 100;
@@ -3230,6 +3423,217 @@ function rscClassRegexGlobal(prefix) {
 	return new RegExp(`\\.(${escapeRegex(prefix)}[a-z0-9]+)\\.\\1`, "g");
 }
 //#endregion
+//#region src/utils/warnings.ts
+const PREFIX = "[Tasty]";
+function warn(...args) {
+	console.warn(PREFIX, ...args);
+}
+//#endregion
+//#region src/injector/batch.ts
+/**
+* Deferred CSSOM writes ("batched injection").
+*
+* Every `insertRule()` on a live stylesheet invalidates style for the sheet's
+* scope, so Blink recalculates style the next time anything reads layout or
+* computed style. When components inject during React's render phase and other
+* components read layout in the same pass, the two interleave:
+*
+*   inject -> read (forced recalc) -> inject -> read (forced recalc) -> ...
+*
+* Batching moves every sheet write out from between those reads. Writes are
+* queued in FIFO order and drained in one go, so the tree is invalidated once
+* per flush instead of once per component.
+*
+* ## Ordering
+*
+* A single queue holds *all* writes — component rules, global rules, keyframes,
+* `@property`, `@font-face`, `@counter-style`, `@function` and raw CSS. Draining
+* it in insertion order keeps the sheet byte-identical to unbatched output,
+* which matters because equal-specificity rules resolve by document order.
+*
+* ## Batch windows — why queuing is safe
+*
+* Deferring a write past React's layout phase would let a `useLayoutEffect`
+* measure an element whose rules are not in the sheet yet, reading the unstyled
+* box. `<TastyBatchProvider>` closes that hole by opening a *window* during its
+* render and closing it — flushing — in its `useInsertionEffect`, which React
+* runs in the mutation phase, before any layout effect:
+*
+*   provider renders          -> window OPEN
+*     children render         -> injections queued
+*   provider insertionEffect  -> FLUSH, window CLOSED
+*   layout effects run        -> rules are in the sheet
+*
+* So in the default (`batchInjection: true`) mode a write is only ever queued
+* inside a commit whose flush is already guaranteed by that same commit. Every
+* injection outside a window — a deep update the provider did not re-render
+* for, a `useLayoutEffect` that injects, an event handler, an async callback —
+* is written straight through, exactly as with batching off.
+*
+* `batchInjection: 'always'` opts out of the gate and queues unconditionally.
+* That wins on more commits, at the cost of the measurement hazard above.
+*
+* ## Flush points (earliest wins)
+*
+* 1. `<TastyBatchProvider>`'s `useInsertionEffect` — closes the window.
+* 2. A microtask — a backstop for a render that was aborted or suspended and
+*    therefore never reached its insertion effect. An aborted render mounts
+*    nothing, so nothing can measure what it queued. Microtasks also always
+*    drain before paint, so styles are never visually missing.
+* 3. `flushStyles()` — explicit, and called internally by every injector read
+*    API (`getCSSText`, `cleanup`, `gc`, `destroy`, ...).
+*/
+/**
+* FIFO of pending writes. Drained with a moving `head` index rather than
+* `shift()` so a large batch stays O(n) instead of O(n²).
+*/
+let queue = [];
+let head = 0;
+let microtaskScheduled = false;
+let flushing = false;
+/**
+* Whether a `<TastyBatchProvider>` has rendered in the current commit and will
+* therefore flush in its insertion effect, making it safe to queue a write.
+*
+* A flag rather than a depth count, because renders and insertion effects do
+* not pair up one-to-one. StrictMode double-invokes render but runs the
+* insertion effect once, so a counter ends the commit stuck above zero — and a
+* window that stays open past its commit turns the next provider-less commit
+* into `'always'` mode behind the user's back, which is exactly the measurement
+* hazard `true` exists to avoid.
+*
+* Clearing on the first close is safe with nested or sibling providers: React
+* finishes every render in a commit before running any insertion effect, so once
+* one closes, no further render-phase injection can arrive in that commit.
+*/
+let windowOpen = false;
+/** Whether any window has ever been opened, i.e. a provider is in the tree. */
+let everOpened = false;
+/** Dev-only: warn at most once that batching is on with no provider mounted. */
+let warnedNoProvider = false;
+/**
+* Queue a sheet write.
+*
+* Returns a handle whose `cancel()` drops the write if the caller disposes
+* before the flush. The handle is intentionally tiny — one is allocated per
+* injected class, on the cache-miss path only.
+*/
+function enqueueStyleWrite(run) {
+	if (flushing) {
+		run();
+		return {
+			run,
+			cancelled: false,
+			done: true
+		};
+	}
+	const entry = {
+		run,
+		cancelled: false,
+		done: false
+	};
+	queue.push(entry);
+	scheduleMicrotaskFlush();
+	return entry;
+}
+/** Whether any write is still waiting to hit a stylesheet. */
+function hasPendingStyleWrites() {
+	return head < queue.length;
+}
+/**
+* Open a batch window. Called from `<TastyBatchProvider>`'s render, so every
+* descendant injection in this commit is covered by the provider's insertion
+* effect.
+*
+* Called during render on purpose: the window must be open before children
+* render. It is idempotent — so StrictMode's double render costs nothing — and
+* carries no other side effect. A render that is thrown away is recovered by the
+* microtask backstop.
+*
+* A no-op without a `document`. On the server there is no sheet to batch
+* against, and `useInsertionEffect` never runs, so nothing would ever close a
+* window this opened. Skipping it keeps the provider inert during SSR and RSC
+* instead of merely harmless.
+*/
+function openBatchWindow() {
+	if (typeof document === "undefined") return;
+	windowOpen = true;
+	everOpened = true;
+}
+/**
+* Close a batch window and flush. Called from the provider's
+* `useInsertionEffect`, i.e. after every render in the commit and before any
+* layout effect.
+*/
+function closeBatchWindow() {
+	windowOpen = false;
+	flushStyles();
+}
+/** Whether a batch window is currently open. */
+function isBatchWindowOpen() {
+	return windowOpen;
+}
+function scheduleMicrotaskFlush() {
+	if (microtaskScheduled || flushing) return;
+	microtaskScheduled = true;
+	queueMicrotask(() => {
+		microtaskScheduled = false;
+		windowOpen = false;
+		flushStyles();
+	});
+}
+/**
+* Drain every pending sheet write, in insertion order.
+*
+* Safe to call when the queue is empty (the common case, so the guard comes
+* first) and safe to call re-entrantly: a nested `flushStyles()` is a no-op,
+* and work a draining write triggers is written in place by
+* `enqueueStyleWrite` rather than queued behind the rest of the batch.
+*/
+function flushStyles() {
+	if (head >= queue.length) return;
+	if (flushing) return;
+	flushing = true;
+	try {
+		while (head < queue.length) {
+			const entry = queue[head++];
+			if (entry.cancelled) {
+				entry.done = true;
+				continue;
+			}
+			entry.run();
+			entry.done = true;
+		}
+	} finally {
+		queue = [];
+		head = 0;
+		flushing = false;
+	}
+}
+/**
+* Dev-only: `batchInjection: true` batches nothing unless a window opens, and no
+* window has ever opened, so no provider is in the tree. Called by the injector
+* the first time it declines to batch.
+*/
+function warnBatchProviderMissing() {
+	if (everOpened || warnedNoProvider || !isDevEnv()) return;
+	warnedNoProvider = true;
+	warn("[Tasty] batchInjection needs <TastyBatchProvider> mounted to batch.");
+}
+/**
+* Drop every pending write without applying it. Test helper — production code
+* should call `flushStyles()` instead.
+*/
+function resetStyleBatch() {
+	queue = [];
+	head = 0;
+	microtaskScheduled = false;
+	flushing = false;
+	windowOpen = false;
+	everOpened = false;
+	warnedNoProvider = false;
+}
+//#endregion
 //#region src/properties/property-type-resolver.ts
 /**
 * PropertyTypeResolver
@@ -3239,6 +3643,10 @@ function rscClassRegexGlobal(prefix) {
 */
 const CUSTOM_PROP_DECL = /^\s*(--[a-z0-9_-]+)\s*:\s*(.+?)\s*$/i;
 const SINGLE_VAR_REF = /^var\((--[a-z0-9_-]+)\)$/i;
+/** A `--name-color-{space}` companion holding a color's channel components. */
+const COLOR_COMPONENTS_DECL = /^\s*(--[a-z0-9_-]+-color-(?:rgb|hsl|oklch))\s*:\s*(.+?)\s*$/i;
+/** A component list the browser can type as `<number>+`. */
+const NUMERIC_COMPONENTS = /^[\d\s.+-]+$/;
 var PropertyTypeResolver = class {
 	/** propName → the prop it depends on */
 	pendingDeps = /* @__PURE__ */ new Map();
@@ -3251,6 +3659,15 @@ var PropertyTypeResolver = class {
 	scanDeclarations(declarations, isPropertyDefined, registerProperty) {
 		if (!declarations.includes("--")) return;
 		const parts = declarations.split(/;+/);
+		for (const part of parts) {
+			const match = COLOR_COMPONENTS_DECL.exec(part);
+			if (!match) continue;
+			const propName = match[1];
+			if (isPropertyDefined(propName)) continue;
+			if (NUMERIC_COMPONENTS.test(match[2])) continue;
+			if (isPropertyDefined(propName.slice(0, propName.lastIndexOf("-")))) continue;
+			registerProperty(propName, "*", getDefaultComponents());
+		}
 		for (const part of parts) {
 			if (!part.trim()) continue;
 			const match = CUSTOM_PROP_DECL.exec(part);
@@ -3553,27 +3970,28 @@ function borderStyle({ border }) {
 }
 borderStyle.__lookupStyles = ["border"];
 //#endregion
-//#region src/styles/createStyle.ts
-const CACHE = {};
-/**
-* Convert color fallback chain to component fallback chain.
-* Example: var(--primary-color, var(--secondary-color))
-*   → var(--primary-color-oklch, var(--secondary-color-oklch))
-*/
-function convertColorChainToComponentChain(colorValue) {
-	const suffix = getColorSpaceSuffix();
-	const componentVarMatch = colorValue.match(/^(?:rgb|hsl|oklch)a?\(\s*(var\(--[a-z0-9-]+-color-(?:rgb|hsl|oklch)\))\s*\//);
-	if (componentVarMatch) return componentVarMatch[1];
-	const match = colorValue.match(/var\(--([a-z0-9-]+)-color\s*(?:,\s*(.+))?\)/);
-	if (!match) {
-		const components = getColorSpaceComponents(colorValue);
-		if (components !== colorValue) return components;
-		return colorValue;
+//#region src/styles/color.ts
+function colorStyle({ color }) {
+	if (!color) return null;
+	if (color === true) color = "currentColor";
+	color = parseColor(color, true).color || resolveCustomProperties(color);
+	const match = color.match(/var\(--(.+?)-color/);
+	let name = "";
+	if (match) name = match[1];
+	const styles = { color };
+	if (name && name !== "current") {
+		const suffix = getColorSpaceSuffix();
+		Object.assign(styles, {
+			"--current-color": color,
+			[`--current-color-${suffix}`]: convertColorChainToComponentChain(color)
+		});
 	}
-	const [, name, fallback] = match;
-	if (!fallback) return `var(--${name}-color-${suffix})`;
-	return `var(--${name}-color-${suffix}, ${convertColorChainToComponentChain(fallback.trim())})`;
+	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]) {
@@ -3617,6 +4035,10 @@ function createStyle(styleName, cssStyle, converter) {
 					[finalCssStyle]: colorSpaceStr,
 					[`${finalCssStyle}-${suffix}`]: getColorSpaceComponents(colorSpaceStr)
 				};
+				if (color && colorFuncName(color)) return {
+					[finalCssStyle]: color,
+					[`${finalCssStyle}-${suffix}`]: convertColorChainToComponentChain(color)
+				};
 				return { [finalCssStyle]: color ?? "" };
 			}
 			const processed = parseStyle(styleValue);
@@ -3628,27 +4050,6 @@ function createStyle(styleName, cssStyle, converter) {
 	return CACHE[key];
 }
 //#endregion
-//#region src/styles/color.ts
-function colorStyle({ color }) {
-	if (!color) return null;
-	if (color === true) color = "currentColor";
-	if (typeof color === "string" && (color.startsWith("#") || color.startsWith("(#"))) color = parseColor(color).color || color;
-	else if (typeof color === "string") color = resolveCustomProperties(color);
-	const match = color.match(/var\(--(.+?)-color/);
-	let name = "";
-	if (match) name = match[1];
-	const styles = { color };
-	if (name && name !== "current") {
-		const suffix = getColorSpaceSuffix();
-		Object.assign(styles, {
-			"--current-color": color,
-			[`--current-color-${suffix}`]: convertColorChainToComponentChain(color)
-		});
-	}
-	return styles;
-}
-colorStyle.__lookupStyles = ["color"];
-//#endregion
 //#region src/styles/display.ts
 /**
 * Process textOverflow into CSS properties for truncation/clamping.
@@ -4587,12 +4988,6 @@ scrollMarginStyle.__lookupStyles = [
 	"scrollMarginInline"
 ];
 //#endregion
-//#region src/utils/warnings.ts
-const PREFIX = "[Tasty]";
-function warn(...args) {
-	console.warn(PREFIX, ...args);
-}
-//#endregion
 //#region src/styles/scrollbar.ts
 /**
 * Standard CSS scrollbar styling via `scrollbar-width`, `scrollbar-color`,
@@ -4638,10 +5033,10 @@ function scrollbarStyle({ scrollbar, overflow }) {
 scrollbarStyle.__lookupStyles = ["scrollbar", "overflow"];
 //#endregion
 //#region src/styles/shadow.ts
-function toBoxShadow(shadow) {
-	const { values, mods, colors } = parseStyle(shadow).groups[0] ?? makeEmptyDetails();
+function toBoxShadow(group) {
+	const { values, mods, colors } = group;
 	const mod = mods[0] || "";
-	const shadowColor = (colors && colors[0]) ?? "";
+	const shadowColor = colors[0] ?? "";
 	return [
 		mod,
 		...values,
@@ -4652,7 +5047,8 @@ function shadowStyle({ shadow }) {
 	if (!shadow) return null;
 	if (shadow === true) shadow = "var(--shadow)";
 	if (CSS_WIDE_KEYWORDS.has(shadow)) return { "box-shadow": shadow };
-	return { "box-shadow": shadow.split(",").map(toBoxShadow).join(",") };
+	const { groups } = parseStyle(shadow);
+	return { "box-shadow": groups.map(toBoxShadow).join(",") };
 }
 shadowStyle.__lookupStyles = ["shadow"];
 //#endregion
@@ -5264,6 +5660,8 @@ var SheetManager = class {
 				propertyTypeResolver: new PropertyTypeResolver(),
 				usageMap: /* @__PURE__ */ new Map(),
 				touchCount: 0,
+				touchTick: -1,
+				touchedTick: /* @__PURE__ */ new Set(),
 				serverClassSyncIndex: 0,
 				rscStylesScanned: false,
 				injectionMode: this.detectInjectionMode(root)
@@ -6174,6 +6572,16 @@ function formatCounterStyleRule(name, descriptors) {
 //#endregion
 //#region src/injector/injector.ts
 /**
+* Placeholder `KeyframesInfo` for a cache entry reserved by a batched write and
+* not yet backed by a real rule. Only ever read through `entry.pending`, which
+* is checked before the info is used.
+*/
+const EMPTY_KEYFRAMES_INFO = {
+	name: "",
+	ruleIndex: -3,
+	sheetIndex: -3
+};
+/**
 * Extract class names from `<style data-tasty-rsc>` tags.
 * The doubled-specificity pattern `.tXXX.tXXX` makes extraction reliable.
 */
@@ -6234,6 +6642,56 @@ var StyleInjector = class {
 	get _sheetManager() {
 		return this.sheetManager;
 	}
+	/**
+	* Whether sheet writes should be queued instead of applied immediately.
+	*
+	* Only ever true on the client: SSR collects CSS as text and the RSC path
+	* returns it as strings, so neither has a live sheet to batch writes against.
+	*
+	* In the default `true` mode a write is only queued inside an open batch
+	* window — a commit in which `<TastyBatchProvider>` rendered and will
+	* therefore flush in its insertion effect, before any layout effect can
+	* measure. Everything else falls through to a synchronous write, so enabling
+	* the flag cannot make a `useLayoutEffect` read an unstyled element.
+	* `'always'` drops the gate and accepts that trade for wider coverage.
+	*/
+	get batching() {
+		const mode = this.config.batchInjection;
+		if (!mode || typeof document === "undefined") return false;
+		if (mode === "always") return true;
+		if (isBatchWindowOpen()) return true;
+		warnBatchProviderMissing();
+		return false;
+	}
+	/**
+	* Apply a sheet write now, or queue it when batching is on.
+	* Returns the queue handle when deferred, so the caller can cancel it if it
+	* disposes before the flush.
+	*/
+	writeSheet(task) {
+		if (this.batching) return enqueueStyleWrite(task);
+		task();
+		return null;
+	}
+	/**
+	* Insert a global (non-class) rule, honouring batching.
+	*
+	* `onApplied` records the caller's dedupe bookkeeping. When the write is
+	* queued it runs eagerly, so a repeat call before the flush bails out instead
+	* of queueing the same rule twice — the same reasoning as
+	* `insertPropertyRule`'s eager marking. When written synchronously it runs
+	* only on success, preserving the existing retry-on-failure behaviour.
+	*/
+	writeGlobalRule(registry, rules, key, root, onApplied) {
+		if (this.batching) {
+			onApplied?.();
+			enqueueStyleWrite(() => {
+				this.sheetManager.insertGlobalRule(registry, rules, key, root);
+			});
+			return;
+		}
+		if (this.sheetManager.insertGlobalRule(registry, rules, key, root)) onApplied?.();
+	}
 	constructor(config = {}) {
 		if (config.namePrefix !== void 0) validateNamePrefix(config.namePrefix);
 		this.config = config;
@@ -6311,12 +6769,18 @@ var StyleInjector = class {
 		};
 		const cacheKey = options?.cacheKey;
 		let className;
-		let isPreAllocated = false;
 		if (cacheKey && registry.cacheKeyToClassName.has(cacheKey)) {
 			className = registry.cacheKeyToClassName.get(cacheKey);
 			const existingRuleInfo = registry.rules.get(className);
-			isPreAllocated = existingRuleInfo.ruleIndex === -1 && existingRuleInfo.sheetIndex === -1;
-			if (!isPreAllocated) {
+			if (existingRuleInfo.ruleIndex === -3) {
+				registry.refCounts.set(className, (registry.refCounts.get(className) || 0) + 1);
+				if (registry.metrics) registry.metrics.hits++;
+				return {
+					className,
+					dispose: () => this.dispose(className, registry)
+				};
+			}
+			if (!(existingRuleInfo.ruleIndex === -1 && existingRuleInfo.sheetIndex === -1)) {
 				const currentRefCount = registry.refCounts.get(className) || 0;
 				registry.refCounts.set(className, currentRefCount + 1);
 				if (registry.metrics) registry.metrics.hits++;
@@ -6357,39 +6821,70 @@ var StyleInjector = class {
 				rootPrefix: void 0
 			};
 		});
-		if (this.config.autoPropertyTypes !== false) {
-			const resolver = registry.propertyTypeResolver;
-			const defined = registry.injectedProperties;
-			for (const rule of rulesToInsert) {
-				if (!rule.declarations) continue;
-				resolver.scanDeclarations(rule.declarations, (name) => defined.has(name), (name, syntax, initialValue) => {
-					this.property(name, {
-						syntax,
-						inherits: true,
-						initialValue,
-						root
+		const applySheetWrite = () => {
+			if (this.config.autoPropertyTypes !== false) {
+				const resolver = registry.propertyTypeResolver;
+				const defined = registry.injectedProperties;
+				for (const rule of rulesToInsert) {
+					if (!rule.declarations) continue;
+					resolver.scanDeclarations(rule.declarations, (name) => defined.has(name), (name, syntax, initialValue) => {
+						this.property(name, {
+							syntax,
+							inherits: true,
+							initialValue,
+							root
+						});
 					});
-				});
+				}
 			}
-		}
-		const ruleInfo = this.sheetManager.insertRule(registry, rulesToInsert, className, root);
-		if (!ruleInfo) {
-			if (registry.metrics) registry.metrics.misses++;
+			const ruleInfo = this.sheetManager.insertRule(registry, rulesToInsert, className, root);
+			if (!ruleInfo) {
+				if (registry.metrics) registry.metrics.misses++;
+				return null;
+			}
+			registry.rules.set(className, ruleInfo);
+			if (cacheKey) registry.cacheKeyToClassName.set(cacheKey, className);
+			if (registry.metrics) {
+				registry.metrics.totalInsertions++;
+				registry.metrics.misses++;
+			}
+			return ruleInfo;
+		};
+		if (this.batching) {
+			registry.rules.set(className, {
+				className,
+				ruleIndex: -3,
+				sheetIndex: -3
+			});
+			if (cacheKey) registry.cacheKeyToClassName.set(cacheKey, className);
+			registry.refCounts.set(className, 1);
+			const queued = enqueueStyleWrite(() => {
+				if (applySheetWrite()) return;
+				registry.rules.set(className, {
+					className,
+					ruleIndex: -1,
+					sheetIndex: -1
+				});
+			});
 			return {
 				className,
-				dispose: () => {}
+				dispose: () => {
+					if (!queued.done && registry.refCounts.get(className) === 1 && registry.rules.get(className)?.ruleIndex === -3) {
+						queued.cancelled = true;
+						registry.rules.delete(className);
+						if (cacheKey) registry.cacheKeyToClassName.delete(cacheKey);
+						registry.refCounts.set(className, 0);
+						return;
+					}
+					this.dispose(className, registry);
+				}
 			};
 		}
+		if (!applySheetWrite()) return {
+			className,
+			dispose: () => {}
+		};
 		registry.refCounts.set(className, 1);
-		if (isPreAllocated) registry.rules.set(className, ruleInfo);
-		else {
-			registry.rules.set(className, ruleInfo);
-			if (cacheKey) registry.cacheKeyToClassName.set(cacheKey, className);
-		}
-		if (registry.metrics) {
-			registry.metrics.totalInsertions++;
-			registry.metrics.misses++;
-		}
 		return {
 			className,
 			dispose: () => this.dispose(className, registry)
@@ -6404,24 +6899,41 @@ var StyleInjector = class {
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
 		if (!rules || rules.length === 0) return { dispose: () => {} };
-		if (this.config.autoPropertyTypes !== false) {
-			const resolver = registry.propertyTypeResolver;
-			const defined = registry.injectedProperties;
-			for (const rule of rules) {
-				if (!rule.declarations) continue;
-				resolver.scanDeclarations(rule.declarations, (name) => defined.has(name), (name, syntax, initialValue) => {
-					this.property(name, {
-						syntax,
-						inherits: true,
-						initialValue,
-						root
+		const key = `global:${this.globalRuleCounter++}`;
+		const applyWrite = () => {
+			if (this.config.autoPropertyTypes !== false) {
+				const resolver = registry.propertyTypeResolver;
+				const defined = registry.injectedProperties;
+				for (const rule of rules) {
+					if (!rule.declarations) continue;
+					resolver.scanDeclarations(rule.declarations, (name) => defined.has(name), (name, syntax, initialValue) => {
+						this.property(name, {
+							syntax,
+							inherits: true,
+							initialValue,
+							root
+						});
 					});
-				});
+				}
 			}
+			const inserted = this.sheetManager.insertGlobalRule(registry, rules, key, root);
+			if (registry.metrics) registry.metrics.totalInsertions++;
+			return inserted;
+		};
+		if (this.batching) {
+			let info = null;
+			const queued = enqueueStyleWrite(() => {
+				info = applyWrite();
+			});
+			return { dispose: () => {
+				if (!queued.done) {
+					queued.cancelled = true;
+					return;
+				}
+				if (info) this.sheetManager.deleteGlobalRule(registry, key);
+			} };
 		}
-		const key = `global:${this.globalRuleCounter++}`;
-		const info = this.sheetManager.insertGlobalRule(registry, rules, key, root);
-		if (registry.metrics) registry.metrics.totalInsertions++;
+		const info = applyWrite();
 		return { dispose: () => {
 			if (info) this.sheetManager.deleteGlobalRule(registry, key);
 		} };
@@ -6433,12 +6945,24 @@ var StyleInjector = class {
 	*/
 	injectRawCSS(css, options) {
 		const root = options?.root || document;
-		return this.sheetManager.injectRawCSS(css, root);
+		if (!this.batching) return this.sheetManager.injectRawCSS(css, root);
+		let result = null;
+		const queued = enqueueStyleWrite(() => {
+			result = this.sheetManager.injectRawCSS(css, root);
+		});
+		return { dispose: () => {
+			if (!queued.done) {
+				queued.cancelled = true;
+				return;
+			}
+			result?.dispose();
+		} };
 	}
 	/**
 	* Get raw CSS text for SSR
 	*/
 	getRawCSSText(options) {
+		flushStyles();
 		const root = options?.root || document;
 		return this.sheetManager.getRawCSSText(root);
 	}
@@ -6475,6 +6999,7 @@ var StyleInjector = class {
 	* Force bulk cleanup of unused styles
 	*/
 	cleanup(root) {
+		flushStyles();
 		const registry = this.sheetManager.getRegistry(root || document);
 		this.sheetManager.forceCleanup(registry);
 	}
@@ -6482,6 +7007,7 @@ var StyleInjector = class {
 	* Get CSS text from all sheets (for SSR)
 	*/
 	getCSSText(options) {
+		flushStyles();
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
 		return this.sheetManager.getCSSText(registry);
@@ -6490,6 +7016,7 @@ var StyleInjector = class {
 	* Get CSS only for the provided tasty classNames (e.g., ["t0","t3"])
 	*/
 	getCSSTextForClasses(classNames, options) {
+		flushStyles();
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
 		const cssChunks = [];
@@ -6514,6 +7041,7 @@ var StyleInjector = class {
 	* Get cache performance metrics
 	*/
 	getMetrics(options) {
+		flushStyles();
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
 		return this.sheetManager.getMetrics(registry);
@@ -6593,7 +7121,7 @@ var StyleInjector = class {
 			declarations
 		};
 		registry.injectedProperties.set(cssName, normalizePropertyDefinition(definition));
-		this.sheetManager.insertGlobalRule(registry, [rule], `property:${cacheKey}`, root);
+		this.writeGlobalRule(registry, [rule], `property:${cacheKey}`, root);
 	}
 	/**
 	* Check whether a given @property name was already injected by this injector.
@@ -6604,6 +7132,7 @@ var StyleInjector = class {
 	* - `--name` → checks `--name` (legacy format)
 	*/
 	isPropertyDefined(name, options) {
+		flushStyles();
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
 		const effectiveResult = getEffectiveDefinition(name, {});
@@ -6625,7 +7154,9 @@ var StyleInjector = class {
 			selector: "@font-face",
 			declarations: formatFontFaceDeclarations(family, descriptors)
 		};
-		if (this.sheetManager.insertGlobalRule(registry, [rule], `fontface:${hash}`, root)) registry.injectedFontFaces.add(hash);
+		this.writeGlobalRule(registry, [rule], `fontface:${hash}`, root, () => {
+			registry.injectedFontFaces.add(hash);
+		});
 	}
 	/**
 	* Inject a CSS @counter-style rule.
@@ -6643,13 +7174,17 @@ var StyleInjector = class {
 		const existingIsStrong = registry.injectedCounterStyles.get(name);
 		if (existingIsStrong !== void 0) {
 			if (isWeak || existingIsStrong === true) return;
-			this.sheetManager.deleteGlobalRule(registry, `counterstyle:${name}`);
+			this.writeSheet(() => {
+				this.sheetManager.deleteGlobalRule(registry, `counterstyle:${name}`);
+			});
 		}
 		const rule = {
 			selector: `@counter-style ${name}`,
 			declarations: formatCounterStyleDeclarations(descriptors)
 		};
-		if (this.sheetManager.insertGlobalRule(registry, [rule], `counterstyle:${name}`, root)) registry.injectedCounterStyles.set(name, !isWeak);
+		this.writeGlobalRule(registry, [rule], `counterstyle:${name}`, root, () => {
+			registry.injectedCounterStyles.set(name, !isWeak);
+		});
 	}
 	/**
 	* Inject a CSS @function rule (custom function).
@@ -6668,13 +7203,17 @@ var StyleInjector = class {
 		const existingIsStrong = registry.injectedFunctions.get(cssName);
 		if (existingIsStrong !== void 0) {
 			if (isWeak || existingIsStrong === true) return;
-			this.sheetManager.deleteGlobalRule(registry, `function:${cssName}`);
+			this.writeSheet(() => {
+				this.sheetManager.deleteGlobalRule(registry, `function:${cssName}`);
+			});
 		}
 		const rule = {
 			selector: formatFunctionPrelude(name, definition.args, definition.returns),
 			declarations: formatFunctionDeclarations(definition)
 		};
-		if (this.sheetManager.insertGlobalRule(registry, [rule], `function:${cssName}`, root)) registry.injectedFunctions.set(cssName, !isWeak);
+		this.writeGlobalRule(registry, [rule], `function:${cssName}`, root, () => {
+			registry.injectedFunctions.set(cssName, !isWeak);
+		});
 	}
 	/**
 	* Inject keyframes and return object with toString() and dispose()
@@ -6712,29 +7251,53 @@ var StyleInjector = class {
 				registry.keyframesNameToContent.set(providedName, contentHash);
 			}
 		} else actualName = makeKeyframeName(this.namePrefix, String(registry.keyframesCounter++));
-		const result = this.sheetManager.insertKeyframes(registry, steps, actualName, root);
-		if (!result) return {
-			toString: () => "",
-			dispose: () => {}
+		const applyWrite = () => {
+			const result = this.sheetManager.insertKeyframes(registry, steps, actualName, root);
+			if (!result) return false;
+			const { info, declarations } = result;
+			if (this.config.autoPropertyTypes !== false && declarations) registry.propertyTypeResolver.scanDeclarations(declarations, (name) => registry.injectedProperties.has(name), (name, syntax, initialValue) => {
+				this.property(name, {
+					syntax,
+					inherits: true,
+					initialValue,
+					root
+				});
+			});
+			const entry = registry.keyframesCache.get(contentHash);
+			if (entry) {
+				entry.info = info;
+				entry.pending = void 0;
+			} else registry.keyframesCache.set(contentHash, {
+				name: actualName,
+				refCount: 1,
+				info
+			});
+			if (registry.metrics) {
+				registry.metrics.totalInsertions++;
+				registry.metrics.misses++;
+			}
+			return true;
 		};
-		const { info, declarations } = result;
-		if (this.config.autoPropertyTypes !== false && declarations) registry.propertyTypeResolver.scanDeclarations(declarations, (name) => registry.injectedProperties.has(name), (name, syntax, initialValue) => {
-			this.property(name, {
-				syntax,
-				inherits: true,
-				initialValue,
-				root
+		if (this.batching) {
+			const entry = {
+				name: actualName,
+				refCount: 1,
+				info: EMPTY_KEYFRAMES_INFO
+			};
+			registry.keyframesCache.set(contentHash, entry);
+			entry.pending = enqueueStyleWrite(() => {
+				if (applyWrite()) return;
+				if (registry.keyframesCache.get(contentHash) === entry) registry.keyframesCache.delete(contentHash);
 			});
-		});
-		registry.keyframesCache.set(contentHash, {
-			name: actualName,
-			refCount: 1,
-			info
-		});
-		if (registry.metrics) {
-			registry.metrics.totalInsertions++;
-			registry.metrics.misses++;
+			return {
+				toString: () => actualName,
+				dispose: () => this.disposeKeyframes(contentHash, registry)
+			};
 		}
+		if (!applyWrite()) return {
+			toString: () => "",
+			dispose: () => {}
+		};
 		return {
 			toString: () => actualName,
 			dispose: () => this.disposeKeyframes(contentHash, registry)
@@ -6748,7 +7311,8 @@ var StyleInjector = class {
 		if (!entry) return;
 		entry.refCount--;
 		if (entry.refCount <= 0) {
-			this.sheetManager.deleteKeyframes(registry, entry.info);
+			if (entry.pending && !entry.pending.done) entry.pending.cancelled = true;
+			else this.sheetManager.deleteKeyframes(registry, entry.info);
 			registry.keyframesCache.delete(contentHash);
 			for (const [name, hash] of registry.keyframesNameToContent.entries()) if (hash === contentHash) {
 				registry.keyframesNameToContent.delete(name);
@@ -6773,6 +7337,11 @@ var StyleInjector = class {
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
 		const now = Date.now();
+		if (registry.touchTick !== now) {
+			registry.touchTick = now;
+			registry.touchedTick.clear();
+		} else if (registry.touchedTick.has(className)) return;
+		registry.touchedTick.add(className);
 		const parts = className.indexOf(" ") === -1 ? [className] : className.split(" ");
 		for (const cls of parts) {
 			if (!this.classRegex.test(cls)) continue;
@@ -6813,6 +7382,7 @@ var StyleInjector = class {
 	* @returns Number of styles evicted.
 	*/
 	gc(options) {
+		flushStyles();
 		if (typeof document === "undefined") return 0;
 		if (this.pendingGCHandle != null) {
 			if (typeof cancelIdleCallback !== "undefined") cancelIdleCallback(this.pendingGCHandle);
@@ -6862,6 +7432,7 @@ var StyleInjector = class {
 	* Destroy all resources for a root
 	*/
 	destroy(root) {
+		flushStyles();
 		const targetRoot = root || document;
 		this.sheetManager.cleanup(targetRoot);
 		if (this.pendingGCHandle != null && !this.sheetManager.hasActiveRoots()) {
@@ -12310,6 +12881,6 @@ function resetConfig() {
 	delete storage[GLOBAL_INJECTOR_KEY];
 }
 //#endregion
-export { SheetManager as $, getNamedColorHex as $t, FLOW_STYLES as A, registerFunctionPolyfill as At, createStateParserContext as B, stringifyStyles as Bt, BASE_STYLES as C, LAYOUT_CHUNK_STYLES as Ct, COLOR_STYLES as D, formatFunctionRule as Dt, BLOCK_STYLES as E, extractLocalFunctions as Et, hasPipelineCacheEntry as F, getGlobalParser as Ft, StyleInjector as G, createColorFunc as Gt, extractPredefinedStateRefs as H, okhstPlugin as Ht, isSelector as I, getGlobalPredefinedTokens as It, hasLocalCounterStyle as J, colorInitialValueToComponents as Jt, extractLocalCounterStyle as K, isDevEnv as Kt, renderStyles as L, normalizeColorTokenValue as Lt, OUTER_STYLES as M, CUSTOM_UNITS as Mt, POSITION_STYLES as N, DIRECTIONS as Nt, CONTAINER_STYLES as O, hasLocalFunctions as Ot, TEXT_STYLES as P, filterMods as Pt, hasLocalFontFace as Q, getComponentPropertySyntax as Qt, parseStateKey as R, parseColor as Rt, baseStylePropsRegistry as S, FONT_CHUNK_STYLES as St, BLOCK_OUTER_STYLES as T, STYLE_TO_CHUNK as Tt, getGlobalPredefinedStates as U, okhslFunction as Ut, extractLocalPredefinedStates as V, okhstFunction as Vt, setGlobalPredefinedStates as W, okhslPlugin as Wt, fontFaceContentHash as X, getColorSpaceFunc as Xt, extractLocalFontFace as Y, getColorSpaceComponents as Yt, formatFontFaceRule as Z, getColorSpaceSuffix as Zt, isFunctionsPolyfillEnabled as _, propHandlerRegistry as _t, getGlobalCounterStyles as a, Lru as an, DEFAULT_NAME_PREFIX as at, resetConfig as b, DIMENSION_CHUNK_STYLES as bt, getGlobalInjector as c, makeCounterStyleName as ct, getGlobalStyles as d, validateNamePrefix as dt, getRgbValuesFromRgbaString as en, STYLE_HANDLER_MAP as et, getNamePrefix as f, hashString as ft, isConfigLocked as g, parsePropertyToken as gt, hasStylesGenerated as h, hasLocalProperties as ht, getGlobalConfigTokens as i, resolveFunctionColor as in, PropertyTypeResolver as it, INNER_STYLES as j, registerLocalFunctionPolyfills as jt, DIMENSION_STYLES as k, parseFunctionName as kt, getGlobalKeyframes as l, makeKeyframeName as lt, hasGlobalRecipes as m, getEffectiveDefinition as mt, getConfig as n, hslToRgbValues as nn, styleHandlers as nt, getGlobalFontFaces as o, normalizeDslName as on, DEFAULT_ZERO_NAME_PREFIX as ot, hasGlobalKeyframes as p, extractLocalProperties as pt, formatCounterStyleRule as q, StyleParser as qt, getEffectiveProperties as r, strToRgb as rn, createStyle as rt, getGlobalFunctions as s, makeClassName as st, configure as t, hexToRgb as tn, defineHandler as tt, getGlobalRecipes as u, tastyClassRegex as ut, isTestEnvironment as v, APPEARANCE_CHUNK_STYLES as vt, BLOCK_INNER_STYLES as w, POSITION_CHUNK_STYLES as wt, generateTypographyTokens as x, DISPLAY_CHUNK_STYLES as xt, markStylesGenerated as y, CHUNK_NAMES as yt, camelToKebab as z, parseStyle as zt };
+export { SheetManager as $, colorInitialValueToComponents as $t, FLOW_STYLES as A, STYLE_TO_CHUNK as At, createStateParserContext as B, getGlobalParser as Bt, BASE_STYLES as C, APPEARANCE_CHUNK_STYLES as Ct, COLOR_STYLES as D, FONT_CHUNK_STYLES as Dt, BLOCK_STYLES as E, DISPLAY_CHUNK_STYLES as Et, hasPipelineCacheEntry as F, registerFunctionPolyfill as Ft, StyleInjector as G, stringifyStyles as Gt, extractPredefinedStateRefs as H, normalizeColorTokenValue as Ht, isSelector as I, registerLocalFunctionPolyfills as It, hasLocalCounterStyle as J, okhslFunction as Jt, extractLocalCounterStyle as K, okhstFunction as Kt, renderStyles as L, CUSTOM_UNITS as Lt, OUTER_STYLES as M, formatFunctionRule as Mt, POSITION_STYLES as N, hasLocalFunctions as Nt, CONTAINER_STYLES as O, LAYOUT_CHUNK_STYLES as Ot, TEXT_STYLES as P, parseFunctionName as Pt, hasLocalFontFace as Q, StyleParser as Qt, parseStateKey as R, DIRECTIONS as Rt, baseStylePropsRegistry as S, propHandlerRegistry as St, BLOCK_OUTER_STYLES as T, DIMENSION_CHUNK_STYLES as Tt, getGlobalPredefinedStates as U, parseColor as Ut, extractLocalPredefinedStates as V, getGlobalPredefinedTokens as Vt, setGlobalPredefinedStates as W, parseStyle as Wt, fontFaceContentHash as X, createColorFunc as Xt, extractLocalFontFace as Y, okhslPlugin as Yt, formatFontFaceRule as Z, isDevEnv as Zt, isFunctionsPolyfillEnabled as _, hashString as _t, getGlobalCounterStyles as a, resolveFunctionColor as an, closeBatchWindow as at, resetConfig as b, hasLocalProperties as bt, getGlobalInjector as c, getRgbValuesFromRgbaString as cn, openBatchWindow as ct, getGlobalStyles as d, strToRgb as dn, DEFAULT_ZERO_NAME_PREFIX as dt, convertColorChainToComponentChain as en, STYLE_HANDLER_MAP as et, getNamePrefix as f, normalizeDslName as fn, makeClassName as ft, isConfigLocked as g, validateNamePrefix as gt, hasStylesGenerated as h, tastyClassRegex as ht, getGlobalConfigTokens as i, overrideColorAlpha as in, PropertyTypeResolver as it, INNER_STYLES as j, extractLocalFunctions as jt, DIMENSION_STYLES as k, POSITION_CHUNK_STYLES as kt, getGlobalKeyframes as l, hexToRgb as ln, resetStyleBatch as lt, hasGlobalRecipes as m, makeKeyframeName as mt, getConfig as n, getColorSpaceSuffix as nn, styleHandlers as nt, getGlobalFontFaces as o, Lru as on, flushStyles as ot, hasGlobalKeyframes as p, makeCounterStyleName as pt, formatCounterStyleRule as q, okhstPlugin as qt, getEffectiveProperties as r, getComponentPropertySyntax as rn, createStyle as rt, getGlobalFunctions as s, getNamedColorHex as sn, hasPendingStyleWrites as st, configure as t, getColorSpaceComponents as tn, defineHandler as tt, getGlobalRecipes as u, hslToRgbValues as un, DEFAULT_NAME_PREFIX as ut, isTestEnvironment as v, extractLocalProperties as vt, BLOCK_INNER_STYLES as w, CHUNK_NAMES as wt, generateTypographyTokens as x, parsePropertyToken as xt, markStylesGenerated as y, getEffectiveDefinition as yt, camelToKebab as z, filterMods as zt };
 
-//# sourceMappingURL=config-DOCuTykY.js.map
+//# sourceMappingURL=config-BrDt11hO.js.map