@tenphi/tasty 2.11.1 → 3.0.0

package/dist/{config-YDAcLaVf.js → config-CCcE_tqx.js}

@@ -1,277 +1,3 @@
-//#region src/parser/const.ts
-const VALUE_KEYWORDS = new Set([
-	"auto",
-	"max-content",
-	"min-content",
-	"fit-content",
-	"stretch",
-	"initial",
-	"inherit",
-	"revert",
-	"unset",
-	"revert-layer"
-]);
-const CSS_WIDE_KEYWORDS = new Set([
-	"initial",
-	"inherit",
-	"revert",
-	"unset",
-	"revert-layer"
-]);
-const COLOR_FUNCS = new Set([
-	"rgb",
-	"rgba",
-	"hsl",
-	"hsla",
-	"hwb",
-	"lab",
-	"lch",
-	"oklab",
-	"oklch",
-	"color",
-	"device-cmyk",
-	"gray",
-	"color-mix",
-	"color-contrast"
-]);
-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})?)$/;
-const RE_RAW_UNIT = /^([+-]?(?:\d*\.\d+|\d+))([a-z%]+)$/;
-const CANONICAL_FUNC_CASE = new Map([
-	["translatex", "translateX"],
-	["translatey", "translateY"],
-	["translatez", "translateZ"],
-	["scalex", "scaleX"],
-	["scaley", "scaleY"],
-	["scalez", "scaleZ"],
-	["rotatex", "rotateX"],
-	["rotatey", "rotateY"],
-	["rotatez", "rotateZ"],
-	["skewx", "skewX"],
-	["skewy", "skewY"]
-]);
-function canonicalFuncName(lowered) {
-	return CANONICAL_FUNC_CASE.get(lowered) ?? lowered;
-}
-//#endregion
-//#region src/properties/index.ts
-const PROPERTIES_KEY = "@properties";
-/**
-* Valid CSS custom property name pattern (after the -- prefix).
-* Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.
-*/
-const VALID_PROPERTY_NAME_PATTERN = /^[a-z_][a-z0-9-_]*$/i;
-/**
-* Validate a CSS custom property name (the part after --).
-* Returns true if the name is valid for use as a CSS custom property.
-*/
-function isValidPropertyName(name) {
-	return VALID_PROPERTY_NAME_PATTERN.test(name);
-}
-/**
-* Check if styles object has local @properties definition.
-* Fast path: single property lookup.
-*/
-function hasLocalProperties(styles) {
-	return PROPERTIES_KEY in styles;
-}
-/**
-* Extract local @properties from styles object.
-* Returns null if no local properties (fast path).
-*/
-function extractLocalProperties(styles) {
-	const properties = styles[PROPERTIES_KEY];
-	if (!properties || typeof properties !== "object") return null;
-	return properties;
-}
-/**
-* Parse a property token name and return the CSS property name and whether it's a color.
-* Supports tasty token syntax and validates the property name.
-*
-* Token formats:
-* - `$name` → { cssName: '--name', isColor: false }
-* - `#name` → { cssName: '--name-color', isColor: true }
-* - `--name` → { cssName: '--name', isColor: false } (legacy, auto-detect color by suffix)
-* - `name` → { cssName: '--name', isColor: false } (legacy)
-*
-* @param token - The property token to parse
-* @returns Parsed result with cssName, isColor, isValid, and optional error
-*/
-function parsePropertyToken(token) {
-	if (!token || typeof token !== "string") return {
-		cssName: "",
-		isColor: false,
-		isValid: false,
-		error: "Property token must be a non-empty string"
-	};
-	let name;
-	let isColor;
-	if (token.startsWith("$")) {
-		name = token.slice(1);
-		isColor = false;
-	} else if (token.startsWith("#")) {
-		name = token.slice(1);
-		isColor = true;
-	} else if (token.startsWith("--")) {
-		name = token.slice(2);
-		isColor = token.endsWith("-color");
-	} else {
-		name = token;
-		isColor = token.endsWith("-color");
-	}
-	if (!name) return {
-		cssName: "",
-		isColor,
-		isValid: false,
-		error: "Property name cannot be empty"
-	};
-	if (!isValidPropertyName(name)) return {
-		cssName: "",
-		isColor,
-		isValid: false,
-		error: `Invalid property name "${name}". Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.`
-	};
-	let cssName;
-	if (token.startsWith("#")) cssName = `--${name}-color`;
-	else cssName = `--${name}`;
-	return {
-		cssName,
-		isColor,
-		isValid: true
-	};
-}
-/**
-* Normalize a property definition to a consistent string representation.
-* Used for comparing definitions to detect type conflicts.
-*
-* Only `syntax` and `inherits` are compared — `initialValue` is intentionally
-* excluded because different components may set different defaults for the
-* same typed property (e.g. auto-inferred `0px` vs explicit `6px`).
-*
-* Keys are sorted alphabetically to ensure consistent comparison:
-* { inherits: true, syntax: '<color>' } === { syntax: '<color>', inherits: true }
-*/
-function normalizePropertyDefinition(def) {
-	const normalized = {};
-	if (def.inherits !== void 0) normalized.inherits = def.inherits;
-	if (def.syntax !== void 0) normalized.syntax = def.syntax;
-	return JSON.stringify(normalized);
-}
-/**
-* Get the effective property definition for a token.
-* For color tokens (#name), auto-sets syntax to '<color>' and defaults initialValue to 'transparent'.
-*
-* @param token - Property token ($name, #name, --name, or plain name)
-* @param userDefinition - User-provided definition options
-* @returns Effective definition with cssName, definition, isValid, and optional error
-*/
-function getEffectiveDefinition(token, userDefinition) {
-	const parsed = parsePropertyToken(token);
-	if (!parsed.isValid) return {
-		cssName: "",
-		definition: userDefinition,
-		isColor: false,
-		isValid: false,
-		error: parsed.error
-	};
-	if (parsed.isColor) return {
-		cssName: parsed.cssName,
-		definition: {
-			syntax: "<color>",
-			inherits: userDefinition.inherits,
-			initialValue: userDefinition.initialValue ?? "transparent"
-		},
-		isColor: true,
-		isValid: true
-	};
-	return {
-		cssName: parsed.cssName,
-		definition: userDefinition,
-		isColor: false,
-		isValid: true
-	};
-}
-const UNIT_TO_SYNTAX = {};
-const LENGTH_UNITS = [
-	"px",
-	"em",
-	"rem",
-	"vw",
-	"vh",
-	"vmin",
-	"vmax",
-	"ch",
-	"ex",
-	"cap",
-	"ic",
-	"lh",
-	"rlh",
-	"svw",
-	"svh",
-	"lvw",
-	"lvh",
-	"dvw",
-	"dvh",
-	"cqw",
-	"cqh",
-	"cqi",
-	"cqb",
-	"cqmin",
-	"cqmax"
-];
-const ANGLE_UNITS = [
-	"deg",
-	"rad",
-	"grad",
-	"turn"
-];
-const TIME_UNITS = ["ms", "s"];
-for (const u of LENGTH_UNITS) UNIT_TO_SYNTAX[u] = {
-	syntax: "<length-percentage>",
-	initialValue: "0px"
-};
-UNIT_TO_SYNTAX["%"] = {
-	syntax: "<length-percentage>",
-	initialValue: "0px"
-};
-for (const u of ANGLE_UNITS) UNIT_TO_SYNTAX[u] = {
-	syntax: "<angle>",
-	initialValue: "0deg"
-};
-for (const u of TIME_UNITS) UNIT_TO_SYNTAX[u] = {
-	syntax: "<time>",
-	initialValue: "0s"
-};
-/**
-* Infer CSS @property syntax from a concrete value.
-* Detects numeric types: \<number\>, \<length-percentage\>, \<angle\>, \<time\>.
-* Length and percentage values both map to \<length-percentage\> for maximum flexibility.
-* Color properties are handled separately via the #name token convention
-* (--name-color gets \<color\> syntax automatically in getEffectiveDefinition).
-*
-* @param value - The CSS value to infer from (e.g. '10px', '1', '45deg')
-* @returns Inferred syntax and initial value, or null if not inferable
-*/
-function inferSyntaxFromValue(value) {
-	if (!value || typeof value !== "string") return null;
-	const trimmed = value.trim();
-	if (!trimmed) return null;
-	if (RE_NUMBER.test(trimmed)) {
-		if (parseFloat(trimmed) === 0) return null;
-		return {
-			syntax: "<number>",
-			initialValue: "0"
-		};
-	}
-	const unitMatch = trimmed.match(RE_RAW_UNIT);
-	if (unitMatch) {
-		const mapping = UNIT_TO_SYNTAX[unitMatch[2]];
-		if (mapping) return mapping;
-	}
-	return null;
-}
-//#endregion
 //#region src/parser/lru.ts
 var Lru = class {
 	limit;
@@ -379,6 +105,34 @@ var Lru = class {
 	}
 };
 //#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 = [
 	[
@@ -1054,8 +808,6 @@ function strToRgb(color, _ignoreAlpha = false) {
 	if (color.startsWith("rgb")) return color;
 	if (color.startsWith("#")) return hexToRgb(color);
 	if (color.startsWith("oklch(")) return oklchStringToRgb(color);
-	if (color.startsWith("okhsl(")) return okhslStringToRgb(color);
-	if (color.startsWith("okhst(")) return okhstStringToRgb(color);
 	if (color.startsWith("hsl")) return hslStringToRgb(color);
 	const namedHex = getNamedColorHex().get(color.toLowerCase());
 	if (namedHex) return hexToRgb(namedHex);
@@ -1092,62 +844,6 @@ function hslStringToRgb(hslStr) {
 	return `rgb(${Math.round(r)} ${Math.round(g)} ${Math.round(b)})`;
 }
 /**
-* Convert an `okhsl()` color string to an `rgb()`/`rgba()` CSS string.
-* Supports deg/turn/rad hue units and percentage saturation/lightness.
-*/
-function okhslStringToRgb(okhslStr) {
-	const match = okhslStr.match(/okhsl\(([^)]+)\)/i);
-	if (!match) return null;
-	const [colorPart, alphaPart] = match[1].trim().split("/");
-	const parts = colorPart.trim().split(/[,\s]+/).filter(Boolean);
-	if (parts.length < 3) return null;
-	let h = parseFloat(parts[0]);
-	const hueStr = parts[0].toLowerCase();
-	if (hueStr.endsWith("turn")) h = parseFloat(hueStr) * 360;
-	else if (hueStr.endsWith("rad")) h = parseFloat(hueStr) * 180 / Math.PI;
-	else if (hueStr.endsWith("deg")) h = parseFloat(hueStr);
-	const parsePercent = (val) => {
-		const num = parseFloat(val);
-		return val.includes("%") ? num / 100 : num;
-	};
-	const s = Math.max(0, Math.min(1, parsePercent(parts[1])));
-	const l = Math.max(0, Math.min(1, parsePercent(parts[2])));
-	const [r, g, b] = okhslToSrgb(h, s, l);
-	const r255 = Math.round(Math.max(0, Math.min(1, r)) * 255);
-	const g255 = Math.round(Math.max(0, Math.min(1, g)) * 255);
-	const b255 = Math.round(Math.max(0, Math.min(1, b)) * 255);
-	if (alphaPart) return `rgba(${r255}, ${g255}, ${b255}, ${parseFloat(alphaPart.trim())})`;
-	return `rgb(${r255} ${g255} ${b255})`;
-}
-/**
-* Convert an `okhst()` color string to an `rgb()`/`rgba()` CSS string.
-* Supports deg/turn/rad hue units and percentage saturation/tone.
-*/
-function okhstStringToRgb(okhstStr) {
-	const match = okhstStr.match(/okhst\(([^)]+)\)/i);
-	if (!match) return null;
-	const [colorPart, alphaPart] = match[1].trim().split("/");
-	const parts = colorPart.trim().split(/[,\s]+/).filter(Boolean);
-	if (parts.length < 3) return null;
-	let h = parseFloat(parts[0]);
-	const hueStr = parts[0].toLowerCase();
-	if (hueStr.endsWith("turn")) h = parseFloat(hueStr) * 360;
-	else if (hueStr.endsWith("rad")) h = parseFloat(hueStr) * 180 / Math.PI;
-	else if (hueStr.endsWith("deg")) h = parseFloat(hueStr);
-	const parsePercent = (val) => {
-		const num = parseFloat(val);
-		return val.includes("%") ? num / 100 : num;
-	};
-	const s = Math.max(0, Math.min(1, parsePercent(parts[1])));
-	const t = Math.max(0, Math.min(1, parsePercent(parts[2])));
-	const [r, g, b] = okhstToSrgb(h, s, t);
-	const r255 = Math.round(Math.max(0, Math.min(1, r)) * 255);
-	const g255 = Math.round(Math.max(0, Math.min(1, g)) * 255);
-	const b255 = Math.round(Math.max(0, Math.min(1, b)) * 255);
-	if (alphaPart) return `rgba(${r255}, ${g255}, ${b255}, ${parseFloat(alphaPart.trim())})`;
-	return `rgb(${r255} ${g255} ${b255})`;
-}
-/**
 * Convert an `oklch()` color string to an `rgb()`/`rgba()` CSS string.
 * Supports deg/turn/rad hue units and percentage lightness.
 */
@@ -1309,28 +1005,8 @@ function resolveToRgbaValues(color) {
 			parsed.alpha
 		];
 	}
-	if (trimmed.startsWith("okhsl(")) {
-		const parsed = parseColorFuncArgs(trimmed, "okhsl");
-		if (!parsed) return null;
-		const [r, g, b] = okhslToSrgb(parseHue(parsed.parts[0]), clamp01(parsePercent(parsed.parts[1])), clamp01(parsePercent(parsed.parts[2])));
-		return [
-			clamp01(r) * 255,
-			clamp01(g) * 255,
-			clamp01(b) * 255,
-			parsed.alpha
-		];
-	}
-	if (trimmed.startsWith("okhst(")) {
-		const parsed = parseColorFuncArgs(trimmed, "okhst");
-		if (!parsed) return null;
-		const [r, g, b] = okhstToSrgb(parseHue(parsed.parts[0]), clamp01(parsePercent(parsed.parts[1])), clamp01(parsePercent(parsed.parts[2])));
-		return [
-			clamp01(r) * 255,
-			clamp01(g) * 255,
-			clamp01(b) * 255,
-			parsed.alpha
-		];
-	}
+	const resolved = resolveFunctionColor(trimmed);
+	if (resolved && resolved !== trimmed) return resolveToRgbaValues(resolved);
 	const fallback = strToRgb(trimmed);
 	if (fallback) {
 		if (fallback !== trimmed) return resolveToRgbaValues(fallback);
@@ -1527,126 +1203,64 @@ function getComponentPropertySyntax() {
 	}
 }
 //#endregion
-//#region src/utils/hash.ts
-/**
-* Fast string hash (djb2) for deduplication keys.
-* Not cryptographic — just collision-resistant enough for cache keys.
-*/
-function hashString(str) {
-	let hash = 5381;
-	for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i) | 0;
-	return (hash >>> 0).toString(36);
-}
-//#endregion
-//#region src/utils/is-dev-env.ts
-/**
-* Check if we're in a development environment at runtime
-* Uses bracket notation to avoid bundler compilation
-* Also checks for TASTY_DEBUG localStorage setting
-*/
-function isDevEnv() {
-	if (typeof window !== "undefined" && window.localStorage) try {
-		const forceTastyDebug = window.localStorage.getItem("TASTY_DEBUG");
-		if (forceTastyDebug !== null && forceTastyDebug.toLowerCase() === "true") return true;
-	} catch {}
-	if (typeof process === "undefined") return false;
-	return true;
-}
-//#endregion
-//#region src/utils/name-prefix.ts
-/**
-* Name prefix utilities for generated identifiers.
-*
-* Tasty generates three kinds of identifiers from content hashes:
-* - class names (used in DOM `class` attribute)
-* - keyframe names (used in CSS `animation`)
-* - counter-style names (used in CSS `list-style-type`)
-*
-* All three derive from a single configurable prefix so that an app
-* can namespace every identifier under one string. Discriminator letters
-* (`k`, `c`) keep the three kinds visually distinct in devtools — they
-* are not required for correctness (CSS keeps these in separate
-* namespaces), only for readability.
-*
-* The runtime / SSR / RSC paths must agree on the prefix; otherwise the
-* client-side hash for a given style will not match the server-rendered
-* class and hydration breaks. The zero-runtime build path uses a
-* different default (`'ts'`) so its classes can't collide with runtime
-* (`'t'`) classes when both are loaded on the same page.
-*/
-/** Default prefix used by the runtime / SSR / RSC paths. */
-const DEFAULT_NAME_PREFIX = "t";
-/** Default prefix used by the zero-runtime (`tastyStatic`) build path. */
-const DEFAULT_ZERO_NAME_PREFIX = "ts";
-/**
-* Allowed shape: starts with a letter or underscore, then letters/
-* digits/underscore/hyphen. Length capped at 32 to keep generated
-* names sane. Matches the CSS identifier rules for the common case
-* while keeping the surface conservative.
-*/
-const NAME_PREFIX_PATTERN = /^[a-zA-Z_][a-zA-Z0-9_-]{0,31}$/;
-/**
-* Validate a `namePrefix` value.
-* Throws a TypeError with a descriptive message on invalid input so
-* misconfiguration fails loudly at `configure()` time rather than
-* surfacing later as broken hydration.
-*/
-function validateNamePrefix(prefix) {
-	if (typeof prefix !== "string") throw new TypeError(`[Tasty] namePrefix must be a string, got ${typeof prefix}.`);
-	if (!NAME_PREFIX_PATTERN.test(prefix)) throw new TypeError(`[Tasty] namePrefix "${prefix}" is invalid. It must start with a letter (a-z, A-Z) or "_", contain only letters, digits, "_" or "-", and be 1-32 characters long. Examples: "t", "ts", "myapp-", "_foo".`);
-}
-/**
-* Build a class name: `${prefix}${hash}`.
-* The hash is appended verbatim — supply a separator inside the prefix
-* itself if you want one (e.g. `'myapp-'`).
-*/
-function makeClassName(prefix, hash) {
-	return `${prefix}${hash}`;
-}
-/**
-* Build a keyframe name: `${prefix}k${suffix}`.
-* The `k` discriminator keeps keyframe names visually distinct from
-* class names sharing the same prefix. `suffix` is typically a content
-* hash but may be a counter for ad-hoc allocation.
-*/
-function makeKeyframeName(prefix, suffix) {
-	return `${prefix}k${suffix}`;
-}
-/**
-* Build a counter-style name: `${prefix}c${suffix}`.
-* The `c` discriminator keeps counter-style names visually distinct
-* from class names sharing the same prefix.
-*/
-function makeCounterStyleName(prefix, suffix) {
-	return `${prefix}c${suffix}`;
-}
-/** Escape a string for safe inclusion in a regex literal. */
-function escapeRegex(str) {
-	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-/**
-* Regex matching any tasty class for the given prefix.
-* Used by the runtime GC's DOM scan and class-allocation bookkeeping.
-*/
-function tastyClassRegex(prefix) {
-	return new RegExp(`^${escapeRegex(prefix)}[a-z0-9]+$`);
-}
-/**
-* Global regex extracting tasty class names from RSC-inlined CSS.
-* Looks for the doubled-specificity pattern `.cls.cls` that
-* `formatRules()` always emits, which makes extraction reliable.
-*/
-function rscClassRegexGlobal(prefix) {
-	return new RegExp(`\\.(${escapeRegex(prefix)}[a-z0-9]+)\\.\\1`, "g");
+//#region src/parser/const.ts
+const VALUE_KEYWORDS = new Set([
+	"auto",
+	"max-content",
+	"min-content",
+	"fit-content",
+	"stretch",
+	"initial",
+	"inherit",
+	"revert",
+	"unset",
+	"revert-layer"
+]);
+const CSS_WIDE_KEYWORDS = new Set([
+	"initial",
+	"inherit",
+	"revert",
+	"unset",
+	"revert-layer"
+]);
+const COLOR_FUNCS = new Set([
+	"rgb",
+	"rgba",
+	"hsl",
+	"hsla",
+	"hwb",
+	"lab",
+	"lch",
+	"oklab",
+	"oklch",
+	"color",
+	"device-cmyk",
+	"gray",
+	"color-mix",
+	"color-contrast"
+]);
+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})?)$/;
+const RE_RAW_UNIT = /^([+-]?(?:\d*\.\d+|\d+))([a-z%]+)$/;
+const CANONICAL_FUNC_CASE = new Map([
+	["translatex", "translateX"],
+	["translatey", "translateY"],
+	["translatez", "translateZ"],
+	["scalex", "scaleX"],
+	["scaley", "scaleY"],
+	["scalez", "scaleZ"],
+	["rotatex", "rotateX"],
+	["rotatey", "rotateY"],
+	["rotatez", "rotateZ"],
+	["skewx", "skewX"],
+	["skewy", "skewY"]
+]);
+function canonicalFuncName(lowered) {
+	return CANONICAL_FUNC_CASE.get(lowered) ?? lowered;
 }
 //#endregion
 //#region src/parser/types.ts
