@barocss/kit 0.10.2 → 0.11.0

package/dist/index.js

@@ -270,250 +270,574 @@ function clearContextCaches(ctx) {
 	state.failures.clear();
 }
 //#endregion
-//#region src/core/registry.ts
-var utilityRegistry = [];
-function registerUtility(util, ctx) {
-	const state = ctx && getContextState(ctx);
-	if (ctx && !state) throw new Error("Utility registration requires a context from createContext");
-	(state?.utilities || utilityRegistry).push(util);
-	if (ctx) clearContextCaches(ctx);
-	else {
-		parseResultCache.clear();
-		utilityCache.clear();
-	}
-}
-function getUtility(ctx) {
-	return ctx && getContextState(ctx)?.utilities || utilityRegistry;
-}
-var modifierRegistry = [];
+//#region src/core/utils.ts
 /**
-* staticModifier: A helper that registers a modifier name and an array of CSS selectors directly to the registry
-* 
-* @example
-* ```
-* staticModifier('disabled', ['&:disabled'], { source: 'pseudo' });
-* ```
-* 
-* @param name The name of the modifier
-* @param selectors The selectors of the modifier
-* @param options The options of the modifier
-* 
-* @returns {void}
+* Parses a fraction string (e.g., '1/2') and returns a percentage string (e.g., '50%'), or null if not a valid fraction.
 */