-let Bucket = /* @__PURE__ */ function(Bucket) {
-	Bucket[Bucket["Color"] = 0] = "Color";
-	Bucket[Bucket["Value"] = 1] = "Value";
-	Bucket[Bucket["Mod"] = 2] = "Mod";
-	return Bucket;
-}({});
 const makeEmptyPart = () => ({
 	mods: [],
 	values: [],
@@ -1737,17 +1351,48 @@ function classify(raw, opts, recurse) {
 		processed: token
 	};
 	if (token.startsWith("$$")) {
-		const name = token.slice(2);
-		if (/^[a-z_][a-z0-9-_]*$/i.test(name)) return {
+		const rest = token.slice(2);
+		const openIdx = rest.indexOf("(");
+		if (openIdx > 0 && rest.endsWith(")")) {
+			const fname = rest.slice(0, openIdx);
+			if (/^[a-z_][a-z0-9-_]*$/i.test(fname)) {
+				const inner = rest.slice(openIdx + 1, -1).trim();
+				const cssName = `--${fname}`;
+				if (opts.functions && cssName in opts.functions) {
+					const groups = inner ? new StyleParser(opts).process(inner).groups : [];
+					const funcResult = opts.functions[cssName](groups);
+					if (funcResult !== "") return classify(funcResult, {
+						...opts,
+						functions: void 0
+					}, recurse);
+				}
+				return {
+					bucket: 1,
+					processed: `--${fname}(${inner ? recurse(inner).output : ""})`
+				};
+			}
+		}
+		if (/^[a-z_][a-z0-9-_]*$/i.test(rest)) return {
 			bucket: 1,
-			processed: `--${name}`
+			processed: `--${rest}`
 		};
 	}
 	if (token.startsWith("##")) {
-		const name = token.slice(2);
-		if (/^[a-z_][a-z0-9-_]*$/i.test(name)) return {
+		const rest = token.slice(2);
+		const openIdx = rest.indexOf("(");
+		if (openIdx > 0 && rest.endsWith(")")) {
+			const fname = rest.slice(0, openIdx);
+			if (/^[a-z_][a-z0-9-_]*$/i.test(fname)) {
+				const inner = rest.slice(openIdx + 1, -1).trim();
+				return {
+					bucket: 1,
+					processed: `--${fname}-color(${inner ? recurse(inner).output : ""})`
+				};
+			}
+		}
+		if (/^[a-z_][a-z0-9-_]*$/i.test(rest)) return {
 			bucket: 1,
-			processed: `--${name}-color`
+			processed: `--${rest}-color`
 		};
 	}
 	if (token === "#current") return {
@@ -1780,13 +1425,16 @@ function classify(raw, opts, recurse) {
 					if (baseToken in predefinedTokens) {
 						const resolvedValue = predefinedTokens[baseToken];
 						if (resolvedValue.startsWith("#")) return classify(`${resolvedValue.toLowerCase()}.${rawAlpha}`, opts, recurse);
-						const funcMatch = resolvedValue.match(/^(rgba?|hsla?|hwb|oklab|oklch|lab|lch|color|okhsl|okhst|device-cmyk|gray|color-mix|color-contrast)\((.+)\)$/i);
+						const funcMatch = resolvedValue.match(/^([a-z][a-z0-9-]*)\((.+)\)$/i);
 						if (funcMatch) {
 							const [, funcName, args] = funcMatch;
+							const lowerFunc = funcName.toLowerCase();
+							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);
 							let alpha;
 							if (rawAlpha.startsWith("$")) alpha = `var(--${rawAlpha.slice(1)})`;
 							else alpha = rawAlpha === "0" ? "0" : `.${rawAlpha}`;
-							const normalizedFunc = funcName.replace(/a$/i, "").toLowerCase();
 							const normalizeArgs = (a) => {
 								let result = "";
 								let depth = 0;
@@ -1833,7 +1481,7 @@ function classify(raw, opts, recurse) {
 							}
 							const hasLegacyAlpha = !hasModernAlpha && /a$/i.test(funcName) && topLevelCommaCount === 3;
 							const constructed = `${normalizedFunc}(${hasModernAlpha || hasLegacyAlpha ? normalizeArgs(hasModernAlpha ? args.slice(0, slashIdx).trim() : args.slice(0, lastTopLevelComma).trim()) : normalizeArgs(args)} / ${alpha})`;
-							if (!COLOR_FUNCS.has(normalizedFunc) && opts.funcs && normalizedFunc in opts.funcs) return classify(constructed, opts, recurse);
+							if (!COLOR_FUNCS.has(normalizedFunc) && opts.functions && normalizedFunc in opts.functions) return classify(constructed, opts, recurse);
 							return {
 								bucket: 0,
 								processed: constructed
@@ -1887,644 +1535,1616 @@ function classify(raw, opts, recurse) {
 			processed: `var(--${name}-color)`
 		};
 	}
-	const openIdx = token.indexOf("(");
-	if (openIdx > 0 && token.endsWith(")")) {
-		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, ",");
-			return {
-				bucket: 0,
-				processed: `${canonicalFuncName(fname)}(${argProcessed})`
-			};
-		}
-		if (opts.funcs && fname in opts.funcs) {
-			const tmp = new StyleParser(opts).process(inner);
-			return classify(opts.funcs[fname](tmp.groups), {
-				...opts,
-				funcs: void 0
-			}, recurse);
-		}
-		const argProcessed = recurse(inner).output;
-		return {
-			bucket: 1,
-			processed: `${canonicalFuncName(fname)}(${argProcessed})`
-		};
+	const openIdx = token.indexOf("(");
+	if (openIdx > 0 && token.endsWith(")")) {
+		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, ",");
+			return {
+				bucket: 0,
+				processed: `${canonicalFuncName(fname)}(${argProcessed})`
+			};
+		}
+		if (opts.functions && fname in opts.functions) {
+			const tmp = new StyleParser(opts).process(inner);
+			return classify(opts.functions[fname](tmp.groups), {
+				...opts,
+				functions: void 0
+			}, recurse);
+		}
+		const argProcessed = recurse(inner).output;
+		return {
+			bucket: 1,
+			processed: `${canonicalFuncName(fname)}(${argProcessed})`
+		};
+	}
+	if (token.startsWith("(") && token.endsWith(")")) {
+		const colorMatch = token.slice(1, -1).match(/^#([a-z0-9-]+)\s*,\s*(.*)$/i);
+		if (colorMatch) {
+			const [, name, fallback] = colorMatch;
+			return {
+				bucket: 0,
+				processed: `var(--${name}-color, ${recurse(fallback).output})`
+			};
+		}
+	}
+	if (token.startsWith("(") && token.endsWith(")")) {
+		const match = token.slice(1, -1).match(/^\$([a-z_][a-z0-9-_]*)\s*,\s*(.*)$/);
+		if (match) {
+			const [, name, fallback] = match;
+			const processedFallback = recurse(fallback).output;
+			return {
+				bucket: name.endsWith("-color") ? 0 : 1,
+				processed: `var(--${name}, ${processedFallback})`
+			};
+		}
+	}
+	if (token[0] === "(" && token[token.length - 1] === ")") return {
+		bucket: 1,
+		processed: `calc(${recurse(token.slice(1, -1)).output})`
+	};
+	const um = token.match(RE_UNIT_NUM);
+	if (um) {
+		const unit = um[1];
+		const numericPart = parseFloat(token.slice(0, -unit.length));
+		const handler = opts.units && opts.units[unit];
+		if (handler) if (typeof handler === "string") {
+			const rawMatch = handler.match(RE_RAW_UNIT);
+			if (rawMatch) {
+				const [, baseNum, cssUnit] = rawMatch;
+				return {
+					bucket: 1,
+					processed: resolveUntilStable(`${numericPart * parseFloat(baseNum)}${cssUnit}`, opts, recurse)
+				};
+			}
+			const base = handler;
+			if (numericPart === 1) return {
+				bucket: 1,
+				processed: base
+			};
+			return {
+				bucket: 1,
+				processed: `calc(${numericPart} * ${base})`
+			};
+		} else return {
+			bucket: 1,
+			processed: handler(numericPart)
+		};
+	}
+	if (/^[+-]?(?:\d*\.\d+|\d+)[a-z%]+$/.test(token)) return {
+		bucket: 1,
+		processed: token
+	};
+	if (RE_NUMBER.test(token)) return {
+		bucket: 1,
+		processed: token
+	};
+	if (VALUE_KEYWORDS.has(token)) return {
+		bucket: 1,
+		processed: token
+	};
+	if (token === "transparent" || token === "currentcolor") return {
+		bucket: 0,
+		processed: token
+	};
+	return {
+		bucket: 2,
+		processed: token
+	};
+}
+//#endregion
+//#region src/parser/tokenizer.ts
+const isWhitespace = (ch) => ch === " " || ch === "\n" || ch === "	" || ch === "\r" || ch === "\f";
+function scan(src, cb) {
+	let depth = 0;
+	let inUrl = false;
+	let inQuote = 0;
+	let start = 0;
+	let i = 0;
+	let pendingSlash = false;
+	const flush = (isComma, isSlash) => {
+		const actualSlash = isSlash || pendingSlash;
+		pendingSlash = false;
+		if (start < i) {
+			const prevChar = start > 0 ? src[start - 1] : null;
+			cb(src.slice(start, i), isComma, actualSlash, prevChar);
+		} else if (isComma) cb("", true, false, null);
+		else if (actualSlash) cb("", false, true, null);
+		start = i + 1;
+	};
+	for (; i < src.length; i++) {
+		const ch = src[i];
+		if (inQuote) {
+			if (ch === inQuote && src[i - 1] !== "\\") inQuote = 0;
+			continue;
+		}
+		if (ch === "\"" || ch === "'") {
+			inQuote = ch;
+			continue;
+		}
+		if (ch === "(") {
+			if (!depth) {
+				if (src.slice(Math.max(0, i - 3), i + 1) === "url(") inUrl = true;
+			}
+			depth++;
+			continue;
+		}
+		if (ch === ")") {
+			depth = Math.max(0, depth - 1);
+			if (inUrl && depth === 0) inUrl = false;
+			continue;
+		}
+		if (inUrl) continue;
+		if (!depth) {
+			if (ch === ",") {
+				flush(true, false);
+				continue;
+			}
+			if (ch === "/") {
+				const prevIsWhitespace = isWhitespace(src[i - 1]);
+				const nextIsWhitespace = isWhitespace(src[i + 1]);
+				if (prevIsWhitespace && nextIsWhitespace) {
+					pendingSlash = true;
+					start = i + 1;
+					continue;
+				}
+				continue;
+			}
+			if (isWhitespace(ch)) {
+				flush(false, false);
+				continue;
+			}
+		}
+	}
+	flush(false, false);
+}
+//#endregion
+//#region src/parser/parser.ts
+var StyleParser = class {
+	opts;
+	cache;
+	constructor(opts = {}) {
+		this.opts = opts;
+		this.cache = new Lru(this.opts.cacheSize ?? 1e3);
+	}
+	process(src) {
+		const key = String(src);
+		const hit = this.cache.get(key);
+		if (hit) return hit;
+		const stripped = src.replace(/\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\//g, "").toLowerCase();
+		const groups = [];
+		let currentGroup = makeEmptyDetails();
+		let currentPart = makeEmptyPart();
+		let parts = [];
+		const pushToken = (bucket, processed) => {
+			if (!processed) return;
+			const mergeIntoPrevUrl = () => {
+				const lastIdx = currentPart.values.length - 1;
+				currentPart.values[lastIdx] += ` ${processed}`;
+				const lastAllIdx = currentPart.all.length - 1;
+				currentPart.all[lastAllIdx] += ` ${processed}`;
+			};
+			if (currentPart.values.length > 0 && currentPart.values[currentPart.values.length - 1].startsWith("url(")) {
+				mergeIntoPrevUrl();
+				return;
+			}
+			switch (bucket) {
+				case 0:
+					currentPart.colors.push(processed);
+					break;
+				case 1:
+					currentPart.values.push(processed);
+					break;
+				case 2:
+					currentPart.mods.push(processed);
+					break;
+			}
+			currentPart.all.push(processed);
+		};
+		const endPart = () => {
+			if (currentPart.all.length > 0) {
+				finalizePart(currentPart);
+				parts.push(currentPart);
+			}
+			currentPart = makeEmptyPart();
+		};
+		const endGroup = () => {
+			endPart();
+			if (parts.length === 0) {
+				parts.push(makeEmptyPart());
+				finalizePart(parts[0]);
+			}
+			finalizeGroup(currentGroup, parts);
+			groups.push(currentGroup);
+			currentGroup = makeEmptyDetails();
+			parts = [];
+			currentPart = makeEmptyPart();
+		};
+		scan(stripped, (tok, isComma, isSlash, _prevChar) => {
+			if (tok) {
+				if (currentGroup.input) currentGroup.input += ` ${tok}`;
+				else currentGroup.input = tok;
+				const { bucket, processed } = classify(tok, this.opts, (sub) => this.process(sub));
+				pushToken(bucket, processed);
+			}
+			if (isSlash) endPart();
+			if (isComma) endGroup();
+		});
+		if (currentPart.all.length || parts.length || !groups.length) endGroup();
+		const result = {
+			output: groups.map((g) => g.output).join(", "),
+			groups
+		};
+		Object.freeze(result);
+		this.cache.set(key, result);
+		return result;
+	}
+	setFunctions(functions) {
+		this.opts.functions = functions;
+		this.cache.clear();
 	}
-	if (token.startsWith("(") && token.endsWith(")")) {
-		const colorMatch = token.slice(1, -1).match(/^#([a-z0-9-]+)\s*,\s*(.*)$/i);
-		if (colorMatch) {
-			const [, name, fallback] = colorMatch;
-			return {
-				bucket: 0,
-				processed: `var(--${name}-color, ${recurse(fallback).output})`
-			};
+	setUnits(units) {
+		this.opts.units = units;
+		this.cache.clear();
+	}
+	updateOptions(patch) {
+		Object.assign(this.opts, patch);
+		if (patch.cacheSize) this.cache = new Lru(patch.cacheSize);
+		else this.cache.clear();
+	}
+	/**
+	* Clear the parser cache.
+	* Call this when external state that affects parsing results has changed
+	* (e.g., predefined tokens).
+	*/
+	clearCache() {
+		this.cache.clear();
+	}
+	/**
+	* Get the current units configuration.
+	*/
+	getUnits() {
+		return this.opts.units;
+	}
+};
+//#endregion
+//#region src/utils/is-dev-env.ts
+/**
+* Check if we're in a development environment at runtime
+* Uses bracket notation to avoid bundler compilation
+* Also checks for TASTY_DEBUG localStorage setting
+*/
+function isDevEnv() {
+	if (typeof window !== "undefined" && window.localStorage) try {
+		const forceTastyDebug = window.localStorage.getItem("TASTY_DEBUG");
+		if (forceTastyDebug !== null && forceTastyDebug.toLowerCase() === "true") return true;
+	} catch {}
+	if (typeof process === "undefined") return false;
+	return true;
+}
+//#endregion
+//#region src/plugins/color-func.ts
+const clamp = (value, min, max) => Math.max(Math.min(value, max), min);
+/**
+* Parse an angle value with optional unit.
+* Supports: deg, turn, rad, or unitless (treated as degrees).
+*/
+const parseAngle = (value) => {
+	const match = value.match(/^([+-]?\d*\.?\d+)(deg|turn|rad)?$/);
+	if (!match) return 0;
+	const num = parseFloat(match[1]);
+	switch (match[2]) {
+		case "turn": return num * 360;
+		case "rad": return num * 180 / Math.PI;
+		default: return num;
+	}
+};
+/**
+* Parse a percentage value (e.g., "50%") to a 0-1 range.
+*/
+const parsePercentage = (value) => {
+	const match = value.match(/^([+-]?\d*\.?\d+)%?$/);
+	if (!match) return 0;
+	const num = parseFloat(match[1]);
+	return value.includes("%") ? num / 100 : num;
+};
+/**
+* Creates a color function handler for the tasty parser.
+*
+* A color function is a custom `functions` entry that converts its arguments
+* to an `rgb(...)` string (an already-supported color), so it needs no special
+* core integration — registering it as a parse function is enough.
+*
+* @param name The name of the color function (e.g., 'okhsl', 'okhst')
+* @param convert Converts the parsed first three channel values (after angle/
+*   percent normalization) to sRGB `[r, g, b]` in the 0-1 range
+* @param label Optional diagnostic label shown in dev warnings when the wrong
+*   number of arguments is supplied (e.g., 'H S L'). Has no effect on parsing
+*   or output.
+*/
+function createColorFunc(name, convert, label) {
+	const conversionCache = new Lru(500);
+	const expected = label ? ` (${label})` : "";
+	return (groups) => {
+		if (groups.length === 0 || groups[0].all.length < 3) {
+			if (isDevEnv()) console.warn(`[Tasty] ${name}(): expected 3 values${expected}, got:`, groups);
+			return "rgb(0% 0% 0%)";
 		}
+		const group = groups[0];
+		const tokens = group.all;
+		const alpha = group.parts.length > 1 && group.parts[1].all.length > 0 ? group.parts[1].output : void 0;
+		const cacheKey = tokens.slice(0, 3).join(" ") + (alpha ? ` / ${alpha}` : "");
+		const cached = conversionCache.get(cacheKey);
+		if (cached) return cached;
+		const h = parseAngle(tokens[0]);
+		const c2 = parsePercentage(tokens[1]);
+		const c3 = parsePercentage(tokens[2]);
+		const [r, g, b] = convert(h, clamp(c2, 0, 1), clamp(c3, 0, 1));
+		const format = (n) => {
+			const pct = n * 100;
+			return parseFloat(pct.toFixed(1)).toString() + "%";
+		};
+		const result = alpha ? `rgb(${format(r)} ${format(g)} ${format(b)} / ${alpha})` : `rgb(${format(r)} ${format(g)} ${format(b)})`;
+		conversionCache.set(cacheKey, result);
+		return result;
+	};
+}
+//#endregion
+//#region src/plugins/okhsl-plugin.ts
+/**
+* OKHSL Plugin for Tasty
+*
+* Converts OKHSL color syntax to RGB notation.
+* Supports angle units: deg, turn, rad, or unitless (degrees).
+*
+* Examples:
+*   okhsl(240.5 50% 50%)
+*   okhsl(240.5deg 50% 50%)
+*   okhsl(0.25turn 50% 50%)
+*   okhsl(1.57rad 50% 50%)
+*/
+/**
+* The okhsl function handler for tasty parser.
+* Receives parsed style groups and returns an RGB color string.
+*/
+const okhslFunction = createColorFunc("okhsl", okhslToSrgb, "H S L");
+/**
+* OKHSL Plugin for Tasty.
+*
+* Adds support for the `okhsl()` color function in tasty styles.
+*
+* @example
+* ```ts
+* import { configure } from '@tenphi/tasty';
+* import { okhslPlugin } from '@tenphi/tasty';
+*
+* configure({
+*   plugins: [okhslPlugin()],
+* });
+*
+* // Now you can use okhsl in styles:
+* const Box = tasty({
+*   styles: {
+*     fill: 'okhsl(240 50% 50%)',
+*   },
+* });
+* ```
+*/
+const okhslPlugin = () => ({
+	name: "okhsl",
+	functions: { okhsl: okhslFunction }
+});
+//#endregion
+//#region src/plugins/okhst-plugin.ts
+/**
+* OKHST Plugin for Tasty
+*
+* Converts OKHST color syntax to RGB notation.
+* OKHST is OKHSL with the lightness axis replaced by a contrast-uniform tone axis.
+* Supports angle units: deg, turn, rad, or unitless (degrees).
+*
+* Examples:
+*   okhst(240.5 50% 50%)
+*   okhst(240.5deg 50% 50%)
+*   okhst(0.25turn 50% 50%)
+*   okhst(1.57rad 50% 50%)
+*/
+/**
+* The okhst function handler for tasty parser.
+* Receives parsed style groups and returns an RGB color string.
+*/
+const okhstFunction = createColorFunc("okhst", okhstToSrgb, "H S T");
+/**
+* OKHST Plugin for Tasty.
+*
+* Adds support for the `okhst()` color function in tasty styles.
+*
+* @example
+* ```ts
+* import { configure } from '@tenphi/tasty';
+* import { okhstPlugin } from '@tenphi/tasty';
+*
+* configure({
+*   plugins: [okhstPlugin()],
+* });
+*
+* // Now you can use okhst in styles:
+* const Box = tasty({
+*   styles: {
+*     fill: 'okhst(240 50% 50%)',
+*   },
+* });
+* ```
+*/
+const okhstPlugin = () => ({
+	name: "okhst",
+	functions: { okhst: okhstFunction }
+});
+//#endregion
+//#region src/plugins/defaults.ts
+/**
+* Register the default color functions (okhsl, okhst) with the global parser.
+*
+* They are ordinary `functions` entries — the same mechanism any third-party
+* color plugin uses — so they need no special-casing in core.
+*
+* Idempotent and safe to call from the lazy parser initializer so that
+* zero-config usage keeps working. `resetGlobalParseFunctions()` re-invokes it
+* after clearing user-registered functions so the defaults survive a config reset.
+*
+* @internal
+*/
+function registerDefaultFunctions() {
+	customFunction("okhsl", okhslFunction);
+	customFunction("okhst", okhstFunction);
+}
+//#endregion
+//#region src/utils/styles.ts
+/**
+* Normalize a color token value.
+* - Boolean `true` is converted to `'transparent'`
+* - Boolean `false` returns `null` (signals the token should be skipped)
+* - Other values are returned as-is
+*
+* @param value - The raw token value
+* @returns Normalized value or null if the token should be skipped
+*/
+function normalizeColorTokenValue(value) {
+	if (value === true) return "transparent";
+	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 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/;
+function isSimpleColorFast(val) {
+	switch (val.charCodeAt(0)) {
+		case 35: return RE_HEX_COLOR.test(val);
+		case 114: return val.charCodeAt(1) === 103 && val.charCodeAt(2) === 98;
+		case 104: return val.charCodeAt(1) === 115 && val.charCodeAt(2) === 108;
+		case 108: return val.charCodeAt(1) === 99 && val.charCodeAt(2) === 104;
+		case 111: return val.startsWith("oklch(");
+		case 118: return RE_VAR_COLOR.test(val);
+		case 99: return val === "currentColor" || val === "currentcolor";
+		case 116: return val === "transparent";
+		default: return getNamedColorHex().has(val.toLowerCase());
 	}
-	if (token.startsWith("(") && token.endsWith(")")) {
-		const match = token.slice(1, -1).match(/^\$([a-z_][a-z0-9-_]*)\s*,\s*(.*)$/);
-		if (match) {
-			const [, name, fallback] = match;
-			const processedFallback = recurse(fallback).output;
-			return {
-				bucket: name.endsWith("-color") ? 0 : 1,
-				processed: `var(--${name}, ${processedFallback})`
-			};
-		}
+}
+let colorWarningCount = 0;
+const MAX_COLOR_WARNINGS = 10;
+const CUSTOM_UNITS = {
+	r: "6px",
+	cr: "10px",
+	bw: "1px",
+	ow: "3px",
+	x: "8px",
+	sf: function sf(num) {
+		return `minmax(0, ${num}fr)`;
 	}
-	if (token[0] === "(" && token[token.length - 1] === ")") return {
-		bucket: 1,
-		processed: `calc(${recurse(token.slice(1, -1)).output})`
-	};
-	const um = token.match(RE_UNIT_NUM);
-	if (um) {
-		const unit = um[1];
-		const numericPart = parseFloat(token.slice(0, -unit.length));
-		const handler = opts.units && opts.units[unit];
-		if (handler) if (typeof handler === "string") {
-			const rawMatch = handler.match(RE_RAW_UNIT);
-			if (rawMatch) {
-				const [, baseNum, cssUnit] = rawMatch;
-				return {
-					bucket: 1,
-					processed: resolveUntilStable(`${numericPart * parseFloat(baseNum)}${cssUnit}`, opts, recurse)
-				};
-			}
-			const base = handler;
-			if (numericPart === 1) return {
-				bucket: 1,
-				processed: base
-			};
-			return {
-				bucket: 1,
-				processed: `calc(${numericPart} * ${base})`
-			};
-		} else return {
-			bucket: 1,
-			processed: handler(numericPart)
-		};
+};
+const DIRECTIONS = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+let __tastyParser = null;
+function getOrCreateParser() {
+	if (!__tastyParser) {
+		__tastyParser = new StyleParser({ units: CUSTOM_UNITS });
+		__tastyParser.setFunctions(__tastyParseFunctions);
+		registerDefaultFunctions();
 	}
-	if (/^[+-]?(?:\d*\.\d+|\d+)[a-z%]+$/.test(token)) return {
-		bucket: 1,
-		processed: token
-	};
-	if (RE_NUMBER.test(token)) return {
-		bucket: 1,
-		processed: token
-	};
-	if (VALUE_KEYWORDS.has(token)) return {
-		bucket: 1,
-		processed: token
-	};
-	if (token === "transparent" || token === "currentcolor") return {
-		bucket: 0,
-		processed: token
-	};
-	return {
-		bucket: 2,
-		processed: token
-	};
+	return __tastyParser;
 }
-//#endregion
-//#region src/parser/tokenizer.ts
-const isWhitespace = (ch) => ch === " " || ch === "\n" || ch === "	" || ch === "\r" || ch === "\f";
-function scan(src, cb) {
-	let depth = 0;
-	let inUrl = false;
-	let inQuote = 0;
-	let start = 0;
-	let i = 0;
-	let pendingSlash = false;
-	const flush = (isComma, isSlash) => {
-		const actualSlash = isSlash || pendingSlash;
-		pendingSlash = false;
-		if (start < i) {
-			const prevChar = start > 0 ? src[start - 1] : null;
-			cb(src.slice(start, i), isComma, actualSlash, prevChar);
-		} else if (isComma) cb("", true, false, null);
-		else if (actualSlash) cb("", false, true, null);
-		start = i + 1;
-	};
-	for (; i < src.length; i++) {
-		const ch = src[i];
-		if (inQuote) {
-			if (ch === inQuote && src[i - 1] !== "\\") inQuote = 0;
-			continue;
-		}
-		if (ch === "\"" || ch === "'") {
-			inQuote = ch;
+const __tastyParseFunctions = {};
+/**
+* Register a parse-time function.
+*
+* @internal Use `configure({ functions })`. This bypasses the configuration lock
+* and is kept only for the lazy default-function bootstrap and the `@function`
+* polyfill, both of which must register after `configure()` has run.
+*/
+function customFunction(name, fn) {
+	__tastyParseFunctions[name] = fn;
+	getOrCreateParser().setFunctions(__tastyParseFunctions);
+}
+/**
+* Reset parse functions back to the built-in set (okhsl/okhst).
+*
+* @internal Called by `resetConfig()`.
+*/
+function resetGlobalParseFunctions() {
+	for (const key of Object.keys(__tastyParseFunctions)) delete __tastyParseFunctions[key];
+	registerDefaultFunctions();
+	getOrCreateParser().setFunctions(__tastyParseFunctions);
+}
+/**
+* Get the global StyleParser instance.
+* Used by configure() to apply parser configuration.
+*/
+function getGlobalParser() {
+	return getOrCreateParser();
+}
+/**
+* Get the current custom functions registry.
+* Used by configure() to merge with new functions.
+*/
+/**
+* The live parse-function registry.
+*
+* @internal Returns the mutable internal map; writing to it bypasses the
+* parser's cache invalidation, so the write silently does not take effect.
+* Read-only, internal use.
+*/
+function getGlobalParseFunctions() {
+	return __tastyParseFunctions;
+}
+/**
+* Storage for predefined tokens that are replaced during style parsing.
+* Keys are token names (with $ or # prefix), values are pre-processed CSS values.
+*/
+let __globalPredefinedTokens = null;
+/**
+* Set global predefined tokens.
+* Called from configure() after processing token values.
+* Merges with existing tokens (new tokens override existing ones with same key).
+* Keys are normalized to lowercase (parser lowercases input before classification).
+* @internal
+*/
+function setGlobalPredefinedTokens(tokens) {
+	const normalizedTokens = {};
+	for (const [key, value] of Object.entries(tokens)) {
+		const lowerKey = key.toLowerCase();
+		const lowerValue = value.toLowerCase();
+		if (lowerKey.startsWith("#") && lowerValue === "#current") {
+			console.warn(`[Tasty] Using #current to define color token "${key}" is not supported. The #current token represents currentcolor which cannot be used as a base for other tokens.`);
 			continue;
 		}
-		if (ch === "(") {
-			if (!depth) {
-				if (src.slice(Math.max(0, i - 3), i + 1) === "url(") inUrl = true;
+		normalizedTokens[lowerKey] = value;
+	}
+	__globalPredefinedTokens = __globalPredefinedTokens ? {
+		...__globalPredefinedTokens,
+		...normalizedTokens
+	} : normalizedTokens;
+	getOrCreateParser().clearCache();
+}
+/**
+* Get the current global predefined tokens.
+* Returns null if no tokens are configured.
+*/
+function getGlobalPredefinedTokens() {
+	return __globalPredefinedTokens;
+}
+/**
+* Reset global predefined tokens.
+* Used for testing.
+* @internal
+*/
+function resetGlobalPredefinedTokens() {
+	__globalPredefinedTokens = null;
+	getOrCreateParser().clearCache();
+}
+/**
+*
+* @param {String} value
+* @param {Number} mode
+* @returns {Object<String,String|Array>}
+*/
+function parseStyle(value) {
+	let str;
+	if (typeof value === "string") str = value;
+	else if (typeof value === "number") str = String(value);
+	else str = "";
+	return getOrCreateParser().process(str);
+}
+/**
+* Parse color. Find it value, name and opacity.
+* Optimized to avoid heavy parseStyle calls for simple color patterns.
+*/
+function parseColor(val, ignoreError = false) {
+	if (typeof val !== "string") val = String(val ?? "");
+	val = val.trim();
+	if (!val) return {};
+	const isSimpleColor = isSimpleColorFast(val);
+	let firstColor;
+	if (isSimpleColor) firstColor = val;
+	else {
+		const extractedColor = parseStyle(val).groups.find((g) => g.colors.length)?.colors[0];
+		if (!extractedColor) {
+			if (!ignoreError && colorWarningCount < MAX_COLOR_WARNINGS) {
+				console.warn("[Tasty] unable to parse color:", val);
+				colorWarningCount++;
+				if (colorWarningCount === MAX_COLOR_WARNINGS) console.warn("[Tasty] color parsing warnings will be suppressed from now on");
 			}
-			depth++;
-			continue;
+			return {};
 		}
-		if (ch === ")") {
-			depth = Math.max(0, depth - 1);
-			if (inUrl && depth === 0) inUrl = false;
-			continue;
+		firstColor = extractedColor;
+	}
+	let nameMatch = firstColor.match(COLOR_VAR_PATTERN);
+	if (!nameMatch) nameMatch = firstColor.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 (alphaMatch) {
+			const v = parseFloat(alphaMatch[1]);
+			if (!isNaN(v)) opacity = v * 100;
 		}
-		if (inUrl) continue;
-		if (!depth) {
-			if (ch === ",") {
-				flush(true, false);
-				continue;
-			}
-			if (ch === "/") {
-				const prevIsWhitespace = isWhitespace(src[i - 1]);
-				const nextIsWhitespace = isWhitespace(src[i + 1]);
-				if (prevIsWhitespace && nextIsWhitespace) {
-					pendingSlash = true;
-					start = i + 1;
-					continue;
+	}
+	return {
+		color: firstColor,
+		name: nameMatch ? nameMatch[1] : void 0,
+		opacity
+	};
+}
+function filterMods(mods, allowedMods) {
+	return mods.filter((mod) => allowedMods.includes(mod));
+}
+const _innerCache = /* @__PURE__ */ new WeakMap();
+const _topLevelCache = /* @__PURE__ */ new WeakMap();
+function stringifyStyles(styles) {
+	if (styles == null || typeof styles !== "object") return "";
+	const cached = _topLevelCache.get(styles);
+	if (cached !== void 0) return cached;
+	const obj = styles;
+	const keys = Object.keys(obj).sort();
+	const parts = [];
+	for (const k of keys) {
+		const v = obj[k];
+		if (v === void 0 || typeof v === "function" || typeof v === "symbol") continue;
+		const c0 = k.charCodeAt(0);
+		const needsInnerSort = (c0 >= 65 && c0 <= 90 || c0 === 38) && v && typeof v === "object" && !Array.isArray(v);
+		let sv;
+		if (needsInnerSort) {
+			sv = _innerCache.get(v);
+			if (sv === void 0) {
+				const innerObj = v;
+				const innerKeys = Object.keys(innerObj).sort();
+				const innerParts = [];
+				for (const ik of innerKeys) {
+					const ivs = JSON.stringify(innerObj[ik]);
+					if (ivs !== void 0) innerParts.push(JSON.stringify(ik) + ":" + ivs);
 				}
-				continue;
-			}
-			if (isWhitespace(ch)) {
-				flush(false, false);
-				continue;
+				sv = "{" + innerParts.join(",") + "}";
+				_innerCache.set(v, sv);
 			}
-		}
+		} else sv = JSON.stringify(v);
+		parts.push(JSON.stringify(k) + ":" + sv);
 	}
-	flush(false, false);
+	const result = "{" + parts.join(",") + "}";
+	_topLevelCache.set(styles, result);
+	return result;
 }
 //#endregion
-//#region src/parser/parser.ts
-var StyleParser = class {
-	opts;
-	cache;
-	constructor(opts = {}) {
-		this.opts = opts;
-		this.cache = new Lru(this.opts.cacheSize ?? 1e3);
+//#region src/functions/index.ts
+const FUNCTION_KEY = "@function";
+/** Descriptor keys that are not local-variable declarations. */
+const RESERVED_KEYS = new Set([
+	"args",
+	"returns",
+	"result"
+]);
+/**
+* Check if styles object has a local @function definition.
+*/
+function hasLocalFunctions(styles) {
+	return FUNCTION_KEY in styles;
+}
+/**
+* Extract local @function definitions from a styles object.
+* Returns null if none (fast path).
+*/
+function extractLocalFunctions(styles) {
+	const functions = styles[FUNCTION_KEY];
+	if (!functions || typeof functions !== "object") return null;
+	return functions;
+}
+/**
+* Parse a function name token into its CSS custom name.
+* Accepts `$$name`, `$name`, `--name`, or bare `name` → `--name`.
+*/
+function parseFunctionName(token) {
+	if (token.startsWith("$$")) return `--${token.slice(2)}`;
+	if (token.startsWith("$")) return `--${token.slice(1)}`;
+	if (token.startsWith("--")) return token;
+	return `--${token}`;
+}
+/**
+* Parse a parameter / local-variable name token into its CSS custom name.
+* Accepts `$name`, `--name`, or bare `name` → `--name`.
+*/
+function parseParamName(token) {
+	if (token.startsWith("$")) return `--${token.slice(1)}`;
+	if (token.startsWith("--")) return token;
+	return `--${token}`;
+}
+/**
+* Format a single parameter (`--name <type>: default`).
+*/
+function formatParameter(token, param) {
+	const name = parseParamName(token);
+	if (param === true) return name;
+	if (typeof param === "string") return param ? `${name} ${param}` : name;
+	let out = name;
+	if (param.syntax) out += ` ${param.syntax}`;
+	if (param.default !== void 0) out += `: ${parseStyle(param.default).output}`;
+	return out;
+}
+/**
+* Format the function prelude: `@function --name(params) returns <type>`.
+*/
+function formatFunctionPrelude(name, args, returns) {
+	const cssName = parseFunctionName(name);
+	let params = "";
+	if (Array.isArray(args)) params = args.map((token) => formatParameter(token, true)).join(", ");
+	else if (args) params = Object.entries(args).map(([token, param]) => formatParameter(token, param)).join(", ");
+	const returnsPart = returns ? ` returns ${returns}` : "";
+	return `@function ${cssName}(${params})${returnsPart}`;
+}
+/**
+* Format the inner declarations of a @function rule (local variables + result).
+*/
+function formatFunctionDeclarations(def) {
+	const parts = [];
+	for (const key of Object.keys(def)) {
+		if (RESERVED_KEYS.has(key) || !key.startsWith("$")) continue;
+		const value = def[key];
+		if (value === void 0) continue;
+		parts.push(`${parseParamName(key)}: ${parseStyle(value).output};`);
 	}
-	process(src) {
-		const key = String(src);
-		const hit = this.cache.get(key);
-		if (hit) return hit;
-		const stripped = src.replace(/\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\//g, "").toLowerCase();
-		const groups = [];
-		let currentGroup = makeEmptyDetails();
-		let currentPart = makeEmptyPart();
-		let parts = [];
-		const pushToken = (bucket, processed) => {
-			if (!processed) return;
-			const mergeIntoPrevUrl = () => {
-				const lastIdx = currentPart.values.length - 1;
-				currentPart.values[lastIdx] += ` ${processed}`;
-				const lastAllIdx = currentPart.all.length - 1;
-				currentPart.all[lastAllIdx] += ` ${processed}`;
-			};
-			if (currentPart.values.length > 0 && currentPart.values[currentPart.values.length - 1].startsWith("url(")) {
-				mergeIntoPrevUrl();
-				return;
-			}
-			switch (bucket) {
-				case 0:
-					currentPart.colors.push(processed);
-					break;
-				case 1:
-					currentPart.values.push(processed);
-					break;
-				case 2:
-					currentPart.mods.push(processed);
-					break;
-			}
-			currentPart.all.push(processed);
-		};
-		const endPart = () => {
-			if (currentPart.all.length > 0) {
-				finalizePart(currentPart);
-				parts.push(currentPart);
-			}
-			currentPart = makeEmptyPart();
-		};
-		const endGroup = () => {
-			endPart();
-			if (parts.length === 0) {
-				parts.push(makeEmptyPart());
-				finalizePart(parts[0]);
+	parts.push(`result: ${parseStyle(def.result).output};`);
+	return parts.join(" ");
+}
+/**
+* Format a complete @function rule as CSS.
+*/
+function formatFunctionRule(name, def) {
+	return `${formatFunctionPrelude(name, def.args, def.returns)} { ${formatFunctionDeclarations(def)} }`;
+}
+/** A key is a CSS-function key when it carries the `$`/`--` prefix. */
+function isCssFunctionKey(key) {
+	return key.startsWith("$") || key.startsWith("--");
+}
+/** Discriminate a unified `functions` entry by its value type. */
+function isParseFunction(value) {
+	return typeof value === "function";
+}
+/**
+* Split the unified `functions` map into the two internal registries:
+* - `parseFuncs`: JS parse functions (bare keys).
+* - `functionDefs`: declarative CSS `@function` definitions (`$$` keys).
+*
+* Entries whose key prefix does not match the value type are reported via
+* `onMismatch` and skipped.
+*/
+function splitFunctions(map, onMismatch) {
+	const parseFuncs = {};
+	const functionDefs = {};
+	for (const [key, value] of Object.entries(map)) {
+		const cssKey = isCssFunctionKey(key);
+		if (isParseFunction(value)) {
+			if (cssKey) {
+				onMismatch?.(key, "expected-definition");
+				continue;
 			}
-			finalizeGroup(currentGroup, parts);
-			groups.push(currentGroup);
-			currentGroup = makeEmptyDetails();
-			parts = [];
-			currentPart = makeEmptyPart();
-		};
-		scan(stripped, (tok, isComma, isSlash, _prevChar) => {
-			if (tok) {
-				if (currentGroup.input) currentGroup.input += ` ${tok}`;
-				else currentGroup.input = tok;
-				const { bucket, processed } = classify(tok, this.opts, (sub) => this.process(sub));
-				pushToken(bucket, processed);
+			parseFuncs[key] = value;
+		} else {
+			if (!cssKey) {
+				onMismatch?.(key, "expected-parse-function");
+				continue;
 			}
-			if (isSlash) endPart();
-			if (isComma) endGroup();
-		});
-		if (currentPart.all.length || parts.length || !groups.length) endGroup();
-		const result = {
-			output: groups.map((g) => g.output).join(", "),
-			groups
-		};
-		Object.freeze(result);
-		this.cache.set(key, result);
-		return result;
-	}
-	setFuncs(funcs) {
-		this.opts.funcs = funcs;
-		this.cache.clear();
-	}
-	setUnits(units) {
-		this.opts.units = units;
-		this.cache.clear();
-	}
-	updateOptions(patch) {
-		Object.assign(this.opts, patch);
-		if (patch.cacheSize) this.cache = new Lru(patch.cacheSize);
-		else this.cache.clear();
+			functionDefs[key] = value;
+		}
 	}
-	/**
-	* Clear the parser cache.
-	* Call this when external state that affects parsing results has changed
-	* (e.g., predefined tokens).
-	*/
-	clearCache() {
-		this.cache.clear();
+	return {
+		parseFuncs,
+		functionDefs
+	};
+}
+function escapeRegExp(str) {
+	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+const paramBareName = (token) => parseParamName(token).slice(2);
+/**
+* Rewrite `var(--name)` references for declared parameter/local names to a
+* collision-resistant, function-scoped prefix. This guarantees that later
+* value substitution only ever targets the function's own variables and can
+* never accidentally match a real element-level `var(--name)` introduced by an
+* argument value (e.g. the `--gap` used by Tasty units). Blanket prefix — no
+* exact-collision detection.
+*/
+function prefixDeclaredVars(template, declared, prefixOf) {
+	let out = template;
+	for (const bare of declared) {
+		const re = new RegExp(`var\\(\\s*--${escapeRegExp(bare)}(?![\\w-])`, "g");
+		out = out.replace(re, `var(--${prefixOf(bare)}`);
+	}
+	return out;
+}
+/**
+* Replace the prefixed `var(--<prefixed>)` / `var(--<prefixed>, fallback)`
+* references with their mapped values, iterating so that local variables that
+* reference parameters (or other locals) resolve fully.
+*/
+function substituteVars(template, valueMap) {
+	let out = template;
+	for (let iter = 0; iter < 30; iter++) {
+		let changed = false;
+		for (const [name, value] of valueMap) {
+			const re = new RegExp(`var\\(\\s*--${escapeRegExp(name)}\\s*(?:,[^)]*)?\\)`, "g");
+			out = out.replace(re, () => {
+				changed = true;
+				return value;
+			});
+		}
+		if (!changed) break;
 	}
-	/**
-	* Get the current units configuration.
-	*/
-	getUnits() {
-		return this.opts.units;
+	return out;
+}
+/** Function names currently being expanded, to guard against recursion cycles. */
+const inProgress = /* @__PURE__ */ new Set();
+/**
+* Compile a declarative `@function` definition into a parse-function closure
+* that fully inlines the call into plain CSS (the `@function` polyfill).
+*
+* Parameters and local variables are substituted directly with their values,
+* so no function-internal custom properties are emitted (collisions are
+* structurally impossible). Self/mutually-recursive functions are not expanded:
+* the cycle guard bails and the call is left untouched.
+*/
+function compileFunctionClosure(name, def) {
+	const cssName = parseFunctionName(name);
+	const prefixOf = (bare) => `tf-${cssName.slice(2)}-${bare}`;
+	const params = [];
+	if (Array.isArray(def.args)) for (const token of def.args) params.push({ prefixed: prefixOf(paramBareName(token)) });
+	else if (def.args) for (const [token, param] of Object.entries(def.args)) {
+		let dflt;
+		if (param && typeof param === "object" && param.default !== void 0) dflt = parseStyle(param.default).output;
+		params.push({
+			prefixed: prefixOf(paramBareName(token)),
+			default: dflt
+		});
 	}
-};
+	const localKeys = Object.keys(def).filter((key) => !RESERVED_KEYS.has(key) && key.startsWith("$"));
+	const declared = [...Array.isArray(def.args) ? def.args.map(paramBareName) : def.args ? Object.keys(def.args).map(paramBareName) : [], ...localKeys.map(paramBareName)];
+	let built = false;
+	let resultTemplate = "";
+	const localTemplates = [];
+	const build = () => {
+		built = true;
+		resultTemplate = prefixDeclaredVars(parseStyle(def.result).output, declared, prefixOf);
+		for (const key of localKeys) {
+			const value = def[key];
+			if (value === void 0) continue;
+			localTemplates.push({
+				prefixed: prefixOf(paramBareName(key)),
+				value: prefixDeclaredVars(parseStyle(value).output, declared, prefixOf)
+			});
+		}
+	};
+	return (groups) => {
+		if (inProgress.has(cssName)) return "";
+		inProgress.add(cssName);
+		try {
+			if (!built) build();
+			const valueMap = /* @__PURE__ */ new Map();
+			params.forEach((param, index) => {
+				const arg = groups[index]?.output?.trim();
+				valueMap.set(param.prefixed, arg || param.default || "");
+			});
+			for (const local of localTemplates) valueMap.set(local.prefixed, local.value);
+			return substituteVars(resultTemplate, valueMap);
+		} finally {
+			inProgress.delete(cssName);
+		}
+	};
+}
+/** CSS function name -> serialized definition, to dedupe polyfill registration. */
+const registeredFunctionDefs = /* @__PURE__ */ new Map();
+/**
+* Register a declarative `@function` as a parse-function closure so the parser
+* inlines its call sites. Deduplicated by name + definition; a later, different
+* definition of the same name overrides the previous one (local wins).
+*/
+function registerFunctionPolyfill(name, definition) {
+	const cssName = parseFunctionName(name);
+	const serialized = JSON.stringify(definition);
+	if (registeredFunctionDefs.get(cssName) === serialized) return;
+	registeredFunctionDefs.set(cssName, serialized);
+	customFunction(cssName, compileFunctionClosure(name, definition));
+}
+/** Register all local `@function` definitions from a styles object (polyfill). */
+function registerLocalFunctionPolyfills(styles) {
+	const local = extractLocalFunctions(styles);
+	if (!local) return;
+	for (const [name, definition] of Object.entries(local)) registerFunctionPolyfill(name, definition);
+}
+/** Clear polyfill registration bookkeeping (used by resetConfig in tests). */
+function resetFunctionPolyfills() {
+	registeredFunctionDefs.clear();
+}
 //#endregion
-//#region src/plugins/color-func.ts
-const clamp = (value, min, max) => Math.max(Math.min(value, max), min);
+//#region src/chunks/style-chunk-map.ts
+/**
+* Chunk names, the built-in chunk style lists, and the style→chunk lookup.
+*
+* This is a **leaf module with no imports**. It exists separately from
+* `definitions.ts` for two reasons:
+*
+* 1. The style handler registry (`styles/predefined.ts`) needs to assign chunk
+*    membership for custom handlers. Reaching for `definitions.ts` would create an
+*    import cycle (`definitions` -> `pipeline` -> `styles` -> `predefined`).
+* 2. `STYLE_TO_CHUNK` is populated as a side effect of module load, so it must be
+*    populated by the module that *owns* it. Otherwise an importer that only pulls
+*    in this module would see an empty map and misclassify every style as `misc`.
+*
+* `definitions.ts` re-exports everything here, so existing import paths and the
+* public API surface are unchanged.
+*/
+const CHUNK_NAMES = {
+	/** Special chunk for styles that cannot be split */
+	COMBINED: "combined",
+	SUBCOMPONENTS: "subcomponents",
+	APPEARANCE: "appearance",
+	FONT: "font",
+	DIMENSION: "dimension",
+	DISPLAY: "display",
+	LAYOUT: "layout",
+	POSITION: "position",
+	MISC: "misc"
+};
+/**
+* Appearance chunk - visual styling with independent handlers
+*
+* @public
+*/
+const APPEARANCE_CHUNK_STYLES = [
+	"fill",
+	"color",
+	"opacity",
+	"border",
+	"radius",
+	"outline",
+	"outlineOffset",
+	"shadow",
+	"fade"
+];
+/**
+* Font chunk - typography styles
+*
+* Handler dependencies (all styles in each handler MUST stay in this chunk):
+* ⚠️ presetStyle: preset, fontSize, lineHeight, letterSpacing, textTransform,
+*    fontWeight, fontStyle, font
+*/
+/** @public */
+const FONT_CHUNK_STYLES = [
+	"preset",
+	"font",
+	"fontWeight",
+	"fontStyle",
+	"fontSize",
+	"lineHeight",
+	"letterSpacing",
+	"textTransform",
+	"fontFamily",
+	"textAlign",
+	"textDecoration",
+	"wordBreak",
+	"wordWrap",
+	"boldFontWeight"
+];
+/**
+* Dimension chunk - sizing and spacing
+*
+* Handler dependencies (all styles in each handler MUST stay in this chunk):
+* ⚠️ paddingStyle: padding, paddingTop/Right/Bottom/Left, paddingBlock/Inline
+* ⚠️ marginStyle: margin, marginTop/Right/Bottom/Left, marginBlock/Inline
+* ⚠️ widthStyle: width, minWidth, maxWidth
+* ⚠️ heightStyle: height, minHeight, maxHeight
+*/
+/** @public */
+const DIMENSION_CHUNK_STYLES = [
+	"padding",
+	"paddingTop",
+	"paddingRight",
+	"paddingBottom",
+	"paddingLeft",
+	"paddingBlock",
+	"paddingInline",
+	"margin",
+	"marginTop",
+	"marginRight",
+	"marginBottom",
+	"marginLeft",
+	"marginBlock",
+	"marginInline",
+	"width",
+	"minWidth",
+	"maxWidth",
+	"height",
+	"minHeight",
+	"maxHeight",
+	"flexBasis",
+	"flexGrow",
+	"flexShrink",
+	"flex"
+];
+/**
+* Display chunk - display mode, layout flow, text overflow, and scrollbar
+*
+* Handler dependencies (all styles in each handler MUST stay in this chunk):
+* ⚠️ displayStyle: display, hide, textOverflow, overflow, whiteSpace
+* ⚠️ flowStyle: display, flow
+* ⚠️ gapStyle: display, flow, gap
+* ⚠️ scrollbarStyle: scrollbar, overflow
+*/
+/** @public */
+const DISPLAY_CHUNK_STYLES = [
+	"display",
+	"hide",
+	"textOverflow",
+	"overflow",
+	"whiteSpace",
+	"flow",
+	"gap",
+	"scrollbar"
+];
+/**
+* Layout chunk - flex/grid alignment and grid templates
+*
+* Note: flow and gap are in DISPLAY chunk due to handler dependencies
+* (flowStyle and gapStyle both require 'display' prop).
+*/
+/** @public */
+const LAYOUT_CHUNK_STYLES = [
+	"placeItems",
+	"placeContent",
+	"alignItems",
+	"alignContent",
+	"justifyItems",
+	"justifyContent",
+	"align",
+	"justify",
+	"place",
+	"columnGap",
+	"rowGap",
+	"gridColumns",
+	"gridRows",
+	"gridTemplate",
+	"gridAreas",
+	"gridAutoFlow",
+	"gridAutoColumns",
+	"gridAutoRows"
+];
 /**
-* Parse an angle value with optional unit.
-* Supports: deg, turn, rad, or unitless (treated as degrees).
+* Position chunk - element positioning
+*
+* Handler dependencies (all styles in each handler MUST stay in this chunk):
+* ⚠️ insetStyle: inset, insetBlock, insetInline, top, right, bottom, left
 */
-const parseAngle = (value) => {
-	const match = value.match(/^([+-]?\d*\.?\d+)(deg|turn|rad)?$/);
-	if (!match) return 0;
-	const num = parseFloat(match[1]);
-	switch (match[2]) {
-		case "turn": return num * 360;
-		case "rad": return num * 180 / Math.PI;
-		default: return num;
-	}
-};
+/** @public */
+const POSITION_CHUNK_STYLES = [
+	"position",
+	"inset",
+	"insetBlock",
+	"insetInline",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"zIndex",
+	"gridArea",
+	"gridColumn",
+	"gridRow",
+	"order",
+	"placeSelf",
+	"alignSelf",
+	"justifySelf",
+	"transform",
+	"transition",
+	"animation"
+];
 /**
-* Parse a percentage value (e.g., "50%") to a 0-1 range.
+* Map for O(1) style-to-chunk lookup. Seeded with the built-in lists above and
+* extended by {@link assignStyleChunk} when a custom handler declares style names
+* the built-in lists don't know.
 */
-const parsePercentage = (value) => {
-	const match = value.match(/^([+-]?\d*\.?\d+)%?$/);
-	if (!match) return 0;
-	const num = parseFloat(match[1]);
-	return value.includes("%") ? num / 100 : num;
-};
+const STYLE_TO_CHUNK = /* @__PURE__ */ new Map();
+/** Built-in assignments, captured so `resetStyleChunks()` can restore them. */
+let builtinSnapshot = null;
+function populateStyleToChunkMap() {
+	for (const style of APPEARANCE_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.APPEARANCE);
+	for (const style of FONT_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.FONT);
+	for (const style of DIMENSION_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DIMENSION);
+	for (const style of DISPLAY_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DISPLAY);
+	for (const style of LAYOUT_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.LAYOUT);
+	for (const style of POSITION_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.POSITION);
+}
+populateStyleToChunkMap();
+builtinSnapshot = new Map(STYLE_TO_CHUNK);
 /**
-* Creates a color function handler for the tasty parser.
-* @param name The name of the color space (e.g., 'okhsl', 'okhst')
-* @param channelLabel The label for the channels in warnings (e.g., 'H S L')
-* @param convert A function that converts the parsed H, C2, C3 values to sRGB [r, g, b] (0-1)
+* Assign a style name to a chunk.
+*
+* Used to keep a custom handler's dependencies in one chunk: chunks are rendered
+* and cached independently, and a chunk's cache key covers only its own style
+* values, so a handler whose `__lookupStyles` straddle two chunks is invoked once
+* per chunk with a subset of its inputs and can emit stale CSS.
 */
-function createColorFunc(name, channelLabel, convert) {
-	const conversionCache = new Lru(500);
-	return (groups) => {
-		if (groups.length === 0 || groups[0].all.length < 3) {
-			console.warn(`[${name}] Expected 3 values (${channelLabel}), got:`, groups);
-			return "rgb(0% 0% 0%)";
-		}
-		const group = groups[0];
-		const tokens = group.all;
-		const alpha = group.parts.length > 1 && group.parts[1].all.length > 0 ? group.parts[1].output : void 0;
-		const cacheKey = tokens.slice(0, 3).join(" ") + (alpha ? ` / ${alpha}` : "");
-		const cached = conversionCache.get(cacheKey);
-		if (cached) return cached;
-		const h = parseAngle(tokens[0]);
-		const c2 = parsePercentage(tokens[1]);
-		const c3 = parsePercentage(tokens[2]);
-		const [r, g, b] = convert(h, clamp(c2, 0, 1), clamp(c3, 0, 1));
-		const format = (n) => {
-			const pct = n * 100;
-			return parseFloat(pct.toFixed(1)).toString() + "%";
-		};
-		const result = alpha ? `rgb(${format(r)} ${format(g)} ${format(b)} / ${alpha})` : `rgb(${format(r)} ${format(g)} ${format(b)})`;
-		conversionCache.set(cacheKey, result);
-		return result;
-	};
+function assignStyleChunk(styleName, chunk) {
+	STYLE_TO_CHUNK.set(styleName, chunk);
 }
-//#endregion
-//#region src/plugins/okhsl-plugin.ts
 /**
-* OKHSL Plugin for Tasty
+* Drop custom chunk assignments and restore the built-in baseline.
 *
-* Converts OKHSL color syntax to RGB notation.
-* Supports angle units: deg, turn, rad, or unitless (degrees).
+* Called by `resetConfig()`. Without this, a custom handler's chunk assignments
+* would leak across tests the same way custom handlers themselves did before
+* `resetHandlers()` existed.
 *
-* Examples:
-*   okhsl(240.5 50% 50%)
-*   okhsl(240.5deg 50% 50%)
-*   okhsl(0.25turn 50% 50%)
-*   okhsl(1.57rad 50% 50%)
-*/
-/**
-* The okhsl function handler for tasty parser.
-* Receives parsed style groups and returns an RGB color string.
+* @internal
 */
-const okhslFunc = createColorFunc("okhsl", "H S L", okhslToSrgb);
+function resetStyleChunks() {
+	if (!builtinSnapshot) return;
+	STYLE_TO_CHUNK.clear();
+	for (const [style, chunk] of builtinSnapshot) STYLE_TO_CHUNK.set(style, chunk);
+}
+//#endregion
+//#region src/prop-handlers.ts
 /**
-* OKHSL Plugin for Tasty.
+* Props middleware for tasty components.
 *
-* Adds support for the `okhsl()` color function in tasty styles.
+* A prop handler receives a component's props and returns them, changed or not.
+* That makes it the extension point for props that are *not* style properties:
+* it can read a custom prop, strip it so it never reaches the DOM, and fold its
+* meaning into `styles`, `mods`, `tokens`, `variant`, or `as`.
 *
-* @example
 * ```ts
-* import { configure } from '@tenphi/tasty';
-* import { okhslPlugin } from '@tenphi/tasty';
-*
 * configure({
-*   plugins: [okhslPlugin()],
-* });
-*
-* // Now you can use okhsl in styles:
-* const Box = tasty({
-*   styles: {
-*     fill: 'okhsl(240 50% 50%)',
+*   propHandlers: {
+*     glaze: (props) => {
+*       const { glaze, ...rest } = props;
+*       if (!glaze) return rest;
+*       return { ...rest, styles: mergeStyles(glazeStyles(glaze), rest.styles) };
+*     },
 *   },
 * });
 * ```
+*
+* Handlers run on every render of every tasty component, so the registry is a
+* pre-composed chain that is `null` while nothing is registered — the cost when
+* unused is one property load and one branch.
 */
-const okhslPlugin = () => ({
-	name: "okhsl",
-	funcs: { okhsl: okhslFunc }
+const GTKEY$1 = "__tasty_prop_handlers__";
+const globalStore$1 = globalThis;
+const propHandlerRegistry = globalStore$1[GTKEY$1] ?? (globalStore$1[GTKEY$1] = {
+	apply: null,
+	list: []
 });
-//#endregion
-//#region src/plugins/okhst-plugin.ts
+function normalize(key, definition, options) {
+	const source = options?.source ?? "configure()";
+	if (typeof definition === "function") return {
+		key,
+		triggers: [key],
+		fn: definition,
+		source
+	};
+	if (Array.isArray(definition)) {
+		const [first, fn] = definition;
+		if (typeof fn !== "function") throw new Error(`[Tasty] Invalid prop handler definition for "${key}". Tuple must have a function as the second element: [string, function] or [string[], function].`);
+		if (first === "*") return {
+			key,
+			triggers: null,
+			fn,
+			source
+		};
+		if (typeof first === "string") return {
+			key,
+			triggers: [first],
+			fn,
+			source
+		};
+		if (Array.isArray(first)) return {
+			key,
+			triggers: first.includes("*") ? null : first,
+			fn,
+			source
+		};
+		throw new Error(`[Tasty] Invalid prop handler definition for "${key}". First element must be a string or string array.`);
+	}
+	throw new Error(`[Tasty] Invalid prop handler definition for "${key}". Expected function, [string, function], or [string[], function].`);
+}
 /**
-* OKHST Plugin for Tasty
-*
-* Converts OKHST color syntax to RGB notation.
-* OKHST is OKHSL with the lightness axis replaced by a contrast-uniform tone axis.
-* Supports angle units: deg, turn, rad, or unitless (degrees).
+* Run one handler, treating a nothing/non-object return as "unchanged".
 *
-* Examples:
-*   okhst(240.5 50% 50%)
-*   okhst(240.5deg 50% 50%)
-*   okhst(0.25turn 50% 50%)
-*   okhst(1.57rad 50% 50%)
+* `isDevEnv()` is called lazily rather than captured at module load so the
+* warnings are assertable in tests; it is only reached on the misuse path.
 */
+function runOne(handler, props) {
+	const next = handler.fn(props);
+	if (next != null && typeof next === "object" && !Array.isArray(next)) return next;
+	if (isDevEnv()) console.warn(next == null ? `[Tasty] propHandlers["${handler.key}"] (from ${handler.source}) returned ${String(next)}. Props are treated as unchanged — did you forget to \`return props\`?` : `[Tasty] propHandlers["${handler.key}"] (from ${handler.source}) returned ${Array.isArray(next) ? "an array" : typeof next}. A prop handler must return a props object. The result was ignored.`);
+	return props;
+}
+function compose(list) {
+	if (list.length === 0) return null;
+	if (list.length === 1) {
+		const only = list[0];
+		if (only.triggers === null) return (props) => runOne(only, props);
+		if (only.triggers.length === 1) {
+			const trigger = only.triggers[0];
+			return (props) => trigger in props ? runOne(only, props) : props;
+		}
+	}
+	return (props) => {
+		for (const handler of list) {
+			const triggers = handler.triggers;
+			if (triggers !== null) {
+				let triggered = false;
+				for (const trigger of triggers) if (trigger in props) {
+					triggered = true;
+					break;
+				}
+				if (!triggered) continue;
+			}
+			props = runOne(handler, props);
+		}
+		return props;
+	};
+}
 /**
-* The okhst function handler for tasty parser.
-* Receives parsed style groups and returns an RGB color string.
+* Register a props middleware under `key`, replacing any handler already
+* registered under the same key while keeping its position in the chain.
 */
-const okhstFunc = createColorFunc("okhst", "H S T", okhstToSrgb);
+function registerPropHandler(key, definition, options) {
+	const normalized = normalize(key, definition, options);
+	const { list } = propHandlerRegistry;
+	const existing = list.findIndex((handler) => handler.key === key);
+	if (existing === -1) list.push(normalized);
+	else list[existing] = normalized;
+	propHandlerRegistry.apply = compose(list);
+}
+/** Drop every registered props middleware. Called by `resetConfig()`. */
+function resetPropHandlers() {
+	if (propHandlerRegistry.list.length === 0) return;
+	propHandlerRegistry.list.length = 0;
+	propHandlerRegistry.apply = null;
+}
+//#endregion
+//#region src/properties/index.ts
+const PROPERTIES_KEY = "@property";
 /**
-* OKHST Plugin for Tasty.
+* Valid CSS custom property name pattern (after the -- prefix).
+* Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.
+*/
+const VALID_PROPERTY_NAME_PATTERN = /^[a-z_][a-z0-9-_]*$/i;
+/**
+* Validate a CSS custom property name (the part after --).
+* Returns true if the name is valid for use as a CSS custom property.
+*/
+function isValidPropertyName(name) {
+	return VALID_PROPERTY_NAME_PATTERN.test(name);
+}
+/**
+* Check if styles object has local @property definition.
+* Fast path: single property lookup.
+*/
+function hasLocalProperties(styles) {
+	return PROPERTIES_KEY in styles;
+}
+/**
+* Extract local @property from styles object.
+* Returns null if no local properties (fast path).
+*/
+function extractLocalProperties(styles) {
+	const properties = styles[PROPERTIES_KEY];
+	if (!properties || typeof properties !== "object") return null;
+	return properties;
+}
+/**
+* Parse a property token name and return the CSS property name and whether it's a color.
+* Supports tasty token syntax and validates the property name.
 *
-* Adds support for the `okhst()` color function in tasty styles.
+* Token formats:
+* - `$name` → { cssName: '--name', isColor: false }
+* - `#name` → { cssName: '--name-color', isColor: true }
+* - `--name` → { cssName: '--name', isColor: false } (legacy, auto-detect color by suffix)
+* - `name` → { cssName: '--name', isColor: false } (legacy)
 *
-* @example
-* ```ts
-* import { configure } from '@tenphi/tasty';
-* import { okhstPlugin } from '@tenphi/tasty';
+* @param token - The property token to parse
+* @returns Parsed result with cssName, isColor, isValid, and optional error
+*/
+function parsePropertyToken(token) {
+	if (!token || typeof token !== "string") return {
+		cssName: "",
+		isColor: false,
+		isValid: false,
+		error: "Property token must be a non-empty string"
+	};
+	let name;
+	let isColor;
+	if (token.startsWith("$")) {
+		name = token.slice(1);
+		isColor = false;
+	} else if (token.startsWith("#")) {
+		name = token.slice(1);
+		isColor = true;
+	} else if (token.startsWith("--")) {
+		name = token.slice(2);
+		isColor = token.endsWith("-color");
+	} else {
+		name = token;
+		isColor = token.endsWith("-color");
+	}
+	if (!name) return {
+		cssName: "",
+		isColor,
+		isValid: false,
+		error: "Property name cannot be empty"
+	};
+	if (!isValidPropertyName(name)) return {
+		cssName: "",
+		isColor,
+		isValid: false,
+		error: `Invalid property name "${name}". Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.`
+	};
+	let cssName;
+	if (token.startsWith("#")) cssName = `--${name}-color`;
+	else cssName = `--${name}`;
+	return {
+		cssName,
+		isColor,
+		isValid: true
+	};
+}
+/**
+* Normalize a property definition to a consistent string representation.
+* Used for comparing definitions to detect type conflicts.
 *
-* configure({
-*   plugins: [okhstPlugin()],
-* });
+* Only `syntax` and `inherits` are compared — `initialValue` is intentionally
+* excluded because different components may set different defaults for the
+* same typed property (e.g. auto-inferred `0px` vs explicit `6px`).
 *
-* // Now you can use okhst in styles:
-* const Box = tasty({
-*   styles: {
-*     fill: 'okhst(240 50% 50%)',
-*   },
-* });
-* ```
+* Keys are sorted alphabetically to ensure consistent comparison:
+* { inherits: true, syntax: '<color>' } === { syntax: '<color>', inherits: true }
 */
-const okhstPlugin = () => ({
-	name: "okhst",
-	funcs: { okhst: okhstFunc }
-});
-//#endregion
-//#region src/utils/styles.ts
+function normalizePropertyDefinition(def) {
+	const normalized = {};
+	if (def.inherits !== void 0) normalized.inherits = def.inherits;
+	if (def.syntax !== void 0) normalized.syntax = def.syntax;
+	return JSON.stringify(normalized);
+}
+/**
+* Get the effective property definition for a token.
+* For color tokens (#name), auto-sets syntax to '<color>' and defaults initialValue to 'transparent'.
+*
+* @param token - Property token ($name, #name, --name, or plain name)
+* @param userDefinition - User-provided definition options
+* @returns Effective definition with cssName, definition, isValid, and optional error
+*/
+function getEffectiveDefinition(token, userDefinition) {
+	const parsed = parsePropertyToken(token);
+	if (!parsed.isValid) return {
+		cssName: "",
+		definition: userDefinition,
+		isColor: false,
+		isValid: false,
+		error: parsed.error
+	};
+	if (parsed.isColor) return {
+		cssName: parsed.cssName,
+		definition: {
+			syntax: "<color>",
+			inherits: userDefinition.inherits,
+			initialValue: userDefinition.initialValue ?? "transparent"
+		},
+		isColor: true,
+		isValid: true
+	};
+	return {
+		cssName: parsed.cssName,
+		definition: userDefinition,
+		isColor: false,
+		isValid: true
+	};
+}
+const UNIT_TO_SYNTAX = {};
+const LENGTH_UNITS = [
+	"px",
+	"em",
+	"rem",
+	"vw",
+	"vh",
+	"vmin",
+	"vmax",
+	"ch",
+	"ex",
+	"cap",
+	"ic",
+	"lh",
+	"rlh",
+	"svw",
+	"svh",
+	"lvw",
+	"lvh",
+	"dvw",
+	"dvh",
+	"cqw",
+	"cqh",
+	"cqi",
+	"cqb",
+	"cqmin",
+	"cqmax"
+];
+const ANGLE_UNITS = [
+	"deg",
+	"rad",
+	"grad",
+	"turn"
+];
+const TIME_UNITS = ["ms", "s"];
+for (const u of LENGTH_UNITS) UNIT_TO_SYNTAX[u] = {
+	syntax: "<length-percentage>",
+	initialValue: "0px"
+};
+UNIT_TO_SYNTAX["%"] = {
+	syntax: "<length-percentage>",
+	initialValue: "0px"
+};
+for (const u of ANGLE_UNITS) UNIT_TO_SYNTAX[u] = {
+	syntax: "<angle>",
+	initialValue: "0deg"
+};
+for (const u of TIME_UNITS) UNIT_TO_SYNTAX[u] = {
+	syntax: "<time>",
+	initialValue: "0s"
+};
 /**
-* Normalize a color token value.
-* - Boolean `true` is converted to `'transparent'`
-* - Boolean `false` returns `null` (signals the token should be skipped)
-* - Other values are returned as-is
+* Infer CSS @property syntax from a concrete value.
+* Detects numeric types: \<number\>, \<length-percentage\>, \<angle\>, \<time\>.
+* Length and percentage values both map to \<length-percentage\> for maximum flexibility.
+* Color properties are handled separately via the #name token convention
+* (--name-color gets \<color\> syntax automatically in getEffectiveDefinition).
 *
-* @param value - The raw token value
-* @returns Normalized value or null if the token should be skipped
+* @param value - The CSS value to infer from (e.g. '10px', '1', '45deg')
+* @returns Inferred syntax and initial value, or null if not inferable
 */
-function normalizeColorTokenValue(value) {
-	if (value === true) return "transparent";
-	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 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/;
-function isSimpleColorFast(val) {
-	switch (val.charCodeAt(0)) {
-		case 35: return RE_HEX_COLOR.test(val);
-		case 114: return val.charCodeAt(1) === 103 && val.charCodeAt(2) === 98;
-		case 104: return val.charCodeAt(1) === 115 && val.charCodeAt(2) === 108;
-		case 108: return val.charCodeAt(1) === 99 && val.charCodeAt(2) === 104;
-		case 111: return val.startsWith("oklch(") || val.startsWith("okhsl(") || val.startsWith("okhst(");
-		case 118: return RE_VAR_COLOR.test(val);
-		case 99: return val === "currentColor" || val === "currentcolor";
-		case 116: return val === "transparent";
-		default: return getNamedColorHex().has(val.toLowerCase());
-	}
-}
-let colorWarningCount = 0;
-const MAX_COLOR_WARNINGS = 10;
-const CUSTOM_UNITS = {
-	r: "6px",
-	cr: "10px",
-	bw: "1px",
-	ow: "3px",
-	x: "8px",
-	sf: function sf(num) {
-		return `minmax(0, ${num}fr)`;
+function inferSyntaxFromValue(value) {
+	if (!value || typeof value !== "string") return null;
+	const trimmed = value.trim();
+	if (!trimmed) return null;
+	if (RE_NUMBER.test(trimmed)) {
+		if (parseFloat(trimmed) === 0) return null;
+		return {
+			syntax: "<number>",
+			initialValue: "0"
+		};
 	}
-};
-const DIRECTIONS = [
-	"top",
-	"right",
-	"bottom",
-	"left"
-];
-let __tastyParser = null;
-function getOrCreateParser() {
-	if (!__tastyParser) {
-		__tastyParser = new StyleParser({ units: CUSTOM_UNITS });
-		__tastyParser.setFuncs(__tastyFuncs);
+	const unitMatch = trimmed.match(RE_RAW_UNIT);
+	if (unitMatch) {
+		const mapping = UNIT_TO_SYNTAX[unitMatch[2]];
+		if (mapping) return mapping;
 	}
-	return __tastyParser;
-}
-const __tastyFuncs = {
-	okhsl: okhslFunc,
-	okhst: okhstFunc
-};
-function customFunc(name, fn) {
-	__tastyFuncs[name] = fn;
-	getOrCreateParser().setFuncs(__tastyFuncs);
+	return null;
 }
+//#endregion
+//#region src/utils/hash.ts
 /**
-* Get the global StyleParser instance.
-* Used by configure() to apply parser configuration.
+* Fast string hash (djb2) for deduplication keys.
+* Not cryptographic — just collision-resistant enough for cache keys.
 */
-function getGlobalParser() {
-	return getOrCreateParser();
+function hashString(str) {
+	let hash = 5381;
+	for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i) | 0;
+	return (hash >>> 0).toString(36);
 }
+//#endregion
+//#region src/utils/name-prefix.ts
 /**
-* Get the current custom functions registry.
-* Used by configure() to merge with new functions.
+* Name prefix utilities for generated identifiers.
+*
+* Tasty generates three kinds of identifiers from content hashes:
+* - class names (used in DOM `class` attribute)
+* - keyframe names (used in CSS `animation`)
+* - counter-style names (used in CSS `list-style-type`)
+*
+* All three derive from a single configurable prefix so that an app
+* can namespace every identifier under one string. Discriminator letters
+* (`k`, `c`) keep the three kinds visually distinct in devtools — they
+* are not required for correctness (CSS keeps these in separate
+* namespaces), only for readability.
+*
+* The runtime / SSR / RSC paths must agree on the prefix; otherwise the
+* client-side hash for a given style will not match the server-rendered
+* class and hydration breaks. The zero-runtime build path uses a
+* different default (`'ts'`) so its classes can't collide with runtime
+* (`'t'`) classes when both are loaded on the same page.
 */
-function getGlobalFuncs() {
-	return __tastyFuncs;
-}
+/** Default prefix used by the runtime / SSR / RSC paths. */
+const DEFAULT_NAME_PREFIX = "t";
+/** Default prefix used by the zero-runtime (`tastyStatic`) build path. */
+const DEFAULT_ZERO_NAME_PREFIX = "ts";
 /**
-* Storage for predefined tokens that are replaced during style parsing.
-* Keys are token names (with $ or # prefix), values are pre-processed CSS values.
+* Allowed shape: starts with a letter or underscore, then letters/
+* digits/underscore/hyphen. Length capped at 32 to keep generated
+* names sane. Matches the CSS identifier rules for the common case
+* while keeping the surface conservative.
 */
-let __globalPredefinedTokens = null;
+const NAME_PREFIX_PATTERN = /^[a-zA-Z_][a-zA-Z0-9_-]{0,31}$/;
 /**
-* Set global predefined tokens.
-* Called from configure() after processing token values.
-* Merges with existing tokens (new tokens override existing ones with same key).
-* Keys are normalized to lowercase (parser lowercases input before classification).
-* @internal
+* Validate a `namePrefix` value.
+* Throws a TypeError with a descriptive message on invalid input so
+* misconfiguration fails loudly at `configure()` time rather than
+* surfacing later as broken hydration.
 */
-function setGlobalPredefinedTokens(tokens) {
-	const normalizedTokens = {};
-	for (const [key, value] of Object.entries(tokens)) {
-		const lowerKey = key.toLowerCase();
-		const lowerValue = value.toLowerCase();
-		if (lowerKey.startsWith("#") && lowerValue === "#current") {
-			console.warn(`[Tasty] Using #current to define color token "${key}" is not supported. The #current token represents currentcolor which cannot be used as a base for other tokens.`);
-			continue;
-		}
-		normalizedTokens[lowerKey] = value;
-	}
-	__globalPredefinedTokens = __globalPredefinedTokens ? {
-		...__globalPredefinedTokens,
-		...normalizedTokens
-	} : normalizedTokens;
-	getOrCreateParser().clearCache();
+function validateNamePrefix(prefix) {
+	if (typeof prefix !== "string") throw new TypeError(`[Tasty] namePrefix must be a string, got ${typeof prefix}.`);
+	if (!NAME_PREFIX_PATTERN.test(prefix)) throw new TypeError(`[Tasty] namePrefix "${prefix}" is invalid. It must start with a letter (a-z, A-Z) or "_", contain only letters, digits, "_" or "-", and be 1-32 characters long. Examples: "t", "ts", "myapp-", "_foo".`);
 }
 /**
-* Get the current global predefined tokens.
-* Returns null if no tokens are configured.
+* Build a class name: `${prefix}${hash}`.
+* The hash is appended verbatim — supply a separator inside the prefix
+* itself if you want one (e.g. `'myapp-'`).
 */
-function getGlobalPredefinedTokens() {
-	return __globalPredefinedTokens;
+function makeClassName(prefix, hash) {
+	return `${prefix}${hash}`;
 }
 /**
-* Reset global predefined tokens.
-* Used for testing.
-* @internal
+* Build a keyframe name: `${prefix}k${suffix}`.
+* The `k` discriminator keeps keyframe names visually distinct from
+* class names sharing the same prefix. `suffix` is typically a content
+* hash but may be a counter for ad-hoc allocation.
 */
-function resetGlobalPredefinedTokens() {
-	__globalPredefinedTokens = null;
-	getOrCreateParser().clearCache();
+function makeKeyframeName(prefix, suffix) {
+	return `${prefix}k${suffix}`;
 }
 /**
-*
-* @param {String} value
-* @param {Number} mode
-* @returns {Object<String,String|Array>}
+* Build a counter-style name: `${prefix}c${suffix}`.
+* The `c` discriminator keeps counter-style names visually distinct
+* from class names sharing the same prefix.
 */
-function parseStyle(value) {
-	let str;
-	if (typeof value === "string") str = value;
-	else if (typeof value === "number") str = String(value);
-	else str = "";
-	return getOrCreateParser().process(str);
+function makeCounterStyleName(prefix, suffix) {
+	return `${prefix}c${suffix}`;
+}
+/** Escape a string for safe inclusion in a regex literal. */
+function escapeRegex(str) {
+	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 /**
-* Parse color. Find it value, name and opacity.
-* Optimized to avoid heavy parseStyle calls for simple color patterns.
+* Regex matching any tasty class for the given prefix.
+* Used by the runtime GC's DOM scan and class-allocation bookkeeping.
 */
-function parseColor(val, ignoreError = false) {
-	if (typeof val !== "string") val = String(val ?? "");
-	val = val.trim();
-	if (!val) return {};
-	const isSimpleColor = isSimpleColorFast(val);
-	let firstColor;
-	if (isSimpleColor) firstColor = val;
-	else {
-		const extractedColor = parseStyle(val).groups.find((g) => g.colors.length)?.colors[0];
-		if (!extractedColor) {
-			if (!ignoreError && colorWarningCount < MAX_COLOR_WARNINGS) {
-				console.warn("[Tasty] unable to parse color:", val);
-				colorWarningCount++;
-				if (colorWarningCount === MAX_COLOR_WARNINGS) console.warn("[Tasty] color parsing warnings will be suppressed from now on");
-			}
-			return {};
-		}
-		firstColor = extractedColor;
-	}
-	let nameMatch = firstColor.match(COLOR_VAR_PATTERN);
-	if (!nameMatch) nameMatch = firstColor.match(COLOR_VAR_COMPONENTS_PATTERN);
-	let opacity;
-	if (firstColor.startsWith("rgb") || firstColor.startsWith("hsl") || firstColor.startsWith("lch") || firstColor.startsWith("oklch") || firstColor.startsWith("okhsl")) {
-		const alphaMatch = firstColor.match(RGB_ALPHA_PATTERN);
-		if (alphaMatch) {
-			const v = parseFloat(alphaMatch[1]);
-			if (!isNaN(v)) opacity = v * 100;
-		}
-	}
-	return {
-		color: firstColor,
-		name: nameMatch ? nameMatch[1] : void 0,
-		opacity
-	};
-}
-function filterMods(mods, allowedMods) {
-	return mods.filter((mod) => allowedMods.includes(mod));
+function tastyClassRegex(prefix) {
+	return new RegExp(`^${escapeRegex(prefix)}[a-z0-9]+$`);
 }
-const _innerCache = /* @__PURE__ */ new WeakMap();
-const _topLevelCache = /* @__PURE__ */ new WeakMap();
-function stringifyStyles(styles) {
-	if (styles == null || typeof styles !== "object") return "";
-	const cached = _topLevelCache.get(styles);
-	if (cached !== void 0) return cached;
-	const obj = styles;
-	const keys = Object.keys(obj).sort();
-	const parts = [];
-	for (const k of keys) {
-		const v = obj[k];
-		if (v === void 0 || typeof v === "function" || typeof v === "symbol") continue;
-		const c0 = k.charCodeAt(0);
-		const needsInnerSort = (c0 >= 65 && c0 <= 90 || c0 === 38) && v && typeof v === "object" && !Array.isArray(v);
-		let sv;
-		if (needsInnerSort) {
-			sv = _innerCache.get(v);
-			if (sv === void 0) {
-				const innerObj = v;
-				const innerKeys = Object.keys(innerObj).sort();
-				const innerParts = [];
-				for (const ik of innerKeys) {
-					const ivs = JSON.stringify(innerObj[ik]);
-					if (ivs !== void 0) innerParts.push(JSON.stringify(ik) + ":" + ivs);
-				}
-				sv = "{" + innerParts.join(",") + "}";
-				_innerCache.set(v, sv);
-			}
-		} else sv = JSON.stringify(v);
-		parts.push(JSON.stringify(k) + ":" + sv);
-	}
-	const result = "{" + parts.join(",") + "}";
-	_topLevelCache.set(styles, result);
-	return result;
+/**
+* Global regex extracting tasty class names from RSC-inlined CSS.
+* Looks for the doubled-specificity pattern `.cls.cls` that
+* `formatRules()` always emits, which makes extraction reliable.
+*/
+function rscClassRegexGlobal(prefix) {
+	return new RegExp(`\\.(${escapeRegex(prefix)}[a-z0-9]+)\\.\\1`, "g");
 }
 //#endregion
 //#region src/properties/property-type-resolver.ts
@@ -2639,6 +3259,52 @@ 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;
 }
+/** Warning keys already emitted, so each distinct offending value warns once. */
+const emittedWarnings$2 = /* @__PURE__ */ new Set();
+/**
+* Emit a style-level warning at most once per `key`. No-op outside dev mode.
+*
+* Style handlers run once per state combination and their results are cached,
+* but the same value can arrive from many components, so dedupe is required.
+*
+* `isDevEnv()` is called lazily rather than captured at module load (the pattern
+* used in `config.ts` and `states/index.ts`) so that tests can enable it with
+* `vi.stubEnv('NODE_ENV', 'development')` — `isDevEnv()` returns `false` for
+* `NODE_ENV=test`, which is why every module-load-gated warning in this repo is
+* currently untestable. The key is registered *before* the dev check, so
+* production pays at most one `isDevEnv()` call per distinct offending value and
+* never touches the console.
+*/
+function warnOnceDev(key, message) {
+	if (emittedWarnings$2.has(key)) return;
+	emittedWarnings$2.add(key);
+	if (!isDevEnv()) return;
+	console.warn(`[Tasty] ${message}`);
+}
+/** Forget emitted style warnings. Called by `resetConfig()`; test isolation. */
+function resetStyleWarnings() {
+	emittedWarnings$2.clear();
+}
+/**
+* Report a comma group that names direction modifiers together with more values
+* than the group can use.
+*
+* The parser buckets values and modifiers into separate arrays per comma group,
+* so `padding: '2x 4x top right'`, `padding: '2x top 4x right'` and
+* `padding: 'top 2x right 4x'` all reach a handler identically — the pairing a
+* reader infers from source order does not survive parsing. Such a group
+* therefore carries a single value, applied to every direction it names.
+*
+* `maxValues` is 2 only for a span modifier (`inset: '2x 4x bottom dock'`),
+* where the second value insets the sides the dock spans.
+*
+* Callers must guard on the count themselves so the valid path costs one integer
+* comparison; everything expensive happens here, on the misuse path only.
+*/
+function warnExtraGroupValues(property, input, maxValues) {
+	const message = maxValues === 2 ? `${property}="${input}": with a span modifier a group takes at most two values — one for the named edge and one for the spanned sides. The extra values are ignored.` : `${property}="${input}": a group that names directions takes a single value, applied to every direction it names. The extra values are ignored — use comma-separated groups instead, e.g. ${property}="2x top, 4x right".`;
+	warnOnceDev(`extra-values:${property}:${input}`, message);
+}
 //#endregion
 //#region src/styles/border.ts
 /**
@@ -2934,8 +3600,9 @@ const DEFAULT_OPAQUE_COLOR = "rgb(0 0 0 / 1)";
 */
 function processGroup(group, isOnlyGroup) {
 	let { values } = group;
-	const { mods, colors } = group;
-	let directions = filterMods(mods, DIRECTIONS);
+	const { input, mods, colors } = group;
+	const named = filterMods(mods, DIRECTIONS);
+	let directions = named;
 	if (!values.length) values = ["calc(2 * var(--gap))"];
 	if (!directions.length) if (isOnlyGroup) directions = [
 		"top",
@@ -2946,8 +3613,9 @@ function processGroup(group, isOnlyGroup) {
 	else return [];
 	const transparentColor = colors?.[0] || DEFAULT_TRANSPARENT_COLOR;
 	const opaqueColor = colors?.[1] || DEFAULT_OPAQUE_COLOR;
+	if (named.length > 0 && values.length > 1) warnExtraGroupValues("fade", input, 1);
 	return directions.map((direction, index) => {
-		const size = values[index] || values[index % 2] || values[0];
+		const size = named.length > 0 ? values[0] : values[index] || values[index % 2] || values[0];
 		return `linear-gradient(${DIRECTION_MAP[direction]}, ${transparentColor} 0%, ${opaqueColor} ${size})`;
 	});
 }
@@ -2963,6 +3631,7 @@ function fadeStyle({ fade }) {
 	const gradients = [];
 	for (const group of groups) {
 		const groupGradients = processGroup({
+			input: group.input ?? "",
 			values: group.values ?? [],
 			mods: group.mods ?? [],
 			colors: group.colors ?? []
@@ -3193,12 +3862,15 @@ function parseSingleValue(val, defaultValue, trueValue) {
 	const { values } = parseStyle(strVal).groups[0] ?? { values: [] };
 	return values[0] || defaultValue;
 }
-function extractGroupData(group, defaultValue, spanModifiers) {
+function extractGroupData(group, property, defaultValue, spanModifiers) {
 	const { values = [], mods = [] } = group;
+	const directions = filterMods(mods, DIRECTIONS);
+	const span = !!spanModifiers?.some((mod) => mods.includes(mod));
+	if (directions.length > 0 && values.length > (span ? 2 : 1)) warnExtraGroupValues(property, group.input, span ? 2 : 1);
 	return {
 		values: values.length ? values : [defaultValue],
-		directions: filterMods(mods, DIRECTIONS),
-		span: !!spanModifiers?.some((mod) => mods.includes(mod))
+		directions,
+		span
 	};
 }
 function applyGroup(dirs, values, directions, span = false) {
@@ -3208,18 +3880,18 @@ function applyGroup(dirs, values, directions, span = false) {
 		dirs.right = values[1] || values[0];
 		dirs.bottom = values[2] || values[0];
 		dirs.left = values[3] || values[1] || values[0];
-	} else {
-		const spanValue = span ? values[directions.length] : void 0;
-		if (span) directions.forEach((dir, i) => {
-			const perpendicular = spanValue ?? values[i] ?? values[0];
+		return;
+	}
+	const value = values[0];
+	if (span) {
+		const spanValue = values[1] ?? value;
+		for (const dir of directions) {
 			const d = DIRECTIONS.indexOf(dir);
-			dirs[DIRECTIONS[(d + 1) % 4]] = perpendicular;
-			dirs[DIRECTIONS[(d + 3) % 4]] = perpendicular;
-		});
-		directions.forEach((dir, i) => {
-			dirs[dir] = values[i] ?? values[0];
-		});
+			dirs[DIRECTIONS[(d + 1) % 4]] = spanValue;
+			dirs[DIRECTIONS[(d + 3) % 4]] = spanValue;
+		}
 	}
+	for (const dir of directions) dirs[dir] = value;
 }
 function optimizeShorthand(property, dirs) {
 	const { top, right, bottom, left } = dirs;
@@ -3280,7 +3952,7 @@ function processDirectionalStyle(config, props) {
 						if (groupDirs.length === 0) dirs.top = dirs.right = dirs.bottom = dirs.left = kw;
 						else for (const dir of groupDirs) dirs[dir] = kw;
 					} else {
-						const { values, directions, span } = extractGroupData(group, defaultValue, spanModifiers);
+						const { values, directions, span } = extractGroupData(group, property, defaultValue, spanModifiers);
 						applyGroup(dirs, values, directions, span);
 					}
 				}
@@ -3786,13 +4458,6 @@ const PREFIX = "[Tasty]";
 function warn(...args) {
 	console.warn(PREFIX, ...args);
 }
-function deprecationWarning(condition, { property, name, betterAlternative, reason }) {
-	if (condition) return;
-	console.group(`⚠️ ${PREFIX} Deprecation in ${name}`);
-	warn(`"${property}" is deprecated, consider better alternative: ${typeof betterAlternative === "function" ? betterAlternative() : betterAlternative}`);
-	if (reason) warn(`Reason: ${typeof reason === "function" ? reason() : reason}`);
-	console.groupEnd();
-}
 //#endregion
 //#region src/styles/scrollbar.ts
 /**
@@ -4028,6 +4693,16 @@ widthStyle.__lookupStyles = [
 //#endregion
 //#region src/styles/predefined.ts
 const devMode$2 = isDevEnv();
+/**
+* Dev-mode check evaluated per call rather than at module load.
+*
+* `isDevEnv()` reports `false` for `NODE_ENV=test`, so a module-load capture makes
+* a warning impossible to assert in a test. Only used on paths that already know
+* something is wrong, so the extra call is never on the hot path.
+*/
+function inDevMode() {
+	return isDevEnv();
+}
 const columnsConverter = (val) => {
 	if (typeof val === "number") return "minmax(1px, 1fr) ".repeat(val).trim();
 };
@@ -4144,6 +4819,63 @@ function validateHandler(name, handler, lookupStyles) {
 	if (typeof handler !== "function") console.warn(`[Tasty] Handler "${name}" is not a function. Handlers must be functions that return CSSMap, CSSMap[], or null.`);
 	if (!lookupStyles || !Array.isArray(lookupStyles) || lookupStyles.length === 0) console.warn(`[Tasty] Handler "${name}" has invalid lookupStyles. Expected non-empty array of style names.`);
 }
+/** Describe a handler in a warning message. */
+function describeHandler(lookupStyles, options) {
+	const name = options?.key ?? lookupStyles.join(", ");
+	return options?.source ? `"${name}" (from ${options.source})` : `"${name}"`;
+}
+/**
+* Keep a handler's dependencies inside one chunk.
+*
+* Chunks are rendered and cached independently and a chunk's cache key covers
+* only its own style values, so a handler whose `__lookupStyles` straddle two
+* chunks gets invoked once per chunk with a *subset* of its inputs — and can emit
+* stale CSS. Custom style names are unknown to the built-in chunk lists and would
+* otherwise fall into `misc`, splitting any handler that mixes them with built-in
+* styles. Pull them into the built-in chunk instead.
+*
+* Runs in production too: this is a correctness fix, not a diagnostic. It only
+* ever moves names the built-in lists don't know, so no existing class name can
+* change.
+*/
+function alignHandlerChunks(lookupStyles, options) {
+	const known = /* @__PURE__ */ new Set();
+	const unknown = [];
+	for (const styleName of lookupStyles) {
+		const chunk = STYLE_TO_CHUNK.get(styleName);
+		if (chunk) known.add(chunk);
+		else unknown.push(styleName);
+	}
+	if (known.size > 1) {
+		if (inDevMode()) console.warn(`[Tasty] Handler ${describeHandler(lookupStyles, options)} depends on styles from different chunks (${[...known].sort().join(", ")}). Chunks are cached independently, so this handler will be invoked once per chunk with only part of its dependencies and can emit stale CSS. Split it into per-chunk handlers, or have one property expand into the others before chunking.`);
+		return;
+	}
+	if (unknown.length === 0) return;
+	const target = known.size === 1 ? [...known][0] : CHUNK_NAMES.MISC;
+	for (const styleName of unknown) assignStyleChunk(styleName, target);
+}
+/**
+* Warn when replacing a handler takes unrelated style properties down with it.
+*
+* Built-in handlers are shared across several style names (`displayStyle` also
+* emits `hide`, `overflow`, `whiteSpace`, `textOverflow`), so registering a
+* handler for one of them unregisters the built-in from *all* of its names. The
+* displaced names don't go dark — the pipeline falls back to an auto-generated
+* CSS alias and writes it back into the map — so `hide: true` starts emitting a
+* literal `hide: true` declaration. Silent wrongness, which is worth a warning.
+*
+* Must run before the handlers are actually removed.
+*/
+function warnAboutOrphanedStyles(lookupStyles, handlersToRemove, options) {
+	const incoming = new Set(lookupStyles);
+	const orphaned = /* @__PURE__ */ new Set();
+	for (const oldHandler of handlersToRemove) for (const oldStyleName of oldHandler.__lookupStyles ?? []) {
+		if (incoming.has(oldStyleName)) continue;
+		if ((STYLE_HANDLER_MAP$1[oldStyleName] ?? []).filter((h) => !handlersToRemove.has(h)).length === 0) orphaned.add(oldStyleName);
+	}
+	if (orphaned.size === 0) return;
+	console.warn(`[Tasty] Custom handler ${describeHandler(lookupStyles, options)} displaced built-in handlers that also handle: ${[...orphaned].sort().join(", ")}. Those properties now fall back to auto-generated CSS aliases, which is usually wrong (e.g. \`hide: true\` would emit a literal \`hide: true\` declaration). Either declare them in this handler's lookup styles and delegate via \`styleHandlers.*\`, or pick a narrower style name.`);
+}
 /**
 * Register a custom handler, replacing any existing handlers for the same lookup styles.
 * This is called by configure() to process user-defined handlers.
@@ -4152,18 +4884,24 @@ function validateHandler(name, handler, lookupStyles) {
 * is removed from ALL its lookup styles to prevent double-processing.
 * For example, if gapStyle handles ['display', 'flow', 'gap'] and a new handler
 * is registered for just ['gap'], gapStyle is removed from display and flow too.
+*
+* Note: this bypasses the `configure()` lock, so calling it after styles have
+* been generated changes the handlers for already-emitted class names. Prefer
+* `configure({ handlers })`, which is rejected after first render.
 */
-function registerHandler(handler) {
+function registerHandler(handler, options) {
 	const lookupStyles = handler.__lookupStyles;
 	if (!lookupStyles || lookupStyles.length === 0) {
 		if (devMode$2) console.warn("[Tasty] Cannot register handler without __lookupStyles property.");
 		return;
 	}
+	alignHandlerChunks(lookupStyles, options);
 	const handlersToRemove = /* @__PURE__ */ new Set();
 	for (const styleName of lookupStyles) {
 		const existing = STYLE_HANDLER_MAP$1[styleName];
 		if (existing) for (const existingHandler of existing) handlersToRemove.add(existingHandler);
 	}
+	if (handlersToRemove.size > 0 && inDevMode()) warnAboutOrphanedStyles(lookupStyles, handlersToRemove, options);
 	for (const oldHandler of handlersToRemove) {
 		const oldLookupStyles = oldHandler.__lookupStyles;
 		if (oldLookupStyles) for (const oldStyleName of oldLookupStyles) {
@@ -4238,6 +4976,38 @@ const styleHandlers = {
 	width: wrapHandler(widthStyle)
 };
 //#endregion
+//#region src/styles/define-handler.ts
+/**
+* Declare a multi-dependency style handler with its dependency names inferred
+* into the handler's parameter type.
+*
+* Without it, the multi-dependency tuple form needs a hand-written parameter
+* annotation that can silently drift from the dependency list:
+*
+* ```ts
+* // Annotation and dependency list are maintained separately.
+* handlers: {
+*   spacing: [['gap', 'padding'], ({ gap, padding }: { gap?: string; padding?: string }) => …],
+* }
+*
+* // Both come from the same array; a typo in the destructure is a type error.
+* handlers: {
+*   spacing: defineHandler(['gap', 'padding'], ({ gap, padding }) => …),
+* }
+* ```
+*
+* Values arrive **state-resolved but unparsed** — the raw authored DSL string
+* (`'2x'`, `'#purple.5'`), so call `parseStyle()` / `parseColor()` as needed. The
+* result is a kebab-case CSS declaration map (or an array of them); the reserved
+* `$` key applies the declarations to a nested selector.
+*
+* All names must belong to the same chunk. Names the built-in chunk lists don't
+* know are pulled into their handler's chunk automatically at registration.
+*/
+function defineHandler(deps, handler) {
+	return [deps, handler];
+}
+//#endregion
 //#region src/styles/index.ts
 const { STYLE_HANDLER_MAP } = predefine();
 //#endregion
@@ -4275,6 +5045,31 @@ var SheetManager = class {
 		return sheetInfo.sheet?.sheet ?? null;
 	}
 	/**
+	* Record an inserted rule text at its rule index (text mode only).
+	*
+	* `textRules` mirrors the sheet's rule order. `textContent` cannot be edited
+	* rule-by-rule the way CSSOM can, so keeping the texts is what makes
+	* deletion possible at all in this mode.
+	*/
+	trackTextRule(sheet, ruleIndex, ruleText) {
+		if (!sheet.textMode) return;
+		const rules = sheet.textRules ??= [];
+		while (rules.length < ruleIndex) rules.push("");
+		rules[ruleIndex] = ruleText;
+	}
+	/**
+	* Remove rule indices from a text-mode sheet and rewrite the element's text.
+	* Returns the indices that were actually removed.
+	*/
+	deleteTextRules(sheet, indices) {
+		const rules = sheet.textRules;
+		if (!rules) return [];
+		const removed = [...new Set(indices)].filter((idx) => idx >= 0 && idx < rules.length).sort((a, b) => b - a);
+		for (const idx of removed) rules.splice(idx, 1);
+		if (removed.length > 0 && sheet.sheet) sheet.sheet.textContent = rules.length ? "\n" + rules.join("\n") : "";
+		return removed;
+	}
+	/**
 	* Determine the injection mode for a root.
 	* ShadowRoot uses adopted stylesheets when supported; Document uses <style> elements.
 	*/
@@ -4310,7 +5105,8 @@ var SheetManager = class {
 				keyframesCounter: 0,
 				injectedProperties: /* @__PURE__ */ new Map(),
 				injectedFontFaces: /* @__PURE__ */ new Set(),
-				injectedCounterStyles: /* @__PURE__ */ new Set(),
+				injectedCounterStyles: /* @__PURE__ */ new Map(),
+				injectedFunctions: /* @__PURE__ */ new Map(),
 				globalRules: /* @__PURE__ */ new Map(),
 				propertyTypeResolver: new PropertyTypeResolver(),
 				usageMap: /* @__PURE__ */ new Map(),
@@ -4356,10 +5152,14 @@ var SheetManager = class {
 			registry.sheets.push(sheetInfo);
 			return sheetInfo;
 		}
+		const sheet = this.createStyleElement(root);
+		const textMode = this.config.forceTextInjection === true || sheet.sheet == null;
 		const sheetInfo = {
-			sheet: this.createStyleElement(root),
+			sheet,
 			ruleCount: 0,
-			holes: []
+			holes: [],
+			textMode,
+			...textMode ? { textRules: [] } : {}
 		};
 		registry.sheets.push(sheetInfo);
 		return sheetInfo;
@@ -4427,7 +5227,7 @@ var SheetManager = class {
 				if (rule.atRules && rule.atRules.length > 0) fullRule = rule.atRules.reduce((css, atRule) => `${atRule} { ${css} }`, baseRule);
 				const styleElement = targetSheet.sheet;
 				const styleSheet = this.getCSSSheet(targetSheet);
-				if (styleSheet && !this.config.forceTextInjection) {
+				if (!targetSheet.textMode && styleSheet) {
 					const maxIndex = styleSheet.cssRules.length;
 					const atomicRuleIndex = this.findAvailableRuleIndex(targetSheet);
 					const safeIndex = Math.min(Math.max(0, atomicRuleIndex), maxIndex);
@@ -4498,6 +5298,7 @@ var SheetManager = class {
 					}
 				} else if (styleElement) {
 					const atomicRuleIndex = this.findAvailableRuleIndex(targetSheet);
+					this.trackTextRule(targetSheet, atomicRuleIndex, fullRule);
 					styleElement.textContent = (styleElement.textContent || "") + "\n" + fullRule;
 					targetSheet.ruleCount++;
 					insertedIndices.push(atomicRuleIndex);
@@ -4596,7 +5397,21 @@ var SheetManager = class {
 		try {
 			const texts = this.config.devMode && Array.isArray(ruleInfo.cssText) ? ruleInfo.cssText.slice() : [];
 			const styleSheet = this.getCSSSheet(sheet);
-			if (styleSheet) {
+			if (sheet.textMode) {
+				let targetIndices;
+				if (ruleInfo.indices && ruleInfo.indices.length > 0) targetIndices = ruleInfo.indices;
+				else {
+					const startIdx = Math.max(0, ruleInfo.ruleIndex);
+					const endIdx = Math.min((sheet.textRules?.length ?? 0) - 1, Number.isFinite(ruleInfo.endRuleIndex) ? ruleInfo.endRuleIndex : startIdx);
+					targetIndices = [];
+					for (let idx = startIdx; idx <= endIdx; idx++) targetIndices.push(idx);
+				}
+				const deletedIndices = this.deleteTextRules(sheet, targetIndices);
+				if (deletedIndices.length > 0) {
+					sheet.ruleCount = Math.max(0, sheet.ruleCount - deletedIndices.length);
+					this.adjustIndicesAfterDeletion(registry, ruleInfo.sheetIndex, Math.min(...deletedIndices), Math.max(...deletedIndices), deletedIndices.length, ruleInfo, deletedIndices);
+				}
+			} else if (styleSheet) {
 				const rules = styleSheet.cssRules;
 				if (ruleInfo.indices && ruleInfo.indices.length > 0) {
 					const sortedIndices = [...ruleInfo.indices].sort((a, b) => b - a);
@@ -4721,8 +5536,8 @@ var SheetManager = class {
 				const sheetInfo = registry.sheets[ruleInfo.sheetIndex];
 				if (!sheetInfo || !sheetInfo.sheet && !sheetInfo.constructableSheet) continue;
 				const styleSheet = this.getCSSSheet(sheetInfo);
-				if (!styleSheet) continue;
-				const maxRuleIndex = styleSheet.cssRules.length - 1;
+				if (!sheetInfo.textMode && !styleSheet) continue;
+				const maxRuleIndex = (sheetInfo.textMode ? sheetInfo.textRules?.length ?? 0 : styleSheet?.cssRules.length ?? 0) - 1;
 				const startIdx = ruleInfo.ruleIndex;
 				const endIdx = ruleInfo.endRuleIndex ?? ruleInfo.ruleIndex;
 				if (startIdx < 0 || endIdx > maxRuleIndex || startIdx > endIdx) continue;
@@ -4755,7 +5570,7 @@ var SheetManager = class {
 	/**
 	* Get CSS text from all sheets (for SSR)
 	*/
-	getCssText(registry) {
+	getCSSText(registry) {
 		const cssChunks = [];
 		for (const sheetInfo of registry.sheets) try {
 			if (sheetInfo.constructableSheet) {
@@ -4876,10 +5691,13 @@ var SheetManager = class {
 			const { css: cssSteps, declarations } = this.stepsToCSS(steps);
 			const fullRule = `@keyframes ${name} { ${cssSteps} }`;
 			const styleSheet = this.getCSSSheet(targetSheet);
-			if (styleSheet && !this.config.forceTextInjection) {
+			if (!targetSheet.textMode && styleSheet) {
 				const safeIndex = Math.min(Math.max(0, ruleIndex), styleSheet.cssRules.length);
 				styleSheet.insertRule(fullRule, safeIndex);
-			} else if (targetSheet.sheet) targetSheet.sheet.textContent = (targetSheet.sheet.textContent || "") + "\n" + fullRule;
+			} else if (targetSheet.sheet) {
+				this.trackTextRule(targetSheet, ruleIndex, fullRule);
+				targetSheet.sheet.textContent = (targetSheet.sheet.textContent || "") + "\n" + fullRule;
+			}
 			targetSheet.ruleCount++;
 			return {
 				info: {
@@ -4903,15 +5721,21 @@ var SheetManager = class {
 		if (!sheet) return;
 		try {
 			const styleSheet = this.getCSSSheet(sheet);
-			if (styleSheet) {
+			const adjustIndices = () => this.adjustIndicesAfterDeletion(registry, info.sheetIndex, info.ruleIndex, info.ruleIndex, 1, {
+				className: "",
+				ruleIndex: info.ruleIndex,
+				sheetIndex: info.sheetIndex
+			}, [info.ruleIndex]);
+			if (sheet.textMode) {
+				if (this.deleteTextRules(sheet, [info.ruleIndex]).length > 0) {
+					sheet.ruleCount = Math.max(0, sheet.ruleCount - 1);
+					adjustIndices();
+				}
+			} else if (styleSheet) {
 				if (info.ruleIndex >= 0 && info.ruleIndex < styleSheet.cssRules.length) {
 					styleSheet.deleteRule(info.ruleIndex);
 					sheet.ruleCount = Math.max(0, sheet.ruleCount - 1);
-					this.adjustIndicesAfterDeletion(registry, info.sheetIndex, info.ruleIndex, info.ruleIndex, 1, {
-						className: "",
-						ruleIndex: info.ruleIndex,
-						sheetIndex: info.sheetIndex
-					}, [info.ruleIndex]);
+					adjustIndices();
 				}
 			}
 		} catch (error) {
@@ -5088,15 +5912,15 @@ var SheetManager = class {
 };
 //#endregion
 //#region src/font-face/index.ts
-const FONT_FACE_KEY = "@fontFace";
+const FONT_FACE_KEY = "@font-face";
 /**
-* Check if styles object has local @fontFace definition.
+* Check if styles object has local @font-face definition.
 */
 function hasLocalFontFace(styles) {
 	return FONT_FACE_KEY in styles;
 }
 /**
-* Extract local @fontFace from styles object.
+* Extract local @font-face from styles object.
 * Returns null if no local font faces (fast path).
 */
 function extractLocalFontFace(styles) {
@@ -5148,15 +5972,15 @@ function fontFaceContentHash(family, descriptors) {
 }
 //#endregion
 //#region src/counter-style/index.ts
-const COUNTER_STYLE_KEY = "@counterStyle";
+const COUNTER_STYLE_KEY = "@counter-style";
 /**
-* Check if styles object has local @counterStyle definition.
+* Check if styles object has local @counter-style definition.
 */
 function hasLocalCounterStyle(styles) {
 	return COUNTER_STYLE_KEY in styles;
 }
 /**
-* Extract local @counterStyle from styles object.
+* Extract local @counter-style from styles object.
 * Returns null if no local counter styles (fast path).
 */
 function extractLocalCounterStyle(styles) {
@@ -5504,15 +6328,15 @@ var StyleInjector = class {
 	/**
 	* Get CSS text from all sheets (for SSR)
 	*/
-	getCssText(options) {
+	getCSSText(options) {
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
-		return this.sheetManager.getCssText(registry);
+		return this.sheetManager.getCSSText(registry);
 	}
 	/**
 	* Get CSS only for the provided tasty classNames (e.g., ["t0","t3"])
 	*/
-	getCssTextForClasses(classNames, options) {
+	getCSSTextForClasses(classNames, options) {
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
 		const cssChunks = [];
@@ -5653,18 +6477,51 @@ var StyleInjector = class {
 	/**
 	* Inject a CSS @counter-style rule.
 	*
-	* Permanent and global — no dispose or ref-counting.
-	* Deduplicates by name (first definition wins).
+	* Permanent and global — no dispose or ref-counting. Deduplicates by name.
+	* By default a definition overrides a previously injected one of the same
+	* name. Pass `weak: true` for global `configure()` definitions, which must
+	* never clobber an existing rule (so component-local definitions win
+	* regardless of injection order).
 	*/
 	counterStyle(name, descriptors, options) {
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
-		if (registry.injectedCounterStyles.has(name)) return;
+		const isWeak = options?.weak === true;
+		const existingIsStrong = registry.injectedCounterStyles.get(name);
+		if (existingIsStrong !== void 0) {
+			if (isWeak || existingIsStrong === true) return;
+			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.add(name);
+		if (this.sheetManager.insertGlobalRule(registry, [rule], `counterstyle:${name}`, root)) registry.injectedCounterStyles.set(name, !isWeak);
+	}
+	/**
+	* Inject a CSS @function rule (custom function).
+	*
+	* Permanent and global — no dispose or ref-counting. Deduplicates by function
+	* name. By default a definition overrides a previously injected one of the
+	* same name. Pass `weak: true` for global `configure()` definitions, which
+	* must never clobber an existing rule (so component-local definitions win
+	* regardless of injection order).
+	*/
+	func(name, definition, options) {
+		const root = options?.root || document;
+		const registry = this.sheetManager.getRegistry(root);
+		const isWeak = options?.weak === true;
+		const cssName = parseFunctionName(name);
+		const existingIsStrong = registry.injectedFunctions.get(cssName);
+		if (existingIsStrong !== void 0) {
+			if (isWeak || existingIsStrong === true) return;
+			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);
 	}
 	/**
 	* Inject keyframes and return object with toString() and dispose()
@@ -5871,9 +6728,10 @@ var StyleInjector = class {
 const BUILTIN_STATES = new Set([
 	"@starting",
 	"@keyframes",
-	"@properties",
-	"@fontFace",
-	"@counterStyle",
+	"@property",
+	"@font-face",
+	"@counter-style",
+	"@function",
 	"@supports",
 	"@inherit"
 ]);
@@ -9583,6 +10441,8 @@ function parseStateKey(stateKey, options = {}) {
 * identical rules and emits all `@starting-style` rules last so they win
 * the cascade over their equal-specificity normal counterparts.
 */
+/** Any uppercase letter — a CSS property name should never contain one. */
+const RE_UPPER_CASE = /[A-Z]/;
 const pipelineCache = new Lru(5e3);
 /**
 * Check if a cache key exists in the pipeline cache.
@@ -9723,7 +10583,10 @@ function invokeHandler(handler, stateSnapshots, selectorSuffix) {
 			if (!r || typeof r !== "object") continue;
 			const { $, ...styleProps } = r;
 			const declarations = {};
-			for (const [prop, val] of Object.entries(styleProps)) if (val != null && val !== "") declarations[prop] = String(val);
+			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 (Object.keys(declarations).length === 0) continue;
 			const suffixes = $ ? (Array.isArray($) ? $ : [$]).map((s) => selectorSuffix + normalizeSelectorSuffix(String(s))) : [selectorSuffix];
 			for (const suffix of suffixes) computedRules.push({
@@ -10332,6 +11195,174 @@ function renderStyles(styles, classNameOrSelector, options, pipelineCacheKey) {
 	})) };
 }
 //#endregion
+//#region src/styles/list.ts
+const BASE_STYLES = [
+	"display",
+	"font",
+	"preset",
+	"hide",
+	"whiteSpace",
+	"opacity",
+	"transition"
+];
+const POSITION_STYLES = [
+	"gridArea",
+	"order",
+	"gridColumn",
+	"gridRow",
+	"placeSelf",
+	"alignSelf",
+	"justifySelf",
+	"zIndex",
+	"margin",
+	"inset",
+	"position",
+	"scrollMargin"
+];
+const BLOCK_INNER_STYLES = [
+	"padding",
+	"paddingInline",
+	"paddingBlock",
+	"overflow",
+	"scrollbar",
+	"textAlign"
+];
+const BLOCK_OUTER_STYLES = [
+	"border",
+	"radius",
+	"shadow",
+	"outline"
+];
+const BLOCK_STYLES = [...BLOCK_INNER_STYLES, ...BLOCK_OUTER_STYLES];
+const COLOR_STYLES = [
+	"color",
+	"fill",
+	"fade",
+	"image"
+];
+const TEXT_STYLES = [
+	"textTransform",
+	"fontWeight",
+	"fontStyle"
+];
+const DIMENSION_STYLES = [
+	"width",
+	"height",
+	"flexBasis",
+	"flexGrow",
+	"flexShrink",
+	"flex"
+];
+const FLOW_STYLES = [
+	"flow",
+	"place",
+	"placeItems",
+	"placeContent",
+	"alignItems",
+	"alignContent",
+	"justifyItems",
+	"justifyContent",
+	"align",
+	"justify",
+	"gap",
+	"columnGap",
+	"rowGap",
+	"gridColumns",
+	"gridRows",
+	"gridTemplate",
+	"gridAreas"
+];
+const CONTAINER_STYLES = [
+	...BASE_STYLES,
+	...COLOR_STYLES,
+	...DIMENSION_STYLES,
+	...POSITION_STYLES,
+	...BLOCK_STYLES,
+	...FLOW_STYLES
+];
+const OUTER_STYLES = [
+	...POSITION_STYLES,
+	...DIMENSION_STYLES,
+	...BLOCK_OUTER_STYLES
+];
+const INNER_STYLES = [
+	...BASE_STYLES,
+	...COLOR_STYLES,
+	...BLOCK_INNER_STYLES,
+	...FLOW_STYLES
+];
+//#endregion
+//#region src/styles/base-props.ts
+/**
+* Registry for style properties promoted to base props on every tasty component.
+*
+* `BASE_STYLES` stays a frozen `as const` — a dozen type helpers in `src/types.ts`
+* are derived from it — so `configure({ baseStyleProps })` records the additions
+* here instead. A version counter lets each `tasty()` factory memoize its prop
+* list and refresh only when the registry changes: factories are created at module
+* eval, which can run *before* `configure()`, and `resetConfig()` (plus the
+* zero-runtime Babel worker) reopens configuration, so a one-shot lazy init would
+* go stale.
+*/
+/** Props consumed by `tasty()` itself, which a style name must never shadow. */
+const RESERVED_PROP_NAMES = new Set([
+	"as",
+	"styles",
+	"variant",
+	"mods",
+	"element",
+	"qa",
+	"qaVal",
+	"className",
+	"tokens",
+	"style",
+	"theme",
+	"children",
+	"ref",
+	"key"
+]);
+const VALID_NAME = /^[a-z][a-zA-Z0-9]*$/;
+const GTKEY = "__tasty_base_style_props__";
+const globalStore = globalThis;
+const baseStylePropsRegistry = globalStore[GTKEY] ?? (globalStore[GTKEY] = {
+	list: [],
+	version: 0
+});
+/**
+* Expose style properties as top-level props on every tasty component, in
+* addition to `BASE_STYLES`.
+*
+* Each name costs one property check per render of every component, forever, so
+* keep the list short. The effect is app-global and cannot be scoped to a subtree;
+* use a factory's own `styleProps` for anything narrower.
+*/
+function registerBaseStyleProps(names) {
+	const added = [];
+	for (const name of names) {
+		if (isDevEnv()) {
+			if (!VALID_NAME.test(name)) {
+				console.warn(`[Tasty] baseStyleProps entry "${name}" is invalid. Names must start with a lowercase letter and contain only letters and digits (capitalised names are sub-element selectors, and "@", "$", "#", ".", "&", "_" prefixes are reserved).`);
+				continue;
+			}
+			if (RESERVED_PROP_NAMES.has(name)) {
+				console.warn(`[Tasty] baseStyleProps entry "${name}" collides with a prop tasty() consumes itself and was ignored.`);
+				continue;
+			}
+		} else if (!VALID_NAME.test(name) || RESERVED_PROP_NAMES.has(name)) continue;
+		if (BASE_STYLES.includes(name) || baseStylePropsRegistry.list.includes(name) || added.includes(name)) continue;
+		added.push(name);
+	}
+	if (added.length === 0) return;
+	baseStylePropsRegistry.list = baseStylePropsRegistry.list.concat(added);
+	baseStylePropsRegistry.version++;
+}
+/** Drop promoted base style props. Called by `resetConfig()`. */
+function resetBaseStyleProps() {
+	if (baseStylePropsRegistry.list.length === 0) return;
+	baseStylePropsRegistry.list = [];
+	baseStylePropsRegistry.version++;
+}
+//#endregion
 //#region src/utils/typography.ts
 const RESERVED_PRESET_NAMES = new Set([
 	"strong",
@@ -10409,6 +11440,8 @@ let currentConfig = null;
 let globalKeyframes = null;
 let globalFontFace = null;
 let globalCounterStyle = null;
+let globalFunction = null;
+let globalPolyfills = null;
 let globalProperties = null;
 let globalRecipes = null;
 let globalConfigTokens = null;
@@ -10416,6 +11449,8 @@ let globalStyles = 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_POLYFILLS = "__tasty_cfg_polyfills__";
 const GTKEY_PROPERTIES = "__tasty_cfg_properties__";
 const GTKEY_GLOBAL_STYLES = "__tasty_cfg_global_styles__";
 function setOnGlobalThis(key, value) {
@@ -10429,6 +11464,8 @@ function clearGlobalThisConfig() {
 	delete g[GTKEY_TOKENS];
 	delete g[GTKEY_FONT_FACE];
 	delete g[GTKEY_COUNTER_STYLE];
+	delete g[GTKEY_FUNCTION];
+	delete g[GTKEY_POLYFILLS];
 	delete g[GTKEY_PROPERTIES];
 	delete g[GTKEY_GLOBAL_STYLES];
 }
@@ -10559,7 +11596,8 @@ function markStylesGenerated() {
 		const descriptors = Array.isArray(input) ? input : [input];
 		for (const desc of descriptors) injector.fontFace(family, desc);
 	}
-	if (globalCounterStyle && Object.keys(globalCounterStyle).length > 0) for (const [name, descriptors] of Object.entries(globalCounterStyle)) injector.counterStyle(name, descriptors);
+	if (globalCounterStyle && Object.keys(globalCounterStyle).length > 0) for (const [name, descriptors] of Object.entries(globalCounterStyle)) injector.counterStyle(name, descriptors, { weak: true });
+	if (globalFunction && Object.keys(globalFunction).length > 0) for (const [name, definition] of Object.entries(globalFunction)) injector.func(name, definition, { weak: true });
 	if (globalConfigTokens && Object.keys(globalConfigTokens).length > 0) {
 		const tokenRules = renderStyles(globalConfigTokens, ":root");
 		if (tokenRules.length > 0) injector.injectGlobal(tokenRules);
@@ -10601,8 +11639,11 @@ function setGlobalKeyframes(keyframes) {
 		warnOnce("keyframes-after-styles", "[Tasty] Cannot update keyframes after styles have been generated.\nThe new keyframes will be ignored.");
 		return;
 	}
-	globalKeyframes = keyframes;
-	_hasGlobalKeyframes = Object.keys(keyframes).length > 0;
+	globalKeyframes = {
+		...globalKeyframes ?? {},
+		...keyframes
+	};
+	_hasGlobalKeyframes = Object.keys(globalKeyframes).length > 0;
 }
 /**
 * Set global properties (called from configure).
@@ -10613,7 +11654,10 @@ function setGlobalProperties(properties) {
 		warnOnce("properties-after-styles", "[Tasty] Cannot update properties after styles have been generated.\nThe new properties will be ignored.");
 		return;
 	}
-	globalProperties = properties;
+	globalProperties = {
+		...globalProperties ?? getFromGlobalThis(GTKEY_PROPERTIES) ?? {},
+		...properties
+	};
 	setOnGlobalThis(GTKEY_PROPERTIES, globalProperties);
 }
 /**
@@ -10634,7 +11678,7 @@ function getEffectiveProperties() {
 * Returns null if no font faces configured.
 * Reads from globalThis first for cross-module SSR support.
 */
-function getGlobalFontFace() {
+function getGlobalFontFaces() {
 	return globalFontFace ?? getFromGlobalThis(GTKEY_FONT_FACE) ?? null;
 }
 /**
@@ -10643,10 +11687,13 @@ function getGlobalFontFace() {
 */
 function setGlobalFontFace(fontFace) {
 	if (stylesGenerated) {
-		warnOnce("fontface-after-styles", "[Tasty] Cannot update fontFace after styles have been generated.\nThe new font faces will be ignored.");
+		warnOnce("fontface-after-styles", "[Tasty] Cannot update fontFaces after styles have been generated.\nThe new font faces will be ignored.");
 		return;
 	}
-	globalFontFace = fontFace;
+	globalFontFace = {
+		...getGlobalFontFaces() ?? {},
+		...fontFace
+	};
 	setOnGlobalThis(GTKEY_FONT_FACE, globalFontFace);
 }
 /**
@@ -10654,7 +11701,7 @@ function setGlobalFontFace(fontFace) {
 * Returns null if no counter styles configured.
 * Reads from globalThis first for cross-module SSR support.
 */
-function getGlobalCounterStyle() {
+function getGlobalCounterStyles() {
 	return globalCounterStyle ?? getFromGlobalThis(GTKEY_COUNTER_STYLE) ?? null;
 }
 /**
@@ -10663,13 +11710,61 @@ function getGlobalCounterStyle() {
 */
 function setGlobalCounterStyle(counterStyle) {
 	if (stylesGenerated) {
-		warnOnce("counterstyle-after-styles", "[Tasty] Cannot update counterStyle after styles have been generated.\nThe new counter styles will be ignored.");
+		warnOnce("counterstyle-after-styles", "[Tasty] Cannot update counterStyles after styles have been generated.\nThe new counter styles will be ignored.");
 		return;
 	}
-	globalCounterStyle = counterStyle;
+	globalCounterStyle = {
+		...getGlobalCounterStyles() ?? {},
+		...counterStyle
+	};
 	setOnGlobalThis(GTKEY_COUNTER_STYLE, globalCounterStyle);
 }
 /**
+* Get global @function configuration.
+* Returns null if no functions configured.
+* Reads from globalThis first for cross-module SSR support.
+*/
+function getGlobalFunctions() {
+	return globalFunction ?? getFromGlobalThis(GTKEY_FUNCTION) ?? null;
+}
+/**
+* Set global functions (called from configure).
+* Internal use only.
+*/
+function setGlobalFunction(functions) {
+	if (stylesGenerated) {
+		warnOnce("function-after-styles", "[Tasty] Cannot update functions after styles have been generated.\nThe new functions will be ignored.");
+		return;
+	}
+	globalFunction = {
+		...getGlobalFunctions() ?? {},
+		...functions
+	};
+	setOnGlobalThis(GTKEY_FUNCTION, globalFunction);
+}
+/**
+* Whether the CSS `@function` polyfill (inline expansion) is enabled.
+* Reads from globalThis first for cross-module SSR/zero-runtime support.
+*/
+function isFunctionsPolyfillEnabled() {
+	return (globalPolyfills ?? getFromGlobalThis(GTKEY_POLYFILLS) ?? null)?.functions === true;
+}
+/**
+* Set global polyfill toggles (called from configure).
+* Internal use only.
+*/
+function setGlobalPolyfills(polyfills) {
+	if (stylesGenerated) {
+		warnOnce("polyfills-after-styles", "[Tasty] Cannot update polyfills after styles have been generated.\nThe new polyfill toggles will be ignored.");
+		return;
+	}
+	globalPolyfills = {
+		...globalPolyfills ?? {},
+		...polyfills
+	};
+	setOnGlobalThis(GTKEY_POLYFILLS, globalPolyfills);
+}
+/**
 * Check if any global recipes are configured.
 * Fast path: returns false if no recipes were ever set.
 */
@@ -10699,7 +11794,10 @@ function setGlobalRecipes(recipes) {
 			if (key === "recipe") warnOnce(`recipe-recursive-${name}`, `[Tasty] Recipe "${name}" contains a "recipe" key. Recipes cannot reference other recipes. Use space-separated names for composition: recipe: 'base elevated'.`);
 		}
 	}
-	globalRecipes = recipes;
+	globalRecipes = {
+		...globalRecipes ?? {},
+		...recipes
+	};
 }
 /**
 * Get global token styles for :root injection.
@@ -10783,8 +11881,18 @@ function configure(config = {}) {
 	if (config.namePrefix !== void 0) validateNamePrefix(config.namePrefix);
 	let mergedStates = {};
 	let mergedUnits = {};
-	let mergedFuncs = {};
+	let mergedFunctions = {};
 	let mergedHandlers = {};
+	/** Where each handler key came from, so registration warnings can name it. */
+	const handlerSources = /* @__PURE__ */ new Map();
+	let mergedPropHandlers = {};
+	/** Where each prop handler key came from, for its warnings. */
+	const propHandlerSources = /* @__PURE__ */ new Map();
+	const mergedBaseStyleProps = [];
+	let mergedProperties = {};
+	let mergedKeyframes = {};
+	let mergedFontFaces = {};
+	let mergedCounterStyles = {};
 	let mergedReplaceTokens = {};
 	let mergedConfigTokens = {};
 	let mergedRecipes = {};
@@ -10799,13 +11907,40 @@ function configure(config = {}) {
 			...mergedUnits,
 			...plugin.units
 		};
-		if (plugin.funcs) mergedFuncs = {
-			...mergedFuncs,
-			...plugin.funcs
+		if (plugin.functions) mergedFunctions = {
+			...mergedFunctions,
+			...plugin.functions
 		};
-		if (plugin.handlers) mergedHandlers = {
-			...mergedHandlers,
-			...plugin.handlers
+		if (plugin.handlers) {
+			mergedHandlers = {
+				...mergedHandlers,
+				...plugin.handlers
+			};
+			for (const key of Object.keys(plugin.handlers)) handlerSources.set(key, `plugin "${plugin.name}"`);
+		}
+		if (plugin.propHandlers) {
+			mergedPropHandlers = {
+				...mergedPropHandlers,
+				...plugin.propHandlers
+			};
+			for (const key of Object.keys(plugin.propHandlers)) propHandlerSources.set(key, `plugin "${plugin.name}"`);
+		}
+		if (plugin.baseStyleProps) mergedBaseStyleProps.push(...plugin.baseStyleProps);
+		if (plugin.properties) mergedProperties = {
+			...mergedProperties,
+			...plugin.properties
+		};
+		if (plugin.keyframes) mergedKeyframes = {
+			...mergedKeyframes,
+			...plugin.keyframes
+		};
+		if (plugin.fontFaces) mergedFontFaces = {
+			...mergedFontFaces,
+			...plugin.fontFaces
+		};
+		if (plugin.counterStyles) mergedCounterStyles = {
+			...mergedCounterStyles,
+			...plugin.counterStyles
 		};
 		if (plugin.replaceTokens) mergedReplaceTokens = {
 			...mergedReplaceTokens,
@@ -10836,13 +11971,40 @@ function configure(config = {}) {
 		...mergedUnits,
 		...config.units
 	};
-	if (config.funcs) mergedFuncs = {
-		...mergedFuncs,
-		...config.funcs
+	if (config.functions) mergedFunctions = {
+		...mergedFunctions,
+		...config.functions
+	};
+	if (config.handlers) {
+		mergedHandlers = {
+			...mergedHandlers,
+			...config.handlers
+		};
+		for (const key of Object.keys(config.handlers)) handlerSources.set(key, "configure()");
+	}
+	if (config.propHandlers) {
+		mergedPropHandlers = {
+			...mergedPropHandlers,
+			...config.propHandlers
+		};
+		for (const key of Object.keys(config.propHandlers)) propHandlerSources.set(key, "configure()");
+	}
+	if (config.baseStyleProps) mergedBaseStyleProps.push(...config.baseStyleProps);
+	if (config.properties) mergedProperties = {
+		...mergedProperties,
+		...config.properties
+	};
+	if (config.keyframes) mergedKeyframes = {
+		...mergedKeyframes,
+		...config.keyframes
+	};
+	if (config.fontFaces) mergedFontFaces = {
+		...mergedFontFaces,
+		...config.fontFaces
 	};
-	if (config.handlers) mergedHandlers = {
-		...mergedHandlers,
-		...config.handlers
+	if (config.counterStyles) mergedCounterStyles = {
+		...mergedCounterStyles,
+		...config.counterStyles
 	};
 	if (config.replaceTokens) mergedReplaceTokens = {
 		...mergedReplaceTokens,
@@ -10886,20 +12048,31 @@ function configure(config = {}) {
 			...mergedUnits
 		});
 	}
-	if (Object.keys(mergedFuncs).length > 0) {
-		const currentFuncs = getGlobalFuncs();
+	if (config.polyfills) setGlobalPolyfills(config.polyfills);
+	const { parseFuncs, functionDefs } = splitFunctions(mergedFunctions, (key, kind) => {
+		warnOnce(`functions-mismatch-${key}`, kind === "expected-definition" ? `[Tasty] functions["${key}"]: a "$$"-prefixed key denotes a CSS @function and expects a definition object, but received a function. Entry ignored.` : `[Tasty] functions["${key}"]: a bare key denotes a parse function and expects a function value, but received an object. Did you mean "$$${key}"? Entry ignored.`);
+	});
+	if (Object.keys(parseFuncs).length > 0) {
+		const currentFuncs = getGlobalParseFunctions();
 		const finalFuncs = {
 			...currentFuncs,
-			...mergedFuncs
+			...parseFuncs
 		};
-		parser.setFuncs(finalFuncs);
-		Object.assign(currentFuncs, mergedFuncs);
-	}
-	if (config.keyframes) setGlobalKeyframes(config.keyframes);
-	if (config.properties) setGlobalProperties(config.properties);
-	if (config.fontFace) setGlobalFontFace(config.fontFace);
-	if (config.counterStyle) setGlobalCounterStyle(config.counterStyle);
-	if (Object.keys(mergedHandlers).length > 0) for (const [name, definition] of Object.entries(mergedHandlers)) registerHandler(normalizeHandlerDefinition(name, definition));
+		parser.setFunctions(finalFuncs);
+		Object.assign(currentFuncs, parseFuncs);
+	}
+	if (Object.keys(functionDefs).length > 0) if (isFunctionsPolyfillEnabled()) for (const [name, definition] of Object.entries(functionDefs)) registerFunctionPolyfill(name, definition);
+	else setGlobalFunction(functionDefs);
+	if (Object.keys(mergedKeyframes).length > 0) setGlobalKeyframes(mergedKeyframes);
+	if (Object.keys(mergedProperties).length > 0) setGlobalProperties(mergedProperties);
+	if (Object.keys(mergedFontFaces).length > 0) setGlobalFontFace(mergedFontFaces);
+	if (Object.keys(mergedCounterStyles).length > 0) setGlobalCounterStyle(mergedCounterStyles);
+	if (Object.keys(mergedHandlers).length > 0) for (const [name, definition] of Object.entries(mergedHandlers)) registerHandler(normalizeHandlerDefinition(name, definition), {
+		key: name,
+		source: handlerSources.get(name)
+	});
+	if (Object.keys(mergedPropHandlers).length > 0) for (const [name, definition] of Object.entries(mergedPropHandlers)) registerPropHandler(name, definition, { source: propHandlerSources.get(name) });
+	if (mergedBaseStyleProps.length > 0) registerBaseStyleProps(mergedBaseStyleProps);
 	if (Object.keys(mergedReplaceTokens).length > 0) {
 		const processedTokens = {};
 		for (const [key, value] of Object.entries(mergedReplaceTokens)) if (key.startsWith("#")) {
@@ -10913,7 +12086,7 @@ function configure(config = {}) {
 	if (Object.keys(mergedConfigTokens).length > 0) setGlobalConfigTokens(mergedConfigTokens);
 	if (Object.keys(mergedRecipes).length > 0) setGlobalRecipes(mergedRecipes);
 	if (Object.keys(mergedGlobalStyles).length > 0) setGlobalStyles(mergedGlobalStyles);
-	const { states: _states, parserCacheSize: _parserCacheSize, units: _units, funcs: _funcs, plugins: _plugins, keyframes: _keyframes, properties: _properties, fontFace: _fontFace, counterStyle: _counterStyle, handlers: _handlers, tokens: _tokens, replaceTokens: _replaceTokens, recipes: _recipes, colorSpace: _colorSpace, presets: _presets, globalStyles: _globalStyles, ...injectorConfig } = config;
+	const { states: _states, parserCacheSize: _parserCacheSize, units: _units, functions: _functions, polyfills: _polyfills, plugins: _plugins, keyframes: _keyframes, properties: _properties, fontFaces: _fontFaces, counterStyles: _counterStyles, handlers: _handlers, propHandlers: _propHandlers, baseStyleProps: _baseStyleProps, tokens: _tokens, replaceTokens: _replaceTokens, recipes: _recipes, colorSpace: _colorSpace, presets: _presets, globalStyles: _globalStyles, ...injectorConfig } = config;
 	const fullConfig = {
 		...createDefaultConfig(),
 		...currentConfig,
@@ -10963,19 +12136,27 @@ function resetConfig() {
 	globalProperties = null;
 	globalFontFace = null;
 	globalCounterStyle = null;
+	globalFunction = null;
+	globalPolyfills = null;
 	globalRecipes = null;
 	globalConfigTokens = null;
 	globalStyles = null;
 	clearGlobalThisConfig();
 	resetGlobalPredefinedTokens();
+	resetGlobalParseFunctions();
+	resetFunctionPolyfills();
 	resetHandlers();
+	resetStyleChunks();
+	resetPropHandlers();
+	resetBaseStyleProps();
 	resetColorSpace();
 	clearPipelineCache();
 	emittedWarnings.clear();
+	resetStyleWarnings();
 	const storage = typeof window !== "undefined" ? window : globalThis;
 	delete storage[GLOBAL_INJECTOR_KEY];
 }
 //#endregion
-export { parseColor as $, StyleInjector as A, extractLocalProperties as At, styleHandlers as B, parseStateKey as C, getComponentPropertySyntax as Ct, extractPredefinedStateRefs as D, hslToRgbValues as Dt, extractLocalPredefinedStates as E, hexToRgb as Et, fontFaceContentHash as F, CUSTOM_UNITS as G, warn as H, formatFontFaceRule as I, filterMods as J, DIRECTIONS as K, hasLocalFontFace as L, formatCounterStyleRule as M, hasLocalProperties as Mt, hasLocalCounterStyle as N, parsePropertyToken as Nt, getGlobalPredefinedStates as O, strToRgb as Ot, extractLocalFontFace as P, normalizeColorTokenValue as Q, SheetManager as R, renderStyles as S, getColorSpaceSuffix as St, createStateParserContext as T, getRgbValuesFromRgbaString as Tt, createStyle as U, deprecationWarning as V, PropertyTypeResolver as W, getGlobalParser as X, getGlobalFuncs as Y, getGlobalPredefinedTokens as Z, markStylesGenerated as _, isDevEnv as _t, getGlobalCounterStyle as a, okhstPlugin as at, hasPipelineCacheEntry as b, getColorSpaceComponents as bt, getGlobalKeyframes as c, StyleParser as ct, getNamePrefix as d, DEFAULT_ZERO_NAME_PREFIX as dt, parseStyle as et, hasGlobalKeyframes as f, makeClassName as ft, isTestEnvironment as g, validateNamePrefix as gt, isConfigLocked as h, tastyClassRegex as ht, getGlobalConfigTokens as i, okhstFunc as it, extractLocalCounterStyle as j, getEffectiveDefinition as jt, setGlobalPredefinedStates as k, Lru as kt, getGlobalRecipes as l, Bucket as lt, hasStylesGenerated as m, makeKeyframeName as mt, getConfig as n, setGlobalPredefinedTokens as nt, getGlobalFontFace as o, okhslFunc as ot, hasGlobalRecipes as p, makeCounterStyleName as pt, customFunc as q, getEffectiveProperties as r, stringifyStyles as rt, getGlobalInjector as s, okhslPlugin as st, configure as t, resetGlobalPredefinedTokens as tt, getGlobalStyles as u, DEFAULT_NAME_PREFIX as ut, resetConfig as v, hashString as vt, camelToKebab as w, getNamedColorHex as wt, isSelector as x, getColorSpaceFunc as xt, generateTypographyTokens as y, colorInitialValueToComponents as yt, STYLE_HANDLER_MAP as z };
+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, 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 };
 
-//# sourceMappingURL=config-YDAcLaVf.js.map
+//# sourceMappingURL=config-CCcE_tqx.js.map