-function staticModifier(name, selectors, options = {}, ctx) {
-	registerModifier({
-		name,
-		match: (mod) => mod === name,
-		modifySelector: ({ ..._rest }) => {
-			return selectors.map((sel) => ({
-				selector: sel,
-				source: options.source
-			}));
-		},
-		...options
-	}, ctx);
-}
-function functionalModifier(match, modifySelector, wrap, options = {}, ctx) {
-	registerModifier({
-		match,
-		modifySelector,
-		wrap,
-		...options
-	}, ctx);
-}
-function registerModifier(modifier, ctx) {
-	const state = ctx && getContextState(ctx);
-	if (ctx && !state) throw new Error("Modifier registration requires a context from createContext");
-	(state?.modifiers || modifierRegistry).push(modifier);
-	if (ctx) clearContextCaches(ctx);
-}
-function getModifier(ctx) {
-	return ctx && getContextState(ctx)?.modifiers || modifierRegistry;
-}
-var ESCAPE_REGEX = /[^A-Za-z0-9_-]/g;
-function escapeClassName(className) {
-	if (className === "-") return "\\-";
-	const lead = /^-?[0-9]/.exec(className);
-	if (lead) {
-		const i = lead[0].length - 1;
-		return className.slice(0, i) + "\\" + className.charCodeAt(i).toString(16) + " " + escapeRest(className.slice(i + 1));
+function parseFraction(input) {
+	if (input.includes("/")) {
+		const [num, denom] = input.split("/").map(Number);
+		if (!isNaN(num) && !isNaN(denom) && denom !== 0) return `${num / denom * 100}%`;
 	}
-	return escapeRest(className);
-}
-function escapeRest(className) {
-	return className.replace(ESCAPE_REGEX, (c) => {
-		if (c === " ") return "\\x20 ";
-		if (c === ".") return "\\.";
-		if (c === "/") return "\\/";
-		if (c === ":") return "\\:";
-		if (c === "[") return "\\[";
-		if (c === "]") return "\\]";
-		if (c === "(") return "\\(";
-		if (c === ")") return "\\)";
-		if (c === "%") return "\\%";
-		if (c === "#") return "\\#";
-		if (c === ",") return "\\,";
-		if (c === "=") return "\\=";
-		if (c === "&") return "\\&";
-		if (c === "~") return "\\~";
-		if (c === "*") return "\\*";
-		if (c === "$") return "\\$";
-		if (c === "^") return "\\^";
-		if (c === "+") return "\\+";
-		if (c === "?") return "\\?";
-		if (c === "!") return "\\!";
-		if (c === "@") return "\\@";
-		if (c === "'") return "\\'";
-		if (c === "\"") return "\\\"";
-		if (c === "`") return "\\`";
-		if (c === ";") return "\\;";
-		if (c === "<") return "\\<";
-		if (c === ">") return "\\>";
-		if (c === "{") return "\\{";
-		if (c === "}") return "\\}";
-		if (c === "|") return "\\|";
-		if (c === "\\") return "\\\\";
-		return "\\" + c;
-	});
+	return null;
 }
 /**
-* staticUtility: A helper that registers a utility name and an array of CSS declaration pairs directly to the registry
-*
-* @example
-* ```
-*   staticUtility('block', [['display', 'block']]);
-*   staticUtility('hidden', [['display', 'none']]);
-*   staticUtility('space-x-px', [
-*     [
-*       '& > :not([hidden]) ~ :not([hidden])', // selector
-*       [
-*         ['margin-inline-start', '1px'], // [prop, value]
-*         ['margin-inline-end', '1px'], // [prop, value]
-*       ],
-*     ],
-*   ]);
-* ```
-* 
-* @param name The name of the utility
-* @param decls The declarations of the utility
-* @param opts The options of the utility
+* Returns the input if it is a valid non-negative integer string, else null.
 * 
-* @returns {void}
+* @example
+* parseNumber("10") // "10"
+* parseNumber("-10") // "-10"
+* parseNumber("10.5") // "10.5"
 */
-function staticUtility(name, decls, opts, ctx) {
-	registerUtility({
-		name,
-		match: (className) => {
-			return className === name;
-		},
-		handler: (value) => {
-			return decls.flatMap((params) => {
-				if (params.type) return [params];
-				if (typeof params === "function") return [params(value)];
-				const [a, b] = params;
-				if (typeof b === "string") return [decl(a, b)];
-				else if (Array.isArray(b)) return [rule(a, b.map(([prop, value]) => decl(prop, value)))];
-				return [];
-			});
-		},
-		description: opts?.description,
-		category: opts?.category,
-		priority: opts?.priority
-	}, ctx);
+function parseNumber(input) {
+	return /^-?\d+(?:\.\d+)?$/.test(input) ? input : null;
 }
 /**
-* functionalUtility: A helper that registers dynamic utilities (theme, arbitrary, custom, negative, fraction, etc.) directly
-*
-* Example:
-*   functionalUtility({
-*     name: 'z',
-*     supportsNegative: true,
-*     themeKeys: ['--z-index'],
-*     handleBareValue: ({ value }) => isPositiveInteger(value) ? value : null,
-*     handle: (value) => [decl('z-index', value)],
-*     description: 'z-index utility',
-*     category: 'layout',
-*   });
+* Returns the input if it is a valid length string, else null.
 */
+function parseLength(input) {
+	return /^\d+(px|em|rem|vh|vw|vmin|vmax|%|in|cm|mm|pt|pc|ex|ch|fr)$/.test(input) ? input : null;
+}
 /**
-* #300: a theme key that no built-in utility names (`theme.extend.borderRadius.card`) still resolves, as in
-* Tailwind 4 where `--radius-card` gives `rounded-card`. Only word keys that start with a letter (numbers stay
-* bare values), never `DEFAULT`; unknown keys return null so the utility emits nothing (#213).
+* Unified parser for fraction or number, with options for percent or repeat syntax.
+* - percent: if true, returns percentage for fraction (e.g., '1/2' -> '50%')
+* - repeat: if true, returns repeat() for number (e.g., '3' -> 'repeat(3, minmax(0, 1fr))')
 */
-function themeKeyEntry(ctx, namespace, key) {
-	if (key === "DEFAULT" || !/^[a-zA-Z][\w-]*$/.test(key) || typeof ctx?.theme !== "function") return void 0;
-	const table = ctx.theme(namespace);
-	if (!table || typeof table !== "object" || !Object.prototype.hasOwnProperty.call(table, key)) return void 0;
-	return table[key] ?? void 0;
-}
-/** #300: the literal value of `theme.<namespace>.<key>` when it is a string, else null. */
-function themeKeyValue(ctx, namespace, key) {
-	const v = themeKeyEntry(ctx, namespace, key);
-	return typeof v === "string" ? v : null;
-}
-/** #300: `var(--<varPrefix>-<key>)` when `theme.<namespace>.<key>` exists (the :root var BaroCSS emits for it), else null. */
-function themeKeyVar(ctx, namespace, key, varPrefix) {
-	return themeKeyEntry(ctx, namespace, key) === void 0 ? null : `var(--${varPrefix}-${key})`;
-}
-/** #261: `var(--spacing-<key>)` for a named (non-numeric) `theme.spacing` key, else null. */
-function spacingKeyValue(ctx, key, negative) {
-	if (key === "px" || !/^[a-zA-Z][\w-]*$/.test(key) || ctx.theme("spacing", key) == null) return null;
-	const ref = `var(--spacing-${key})`;
-	return negative ? `calc(${ref} * -1)` : ref;
+function parseFractionOrNumber(value, opts = {}) {
+	if (/^\d+$/.test(value)) {
+		if (opts.repeat) return `repeat(${value}, minmax(0, 1fr))`;
+		return value;
+	}
+	if (value.includes("/")) {
+		const [numerator, denominator] = value.split("/").map(Number);
+		if (!isNaN(numerator) && !isNaN(denominator) && denominator !== 0) {
+			const result = numerator / denominator;
+			if (opts.percent) return `${result * 100}%`;
+			return result.toString();
+		}
+	}
+	return null;
 }
-function functionalUtility(opts, ctx) {
-	registerUtility({
-		name: opts.name,
-		match: (className) => className.startsWith(opts.name + "-"),
-		handler: (value, ctx, token, _options) => {
-			let finalValue = value;
-			const parsedUtility = token;
-			const extra = { opacity: token.opacity };
-			if (opts.supportsOpacity && !token.arbitrary && !token.customProperty && value.includes("/")) {
-				const list = value.split("/");
-				if (list.length >= 2) {
-					extra.opacity = list.pop();
-					finalValue = list.join("/");
-				}
-			}
-			if (opts.supportsArbitrary && parsedUtility.arbitrary) {
-				const processedValue = normalizeMathSpacing(expandThemeFunctions(finalValue.replace(/_/g, " ")));
-				if (opts.handle) {
-					const result = opts.handle(processedValue, ctx, token, extra);
-					if (result) return result;
-				}
-				if (opts.prop) return [decl(opts.prop, processedValue)];
-				return [];
-			}
-			if (opts.supportsCustomProperty && parsedUtility.customProperty) {
-				if (opts.handleCustomProperty) return opts.handleCustomProperty(finalValue, ctx, token, extra);
-				const customValue = `var(${finalValue})`;
-				if (opts.handle) {
-					const result = opts.handle(customValue, ctx, token, extra);
-					if (result) return result;
-				}
-				if (opts.prop) return [decl(opts.prop, customValue)];
-				return [];
-			}
-			let themeValue;
-			if (opts.themeKey && ctx.theme) themeValue = themeScalar(ctx.theme(opts.themeKey, finalValue));
-			let namespace = themeValue !== void 0 ? opts.themeKey : void 0;
-			if (!themeValue && opts.themeKeys && ctx.theme) for (const key of opts.themeKeys) {
-				themeValue = themeScalar(ctx.theme(key, finalValue));
-				if (themeValue !== void 0) {
-					namespace = key;
-					break;
-				}
-			}
-			if (themeValue !== void 0) {
-				extra.themeNamespace = namespace;
-				extra.themeKey = finalValue;
-				if (namespace === "colors" || !(opts.themeKeys ?? [opts.themeKey]).includes("colors")) extra.realThemeValue = finalValue;
-				finalValue = themeValue;
-				if (opts.prop) return [decl(opts.prop, finalValue)];
-				if (opts.handle) {
-					const result = opts.handle(finalValue, ctx, token, extra);
-					if (result) return result;
+var CSS_COLOR_NAMES = /* @__PURE__ */ new Set([
+	"aliceblue",
+	"antiquewhite",
+	"aqua",
+	"aquamarine",
+	"azure",
+	"beige",
+	"bisque",
+	"black",
+	"blanchedalmond",
+	"blue",
+	"blueviolet",
+	"brown",
+	"burlywood",
+	"cadetblue",
+	"chartreuse",
+	"chocolate",
+	"coral",
+	"cornflowerblue",
+	"cornsilk",
+	"crimson",
+	"cyan",
+	"darkblue",
+	"darkcyan",
+	"darkgoldenrod",
+	"darkgray",
+	"darkgreen",
+	"darkgrey",
+	"darkkhaki",
+	"darkmagenta",
+	"darkolivegreen",
+	"darkorange",
+	"darkorchid",
+	"darkred",
+	"darksalmon",
+	"darkseagreen",
+	"darkslateblue",
+	"darkslategray",
+	"darkslategrey",
+	"darkturquoise",
+	"darkviolet",
+	"deeppink",
+	"deepskyblue",
+	"dimgray",
+	"dimgrey",
+	"dodgerblue",
+	"firebrick",
+	"floralwhite",
+	"forestgreen",
+	"fuchsia",
+	"gainsboro",
+	"ghostwhite",
+	"gold",
+	"goldenrod",
+	"gray",
+	"grey",
+	"green",
+	"greenyellow",
+	"honeydew",
+	"hotpink",
+	"indianred",
+	"indigo",
+	"ivory",
+	"khaki",
+	"lavender",
+	"lavenderblush",
+	"lawngreen",
+	"lemonchiffon",
+	"lightblue",
+	"lightcoral",
+	"lightcyan",
+	"lightgoldenrodyellow",
+	"lightgray",
+	"lightgreen",
+	"lightgrey",
+	"lightpink",
+	"lightsalmon",
+	"lightseagreen",
+	"lightskyblue",
+	"lightslategray",
+	"lightslategrey",
+	"lightsteelblue",
+	"lightyellow",
+	"lime",
+	"limegreen",
+	"linen",
+	"magenta",
+	"maroon",
+	"mediumaquamarine",
+	"mediumblue",
+	"mediumorchid",
+	"mediumpurple",
+	"mediumseagreen",
+	"mediumslateblue",
+	"mediumspringgreen",
+	"mediumturquoise",
+	"mediumvioletred",
+	"midnightblue",
+	"mintcream",
+	"mistyrose",
+	"moccasin",
+	"navajowhite",
+	"navy",
+	"oldlace",
+	"olive",
+	"olivedrab",
+	"orange",
+	"orangered",
+	"orchid",
+	"palegoldenrod",
+	"palegreen",
+	"paleturquoise",
+	"palevioletred",
+	"papayawhip",
+	"peachpuff",
+	"peru",
+	"pink",
+	"plum",
+	"powderblue",
+	"purple",
+	"red",
+	"rosybrown",
+	"royalblue",
+	"saddlebrown",
+	"salmon",
+	"sandybrown",
+	"seagreen",
+	"seashell",
+	"sienna",
+	"silver",
+	"skyblue",
+	"slateblue",
+	"slategray",
+	"slategrey",
+	"snow",
+	"springgreen",
+	"steelblue",
+	"tan",
+	"teal",
+	"thistle",
+	"tomato",
+	"turquoise",
+	"violet",
+	"wheat",
+	"white",
+	"whitesmoke",
+	"yellow",
+	"yellowgreen"
+]);
+/**
+* Returns the input if it is a valid color string, else null.
+*
+* #rgb, #rgba, #rrggbb, #rrggbbaa, rgb(r, g, b), rgb(r, g, b, a), hsl(h, s, l), hsl(h, s, l, a), hwb(h, w, b), hwb(h, w, b, a), lab(l, a, b), lab(l, a, b, a), lch(l, c, h), lch(l, c, h, a), oklab(l, a, b), oklab(l, a, b, a), oklch(l, c, h), oklch(l, c, h, a), color-mix(in oklab, var(--color-blue-500) 60%, transparent)
+*/
+function parseColor(input) {
+	if (CSS_COLOR_NAMES.has(input.toLowerCase())) return input;
+	if (input.startsWith("color:var(")) return input.slice(6);
+	if (input.startsWith("color:")) return parseColor(input.slice(6));
+	if (input.startsWith("#") && input.length === 4) return `#${input.slice(1)}`;
+	if (input.startsWith("#") && input.length === 5) return `#${input.slice(1)}`;
+	if (input.startsWith("#") && input.length === 7) return `#${input.slice(1)}`;
+	if (input.startsWith("#") && input.length === 9) return `#${input.slice(1)}`;
+	if (input.startsWith("rgb(")) return input.slice(4, -1);
+	if (input.startsWith("rgba(")) return input.slice(5, -1);
+	if (input.startsWith("hsl(")) return input.slice(4, -1);
+	if (input.startsWith("hsla(")) return input.slice(5, -1);
+	if (input.startsWith("hwb(")) return input.slice(4, -1);
+	if (input.startsWith("lab(")) return input.slice(4, -1);
+	if (input.startsWith("lch(")) return input.slice(4, -1);
+	if (input.startsWith("oklab(")) return input.slice(5, -1);
+	if (input.startsWith("oklch(")) return input.slice(6, -1);
+	if (input.startsWith("color-mix(")) return input.slice(9, -1);
+	return null;
+}
+var COLOR_KEYWORDS = /* @__PURE__ */ new Set([
+	"inherit",
+	"currentcolor",
+	"transparent"
+]);
+/**
+* Declarations for a theme colour (#228), as Tailwind v4 emits them: `var(--color-<key>)` so runtime theme
+* overrides apply; with an opacity modifier, a literal srgb color-mix fallback plus an oklab color-mix of the var.
+*/
+function themeColorDecls(prop, value, extra) {
+	const key = String(extra.realThemeValue);
+	const ref = COLOR_KEYWORDS.has(value.toLowerCase()) || value.startsWith("var(") || !/^[\w-]+$/.test(key) ? value : `var(--color-${key})`;
+	if (!extra.opacity) return [decl(prop, ref)];
+	const alpha = normalizeAlpha(String(extra.opacity));
+	if (!alpha) return [];
+	const supports = (amount) => atRule("supports", "(color:color-mix(in lab, red, red))", [decl(prop, `color-mix(in oklab, ${ref} ${amount}, transparent)`)]);
+	if (alpha.isVar) return [decl(prop, value), supports(alpha.amount)];
+	return [decl(prop, `color-mix(in srgb, ${value} ${alpha.amount}, transparent)`), supports(alpha.amount)];
+}
+/**
+* Opacity modifier → color-mix amount, as Tailwind v4 does: `50` → `50%`, `[37%]` → `37%`, `[0.5]` / `[.8]` → `50%` /
+* `80%` (a bracketed number ≤ 1 is a fraction), `[var(--a)]` / `(--a)` → `var(--a)`.
+*/
+function normalizeAlpha(raw) {
+	const v = raw.trim();
+	const cp = /^\((--[\w-]+)\)$/.exec(v) ?? /^\[var\((--[\w-]+)\)\]$/.exec(v);
+	if (cp) return {
+		amount: `var(${cp[1]})`,
+		isVar: true
+	};
+	const m = /^(\[)?(\d+(?:\.\d+)?|\.\d+)(%)?(\])?$/.exec(v);
+	if (!m || !!m[1] !== !!m[4] || m[3] && !m[1]) return null;
+	const n = Number(m[2]);
+	return {
+		amount: `${+(m[3] ? n : m[1] && n <= 1 ? n * 100 : n).toFixed(4)}%`,
+		isVar: false
+	};
+}
+var MIX_SUPPORTS = "(color:color-mix(in lab, red, red))";
+var COLOR_PROP = /(^|-)color$|^(fill|stroke)$|^--baro-gradient-(from|via|to)$/;
+/**
+* #393: an arbitrary or custom-property colour with an opacity modifier, as Tailwind 4.3.3 emits it: a literal
+* colour with a literal alpha mixes directly (`color-mix(in oklab, #f00 50%, transparent)`); a var colour or a var
+* alpha keeps the plain colour and mixes only under `@supports`. Returns null for an alpha it can't express.
+*/
+function colorAlphaDecls(prop, color, opacity) {
+	const alpha = normalizeAlpha(opacity);
+	if (!alpha) return null;
+	const mix = `color-mix(in oklab, ${color} ${alpha.amount}, transparent)`;
+	if (alpha.isVar || color.startsWith("var(")) return [decl(prop, color), atRule("supports", MIX_SUPPORTS, [decl(prop, mix)])];
+	return [decl(prop, mix)];
+}
+/**
+* #393: applies an opacity modifier to every declaration of `nodes` whose value is one of `colors` (the colour an
+* arbitrary / custom-property utility emitted without the modifier). Returns null when none matched or the alpha
+* is invalid, so the caller emits nothing rather than dropping the modifier or writing a malformed value.
+*/
+function applyColorAlpha(nodes, colors, opacity) {
+	let matched = false;
+	let invalid = false;
+	const walk = (list) => list.flatMap((n) => {
+		if (n.type === "decl" && typeof n.value === "string" && colors.includes(n.value)) {
+			matched = true;
+			const out = COLOR_PROP.test(n.prop) ? colorAlphaDecls(n.prop, n.value, opacity) : null;
+			if (!out) invalid = true;
+			return out ?? [];
+		}
+		if (n.type === "at-rule" || n.type === "rule" || n.type === "style-rule" || n.type === "at-root") return [{
+			...n,
+			nodes: walk(n.nodes)
+		}];
+		if (n.type === "wrap") return [{
+			...n,
+			items: walk(n.items)
+		}];
+		return [n];
+	});
+	const out = walk(nodes);
+	return matched && !invalid ? out : null;
+}
+//#endregion
+//#region src/core/registry.ts
+/** #393: a handler result meaning "this class is invalid": the engine stops trying other registrations. */
+var REJECT_CLASS = Object.freeze([]);
+var utilityRegistry = [];
+function registerUtility(util, ctx) {
+	const state = ctx && getContextState(ctx);
+	if (ctx && !state) throw new Error("Utility registration requires a context from createContext");
+	(state?.utilities || utilityRegistry).push(util);
+	if (ctx) clearContextCaches(ctx);
+	else {
+		parseResultCache.clear();
+		utilityCache.clear();
+	}
+}
+function getUtility(ctx) {
+	return ctx && getContextState(ctx)?.utilities || utilityRegistry;
+}
+var modifierRegistry = [];
+/**
+* staticModifier: A helper that registers a modifier name and an array of CSS selectors directly to the registry
+* 
+* @example
+* ```
+* staticModifier('disabled', ['&:disabled'], { source: 'pseudo' });
+* ```
+* 
+* @param name The name of the modifier
+* @param selectors The selectors of the modifier
+* @param options The options of the modifier
+* 
+* @returns {void}
+*/
+function staticModifier(name, selectors, options = {}, ctx) {
+	registerModifier({
+		name,
+		match: (mod) => mod === name,
+		modifySelector: ({ ..._rest }) => {
+			return selectors.map((sel) => ({
+				selector: sel,
+				source: options.source
+			}));
+		},
+		...options
+	}, ctx);
+}
+function functionalModifier(match, modifySelector, wrap, options = {}, ctx) {
+	registerModifier({
+		match,
+		modifySelector,
+		wrap,
+		...options
+	}, ctx);
+}
+function registerModifier(modifier, ctx) {
+	const state = ctx && getContextState(ctx);
+	if (ctx && !state) throw new Error("Modifier registration requires a context from createContext");
+	(state?.modifiers || modifierRegistry).push(modifier);
+	if (ctx) clearContextCaches(ctx);
+}
+function getModifier(ctx) {
+	return ctx && getContextState(ctx)?.modifiers || modifierRegistry;
+}
+var ESCAPE_REGEX = /[^A-Za-z0-9_-]/gu;
+var UNSAFE_RAW = /^[\s\p{C}\p{Z}]$/u;
+function escapeClassName(className) {
+	if (className === "-") return "\\-";
+	const lead = /^-?[0-9]/.exec(className);
+	if (lead) {
+		const i = lead[0].length - 1;
+		return className.slice(0, i) + "\\" + className.charCodeAt(i).toString(16) + " " + escapeRest(className.slice(i + 1));
+	}
+	return escapeRest(className);
+}
+function escapeRest(className) {
+	return className.replace(ESCAPE_REGEX, (c) => {
+		if (c === " ") return "\\x20 ";
+		if (c === ".") return "\\.";
+		if (c === "/") return "\\/";
+		if (c === ":") return "\\:";
+		if (c === "[") return "\\[";
+		if (c === "]") return "\\]";
+		if (c === "(") return "\\(";
+		if (c === ")") return "\\)";
+		if (c === "%") return "\\%";
+		if (c === "#") return "\\#";
+		if (c === ",") return "\\,";
+		if (c === "=") return "\\=";
+		if (c === "&") return "\\&";
+		if (c === "~") return "\\~";
+		if (c === "*") return "\\*";
+		if (c === "$") return "\\$";
+		if (c === "^") return "\\^";
+		if (c === "+") return "\\+";
+		if (c === "?") return "\\?";
+		if (c === "!") return "\\!";
+		if (c === "@") return "\\@";
+		if (c === "'") return "\\'";
+		if (c === "\"") return "\\\"";
+		if (c === "`") return "\\`";
+		if (c === ";") return "\\;";
+		if (c === "<") return "\\<";
+		if (c === ">") return "\\>";
+		if (c === "{") return "\\{";
+		if (c === "}") return "\\}";
+		if (c === "|") return "\\|";
+		if (c === "\\") return "\\\\";
+		if (UNSAFE_RAW.test(c)) return "\\" + c.codePointAt(0).toString(16) + " ";
+		return "\\" + c;
+	});
+}
+/**
+* staticUtility: A helper that registers a utility name and an array of CSS declaration pairs directly to the registry
+*
+* @example
+* ```
+*   staticUtility('block', [['display', 'block']]);
+*   staticUtility('hidden', [['display', 'none']]);
+*   staticUtility('space-x-px', [
+*     [
+*       '& > :not([hidden]) ~ :not([hidden])', // selector
+*       [
+*         ['margin-inline-start', '1px'], // [prop, value]
+*         ['margin-inline-end', '1px'], // [prop, value]
+*       ],
+*     ],
+*   ]);
+* ```
+* 
+* @param name The name of the utility
+* @param decls The declarations of the utility
+* @param opts The options of the utility
+* 
+* @returns {void}
+*/
+function staticUtility(name, decls, opts, ctx) {
+	registerUtility({
+		name,
+		match: (className) => {
+			return className === name;
+		},
+		handler: (value) => {
+			return decls.flatMap((params) => {
+				if (params.type) return [params];
+				if (typeof params === "function") return [params(value)];
+				const [a, b] = params;
+				if (typeof b === "string") return [decl(a, b)];
+				else if (Array.isArray(b)) return [rule(a, b.map(([prop, value]) => decl(prop, value)))];
+				return [];
+			});
+		},
+		description: opts?.description,
+		category: opts?.category,
+		priority: opts?.priority
+	}, ctx);
+}
+/**
+* functionalUtility: A helper that registers dynamic utilities (theme, arbitrary, custom, negative, fraction, etc.) directly
+*
+* Example:
+*   functionalUtility({
+*     name: 'z',
+*     supportsNegative: true,
+*     themeKeys: ['--z-index'],
+*     handleBareValue: ({ value }) => isPositiveInteger(value) ? value : null,
+*     handle: (value) => [decl('z-index', value)],
+*     description: 'z-index utility',
+*     category: 'layout',
+*   });
+*/
+/**
+* #300: a theme key that no built-in utility names (`theme.extend.borderRadius.card`) still resolves, as in
+* Tailwind 4 where `--radius-card` gives `rounded-card`. Only word keys that start with a letter (numbers stay
+* bare values), never `DEFAULT`; unknown keys return null so the utility emits nothing (#213).
+*/
+function themeKeyEntry(ctx, namespace, key) {
+	if (key === "DEFAULT" || !/^[a-zA-Z][\w-]*$/.test(key) || typeof ctx?.theme !== "function") return void 0;
+	const table = ctx.theme(namespace);
+	if (!table || typeof table !== "object" || !Object.prototype.hasOwnProperty.call(table, key)) return void 0;
+	return table[key] ?? void 0;
+}
+/** #300: the literal value of `theme.<namespace>.<key>` when it is a string, else null. */
+function themeKeyValue(ctx, namespace, key) {
+	const v = themeKeyEntry(ctx, namespace, key);
+	return typeof v === "string" ? v : null;
+}
+/** #300: `var(--<varPrefix>-<key>)` when `theme.<namespace>.<key>` exists (the :root var BaroCSS emits for it), else null. */
+function themeKeyVar(ctx, namespace, key, varPrefix) {
+	return themeKeyEntry(ctx, namespace, key) === void 0 ? null : `var(--${varPrefix}-${key})`;
+}
+/** #261: `var(--spacing-<key>)` for a named (non-numeric) `theme.spacing` key, else null. */
+function spacingKeyValue(ctx, key, negative) {
+	if (key === "px" || !/^[a-zA-Z][\w-]*$/.test(key) || ctx.theme("spacing", key) == null) return null;
+	const ref = `var(--spacing-${key})`;
+	return negative ? `calc(${ref} * -1)` : ref;
+}
+function functionalUtility(opts, ctx) {
+	registerUtility({
+		name: opts.name,
+		match: (className) => className.startsWith(opts.name + "-"),
+		handler: (value, ctx, token, _options) => {
+			let finalValue = value;
+			const parsedUtility = token;
+			const extra = { opacity: token.opacity };
+			if (opts.supportsOpacity && !token.arbitrary && !token.customProperty && value.includes("/")) {
+				const list = value.split("/");
+				if (list.length >= 2) {
+					extra.opacity = list.pop();
+					finalValue = list.join("/");
+				}
+			}
+			const splitModifier = !token.arbitrary && !token.customProperty && value.includes("/");
+			if (opts.supportsOpacity && (extra.opacity || splitModifier) && !normalizeAlpha(String(extra.opacity ?? ""))) {
+				const v = parsedUtility.arbitrary ? finalValue.replace(/_/g, " ") : finalValue;
+				return (parsedUtility.customProperty ? !/^[\w-]+:/.test(v) || v.startsWith("color:") : parsedUtility.arbitrary ? !!parseColor(v) || /^var\(--/.test(v) || v.startsWith("color:") : false) ? REJECT_CLASS : [];
+			}
+			const direct = (x) => {
+				if (opts.supportsArbitrary && parsedUtility.arbitrary) {
+					const processedValue = normalizeMathSpacing(expandThemeFunctions(finalValue.replace(/_/g, " ")));
+					if (opts.handle) {
+						const result = opts.handle(processedValue, ctx, token, x);
+						if (result) return result;
+					}
+					if (opts.prop) return [decl(opts.prop, processedValue)];
+					return [];
+				}
+				if (opts.supportsCustomProperty && parsedUtility.customProperty) {
+					if (opts.handleCustomProperty) return opts.handleCustomProperty(finalValue, ctx, token, x) ?? null;
+					const customValue = `var(${finalValue})`;
+					if (opts.handle) {
+						const result = opts.handle(customValue, ctx, token, x);
+						if (result) return result;
+					}
+					if (opts.prop) return [decl(opts.prop, customValue)];
+					return [];
+				}
+				return null;
+			};
+			if (opts.supportsArbitrary && parsedUtility.arbitrary || opts.supportsCustomProperty && parsedUtility.customProperty) {
+				const result = direct(extra);
+				if (opts.supportsOpacity && !opts.ownsOpacity && extra.opacity && result?.length) {
+					const raw = parsedUtility.arbitrary ? normalizeMathSpacing(expandThemeFunctions(finalValue.replace(/_/g, " "))) : `var(${finalValue})`;
+					const hint = parsedUtility.arbitrary ? /^color:(.+)$/.exec(raw)?.[1] : /^color:(--.+)$/.exec(finalValue)?.[1];
+					return applyColorAlpha(result, [raw, ...hint ? [hint, `var(${hint})`] : []], String(extra.opacity)) ?? [];
+				}
+				return result;
+			}
+			let themeValue;
+			if (opts.themeKey && ctx.theme) themeValue = themeScalar(ctx.theme(opts.themeKey, finalValue));
+			let namespace = themeValue !== void 0 ? opts.themeKey : void 0;
+			if (!themeValue && opts.themeKeys && ctx.theme) for (const key of opts.themeKeys) {
+				themeValue = themeScalar(ctx.theme(key, finalValue));
+				if (themeValue !== void 0) {
+					namespace = key;
+					break;
+				}
+			}
+			if (themeValue !== void 0) {
+				extra.themeNamespace = namespace;
+				extra.themeKey = finalValue;
+				if (namespace === "colors" || !(opts.themeKeys ?? [opts.themeKey]).includes("colors")) extra.realThemeValue = finalValue;
+				finalValue = themeValue;
+				if (opts.prop) return [decl(opts.prop, finalValue)];
+				if (opts.handle) {
+					const result = opts.handle(finalValue, ctx, token, extra);
+					if (result) return result;
 				}
 				return [];
 			}
@@ -911,6 +1235,46 @@ function isBalancedPrelude(text) {
 	return stack.length === 0 && !quote;
 }
 /**
+* #392: true when every top-level comma part of an emitted selector names `escapedClass` (a class selector
+* already escaped with escapeClassName, including its leading dot) as a whole class token, or, when
+* `allowNesting` is set, uses the nesting selector `&`. Escapes, quoted strings and bracket groups are skipped
+* when splitting. Used as a defence-in-depth serializer check: a rule scoped to no generating class is dropped.
+*/
+function isScopedSelector(selector, escapedClass, allowNesting = false) {
+	const parts = [];
+	let depth = 0;
+	let quote = "";
+	let start = 0;
+	for (let i = 0; i < selector.length; i++) {
+		const c = selector[i];
+		if (c === "\\") {
+			i++;
+			continue;
+		}
+		if (quote) {
+			if (c === quote) quote = "";
+			continue;
+		}
+		if (c === "\"" || c === "'") quote = c;
+		else if (c === "(" || c === "[") depth++;
+		else if (c === ")" || c === "]") depth--;
+		else if (c === "," && depth === 0) {
+			parts.push(selector.slice(start, i));
+			start = i + 1;
+		}
+	}
+	parts.push(selector.slice(start));
+	return parts.every((part) => {
+		if (allowNesting && part.includes("&")) return true;
+		for (let at = part.indexOf(escapedClass); at !== -1; at = part.indexOf(escapedClass, at + 1)) {
+			if (at > 0 && part[at - 1] === "\\") continue;
+			const next = part[at + escapedClass.length];
+			if (escapedClass.endsWith(" ") || next === void 0 || !/[\w\-\\\u0080-\uffff]/.test(next)) return true;
+		}
+		return false;
+	});
+}
+/**
 * #323: true when emitted text contains a markup end-tag opener (less-than then slash). Generated CSS can be
 * placed inside an HTML style element, where that sequence could end the element early. CSS escapes in the
 * output never form it, and a lone less-than (range media queries) stays allowed.
@@ -1002,6 +1366,13 @@ function parseModifier(value) {
 function nameSort(a, b) {
 	return b.name.length - a.name.length;
 }
+/** #393: index of the `close` that balances the value opened just before `s` (depth starts at 1), or -1. */
+function matchingClose(s, open, close) {
+	let depth = 1;
+	for (let i = 0; i < s.length; i++) if (s[i] === open) depth++;
+	else if (s[i] === close && --depth === 0) return i;
+	return -1;
+}
 /**
 * Parse utility token
 */
@@ -1030,15 +1401,27 @@ function parseUtility(value, ctx) {
 	if (value.startsWith("-")) negative = true;
 	if (value.includes("-[")) {
 		[prefix, utilityValue] = value.split("-[");
-		const closeIdx = utilityValue.lastIndexOf("]");
+		const closeIdx = matchingClose(utilityValue, "[", "]");
 		if (closeIdx !== -1 && closeIdx < utilityValue.length - 1 && utilityValue[closeIdx + 1] === "/") {
 			opacity = utilityValue.slice(closeIdx + 2);
+			if (!opacity) return {
+				prefix: "",
+				value: ""
+			};
 			utilityValue = utilityValue.slice(0, closeIdx);
 		} else utilityValue = utilityValue.replace(/]$/, "");
 		arbitrary = true;
 	} else if (value.includes("-(")) {
 		[prefix, utilityValue] = value.split("-(");
-		utilityValue = utilityValue.replace(/\)$/, "");
+		const closeIdx = matchingClose(utilityValue, "(", ")");
+		if (closeIdx !== -1 && closeIdx < utilityValue.length - 1 && utilityValue[closeIdx + 1] === "/") {
+			opacity = utilityValue.slice(closeIdx + 2);
+			if (!opacity) return {
+				prefix: "",
+				value: ""
+			};
+			utilityValue = utilityValue.slice(0, closeIdx);
+		} else utilityValue = utilityValue.replace(/\)$/, "");
 		customProperty = true;
 	} else {
 		const sortedUtilities = [...getUtility(ctx)].sort(nameSort);
@@ -1090,6 +1473,13 @@ var uniqueDescriptors = (node) => {
 	const seen = /* @__PURE__ */ new Set();
 	return node.nodes.filter((c) => c.type !== "decl" || !seen.has(c.prop) && !!seen.add(c.prop));
 };
+var NO_IMPORTANT_AT = /* @__PURE__ */ new Set([
+	"property",
+	"font-face",
+	"keyframes",
+	"-webkit-keyframes",
+	"counter-style"
+]);
 var isSafeDecl = (prop, value) => isStructureSafeValue(String(prop)) && isStructureSafeValue(String(value ?? "")) && !hasHtmlEndTagOpener(String(prop)) && !hasHtmlEndTagOpener(String(value ?? ""));
 var importantPrefix = "!important";
 /**
@@ -1104,6 +1494,12 @@ function astToCss(ast, baseSelector, opts, _indent = "") {
 	const indent = _indent;
 	const nextIndent = _indent + "  ";
 	const importantString = opts?.important ?? false ? ` ${importantPrefix}` : "";
+	const nestedOpts = opts ? {
+		...opts,
+		nested: true
+	} : opts;
+	const scopeClass = opts?.scope ? "." + escapeClassName(opts.scope) : "";
+	const inScope = (sel) => !scopeClass || isScopedSelector(sel, scopeClass, !!opts?.nested);
 	if (!ast || ast.length === 0) {
 		debugWarn("[astToCss] Empty AST received:", {
 			ast,
@@ -1146,18 +1542,23 @@ function astToCss(ast, baseSelector, opts, _indent = "") {
 						else return escBase + (sel.startsWith(".") ? "" : " ") + sel;
 					}).join(", ");
 				}
-				if (!isSafePrelude(selector)) return "";
-				if (minify) return `${indent}${selector}{${astToCss(node.nodes, baseSelector, opts, nextIndent)}}`;
-				else return `${indent}${selector} {\n${astToCss(node.nodes, baseSelector, opts, nextIndent)}${indent}}`;
+				if (!isSafePrelude(selector) || !inScope(selector)) return "";
+				if (minify) return `${indent}${selector}{${astToCss(node.nodes, baseSelector, nestedOpts, nextIndent)}}`;
+				else return `${indent}${selector} {\n${astToCss(node.nodes, baseSelector, nestedOpts, nextIndent)}${indent}}`;
 			}
 			case "style-rule":
-				if (!isSafePrelude(node.selector)) return "";
-				if (minify) return `${indent}${node.selector} {${astToCss(node.nodes, baseSelector, opts, nextIndent)}}`;
-				else return `${indent}${node.selector} {\n${astToCss(node.nodes, baseSelector, opts, nextIndent)}${indent}}`;
-			case "at-rule":
+				if (!isSafePrelude(node.selector) || !inScope(node.selector)) return "";
+				if (minify) return `${indent}${node.selector} {${astToCss(node.nodes, baseSelector, nestedOpts, nextIndent)}}`;
+				else return `${indent}${node.selector} {\n${astToCss(node.nodes, baseSelector, nestedOpts, nextIndent)}${indent}}`;
+			case "at-rule": {
 				if (!isSafePrelude(node.name) || !isSafePrelude(node.params)) return "";
-				if (minify) return `${indent}@${node.name} ${node.params}{${astToCss(node.nodes, baseSelector, opts, nextIndent)}}`;
-				else return `${indent}@${node.name} ${node.params} {\n${astToCss(node.nodes, baseSelector, opts, nextIndent)}${indent}}`;
+				const atOpts = opts?.important && NO_IMPORTANT_AT.has(node.name) ? {
+					...opts,
+					important: false
+				} : opts;
+				if (minify) return `${indent}@${node.name} ${node.params}{${astToCss(node.nodes, baseSelector, atOpts, nextIndent)}}`;
+				else return `${indent}@${node.name} ${node.params} {\n${astToCss(node.nodes, baseSelector, atOpts, nextIndent)}${indent}}`;
+			}
 			case "comment": return minify ? "" : `${indent}/* ${node.text} */`;
 			case "raw": return `${indent}${node.value}`;
 			default:
@@ -1516,6 +1917,552 @@ function applyVarPrefix(ast, ctx) {
 	return walk(ast);
 }
 //#endregion
+//#region src/core/tw-property-order.ts
+var TW_PROPERTY_ORDER = [
+	"container-type",
+	"pointer-events",
+	"visibility",
+	"position",
+	"inset",
+	"inset-inline",
+	"inset-block",
+	"inset-inline-start",
+	"inset-inline-end",
+	"inset-block-start",
+	"inset-block-end",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"isolation",
+	"z-index",
+	"order",
+	"grid-column",
+	"grid-column-start",
+	"grid-column-end",
+	"grid-row",
+	"grid-row-start",
+	"grid-row-end",
+	"float",
+	"clear",
+	"--tw-container-component",
+	"margin",
+	"margin-inline",
+	"margin-block",
+	"margin-inline-start",
+	"margin-inline-end",
+	"margin-block-start",
+	"margin-block-end",
+	"margin-top",
+	"margin-right",
+	"margin-bottom",
+	"margin-left",
+	"box-sizing",
+	"display",
+	"field-sizing",
+	"aspect-ratio",
+	"height",
+	"max-height",
+	"min-height",
+	"width",
+	"max-width",
+	"min-width",
+	"flex",
+	"flex-shrink",
+	"flex-grow",
+	"flex-basis",
+	"table-layout",
+	"caption-side",
+	"border-collapse",
+	"border-spacing",
+	"transform-origin",
+	"translate",
+	"--tw-translate-x",
+	"--tw-translate-y",
+	"--tw-translate-z",
+	"scale",
+	"--tw-scale-x",
+	"--tw-scale-y",
+	"--tw-scale-z",
+	"rotate",
+	"--tw-rotate-x",
+	"--tw-rotate-y",
+	"--tw-rotate-z",
+	"--tw-skew-x",
+	"--tw-skew-y",
+	"transform",
+	"zoom",
+	"animation",
+	"cursor",
+	"touch-action",
+	"--tw-pan-x",
+	"--tw-pan-y",
+	"--tw-pinch-zoom",
+	"resize",
+	"scroll-snap-type",
+	"--tw-scroll-snap-strictness",
+	"scroll-snap-align",
+	"scroll-snap-stop",
+	"scroll-margin",
+	"scroll-margin-inline",
+	"scroll-margin-block",
+	"scroll-margin-inline-start",
+	"scroll-margin-inline-end",
+	"scroll-margin-block-start",
+	"scroll-margin-block-end",
+	"scroll-margin-top",
+	"scroll-margin-right",
+	"scroll-margin-bottom",
+	"scroll-margin-left",
+	"scroll-padding",
+	"scroll-padding-inline",
+	"scroll-padding-block",
+	"scroll-padding-inline-start",
+	"scroll-padding-inline-end",
+	"scroll-padding-block-start",
+	"scroll-padding-block-end",
+	"scroll-padding-top",
+	"scroll-padding-right",
+	"scroll-padding-bottom",
+	"scroll-padding-left",
+	"scrollbar-width",
+	"scrollbar-color",
+	"scrollbar-gutter",
+	"list-style-position",
+	"list-style-type",
+	"list-style-image",
+	"appearance",
+	"columns",
+	"break-before",
+	"break-inside",
+	"break-after",
+	"grid-auto-columns",
+	"grid-auto-flow",
+	"grid-auto-rows",
+	"grid-template-columns",
+	"grid-template-rows",
+	"flex-direction",
+	"flex-wrap",
+	"place-content",
+	"place-items",
+	"align-content",
+	"align-items",
+	"justify-content",
+	"justify-items",
+	"gap",
+	"column-gap",
+	"row-gap",
+	"--tw-space-x-reverse",
+	"--tw-space-y-reverse",
+	"divide-x-width",
+	"divide-y-width",
+	"--tw-divide-y-reverse",
+	"divide-style",
+	"divide-color",
+	"place-self",
+	"align-self",
+	"justify-self",
+	"overflow",
+	"overflow-x",
+	"overflow-y",
+	"overscroll-behavior",
+	"overscroll-behavior-x",
+	"overscroll-behavior-y",
+	"scroll-behavior",
+	"border-radius",
+	"border-start-radius",
+	"border-end-radius",
+	"border-top-radius",
+	"border-right-radius",
+	"border-bottom-radius",
+	"border-left-radius",
+	"border-start-start-radius",
+	"border-start-end-radius",
+	"border-end-end-radius",
+	"border-end-start-radius",
+	"border-top-left-radius",
+	"border-top-right-radius",
+	"border-bottom-right-radius",
+	"border-bottom-left-radius",
+	"border-width",
+	"border-inline-width",
+	"border-block-width",
+	"border-inline-start-width",
+	"border-inline-end-width",
+	"border-block-start-width",
+	"border-block-end-width",
+	"border-top-width",
+	"border-right-width",
+	"border-bottom-width",
+	"border-left-width",
+	"border-style",
+	"border-inline-style",
+	"border-block-style",
+	"border-inline-start-style",
+	"border-inline-end-style",
+	"border-block-start-style",
+	"border-block-end-style",
+	"border-top-style",
+	"border-right-style",
+	"border-bottom-style",
+	"border-left-style",
+	"border-color",
+	"border-inline-color",
+	"border-block-color",
+	"border-inline-start-color",
+	"border-inline-end-color",
+	"border-block-start-color",
+	"border-block-end-color",
+	"border-top-color",
+	"border-right-color",
+	"border-bottom-color",
+	"border-left-color",
+	"background-color",
+	"background-image",
+	"--tw-gradient-position",
+	"--tw-gradient-stops",
+	"--tw-gradient-via-stops",
+	"--tw-gradient-from",
+	"--tw-gradient-from-position",
+	"--tw-gradient-via",
+	"--tw-gradient-via-position",
+	"--tw-gradient-to",
+	"--tw-gradient-to-position",
+	"mask-image",
+	"--tw-mask-top",
+	"--tw-mask-top-from-color",
+	"--tw-mask-top-from-position",
+	"--tw-mask-top-to-color",
+	"--tw-mask-top-to-position",
+	"--tw-mask-right",
+	"--tw-mask-right-from-color",
+	"--tw-mask-right-from-position",
+	"--tw-mask-right-to-color",
+	"--tw-mask-right-to-position",
+	"--tw-mask-bottom",
+	"--tw-mask-bottom-from-color",
+	"--tw-mask-bottom-from-position",
+	"--tw-mask-bottom-to-color",
+	"--tw-mask-bottom-to-position",
+	"--tw-mask-left",
+	"--tw-mask-left-from-color",
+	"--tw-mask-left-from-position",
+	"--tw-mask-left-to-color",
+	"--tw-mask-left-to-position",
+	"--tw-mask-linear",
+	"--tw-mask-linear-position",
+	"--tw-mask-linear-from-color",
+	"--tw-mask-linear-from-position",
+	"--tw-mask-linear-to-color",
+	"--tw-mask-linear-to-position",
+	"--tw-mask-radial",
+	"--tw-mask-radial-shape",
+	"--tw-mask-radial-size",
+	"--tw-mask-radial-position",
+	"--tw-mask-radial-from-color",
+	"--tw-mask-radial-from-position",
+	"--tw-mask-radial-to-color",
+	"--tw-mask-radial-to-position",
+	"--tw-mask-conic",
+	"--tw-mask-conic-position",
+	"--tw-mask-conic-from-color",
+	"--tw-mask-conic-from-position",
+	"--tw-mask-conic-to-color",
+	"--tw-mask-conic-to-position",
+	"box-decoration-break",
+	"background-size",
+	"background-attachment",
+	"background-clip",
+	"background-position",
+	"background-repeat",
+	"background-origin",
+	"mask-composite",
+	"mask-mode",
+	"mask-type",
+	"mask-size",
+	"mask-clip",
+	"mask-position",
+	"mask-repeat",
+	"mask-origin",
+	"fill",
+	"stroke",
+	"stroke-width",
+	"object-fit",
+	"object-position",
+	"padding",
+	"padding-inline",
+	"padding-block",
+	"padding-inline-start",
+	"padding-inline-end",
+	"padding-block-start",
+	"padding-block-end",
+	"padding-top",
+	"padding-right",
+	"padding-bottom",
+	"padding-left",
+	"text-align",
+	"text-indent",
+	"vertical-align",
+	"font-family",
+	"font-feature-settings",
+	"font-size",
+	"line-height",
+	"font-weight",
+	"letter-spacing",
+	"text-wrap",
+	"overflow-wrap",
+	"word-break",
+	"text-overflow",
+	"hyphens",
+	"white-space",
+	"tab-size",
+	"color",
+	"text-transform",
+	"font-style",
+	"font-stretch",
+	"font-variant-numeric",
+	"text-decoration-line",
+	"text-decoration-color",
+	"text-decoration-style",
+	"text-decoration-thickness",
+	"text-underline-offset",
+	"-webkit-font-smoothing",
+	"placeholder-color",
+	"caret-color",
+	"accent-color",
+	"color-scheme",
+	"opacity",
+	"background-blend-mode",
+	"mix-blend-mode",
+	"box-shadow",
+	"--tw-shadow",
+	"--tw-shadow-color",
+	"--tw-ring-shadow",
+	"--tw-ring-color",
+	"--tw-inset-shadow",
+	"--tw-inset-shadow-color",
+	"--tw-inset-ring-shadow",
+	"--tw-inset-ring-color",
+	"--tw-ring-offset-width",
+	"--tw-ring-offset-color",
+	"outline",
+	"outline-width",
+	"outline-offset",
+	"outline-color",
+	"--tw-blur",
+	"--tw-brightness",
+	"--tw-contrast",
+	"--tw-drop-shadow",
+	"--tw-grayscale",
+	"--tw-hue-rotate",
+	"--tw-invert",
+	"--tw-saturate",
+	"--tw-sepia",
+	"filter",
+	"--tw-backdrop-blur",
+	"--tw-backdrop-brightness",
+	"--tw-backdrop-contrast",
+	"--tw-backdrop-grayscale",
+	"--tw-backdrop-hue-rotate",
+	"--tw-backdrop-invert",
+	"--tw-backdrop-opacity",
+	"--tw-backdrop-saturate",
+	"--tw-backdrop-sepia",
+	"backdrop-filter",
+	"transition-property",
+	"transition-behavior",
+	"transition-delay",
+	"transition-duration",
+	"transition-timing-function",
+	"will-change",
+	"contain",
+	"content",
+	"forced-color-adjust"
+];
+//#endregion
+//#region src/core/rule-order.ts
+/**
+* Tailwind-compatible cascade order for runtime-inserted rules (#254); shared by @barocss/server (#267).
+*
+* The runtime discovers classes in DOM order, so without sorting `lg:px-8`
+* seen before `sm:px-6` would land earlier and lose at >= 1024px. Each rule
+* gets a sort key derived from its leading `@media` / `@container` preludes:
+*
+*   0  base, negated media (`not-md:` → `@media not (…)`, as Tailwind 4.3.3 orders them, #352),
+*      state media (hover), motion/contrast, unknown
+*   1  max-* breakpoints        (larger width first)
+*   2  min-* breakpoints        (smaller width first)
+*   3  @max-* container queries (larger width first)
+*   4  @min-* container queries (smaller width first)
+*   5  orientation, dark (prefers-color-scheme), print, forced-colors
+*
+* Nested at-rules (e.g. `sm:dark:`) contribute one key pair per level, so
+* `sm:` < `sm:dark:` < `md:`.
+*
+* #401: within one variant key, rules follow Tailwind 4's property order (the candidate sort of
+* Tailwind 4.3.3's `compile()`): compare the sorted TW property indices of each rule's declarations up
+* to the first difference (a rule that runs out of indices sorts last), then more declarations first,
+* then the class name (Tailwind's numeric-aware compare). Equal keys keep discovery order.
+*/
+var LEADING_AT = /^\s*@(media|container)\s+([^{]*)\{/;
+var LATE_MEDIA = /prefers-color-scheme|\bprint\b|forced-colors|orientation/;
+var MIN_W = /(?:min-width\s*:\s*|width\s*>=?\s*)([\d.]+)(px|rem|em)?/;
+var MAX_W = /(?:max-width\s*:\s*|width\s*<=?\s*)([\d.]+)(px|rem|em)?/;
+/** Separates the variant pairs (whose first slot is >= 0) from the property part of a key. */
+var PROPERTY_PART = -1;
+/** A rule that has run out of property indices sorts after every real index (TW: `?? Infinity`). */
+var NO_MORE = Number.MAX_SAFE_INTEGER;
+var PROPERTY_INDEX = new Map(TW_PROPERTY_ORDER.map((p, i) => [p, i]));
+var DECL = /(?:^|[{;])\s*(-{0,2}[a-zA-Z][\w-]*)\s*:[^;{}]*(?=[;}])/g;
+var AT_PRELUDE = /^\s*@[\w-]+[^{]*\{/;
+var CLASS = /\.((?:\\.|[\w-])+)/;
+function toPx(n, unit) {
+	const v = parseFloat(n);
+	return unit === "rem" || unit === "em" ? v * 16 : v;
+}
+function preludeKey(kind, prelude) {
+	const container = kind === "container";
+	if (!container && /^\s*not\b/i.test(prelude)) return [0, 0];
+	const min = MIN_W.exec(prelude);
+	if (min) return [container ? 4 : 2, toPx(min[1], min[2])];
+	const max = MAX_W.exec(prelude);
+	if (max) return [container ? 3 : 1, -toPx(max[1], max[2])];
+	if (!container && LATE_MEDIA.test(prelude)) return [5, 0];
+	return [0, 0];
+}
+/** The rule text after its leading at-rule preludes, up to its first `{` (the selector). */
+function ruleSelector(rule) {
+	let rest = rule;
+	let m;
+	while (m = AT_PRELUDE.exec(rest)) rest = rest.slice(m[0].length);
+	const end = rest.indexOf("{");
+	return end === -1 ? "" : rest.slice(0, end);
+}
+/**
+* Tailwind's `--tw-sort` overrides (a utility sorts as one pseudo-property), recognised from BaroCSS's
+* output for the same utilities: space-x/y, divide-*, placeholder colour, gradient stops, container.
+* (TW's `size-*` override names no listed property, so Tailwind ignores it, and so does this.)
+*/
+function sortOverride(selector, props, candidate) {
+	const first = props[0];
+	if (first === "--tw-space-x-reverse") return "row-gap";
+	if (first === "--tw-space-y-reverse") return "column-gap";
+	if (first === "--tw-divide-x-reverse") return "divide-x-width";
+	if (first === "--tw-divide-y-reverse") return "divide-y-width";
+	if (selector.includes(":not(:last-child)")) {
+		if (props.includes("border-color")) return "divide-color";
+		if (props.includes("border-style")) return "divide-style";
+	}
+	if (selector.includes("::placeholder") && props.includes("color")) return "placeholder-color";
+	for (const stop of [
+		"from",
+		"via",
+		"to"
+	]) if (props.includes(`--tw-gradient-${stop}`)) return `--tw-gradient-${stop}`;
+	if (candidate.slice(candidate.lastIndexOf(":") + 1) === "container") return "--tw-container-component";
+	return null;
+}
+/**
+* Tailwind's per-candidate property sort (#401): the sorted, de-duplicated TW property-order indices of
+* the rule's declarations (at any depth), and the declaration count. `--baro-*` vars count as `--tw-*`.
+*/
+/** @internal (#401) */ function rulePropertySort(rule, candidate = ruleCandidate(rule)) {
+	const props = [];
+	for (const d of rule.matchAll(DECL)) props.push(d[1].startsWith("--baro-") ? "--tw-" + d[1].slice(7) : d[1]);
+	const override = sortOverride(ruleSelector(rule), props, candidate);
+	const overrideIndex = override === null ? void 0 : PROPERTY_INDEX.get(override);
+	if (overrideIndex !== void 0) return {
+		order: [overrideIndex],
+		count: props.length + 1
+	};
+	const set = /* @__PURE__ */ new Set();
+	for (const p of props) {
+		const i = PROPERTY_INDEX.get(p);
+		if (i !== void 0) set.add(i);
+	}
+	return {
+		order: Array.from(set).sort((a, b) => a - b),
+		count: props.length
+	};
+}
+/** The (unescaped) first class in the rule's selector, e.g. `sm:px-2`. */
+/** @internal (#401) */ function ruleCandidate(rule) {
+	const c = CLASS.exec(ruleSelector(rule));
+	return c ? c[1].replace(/\\(.)/g, "$1") : "";
+}
+/** Tailwind's candidate compare: runs of digits compare by value, other chars by code. */
+/** @internal (#401) */ function compareCandidates(a, b) {
+	const n = Math.min(a.length, b.length);
+	for (let i = 0; i < n; i++) {
+		let x = a.charCodeAt(i);
+		let y = b.charCodeAt(i);
+		if (x >= 48 && x <= 57 && y >= 48 && y <= 57) {
+			let ae = i + 1;
+			let be = i + 1;
+			for (x = a.charCodeAt(ae); x >= 48 && x <= 57;) x = a.charCodeAt(++ae);
+			for (y = b.charCodeAt(be); y >= 48 && y <= 57;) y = b.charCodeAt(++be);
+			const as = a.slice(i, ae);
+			const bs = b.slice(i, be);
+			const diff = Number(as) - Number(bs);
+			if (diff) return diff;
+			if (as < bs) return -1;
+			if (as > bs) return 1;
+			continue;
+		}
+		if (x !== y) return x - y;
+	}
+	return a.length - b.length;
+}
+/** The #254 variant part of the key (leading `@media` / `@container` preludes). */
+/** @internal (#401) */ function ruleVariantKey(rule) {
+	const key = [];
+	let rest = rule;
+	let m;
+	while (m = LEADING_AT.exec(rest)) {
+		const [g, v] = preludeKey(m[1], m[2]);
+		key.push(g, v);
+		rest = rest.slice(m[0].length);
+	}
+	return key;
+}
+/**
+* Full sort key: the #254 variant pairs, then (#401) Tailwind's property sort and the class name.
+* `candidate` defaults to the rule's first class.
+*/
+function ruleSortKey(rule, candidate) {
+	const name = candidate ?? ruleCandidate(rule);
+	const { order, count } = rulePropertySort(rule, name);
+	const key = ruleVariantKey(rule);
+	key.push(PROPERTY_PART, ...order, NO_MORE, -count, name);
+	return key;
+}
+function compareKeys(a, b) {
+	const n = Math.min(a.length, b.length);
+	for (let i = 0; i < n; i++) {
+		const x = a[i];
+		const y = b[i];
+		if (x === y) continue;
+		if (typeof x === "string" || typeof y === "string") {
+			const d = compareCandidates(String(x), String(y));
+			if (d) return d;
+			continue;
+		}
+		return x - y;
+	}
+	return a.length - b.length;
+}
+/** Index after the last key <= `key` (stable upper bound) in sorted `keys`. */
+function upperBound(keys, key) {
+	let lo = 0;
+	let hi = keys.length;
+	while (lo < hi) {
+		const mid = lo + hi >> 1;
+		if (compareKeys(keys[mid], key) <= 0) lo = mid + 1;
+		else hi = mid;
+	}
+	return lo;
+}
+//#endregion
 //#region src/core/engine.ts
 var failureCache = /* @__PURE__ */ new Set();
 /**
@@ -1714,6 +2661,10 @@ function parseClassToAst(fullClassName, ctx) {
 	let ast = [];
 	for (const utilReg of utilRegs) {
 		ast = utilReg.handler(value, ctx, utility, utilReg) || [];
+		if (ast === REJECT_CLASS) {
+			ast = [];
+			break;
+		}
 		if (ast.length > 0) break;
 	}
 	const wrappers = [];
@@ -1838,7 +2789,7 @@ var CLASS_SEPARATOR = /[ \t\n\f\r]+/;
 function generateCss(classList, ctx, opts) {
 	const seen = /* @__PURE__ */ new Set();
 	const allAtRootNodes = [];
-	const results = classList.split(CLASS_SEPARATOR).filter((cls) => {
+	const generated = classList.split(CLASS_SEPARATOR).filter((cls) => {
 		if (!cls) return false;
 		if (opts?.dedup) {
 			if (seen.has(cls)) return false;
@@ -1847,12 +2798,31 @@ function generateCss(classList, ctx, opts) {
 		return true;
 	}).map((cls) => {
 		try {
-			return generateOne(cls);
+			return {
+				cls,
+				css: generateOne(cls)
+			};
 		} catch (err) {
 			debugWarn("[generateCss] class generation failed:", cls, err);
-			return "";
+			return {
+				cls,
+				css: ""
+			};
 		}
-	}).join(opts?.minify ? "" : "\n");
+	});
+	const slots = generated.flatMap((g, i) => g.css ? [i] : []);
+	const sorted = slots.map((i) => ({
+		i,
+		css: generated[i].css,
+		key: ruleSortKey(generated[i].css, generated[i].cls)
+	})).sort((a, b) => compareKeys(a.key, b.key) || a.i - b.i);
+	slots.forEach((slot, j) => {
+		generated[slot] = {
+			cls: generated[slot].cls,
+			css: sorted[j].css
+		};
+	});
+	const results = generated.map((g) => g.css).join(opts?.minify ? "" : "\n");
 	function generateOne(cls) {
 		const ast = parseClassToAst(cls, ctx);
 		const parsedResult = (getContextState(ctx)?.parseResultCache || parseResultCache).get(cls);
@@ -1863,7 +2833,8 @@ function generateCss(classList, ctx, opts) {
 		const hasStyleRule = cleanAst.some((node) => node.type === "style-rule");
 		const css = astToCss(cleanAst.filter((node) => node.type !== "at-root"), hasStyleRule ? void 0 : cls, {
 			minify: opts?.minify,
-			important: parsedResult?.utility?.important ?? false
+			important: parsedResult?.utility?.important ?? false,
+			scope: cls
 		});
 		const result = css;
 		if (!result || result.trim() === "") debugWarn("[generateCss] Empty CSS generated for class:", {
@@ -1921,7 +2892,10 @@ function generateCssRules(classList, ctx, opts) {
 			cssList.push(css);
 		});
 		else {
-			const css = astToCss([node], cls, options);
+			const css = astToCss([node], cls, {
+				...options,
+				scope: cls
+			});
 			cssList.push(css);
 		}
 		const rootCssList = [];
@@ -2997,500 +3971,232 @@ function configGetter(config, ...path) {
 	else keys = path;
 	return keys.reduce((acc, key) => acc ? acc[key] : void 0, config);
 }
-function hasPreset(themeObj, category, preset) {
-	return themeObj[category]?.includes?.(preset);
-}
-function resolveTheme(config) {
-	let theme = {};
-	if (config.presets) {
-		for (const preset of config.presets) if (preset.theme) theme = deepMerge(theme, preset.theme);
-	}
-	if (config.theme) {
-		const { extend, ...overrideTheme } = config.theme;
-		theme = deepMerge(theme, overrideTheme);
-		if (extend) theme = deepMerge(theme, extend);
-	}
-	return theme;
-}
-function themeToCssVars(theme) {
-	return toCssVarsBlock(themeToCssVarsAll(theme));
-}
-function createContext(configObj) {
-	if (configObj.debug !== void 0) setDebug(!!configObj.debug);
-	const configWithDefaults = {
-		presets: [{ theme: defaultTheme }, ...configObj.presets || []],
-		...configObj
-	};
-	const themeObj = resolveTheme(configWithDefaults);
-	const ctx = {
-		hasPreset: (category, preset) => {
-			return hasPreset(themeObj, category, preset);
-		},
-		theme: (...args) => {
-			return themeGetter(themeObj, ...args);
-		},
-		config: (...args) => {
-			return configGetter(configWithDefaults, ...args);
-		},
-		themeToCssVars: () => themeToCssVars(themeObj),
-		extendTheme: (category, values) => {
-			if (typeof values === "function") {
-				const result = values(ctx.theme);
-				if (result && typeof result === "object") {
-					const existingValues = themeObj[category] || {};
-					themeObj[category] = {
-						...existingValues,
-						...result
-					};
-				}
-			} else if (typeof values === "object" && values !== null && !Array.isArray(values)) {
-				const existingValues = themeObj[category] || {};
-				themeObj[category] = {
-					...existingValues,
-					...values
-				};
-			}
-			clearContextCaches(ctx);
-		},
-		getPreflightCSS: (level = true) => {
-			return getPreflightCSS(level);
-		}
-	};
-	initializeContextState(ctx, getUtility(), getModifier());
-	registerCustomUtilities(ctx, configObj.utilities);
-	return ctx;
-}
-//#endregion
-//#region src/core/jsonToAst.ts
-/**
-* Converts a single BaroJsonInput object into an AST tree.
-* Bypasses string parsing and directly invokes utility/modifier handlers.
-*
-* @param input BaroJsonInput object
-* @param ctx Context
-* @returns AstNode[]
-*/
-function jsonToAst(input, ctx) {
-	if ((input.variants || []).some((v) => typeof v === "string" ? !isSafeVariantToken(v) : !isSafeVariantValue(v.name || "") || !isSafeVariantValue(v.value || "") || hasCommentToken(v.name || "") || hasCommentToken(v.value || ""))) return [];
-	let utilReg = getUtility(ctx).find((u) => u.name === input.utility.name);
-	if (input.utility.value && !input.utility.arbitrary && !input.utility.customProperty) {
-		const fullName = `${input.utility.name}-${input.utility.value}`;
-		const exactMatch = getUtility(ctx).find((u) => u.name === fullName);
-		if (exactMatch) utilReg = exactMatch;
-	}
-	if (!utilReg) {
-		debugWarn(`[jsonToAst] Unknown utility: "${input.utility.name}"`);
-		return [];
-	}
-	const parsedUtility = {
-		prefix: input.utility.name,
-		value: input.utility.value,
-		arbitrary: input.utility.arbitrary,
-		negative: input.utility.negative,
-		opacity: input.utility.opacity,
-		important: input.utility.important,
-		customProperty: input.utility.customProperty,
-		category: utilReg.category,
-		priority: utilReg.priority
-	};
-	let value = input.utility.value;
-	if (input.utility.negative && value) value = "-" + value;
-	let ast = utilReg.handler(value || "", ctx, parsedUtility, utilReg) || [];
-	if (input.variants && input.variants.length > 0) {
-		const wrappers = [];
-		const selector = "&";
-		for (let i = input.variants.length - 1; i >= 0; i--) {
-			const variantInput = input.variants[i];
-			const variantName = typeof variantInput === "string" ? variantInput : variantInput.name;
-			const variantValue = typeof variantInput === "string" ? void 0 : variantInput.value;
-			const variantArbitrary = typeof variantInput === "string" ? false : variantInput.arbitrary;
-			const parsedModifier = {
-				type: variantName,
-				value: variantValue,
-				arbitrary: variantArbitrary
-			};
-			let matchKey = variantName;
-			if (variantArbitrary && variantValue) {
-				if (variantName) {
-					matchKey = `${variantName}-[${variantValue}]`;
-					parsedModifier.type = matchKey;
-				} else {
-					matchKey = `[${variantValue}]`;
-					parsedModifier.type = matchKey;
-				}
-			} else if (variantValue) {
-				matchKey = `${variantName}-[${variantValue}]`;
-				parsedModifier.type = matchKey;
-			}
-			const plugin = getModifier(ctx).find((p) => p.match(matchKey, ctx));
-			if (!plugin) {
-				debugWarn(`[jsonToAst] Unknown variant: "${matchKey}"`);
-				continue;
-			}
-			if (plugin.astHandler) ast = plugin.astHandler(ast, parsedModifier, ctx, [], i);
-			if (plugin.modifySelector) {
-				const result = plugin.modifySelector({
-					selector,
-					fullClassName: "JSON_GENERATED",
-					mod: parsedModifier,
-					context: ctx,
-					variantChain: [],
-					index: i
-				});
-				if (result == null) continue;
-				if (plugin.wrap && (result === "&" || typeof result === "object" && !Array.isArray(result) && result.selector === "&" || Array.isArray(result) && result.length === 1 && result[0].selector === "&")) {} else if (typeof result === "string" && result.includes("&")) wrappers.push({
-					type: "rule",
-					selector: result
-				});
-				else if (typeof result === "object" && !Array.isArray(result) && result.selector) {
-					const r = result;
-					const wrappingType = r.wrappingType || "rule";
-					wrappers.push({
-						type: wrappingType,
-						selector: r.selector,
-						flatten: r.flatten,
-						source: r.source
-					});
-				} else if (Array.isArray(result)) wrappers.push({
-					type: "wrap",
-					items: result.map((r) => ({
-						type: r.wrappingType || "rule",
-						selector: r.selector,
-						source: r.source,
-						nodes: []
-					}))
-				});
-			}
-			if (plugin.wrap) wrappers.push({
-				type: "wrap",
-				items: plugin.wrap(parsedModifier, ctx)
-			});
-		}
-		for (let i = 0; i < wrappers.length; i++) {
-			const wrap = wrappers[i];
-			if (wrap.type === "wrap") ast = wrap.items.map((item) => item.type === "rule" || item.type === "style-rule" || item.type === "at-rule" || item.type === "at-root" ? {
-				...item,
-				nodes: [...item.nodes || [], ...ast]
-			} : item);
-			else if (wrap.type === "style-rule") ast = [{
-				type: "style-rule",
-				selector: wrap.selector,
-				source: wrap.source,
-				nodes: Array.isArray(ast) ? ast : [ast]
-			}];
-			else if (wrap.type === "at-rule") ast = [{
-				type: "at-rule",
-				name: wrap.name || "media",
-				params: wrap.params,
-				source: wrap.source,
-				nodes: Array.isArray(ast) ? ast : [ast]
-			}];
-			else if (wrap.type === "rule") ast = [{
-				type: "rule",
-				selector: wrap.selector,
-				source: wrap.source,
-				nodes: Array.isArray(ast) ? ast : [ast]
-			}];
-		}
-	}
-	return applyVarPrefix(ast, ctx);
-}
-/**
-* Generates CSS from a list of BaroJsonInput objects.
-*
-* @param inputs Array of BaroJsonInput
-* @param ctx Context
-* @param opts Options (minify, etc.)
-* @returns CSS string
-*/
-function generateCssFromJson(inputs, ctx, opts) {
-	const allAtRootNodes = [];
-	const cssList = [];
-	inputs.forEach((input) => {
-		const cleanAst = optimizeAst(jsonToAst(input, ctx));
-		cleanAst.forEach((node) => {
-			if (node.type === "at-root") allAtRootNodes.push(...node.nodes);
-		});
-		let reconstructedName = input.utility.name;
-		if (input.utility.value) reconstructedName += `-${input.utility.value}`;
-		if (input.utility.arbitrary) reconstructedName = `${input.utility.name}-[${input.utility.value}]`;
-		if (input.variants) reconstructedName = `${input.variants.map((v) => typeof v === "string" ? v : v.name).join(":")}:${reconstructedName}`;
-		const css = astToCss(cleanAst, cleanAst.some((node) => node.type === "style-rule") ? void 0 : `.${reconstructedName.replace(/[^a-zA-Z0-9-_]/g, "\\$&")}`, {
-			minify: opts?.minify,
-			important: input.utility.important ?? false
-		});
-		if (css) cssList.push(css);
-	});
-	const rootCss = rootToCss(allAtRootNodes);
-	return `${rootCss ? `:root,:host {${rootCss}}` : ""}${cssList.join(opts?.minify ? "" : "\n")}`;
-}
-//#endregion
-//#region src/core/utils.ts
-/**
-* Parses a fraction string (e.g., '1/2') and returns a percentage string (e.g., '50%'), or null if not a valid fraction.
-*/
-function parseFraction(input) {
-	if (input.includes("/")) {
-		const [num, denom] = input.split("/").map(Number);
-		if (!isNaN(num) && !isNaN(denom) && denom !== 0) return `${num / denom * 100}%`;
-	}
-	return null;
-}
-/**
-* Returns the input if it is a valid non-negative integer string, else null.
-* 
-* @example
-* parseNumber("10") // "10"
-* parseNumber("-10") // "-10"
-* parseNumber("10.5") // "10.5"
-*/
-function parseNumber(input) {
-	return /^-?\d+(?:\.\d+)?$/.test(input) ? input : null;
-}
-/**
-* Returns the input if it is a valid length string, else null.
-*/
-function parseLength(input) {
-	return /^\d+(px|em|rem|vh|vw|vmin|vmax|%|in|cm|mm|pt|pc|ex|ch|fr)$/.test(input) ? input : null;
-}
-/**
-* Unified parser for fraction or number, with options for percent or repeat syntax.
-* - percent: if true, returns percentage for fraction (e.g., '1/2' -> '50%')
-* - repeat: if true, returns repeat() for number (e.g., '3' -> 'repeat(3, minmax(0, 1fr))')
-*/
-function parseFractionOrNumber(value, opts = {}) {
-	if (/^\d+$/.test(value)) {
-		if (opts.repeat) return `repeat(${value}, minmax(0, 1fr))`;
-		return value;
+function hasPreset(themeObj, category, preset) {
+	return themeObj[category]?.includes?.(preset);
+}
+function resolveTheme(config) {
+	let theme = {};
+	if (config.presets) {
+		for (const preset of config.presets) if (preset.theme) theme = deepMerge(theme, preset.theme);
 	}
-	if (value.includes("/")) {
-		const [numerator, denominator] = value.split("/").map(Number);
-		if (!isNaN(numerator) && !isNaN(denominator) && denominator !== 0) {
-			const result = numerator / denominator;
-			if (opts.percent) return `${result * 100}%`;
-			return result.toString();
-		}
+	if (config.theme) {
+		const { extend, ...overrideTheme } = config.theme;
+		theme = deepMerge(theme, overrideTheme);
+		if (extend) theme = deepMerge(theme, extend);
 	}
-	return null;
+	return theme;
 }
-var CSS_COLOR_NAMES = /* @__PURE__ */ new Set([
-	"aliceblue",
-	"antiquewhite",
-	"aqua",
-	"aquamarine",
-	"azure",
-	"beige",
-	"bisque",
-	"black",
-	"blanchedalmond",
-	"blue",
-	"blueviolet",
-	"brown",
-	"burlywood",
-	"cadetblue",
-	"chartreuse",
-	"chocolate",
-	"coral",
-	"cornflowerblue",
-	"cornsilk",
-	"crimson",
-	"cyan",
-	"darkblue",
-	"darkcyan",
-	"darkgoldenrod",
-	"darkgray",
-	"darkgreen",
-	"darkgrey",
-	"darkkhaki",
-	"darkmagenta",
-	"darkolivegreen",
-	"darkorange",
-	"darkorchid",
-	"darkred",
-	"darksalmon",
-	"darkseagreen",
-	"darkslateblue",
-	"darkslategray",
-	"darkslategrey",
-	"darkturquoise",
-	"darkviolet",
-	"deeppink",
-	"deepskyblue",
-	"dimgray",
-	"dimgrey",
-	"dodgerblue",
-	"firebrick",
-	"floralwhite",
-	"forestgreen",
-	"fuchsia",
-	"gainsboro",
-	"ghostwhite",
-	"gold",
-	"goldenrod",
-	"gray",
-	"grey",
-	"green",
-	"greenyellow",
-	"honeydew",
-	"hotpink",
-	"indianred",
-	"indigo",
-	"ivory",
-	"khaki",
-	"lavender",
-	"lavenderblush",
-	"lawngreen",
-	"lemonchiffon",
-	"lightblue",
-	"lightcoral",
-	"lightcyan",
-	"lightgoldenrodyellow",
-	"lightgray",
-	"lightgreen",
-	"lightgrey",
-	"lightpink",
-	"lightsalmon",
-	"lightseagreen",
-	"lightskyblue",
-	"lightslategray",
-	"lightslategrey",
-	"lightsteelblue",
-	"lightyellow",
-	"lime",
-	"limegreen",
-	"linen",
-	"magenta",
-	"maroon",
-	"mediumaquamarine",
-	"mediumblue",
-	"mediumorchid",
-	"mediumpurple",
-	"mediumseagreen",
-	"mediumslateblue",
-	"mediumspringgreen",
-	"mediumturquoise",
-	"mediumvioletred",
-	"midnightblue",
-	"mintcream",
-	"mistyrose",
-	"moccasin",
-	"navajowhite",
-	"navy",
-	"oldlace",
-	"olive",
-	"olivedrab",
-	"orange",
-	"orangered",
-	"orchid",
-	"palegoldenrod",
-	"palegreen",
-	"paleturquoise",
-	"palevioletred",
-	"papayawhip",
-	"peachpuff",
-	"peru",
-	"pink",
-	"plum",
-	"powderblue",
-	"purple",
-	"red",
-	"rosybrown",
-	"royalblue",
-	"saddlebrown",
-	"salmon",
-	"sandybrown",
-	"seagreen",
-	"seashell",
-	"sienna",
-	"silver",
-	"skyblue",
-	"slateblue",
-	"slategray",
-	"slategrey",
-	"snow",
-	"springgreen",
-	"steelblue",
-	"tan",
-	"teal",
-	"thistle",
-	"tomato",
-	"turquoise",
-	"violet",
-	"wheat",
-	"white",
-	"whitesmoke",
-	"yellow",
-	"yellowgreen"
-]);
-/**
-* Returns the input if it is a valid color string, else null.
-*
-* #rgb, #rgba, #rrggbb, #rrggbbaa, rgb(r, g, b), rgb(r, g, b, a), hsl(h, s, l), hsl(h, s, l, a), hwb(h, w, b), hwb(h, w, b, a), lab(l, a, b), lab(l, a, b, a), lch(l, c, h), lch(l, c, h, a), oklab(l, a, b), oklab(l, a, b, a), oklch(l, c, h), oklch(l, c, h, a), color-mix(in oklab, var(--color-blue-500) 60%, transparent)
-*/
-function parseColor(input) {
-	if (CSS_COLOR_NAMES.has(input.toLowerCase())) return input;
-	if (input.startsWith("color:var(")) return input.slice(6);
-	if (input.startsWith("color:")) return parseColor(input.slice(6));
-	if (input.startsWith("#") && input.length === 4) return `#${input.slice(1)}`;
-	if (input.startsWith("#") && input.length === 5) return `#${input.slice(1)}`;
-	if (input.startsWith("#") && input.length === 7) return `#${input.slice(1)}`;
-	if (input.startsWith("#") && input.length === 9) return `#${input.slice(1)}`;
-	if (input.startsWith("rgb(")) return input.slice(4, -1);
-	if (input.startsWith("rgba(")) return input.slice(5, -1);
-	if (input.startsWith("hsl(")) return input.slice(4, -1);
-	if (input.startsWith("hsla(")) return input.slice(5, -1);
-	if (input.startsWith("hwb(")) return input.slice(4, -1);
-	if (input.startsWith("lab(")) return input.slice(4, -1);
-	if (input.startsWith("lch(")) return input.slice(4, -1);
-	if (input.startsWith("oklab(")) return input.slice(5, -1);
-	if (input.startsWith("oklch(")) return input.slice(6, -1);
-	if (input.startsWith("color-mix(")) return input.slice(9, -1);
-	return null;
+function themeToCssVars(theme) {
+	return toCssVarsBlock(themeToCssVarsAll(theme));
 }
-var COLOR_KEYWORDS = /* @__PURE__ */ new Set([
-	"inherit",
-	"currentcolor",
-	"transparent"
-]);
+function createContext(configObj) {
+	if (configObj.debug !== void 0) setDebug(!!configObj.debug);
+	const configWithDefaults = {
+		presets: [{ theme: defaultTheme }, ...configObj.presets || []],
+		...configObj
+	};
+	const themeObj = resolveTheme(configWithDefaults);
+	const ctx = {
+		hasPreset: (category, preset) => {
+			return hasPreset(themeObj, category, preset);
+		},
+		theme: (...args) => {
+			return themeGetter(themeObj, ...args);
+		},
+		config: (...args) => {
+			return configGetter(configWithDefaults, ...args);
+		},
+		themeToCssVars: () => themeToCssVars(themeObj),
+		extendTheme: (category, values) => {
+			if (typeof values === "function") {
+				const result = values(ctx.theme);
+				if (result && typeof result === "object") {
+					const existingValues = themeObj[category] || {};
+					themeObj[category] = {
+						...existingValues,
+						...result
+					};
+				}
+			} else if (typeof values === "object" && values !== null && !Array.isArray(values)) {
+				const existingValues = themeObj[category] || {};
+				themeObj[category] = {
+					...existingValues,
+					...values
+				};
+			}
+			clearContextCaches(ctx);
+		},
+		getPreflightCSS: (level = true) => {
+			return getPreflightCSS(level);
+		}
+	};
+	initializeContextState(ctx, getUtility(), getModifier());
+	registerCustomUtilities(ctx, configObj.utilities);
+	return ctx;
+}
+//#endregion
+//#region src/core/jsonToAst.ts
 /**
-* Declarations for a theme colour (#228), as Tailwind v4 emits them: `var(--color-<key>)` so runtime theme
-* overrides apply; with an opacity modifier, a literal srgb color-mix fallback plus an oklab color-mix of the var.
+* Converts a single BaroJsonInput object into an AST tree.
+* Bypasses string parsing and directly invokes utility/modifier handlers.
+*
+* @param input BaroJsonInput object
+* @param ctx Context
+* @returns AstNode[]
 */
-function themeColorDecls(prop, value, extra) {
-	const key = String(extra.realThemeValue);
-	const ref = COLOR_KEYWORDS.has(value.toLowerCase()) || value.startsWith("var(") || !/^[\w-]+$/.test(key) ? value : `var(--color-${key})`;
-	if (!extra.opacity) return [decl(prop, ref)];
-	const alpha = normalizeAlpha(String(extra.opacity));
-	const supports = (amount) => atRule("supports", "(color:color-mix(in lab, red, red))", [decl(prop, `color-mix(in oklab, ${ref} ${amount}, transparent)`)]);
-	if (alpha.isVar) return [decl(prop, value), supports(alpha.amount)];
-	return [decl(prop, `color-mix(in srgb, ${value} ${alpha.amount}, transparent)`), supports(alpha.amount)];
+function jsonToAst(input, ctx) {
+	if ((input.variants || []).some((v) => typeof v === "string" ? !isSafeVariantToken(v) : !isSafeVariantValue(v.name || "") || !isSafeVariantValue(v.value || "") || hasCommentToken(v.name || "") || hasCommentToken(v.value || ""))) return [];
+	let utilReg = getUtility(ctx).find((u) => u.name === input.utility.name);
+	if (input.utility.value && !input.utility.arbitrary && !input.utility.customProperty) {
+		const fullName = `${input.utility.name}-${input.utility.value}`;
+		const exactMatch = getUtility(ctx).find((u) => u.name === fullName);
+		if (exactMatch) utilReg = exactMatch;
+	}
+	if (!utilReg) {
+		debugWarn(`[jsonToAst] Unknown utility: "${input.utility.name}"`);
+		return [];
+	}
+	const parsedUtility = {
+		prefix: input.utility.name,
+		value: input.utility.value,
+		arbitrary: input.utility.arbitrary,
+		negative: input.utility.negative,
+		opacity: input.utility.opacity,
+		important: input.utility.important,
+		customProperty: input.utility.customProperty,
+		category: utilReg.category,
+		priority: utilReg.priority
+	};
+	let value = input.utility.value;
+	if (input.utility.negative && value) value = "-" + value;
+	let ast = utilReg.handler(value || "", ctx, parsedUtility, utilReg) || [];
+	if (input.variants && input.variants.length > 0) {
+		const wrappers = [];
+		const selector = "&";
+		for (let i = input.variants.length - 1; i >= 0; i--) {
+			const variantInput = input.variants[i];
+			const variantName = typeof variantInput === "string" ? variantInput : variantInput.name;
+			const variantValue = typeof variantInput === "string" ? void 0 : variantInput.value;
+			const variantArbitrary = typeof variantInput === "string" ? false : variantInput.arbitrary;
+			const parsedModifier = {
+				type: variantName,
+				value: variantValue,
+				arbitrary: variantArbitrary
+			};
+			let matchKey = variantName;
+			if (variantArbitrary && variantValue) {
+				if (variantName) {
+					matchKey = `${variantName}-[${variantValue}]`;
+					parsedModifier.type = matchKey;
+				} else {
+					matchKey = `[${variantValue}]`;
+					parsedModifier.type = matchKey;
+				}
+			} else if (variantValue) {
+				matchKey = `${variantName}-[${variantValue}]`;
+				parsedModifier.type = matchKey;
+			}
+			const plugin = getModifier(ctx).find((p) => p.match(matchKey, ctx));
+			if (!plugin) {
+				debugWarn(`[jsonToAst] Unknown variant: "${matchKey}"`);
+				continue;
+			}
+			if (plugin.astHandler) ast = plugin.astHandler(ast, parsedModifier, ctx, [], i);
+			if (plugin.modifySelector) {
+				const result = plugin.modifySelector({
+					selector,
+					fullClassName: "JSON_GENERATED",
+					mod: parsedModifier,
+					context: ctx,
+					variantChain: [],
+					index: i
+				});
+				if (result == null) continue;
+				if (plugin.wrap && (result === "&" || typeof result === "object" && !Array.isArray(result) && result.selector === "&" || Array.isArray(result) && result.length === 1 && result[0].selector === "&")) {} else if (typeof result === "string" && result.includes("&")) wrappers.push({
+					type: "rule",
+					selector: result
+				});
+				else if (typeof result === "object" && !Array.isArray(result) && result.selector) {
+					const r = result;
+					const wrappingType = r.wrappingType || "rule";
+					wrappers.push({
+						type: wrappingType,
+						selector: r.selector,
+						flatten: r.flatten,
+						source: r.source
+					});
+				} else if (Array.isArray(result)) wrappers.push({
+					type: "wrap",
+					items: result.map((r) => ({
+						type: r.wrappingType || "rule",
+						selector: r.selector,
+						source: r.source,
+						nodes: []
+					}))
+				});
+			}
+			if (plugin.wrap) wrappers.push({
+				type: "wrap",
+				items: plugin.wrap(parsedModifier, ctx)
+			});
+		}
+		for (let i = 0; i < wrappers.length; i++) {
+			const wrap = wrappers[i];
+			if (wrap.type === "wrap") ast = wrap.items.map((item) => item.type === "rule" || item.type === "style-rule" || item.type === "at-rule" || item.type === "at-root" ? {
+				...item,
+				nodes: [...item.nodes || [], ...ast]
+			} : item);
+			else if (wrap.type === "style-rule") ast = [{
+				type: "style-rule",
+				selector: wrap.selector,
+				source: wrap.source,
+				nodes: Array.isArray(ast) ? ast : [ast]
+			}];
+			else if (wrap.type === "at-rule") ast = [{
+				type: "at-rule",
+				name: wrap.name || "media",
+				params: wrap.params,
+				source: wrap.source,
+				nodes: Array.isArray(ast) ? ast : [ast]
+			}];
+			else if (wrap.type === "rule") ast = [{
+				type: "rule",
+				selector: wrap.selector,
+				source: wrap.source,
+				nodes: Array.isArray(ast) ? ast : [ast]
+			}];
+		}
+	}
+	return applyVarPrefix(ast, ctx);
 }
 /**
-* Opacity modifier → color-mix amount, as Tailwind v4 does: `50` → `50%`, `[37%]` → `37%`, `[0.5]` / `[.8]` → `50%` /
-* `80%` (a bracketed number ≤ 1 is a fraction), `[var(--a)]` / `(--a)` → `var(--a)`.
+* Generates CSS from a list of BaroJsonInput objects.
+*
+* @param inputs Array of BaroJsonInput
+* @param ctx Context
+* @param opts Options (minify, etc.)
+* @returns CSS string
 */
-function normalizeAlpha(raw) {
-	let v = raw.trim();
-	const bracketed = v.startsWith("[") && v.endsWith("]");
-	if (bracketed) v = v.slice(1, -1).trim();
-	if (v.startsWith("(") && v.endsWith(")")) v = `var(${v.slice(1, -1).trim()})`;
-	if (v.startsWith("var(")) return {
-		amount: v,
-		isVar: true
-	};
-	if (v.endsWith("%")) return {
-		amount: v,
-		isVar: false
-	};
-	const n = Number(v);
-	if (v !== "" && Number.isFinite(n)) return {
-		amount: `${+(bracketed && n <= 1 ? n * 100 : n).toFixed(4)}%`,
-		isVar: false
-	};
-	return {
-		amount: v,
-		isVar: false
-	};
+function generateCssFromJson(inputs, ctx, opts) {
+	const allAtRootNodes = [];
+	const cssList = [];
+	inputs.forEach((input) => {
+		const cleanAst = optimizeAst(jsonToAst(input, ctx));
+		cleanAst.forEach((node) => {
+			if (node.type === "at-root") allAtRootNodes.push(...node.nodes);
+		});
+		let reconstructedName = input.utility.name;
+		if (input.utility.value) reconstructedName += `-${input.utility.value}`;
+		if (input.utility.arbitrary) reconstructedName = `${input.utility.name}-[${input.utility.value}]`;
+		if (input.variants) reconstructedName = `${input.variants.map((v) => typeof v === "string" ? v : v.name).join(":")}:${reconstructedName}`;
+		const css = astToCss(cleanAst, cleanAst.some((node) => node.type === "style-rule") ? void 0 : `.${reconstructedName.replace(/[^a-zA-Z0-9-_]/g, "\\$&")}`, {
+			minify: opts?.minify,
+			important: input.utility.important ?? false
+		});
+		if (css) cssList.push(css);
+	});
+	const rootCss = rootToCss(allAtRootNodes);
+	return `${rootCss ? `:root,:host {${rootCss}}` : ""}${cssList.join(opts?.minify ? "" : "\n")}`;
 }
 //#endregion
 //#region src/presets/interactivity.ts
@@ -3504,10 +4210,7 @@ functionalUtility({
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
 	handle: (value, _ctx, _token, extra) => {
-		if (extra?.realThemeValue) {
-			if (extra.opacity) return [atRule("supports", `(color:color-mix(in lab, red, red))`, [decl("accent-color", `color-mix(in lab, ${value} ${extra.opacity}%, transparent)`)]), decl("accent-color", value)];
-			return [decl("accent-color", `var(--color-${extra.realThemeValue})`)];
-		}
+		if (extra?.realThemeValue) return themeColorDecls("accent-color", value, extra);
 		return [decl("accent-color", value)];
 	},
 	handleCustomProperty: (value) => [decl("accent-color", `var(${value})`)],
@@ -3526,10 +4229,7 @@ functionalUtility({
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
 	handle: (value, ctx, token, extra) => {
-		if (extra?.realThemeValue) {
-			if (extra.opacity) return [atRule("supports", `(color:color-mix(in lab, red, red))`, [decl("caret-color", `color-mix(in lab, ${value} ${extra.opacity}%, transparent)`)]), decl("caret-color", value)];
-			return [decl("caret-color", `var(--color-${extra.realThemeValue})`)];
-		}
+		if (extra?.realThemeValue) return themeColorDecls("caret-color", value, extra);
 		return [decl("caret-color", value)];
 	},
 	handleCustomProperty: (value) => [decl("caret-color", `var(${value})`)],
@@ -3894,22 +4594,11 @@ staticUtility("caption-bottom", [["caption-side", "bottom"]], { category: "table
 //#region src/presets/shadow-color.ts
 /** Opacity modifier to an alpha: `50` → 50%, `[20%]` → 20%, `(--o)` → var(--o); anything else is invalid. */
 function parseAlpha(op) {
-	if (!op) return null;
-	if (/^\d+(\.\d+)?$/.test(op)) return {
-		alpha: `${op}%`,
-		isVar: false
-	};
-	const pct = /^\[(\d+(?:\.\d+)?)%\]$/.exec(op);
-	if (pct) return {
-		alpha: `${pct[1]}%`,
-		isVar: false
-	};
-	const cp = /^\((--[\w-]+)\)$/.exec(op);
-	if (cp) return {
-		alpha: `var(${cp[1]})`,
-		isVar: true
+	const a = op ? normalizeAlpha(op) : null;
+	return a && {
+		alpha: a.amount,
+		isVar: a.isVar
 	};
-	return null;
 }
 function splitTop(value, sep) {
 	const out = [];
@@ -4418,6 +5107,11 @@ function layerColor(layer, main, opacity, token, realThemeValue) {
 	if (main.startsWith("color:")) return shadowColorDecls(layer, `var(${main.slice(6)})`, opacity);
 	if (token.arbitrary && parseColor(main)) return shadowColorDecls(layer, main, opacity);
 }
+function customShadowAlpha(layer, opacity) {
+	if (!opacity) return [];
+	const a = parseAlpha(opacity);
+	return a ? [decl(`--baro-${layer}-alpha`, a.alpha)] : null;
+}
 for (const layer of ["shadow", "inset-shadow"]) functionalUtility({
 	name: layer,
 	supportsArbitrary: true,
@@ -4434,11 +5128,17 @@ for (const layer of ["shadow", "inset-shadow"]) functionalUtility({
 		if (token.arbitrary) return boxShadowLayer(layer, layer === "inset-shadow" ? insetEach(value) : value, opacity);
 		return null;
 	},
-	handleCustomProperty: (value) => value.startsWith("color:") ? shadowColorDecls(layer, `var(${value.slice(6)})`, void 0) ?? [] : [
-		ringShadowProperties(),
-		decl(`--baro-${layer}`, layer === "inset-shadow" ? `inset var(${value})` : `var(${value})`),
-		decl("box-shadow", SHADOW_COMPOSITE)
-	]
+	ownsOpacity: true,
+	handleCustomProperty: (value, _ctx, _token, extra) => {
+		if (value.startsWith("color:")) return shadowColorDecls(layer, `var(${value.slice(6)})`, extra?.opacity) ?? [];
+		const alpha = customShadowAlpha(layer, extra?.opacity);
+		return alpha ? [
+			ringShadowProperties(),
+			...alpha,
+			decl(`--baro-${layer}`, layer === "inset-shadow" ? `inset var(${value})` : `var(${value})`),
+			decl("box-shadow", SHADOW_COMPOSITE)
+		] : [];
+	}
 });
 var textShadowProperties = () => atRoot([property("--baro-text-shadow-color"), property("--baro-text-shadow-alpha", "100%", "<percentage>")]);
 var namedTextShadow = (ctx, name) => {
@@ -4468,7 +5168,19 @@ functionalUtility({
 		if (token.arbitrary) return textShadowValue(value, opacity);
 		return null;
 	},
-	handleCustomProperty: (value) => value.startsWith("color:") ? [textShadowProperties(), ...shadowColorDecls("text-shadow", `var(${value.slice(6)})`, void 0) ?? []] : [textShadowProperties(), decl("text-shadow", `var(${value})`)],
+	ownsOpacity: true,
+	handleCustomProperty: (value, _ctx, _token, extra) => {
+		if (value.startsWith("color:")) {
+			const color = shadowColorDecls("text-shadow", `var(${value.slice(6)})`, extra?.opacity);
+			return color ? [textShadowProperties(), ...color] : [];
+		}
+		const alpha = customShadowAlpha("text-shadow", extra?.opacity);
+		return alpha ? [
+			textShadowProperties(),
+			...alpha,
+			decl("text-shadow", `var(${value})`)
+		] : [];
+	},
 	category: "effects"
 });
 [
@@ -4532,17 +5244,6 @@ functionalUtility({
 	], { category: "effects" });
 });
 staticUtility("ring-inset", [["--baro-ring-inset", "inset"]], { category: "effects" });
-function createRingColorDecls(key, main, opacity, realThemeValue) {
-	const colorVar = `var(--color-${realThemeValue})`;
-	let colorMix = colorVar;
-	let fallback = colorVar;
-	if (opacity) {
-		colorMix = `color-mix(in oklab, ${colorVar} ${opacity}%, transparent)`;
-		if (parseColor(main) && main.startsWith("#")) fallback = `${main}${Math.round(Number(opacity) / 100 * 255).toString(16).padStart(2, "0")}`;
-		else fallback = colorMix;
-	}
-	return [atRule("supports", "(color:color-mix(in lab, red, red))", [decl(key, colorMix)]), decl(key, fallback)];
-}
 functionalUtility({
 	name: "ring",
 	supportsArbitrary: true,
@@ -4556,28 +5257,9 @@ functionalUtility({
 			decl("--baro-ring-shadow", ringShadowValue(value)),
 			decl("box-shadow", SHADOW_COMPOSITE)
 		];
-		const opacity = extra?.opacity;
-		const realThemeValue = extra?.realThemeValue;
-		if (realThemeValue) return createRingColorDecls("--baro-ring-color", main, opacity, realThemeValue);
-		if (main.startsWith("color:")) {
-			const cp = main.replace("color:", "");
-			let colorMix = `var(${cp})`;
-			let fallback = colorMix;
-			if (opacity) {
-				colorMix = `color-mix(in oklab, var(${cp}) ${opacity}%, transparent)`;
-				fallback = colorMix;
-			}
-			return [atRule("supports", "(color:color-mix(in lab, red, red))", [decl("--baro-ring-color", colorMix)]), decl("--baro-ring-color", fallback)];
-		}
+		if (extra?.realThemeValue) return themeColorDecls("--baro-ring-color", main, extra);
+		if (main.startsWith("color:")) return [decl("--baro-ring-color", `var(${main.slice(6)})`)];
 		if (token.arbitrary) {
-			let colorMix = main;
-			let fallback = main;
-			if (opacity) {
-				colorMix = `color-mix(in oklab, ${main} ${opacity}%, transparent)`;
-				if (parseColor(main) && main.startsWith("#")) fallback = `${main}${Math.round(Number(opacity) / 100 * 255).toString(16).padStart(2, "0")}`;
-				else fallback = colorMix;
-				return [atRule("supports", "(color:color-mix(in lab, red, red))", [decl("--baro-ring-color", colorMix)]), decl("--baro-ring-color", fallback)];
-			}
 			if (!parseColor(main) && /^(-?(\d+\.?\d*|\.\d+)(px|rem|em|%|vw|vh|vmin|vmax|ch|ex|pt|cm|mm|in|pc)|0|(length:.+)|calc\(.+\))$/i.test(main)) {
 				const width = main.startsWith("length:") ? main.slice(7) : main;
 				return [
@@ -4586,7 +5268,7 @@ functionalUtility({
 					decl("box-shadow", SHADOW_COMPOSITE)
 				];
 			}
-			return [parseColor(main) ? decl("--baro-ring-color", main) : decl("box-shadow", main)];
+			return [parseColor(main) || /^var\(--[^)]+\)$/.test(main) ? decl("--baro-ring-color", main) : decl("box-shadow", main)];
 		}
 		if (main === "inherit" || main === "current" || main === "transparent") return [decl("--baro-ring-color", main === "current" ? "currentColor" : main)];
 		return null;
@@ -4604,30 +5286,9 @@ functionalUtility({
 	themeKeys: ["colors", "shadows"],
 	handle: (value, ctx, token, extra) => {
 		const main = value;
-		const opacity = extra?.opacity;
-		const realThemeValue = extra?.realThemeValue;
-		if (realThemeValue) return createRingColorDecls("--baro-inset-ring-color", main, opacity, realThemeValue);
-		if (main.startsWith("color:")) {
-			const cp = main.replace("color:", "");
-			let colorMix = `var(${cp})`;
-			let fallback = colorMix;
-			if (opacity) {
-				colorMix = `color-mix(in oklab, var(${cp}) ${opacity}%, transparent)`;
-				fallback = colorMix;
-			}
-			return [atRule("supports", "(color:color-mix(in lab, red, red))", [decl("--baro-inset-ring-color", colorMix)]), decl("--baro-inset-ring-color", fallback)];
-		}
-		if (token.arbitrary) {
-			let colorMix = main;
-			let fallback = main;
-			if (opacity) {
-				colorMix = `color-mix(in oklab, ${main} ${opacity}%, transparent)`;
-				if (parseColor(main) && main.startsWith("#")) fallback = `${main}${Math.round(Number(opacity) / 100 * 255).toString(16).padStart(2, "0")}`;
-				else fallback = colorMix;
-				return [atRule("supports", "(color:color-mix(in lab, red, red))", [decl("--baro-inset-ring-color", colorMix)]), decl("--baro-inset-ring-color", fallback)];
-			}
-			return [decl("box-shadow", `inset ${main}`)];
-		}
+		if (extra?.realThemeValue) return themeColorDecls("--baro-inset-ring-color", main, extra);
+		if (main.startsWith("color:")) return [decl("--baro-inset-ring-color", `var(${main.slice(6)})`)];
+		if (token.arbitrary) return [parseColor(main) || /^var\(--[^)]+\)$/.test(main) ? decl("--baro-inset-ring-color", main) : decl("box-shadow", `inset ${main}`)];
 		if (main === "inherit" || main === "current" || main === "transparent") return [decl("--baro-inset-ring-color", main === "current" ? "currentColor" : main)];
 		return null;
 	},
@@ -6452,7 +7113,7 @@ functionalUtility({
 	supportsOpacity: true,
 	handle: (value, _ctx, _token, extra) => {
 		if (extra?.realThemeValue) return [rule("&::placeholder", themeColorDecls("color", value, extra))];
-		if (parseColor(value)) return placeholderColor(value);
+		if (parseColor(value) || /^var\(--[\w-]+\)$/.test(value)) return placeholderColor(value);
 		return null;
 	},
 	handleCustomProperty: (value) => placeholderColor(`var(${value})`),
@@ -6658,7 +7319,7 @@ var stopsDecls = (stop, color) => {
 			if (parseColor(value)) return stopsDecls(stop, value);
 			return null;
 		},
-		handleCustomProperty: (value) => [decl(`--baro-gradient-${stop}`, `var(${value})`)],
+		handleCustomProperty: (value) => value.startsWith("color:") ? stopsDecls(stop, `var(${value.slice(6)})`) : [decl(`--baro-gradient-${stop}`, `var(${value})`)],
 		description: `${stop} gradient stop utility (color, percent, custom property, arbitrary supported)`,
 		category: "background"
 	});
@@ -6712,6 +7373,7 @@ functionalUtility({
 			return [decl("background-color", value)];
 		}
 		if (parseLength(value)) return [decl("background-size", value)];
+		if (/^var\(--[^)]+\)$/.test(value)) return [decl("background-color", value)];
 		return null;
 	},
 	handleCustomProperty: (value) => {
@@ -6839,11 +7501,11 @@ var withBorderStyle = (props, width) => [
 		...propList.map((prop) => [prop.replace("width", "style"), "var(--baro-border-style)"]),
 		...propList.map((prop) => [prop, width])
 	];
-	staticUtility(`${name}-0`, styled("0px"));
-	staticUtility(`${name}-2`, styled("2px"));
-	staticUtility(`${name}-4`, styled("4px"));
-	staticUtility(`${name}-8`, styled("8px"));
-	staticUtility(`${name}`, styled("1px"));
+	staticUtility(`${name}-0`, styled("0px"), { category: "borders" });
+	staticUtility(`${name}-2`, styled("2px"), { category: "borders" });
+	staticUtility(`${name}-4`, styled("4px"), { category: "borders" });
+	staticUtility(`${name}-8`, styled("8px"), { category: "borders" });
+	staticUtility(`${name}`, styled("1px"), { category: "borders" });
 	functionalUtility({
 		name,
 		themeKeys: ["colors", "borderWidth"],
@@ -7013,7 +7675,7 @@ functionalUtility({
 		return null;
 	},
 	handleCustomProperty: (value) => {
-		if (value.startsWith("color:")) return [decl("outline-color", value.replace("color:", ""))];
+		if (value.startsWith("color:")) return [decl("outline-color", `var(${value.slice(6)})`)];
 		if (value.startsWith("length:")) return withOutlineStyle(`var(${value.replace("length:", "")})`);
 		return [decl("outline-color", `var(${value})`)];
 	},
@@ -7045,7 +7707,7 @@ functionalUtility({
 	handle: (value, _ctx, token, extra) => {
 		if (token.prefix !== "divide") return null;
 		if (extra?.realThemeValue) return [rule(":where(& > :not(:last-child))", themeColorDecls("border-color", value, extra))];
-		if (parseColor(value)) return divideColor(value);
+		if (parseColor(value) || /^var\(--[\w-]+\)$/.test(value)) return divideColor(value);
 		return null;
 	},
 	handleCustomProperty: (value, _ctx, token) => token.prefix === "divide" ? divideColor(`var(${value})`) : [],
@@ -7464,8 +8126,9 @@ functionalUtility({
 	themeKeys: ["colors"],
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
+	supportsOpacity: true,
 	handle: (value, ctx, token, extra) => {
-		if (extra?.realThemeValue) return [decl("fill", `var(--color-${extra.realThemeValue})`)];
+		if (extra?.realThemeValue) return themeColorDecls("fill", value, extra);
 		return [decl("fill", value)];
 	},
 	description: "fill utility (static, theme, arbitrary, custom property supported)",
@@ -7481,6 +8144,7 @@ functionalUtility({
 	themeKeys: ["colors", "strokeWidth"],
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
+	supportsOpacity: true,
 	handle: (value, ctx, token, extra) => {
 		if (parseNumber(value) || extra?.themeNamespace === "strokeWidth") return [decl("stroke-width", value)];
 		if (token.arbitrary) {
@@ -7488,7 +8152,7 @@ functionalUtility({
 			if (hint) return [decl("stroke-width", hint[2])];
 			if (!parseColor(value) && (STROKE_LENGTH.test(value) || /^calc\(/.test(value))) return [decl("stroke-width", value)];
 		}
-		if (extra?.realThemeValue) return [decl("stroke", `var(--color-${extra.realThemeValue})`)];
+		if (extra?.realThemeValue) return themeColorDecls("stroke", value, extra);
 		return [decl("stroke", value)];
 	},
 	handleCustomProperty: (value) => {
@@ -8497,53 +9161,6 @@ functionalModifier((mod) => /^child-(.+)$/.test(mod), ({ selector, mod }) => {
 	};
 }, void 0);
 //#endregion
-//#region src/core/rule-order.ts
-var LEADING_AT = /^\s*@(media|container)\s+([^{]*)\{/;
-var LATE_MEDIA = /prefers-color-scheme|\bprint\b|forced-colors|orientation/;
-var MIN_W = /(?:min-width\s*:\s*|width\s*>=?\s*)([\d.]+)(px|rem|em)?/;
-var MAX_W = /(?:max-width\s*:\s*|width\s*<=?\s*)([\d.]+)(px|rem|em)?/;
-function toPx(n, unit) {
-	const v = parseFloat(n);
-	return unit === "rem" || unit === "em" ? v * 16 : v;
-}
-function preludeKey(kind, prelude) {
-	const container = kind === "container";
-	if (!container && /^\s*not\b/i.test(prelude)) return [0, 0];
-	const min = MIN_W.exec(prelude);
-	if (min) return [container ? 4 : 2, toPx(min[1], min[2])];
-	const max = MAX_W.exec(prelude);
-	if (max) return [container ? 3 : 1, -toPx(max[1], max[2])];
-	if (!container && LATE_MEDIA.test(prelude)) return [5, 0];
-	return [0, 0];
-}
-function ruleSortKey(rule) {
-	const key = [];
-	let rest = rule;
-	let m;
-	while (m = LEADING_AT.exec(rest)) {
-		const [g, v] = preludeKey(m[1], m[2]);
-		key.push(g, v);
-		rest = rest.slice(m[0].length);
-	}
-	return key;
-}
-function compareKeys(a, b) {
-	const n = Math.min(a.length, b.length);
-	for (let i = 0; i < n; i++) if (a[i] !== b[i]) return a[i] - b[i];
-	return a.length - b.length;
-}
-/** Index after the last key <= `key` (stable upper bound) in sorted `keys`. */
-function upperBound(keys, key) {
-	let lo = 0;
-	let hi = keys.length;
-	while (lo < hi) {
-		const mid = lo + hi >> 1;
-		if (compareKeys(keys[mid], key) <= 0) lo = mid + 1;
-		else hi = mid;
-	}
-	return lo;
-}
-//#endregion
-export { AstCache, IncrementalParser, ParseResultCache, UtilityCache, WeakCache, arbitraryPropertyRegistration, astCache, astToCss, atRoot, atRule, clearAllCaches, clearAstCache, collectDeclPaths, comment, compareKeys, configGetter, createContext, decl, declPathToAst, deepMerge, defaultConfig, escapeClassName, expandThemeFunctions, functionalModifier, functionalUtility, generateCss, generateCssFromJson, generateCssRules, getAstCacheStats, getModifier, getPreflightCSS, getUtility, hasCommentDelimiter, hasCommentToken, hasHtmlEndTagOpener, hasPreset, isBalancedPrelude, isDebug, isSafeVariantToken, isSafeVariantValue, isStructureSafeValue, isWellFormedVariantBrackets, jsonToAst, mergeAstTreeList, modifierRegistry, normalizeMathSpacing, optimizeAst, parseClassName, parseClassToAst, parseResultCache, property, raw, registerModifier, registerUtility, resolveTheme, rootToCss, rule, ruleSortKey, setContextCacheReset, setDebug, staticModifier, staticUtility, styleRule, themeGetter, themeKeyValue, themeKeyVar, themeToCssVars, tokenize, upperBound, utilityCache };
+export { AstCache, IncrementalParser, ParseResultCache, REJECT_CLASS, UtilityCache, WeakCache, arbitraryPropertyRegistration, astCache, astToCss, atRoot, atRule, clearAllCaches, clearAstCache, collectDeclPaths, comment, compareKeys, configGetter, createContext, decl, declPathToAst, deepMerge, defaultConfig, escapeClassName, expandThemeFunctions, functionalModifier, functionalUtility, generateCss, generateCssFromJson, generateCssRules, getAstCacheStats, getModifier, getPreflightCSS, getUtility, hasCommentDelimiter, hasCommentToken, hasHtmlEndTagOpener, hasPreset, isBalancedPrelude, isDebug, isSafeVariantToken, isSafeVariantValue, isScopedSelector, isStructureSafeValue, isWellFormedVariantBrackets, jsonToAst, mergeAstTreeList, modifierRegistry, normalizeMathSpacing, optimizeAst, parseClassName, parseClassToAst, parseResultCache, property, raw, registerModifier, registerUtility, resolveTheme, rootToCss, rule, ruleSortKey, setContextCacheReset, setDebug, staticModifier, staticUtility, styleRule, themeGetter, themeKeyValue, themeKeyVar, themeToCssVars, tokenize, upperBound, utilityCache };
 
 //# sourceMappingURL=index.js.map