@barocss/browser 0.4.0 → 0.6.0

package/dist/cdn/barocss.js

@@ -11,9 +11,6 @@ function atRoot(nodes, source) {
 function atRule(name, params, nodes, source) {
   return { type: "at-rule", name, params, nodes, source };
 }
-function styleRule(selector, nodes, source) {
-  return { type: "style-rule", selector, nodes, source };
-}
 function rule(selector, nodes, source) {
   return { type: "rule", selector, nodes, source };
 }
@@ -27,6 +24,16 @@ function property(name, initialValue, syntax, source) {
   }
   return atRule("property", name, nodes, source);
 }
+let debugEnabled = false;
+function setDebug(enabled) {
+  debugEnabled = enabled;
+}
+function debugLog(...args) {
+  if (debugEnabled) console.log(...args);
+}
+function debugWarn(...args) {
+  if (debugEnabled) console.warn(...args);
+}
 class AstCache {
   constructor() {
     this.cache = /* @__PURE__ */ new Map();
@@ -135,7 +142,7 @@ function clearAllCaches() {
   parseResultCache.clear();
   utilityCache.clear();
   resetContextCaches?.();
-  console.log("[clearAllCaches] All caches cleared");
+  debugLog("[clearAllCaches] All caches cleared");
 }
 const states = /* @__PURE__ */ new WeakMap();
 let cacheGeneration = 0;
@@ -172,6 +179,10 @@ function clearContextCaches(ctx) {
 const utilityRegistry = [];
 function registerUtility(util, ctx) {
   utilityRegistry.push(util);
+  {
+    parseResultCache.clear();
+    utilityCache.clear();
+  }
 }
 function getUtility(ctx) {
   return ctx && getContextState(ctx)?.utilities || utilityRegistry;
@@ -264,6 +275,11 @@ function staticUtility(name, decls, opts, ctx) {
     priority: opts?.priority
   });
 }
+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,
@@ -282,7 +298,7 @@ function functionalUtility(opts, ctx) {
         }
       }
       if (opts.supportsArbitrary && parsedUtility.arbitrary) {
-        const processedValue = finalValue.replace(/_/g, " ");
+        const processedValue = normalizeMathSpacing(expandThemeFunctions(finalValue.replace(/_/g, " ")));
         if (opts.handle) {
           const result = opts.handle(processedValue, ctx2, token, extra);
           if (result) return result;
@@ -332,14 +348,19 @@ function functionalUtility(opts, ctx) {
       if (opts.supportsFraction && /^-?\d+\/\d+$/.test(value)) {
         finalValue = value;
       }
+      const spacingKey = opts.spacingKeys ? spacingKeyValue(ctx2, String(finalValue).replace(/^-/, ""), !!parsedUtility.negative) : null;
       if (parsedUtility.negative && opts.supportsNegative && opts.handleNegativeBareValue) {
-        const bare = opts.handleNegativeBareValue({ value: String(finalValue).replace(/^-/, ""), ctx: ctx2, token, extra });
+        const bare = opts.handleNegativeBareValue({ value: String(finalValue).replace(/^-/, ""), ctx: ctx2, token, extra }) ?? spacingKey;
         if (bare == null) return [];
         finalValue = bare;
       } else if (opts.handleBareValue) {
-        const bare = opts.handleBareValue({ value: finalValue, ctx: ctx2, token, extra });
+        const bare = opts.handleBareValue({ value: finalValue, ctx: ctx2, token, extra }) ?? spacingKey;
         if (bare == null) return [];
         finalValue = bare;
+      } else if (spacingKey) {
+        finalValue = spacingKey;
+      } else if (!/^-?(\d|\.\d)/.test(String(finalValue))) {
+        return [];
       }
       if (opts.handle) {
         const result = opts.handle(finalValue, ctx2, token, extra);
@@ -355,6 +376,62 @@ function functionalUtility(opts, ctx) {
     priority: opts.priority
   });
 }
+const MATH_FNS = /* @__PURE__ */ new Set(["calc", "min", "max", "clamp"]);
+function expandThemeFunctions(value) {
+  return value.replace(/--spacing\(\s*([^()]+?)\s*\)/g, "calc(var(--spacing) * $1)");
+}
+const arbitraryPropertyRegistration = {
+  name: "[arbitrary-property]",
+  match: () => false,
+  handler: (value, _ctx, token) => {
+    const prop = token.property;
+    if (!prop || !value) return [];
+    return [decl(prop, normalizeMathSpacing(expandThemeFunctions(value.replace(/_/g, " "))))];
+  }
+};
+function normalizeMathSpacing(value) {
+  if (!/(calc|min|max|clamp)\(/.test(value)) return value;
+  const stack = [];
+  let out = "";
+  for (let i = 0; i < value.length; i++) {
+    const ch = value[i];
+    if (ch === "(") {
+      const name = (/([a-z-]*)$/i.exec(out)?.[1] ?? "").toLowerCase();
+      const inMath2 = stack.length > 0 && stack[stack.length - 1];
+      stack.push(MATH_FNS.has(name) || name === "" && inMath2);
+      out += ch;
+      continue;
+    }
+    if (ch === ")") {
+      stack.pop();
+      out += ch;
+      continue;
+    }
+    const inMath = stack.length > 0 && stack[stack.length - 1];
+    if (!inMath) {
+      out += ch;
+      continue;
+    }
+    if (ch === ",") {
+      out = out.trimEnd() + ", ";
+      while (value[i + 1] === " ") i++;
+      continue;
+    }
+    if ("+-*/".includes(ch)) {
+      const prev = out.trimEnd();
+      const p = prev[prev.length - 1] ?? "";
+      const binary = /[\w%)]/.test(p);
+      const exponent = (ch === "+" || ch === "-") && /\de$/i.test(prev) && prev.length === out.length && /\d/.test(value[i + 1] ?? "");
+      if (binary && !exponent) {
+        out = prev + " " + ch + " ";
+        while (value[i + 1] === " ") i++;
+        continue;
+      }
+    }
+    out += ch;
+  }
+  return out;
+}
 function tokenize(className) {
   const tokens = [];
   let current = "";
@@ -421,6 +498,9 @@ function parseClassName(className, ctx) {
   if (className.startsWith("!")) {
     important = true;
     realClassName = className.slice(1);
+  } else if (className.length > 1 && className.endsWith("!")) {
+    important = true;
+    realClassName = className.slice(0, -1);
   }
   const tokens = tokenize(realClassName);
   const result = parseTokens(tokens, ctx);
@@ -436,6 +516,16 @@ function parseTokens(tokens, ctx) {
   if (tokens.length === 0) {
     return { modifiers, utility: null };
   }
+  if (tokens.length > 1) {
+    const utilityIndex = isUtilityPrefix(tokens[0].value, ctx) ? 0 : tokens.length - 1;
+    if (tokens.some((t, i) => i !== utilityIndex && !isSafeVariantToken(t.value))) {
+      return { modifiers, utility: null };
+    }
+  }
+  const utilityToken = tokens.length > 1 && !isUtilityPrefix(tokens[0].value, ctx) ? tokens[tokens.length - 1] : tokens[0];
+  if (!isStructureSafeValue(utilityToken.value)) {
+    return { modifiers, utility: null };
+  }
   if (tokens.length === 1) {
     utility = parseUtility(tokens[0].value, ctx);
   } else if (tokens.length === 2) {
@@ -469,6 +559,91 @@ function parseTokens(tokens, ctx) {
   }
   return { modifiers, utility };
 }
+const FUNCTIONAL_VALUE_VARIANT = /^-?(?:(?:group|peer)-)?(?:has|not)-\[(.*)\](?:\/[\w-]+)?$/;
+function isSafeVariantToken(value) {
+  if (hasCommentToken(value)) return false;
+  const m = FUNCTIONAL_VALUE_VARIANT.exec(value);
+  if (m) return isSafeVariantValue(m[1], true);
+  return isSafeVariantValue(value);
+}
+function hasCommentToken(value) {
+  return value.includes("/*") || value.includes("*/");
+}
+function hasCommentDelimiter(text) {
+  for (let i = 0; i < text.length - 1; i++) {
+    const c = text[i];
+    if (c === "\\") {
+      i++;
+      continue;
+    }
+    const n = text[i + 1];
+    if (c === "/" && n === "*" || c === "*" && n === "/") return true;
+  }
+  return false;
+}
+function isStructureSafeValue(value) {
+  if (hasCommentToken(value)) return false;
+  return isSafeVariantValue(value, true);
+}
+function hasUnquotedAt(value) {
+  let quote = "";
+  for (let i = 0; i < value.length; i++) {
+    const c = value[i];
+    if (c === "\\") {
+      i++;
+      continue;
+    }
+    if (quote) {
+      if (c === quote) quote = "";
+      continue;
+    }
+    if (c === '"' || c === "'") quote = c;
+    else if (c === "@") return true;
+  }
+  return false;
+}
+function isSafeVariantValue(value, allowTopLevelComma = false) {
+  const stack = [];
+  let quote = "";
+  let parenDepth = 0;
+  for (let i = 0; i < value.length; i++) {
+    const c = value[i];
+    if (c === "\\") {
+      i++;
+      continue;
+    }
+    if (quote) {
+      if (c === quote) quote = "";
+      continue;
+    }
+    switch (c) {
+      case '"':
+      case "'":
+        quote = c;
+        break;
+      case "(":
+        stack.push(")");
+        parenDepth++;
+        break;
+      case "[":
+        stack.push("]");
+        break;
+      case ")":
+      case "]":
+        if (stack.pop() !== c) return false;
+        if (c === ")") parenDepth--;
+        break;
+      case "{":
+      case "}":
+      case ";":
+        return false;
+      case ",":
+        if (parenDepth === 0 && !allowTopLevelComma) return false;
+        break;
+    }
+  }
+  return stack.length === 0 && !quote;
+}
 function parseModifier(value) {
   let negative = false;
   let modStr = value;
@@ -493,6 +668,11 @@ function parseUtility(value, ctx) {
   let opacity2 = "";
   let category = "";
   let priority = 0;
+  const prop = /^\[(--[a-zA-Z_][a-zA-Z0-9_-]*|-?[a-z][a-z-]*):(.+)\]$/.exec(value);
+  if (prop) {
+    if (!isStructureSafeValue(prop[2]) || hasUnquotedAt(prop[2])) return { prefix: "", value: "" };
+    return { prefix: "", value: prop[2], arbitrary: true, property: prop[1] };
+  }
   if (value.startsWith("-")) {
     negative = true;
   }
@@ -548,6 +728,8 @@ function parseUtility(value, ctx) {
     priority
   };
 }
+const isSafePrelude = (text) => !hasCommentDelimiter(String(text ?? ""));
+const isSafeDecl = (prop, value) => isStructureSafeValue(String(prop)) && isStructureSafeValue(String(value ?? ""));
 const importantPrefix = "!important";
 function astToCss(ast, baseSelector, opts, _indent = "") {
   const minify = opts?.minify;
@@ -556,7 +738,7 @@ function astToCss(ast, baseSelector, opts, _indent = "") {
   const important = opts?.important ?? false;
   const importantString = important ? ` ${importantPrefix}` : "";
   if (!ast || ast.length === 0) {
-    console.warn("[astToCss] Empty AST received:", { ast, baseSelector, minify });
+    debugWarn("[astToCss] Empty AST received:", { ast, baseSelector, minify });
     return "";
   }
   const dedupedAst = [];
@@ -578,6 +760,7 @@ function astToCss(ast, baseSelector, opts, _indent = "") {
     switch (node.type) {
       case "decl": {
         const value = node.value;
+        if (!isSafeDecl(node.prop, value)) return "";
         if (node.prop.startsWith("--")) {
           if (minify) {
             const css = `${node.prop}: ${value}${importantString};`;
@@ -609,6 +792,7 @@ function astToCss(ast, baseSelector, opts, _indent = "") {
             }).join(", ");
           }
         }
+        if (!isSafePrelude(selector)) return "";
         if (minify) {
           const css = `${indent}${selector}{${astToCss(
             node.nodes,
@@ -633,6 +817,7 @@ ${astToCss(
         }
       }
       case "style-rule": {
+        if (!isSafePrelude(node.selector)) return "";
         if (minify) {
           const css = `${indent}${node.selector} {${astToCss(
             node.nodes,
@@ -657,6 +842,7 @@ ${astToCss(
         }
       }
       case "at-rule": {
+        if (!isSafePrelude(node.name) || !isSafePrelude(node.params)) return "";
         if (minify) {
           const css = `${indent}@${node.name} ${node.params}{${astToCss(
             node.nodes,
@@ -685,13 +871,13 @@ ${astToCss(
       case "raw":
         return `${indent}${node.value}`;
       default:
-        console.warn("[astToCss] Unknown node type:", node);
+        debugWarn("[astToCss] Unknown node type:", node);
         return "";
     }
   }).filter(Boolean).join(minify ? "" : "\n");
   const finalResult = result + (minify ? "" : "\n");
   if (!finalResult || finalResult.trim() === "") {
-    console.warn("[astToCss] Empty result generated:", {
+    debugWarn("[astToCss] Empty result generated:", {
       ast,
       baseSelector,
       minify,
@@ -702,26 +888,266 @@ ${astToCss(
   }
   return finalResult;
 }
-function rootToCss(nodes) {
+function rootToCss(nodes, opts) {
   const result = nodes.map((node) => {
     const list = [];
     if (node.type === "decl") {
-      list.push(`${node.prop}: ${node.value};`);
-    } else if (node.type === "at-rule") {
-      list.push(
-        `@${node.name} ${node.params} {
+      if (isSafeDecl(node.prop, node.value)) {
+        list.push(`${node.prop}: ${node.value};`);
+      }
+    } else if (node.type === "at-rule" && isSafePrelude(node.name) && isSafePrelude(node.params)) {
+      {
+        list.push(
+          `@${node.name} ${node.params} {
 ${node.nodes.map((node2) => {
-          if (node2.type === "decl") {
-            return `	${node2.prop}: ${node2.value};`;
-          }
-        }).join("\n")}
+            if (node2.type === "decl" && isSafeDecl(node2.prop, node2.value)) {
+              return `	${node2.prop}: ${node2.value};`;
+            }
+          }).join("\n")}
 }`
-      );
+        );
+      }
     }
     return list.join("\n");
   }).join("\n");
   return result;
 }
+function normalizePrefix(prefix) {
+  let p = prefix.trim();
+  if (!p.startsWith("--")) p = `--${p}`;
+  if (!p.endsWith("-")) p = `${p}-`;
+  return p;
+}
+function escapeKey(key) {
+  return key.replace(".", "\\.");
+}
+function colorsToCssVars(colors2) {
+  if (!colors2) return {};
+  const result = {};
+  function walk(obj, prefix = []) {
+    for (const key in obj) {
+      const value = obj[key];
+      if (typeof value === "object" && value !== null) {
+        walk(value, [...prefix, key]);
+      } else {
+        const varName2 = "--color-" + [...prefix, key].join("-");
+        result[varName2] = value;
+      }
+    }
+  }
+  walk(colors2);
+  return result;
+}
+function boxShadowToCssVars(boxShadow2) {
+  if (!boxShadow2) return {};
+  const result = {};
+  for (const key in boxShadow2) {
+    result[`--shadow-${key}`] = boxShadow2[key];
+  }
+  return result;
+}
+function fontSizeToCssVars(fontSize2) {
+  if (!fontSize2) return {};
+  const result = {};
+  for (const key in fontSize2) {
+    const value = fontSize2[key];
+    if (Array.isArray(value)) {
+      result[`--text-${key}`] = value[0];
+      if (value[1]) result[`--text-${key}--line-height`] = value[1];
+    } else {
+      result[`--text-${key}`] = value;
+    }
+  }
+  return result;
+}
+function fontWeightToCssVars(fontWeight2) {
+  if (!fontWeight2) return {};
+  const result = {};
+  for (const key in fontWeight2) {
+    result[`--font-weight-${key}`] = fontWeight2[key];
+  }
+  return result;
+}
+function fontFamilyToCssVars(fontFamily2) {
+  if (!fontFamily2) return {};
+  const result = {};
+  for (const key in fontFamily2) {
+    const value = fontFamily2[key];
+    if (Array.isArray(value)) {
+      result[`--font-${key}`] = value.join(", ");
+    } else {
+      result[`--font-${key}`] = value;
+    }
+  }
+  return result;
+}
+function letterSpacingToCssVars(letterSpacing2) {
+  if (!letterSpacing2) return {};
+  const result = {};
+  for (const key in letterSpacing2) {
+    result[`--letter-spacing-${key}`] = letterSpacing2[key];
+  }
+  return result;
+}
+function spacingToCssVars(spacing2) {
+  if (!spacing2) return {};
+  const result = {};
+  for (const key in spacing2) {
+    result[`--spacing-${escapeKey(key)}`] = spacing2[key];
+  }
+  return result;
+}
+function borderRadiusToCssVars(borderRadius2) {
+  if (!borderRadius2) return {};
+  const result = {};
+  for (const key in borderRadius2) {
+    result[`--radius-${escapeKey(key)}`] = borderRadius2[key];
+  }
+  return result;
+}
+function zIndexToCssVars(zIndex2) {
+  if (!zIndex2) return {};
+  const result = {};
+  for (const key in zIndex2) {
+    result[`--z-${escapeKey(key)}`] = String(zIndex2[key]);
+  }
+  return result;
+}
+function opacityToCssVars(opacity2) {
+  if (!opacity2) return {};
+  const result = {};
+  for (const key in opacity2) {
+    result[`--opacity-${escapeKey(key)}`] = String(opacity2[key]);
+  }
+  return result;
+}
+function animationToCssVars(animations2) {
+  if (!animations2) return {};
+  const result = {};
+  for (const key in animations2) {
+    result[`--animate-${escapeKey(key)}`] = animations2[key];
+  }
+  return result;
+}
+function keyframesToCss(keyframes2) {
+  if (!keyframes2) return "";
+  let css = "";
+  for (const name in keyframes2) {
+    const frames = keyframes2[name];
+    css += `@keyframes ${name} {
+`;
+    for (const step in frames) {
+      css += `  ${step} {`;
+      const props = frames[step];
+      for (const prop in props) {
+        css += ` ${prop}: ${props[prop]};`;
+      }
+      css += " }\n";
+    }
+    css += "}\n";
+  }
+  return css;
+}
+function transitionTimingFunctionToCssVars(transition) {
+  const result = {};
+  for (const key in transition) {
+    if (key === "DEFAULT") {
+      result[`--default-transition-timing-function`] = transition[key];
+    } else {
+      result[`--transition-timing-function-${escapeKey(key)}`] = transition[key];
+      if (key !== "linear") result[`--ease-${escapeKey(key)}`] = transition[key];
+    }
+  }
+  return result;
+}
+function transitionDurationToCssVars(transitionDuration2) {
+  const result = {};
+  for (const key in transitionDuration2) {
+    if (key === "DEFAULT") {
+      result[`--default-transition-duration`] = transitionDuration2[key];
+    } else {
+      result[`--transition-duration-${escapeKey(key)}`] = transitionDuration2[key];
+    }
+  }
+  return result;
+}
+function transitionDelayToCssVars(transitionDelay2) {
+  const result = {};
+  for (const key in transitionDelay2) {
+    if (key === "DEFAULT") {
+      result[`--default-transition-delay`] = transitionDelay2[key];
+    } else {
+      result[`--transition-delay-${escapeKey(key)}`] = transitionDelay2[key];
+    }
+  }
+  return result;
+}
+function blurToCssVars(blur2) {
+  const result = {};
+  for (const key in blur2) {
+    if (key === "DEFAULT") {
+      result[`--default-blur`] = blur2[key];
+    } else {
+      result[`--blur-${escapeKey(key)}`] = blur2[key];
+    }
+  }
+  return result;
+}
+function containerToCssVars(container2) {
+  const result = {};
+  for (const key in container2) {
+    result[`--container-${escapeKey(key)}`] = container2[key];
+  }
+  return result;
+}
+function themeToCssVarsAll(theme) {
+  return {
+    ...colorsToCssVars(theme.colors),
+    ...boxShadowToCssVars(theme.boxShadow),
+    ...fontSizeToCssVars(theme.fontSize),
+    ...fontWeightToCssVars(theme.fontWeight),
+    ...fontFamilyToCssVars(theme.fontFamily),
+    ...letterSpacingToCssVars(theme.letterSpacing),
+    "--spacing": theme.spacing["1"],
+    ...spacingToCssVars(theme.spacing),
+    ...containerToCssVars(theme.container),
+    ...borderRadiusToCssVars(theme.borderRadius),
+    ...zIndexToCssVars(theme.zIndex),
+    ...opacityToCssVars(theme.opacity),
+    ...animationToCssVars(theme.animations),
+    ...transitionTimingFunctionToCssVars(theme.transitionTimingFunction),
+    ...transitionDurationToCssVars(theme.transitionDuration),
+    ...transitionDelayToCssVars(theme.transitionDelay),
+    ...blurToCssVars(theme.blur),
+    ...Object.fromEntries(Object.entries(theme.aspect ?? {}).map(([k, v2]) => [`--aspect-${escapeKey(k)}`, v2]))
+    // keyframes handled separately
+  };
+}
+function isSelfReferencingVar(name, value) {
+  if (typeof value !== "string") return false;
+  const m = /^var\(\s*(--[\w-]+)\s*(?:,[\s\S]*)?\)$/.exec(value.trim());
+  return !!m && m[1] === name.trim();
+}
+function toCssVarsBlock(vars, extra = "") {
+  return ":root,:host {\n" + Object.entries(vars).filter(([k, v2]) => !isSelfReferencingVar(k, v2)).map(([k, v2]) => `  ${k}: ${v2};`).join("\n") + "\n}\n" + extra + "\n";
+}
+const BARO_VAR = /--baro-/g;
+const PREFIXED_KEYS = /* @__PURE__ */ new Set(["prop", "value", "params", "selector", "nodes", "items"]);
+function applyVarPrefix(ast, ctx) {
+  const configured = ctx?.config("cssVarPrefix");
+  if (typeof configured !== "string" || !configured.trim()) return ast;
+  const prefix = normalizePrefix(configured);
+  if (prefix === "--baro-") return ast;
+  const walk = (node) => {
+    if (typeof node === "string") return node.includes("--baro-") ? node.replace(BARO_VAR, prefix) : node;
+    if (Array.isArray(node)) return node.map(walk);
+    if (!node || typeof node !== "object") return node;
+    const out = {};
+    for (const [k, val] of Object.entries(node)) out[k] = PREFIXED_KEYS.has(k) ? walk(val) : val;
+    return out;
+  };
+  return walk(ast);
+}
 const failureCache = /* @__PURE__ */ new Set();
 function collectDeclPaths(nodes = [], path = []) {
   let result = [];
@@ -877,8 +1303,8 @@ function extractAtRootNodes(nodes, parent, atRootNodes = []) {
     if (node.type === "at-root") {
       atRootNodes.push(node);
       delete nodes[i];
-    } else if (node.type === "rule" || node.type === "style-rule") {
-      extractAtRootNodes(node.nodes, node, atRootNodes);
+    } else if (node.type === "rule" || node.type === "style-rule" || node.type === "at-rule") {
+      extractAtRootNodes(node.nodes ?? [], node, atRootNodes);
     }
   }
   if (parent) {
@@ -897,33 +1323,40 @@ function parseClassToAst(fullClassName, ctx) {
   }
   const { modifiers, utility } = parseClassName(fullClassName, ctx);
   if (!utility) {
-    console.warn(`[BAROCSS] Invalid class name format: "${fullClassName}"`);
+    debugWarn(`[BAROCSS] Invalid class name format: "${fullClassName}"`);
     failures.add(fullClassName);
     return [];
   }
-  const utilReg = getUtility(ctx).find((u) => {
+  const utilRegs = utility.property ? [arbitraryPropertyRegistration] : getUtility(ctx).filter((u) => {
     const fullClassName2 = utility.value ? `${utility.prefix}-${utility.value}` : utility.prefix;
     return u.match(fullClassName2);
   });
-  if (!utilReg) {
+  if (utilRegs.length === 0) {
     const utilityName = utility.value ? `${utility.prefix}-${utility.value}` : utility.prefix;
-    console.warn(`[BAROCSS] Unknown utility class: "${utilityName}" in "${fullClassName}"`);
+    debugWarn(`[BAROCSS] Unknown utility class: "${utilityName}" in "${fullClassName}"`);
     failures.add(fullClassName);
     return [];
   }
   let value = utility.value;
   if (utility.negative && value) value = "-" + value;
-  let ast = utilReg.handler(value, ctx, utility, utilReg) || [];
+  let ast = [];
+  for (const utilReg of utilRegs) {
+    ast = utilReg.handler(value, ctx, utility, utilReg) || [];
+    if (ast.length > 0) break;
+  }
   const wrappers = [];
   const selector = "&";
   for (let i = 0; i < modifiers.length; i++) {
     const variant = modifiers[i];
     const plugin = getModifier(ctx).find((p) => p.match(variant.type, ctx));
     if (!plugin) {
-      console.warn(`[BAROCSS] Unknown variant: "${variant.type}" in "${fullClassName}"`);
+      debugWarn(`[BAROCSS] Unknown variant: "${variant.type}" in "${fullClassName}"`);
       failures.add(fullClassName);
       return [];
     }
+    if (plugin.astHandler) {
+      ast = plugin.astHandler(ast, variant, ctx, modifiers, i);
+    }
     if (plugin.wrap) {
       const items = plugin.wrap(variant, ctx);
       wrappers.push({
@@ -1000,7 +1433,7 @@ function parseClassToAst(fullClassName, ctx) {
   }
   const atRootNodes = [];
   extractAtRootNodes(ast, void 0, atRootNodes);
-  ast = [...atRootNodes, ...ast].filter(Boolean);
+  ast = applyVarPrefix([...atRootNodes, ...ast].filter(Boolean), ctx);
   cache.set(fullClassName, ast);
   return ast;
 }
@@ -1142,7 +1575,7 @@ class IncrementalParser {
       }
       const ast = parseClassToAst(className, this.ctx);
       if (ast.length === 0) {
-        console.warn("[IncrementalParser] ast is empty", className);
+        debugWarn("[IncrementalParser] ast is empty", className);
         return null;
       }
       const rules = generateCssRules(className, this.ctx, { dedup: false });
@@ -1163,7 +1596,7 @@ class IncrementalParser {
         rootCssList: rule2.rootCssList
       };
     } catch (error) {
-      console.warn("[IncrementalParser] Failed to process class:", className, error);
+      debugWarn("[IncrementalParser] Failed to process class:", className, error);
       return null;
     }
   }
@@ -1309,6 +1742,15 @@ class IncrementalParser {
   markProcessed(cls) {
     this.processedClasses.add(cls);
   }
+  /**
+   * Forgets that a class was processed, so a later request generates it again
+   * (used when the browser runtime reclaims an unused class's rules, #269).
+   *
+   * @param cls - The CSS class name to forget
+   */
+  unmarkProcessed(cls) {
+    this.processedClasses.delete(cls);
+  }
   /**
    * Process classes synchronously and update BrowserRuntime cache
    * This method is used by ChangeDetector for scan operations
@@ -1662,13 +2104,15 @@ const spacing = {
 };
 const borderRadius = {
   none: "0px",
-  sm: "0.125rem",
+  xs: "0.125rem",
+  sm: "0.25rem",
   DEFAULT: "0.25rem",
   md: "0.375rem",
   lg: "0.5rem",
   xl: "0.75rem",
   "2xl": "1rem",
   "3xl": "1.5rem",
+  "4xl": "2rem",
   full: "9999px"
 };
 const fontSize = {
@@ -1745,11 +2189,13 @@ const lineHeight = {
   12: "3rem"
 };
 const boxShadow = {
-  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  "2xs": "0 1px rgb(0 0 0 / 0.05)",
+  xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
   DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06)",
-  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06)",
-  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05)",
-  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
   "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
   inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
   none: "none"
@@ -1892,15 +2338,14 @@ const letterSpacing = {
   widest: "0.1em"
 };
 const blur = {
-  DEFAULT: "0px",
-  sm: "4px",
-  md: "8px",
-  lg: "12px",
-  xl: "16px",
-  "2xl": "24px",
-  "3xl": "32px",
-  "4xl": "40px",
-  "5xl": "48px"
+  DEFAULT: "8px",
+  xs: "4px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "24px",
+  "2xl": "40px",
+  "3xl": "64px"
 };
 const defaultTheme = {
   colors,
@@ -1923,214 +2368,10 @@ const defaultTheme = {
   animations,
   keyframes,
   animationVars,
-  blur
+  blur,
+  // Tailwind 4.1.13 --aspect-* (aspect-video → var(--aspect-video))
+  aspect: { video: "16 / 9" }
 };
-function escapeKey(key) {
-  return key.replace(".", "\\.");
-}
-function colorsToCssVars(colors2) {
-  if (!colors2) return {};
-  const result = {};
-  function walk(obj, prefix = []) {
-    for (const key in obj) {
-      const value = obj[key];
-      if (typeof value === "object" && value !== null) {
-        walk(value, [...prefix, key]);
-      } else {
-        const varName2 = "--color-" + [...prefix, key].join("-");
-        result[varName2] = value;
-      }
-    }
-  }
-  walk(colors2);
-  return result;
-}
-function boxShadowToCssVars(boxShadow2) {
-  if (!boxShadow2) return {};
-  const result = {};
-  for (const key in boxShadow2) {
-    result[`--shadow-${key}`] = boxShadow2[key];
-  }
-  return result;
-}
-function fontSizeToCssVars(fontSize2) {
-  if (!fontSize2) return {};
-  const result = {};
-  for (const key in fontSize2) {
-    const value = fontSize2[key];
-    if (Array.isArray(value)) {
-      result[`--text-${key}`] = value[0];
-      if (value[1]) result[`--text-${key}--line-height`] = value[1];
-    } else {
-      result[`--text-${key}`] = value;
-    }
-  }
-  return result;
-}
-function fontWeightToCssVars(fontWeight2) {
-  if (!fontWeight2) return {};
-  const result = {};
-  for (const key in fontWeight2) {
-    result[`--font-weight-${key}`] = fontWeight2[key];
-  }
-  return result;
-}
-function fontFamilyToCssVars(fontFamily2) {
-  if (!fontFamily2) return {};
-  const result = {};
-  for (const key in fontFamily2) {
-    const value = fontFamily2[key];
-    if (Array.isArray(value)) {
-      result[`--font-${key}`] = value.join(", ");
-    } else {
-      result[`--font-${key}`] = value;
-    }
-  }
-  return result;
-}
-function letterSpacingToCssVars(letterSpacing2) {
-  if (!letterSpacing2) return {};
-  const result = {};
-  for (const key in letterSpacing2) {
-    result[`--letter-spacing-${key}`] = letterSpacing2[key];
-  }
-  return result;
-}
-function spacingToCssVars(spacing2) {
-  if (!spacing2) return {};
-  const result = {};
-  for (const key in spacing2) {
-    result[`--spacing-${escapeKey(key)}`] = spacing2[key];
-  }
-  return result;
-}
-function borderRadiusToCssVars(borderRadius2) {
-  if (!borderRadius2) return {};
-  const result = {};
-  for (const key in borderRadius2) {
-    result[`--radius-${escapeKey(key)}`] = borderRadius2[key];
-  }
-  return result;
-}
-function zIndexToCssVars(zIndex2) {
-  if (!zIndex2) return {};
-  const result = {};
-  for (const key in zIndex2) {
-    result[`--z-${escapeKey(key)}`] = String(zIndex2[key]);
-  }
-  return result;
-}
-function opacityToCssVars(opacity2) {
-  if (!opacity2) return {};
-  const result = {};
-  for (const key in opacity2) {
-    result[`--opacity-${escapeKey(key)}`] = String(opacity2[key]);
-  }
-  return result;
-}
-function animationToCssVars(animations2) {
-  if (!animations2) return {};
-  const result = {};
-  for (const key in animations2) {
-    result[`--animate-${escapeKey(key)}`] = animations2[key];
-  }
-  return result;
-}
-function keyframesToCss(keyframes2) {
-  if (!keyframes2) return "";
-  let css = "";
-  for (const name in keyframes2) {
-    const frames = keyframes2[name];
-    css += `@keyframes ${name} {
-`;
-    for (const step in frames) {
-      css += `  ${step} {`;
-      const props = frames[step];
-      for (const prop in props) {
-        css += ` ${prop}: ${props[prop]};`;
-      }
-      css += " }\n";
-    }
-    css += "}\n";
-  }
-  return css;
-}
-function transitionTimingFunctionToCssVars(transition) {
-  const result = {};
-  for (const key in transition) {
-    if (key === "DEFAULT") {
-      result[`--default-transition-timing-function`] = transition[key];
-    } else {
-      result[`--transition-timing-function-${escapeKey(key)}`] = transition[key];
-    }
-  }
-  return result;
-}
-function transitionDurationToCssVars(transitionDuration2) {
-  const result = {};
-  for (const key in transitionDuration2) {
-    if (key === "DEFAULT") {
-      result[`--default-transition-duration`] = transitionDuration2[key];
-    } else {
-      result[`--transition-duration-${escapeKey(key)}`] = transitionDuration2[key];
-    }
-  }
-  return result;
-}
-function transitionDelayToCssVars(transitionDelay2) {
-  const result = {};
-  for (const key in transitionDelay2) {
-    if (key === "DEFAULT") {
-      result[`--default-transition-delay`] = transitionDelay2[key];
-    } else {
-      result[`--transition-delay-${escapeKey(key)}`] = transitionDelay2[key];
-    }
-  }
-  return result;
-}
-function blurToCssVars(blur2) {
-  const result = {};
-  for (const key in blur2) {
-    if (key === "DEFAULT") {
-      result[`--default-blur`] = blur2[key];
-    } else {
-      result[`--blur-${escapeKey(key)}`] = blur2[key];
-    }
-  }
-  return result;
-}
-function containerToCssVars(container2) {
-  const result = {};
-  for (const key in container2) {
-    result[`--container-${escapeKey(key)}`] = container2[key];
-  }
-  return result;
-}
-function themeToCssVarsAll(theme) {
-  return {
-    ...colorsToCssVars(theme.colors),
-    ...boxShadowToCssVars(theme.boxShadow),
-    ...fontSizeToCssVars(theme.fontSize),
-    ...fontWeightToCssVars(theme.fontWeight),
-    ...fontFamilyToCssVars(theme.fontFamily),
-    ...letterSpacingToCssVars(theme.letterSpacing),
-    "--spacing": theme.spacing["1"],
-    ...spacingToCssVars(theme.spacing),
-    ...containerToCssVars(theme.container),
-    ...borderRadiusToCssVars(theme.borderRadius),
-    ...zIndexToCssVars(theme.zIndex),
-    ...opacityToCssVars(theme.opacity),
-    ...animationToCssVars(theme.animations),
-    ...transitionTimingFunctionToCssVars(theme.transitionTimingFunction),
-    ...transitionDurationToCssVars(theme.transitionDuration),
-    ...transitionDelayToCssVars(theme.transitionDelay),
-    ...blurToCssVars(theme.blur)
-    // keyframes handled separately
-  };
-}
-function toCssVarsBlock(vars, extra = "") {
-  return ":root,:host {\n" + Object.entries(vars).map(([k, v2]) => `  ${k}: ${v2};`).join("\n") + "\n}\n" + extra + "\n";
-}
 const preflightMinimalCSS = `
 /* BaroCSS Preflight - Minimal Reset */
 /* ================================= */
@@ -2261,6 +2502,10 @@ select {
 html {
   line-height: 1.15;
   -webkit-text-size-adjust: 100%;
+  /* Tailwind 4.1.13 root font (app --default-font-family / --font-sans win) */
+  font-family: var(--default-font-family, var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'));
+  font-feature-settings: var(--default-font-feature-settings, normal);
+  font-variation-settings: var(--default-font-variation-settings, normal);
 }
 
 /* Remove the gray background on active links in IE 10 */
@@ -2422,9 +2667,63 @@ textarea {
   outline-offset: -2px;
 }
 
-/* Remove the inner padding in Chrome and Safari on macOS */
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
+/* Remove the inner padding in Chrome and Safari on macOS */
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/* Tailwind 4.1.13 monospace stack for code-like elements */
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--default-mono-font-family, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace));
+  font-feature-settings: var(--default-mono-font-feature-settings, normal);
+  font-variation-settings: var(--default-mono-font-variation-settings, normal);
+  font-size: 1em;
+}
+
+/* Tailwind 4.1.13 form-control reset: inherit typography and colour, drop native radius/background (#228) */
+button,
+input,
+select,
+optgroup,
+textarea,
+::file-selector-button {
+  font: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  border-radius: 0;
+  background-color: transparent;
+  opacity: 1;
+}
+
+:where(select:is([multiple], [size])) optgroup {
+  font-weight: bolder;
+}
+
+:where(select:is([multiple], [size])) optgroup option {
+  padding-inline-start: 20px;
+}
+
+::file-selector-button {
+  margin-inline-end: 4px;
+}
+
+::placeholder {
+  opacity: 1;
+}
+
+@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
+  ::placeholder {
+    color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
+}
+
+textarea {
+  resize: vertical;
 }
 `;
 const preflightFullCSS = `
@@ -2438,10 +2737,14 @@ const preflightFullCSS = `
   box-sizing: border-box;
 }
 
-/* Remove default margin and padding */
+/* Remove default margin and padding; reset border to Tailwind v4's universal
+   \`border: 0 solid\` so a bare border/border-t (width set by the utility, style
+   otherwise \`none\`) renders. Width 0 keeps borders invisible until a utility
+   sets one. */
 * {
   margin: 0;
   padding: 0;
+  border: 0 solid;
 }
 
 /* Set core body defaults */
@@ -2502,6 +2805,10 @@ html {
   line-height: 1.15;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
+  /* Tailwind 4.1.13 root font (app --default-font-family / --font-sans win) */
+  font-family: var(--default-font-family, var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'));
+  font-feature-settings: var(--default-font-feature-settings, normal);
+  font-variation-settings: var(--default-font-variation-settings, normal);
 }
 
 /* Remove the gray background on active links in IE 10 */
@@ -2687,7 +2994,9 @@ code,
 kbd,
 pre,
 samp {
-  font-family: monospace, monospace;
+  font-family: var(--default-mono-font-family, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace));
+  font-feature-settings: var(--default-mono-font-feature-settings, normal);
+  font-variation-settings: var(--default-mono-font-variation-settings, normal);
   font-size: 1em;
 }
 
@@ -2789,6 +3098,49 @@ template {
     page-break-after: avoid;
   }
 }
+
+/* Tailwind 4.1.13 form-control reset: inherit typography and colour, drop native radius/background (#228) */
+button,
+input,
+select,
+optgroup,
+textarea,
+::file-selector-button {
+  font: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  border-radius: 0;
+  background-color: transparent;
+  opacity: 1;
+}
+
+:where(select:is([multiple], [size])) optgroup {
+  font-weight: bolder;
+}
+
+:where(select:is([multiple], [size])) optgroup option {
+  padding-inline-start: 20px;
+}
+
+::file-selector-button {
+  margin-inline-end: 4px;
+}
+
+::placeholder {
+  opacity: 1;
+}
+
+@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
+  ::placeholder {
+    color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
+}
+
+textarea {
+  resize: vertical;
+}
 `;
 function getPreflightCSS(level = true) {
   if (level === "minimal") {
@@ -2908,6 +3260,7 @@ ${keyframesToCss(theme.keyframes || {})}
   return result;
 }
 function createContext(configObj) {
+  if (configObj.debug !== void 0) setDebug(!!configObj.debug);
   const configWithDefaults = {
     presets: [
       { theme: defaultTheme },
@@ -3192,6 +3545,30 @@ function parseColor(input) {
   }
   return null;
 }
+const COLOR_KEYWORDS = /* @__PURE__ */ new Set(["inherit", "currentcolor", "transparent"]);
+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 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)) {
+    const pct = bracketed && n <= 1 ? n * 100 : n;
+    return { amount: `${+pct.toFixed(4)}%`, isVar: false };
+  }
+  return { amount: v, isVar: false };
+}
 staticUtility("accent-inherit", [["accent-color", "inherit"]], { category: "interactivity" });
 staticUtility("accent-current", [["accent-color", "currentColor"]], { category: "interactivity" });
 staticUtility("accent-transparent", [["accent-color", "transparent"]], { category: "interactivity" });
@@ -3343,6 +3720,7 @@ staticUtility("snap-proximity", [["--baro-scroll-snap-strictness", "proximity"]]
 ].forEach(([name, prop]) => {
   functionalUtility({
     name: `scroll-${name}`,
+    spacingKeys: true,
     prop,
     supportsArbitrary: true,
     supportsCustomProperty: true,
@@ -3370,6 +3748,7 @@ staticUtility("snap-proximity", [["--baro-scroll-snap-strictness", "proximity"]]
 ].forEach(([name, prop]) => {
   functionalUtility({
     name: `scroll-${name}`,
+    spacingKeys: true,
     prop,
     supportsArbitrary: true,
     supportsCustomProperty: true,
@@ -3394,10 +3773,10 @@ staticUtility("touch-pan-up", [["touch-action", "pan-up"]], { category: "interac
 staticUtility("touch-pan-down", [["touch-action", "pan-down"]], { category: "interactivity" });
 staticUtility("touch-pinch-zoom", [["touch-action", "pinch-zoom"]], { category: "interactivity" });
 staticUtility("touch-manipulation", [["touch-action", "manipulation"]], { category: "interactivity" });
-staticUtility("select-none", [["user-select", "none"]], { category: "interactivity" });
-staticUtility("select-text", [["user-select", "text"]], { category: "interactivity" });
-staticUtility("select-all", [["user-select", "all"]], { category: "interactivity" });
-staticUtility("select-auto", [["user-select", "auto"]], { category: "interactivity" });
+staticUtility("select-none", [["-webkit-user-select", "none"], ["user-select", "none"]], { category: "interactivity" });
+staticUtility("select-text", [["-webkit-user-select", "text"], ["user-select", "text"]], { category: "interactivity" });
+staticUtility("select-all", [["-webkit-user-select", "all"], ["user-select", "all"]], { category: "interactivity" });
+staticUtility("select-auto", [["-webkit-user-select", "auto"], ["user-select", "auto"]], { category: "interactivity" });
 staticUtility("will-change-auto", [["will-change", "auto"]], { category: "interactivity" });
 staticUtility("will-change-scroll", [["will-change", "scroll-position"]], { category: "interactivity" });
 staticUtility("will-change-contents", [["will-change", "contents"]], { category: "interactivity" });
@@ -3415,7 +3794,7 @@ const defaultDuration = "var(--default-transition-duration)";
 staticUtility("transition", [
   [
     "transition-property",
-    "color, background-color, border-color, text-decoration-color, fill, stroke, --baro-gradient-from, --baro-gradient-via, --baro-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter"
+    "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --baro-gradient-from, --baro-gradient-via, --baro-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events"
   ],
   ["transition-timing-function", defaultTiming],
   ["transition-duration", defaultDuration]
@@ -3428,7 +3807,7 @@ staticUtility("transition-all", [
 staticUtility("transition-colors", [
   [
     "transition-property",
-    "color, background-color, border-color, text-decoration-color, fill, stroke, --baro-gradient-from, --baro-gradient-via, --baro-gradient-to"
+    "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --baro-gradient-from, --baro-gradient-via, --baro-gradient-to"
   ],
   ["transition-timing-function", defaultTiming],
   ["transition-duration", defaultDuration]
@@ -3618,6 +3997,7 @@ const filters$1 = () => {
     filters$1()
   ], { category: "effects" });
 });
+staticUtility("blur", [decl("--baro-blur", "blur(8px)"), filters$1()], { category: "effects" });
 staticUtility("blur-none", [decl("--baro-blur", ""), filters$1()], { category: "effects" });
 functionalUtility({
   name: "blur",
@@ -3856,6 +4236,7 @@ functionalUtility({
     { category: "effects" }
   );
 });
+staticUtility("backdrop-blur", [decl("--baro-backdrop-blur", "blur(8px)"), ...filters()], { category: "effects" });
 staticUtility(
   "backdrop-blur-none",
   [decl("--baro-backdrop-blur", ""), ...filters()],
@@ -4084,56 +4465,52 @@ functionalUtility({
   description: "sepia filter utility (static, number, arbitrary, custom property supported)",
   category: "effects"
 });
+const SHADOW_COMPOSITE = "var(--baro-inset-shadow), var(--baro-inset-ring-shadow), var(--baro-ring-offset-shadow), var(--baro-ring-shadow), var(--baro-shadow)";
+const ringShadowProperties = () => atRoot([
+  property("--baro-shadow", "0 0 #0000"),
+  property("--baro-inset-shadow", "0 0 #0000"),
+  property("--baro-inset-ring-shadow", "0 0 #0000"),
+  property("--baro-ring-offset-shadow", "0 0 #0000"),
+  property("--baro-ring-shadow", "0 0 #0000"),
+  property("--baro-ring-offset-width", "0px", "<length>"),
+  property("--baro-ring-offset-color", "#fff")
+]);
+const shadowLayer = (value) => [
+  ringShadowProperties(),
+  decl("--baro-shadow", value),
+  decl("box-shadow", SHADOW_COMPOSITE)
+];
 [
   ["shadow-2xs", "var(--shadow-2xs)"],
   ["shadow-xs", "var(--shadow-xs)"],
   ["shadow-sm", "var(--shadow-sm)"],
-  ["shadow", "var(--shadow-default)"],
+  ["shadow", "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"],
   ["shadow-md", "var(--shadow-md)"],
   ["shadow-lg", "var(--shadow-lg)"],
   ["shadow-xl", "var(--shadow-xl)"],
   ["shadow-2xl", "var(--shadow-2xl)"],
   ["shadow-none", "0 0 #0000"]
 ].forEach(([name, value]) => {
-  staticUtility(name, [["box-shadow", value]], { category: "effects" });
+  staticUtility(name, [
+    ringShadowProperties,
+    ["--baro-shadow", value],
+    ["box-shadow", SHADOW_COMPOSITE]
+  ], { category: "effects" });
 });
 [
-  [
-    "inset-shadow-2xs",
-    "inset 0 1px 2px var(--baro-inset-shadow-color, #0000000d)"
-  ],
-  [
-    "inset-shadow-xs",
-    "inset 0 2px 4px var(--baro-inset-shadow-color, #0000000d)"
-  ],
-  [
-    "inset-shadow-sm",
-    "inset 0 2px 4px var(--baro-inset-shadow-color, #0000000d)"
-  ],
-  [
-    "inset-shadow-md",
-    "inset 0 4px 6px -1px var(--baro-inset-shadow-color, #0000000d)"
-  ],
-  [
-    "inset-shadow-lg",
-    "inset 0 10px 15px -3px var(--baro-inset-shadow-color, #0000000d)"
-  ],
-  [
-    "inset-shadow-xl",
-    "inset 0 20px 25px -5px var(--baro-inset-shadow-color, #0000000d)"
-  ],
-  [
-    "inset-shadow-2xl",
-    "inset 0 25px 50px -12px var(--baro-inset-shadow-color, #0000000d)"
-  ],
+  ["inset-shadow-2xs", "inset 0 1px var(--baro-inset-shadow-color, rgb(0 0 0 / 0.05))"],
+  ["inset-shadow-xs", "inset 0 1px 1px var(--baro-inset-shadow-color, rgb(0 0 0 / 0.05))"],
+  ["inset-shadow-sm", "inset 0 2px 4px var(--baro-inset-shadow-color, rgb(0 0 0 / 0.05))"],
+  ["inset-shadow-md", "inset 0 4px 6px -1px var(--baro-inset-shadow-color, rgb(0 0 0 / 0.05))"],
+  ["inset-shadow-lg", "inset 0 10px 15px -3px var(--baro-inset-shadow-color, rgb(0 0 0 / 0.05))"],
+  ["inset-shadow-xl", "inset 0 20px 25px -5px var(--baro-inset-shadow-color, rgb(0 0 0 / 0.05))"],
+  ["inset-shadow-2xl", "inset 0 25px 50px -12px var(--baro-inset-shadow-color, rgb(0 0 0 / 0.05))"],
   ["inset-shadow-none", "0 0 #0000"]
 ].forEach(([name, value]) => {
   staticUtility(name, [
+    ringShadowProperties,
     ["--baro-inset-shadow", value],
-    [
-      "box-shadow",
-      "var(--baro-inset-shadow), var(--baro-inset-ring-shadow), var(--baro-ring-offset-shadow), var(--baro-ring-shadow), var(--baro-shadow)"
-    ]
+    ["box-shadow", SHADOW_COMPOSITE]
   ], { category: "effects" });
 });
 function createShadowThemeColor(key, main, opacity2, realThemeValue) {
@@ -4198,9 +4575,9 @@ functionalUtility({
             )
           ];
         }
-        return [decl("box-shadow", main)];
+        return [decl("--baro-shadow-color", main)];
       }
-      return [decl("box-shadow", main)];
+      return shadowLayer(main);
     }
     if (main === "inherit" || main === "current" || main === "transparent") {
       return [
@@ -4209,7 +4586,7 @@ functionalUtility({
     }
     return null;
   },
-  handleCustomProperty: (value) => [decl("box-shadow", `var(${value})`)]
+  handleCustomProperty: (value) => shadowLayer(`var(${value})`)
 });
 functionalUtility({
   name: "inset-shadow",
@@ -4268,22 +4645,39 @@ functionalUtility({
   ["ring-8", "8px"]
 ].forEach(([name, px]) => {
   staticUtility(name, [
-    ["--baro-ring-inset", ""],
-    ["--baro-ring-offset-width", "0px"],
-    ["--baro-ring-offset-color", "#fff"],
-    ["--baro-ring-color", "rgb(59 130 246 / 0.5)"],
-    // default blue-500/50
+    ringShadowProperties,
+    // Like Tailwind, ring-N does not set the offset vars (they come from @property defaults and ring-offset-*),
+    // so `ring-N ring-offset-M` composes the same in either rule order.
+    // No hardcoded ring color: Tailwind v4's default ring color is currentColor (via the var() fallback below).
     [
       "--baro-ring-shadow",
-      `var(--baro-ring-inset) 0 0 0 calc(${px} + var(--baro-ring-offset-width)) var(--baro-ring-color, currentcolor)`
+      ringShadowValue(px)
     ],
-    ["--baro-ring-offset-shadow", `0 0 #0000`],
     [
       "box-shadow",
       "var(--baro-inset-shadow), var(--baro-inset-ring-shadow), var(--baro-ring-offset-shadow), var(--baro-ring-shadow), var(--baro-shadow)"
     ]
   ]);
 });
+function ringShadowValue(width) {
+  return `var(--baro-ring-inset,) 0 0 0 calc(${width} + var(--baro-ring-offset-width)) var(--baro-ring-color, currentcolor)`;
+}
+[
+  ["ring-offset-0", "0px"],
+  ["ring-offset-1", "1px"],
+  ["ring-offset-2", "2px"],
+  ["ring-offset-4", "4px"],
+  ["ring-offset-8", "8px"]
+].forEach(([name, px]) => {
+  staticUtility(name, [
+    ["--baro-ring-offset-width", px],
+    ["--baro-ring-offset-color", "#fff"],
+    [
+      "--baro-ring-offset-shadow",
+      `var(--baro-ring-inset,) 0 0 0 var(--baro-ring-offset-width) var(--baro-ring-offset-color)`
+    ]
+  ], { category: "effects" });
+});
 [
   ["inset-ring", "1px"],
   ["inset-ring-0", "0px"],
@@ -4293,20 +4687,11 @@ functionalUtility({
   ["inset-ring-8", "8px"]
 ].forEach(([name, px]) => {
   staticUtility(name, [
-    ["--baro-ring-inset", "inset"],
-    ["--baro-ring-offset-width", "0px"],
-    ["--baro-ring-offset-color", "#fff"],
-    ["--baro-inset-ring-color", "currentcolor"],
-    [
-      "--baro-inset-ring-shadow",
-      `var(--baro-ring-inset) 0 0 0 calc(${px} + var(--baro-ring-offset-width)) var(--baro-inset-ring-color, currentcolor)`
-    ],
-    ["--baro-ring-offset-shadow", `0 0 #0000`],
-    [
-      "box-shadow",
-      "var(--baro-inset-shadow, 0 0 #0000), var(--baro-inset-ring-shadow), var(--baro-ring-offset-shadow, 0 0 #0000), var(--baro-ring-shadow, 0 0 #0000), var(--baro-shadow, 0 0 #0000)"
-    ]
-  ]);
+    // Tailwind 4.1.13: only the inset-ring layer; the colour defaults to currentcolor via the var() fallback.
+    ringShadowProperties,
+    ["--baro-inset-ring-shadow", `inset 0 0 0 ${px} var(--baro-inset-ring-color, currentcolor)`],
+    ["box-shadow", SHADOW_COMPOSITE]
+  ], { category: "effects" });
 });
 staticUtility("ring-inset", [["--baro-ring-inset", "inset"]], { category: "effects" });
 function createRingColorDecls(key, main, opacity2, realThemeValue) {
@@ -4380,7 +4765,15 @@ functionalUtility({
           decl("--baro-ring-color", fallback)
         ];
       }
-      return [decl("box-shadow", main)];
+      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 [
+          ringShadowProperties(),
+          decl("--baro-ring-shadow", ringShadowValue(width)),
+          decl("box-shadow", SHADOW_COMPOSITE)
+        ];
+      }
+      return [parseColor(main) ? decl("--baro-ring-color", main) : decl("box-shadow", main)];
     }
     if (main === "inherit" || main === "current" || main === "transparent") {
       return [
@@ -4622,18 +5015,30 @@ functionalUtility({
   description: "mask-size utility (static, arbitrary, custom property supported)",
   category: "effects"
 });
+const maskProperties = () => atRoot([
+  property("--baro-mask-linear", "linear-gradient(#fff, #fff)"),
+  property("--baro-mask-radial", "linear-gradient(#fff, #fff)"),
+  property("--baro-mask-conic", "linear-gradient(#fff, #fff)"),
+  property("--baro-mask-linear-position", "0deg"),
+  property("--baro-mask-linear-from-position", "0%"),
+  property("--baro-mask-linear-to-position", "100%"),
+  property("--baro-mask-linear-from-color", "black"),
+  property("--baro-mask-linear-to-color", "transparent")
+]);
 functionalUtility({
   name: "mask-linear-from",
   handleBareValue: ({ value }) => /^(?:100|[1-9]?\d)%$/.test(value) ? value : null,
   handle: (value) => [
-    decl("mask-image", "var(--tw-mask-linear), var(--tw-mask-radial, linear-gradient(#fff, #fff)), var(--tw-mask-conic, linear-gradient(#fff, #fff))"),
+    decl("mask-image", "var(--baro-mask-linear), var(--baro-mask-radial), var(--baro-mask-conic)"),
     decl("mask-composite", "intersect"),
-    decl("--tw-mask-linear-stops", "var(--tw-mask-linear-position, 0deg), var(--tw-mask-linear-from-color, black) var(--tw-mask-linear-from-position, 0%), var(--tw-mask-linear-to-color, transparent) var(--tw-mask-linear-to-position, 100%)"),
-    decl("--tw-mask-linear", "linear-gradient(var(--tw-mask-linear-stops))"),
-    decl("--tw-mask-linear-from-position", value)
+    decl("--baro-mask-linear-stops", "var(--baro-mask-linear-position), var(--baro-mask-linear-from-color) var(--baro-mask-linear-from-position), var(--baro-mask-linear-to-color) var(--baro-mask-linear-to-position)"),
+    decl("--baro-mask-linear", "linear-gradient(var(--baro-mask-linear-stops))"),
+    decl("--baro-mask-linear-from-position", value),
+    maskProperties()
   ],
   category: "effects"
 });
+staticUtility("mask-none", [["mask-image", "none"]], { category: "effects" });
 functionalUtility({
   name: "mask",
   supportsArbitrary: true,
@@ -4669,7 +5074,7 @@ functionalUtility({
   category: "layout"
 });
 staticUtility("aspect-square", [["aspect-ratio", "1 / 1"]], { category: "layout" });
-staticUtility("aspect-video", [["aspect-ratio", "var(--aspect-ratio-video)"]], { category: "layout" });
+staticUtility("aspect-video", [["aspect-ratio", "var(--aspect-video)"]], { category: "layout" });
 staticUtility("aspect-auto", [["aspect-ratio", "auto"]], { category: "layout" });
 functionalUtility({
   name: "aspect",
@@ -4753,10 +5158,10 @@ staticUtility("sr-only", [
   ["position", "absolute"],
   ["width", "1px"],
   ["height", "1px"],
-  ["margin", "-1px"],
   ["padding", "0"],
+  ["margin", "-1px"],
   ["overflow", "hidden"],
-  ["clip", "rect(0, 0, 0, 0)"],
+  ["clip-path", "inset(50%)"],
   ["white-space", "nowrap"],
   ["border-width", "0"]
 ], { category: "layout" });
@@ -4764,12 +5169,39 @@ staticUtility("not-sr-only", [
   ["position", "static"],
   ["width", "auto"],
   ["height", "auto"],
-  ["margin", "0"],
   ["padding", "0"],
+  ["margin", "0"],
   ["overflow", "visible"],
-  ["clip", "auto"],
+  ["clip-path", "none"],
   ["white-space", "normal"]
 ], { category: "layout" });
+staticUtility("@container", [["container-type", "inline-size"]], { category: "layout" });
+staticUtility("@container-normal", [["container-type", "normal"]], { category: "layout" });
+registerUtility({
+  name: "@container",
+  match: (className) => /^@container\/[a-zA-Z0-9_-]+$/.test(className),
+  handler: (_value, _ctx, token) => {
+    const name = /^@container\/([a-zA-Z0-9_-]+)$/.exec(`${token.prefix}${token.value ? `-${token.value}` : ""}`)?.[1];
+    return name ? [decl("container-type", "inline-size"), decl("container-name", name)] : null;
+  },
+  category: "layout"
+});
+const toRem = (v) => {
+  const m = /^(-?\d*\.?\d+)(rem|px|em)$/.exec(v.trim());
+  if (!m) return Number.NaN;
+  return m[2] === "px" ? Number(m[1]) / 16 : Number(m[1]);
+};
+registerUtility({
+  name: "container",
+  match: (className) => className === "container",
+  handler: (_value, ctx) => {
+    const bps = ctx.theme("breakpoints") || ctx.config("theme.breakpoints") || {};
+    const values = Object.values(bps).filter((v) => typeof v === "string" && !Number.isNaN(toRem(v)));
+    values.sort((a, b) => toRem(a) - toRem(b));
+    return [decl("width", "100%"), ...values.map((v) => atRule("media", `(width >= ${v})`, [decl("max-width", v)]))];
+  },
+  category: "layout"
+});
 staticUtility("float-right", [["float", "right"]], { category: "layout" });
 staticUtility("float-left", [["float", "left"]], { category: "layout" });
 staticUtility("float-start", [["float", "inline-start"]], { category: "layout" });
@@ -4850,6 +5282,7 @@ staticUtility("sticky", [["position", "sticky"]], { category: "layout" });
   staticUtility(`-${name}-px`, [[prop, "-1px"]], { category: "layout" });
   functionalUtility({
     name,
+    spacingKeys: true,
     prop,
     supportsNegative: true,
     supportsFraction: true,
@@ -4880,12 +5313,13 @@ staticUtility("invisible", [["visibility", "hidden"]], { category: "layout" });
 staticUtility("collapse", [["visibility", "collapse"]], { category: "layout" });
 functionalUtility({
   name: "gap-x",
+  spacingKeys: true,
   prop: "column-gap",
   supportsArbitrary: true,
   // gap-x-[10vw]
   supportsCustomProperty: true,
   // gap-x-(--my-gap-x)
-  handleBareValue: ({ value }) => `calc(var(--spacing) * ${value})`,
+  handleBareValue: ({ value }) => parseNumber(value) ? `calc(var(--spacing) * ${value})` : null,
   handle: (value) => {
     if (typeof value === "string") return [decl("column-gap", value)];
     return null;
@@ -4896,12 +5330,13 @@ functionalUtility({
 });
 functionalUtility({
   name: "gap-y",
+  spacingKeys: true,
   prop: "row-gap",
   supportsArbitrary: true,
   // gap-y-[10vw]
   supportsCustomProperty: true,
   // gap-y-(--my-gap-y)
-  handleBareValue: ({ value }) => `calc(var(--spacing) * ${value})`,
+  handleBareValue: ({ value }) => parseNumber(value) ? `calc(var(--spacing) * ${value})` : null,
   handle: (value) => {
     if (typeof value === "string") return [decl("row-gap", value)];
     return null;
@@ -4912,12 +5347,13 @@ functionalUtility({
 });
 functionalUtility({
   name: "gap",
+  spacingKeys: true,
   prop: "gap",
   supportsArbitrary: true,
   // gap-[10vw]
   supportsCustomProperty: true,
   // gap-(--my-gap)
-  handleBareValue: ({ value }) => `calc(var(--spacing) * ${value})`,
+  handleBareValue: ({ value }) => parseNumber(value) ? `calc(var(--spacing) * ${value})` : null,
   handle: (value) => {
     if (typeof value === "string") return [decl("gap", value)];
     return null;
@@ -4976,6 +5412,31 @@ staticUtility("flex-nowrap", [["flex-wrap", "nowrap"]], { category: "flex-grid"
 staticUtility("flex-auto", [["flex", "1 1 auto"]], { category: "flex-grid" });
 staticUtility("flex-initial", [["flex", "0 1 auto"]], { category: "flex-grid" });
 staticUtility("flex-none", [["flex", "none"]], { category: "flex-grid" });
+staticUtility("flex-grow", [["flex-grow", "1"]], { category: "flex-grid" });
+functionalUtility({
+  name: "flex-grow",
+  prop: "flex-grow",
+  supportsArbitrary: true,
+  // grow-[25vw], grow-[2], grow-[var(--factor)], etc.
+  supportsCustomProperty: true,
+  // grow-(--my-grow)
+  handleBareValue: ({ value }) => parseNumber(value),
+  handle: (value) => [decl("flex-grow", value)],
+  description: "flex-grow utility (number, arbitrary, custom property supported)",
+  category: "flex-grid"
+});
+staticUtility("flex-shrink", [["flex-shrink", "1"]], { category: "flex-grid" });
+functionalUtility({
+  name: "flex-shrink",
+  prop: "flex-shrink",
+  supportsArbitrary: true,
+  // shrink-[2], shrink-[calc(100vw-var(--sidebar))], etc.
+  supportsCustomProperty: true,
+  // shrink-(--my-shrink)
+  handleBareValue: ({ value }) => parseNumber(value),
+  description: "flex-shrink utility (number, arbitrary, custom property supported)",
+  category: "flex-grid"
+});
 functionalUtility({
   name: "flex",
   supportsArbitrary: true,
@@ -5209,7 +5670,7 @@ functionalUtility({
   // gap-x-[10vw]
   supportsCustomProperty: true,
   // gap-x-(--my-gap-x)
-  handleBareValue: ({ value }) => `calc(var(--spacing) * ${value})`,
+  handleBareValue: ({ value }) => value === "px" ? "1px" : parseNumber(value) ? `calc(var(--spacing) * ${value})` : null,
   handle: (value) => {
     if (typeof value === "string") return [decl("column-gap", value)];
     return null;
@@ -5225,7 +5686,7 @@ functionalUtility({
   // gap-y-[10vw]
   supportsCustomProperty: true,
   // gap-y-(--my-gap-y)
-  handleBareValue: ({ value }) => `calc(var(--spacing) * ${value})`,
+  handleBareValue: ({ value }) => value === "px" ? "1px" : parseNumber(value) ? `calc(var(--spacing) * ${value})` : null,
   handle: (value) => {
     if (typeof value === "string") return [decl("row-gap", value)];
     return null;
@@ -5241,7 +5702,7 @@ functionalUtility({
   // gap-[10vw]
   supportsCustomProperty: true,
   // gap-(--my-gap)
-  handleBareValue: ({ value }) => `calc(var(--spacing) * ${value})`,
+  handleBareValue: ({ value }) => value === "px" ? "1px" : parseNumber(value) ? `calc(var(--spacing) * ${value})` : null,
   handle: (value) => {
     if (typeof value === "string") return [decl("gap", value)];
     return null;
@@ -5269,11 +5730,11 @@ staticUtility("justify-items-center-safe", [["justify-items", "safe center"]], {
 staticUtility("justify-items-stretch", [["justify-items", "stretch"]], { category: "flex-grid" });
 staticUtility("justify-items-normal", [["justify-items", "normal"]], { category: "flex-grid" });
 staticUtility("justify-self-auto", [["justify-self", "auto"]], { category: "flex-grid" });
-staticUtility("justify-self-start", [["justify-self", "start"]], { category: "flex-grid" });
+staticUtility("justify-self-start", [["justify-self", "flex-start"]], { category: "flex-grid" });
 staticUtility("justify-self-center", [["justify-self", "center"]], { category: "flex-grid" });
 staticUtility("justify-self-center-safe", [["justify-self", "safe center"]], { category: "flex-grid" });
-staticUtility("justify-self-end", [["justify-self", "end"]], { category: "flex-grid" });
-staticUtility("justify-self-end-safe", [["justify-self", "safe end"]], { category: "flex-grid" });
+staticUtility("justify-self-end", [["justify-self", "flex-end"]], { category: "flex-grid" });
+staticUtility("justify-self-end-safe", [["justify-self", "safe flex-end"]], { category: "flex-grid" });
 staticUtility("justify-self-stretch", [["justify-self", "stretch"]], { category: "flex-grid" });
 staticUtility("content-normal", [["align-content", "normal"]], { category: "flex-grid" });
 staticUtility("content-center", [["align-content", "center"]], { category: "flex-grid" });
@@ -5404,11 +5865,12 @@ functionalUtility({
 ].forEach(([name, prop]) => {
   staticUtility(`${name}-px`, [[prop, "1px"]], { category: "spacing" });
   functionalUtility({
+    spacingKeys: true,
     name,
     prop,
     supportsArbitrary: true,
     supportsCustomProperty: true,
-    handleBareValue: ({ value }) => `calc(var(--spacing) * ${value})`,
+    handleBareValue: ({ value }) => parseNumber(value) ? `calc(var(--spacing) * ${value})` : null,
     description: `${name} utility (number, arbitrary, custom property supported)`,
     category: "spacing"
   });
@@ -5428,149 +5890,55 @@ functionalUtility({
   staticUtility(`${name}-px`, [[prop, "1px"]], { category: "spacing" });
   staticUtility(`-${name}-px`, [[prop, "-1px"]], { category: "spacing" });
   functionalUtility({
+    spacingKeys: true,
     name,
     prop,
     supportsNegative: true,
     supportsArbitrary: true,
     supportsCustomProperty: true,
-    handleBareValue: ({ value }) => `calc(var(--spacing) * ${value})`,
-    handleNegativeBareValue: ({ value }) => `calc(var(--spacing) * -${value})`,
+    handleBareValue: ({ value }) => parseNumber(value) ? `calc(var(--spacing) * ${value})` : null,
+    handleNegativeBareValue: ({ value }) => parseNumber(value) ? `calc(var(--spacing) * -${value})` : null,
     description: `${name} margin utility (number, negative, arbitrary, custom property, auto, px supported)`,
     category: "spacing"
   });
 });
-staticUtility("space-x-px", [
-  [
-    "& > :not([hidden]) ~ :not([hidden])",
-    [
-      ["--baro-space-x-reverse", "0"],
-      [
-        "margin-inline-start",
-        "calc(1px * calc(1 - var(--baro-space-x-reverse)))"
-      ],
-      ["margin-inline-end", "calc(1px * var(--baro-space-x-reverse))"]
-    ]
-  ]
-], { category: "spacing" });
-staticUtility("-space-x-px", [
-  [
-    "& > :not([hidden]) ~ :not([hidden])",
-    [
-      ["--baro-space-x-reverse", "0"],
-      [
-        "margin-inline-start",
-        "calc(-1px * calc(1 - var(--baro-space-x-reverse)))"
-      ],
-      ["margin-inline-end", "calc(-1px * var(--baro-space-x-reverse))"]
-    ]
-  ]
-], { category: "spacing" });
-staticUtility("space-x-reverse", [
-  ["& > :not([hidden]) ~ :not([hidden])", [["--baro-space-x-reverse", "1"]]]
-], { category: "spacing" });
-functionalUtility({
-  name: "space-x",
-  supportsNegative: true,
-  supportsArbitrary: true,
-  supportsCustomProperty: true,
-  handleBareValue: ({ value }) => `calc(var(--spacing) * ${value})`,
-  handleNegativeBareValue: ({ value }) => `calc(var(--spacing) * -${value})`,
-  handle: (value, ctx, token) => {
-    let v = value;
-    if (typeof v === "number" || /^-?\d+(\.\d+)?$/.test(v)) {
-      v = `calc(var(--spacing) * ${token.negative ? "-" : ""}${v})`;
-    }
-    return [
-      rule("& > :not([hidden]) ~ :not([hidden])", [
-        decl("--baro-space-x-reverse", "0"),
-        decl(
-          "margin-inline-start",
-          `calc(${v} * calc(1 - var(--baro-space-x-reverse)))`
-        ),
-        decl("margin-inline-end", `calc(${v} * var(--baro-space-x-reverse))`)
-      ])
-    ];
-  },
-  handleCustomProperty: (value) => [
-    rule("& > :not([hidden]) ~ :not([hidden])", [
-      decl("--baro-space-x-reverse", "0"),
-      decl(
-        "margin-inline-start",
-        `calc(var(${value}) * calc(1 - var(--baro-space-x-reverse)))`
-      ),
-      decl(
-        "margin-inline-end",
-        `calc(var(${value}) * var(--baro-space-x-reverse))`
-      )
-    ])
-  ],
-  description: "space-x utility (number, negative, px, arbitrary, custom property, reverse supported)",
-  category: "spacing"
-});
-staticUtility("space-y-px", [
-  [
-    "& > :not([hidden]) ~ :not([hidden])",
-    [
-      ["--baro-space-y-reverse", "0"],
-      ["margin-block-start", "calc(1px * calc(1 - var(--baro-space-y-reverse)))"],
-      ["margin-block-end", "calc(1px * var(--baro-space-y-reverse))"]
-    ]
-  ]
-], { category: "spacing" });
-staticUtility("-space-y-px", [
-  [
-    "& > :not([hidden]) ~ :not([hidden])",
-    [
-      ["--baro-space-y-reverse", "0"],
-      [
-        "margin-block-start",
-        "calc(-1px * calc(1 - var(--baro-space-y-reverse)))"
-      ],
-      ["margin-block-end", "calc(-1px * var(--baro-space-y-reverse))"]
-    ]
-  ]
-], { category: "spacing" });
-staticUtility("space-y-reverse", [
-  ["& > :not([hidden]) ~ :not([hidden])", [["--baro-space-y-reverse", "1"]]]
-], { category: "spacing" });
-functionalUtility({
-  name: "space-y",
-  supportsNegative: true,
-  supportsArbitrary: true,
-  supportsCustomProperty: true,
-  handleBareValue: ({ value }) => `calc(var(--spacing) * ${value})`,
-  handleNegativeBareValue: ({ value }) => `calc(var(--spacing) * -${value})`,
-  handle: (value, ctx, token) => {
-    let v = value;
-    if (typeof v === "number" || /^-?\d+(\.\d+)?$/.test(v)) {
-      v = `calc(var(--spacing) * ${token.negative ? "-" : ""}${v})`;
-    }
-    return [
-      rule("& > :not([hidden]) ~ :not([hidden])", [
-        decl("--baro-space-y-reverse", "0"),
-        decl(
-          "margin-block-start",
-          `calc(${v} * calc(1 - var(--baro-space-y-reverse)))`
-        ),
-        decl("margin-block-end", `calc(${v} * var(--baro-space-y-reverse))`)
-      ])
-    ];
-  },
-  handleCustomProperty: (value) => [
-    rule("& > :not([hidden]) ~ :not([hidden])", [
-      decl("--baro-space-y-reverse", "0"),
-      decl(
-        "margin-block-start",
-        `calc(var(${value}) * calc(1 - var(--baro-space-y-reverse)))`
-      ),
-      decl(
-        "margin-block-end",
-        `calc(var(${value}) * var(--baro-space-y-reverse))`
-      )
-    ])
-  ],
-  description: "space-y utility (number, negative, px, arbitrary, custom property, reverse supported)",
-  category: "spacing"
+const SPACE_SELECTOR = ":where(& > :not(:last-child))";
+["x", "y"].forEach((axis) => {
+  const name = `space-${axis}`;
+  const rev = `--baro-space-${axis}-reverse`;
+  const [start, end] = axis === "x" ? ["margin-inline-start", "margin-inline-end"] : ["margin-block-start", "margin-block-end"];
+  const reverseProperty = () => atRoot([property(rev, "0")]);
+  const spaceRule = (v) => rule(SPACE_SELECTOR, [
+    decl(rev, "0"),
+    decl(start, `calc(${v} * var(${rev}))`),
+    decl(end, `calc(${v} * calc(1 - var(${rev})))`)
+  ]);
+  const body = (v) => [reverseProperty(), spaceRule(v)];
+  staticUtility(`${name}-px`, [reverseProperty, () => spaceRule("1px")], { category: "spacing" });
+  staticUtility(`-${name}-px`, [reverseProperty, () => spaceRule("-1px")], { category: "spacing" });
+  staticUtility(`${name}-reverse`, [
+    reverseProperty,
+    () => rule(SPACE_SELECTOR, [decl(rev, "1")])
+  ], { category: "spacing" });
+  functionalUtility({
+    spacingKeys: true,
+    name,
+    supportsNegative: true,
+    supportsArbitrary: true,
+    supportsCustomProperty: true,
+    handleBareValue: ({ value }) => parseNumber(value) ? `calc(var(--spacing) * ${value})` : null,
+    handleNegativeBareValue: ({ value }) => parseNumber(value) ? `calc(var(--spacing) * -${value})` : null,
+    handle: (value, _ctx, token) => {
+      let v = String(value);
+      if (/^-?\d+(\.\d+)?$/.test(v)) {
+        v = `calc(var(--spacing) * ${token.negative ? "-" : ""}${v})`;
+      }
+      return body(v);
+    },
+    handleCustomProperty: (value) => body(`var(${value})`),
+    description: `${name} utility (number, negative, px, arbitrary, custom property, reverse supported)`,
+    category: "spacing"
+  });
 });
 [
   ["w-auto", "auto"],
@@ -5603,6 +5971,7 @@ functionalUtility({
   staticUtility(name, [["width", value]]);
 });
 functionalUtility({
+  spacingKeys: true,
   name: "w",
   prop: "width",
   supportsArbitrary: true,
@@ -5635,6 +6004,7 @@ functionalUtility({
   staticUtility(name, [["width", w], ["height", h]]);
 });
 functionalUtility({
+  spacingKeys: true,
   name: "size",
   supportsArbitrary: true,
   supportsCustomProperty: true,
@@ -5674,6 +6044,7 @@ functionalUtility({
   staticUtility(name, [["height", value]]);
 });
 functionalUtility({
+  spacingKeys: true,
   name: "h",
   prop: "height",
   supportsArbitrary: true,
@@ -5704,6 +6075,7 @@ functionalUtility({
   staticUtility(name, [["min-height", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "min-h",
   prop: "min-height",
   supportsArbitrary: true,
@@ -5734,6 +6106,7 @@ functionalUtility({
   staticUtility(name, [["max-height", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "max-h",
   prop: "max-height",
   supportsArbitrary: true,
@@ -5780,6 +6153,7 @@ functionalUtility({
   staticUtility(name, [["min-width", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "min-w",
   prop: "min-width",
   supportsArbitrary: true,
@@ -5797,6 +6171,9 @@ functionalUtility({
 });
 [
   ["max-w-none", "none"],
+  ["max-w-min", "min-content"],
+  ["max-w-max", "max-content"],
+  ["max-w-fit", "fit-content"],
   ["max-w-xs", "var(--container-xs)"],
   ["max-w-sm", "var(--container-sm)"],
   ["max-w-md", "var(--container-md)"],
@@ -5812,6 +6189,7 @@ functionalUtility({
   staticUtility(name, [["max-width", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "max-w",
   prop: "max-width",
   supportsArbitrary: true,
@@ -5827,22 +6205,23 @@ functionalUtility({
   description: "max-width utility (spacing, fraction, arbitrary, custom property, static supported)",
   category: "sizing"
 });
-staticUtility("font-sans", [["font-family", "var(--font-family-sans)"]], { category: "typography" });
-staticUtility("font-serif", [["font-family", "var(--font-family-serif)"]], { category: "typography" });
-staticUtility("font-mono", [["font-family", "var(--font-family-mono)"]], { category: "typography" });
-staticUtility("text-xs", [["font-size", "var(--text-xs)"], ["line-height", "var(--text-xs--line-height)"]], { category: "typography" });
-staticUtility("text-sm", [["font-size", "var(--text-sm)"], ["line-height", "var(--text-sm--line-height)"]], { category: "typography" });
-staticUtility("text-base", [["font-size", "var(--text-base)"], ["line-height", "var(--text-base--line-height)"]], { category: "typography" });
-staticUtility("text-lg", [["font-size", "var(--text-lg)"], ["line-height", "var(--text-lg--line-height)"]], { category: "typography" });
-staticUtility("text-xl", [["font-size", "var(--text-xl)"], ["line-height", "var(--text-xl--line-height)"]], { category: "typography" });
-staticUtility("text-2xl", [["font-size", "var(--text-2xl)"], ["line-height", "var(--text-2xl--line-height)"]], { category: "typography" });
-staticUtility("text-3xl", [["font-size", "var(--text-3xl)"], ["line-height", "var(--text-3xl--line-height)"]], { category: "typography" });
-staticUtility("text-4xl", [["font-size", "var(--text-4xl)"], ["line-height", "var(--text-4xl--line-height)"]], { category: "typography" });
-staticUtility("text-5xl", [["font-size", "var(--text-5xl)"], ["line-height", "var(--text-5xl--line-height)"]], { category: "typography" });
-staticUtility("text-6xl", [["font-size", "var(--text-6xl)"], ["line-height", "var(--text-6xl--line-height)"]], { category: "typography" });
-staticUtility("text-7xl", [["font-size", "var(--text-7xl)"], ["line-height", "var(--text-7xl--line-height)"]], { category: "typography" });
-staticUtility("text-8xl", [["font-size", "var(--text-8xl)"], ["line-height", "var(--text-8xl--line-height)"]], { category: "typography" });
-staticUtility("text-9xl", [["font-size", "var(--text-9xl)"], ["line-height", "var(--text-9xl--line-height)"]], { category: "typography" });
+const leadingProperty = () => atRoot([property("--baro-leading")]);
+staticUtility("font-sans", [["font-family", "var(--font-sans)"]], { category: "typography" });
+staticUtility("font-serif", [["font-family", "var(--font-serif)"]], { category: "typography" });
+staticUtility("font-mono", [["font-family", "var(--font-mono)"]], { category: "typography" });
+staticUtility("text-xs", [["font-size", "var(--text-xs)"], ["line-height", "var(--baro-leading, var(--text-xs--line-height))"]], { category: "typography" });
+staticUtility("text-sm", [["font-size", "var(--text-sm)"], ["line-height", "var(--baro-leading, var(--text-sm--line-height))"]], { category: "typography" });
+staticUtility("text-base", [["font-size", "var(--text-base)"], ["line-height", "var(--baro-leading, var(--text-base--line-height))"]], { category: "typography" });
+staticUtility("text-lg", [["font-size", "var(--text-lg)"], ["line-height", "var(--baro-leading, var(--text-lg--line-height))"]], { category: "typography" });
+staticUtility("text-xl", [["font-size", "var(--text-xl)"], ["line-height", "var(--baro-leading, var(--text-xl--line-height))"]], { category: "typography" });
+staticUtility("text-2xl", [["font-size", "var(--text-2xl)"], ["line-height", "var(--baro-leading, var(--text-2xl--line-height))"]], { category: "typography" });
+staticUtility("text-3xl", [["font-size", "var(--text-3xl)"], ["line-height", "var(--baro-leading, var(--text-3xl--line-height))"]], { category: "typography" });
+staticUtility("text-4xl", [["font-size", "var(--text-4xl)"], ["line-height", "var(--baro-leading, var(--text-4xl--line-height))"]], { category: "typography" });
+staticUtility("text-5xl", [["font-size", "var(--text-5xl)"], ["line-height", "var(--baro-leading, var(--text-5xl--line-height))"]], { category: "typography" });
+staticUtility("text-6xl", [["font-size", "var(--text-6xl)"], ["line-height", "var(--baro-leading, var(--text-6xl--line-height))"]], { category: "typography" });
+staticUtility("text-7xl", [["font-size", "var(--text-7xl)"], ["line-height", "var(--baro-leading, var(--text-7xl--line-height))"]], { category: "typography" });
+staticUtility("text-8xl", [["font-size", "var(--text-8xl)"], ["line-height", "var(--baro-leading, var(--text-8xl--line-height))"]], { category: "typography" });
+staticUtility("text-9xl", [["font-size", "var(--text-9xl)"], ["line-height", "var(--baro-leading, var(--text-9xl--line-height))"]], { category: "typography" });
 staticUtility("font-thin", [["font-weight", "var(--font-weight-thin)"]], { category: "typography" });
 staticUtility("font-extralight", [["font-weight", "var(--font-weight-extralight)"]], { category: "typography" });
 staticUtility("font-light", [["font-weight", "var(--font-weight-light)"]], { category: "typography" });
@@ -5888,12 +6267,12 @@ functionalUtility({
   description: "letter-spacing utility (theme, arbitrary, custom property supported)",
   category: "typography"
 });
-staticUtility("leading-none", [["line-height", "var(--line-height-none)"]], { category: "typography" });
-staticUtility("leading-tight", [["line-height", "var(--line-height-tight)"]], { category: "typography" });
-staticUtility("leading-snug", [["line-height", "var(--line-height-snug)"]], { category: "typography" });
-staticUtility("leading-normal", [["line-height", "var(--line-height-normal)"]], { category: "typography" });
-staticUtility("leading-relaxed", [["line-height", "var(--line-height-relaxed)"]], { category: "typography" });
-staticUtility("leading-loose", [["line-height", "var(--line-height-loose)"]], { category: "typography" });
+staticUtility("leading-none", [["--baro-leading", "var(--leading-none, 1)"], ["line-height", "var(--leading-none, 1)"], leadingProperty()], { category: "typography" });
+staticUtility("leading-tight", [["--baro-leading", "var(--leading-tight, 1.25)"], ["line-height", "var(--leading-tight, 1.25)"], leadingProperty()], { category: "typography" });
+staticUtility("leading-snug", [["--baro-leading", "var(--leading-snug, 1.375)"], ["line-height", "var(--leading-snug, 1.375)"], leadingProperty()], { category: "typography" });
+staticUtility("leading-normal", [["--baro-leading", "var(--leading-normal, 1.5)"], ["line-height", "var(--leading-normal, 1.5)"], leadingProperty()], { category: "typography" });
+staticUtility("leading-relaxed", [["--baro-leading", "var(--leading-relaxed, 1.625)"], ["line-height", "var(--leading-relaxed, 1.625)"], leadingProperty()], { category: "typography" });
+staticUtility("leading-loose", [["--baro-leading", "var(--leading-loose, 2)"], ["line-height", "var(--leading-loose, 2)"], leadingProperty()], { category: "typography" });
 functionalUtility({
   name: "leading",
   prop: "line-height",
@@ -5901,6 +6280,8 @@ functionalUtility({
   supportsArbitrary: true,
   supportsCustomProperty: true,
   handleBareValue: ({ value }) => parseNumber(value),
+  handle: (value) => [decl("--baro-leading", value), decl("line-height", value), leadingProperty()],
+  handleCustomProperty: (value) => [decl("--baro-leading", `var(${value})`), decl("line-height", `var(${value})`), leadingProperty()],
   description: "line-height utility (theme, number, arbitrary, custom property supported)",
   category: "typography"
 });
@@ -5910,6 +6291,17 @@ staticUtility("text-right", [["text-align", "right"]], { category: "typography"
 staticUtility("text-justify", [["text-align", "justify"]], { category: "typography" });
 staticUtility("text-start", [["text-align", "start"]], { category: "typography" });
 staticUtility("text-end", [["text-align", "end"]], { category: "typography" });
+const FONT_SIZE_HINTS = /* @__PURE__ */ new Set(["length", "size", "percentage", "absolute-size", "relative-size"]);
+const FONT_SIZE_KEYWORDS = /^(xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|larger|smaller)$/;
+const LENGTH_RE = /^-?(\d+\.?\d*|\.\d+)(px|r?em|r?lh|r?cap|r?ch|r?ex|r?ic|%|vh|vw|vmin|vmax|[sdl]v[hwib]|v[ib]|cq[whib]|cqmin|cqmax|pt|pc|in|cm|mm|q)$/i;
+function textArbitraryKind(raw) {
+  const hint = /^([a-z-]+):(.+)$/.exec(raw);
+  if (hint && (hint[1] === "color" || FONT_SIZE_HINTS.has(hint[1]))) {
+    return { fontSize: hint[1] !== "color", value: hint[2] };
+  }
+  const fontSize2 = raw === "0" || LENGTH_RE.test(raw) || FONT_SIZE_KEYWORDS.test(raw) || /^(calc|min|max|clamp)\(/.test(raw);
+  return { fontSize: fontSize2, value: raw };
+}
 staticUtility("text-inherit", [["color", "inherit"]], { category: "typography" });
 staticUtility("text-current", [["color", "currentColor"]], { category: "typography" });
 staticUtility("text-transparent", [["color", "transparent"]], { category: "typography" });
@@ -5923,27 +6315,14 @@ functionalUtility({
   supportsCustomProperty: true,
   supportsOpacity: true,
   handle: (value, ctx, token, extra) => {
-    if (extra?.realThemeValue) {
-      if (extra.opacity) {
-        return [
-          atRule("supports", `(color:color-mix(in lab, red, red))`, [
-            decl("color", `color-mix(in lab, ${value} ${extra.opacity}%, transparent)`)
-          ]),
-          decl("color", `color-mix(in lab, ${value} ${extra.opacity}%, transparent)`)
-        ];
-      }
-      return [decl("color", value)];
-    }
-    if (parseLength(value)) {
-      return [decl("font-size", value)];
-    }
-    return [decl("color", value)];
+    if (extra?.realThemeValue) return themeColorDecls("color", value, extra);
+    const kind = textArbitraryKind(value);
+    return [decl(kind.fontSize ? "font-size" : "color", kind.value)];
   },
+  // Tailwind 4: text-(--x) is a colour; text-(length:--x) is a font-size.
   handleCustomProperty: (value) => {
-    if (value.startsWith("color:")) {
-      return [decl("color", `var(${value.replace("color:", "")})`)];
-    }
-    return [decl("font-size", `var(${value})`)];
+    const kind = textArbitraryKind(value);
+    return [decl(kind.fontSize ? "font-size" : "color", `var(${kind.value})`)];
   },
   description: "text color utility (theme, arbitrary, custom property supported)",
   category: "typography"
@@ -5959,7 +6338,7 @@ functionalUtility({
       if (Array.isArray(themeValue)) {
         return [
           decl("font-size", themeValue[0]),
-          decl("line-height", themeValue[1])
+          decl("line-height", `var(--baro-leading, ${themeValue[1]})`)
         ];
       } else {
         return [decl("font-size", themeValue)];
@@ -6073,17 +6452,7 @@ functionalUtility({
   supportsCustomProperty: true,
   supportsOpacity: true,
   handle: (value, ctx, token, extra) => {
-    if (extra?.realThemeValue) {
-      if (extra.opacity) {
-        return [
-          atRule("supports", `(color:color-mix(in lab, red, red))`, [
-            decl("text-decoration-color", `color-mix(in lab, ${value} ${extra.opacity}%, transparent)`)
-          ]),
-          decl("text-decoration-color", value)
-        ];
-      }
-      return [decl("text-decoration-color", value)];
-    }
+    if (extra?.realThemeValue) return themeColorDecls("text-decoration-color", value, extra);
     return [decl("text-decoration-color", value)];
   },
   handleCustomProperty: (value) => [decl("text-decoration-color", `var(${value})`)],
@@ -6107,7 +6476,7 @@ functionalUtility({
   prop: "text-decoration-thickness",
   supportsArbitrary: true,
   supportsCustomProperty: true,
-  handleBareValue: ({ value }) => `${value}px`,
+  handleBareValue: ({ value }) => parseNumber(value) ? `${value}px` : null,
   description: "text-decoration-thickness utility (arbitrary, custom property supported)",
   category: "typography"
 });
@@ -6122,7 +6491,7 @@ functionalUtility({
   prop: "text-underline-offset",
   supportsArbitrary: true,
   supportsCustomProperty: true,
-  handleBareValue: ({ value }) => `${value}px`,
+  handleBareValue: ({ value }) => parseNumber(value) ? `${value}px` : null,
   description: "text-underline-offset utility (arbitrary, custom property supported)",
   category: "typography"
 });
@@ -6136,8 +6505,8 @@ functionalUtility({
   supportsNegative: true,
   supportsArbitrary: true,
   supportsCustomProperty: true,
-  handleBareValue: ({ value }) => `calc(var(--spacing) * ${value})`,
-  handleNegativeBareValue: ({ value }) => `calc(var(--spacing) * -${value})`,
+  handleBareValue: ({ value }) => parseNumber(value) ? `calc(var(--spacing) * ${value})` : null,
+  handleNegativeBareValue: ({ value }) => parseNumber(value) ? `calc(var(--spacing) * -${value})` : null,
   description: "text-indent utility (spacing, negative, arbitrary, custom property supported)",
   category: "typography"
 });
@@ -6160,14 +6529,14 @@ functionalUtility({
 staticUtility("hyphens-none", [["hyphens", "none"]], { category: "typography" });
 staticUtility("hyphens-manual", [["hyphens", "manual"]], { category: "typography" });
 staticUtility("hyphens-auto", [["hyphens", "auto"]], { category: "typography" });
-staticUtility("content-none", [["content", "none"]], { category: "typography" });
+staticUtility("content-none", [["--baro-content", "none"], ["content", "none"]], { category: "typography" });
 functionalUtility({
   name: "content",
   prop: "content",
   supportsArbitrary: true,
   supportsCustomProperty: true,
-  handle: (value) => [decl("content", `"${value}"`)],
-  handleCustomProperty: (value) => [decl("content", `var(${value})`)],
+  handle: (value) => [decl("--baro-content", `"${value}"`), decl("content", "var(--baro-content)")],
+  handleCustomProperty: (value) => [decl("--baro-content", `var(${value})`), decl("content", "var(--baro-content)")],
   description: "content utility (arbitrary, custom property supported)",
   category: "typography"
 });
@@ -6177,7 +6546,8 @@ const gradientStopProperties = () => {
     property("--baro-gradient-from", "#0000", "<color>"),
     property("--baro-gradient-via", "#0000", "<color>"),
     property("--baro-gradient-to", "#0000", "<color>"),
-    property("--baro-gradient-stops", "transparent"),
+    property("--baro-gradient-stops"),
+    property("--baro-gradient-via-stops"),
     property("--baro-gradient-from-position", "0%", "<length-percentage>"),
     property("--baro-gradient-via-position", "50%", "<length-percentage>"),
     property("--baro-gradient-to-position", "100%", "<length-percentage>")
@@ -6235,18 +6605,17 @@ functionalUtility({
   description: "background-size utility (arbitrary, custom property supported)",
   category: "background"
 });
-const positionValue = (position) => {
-  return [
-    decl("--baro-gradient-position", position),
-    styleRule("@supports (background-image: linear-gradient(in lab, red, red))", [
-      decl("--baro-gradient-position", `${position} in oklab`)
-    ]),
-    decl(
-      "background-image",
-      `linear-gradient(${position}, var(--baro-gradient-stops))`
-    )
-  ];
-};
+const positionValue = (position) => [
+  decl("--baro-gradient-position", position),
+  atRule("supports", "(background-image: linear-gradient(in lab, red, red))", [
+    decl("--baro-gradient-position", `${position} in oklab`)
+  ]),
+  decl("background-image", "linear-gradient(var(--baro-gradient-stops))")
+];
+const legacyPositionValue = (position) => [
+  decl("--baro-gradient-position", `${position} in oklab`),
+  decl("background-image", "linear-gradient(var(--baro-gradient-stops))")
+];
 [
   ["bg-linear-to-t", positionValue("to top")],
   ["bg-linear-to-tr", positionValue("to top right")],
@@ -6257,14 +6626,14 @@ const positionValue = (position) => {
   ["bg-linear-to-l", positionValue("to left")],
   ["bg-linear-to-tl", positionValue("to top left")],
   // fallback , legacy CSS compatibility
-  ["bg-gradient-to-t", positionValue("to top")],
-  ["bg-gradient-to-tr", positionValue("to top right")],
-  ["bg-gradient-to-r", positionValue("to right")],
-  ["bg-gradient-to-br", positionValue("to bottom right")],
-  ["bg-gradient-to-b", positionValue("to bottom")],
-  ["bg-gradient-to-bl", positionValue("to bottom left")],
-  ["bg-gradient-to-l", positionValue("to left")],
-  ["bg-gradient-to-tl", positionValue("to top left")]
+  ["bg-gradient-to-t", legacyPositionValue("to top")],
+  ["bg-gradient-to-tr", legacyPositionValue("to top right")],
+  ["bg-gradient-to-r", legacyPositionValue("to right")],
+  ["bg-gradient-to-br", legacyPositionValue("to bottom right")],
+  ["bg-gradient-to-b", legacyPositionValue("to bottom")],
+  ["bg-gradient-to-bl", legacyPositionValue("to bottom left")],
+  ["bg-gradient-to-l", legacyPositionValue("to left")],
+  ["bg-gradient-to-tl", legacyPositionValue("to top left")]
 ].forEach(([name, value]) => {
   staticUtility(name, value, { category: "background", priority: 1e3 });
 });
@@ -6275,12 +6644,7 @@ functionalUtility({
   supportsCustomProperty: true,
   handle: (value, context, token) => {
     if (parseNumber(value)) {
-      return [
-        decl(
-          "background-image",
-          `linear-gradient(${value}deg in oklab, var(--baro-gradient-stops))`
-        )
-      ];
+      return positionValue(`${value}deg`);
     }
     if (token.arbitrary) {
       return [
@@ -6309,152 +6673,79 @@ functionalUtility({
   description: "linear-gradient background-image utility (angle, arbitrary, custom property supported)",
   category: "background"
 });
-staticUtility("bg-radial", [
-  ["background-image", "radial-gradient(in oklab, var(--baro-gradient-stops))"]
-], { category: "background" });
+const gradientImage = (fn, position, fallback) => [
+  decl("--baro-gradient-position", position),
+  decl("background-image", `${fn}(var(--baro-gradient-stops${fallback ? `,${fallback}` : ""}))`)
+];
+staticUtility("bg-radial", gradientImage("radial-gradient", "in oklab"), { category: "background" });
 functionalUtility({
   name: "bg-radial",
   prop: "background-image",
   supportsArbitrary: true,
   supportsCustomProperty: true,
-  handle: (value, context, token) => {
-    if (token.arbitrary) {
-      return [
-        decl(
-          "background-image",
-          `radial-gradient(var(--baro-gradient-stops, ${value}))`
-        )
-      ];
-    }
-    if (token.customProperty) {
-      return [
-        decl(
-          "background-image",
-          `radial-gradient(var(--baro-gradient-stops, var(${value})))`
-        )
-      ];
-    }
+  handle: (value, _context, token) => {
+    if (token.arbitrary) return gradientImage("radial-gradient", value, value);
+    if (token.customProperty) return gradientImage("radial-gradient", `var(${value})`, `var(${value})`);
     return null;
   },
-  handleCustomProperty: (value) => [
-    decl(
-      "background-image",
-      `radial-gradient(var(--baro-gradient-stops, var(${value})))`
-    )
-  ],
+  handleCustomProperty: (value) => gradientImage("radial-gradient", `var(${value})`, `var(${value})`),
   description: "radial-gradient background-image utility (arbitrary, custom property supported)",
   category: "background"
 });
-staticUtility("bg-conic", [
-  [
-    "background-image",
-    "conic-gradient(from 0deg in oklab, var(--baro-gradient-stops))"
-  ]
-], { category: "background" });
+staticUtility("bg-conic", gradientImage("conic-gradient", "in oklab"), { category: "background" });
 functionalUtility({
   name: "bg-conic",
   prop: "background-image",
   supportsArbitrary: true,
   supportsCustomProperty: true,
-  handle: (value, context, token) => {
-    if (parseNumber(value)) {
-      return [
-        decl(
-          "background-image",
-          `conic-gradient(from ${value}deg in oklab, var(--baro-gradient-stops))`
-        )
-      ];
-    }
-    if (token.arbitrary) {
-      return [decl("background-image", `${value}`)];
-    }
-    if (token.customProperty) {
-      return [
-        decl(
-          "background-image",
-          `conic-gradient(var(--baro-gradient-stops, var(${value})))`
-        )
-      ];
+  handle: (value, _context, token) => {
+    if (!token.arbitrary && !token.customProperty && parseNumber(value)) {
+      return gradientImage("conic-gradient", `from ${value}deg in oklab`);
     }
+    if (token.arbitrary) return gradientImage("conic-gradient", value, value);
+    if (token.customProperty) return gradientImage("conic-gradient", `var(${value})`, `var(${value})`);
     return null;
   },
-  handleCustomProperty: (value) => [decl("background-image", `var(${value})`)],
+  handleCustomProperty: (value) => gradientImage("conic-gradient", `var(${value})`, `var(${value})`),
   description: "conic-gradient background-image utility (angle, arbitrary, custom property supported)",
   category: "background"
 });
+const G = "--baro-gradient";
+const stopsDecls = (stop, color) => {
+  const colorDecls = typeof color === "string" ? [decl(`${G}-${stop}`, color)] : color;
+  if (stop === "via") {
+    return [
+      gradientStopProperties(),
+      ...colorDecls,
+      decl(`${G}-via-stops`, `var(${G}-position), var(${G}-from) var(${G}-from-position), var(${G}-via) var(${G}-via-position), var(${G}-to) var(${G}-to-position)`),
+      decl(`${G}-stops`, `var(${G}-via-stops)`)
+    ];
+  }
+  return [
+    gradientStopProperties(),
+    ...colorDecls,
+    decl(`${G}-stops`, `var(${G}-via-stops, var(${G}-position), var(${G}-from) var(${G}-from-position), var(${G}-to) var(${G}-to-position))`)
+  ];
+};
 ["from", "via", "to"].forEach((stop) => {
   functionalUtility({
     name: stop,
     themeKeys: ["colors"],
     supportsArbitrary: true,
-    supportsCustomProperty: true,
-    supportsOpacity: true,
-    handle: (value, context, token, extra) => {
-      if (extra?.realThemeValue) {
-        if (stop === "from") {
-          let color = value;
-          if (extra?.opacity) {
-            color = `color-mix(in lab, ${value} ${extra.opacity}%, transparent)`;
-          }
-          return [
-            gradientStopProperties(),
-            decl(`--baro-gradient-from`, color),
-            // decl(`--baro-gradient-to`, "var(--baro-gradient-to, transparent)"),
-            decl(`--baro-gradient-stops`, "var(--baro-gradient-from),var(--baro-gradient-to)")
-          ];
-        }
-        if (stop === "via") {
-          let color = value;
-          if (extra?.opacity) {
-            color = `color-mix(in lab, ${value} ${extra.opacity}%, transparent)`;
-          }
-          return [
-            gradientStopProperties(),
-            decl(`--baro-gradient-to`, color),
-            decl(`--baro-gradient-stops`, `var(--baro-gradient-from), ${value} var(--baro-gradient-via-position), var(--baro-gradient-to)`)
-            // via 포함 stops
-          ];
-        }
-        if (stop === "to") {
-          let color = value;
-          if (extra?.opacity) {
-            color = `color-mix(in lab, ${value} ${extra.opacity}%, transparent)`;
-          }
-          return [
-            gradientStopProperties(),
-            decl(`--baro-gradient-to`, color)
-          ];
-        }
+    supportsCustomProperty: true,
+    supportsOpacity: true,
+    handle: (value, _context, _token, extra) => {
+      if (extra?.realThemeValue) {
+        return stopsDecls(stop, themeColorDecls(`${G}-${stop}`, value, extra));
       }
       if (parseLength(value)) {
-        return [decl(`--baro-gradient-${stop}-position`, value)];
+        return [gradientStopProperties(), decl(`${G}-${stop}-position`, value)];
       }
       if (parseNumber(value)) {
-        return [decl(`--baro-gradient-${stop}-position`, `${value}%`)];
+        return [gradientStopProperties(), decl(`${G}-${stop}-position`, `${value}%`)];
       }
       if (parseColor(value)) {
-        if (stop === "from") {
-          return [
-            gradientStopProperties(),
-            decl(`--baro-gradient-from`, value),
-            decl(`--baro-gradient-to`, "transparent"),
-            decl(`--baro-gradient-stops`, "var(--baro-gradient-from),var(--baro-gradient-to)")
-          ];
-        }
-        if (stop === "via") {
-          return [
-            gradientStopProperties(),
-            decl(`--baro-gradient-to`, value),
-            decl(`--baro-gradient-stops`, `var(--baro-gradient-from), ${value} var(--baro-gradient-via-position), var(--baro-gradient-to)`)
-            // via 포함 stops
-          ];
-        }
-        if (stop === "to") {
-          return [
-            gradientStopProperties(),
-            decl(`--baro-gradient-to`, value)
-          ];
-        }
+        return stopsDecls(stop, value);
       }
       return null;
     },
@@ -6489,20 +6780,7 @@ functionalUtility({
     if (value.startsWith("length:")) {
       return [decl("background-size", value.replace("length:", ""))];
     }
-    if (extra?.realThemeValue) {
-      if (extra.opacity) {
-        return [
-          atRule("supports", `(color:color-mix(in lab, red, red))`, [
-            decl(
-              "background-color",
-              `color-mix(in lab, ${value} ${extra.opacity}%, transparent)`
-            )
-          ]),
-          decl("background-color", `color-mix(in lab, ${value} ${extra.opacity}%, transparent)`)
-        ];
-      }
-      return [decl("background-color", value)];
-    }
+    if (extra?.realThemeValue) return themeColorDecls("background-color", value, extra);
     if (parseColor(value)) {
       const parsedColor = parseColor(value);
       if (value.startsWith("color:")) {
@@ -6515,18 +6793,20 @@ functionalUtility({
     }
     return null;
   },
-  handleCustomProperty: (value) => [decl("background-size", `var(${value})`)],
+  handleCustomProperty: (value) => value.startsWith("length:") ? [decl("background-size", `var(${value.slice(7)})`)] : [decl("background-color", `var(${value})`)],
   description: "background-size utility (arbitrary, custom property supported)",
   category: "background"
 });
 staticUtility("rounded-none", [["border-radius", "0px"]], { category: "borders" });
 staticUtility("rounded-sm", [["border-radius", "var(--radius-sm)"]], { category: "borders" });
-staticUtility("rounded", [["border-radius", "var(--radius)"]], { category: "borders" });
+staticUtility("rounded", [["border-radius", "0.25rem"]], { category: "borders" });
 staticUtility("rounded-md", [["border-radius", "var(--radius-md)"]], { category: "borders" });
 staticUtility("rounded-lg", [["border-radius", "var(--radius-lg)"]], { category: "borders" });
 staticUtility("rounded-xl", [["border-radius", "var(--radius-xl)"]], { category: "borders" });
 staticUtility("rounded-2xl", [["border-radius", "var(--radius-2xl)"]], { category: "borders" });
 staticUtility("rounded-3xl", [["border-radius", "var(--radius-3xl)"]], { category: "borders" });
+staticUtility("rounded-4xl", [["border-radius", "var(--radius-4xl)"]], { category: "borders" });
+staticUtility("rounded-xs", [["border-radius", "var(--radius-xs)"]], { category: "borders" });
 staticUtility("rounded-full", [["border-radius", "9999px"]], { category: "borders" });
 [
   ["rounded-t", ["border-top-left-radius", "border-top-right-radius"]],
@@ -6541,12 +6821,14 @@ staticUtility("rounded-full", [["border-radius", "9999px"]], { category: "border
   const propList = props;
   staticUtility(`${name}-none`, propList.map((prop) => [prop, "0px"]), { category: "borders" });
   staticUtility(`${name}-sm`, propList.map((prop) => [prop, "var(--radius-sm)"]), { category: "borders" });
-  staticUtility(`${name}`, propList.map((prop) => [prop, "var(--radius)"]), { category: "borders" });
+  staticUtility(`${name}`, propList.map((prop) => [prop, "0.25rem"]), { category: "borders" });
   staticUtility(`${name}-md`, propList.map((prop) => [prop, "var(--radius-md)"]), { category: "borders" });
   staticUtility(`${name}-lg`, propList.map((prop) => [prop, "var(--radius-lg)"]), { category: "borders" });
   staticUtility(`${name}-xl`, propList.map((prop) => [prop, "var(--radius-xl)"]), { category: "borders" });
   staticUtility(`${name}-2xl`, propList.map((prop) => [prop, "var(--radius-2xl)"]), { category: "borders" });
   staticUtility(`${name}-3xl`, propList.map((prop) => [prop, "var(--radius-3xl)"]), { category: "borders" });
+  staticUtility(`${name}-4xl`, propList.map((prop) => [prop, "var(--radius-4xl)"]), { category: "borders" });
+  staticUtility(`${name}-xs`, propList.map((prop) => [prop, "var(--radius-xs)"]), { category: "borders" });
   staticUtility(`${name}-full`, propList.map((prop) => [prop, "9999px"]), { category: "borders" });
   functionalUtility({
     name,
@@ -6577,11 +6859,15 @@ functionalUtility({
   description: "border-radius utility (spacing, arbitrary, custom property support)",
   category: "borders"
 });
-staticUtility("border-0", [["border-width", "0px"]], { category: "borders" });
-staticUtility("border-2", [["border-width", "2px"]], { category: "borders" });
-staticUtility("border-4", [["border-width", "4px"]], { category: "borders" });
-staticUtility("border-8", [["border-width", "8px"]], { category: "borders" });
-staticUtility("border", [["border-width", "1px"]], { category: "borders" });
+const borderStyleProperty = () => atRoot([property("--baro-border-style", "solid")]);
+const withBorderStyle = (props, width) => [
+  borderStyleProperty(),
+  ...props.map((prop) => decl(prop.replace("width", "style"), "var(--baro-border-style)")),
+  ...props.map((prop) => decl(prop, width))
+];
+[["border-0", "0px"], ["border-2", "2px"], ["border-4", "4px"], ["border-8", "8px"], ["border", "1px"]].forEach(([name, width]) => {
+  staticUtility(name, [borderStyleProperty, ["border-style", "var(--baro-border-style)"], ["border-width", width]], { category: "borders" });
+});
 [
   ["border-x", ["border-left-width", "border-right-width"]],
   ["border-y", ["border-top-width", "border-bottom-width"]],
@@ -6591,11 +6877,16 @@ staticUtility("border", [["border-width", "1px"]], { category: "borders" });
   ["border-l", ["border-left-width"]]
 ].forEach(([name, props]) => {
   const propList = props;
-  staticUtility(`${name}-0`, propList.map((prop) => [prop, "0px"]));
-  staticUtility(`${name}-2`, propList.map((prop) => [prop, "2px"]));
-  staticUtility(`${name}-4`, propList.map((prop) => [prop, "4px"]));
-  staticUtility(`${name}-8`, propList.map((prop) => [prop, "8px"]));
-  staticUtility(`${name}`, propList.map((prop) => [prop, "1px"]));
+  const styled = (width) => [
+    borderStyleProperty,
+    ...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"));
   functionalUtility({
     name,
     themeKeys: ["borderWidth", "colors"],
@@ -6607,18 +6898,19 @@ staticUtility("border", [["border-width", "1px"]], { category: "borders" });
       }
       return null;
     },
-    handle: (value, ctx, token) => {
+    handle: (value, ctx, token, extra) => {
+      if (extra?.realThemeValue) return propList.flatMap((prop) => themeColorDecls(prop.replace("width", "color"), value, extra));
       if (parseColor(value)) {
         return propList.map((prop) => decl(prop.replace("width", "color"), value));
       }
       if (token.arbitrary) {
-        return propList.map((prop) => decl(prop, value));
+        return withBorderStyle(propList, value);
       }
       return null;
     },
     handleCustomProperty: (value) => {
       if (value.startsWith("length:")) {
-        return propList.map((prop) => decl(prop, `var(${value.replace("length:", "")})`));
+        return withBorderStyle(propList, `var(${value.replace("length:", "")})`);
       }
       return propList.map((prop) => decl(prop.replace("width", "color"), `var(${value})`));
     },
@@ -6629,12 +6921,35 @@ staticUtility("border", [["border-width", "1px"]], { category: "borders" });
 staticUtility("border-inherit", [["border-color", "inherit"]], { category: "borders" });
 staticUtility("border-current", [["border-color", "currentColor"]], { category: "borders" });
 staticUtility("border-transparent", [["border-color", "transparent"]], { category: "borders" });
-staticUtility("border-solid", [["border-style", "solid"]], { category: "borders" });
-staticUtility("border-dashed", [["border-style", "dashed"]], { category: "borders" });
-staticUtility("border-dotted", [["border-style", "dotted"]], { category: "borders" });
-staticUtility("border-double", [["border-style", "double"]], { category: "borders" });
-staticUtility("border-hidden", [["border-style", "hidden"]], { category: "borders" });
-staticUtility("border-none", [["border-style", "none"]], { category: "borders" });
+staticUtility("border-solid", [["--baro-border-style", "solid"], ["border-style", "solid"]], { category: "borders" });
+staticUtility("border-dashed", [["--baro-border-style", "dashed"], ["border-style", "dashed"]], { category: "borders" });
+staticUtility("border-dotted", [["--baro-border-style", "dotted"], ["border-style", "dotted"]], { category: "borders" });
+staticUtility("border-double", [["--baro-border-style", "double"], ["border-style", "double"]], { category: "borders" });
+staticUtility("border-hidden", [["--baro-border-style", "hidden"], ["border-style", "hidden"]], { category: "borders" });
+staticUtility("border-none", [["--baro-border-style", "none"], ["border-style", "none"]], { category: "borders" });
+const divideSides = { x: ["border-inline-start", "border-inline-end", "border-inline-style"], y: ["border-top", "border-bottom", "border-bottom-style", "border-top-style"] };
+Object.entries(divideSides).forEach(([axis, [start, end, ...styles]]) => {
+  const rev = `--baro-divide-${axis}-reverse`;
+  const divide = (width) => [
+    borderStyleProperty(),
+    rule(":where(& > :not(:last-child))", [
+      decl(rev, "0"),
+      ...styles.map((s) => decl(s, "var(--baro-border-style)")),
+      decl(`${start}-width`, `calc(${width} * var(${rev}))`),
+      decl(`${end}-width`, `calc(${width} * calc(1 - var(${rev})))`)
+    ])
+  ];
+  staticUtility(`divide-${axis}`, divide("1px"), { category: "borders" });
+  staticUtility(`divide-${axis}-reverse`, [rule(":where(& > :not(:last-child))", [decl(rev, "1")])], { category: "borders" });
+  functionalUtility({
+    name: `divide-${axis}`,
+    supportsArbitrary: true,
+    handleBareValue: ({ value }) => /^\d+$/.test(value) ? `${value}px` : null,
+    handle: (value) => divide(value),
+    description: `divide-${axis} width utility`,
+    category: "borders"
+  });
+});
 functionalUtility({
   name: "border",
   themeKeys: ["colors", "borderWidth"],
@@ -6642,25 +6957,15 @@ functionalUtility({
   supportsCustomProperty: true,
   supportsOpacity: true,
   handle: (value, ctx, token, extra) => {
-    if (extra?.realThemeValue) {
-      if (extra.opacity) {
-        return [
-          atRule("supports", `(color:color-mix(in lab, red, red))`, [
-            decl("border-color", `color-mix(in lab, ${value} ${extra.opacity}%, transparent)`)
-          ]),
-          decl("border-color", `color-mix(in lab, ${value} ${extra.opacity}%, transparent)`)
-        ];
-      }
-      return [decl("border-color", value)];
-    }
+    if (extra?.realThemeValue) return themeColorDecls("border-color", value, extra);
     if (token.arbitrary) {
       if (parseLength(value)) {
-        return [decl("border-width", value)];
+        return withBorderStyle(["border-width"], value);
       }
       return [decl("border-color", value)];
     }
     if (parseNumber(value)) {
-      return [decl("border-width", `${value}px`)];
+      return withBorderStyle(["border-width"], `${value}px`);
     }
     if (parseColor(value)) {
       return [decl("border-color", value)];
@@ -6669,26 +6974,35 @@ functionalUtility({
   },
   handleCustomProperty: (value) => {
     if (value.startsWith("length:")) {
-      return [decl("border-width", `var(${value.replace("length:", "")})`)];
+      return withBorderStyle(["border-width"], `var(${value.replace("length:", "")})`);
     }
     return [decl("border-color", `var(${value})`)];
   },
   description: "border-width utility (number, arbitrary, custom property support)",
   category: "borders"
 });
-staticUtility("outline-0", [["outline-width", "0px"]], { category: "borders" });
-staticUtility("outline-1", [["outline-width", "1px"]], { category: "borders" });
-staticUtility("outline-2", [["outline-width", "2px"]], { category: "borders" });
-staticUtility("outline-4", [["outline-width", "4px"]], { category: "borders" });
-staticUtility("outline-8", [["outline-width", "8px"]], { category: "borders" });
+const outlineStyleProperty = () => atRoot([property("--baro-outline-style", "solid")]);
+const withOutlineStyle = (width) => [
+  outlineStyleProperty(),
+  decl("outline-style", "var(--baro-outline-style)"),
+  decl("outline-width", width)
+];
+[["outline-0", "0px"], ["outline-1", "1px"], ["outline-2", "2px"], ["outline-4", "4px"], ["outline-8", "8px"]].forEach(([name, width]) => {
+  staticUtility(name, [outlineStyleProperty, ["outline-style", "var(--baro-outline-style)"], ["outline-width", width]], { category: "borders" });
+});
 staticUtility("outline-inherit", [["outline-color", "inherit"]], { category: "borders" });
 staticUtility("outline-current", [["outline-color", "currentColor"]], { category: "borders" });
 staticUtility("outline-transparent", [["outline-color", "transparent"]], { category: "borders" });
-staticUtility("outline-none", [["outline", "2px solid transparent"], ["outline-offset", "2px"]], { category: "borders" });
-staticUtility("outline", [["outline-style", "solid"]], { category: "borders" });
-staticUtility("outline-dashed", [["outline-style", "dashed"]], { category: "borders" });
-staticUtility("outline-dotted", [["outline-style", "dotted"]], { category: "borders" });
-staticUtility("outline-double", [["outline-style", "double"]], { category: "borders" });
+staticUtility("outline-none", [["--baro-outline-style", "none"], ["outline-style", "none"]], { category: "borders" });
+staticUtility("outline-hidden", [
+  ["--baro-outline-style", "none"],
+  ["outline-style", "none"],
+  atRule("media", "(forced-colors: active)", [decl("outline", "2px solid transparent"), decl("outline-offset", "2px")])
+], { category: "borders" });
+staticUtility("outline", [outlineStyleProperty, ["outline-style", "var(--baro-outline-style)"], ["outline-width", "1px"]], { category: "borders" });
+["solid", "dashed", "dotted", "double"].forEach((style) => {
+  staticUtility(`outline-${style}`, [["--baro-outline-style", style], ["outline-style", style]], { category: "borders" });
+});
 staticUtility("outline-offset-0", [["outline-offset", "0px"]], { category: "borders" });
 staticUtility("outline-offset-1", [["outline-offset", "1px"]], { category: "borders" });
 staticUtility("outline-offset-2", [["outline-offset", "2px"]], { category: "borders" });
@@ -6713,16 +7027,18 @@ functionalUtility({
   themeKeys: ["colors", "borderWidth"],
   supportsArbitrary: true,
   supportsCustomProperty: true,
-  handle: (value, ctx, token) => {
+  supportsOpacity: true,
+  handle: (value, ctx, token, extra) => {
+    if (extra?.realThemeValue) return themeColorDecls("outline-color", value, extra);
     if (parseColor(value)) {
       return [decl("outline-color", value)];
     }
     if (parseNumber(value)) {
-      return [decl("outline-width", `${value}px`)];
+      return withOutlineStyle(`${value}px`);
     }
     if (token.arbitrary) {
       if (parseLength(value)) {
-        return [decl("outline-width", value)];
+        return withOutlineStyle(value);
       }
       return [decl("outline-color", value)];
     }
@@ -6733,7 +7049,7 @@ functionalUtility({
       return [decl("outline-color", value.replace("color:", ""))];
     }
     if (value.startsWith("length:")) {
-      return [decl("outline-width", `var(${value.replace("length:", "")})`)];
+      return withOutlineStyle(`var(${value.replace("length:", "")})`);
     }
     return [decl("outline-color", `var(${value})`)];
   },
@@ -6754,6 +7070,40 @@ functionalUtility({
   description: "outline-width utility (number, arbitrary, custom property support)",
   category: "borders"
 });
+const divideColor = (value) => [rule(":where(& > :not(:last-child))", [decl("border-color", value)])];
+staticUtility("divide-inherit", divideColor("inherit"), { category: "borders" });
+staticUtility("divide-current", divideColor("currentColor"), { category: "borders" });
+staticUtility("divide-transparent", divideColor("transparent"), { category: "borders" });
+functionalUtility({
+  name: "divide",
+  themeKeys: ["colors"],
+  supportsArbitrary: true,
+  supportsCustomProperty: true,
+  supportsOpacity: true,
+  handle: (value, _ctx, _token, extra) => {
+    if (extra?.realThemeValue) {
+      return [rule(":where(& > :not(:last-child))", themeColorDecls("border-color", value, extra))];
+    }
+    if (parseColor(value)) return divideColor(value);
+    return null;
+  },
+  handleCustomProperty: (value) => divideColor(`var(${value})`),
+  description: "divide-color utility (theme, alpha, arbitrary, custom property)",
+  category: "borders"
+});
+const ROTATE_SKEW = "var(--baro-rotate-x,) var(--baro-rotate-y,) var(--baro-rotate-z,) var(--baro-skew-x,) var(--baro-skew-y,)";
+const rotateAxis = (axis, fn) => [decl(`--baro-rotate-${axis}`, fn), decl("transform", ROTATE_SKEW)];
+const skewAxis = (axis, fn) => [decl(`--baro-skew-${axis}`, fn), decl("transform", ROTATE_SKEW)];
+const scaleProperties = () => atRoot([
+  property("--baro-scale-x", "1"),
+  property("--baro-scale-y", "1"),
+  property("--baro-scale-z", "1")
+]);
+const scaleAxis = (axis, v) => [
+  scaleProperties(),
+  decl(`--baro-scale-${axis}`, v),
+  decl("scale", axis === "z" ? "var(--baro-scale-x) var(--baro-scale-y) var(--baro-scale-z)" : "var(--baro-scale-x) var(--baro-scale-y)")
+];
 staticUtility("transform-none", [["transform", "none"]], {
   category: "transform"
 });
@@ -6762,7 +7112,7 @@ staticUtility(
   [
     [
       "transform",
-      "translateZ(0) var(--baro-rotate-x) var(--baro-rotate-y) var(--baro-rotate-z) var(--baro-skew-x) var(--baro-skew-y)"
+      `translateZ(0) ${ROTATE_SKEW}`
     ]
   ],
   { category: "transform" }
@@ -6770,7 +7120,7 @@ staticUtility(
 staticUtility("transform-cpu", [
   [
     "transform",
-    "var(--baro-rotate-x) var(--baro-rotate-y) var(--baro-rotate-z) var(--baro-skew-x) var(--baro-skew-y)"
+    ROTATE_SKEW
   ]
 ]);
 staticUtility("transform-3d", [["transform-style", "preserve-3d"]], {
@@ -6899,13 +7249,11 @@ functionalUtility({
     if (parseNumber(value) || negative) {
       const deg = `${Math.abs(Number(value))}deg`;
       const sign = negative || String(value).startsWith("-") ? "-" : "";
-      return [decl("transform", `rotateX(${sign}${deg}) var(--baro-rotate-y)`)];
+      return rotateAxis("x", `rotateX(${sign}${deg})`);
     }
-    return [decl("transform", `rotateX(${value}) var(--baro-rotate-y)`)];
+    return rotateAxis("x", `rotateX(${value})`);
   },
-  handleCustomProperty: (value) => [
-    decl("transform", `rotateX(var(${value})) var(--baro-rotate-y)`)
-  ],
+  handleCustomProperty: (value) => rotateAxis("x", `rotateX(var(${value}))`),
   description: "rotate-x utility (named, arbitrary, custom property supported)",
   category: "transform"
 });
@@ -6919,13 +7267,11 @@ functionalUtility({
     if (parseNumber(value) || negative) {
       const deg = `${Math.abs(Number(value))}deg`;
       const sign = negative || String(value).startsWith("-") ? "-" : "";
-      return [decl("transform", `var(--baro-rotate-x) rotateY(${sign}${deg})`)];
+      return rotateAxis("y", `rotateY(${sign}${deg})`);
     }
-    return [decl("transform", `var(--baro-rotate-x) rotateY(${value})`)];
+    return rotateAxis("y", `rotateY(${value})`);
   },
-  handleCustomProperty: (value) => [
-    decl("transform", `var(--baro-rotate-x) rotateY(var(${value}))`)
-  ],
+  handleCustomProperty: (value) => rotateAxis("y", `rotateY(var(${value}))`),
   description: "rotate-y utility (named, arbitrary, custom property supported)",
   category: "transform"
 });
@@ -6939,26 +7285,11 @@ functionalUtility({
     if (parseNumber(value) || negative) {
       const deg = `${Math.abs(Number(value))}deg`;
       const sign = negative || String(value).startsWith("-") ? "-" : "";
-      return [
-        decl(
-          "transform",
-          `var(--baro-rotate-x) var(--baro-rotate-y) rotateZ(${sign}${deg})`
-        )
-      ];
+      return rotateAxis("z", `rotateZ(${sign}${deg})`);
     }
-    return [
-      decl(
-        "transform",
-        `var(--baro-rotate-x) var(--baro-rotate-y) rotateZ(${value})`
-      )
-    ];
+    return rotateAxis("z", `rotateZ(${value})`);
   },
-  handleCustomProperty: (value) => [
-    decl(
-      "transform",
-      `var(--baro-rotate-x) var(--baro-rotate-y) rotateZ(var(${value}))`
-    )
-  ],
+  handleCustomProperty: (value) => rotateAxis("z", `rotateZ(var(${value}))`),
   description: "rotate-z utility (named, arbitrary, custom property supported)",
   category: "transform"
 });
@@ -6985,7 +7316,7 @@ functionalUtility({
 staticUtility("scale-none", [["scale", "none"]], { category: "transform" });
 staticUtility(
   "scale-3d",
-  [["scale", "var(--baro-scale-x) var(--baro-scale-y) var(--baro-scale-z)"]],
+  [scaleProperties, ["scale", "var(--baro-scale-x) var(--baro-scale-y) var(--baro-scale-z)"]],
   { category: "transform" }
 );
 functionalUtility({
@@ -6996,18 +7327,16 @@ functionalUtility({
   supportsNegative: true,
   handle: (value, ctx, { negative, arbitrary }) => {
     if (arbitrary) {
-      return [decl("scale", `${value}`)];
+      return scaleAxis("x", value);
     }
     if (parseNumber(value) || negative) {
       const pct = `${Math.abs(Number(value))}%`;
       const sign = negative || String(value).startsWith("-") ? "-" : "";
-      return [decl("scale", `calc(${pct} * ${sign}1) var(--baro-scale-y)`)];
+      return scaleAxis("x", `calc(${pct} * ${sign}1)`);
     }
-    return [decl("scale", `${value} var(--baro-scale-y)`)];
+    return scaleAxis("x", value);
   },
-  handleCustomProperty: (value) => [
-    decl("scale", `var(${value}) var(--baro-scale-y)`)
-  ],
+  handleCustomProperty: (value) => scaleAxis("x", `var(${value})`),
   description: "scale-x utility (named, arbitrary, custom property supported)",
   category: "transform"
 });
@@ -7019,18 +7348,16 @@ functionalUtility({
   supportsNegative: true,
   handle: (value, ctx, { negative, arbitrary }) => {
     if (arbitrary) {
-      return [decl("scale", `var(--baro-scale-x) ${value}`)];
+      return scaleAxis("y", value);
     }
     if (parseNumber(value) || negative) {
       const pct = `${Math.abs(Number(value))}%`;
       const sign = negative || String(value).startsWith("-") ? "-" : "";
-      return [decl("scale", `var(--baro-scale-x) calc(${pct} * ${sign}1)`)];
+      return scaleAxis("y", `calc(${pct} * ${sign}1)`);
     }
-    return [decl("scale", `var(--baro-scale-x) ${value}`)];
+    return scaleAxis("y", value);
   },
-  handleCustomProperty: (value) => [
-    decl("scale", `var(--baro-scale-x) var(${value})`)
-  ],
+  handleCustomProperty: (value) => scaleAxis("y", `var(${value})`),
   description: "scale-y utility (named, arbitrary, custom property supported)",
   category: "transform"
 });
@@ -7042,25 +7369,16 @@ functionalUtility({
   supportsNegative: true,
   handle: (value, ctx, { negative, arbitrary }) => {
     if (arbitrary) {
-      return [
-        decl("scale", `var(--baro-scale-x) var(--baro-scale-y) ${value}`)
-      ];
+      return scaleAxis("z", value);
     }
     if (parseNumber(value) || negative) {
       const pct = `${Math.abs(Number(value))}%`;
       const sign = negative || String(value).startsWith("-") ? "-" : "";
-      return [
-        decl(
-          "scale",
-          `var(--baro-scale-x) var(--baro-scale-y) calc(${pct} * ${sign}1)`
-        )
-      ];
+      return scaleAxis("z", `calc(${pct} * ${sign}1)`);
     }
-    return [decl("scale", `var(--baro-scale-x) var(--baro-scale-y) ${value}`)];
+    return scaleAxis("z", value);
   },
-  handleCustomProperty: (value) => [
-    decl("scale", `var(--baro-scale-x) var(--baro-scale-y) var(${value})`)
-  ],
+  handleCustomProperty: (value) => scaleAxis("z", `var(${value})`),
   description: "scale-z utility (named, arbitrary, custom property supported)",
   category: "transform"
 });
@@ -7099,11 +7417,11 @@ functionalUtility({
     if (parseNumber(value) || negative) {
       const deg = `${Math.abs(Number(value))}deg`;
       const sign = negative || String(value).startsWith("-") ? "-" : "";
-      return [decl("transform", `skewX(${sign}${deg})`)];
+      return skewAxis("x", `skewX(${sign}${deg})`);
     }
-    return [decl("transform", `skewX(${value})`)];
+    return skewAxis("x", `skewX(${value})`);
   },
-  handleCustomProperty: (value) => [decl("transform", `skewX(var(${value}))`)],
+  handleCustomProperty: (value) => skewAxis("x", `skewX(var(${value}))`),
   description: "skew-x utility (named, arbitrary, custom property supported)",
   category: "transform"
 });
@@ -7117,11 +7435,11 @@ functionalUtility({
     if (parseNumber(value) || negative) {
       const deg = `${Math.abs(Number(value))}deg`;
       const sign = negative || String(value).startsWith("-") ? "-" : "";
-      return [decl("transform", `skewY(${sign}${deg})`)];
+      return skewAxis("y", `skewY(${sign}${deg})`);
     }
-    return [decl("transform", `skewY(${value})`)];
+    return skewAxis("y", `skewY(${value})`);
   },
-  handleCustomProperty: (value) => [decl("transform", `skewY(var(${value}))`)],
+  handleCustomProperty: (value) => skewAxis("y", `skewY(var(${value}))`),
   description: "skew-y utility (named, arbitrary, custom property supported)",
   category: "transform"
 });
@@ -7135,12 +7453,14 @@ functionalUtility({
     if (parseNumber(value) || negative) {
       const deg = `${Math.abs(Number(value))}deg`;
       const sign = negative || String(value).startsWith("-") ? "-" : "";
-      return [decl("transform", `skewX(${sign}${deg}) skewY(${sign}${deg})`)];
+      return [decl("--baro-skew-x", `skewX(${sign}${deg})`), decl("--baro-skew-y", `skewY(${sign}${deg})`), decl("transform", ROTATE_SKEW)];
     }
-    return [decl("transform", `skewX(${value}) skewY(${value})`)];
+    return [decl("--baro-skew-x", `skewX(${value})`), decl("--baro-skew-y", `skewY(${value})`), decl("transform", ROTATE_SKEW)];
   },
   handleCustomProperty: (value) => [
-    decl("transform", `skewX(var(${value})) skewY(var(${value}))`)
+    decl("--baro-skew-x", `skewX(var(${value}))`),
+    decl("--baro-skew-y", `skewY(var(${value}))`),
+    decl("transform", ROTATE_SKEW)
   ],
   description: "skew utility (named, arbitrary, custom property supported)",
   category: "transform"
@@ -7185,6 +7505,22 @@ const translateProperties = () => atRoot([
   property("--baro-translate-y", "0"),
   property("--baro-translate-z", "0")
 ]);
+const translateAxis = (axis, v) => [
+  translateProperties(),
+  decl(`--baro-translate-${axis}`, v),
+  decl(
+    "translate",
+    axis === "z" ? "var(--baro-translate-x) var(--baro-translate-y) var(--baro-translate-z)" : "var(--baro-translate-x) var(--baro-translate-y)"
+  )
+];
+const staticTranslateAxis = (axis, v) => [
+  translateProperties,
+  [`--baro-translate-${axis}`, v],
+  [
+    "translate",
+    axis === "z" ? "var(--baro-translate-x) var(--baro-translate-y) var(--baro-translate-z)" : "var(--baro-translate-x) var(--baro-translate-y)"
+  ]
+];
 staticUtility("translate-none", [["translate", "none"]], {
   category: "transform"
 });
@@ -7216,52 +7552,52 @@ staticUtility(
 );
 staticUtility(
   "translate-x-px",
-  [["translate", "1px var(--baro-translate-y)"]],
+  staticTranslateAxis("x", "1px"),
   { category: "transform" }
 );
 staticUtility(
   "-translate-x-px",
-  [["translate", "-1px var(--baro-translate-y)"]],
+  staticTranslateAxis("x", "-1px"),
   { category: "transform" }
 );
 staticUtility(
   "translate-x-full",
-  [["translate", "100% var(--baro-translate-y)"]],
+  staticTranslateAxis("x", "100%"),
   { category: "transform" }
 );
 staticUtility(
   "-translate-x-full",
-  [["translate", "-100% var(--baro-translate-y)"]],
+  staticTranslateAxis("x", "-100%"),
   { category: "transform" }
 );
 staticUtility(
   "translate-y-px",
-  [["translate", "var(--baro-translate-x) 1px"]],
+  staticTranslateAxis("y", "1px"),
   { category: "transform" }
 );
 staticUtility(
   "-translate-y-px",
-  [["translate", "var(--baro-translate-x) -1px"]],
+  staticTranslateAxis("y", "-1px"),
   { category: "transform" }
 );
 staticUtility(
   "translate-y-full",
-  [["translate", "var(--baro-translate-x) 100%"]],
+  staticTranslateAxis("y", "100%"),
   { category: "transform" }
 );
 staticUtility(
   "-translate-y-full",
-  [["translate", "var(--baro-translate-x) -100%"]],
+  staticTranslateAxis("y", "-100%"),
   { category: "transform" }
 );
 staticUtility(
   "translate-z-px",
-  [["translate", "var(--baro-translate-x) var(--baro-translate-y) 1px"]],
+  staticTranslateAxis("z", "1px"),
   { category: "transform" }
 );
 staticUtility(
   "-translate-z-px",
-  [["translate", "var(--baro-translate-x) var(--baro-translate-y) -1px"]],
+  staticTranslateAxis("z", "-1px"),
   { category: "transform" }
 );
 functionalUtility({
@@ -7271,19 +7607,17 @@ functionalUtility({
   supportsArbitrary: true,
   supportsCustomProperty: true,
   handle: (value, ctx, { negative }) => {
-    if (parseFractionOrNumber(value)) {
+    if (value.includes("/") && parseFractionOrNumber(value)) {
       const v = `calc(${value} * 100%)`;
-      return [decl("translate", `${v} var(--baro-translate-y)`)];
+      return translateAxis("x", v);
     }
     if (parseNumber(value) || negative) {
       const v = `calc(var(--spacing) * ${value})`;
-      return [decl("translate", `${v} var(--baro-translate-y)`)];
+      return translateAxis("x", v);
     }
-    return [decl("translate", `${value} var(--baro-translate-y)`)];
+    return translateAxis("x", value);
   },
-  handleCustomProperty: (value) => [
-    decl("translate", `var(${value}) var(--baro-translate-y)`)
-  ],
+  handleCustomProperty: (value) => translateAxis("x", `var(${value})`),
   description: "translate-x utility (spacing, fraction, arbitrary, custom property, negative)",
   category: "transform"
 });
@@ -7294,19 +7628,17 @@ functionalUtility({
   supportsArbitrary: true,
   supportsCustomProperty: true,
   handle: (value, ctx, { negative }) => {
-    if (parseFractionOrNumber(value)) {
+    if (value.includes("/") && parseFractionOrNumber(value)) {
       const v = `calc(${value} * 100%)`;
-      return [decl("translate", `var(--baro-translate-x) ${v}`)];
+      return translateAxis("y", v);
     }
     if (parseNumber(value) || negative) {
       const v = `calc(var(--spacing) * ${value})`;
-      return [decl("translate", `var(--baro-translate-x) ${v}`)];
+      return translateAxis("y", v);
     }
-    return [decl("translate", `var(--baro-translate-x) ${value}`)];
+    return translateAxis("y", value);
   },
-  handleCustomProperty: (value) => [
-    decl("translate", `var(--baro-translate-x) var(${value})`)
-  ],
+  handleCustomProperty: (value) => translateAxis("y", `var(${value})`),
   description: "translate-y utility (spacing, fraction, arbitrary, custom property, negative)",
   category: "transform"
 });
@@ -7317,37 +7649,17 @@ functionalUtility({
   supportsArbitrary: true,
   supportsCustomProperty: true,
   handle: (value, ctx, { negative }) => {
-    if (parseFractionOrNumber(value)) {
+    if (value.includes("/") && parseFractionOrNumber(value)) {
       const v = `calc(${value} * 100%)`;
-      return [
-        decl(
-          "translate",
-          `var(--baro-translate-x) var(--baro-translate-y) ${v}`
-        )
-      ];
+      return translateAxis("z", v);
     }
     if (parseNumber(value) || negative) {
       const v = `calc(var(--spacing) * ${value})`;
-      return [
-        decl(
-          "translate",
-          `var(--baro-translate-x) var(--baro-translate-y) ${v}`
-        )
-      ];
+      return translateAxis("z", v);
     }
-    return [
-      decl(
-        "translate",
-        `var(--baro-translate-x) var(--baro-translate-y) ${value}`
-      )
-    ];
+    return translateAxis("z", value);
   },
-  handleCustomProperty: (value) => [
-    decl(
-      "translate",
-      `var(--baro-translate-x) var(--baro-translate-y) var(${value})`
-    )
-  ],
+  handleCustomProperty: (value) => translateAxis("z", `var(${value})`),
   description: "translate-z utility (spacing, fraction, arbitrary, custom property, negative)",
   category: "transform"
 });
@@ -7358,7 +7670,7 @@ functionalUtility({
   supportsArbitrary: true,
   supportsCustomProperty: true,
   handle: (value, ctx, { negative }) => {
-    if (parseFractionOrNumber(value)) {
+    if (value.includes("/") && parseFractionOrNumber(value)) {
       const v = `calc(${value} * 100%)`;
       return [decl("translate", `${v} ${v}`)];
     }
@@ -7523,8 +7835,13 @@ staticModifier("rtl", ["&[dir=rtl]"], { order: 20, source: "attribute" });
 staticModifier("ltr", ["&[dir=ltr]"], { order: 20, source: "attribute" });
 staticModifier("inert", ["&[inert]"], { order: 40, source: "attribute" });
 staticModifier("open", ["&:is([open], :popover-open, :open)"], { order: 40, source: "attribute" });
-staticModifier("before", ["&::before"], { source: "pseudo" });
-staticModifier("after", ["&::after"], { source: "pseudo" });
+const withPseudoContent = (ast) => [
+  atRoot([property("--baro-content", '""')]),
+  ...ast,
+  decl("content", "var(--baro-content)")
+];
+staticModifier("before", ["&::before"], { source: "pseudo", astHandler: withPseudoContent });
+staticModifier("after", ["&::after"], { source: "pseudo", astHandler: withPseudoContent });
 staticModifier("placeholder", [
   "&::placeholder",
   "&::-webkit-input-placeholder",
@@ -7557,9 +7874,6 @@ function createContainerParams(type, value, name) {
   const condition = type === "min" ? "width >=" : "width <";
   return name ? `${name} (${condition} ${value})` : `(${condition} ${value})`;
 }
-function getThemeSize(ctx, key) {
-  return ctx.theme("container." + key) || ctx.theme("breakpoint." + key);
-}
 function createContainerRule(params, ast) {
   return {
     type: "at-rule",
@@ -7579,6 +7893,35 @@ function getDefaultBreakpoint(breakpoint) {
   };
   return defaults[breakpoint] || `(min-width: ${breakpoint})`;
 }
+function decodeArbitrarySelector(value) {
+  return value.replace(/\\_|_/g, (m) => m === "_" ? " " : "_");
+}
+function attributeVariantSelector(variant) {
+  const bracket = /^(data|aria)-\[([a-zA-Z0-9_-]+)(?:=([^\]]+))?\]$/.exec(variant);
+  if (bracket) {
+    const [, kind, key, raw] = bracket;
+    if (raw === void 0) return `[${kind}-${key}]`;
+    const value = /^(["']).*\1$/.test(raw) ? raw : `"${decodeArbitrarySelector(raw)}"`;
+    return `[${kind}-${key}=${value}]`;
+  }
+  const bare = /^data-([a-zA-Z0-9_-]+)$/.exec(variant);
+  return bare ? `[data-${bare[1]}]` : void 0;
+}
+function functionalArgument(value) {
+  const v = decodeArbitrarySelector(value);
+  return /^[>+~]/.test(v.trim()) || !hasTopLevelComma(v) ? v : `*:is(${v})`;
+}
+function hasTopLevelComma(value) {
+  let depth = 0;
+  for (let i = 0; i < value.length; i++) {
+    const c = value[i];
+    if (c === "\\") i++;
+    else if (c === "(" || c === "[") depth++;
+    else if (c === ")" || c === "]") depth--;
+    else if (c === "," && depth === 0) return true;
+  }
+  return false;
+}
 functionalModifier(
   (mod, context) => {
     const breakpoints2 = context.theme("breakpoints") || context.config("theme.breakpoints") || {};
@@ -7609,7 +7952,7 @@ functionalModifier(
     const breakpoints2 = context.theme("breakpoints") || context.config("theme.breakpoints") || {};
     if (Object.keys(breakpoints2).includes(breakpoint)) {
       let mediaQuery = context.theme(`breakpoints.${breakpoint}`) || getDefaultBreakpoint(breakpoint);
-      if (/^\d+(px|em|rem)?$/.test(mediaQuery)) {
+      if (/^\d*\.?\d+(px|em|rem)?$/.test(mediaQuery)) {
         mediaQuery = `(min-width: ${mediaQuery})`;
       }
       return [atRule("media", mediaQuery, [], "responsive")];
@@ -7628,6 +7971,8 @@ functionalModifier(
           if (value) {
             mediaQuery = `(width < ${value})`;
           }
+        } else if (/^\d*\.?\d+(px|em|rem)?$/.test(mediaQuery)) {
+          mediaQuery = `(width < ${mediaQuery})`;
         }
         return [atRule("media", mediaQuery, [], "responsive")];
       }
@@ -7696,132 +8041,137 @@ functionalModifier(
     return result;
   }
 );
+const SIZE_VARIANT = /^@(?:(min|max)-)?(\[[^\]]+\]|[a-zA-Z0-9.]+)(?:\/([a-zA-Z0-9_-]+))?$/;
 functionalModifier(
-  (mod) => /^@container\/([a-zA-Z0-9_-]+)$/.test(mod),
-  void 0,
-  (mod, context) => {
-    const containerMatch = /^@container\/([a-zA-Z0-9_-]+)$/.exec(mod.type);
-    if (containerMatch) {
-      const name = containerMatch[1];
-      const params = name;
-      return [createContainerRule(params, [])];
-    }
-    return [];
-  }
-);
-functionalModifier(
-  (mod) => /^@container\/([a-zA-Z0-9_-]+)\s+\(([^)]+)\)$/.test(mod),
+  (mod) => SIZE_VARIANT.test(mod) && !/^@container(?:\/|$)/.test(mod),
   void 0,
   (mod, context) => {
-    const containerSizeMatch = /^@container\/([a-zA-Z0-9_-]+)\s+\(([^)]+)\)$/.exec(mod.type);
-    if (containerSizeMatch) {
-      const [, name, size] = containerSizeMatch;
-      const params = createContainerParams("min", size, name);
-      return [createContainerRule(params, [])];
-    }
-    return [];
+    const m = SIZE_VARIANT.exec(mod.type);
+    if (!m) return [];
+    const [, type, size, name] = m;
+    const value = size.startsWith("[") ? size.slice(1, -1).replace(/_/g, " ") : context.theme("container." + size);
+    if (!value) return [];
+    return [createContainerRule(createContainerParams(type === "max" ? "max" : "min", value, name), [])];
   }
 );
+const startsAtRule = (bracket) => /^[\s_]*@/.test(bracket);
 functionalModifier(
-  (mod) => /^@(sm|md|lg|xl|2xl)\/([a-zA-Z0-9_-]+)$/.test(mod),
-  void 0,
-  (mod, context) => {
-    const namedSizeMatch = /^@(sm|md|lg|xl|2xl)\/([a-zA-Z0-9_-]+)$/.exec(mod.type);
-    if (namedSizeMatch) {
-      const [, size, name] = namedSizeMatch;
-      const sizeValue = getThemeSize(context, size) || size;
-      const params = createContainerParams("min", sizeValue, name);
-      return [createContainerRule(params, [])];
-    }
-    return [];
-  }
+  (mod) => /^has-\[.*\]$/.test(mod) && !startsAtRule(mod.slice(5)),
+  ({ selector, mod }) => {
+    const m = /^has-\[(.+)\]$/.exec(mod.type);
+    return m ? {
+      selector: `&:has(${functionalArgument(m[1])})`,
+      flatten: false,
+      wrappingType: "rule",
+      source: "attribute"
+    } : {
+      selector,
+      source: "attribute"
+    };
+  },
+  void 0
 );
 functionalModifier(
-  (mod) => /^@(sm|md|lg|xl|2xl)$/.test(mod),
-  void 0,
-  (mod, context) => {
-    const themeSizeMatch = /^@(sm|md|lg|xl|2xl)$/.exec(mod.type);
-    if (themeSizeMatch) {
-      const size = themeSizeMatch[1];
-      const sizeValue = getThemeSize(context, size) || size;
-      const params = createContainerParams("min", sizeValue);
-      return [createContainerRule(params, [])];
-    }
-    return [];
-  }
+  (mod) => /^has-(data|aria)-/.test(mod) && !!attributeVariantSelector(mod.slice(4)),
+  ({ mod }) => ({
+    selector: `&:has(*${attributeVariantSelector(mod.type.slice(4))})`,
+    flatten: false,
+    wrappingType: "rule",
+    source: "attribute"
+  }),
+  void 0
 );
+function innerCompound(variant, ctx) {
+  const attr = attributeVariantSelector(variant);
+  if (attr) return { compound: attr };
+  if (/^(has|in|not|group|peer)-|[^a-z0-9-]/.test(variant)) return void 0;
+  const inner = getModifier(ctx).find((m) => m.match(variant, ctx));
+  if (!inner?.modifySelector || inner.astHandler) return void 0;
+  const out = inner.modifySelector({ selector: "&", fullClassName: "", mod: { type: variant }, context: ctx });
+  const list = typeof out === "string" ? [{ selector: out }] : Array.isArray(out) ? out : [out];
+  if (list.length !== 1) return void 0;
+  const sel = list[0].selector;
+  if (!/^&[:[]/.test(sel) || sel.slice(1).includes("&") || /[\s,>+~]/.test(sel.replace(/\([^()]*\)/g, ""))) return void 0;
+  return { compound: sel.slice(1), inner };
+}
+function resolveHasIn(mod, ctx) {
+  const m = /^(has|in)-(.+)$/.exec(mod);
+  if (!m) return void 0;
+  const [, kind, v] = m;
+  if (kind === "in" && /^\[.+\]$/.test(v)) {
+    if (startsAtRule(v.slice(1))) return void 0;
+    const sel = decodeArbitrarySelector(v.slice(1, -1));
+    return { kind, compound: sel.startsWith("&") ? sel.slice(1) : `:is(${sel})` };
+  }
+  if (kind === "has" && (v.startsWith("[") || /^(data|aria)-/.test(v))) return void 0;
+  const r = innerCompound(v, ctx);
+  return r && { kind, ...r };
+}
+const hasInSelector = ({ selector, mod, context }) => {
+  const r = resolveHasIn(mod.type, context);
+  if (!r) return { selector };
+  return {
+    selector: r.kind === "has" ? `&:has(*${r.compound})` : `:where(*${r.compound}) &`,
+    flatten: false,
+    wrappingType: "rule",
+    source: "attribute"
+  };
+};
 functionalModifier(
-  (mod) => /^@max-(sm|md|lg|xl|2xl)$/.test(mod),
-  void 0,
-  (mod, context) => {
-    const themeSizeMatch = /^@max-(sm|md|lg|xl|2xl)$/.exec(mod.type);
-    if (themeSizeMatch) {
-      const size = themeSizeMatch[1];
-      const sizeValue = getThemeSize(context, size) || size;
-      const params = createContainerParams("max", sizeValue);
-      return [createContainerRule(params, [])];
-    }
-    return [];
-  }
+  (mod, ctx) => !!resolveHasIn(mod, ctx)?.inner?.wrap,
+  hasInSelector,
+  (mod, context) => resolveHasIn(mod.type, context).inner.wrap({ ...mod, type: mod.type.replace(/^(has|in)-/, "") }, context)
 );
 functionalModifier(
-  (mod) => /^@(min|max)-\[.*\]$/.test(mod),
-  void 0,
-  (mod, context) => {
-    const arbitraryMatch = /^@(min|max)-\[(.+)\]$/.exec(mod.type);
-    if (arbitraryMatch) {
-      const [, type, value] = arbitraryMatch;
-      const params = createContainerParams(type, value);
-      return [createContainerRule(params, [])];
-    }
-    return [];
-  }
+  (mod, ctx) => {
+    const r = resolveHasIn(mod, ctx);
+    return !!r && !r.inner?.wrap;
+  },
+  hasInSelector
 );
+function resolveGroupHas(mod, ctx) {
+  const m = /^(group|peer)-has-(.+?)(?:\/([a-zA-Z0-9_-]+))?$/.exec(mod);
+  if (!m) return void 0;
+  const kind = m[1];
+  const v = m[2];
+  const base = m[3] ? `.${kind}\\/${m[3]}` : `.${kind}`;
+  if (/^\[.+\]$/.test(v)) {
+    if (startsAtRule(v.slice(1))) return void 0;
+    const sel = decodeArbitrarySelector(v.slice(1, -1));
+    return { kind, base, v, arg: /^[>+~]/.test(sel.trim()) ? sel : `*:is(${sel})` };
+  }
+  const r = innerCompound(v, ctx);
+  return r && { kind, base, v, arg: `*${r.compound}`, inner: r.inner };
+}
+const groupHasSelector = ({ selector, mod, context }) => {
+  const r = resolveGroupHas(mod.type, context);
+  if (!r) return { selector };
+  const tail = r.kind === "group" ? " *" : " ~ *";
+  return { selector: `&:is(:where(${r.base}):has(${r.arg})${tail})`, wrappingType: "rule", source: r.kind };
+};
 functionalModifier(
-  (mod) => /^@(min|max)-\[.*\]\/([a-zA-Z0-9_-]+)$/.test(mod),
-  void 0,
+  (mod, ctx) => !!resolveGroupHas(mod, ctx)?.inner?.wrap,
+  groupHasSelector,
   (mod, context) => {
-    const arbitraryNamedMatch = /^@(min|max)-\[(.+)\]\/([a-zA-Z0-9_-]+)$/.exec(mod.type);
-    if (arbitraryNamedMatch) {
-      const [, type, value, name] = arbitraryNamedMatch;
-      const params = createContainerParams(type, value, name);
-      return [createContainerRule(params, [])];
-    }
-    return [];
+    const r = resolveGroupHas(mod.type, context);
+    return r.inner.wrap({ ...mod, type: r.v }, context);
   }
 );
 functionalModifier(
-  (mod) => /^has-\[.*\]$/.test(mod),
-  ({ selector, mod }) => {
-    const m = /^has-\[(.+)\]$/.exec(mod.type);
-    if (m && m[1].startsWith(".")) {
-      return {
-        selector: `&:has(${m[1]})`,
-        flatten: false,
-        wrappingType: "rule",
-        source: "attribute"
-      };
-    }
-    return m ? {
-      selector: `&:has(${m[1]})`,
-      flatten: false,
-      wrappingType: "rule",
-      source: "attribute"
-    } : {
-      selector,
-      source: "attribute"
-    };
+  (mod, ctx) => {
+    const r = resolveGroupHas(mod, ctx);
+    return !!r && !r.inner?.wrap;
   },
-  void 0
+  groupHasSelector
 );
 functionalModifier(
   (mod) => /^not-\[.*\]$/.test(mod),
   ({ selector, mod }) => {
     const m = /^not-\[(.+)\]$/.exec(mod.type);
     if (m) {
-      if (m[1].startsWith(".")) {
+      if (!/^[a-zA-Z0-9_-]+(=.+)?$/.test(m[1])) {
         return {
-          selector: `&:not(${m[1]})`,
+          selector: `&:not(${functionalArgument(m[1])})`,
           flatten: false,
           wrappingType: "rule",
           source: "attribute"
@@ -7854,27 +8204,14 @@ functionalModifier(
 );
 functionalModifier(
   (mod) => mod === "*",
-  ({ selector, fullClassName, variantChain }) => {
-    const isSingle = !variantChain || variantChain.length === 1;
-    return {
-      selector: `:is(.${escapeClassName(fullClassName)} > *)`,
-      flatten: true,
-      wrappingType: isSingle ? "rule" : "style-rule",
-      source: "universal"
-    };
+  () => {
+    return { selector: ":is(& > *)", wrappingType: "rule", source: "universal" };
   },
   void 0
 );
 functionalModifier(
   (mod) => mod === "**",
-  ({ selector, fullClassName }) => {
-    return {
-      selector: `:is(.${escapeClassName(fullClassName)} *)`,
-      flatten: false,
-      wrappingType: "style-rule",
-      source: "universal"
-    };
-  },
+  () => ({ selector: ":is(& *)", wrappingType: "rule", source: "universal" }),
   void 0
 );
 functionalModifier(
@@ -7882,17 +8219,14 @@ functionalModifier(
   ({ selector, mod }) => {
     const m = /^\[(.+)\]$/.exec(mod.type);
     if (!m) return { selector };
-    const inner = m[1].trim();
+    const inner = decodeArbitrarySelector(m[1]).trim();
     if (/^[a-zA-Z0-9_-]+(=.+)?$/.test(inner)) {
       return { selector: `&[${inner}]`, wrappingType: "rule", source: "attribute" };
     }
-    if (inner === "&>*") {
-      return { selector: `${inner}`, wrappingType: "style-rule", source: "peer" };
-    }
     if (inner.startsWith("&")) {
       return { selector: `${inner}`, wrappingType: "rule", source: "pseudo" };
     }
-    return { selector: `${inner} &`.trim(), wrappingType: "rule", source: "base" };
+    return { selector: `&:is(${inner})`, wrappingType: "rule", source: "base" };
   },
   void 0
 );
@@ -7936,7 +8270,7 @@ functionalModifier(
         };
       } else {
         return {
-          selector: `&:not(${inner})`,
+          selector: `&:not(${functionalArgument(inner)})`,
           source: "attribute"
         };
       }
@@ -8087,29 +8421,56 @@ functionalModifier(
     return m ? [atRule("scope", m[1], [])] : [];
   }
 );
+const atRuleHas = (mod) => /^(group|peer)-has-\[/.test(mod) && startsAtRule(mod.slice(mod.indexOf("[") + 1));
+function splitGroupName(kind, variant) {
+  const named = /^(.+)\/([a-zA-Z0-9_-]+)$/.exec(variant);
+  return named ? [named[1], `.${kind}\\/${named[2]}`] : [variant, `.${kind}`];
+}
+functionalModifier(
+  (mod) => /^(group|peer)-hover(\/[a-zA-Z0-9_-]+)?$/.test(mod),
+  ({ mod }) => {
+    const kind = mod.type.startsWith("group") ? "group" : "peer";
+    const [, base] = splitGroupName(kind, mod.type.slice(kind.length + 1));
+    const tail = kind === "group" ? " *" : " ~ *";
+    return { selector: `&:is(:where(${base}):hover${tail})`, wrappingType: "rule", source: kind };
+  },
+  () => [atRule("media", "(hover: hover)", [])]
+);
+function negated(value) {
+  const v = value.slice(4);
+  return v.startsWith("[") && v.endsWith("]") ? `:not(*:is(${decodeArbitrarySelector(v.slice(1, -1))}))` : `:not(:${v})`;
+}
 functionalModifier(
-  (mod) => /^group-(.+)$/.test(mod),
+  (mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod),
   ({ selector, mod }) => {
-    const m = /^group-(.+)$/.exec(mod.type);
+    const raw = /^group-(.+)$/.exec(mod.type);
+    const [variant, base] = splitGroupName("group", raw?.[1] ?? "");
+    const m = raw ? [raw[0], variant] : null;
+    const g = `:where(${base})`;
+    const attr = m ? attributeVariantSelector(m[1]) : void 0;
+    if (attr) return { selector: `&:is(${g}${attr} *)`, wrappingType: "rule", source: "group" };
     if (m?.[1].startsWith("[") && m?.[1].endsWith("]")) {
       const value = m?.[1].slice(1, -1).replace(/_/g, "");
       return {
-        selector: `&:is(:where(.group):is(${value}) *)`,
+        selector: `&:is(${g}:is(${value}) *)`,
         wrappingType: "rule",
         source: "group"
       };
     }
+    if (m?.[1]?.startsWith("not-")) {
+      return { selector: `&:is(${g}${negated(m[1])} *)`, wrappingType: "rule", source: "group" };
+    }
     if (m?.[1]?.startsWith("has-")) {
       const pattern = /^has-\[([a-zA-Z0-9_-]+)\]$/.exec(m?.[1]);
       if (pattern) {
         const value = pattern[1];
         return {
-          selector: `&:is(:where(.group):has(:is(${value})) *)`,
+          selector: `&:is(${g}:has(:is(${value})) *)`,
           source: "group"
         };
       }
       return {
-        selector: `&:is(:where(.group):has(:is(${m?.[1].slice(4, -1)})) *)`,
+        selector: `&:is(${g}:has(${functionalArgument(m[1].slice(5, -1))}) *)`,
         source: "group"
       };
     }
@@ -8119,19 +8480,19 @@ functionalModifier(
         const value = pattern[1];
         if (pattern[2]) {
           return {
-            selector: `&:is(:where(.group)[aria-${value}="${pattern[2]}"] *)`,
+            selector: `&:is(${g}[aria-${value}="${pattern[2]}"] *)`,
             source: "group"
           };
         } else {
           return {
-            selector: `&:is(:where(.group)[aria-${value}] *)`,
+            selector: `&:is(${g}[aria-${value}] *)`,
             source: "group"
           };
         }
       }
     }
     return m ? {
-      selector: `&:is(:where(.group):${m[1]} *)`,
+      selector: `&:is(${g}:${m[1]} *)`,
       wrappingType: "rule",
       source: "group"
     } : {
@@ -8142,27 +8503,35 @@ functionalModifier(
   void 0
 );
 functionalModifier(
-  (mod) => /^peer-(.+)$/.test(mod),
+  (mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod),
   ({ selector, mod }) => {
-    const m = /^peer-(.+)$/.exec(mod.type);
+    const raw = /^peer-(.+)$/.exec(mod.type);
+    const [variant, base] = splitGroupName("peer", raw?.[1] ?? "");
+    const m = raw ? [raw[0], variant] : null;
+    const g = `:where(${base})`;
+    const attr = m ? attributeVariantSelector(m[1]) : void 0;
+    if (attr) return { selector: `&:is(${g}${attr} ~ *)`, wrappingType: "rule", source: "peer" };
     if (m?.[1].startsWith("[") && m?.[1].endsWith("]")) {
       const value2 = m?.[1].slice(1, -1).replace(/_/g, "");
       return {
-        selector: `&:is(:where(.peer):is(${value2})~*)`,
+        selector: `&:is(${g}:is(${value2})~*)`,
         wrappingType: "rule",
         source: "peer"
       };
     }
     const value = m?.[1];
+    if (value?.startsWith("has-[") && value.endsWith("]")) {
+      return { selector: `&:is(${g}:has(${functionalArgument(value.slice(5, -1))}) ~ *)`, source: "peer" };
+    }
     if (value?.startsWith("has-")) {
       return {
-        selector: `&:is(:where(.peer):has(:${value.slice(4)})~*)`,
+        selector: `&:is(${g}:has(:${value.slice(4)})~*)`,
         source: "peer"
       };
     }
     if (value?.startsWith("not-")) {
       return {
-        selector: `&:is(:where(.peer):not(:${value.slice(4)})~*)`,
+        selector: `&:is(${g}${negated(value)} ~ *)`,
         source: "peer"
       };
     }
@@ -8171,7 +8540,7 @@ functionalModifier(
       if (pattern) {
         const key = pattern[1];
         return {
-          selector: `&:is(:where(.peer)[aria-${key}]~*)`,
+          selector: `&:is(${g}[aria-${key}]~*)`,
           source: "peer"
         };
       }
@@ -8181,19 +8550,19 @@ functionalModifier(
         const value2 = pattern[2];
         if (pattern[2]) {
           return {
-            selector: `&:is(:where(.peer)[aria-${key}="${value2}"]~*)`,
+            selector: `&:is(${g}[aria-${key}="${value2}"]~*)`,
             source: "peer"
           };
         } else {
           return {
-            selector: `&:is(:where(.peer)[aria-${key}]~*)`,
+            selector: `&:is(${g}[aria-${key}]~*)`,
             source: "peer"
           };
         }
       }
     }
     return m ? {
-      selector: `&:is(:where(.peer):${value}~*)`,
+      selector: `&:is(${g}:${value}~*)`,
       source: "peer"
     } : {
       selector,
@@ -8244,8 +8613,53 @@ functionalModifier(
   },
   void 0
 );
+const LEADING_AT = /^\s*@(media|container)\s+([^{]*)\{/;
+const LATE_MEDIA = /prefers-color-scheme|\bprint\b|forced-colors|orientation/;
+const MIN_W = /(?:min-width\s*:\s*|width\s*>=?\s*)([\d.]+)(px|rem|em)?/;
+const 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 container2 = kind === "container";
+  const min = MIN_W.exec(prelude);
+  if (min) return [container2 ? 4 : 2, toPx(min[1], min[2])];
+  const max = MAX_W.exec(prelude);
+  if (max) return [container2 ? 3 : 1, -toPx(max[1], max[2])];
+  if (!container2 && LATE_MEDIA.test(prelude)) return [5, 0];
+  return [0, 0];
+}
+function ruleSortKey(rule2) {
+  const key = [];
+  let rest = rule2;
+  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;
+}
+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;
+}
 class StylePartitionManager {
-  constructor(insertionPoint, maxRulesPerPartition = 50, styleIdPrefix = "barocss-style-partition-") {
+  constructor(insertionPoint, maxRulesPerPartition = 50, styleIdPrefix = "barocss-style-partition-", getCategory = (cls) => parseClassName(cls).utility?.category) {
     this.partitions = [];
     this.categoryPartitions = /* @__PURE__ */ new Map();
     this.partitionCounter = 0;
@@ -8256,12 +8670,30 @@ class StylePartitionManager {
     this.insertionPoint = insertionPoint;
     this.maxRulesPerPartition = maxRulesPerPartition;
     this.styleIdPrefix = styleIdPrefix;
+    this.getCategory = getCategory;
     this.initializeDefaultPartition();
   }
+  /**
+   * Insert `rule` at its Tailwind variant position within `partition` (#254):
+   * one insertRule at a binary-searched index, no sheet rewrite.
+   */
+  insertSorted(partition, rule2, key) {
+    const keys = partition.keys ??= [];
+    const index = upperBound(keys, key);
+    const sheet = partition.styleElement.sheet;
+    if (sheet && sheet.cssRules.length === keys.length) {
+      sheet.insertRule(this.escapeCssRule(rule2), index);
+      partition.styles.splice(index, 0, rule2);
+    } else {
+      partition.styles.splice(index, 0, rule2);
+      partition.styleElement.textContent = partition.styles.join("\n") + "\n";
+    }
+    keys.splice(index, 0, key);
+  }
   initializeDefaultPartition() {
     this.createNewPartition();
   }
-  createNewCategoryPartition(category) {
+  createNewCategoryPartition(category, atDocumentStart = false) {
     const newPartition = {
       id: this.styleIdPrefix + `-${category}`,
       styles: [],
@@ -8270,7 +8702,12 @@ class StylePartitionManager {
     newPartition.styleElement.id = newPartition.id;
     newPartition.styleElement.setAttribute("data-barocss", "partition");
     newPartition.styleElement.setAttribute("data-category", category);
-    this.insertionPoint.appendChild(newPartition.styleElement);
+    const head = this.insertionPoint.ownerDocument?.head;
+    if (atDocumentStart && head) {
+      head.insertBefore(newPartition.styleElement, head.firstChild);
+    } else {
+      this.insertionPoint.appendChild(newPartition.styleElement);
+    }
     this.categoryPartitions.set(category, newPartition);
     return newPartition;
   }
@@ -8324,20 +8761,21 @@ class StylePartitionManager {
     if (this.hasRule(rule2)) {
       return false;
     }
-    if (this.currentPartition.styles.length >= this.maxRulesPerPartition) {
-      this.createNewPartition();
+    const key = ruleSortKey(rule2);
+    let partitionIndex = this.partitions.findIndex((p) => {
+      const keys = p.keys;
+      return !!keys && keys.length > 0 && compareKeys(keys[keys.length - 1], key) > 0;
+    });
+    if (partitionIndex === -1) {
+      if (this.currentPartition.styles.length >= this.maxRulesPerPartition) {
+        this.createNewPartition();
+      }
+      partitionIndex = this.partitions.length - 1;
     }
-    const currentPartition = this.currentPartition;
-    const partitionIndex = this.partitions.length - 1;
+    const partition = this.partitions[partitionIndex];
     try {
-      const sheet = currentPartition.styleElement.sheet;
-      if (sheet) {
-        sheet.insertRule(this.escapeCssRule(rule2), sheet.cssRules.length);
-      } else {
-        currentPartition.styleElement.textContent += rule2 + "\n";
-      }
+      this.insertSorted(partition, rule2, key);
       this.setRuleCache(rule2, partitionIndex);
-      currentPartition.styles.push(rule2);
       return true;
     } catch (error) {
       console.warn(
@@ -8356,12 +8794,7 @@ class StylePartitionManager {
       categoryPartition = this.createNewCategoryPartition(category);
     }
     try {
-      const sheet = categoryPartition.styleElement.sheet;
-      if (sheet) {
-        sheet.insertRule(this.escapeCssRule(rule2), sheet.cssRules.length);
-      } else {
-        categoryPartition.styleElement.textContent += rule2 + "\n";
-      }
+      this.insertSorted(categoryPartition, rule2, ruleSortKey(rule2));
     } catch (error) {
       console.warn(
         `[StylePartitionManager] Failed to insert rule in category: ${category} ${rule2}`,
@@ -8370,7 +8803,6 @@ class StylePartitionManager {
       return false;
     }
     this.setCategoryRuleCache(rule2, category);
-    categoryPartition.styles.push(rule2);
     return true;
   }
   addRootRules(rules) {
@@ -8400,8 +8832,7 @@ class StylePartitionManager {
     let success = 0;
     let failed = 0;
     for (const rule2 of rules) {
-      const parsedResult = parseResultCache.get(rule2.cls);
-      const category = parsedResult?.utility?.category;
+      const category = this.getCategory(rule2.cls);
       if (category) {
         for (const css of rule2.cssList) {
           this.addCategoryRule(css, category);
@@ -8418,6 +8849,41 @@ class StylePartitionManager {
     }
     return { success, failed };
   }
+  /**
+   * Remove one generated rule (#269 GC). Keeps `styles`, the #254 `keys` and the
+   * sheet's cssRules parallel: one deleteRule at the rule's index, or a text
+   * rebuild when the sheet isn't solely ours / has no CSSOM. Returns whether
+   * the rule was found.
+   */
+  removeRule(rule2, category) {
+    let partition;
+    if (category) {
+      if (this.classToCategoryPartitionMap.get(rule2) !== category) return false;
+      partition = this.categoryPartitions.get(category);
+    } else {
+      const partitionIndex = this.classToPartitionMap.get(rule2);
+      partition = partitionIndex === void 0 ? void 0 : this.partitions[partitionIndex];
+    }
+    if (!partition) return false;
+    const index = partition.styles.indexOf(rule2);
+    if (index === -1) return false;
+    const sheet = partition.styleElement.sheet;
+    const inSync = !!sheet && sheet.cssRules.length === partition.styles.length;
+    partition.styles.splice(index, 1);
+    partition.keys?.splice(index, 1);
+    if (inSync && sheet) {
+      sheet.deleteRule(index);
+    } else {
+      partition.styleElement.textContent = partition.styles.length ? partition.styles.join("\n") + "\n" : "";
+    }
+    if (category) this.classToCategoryPartitionMap.delete(rule2);
+    else this.classToPartitionMap.delete(rule2);
+    return true;
+  }
+  /** Number of generated (non-root, non-preflight) rules currently held. */
+  get ruleCount() {
+    return this.classToPartitionMap.size + this.classToCategoryPartitionMap.size;
+  }
   /**
    * 특정 규칙이 어느 파티션에 있는지 찾기
    */
@@ -8432,12 +8898,12 @@ class StylePartitionManager {
     }
     return null;
   }
-  updateRuleContent(category, ruleContent) {
+  updateRuleContent(category, ruleContent, atDocumentStart = false) {
     const partition = this.getCategoryPartition(category);
     if (partition) {
       partition.styleElement.textContent = ruleContent;
     } else {
-      const newPartition = this.createNewCategoryPartition(category);
+      const newPartition = this.createNewCategoryPartition(category, atDocumentStart);
       console.log(`[StylePartitionManager] Created new partition for category: ${category}`);
       newPartition.styleElement.textContent = ruleContent;
     }
@@ -8465,8 +8931,8 @@ class StylePartitionManager {
 }
 function normalizeClassName(className) {
   if (!className) return "";
-  if (className instanceof SVGAnimatedString) {
-    return className.baseVal.toString();
+  if (typeof className === "object" && typeof className.baseVal === "string") {
+    return className.baseVal;
   }
   return className.toString();
 }
@@ -8481,10 +8947,15 @@ class ChangeDetector {
    * @param incrementalParser - IncrementalParser instance for class processing
    * @param BrowserRuntime - Optional BrowserRuntime instance for CSS injection
    */
-  constructor(incrementalParser, BrowserRuntime2) {
+  constructor(incrementalParser, BrowserRuntime2, getCategory = (cls) => parseClassName(cls).utility?.category) {
     this.observer = null;
+    this.gc = null;
     this.incrementalParser = incrementalParser;
     this.BrowserRuntime = BrowserRuntime2;
+    this.getCategory = getCategory;
+  }
+  setGc(gc) {
+    this.gc = gc;
   }
   setParser(parser) {
     this.incrementalParser = parser;
@@ -8512,10 +8983,20 @@ class ChangeDetector {
     if (this.observer) {
       this.observer.disconnect();
     }
+    this.gc?.setRoot(root);
     this.observer = new MutationObserver((mutations) => {
       const newClasses = /* @__PURE__ */ new Set();
+      const gc = this.gc;
       mutations.forEach((mutation) => {
-        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+        if (gc) {
+          if (mutation.type === "attributes") {
+            gc.reconcile(mutation.target);
+          } else if (mutation.type === "childList") {
+            mutation.removedNodes.forEach((node) => gc.reconcileTree(node));
+            mutation.addedNodes.forEach((node) => gc.reconcileTree(node));
+          }
+        }
+        if (mutation.type === "attributes" && mutation.attributeName === "class" && root.contains(mutation.target)) {
           const target = mutation.target;
           if (target.className) {
             const classes = normalizeClassNameList(target.className);
@@ -8528,9 +9009,10 @@ class ChangeDetector {
         }
         if (mutation.type === "childList") {
           mutation.addedNodes.forEach((node) => {
-            if (node instanceof Element) {
-              this.processElement(node, newClasses);
-              node.querySelectorAll("[class]").forEach((el) => {
+            if (node.nodeType === Node.ELEMENT_NODE && root.contains(node)) {
+              const element = node;
+              this.processElement(element, newClasses);
+              element.querySelectorAll("[class]").forEach((el) => {
                 this.processElement(el, newClasses);
               });
             }
@@ -8541,7 +9023,10 @@ class ChangeDetector {
         const classesArray = Array.from(newClasses);
         const results = this.incrementalParser.processClasses(classesArray);
         this.BrowserRuntime?.applyParseResults(results);
+      } else {
+        this.BrowserRuntime?.applyParseResults([]);
       }
+      gc?.afterBatch();
     });
     this.observer.observe(root, {
       attributes: true,
@@ -8581,11 +9066,13 @@ class ChangeDetector {
     if (existingClasses.size > 0) {
       const classes = Array.from(existingClasses);
       const results = this.incrementalParser.processClasses(classes);
-      const layoutResults = results.filter((result) => parseResultCache.get(result.cls)?.utility?.category === "layout");
-      const nonLayoutResults = results.filter((result) => parseResultCache.get(result.cls)?.utility?.category !== "layout");
+      const layoutResults = results.filter((result) => this.getCategory(result.cls) === "layout");
+      const nonLayoutResults = results.filter((result) => this.getCategory(result.cls) !== "layout");
       this.BrowserRuntime?.applyParseResults(layoutResults);
       options?.onReady?.();
       this.BrowserRuntime?.applyParseResults(nonLayoutResults);
+    } else {
+      options?.onReady?.();
     }
   }
   /**
@@ -8624,22 +9111,184 @@ class ChangeDetector {
     }
   }
 }
+function unescapeCssIdent(s) {
+  return s.replace(/\\([0-9a-fA-F]{1,6})\s?|\\(.)/g, (_m, hex, ch) => hex ? String.fromCodePoint(parseInt(hex, 16)) : ch);
+}
+const LEADING_CLASS = /^\s*\.((?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w-]|[^\x00-\x7F])+)/;
+function splitTopLevel(sel) {
+  const parts = [];
+  let depth = 0, start = 0;
+  for (let i = 0; i < sel.length; i++) {
+    const c = sel[i];
+    if (c === "\\") i++;
+    else if (c === "(" || c === "[") depth++;
+    else if (c === ")" || c === "]") depth--;
+    else if (c === "," && depth === 0) {
+      parts.push(sel.slice(start, i));
+      start = i + 1;
+    }
+  }
+  parts.push(sel.slice(start));
+  return parts;
+}
+function collectLeadingClasses(rules, out = /* @__PURE__ */ new Set()) {
+  for (const rule2 of Array.from(rules)) {
+    const selectorText = rule2.selectorText;
+    if (typeof selectorText === "string") {
+      for (const part of splitTopLevel(selectorText)) {
+        const m = LEADING_CLASS.exec(part);
+        if (m) out.add(unescapeCssIdent(m[1]));
+      }
+    }
+    const inner = rule2.cssRules;
+    if (inner && inner.length) collectLeadingClasses(inner, out);
+  }
+  return out;
+}
+class ClassGc {
+  constructor(host, graceMs, maxRules, now = () => Date.now()) {
+    this.host = host;
+    this.graceMs = graceMs;
+    this.maxRules = maxRules;
+    this.now = now;
+    this.counts = /* @__PURE__ */ new Map();
+    this.counted = /* @__PURE__ */ new WeakMap();
+    this.candidates = /* @__PURE__ */ new Map();
+    this.timer = null;
+    this.root = null;
+  }
+  /** Start counting for a new root: count every element currently inside it. */
+  setRoot(root) {
+    this.counts.clear();
+    this.counted = /* @__PURE__ */ new WeakMap();
+    this.candidates.clear();
+    this.cancel();
+    this.root = root;
+    this.reconcileTree(root);
+  }
+  count(cls) {
+    return this.counts.get(cls) ?? 0;
+  }
+  /** Re-count `el` and (optionally) all its descendants from their current state. */
+  reconcileTree(node) {
+    if (node.nodeType !== 1) return;
+    const el = node;
+    this.reconcile(el);
+    el.querySelectorAll("[class]").forEach((child) => this.reconcile(child));
+  }
+  reconcile(el) {
+    const root = this.root;
+    const live = !!root && root.contains(el);
+    const next = live ? Array.from(new Set(normalizeClassNameList(el.getAttribute("class")))) : [];
+    const prev = this.counted.get(el);
+    if (!prev && next.length === 0) return;
+    const prevSet = new Set(prev ?? []);
+    const nextSet = new Set(next);
+    for (const cls of nextSet) {
+      if (prevSet.has(cls)) continue;
+      const c = (this.counts.get(cls) ?? 0) + 1;
+      this.counts.set(cls, c);
+      this.candidates.delete(cls);
+    }
+    for (const cls of prevSet) {
+      if (nextSet.has(cls)) continue;
+      const c = (this.counts.get(cls) ?? 0) - 1;
+      if (c > 0) {
+        this.counts.set(cls, c);
+      } else {
+        this.counts.delete(cls);
+        this.candidates.delete(cls);
+        this.candidates.set(cls, this.now());
+      }
+    }
+    if (next.length) this.counted.set(el, next);
+    else this.counted.delete(el);
+  }
+  /** Call after a mutation batch has been counted and its classes inserted. */
+  afterBatch() {
+    if (this.candidates.size === 0) return;
+    if (this.host.cachedCount() > this.maxRules) {
+      this.schedule(0);
+    } else {
+      this.schedule(this.graceMs);
+    }
+  }
+  schedule(delay) {
+    if (this.timer !== null) {
+      if (delay > 0) return;
+      clearTimeout(this.timer);
+    }
+    this.timer = setTimeout(() => {
+      this.timer = null;
+      this.sweep();
+    }, delay);
+  }
+  /** Reclaim candidates whose grace period elapsed (plus LRU overflow). Public for tests. */
+  sweep() {
+    const now = this.now();
+    const overflow = Math.max(0, this.host.cachedCount() - this.maxRules);
+    const doomed = [];
+    let evicted = 0;
+    for (const [cls, since] of this.candidates) {
+      const expired = now - since >= this.graceMs;
+      if (!expired && evicted >= overflow) continue;
+      this.candidates.delete(cls);
+      if (this.count(cls) > 0 || this.inDom(cls) || this.host.isPermanent(cls)) continue;
+      doomed.push(cls);
+      if (!expired) evicted++;
+    }
+    if (doomed.length) this.host.reclaim(doomed);
+    if (this.candidates.size) this.schedule(this.graceMs);
+  }
+  inDom(cls) {
+    const root = this.root;
+    if (!root) return false;
+    const doc = root.ownerDocument ?? document;
+    return root.classList.contains(cls) || doc.documentElement.classList.contains(cls) || doc.getElementsByClassName(cls).length > 0;
+  }
+  cancel() {
+    if (this.timer !== null) clearTimeout(this.timer);
+    this.timer = null;
+  }
+  stats() {
+    return { trackedClasses: this.counts.size, candidates: this.candidates.size };
+  }
+}
+const LAYER_ORDER = "@layer theme, base, components, utilities;";
 class BrowserRuntime {
   constructor(options = {}) {
     this.cache = /* @__PURE__ */ new Map();
     this.rootCache = /* @__PURE__ */ new Set();
     this.isDestroyed = false;
+    this.existing = null;
+    this.existingSheetCount = -1;
+    this.pinned = /* @__PURE__ */ new Set();
+    this.gc = null;
+    this.reclaimedCount = 0;
+    this.getCategory = (cls) => parseClassName(cls, this.context).utility?.category;
     const defaultConfig = {};
     this.options = {
       config: options.config || defaultConfig,
       styleId: options.styleId || "barocss-runtime",
       insertionPoint: options.insertionPoint || "head",
-      maxRulesPerPartition: options.maxRulesPerPartition || 50
+      maxRulesPerPartition: options.maxRulesPerPartition || 50,
+      skipExisting: options.skipExisting ?? false,
+      gc: options.gc ?? true,
+      gcGraceMs: options.gcGraceMs ?? 3e3,
+      maxRules: options.maxRules ?? Infinity
     };
     this.context = createContext(this.options.config);
     this.incrementalParser = new IncrementalParser(this.context);
-    this.changeDetector = new ChangeDetector(this.incrementalParser, this);
-    this.stylePartitionManager = new StylePartitionManager(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`);
+    this.changeDetector = new ChangeDetector(this.incrementalParser, this, this.getCategory);
+    this.stylePartitionManager = new StylePartitionManager(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`, this.getCategory);
+    if (this.options.gc) {
+      this.gc = new ClassGc({
+        reclaim: (classes) => this.reclaim(classes),
+        isPermanent: (cls) => this.isPermanent(cls),
+        cachedCount: () => this.cache.size
+      }, this.options.gcGraceMs, this.options.maxRules);
+      this.changeDetector.setGc(this.gc);
+    }
     this.init();
   }
   // Debugging and logging helpers
@@ -8656,9 +9305,17 @@ class BrowserRuntime {
     this.ensureCssVars();
   }
   injectPreflightCSS() {
-    if (this.options.config.preflight) {
-      const preflightCSS = this.context.getPreflightCSS(this.options.config.preflight);
-      this.stylePartitionManager.updateRuleContent("preflight", preflightCSS);
+    const level = this.options.config.preflight ?? true;
+    if (level) {
+      const preflightCSS = this.context.getPreflightCSS(level);
+      this.stylePartitionManager.updateRuleContent(
+        "preflight",
+        `${LAYER_ORDER}
+@layer base {
+${preflightCSS}
+}`,
+        true
+      );
     }
   }
   ensureCssVars() {
@@ -8667,7 +9324,7 @@ class BrowserRuntime {
     this.stylePartitionManager.updateRuleContent("css-vars", cssVars);
   }
   getInsertionPoint() {
-    if (this.options.insertionPoint instanceof HTMLElement) {
+    if (typeof this.options.insertionPoint !== "string") {
       return this.options.insertionPoint;
     }
     switch (this.options.insertionPoint) {
@@ -8683,7 +9340,8 @@ class BrowserRuntime {
    */
   addClass(classes) {
     if (this.isDestroyed) return;
-    const classList = this.normalizeClasses(classes);
+    const classList = this.normalizeClasses(classes).filter(Boolean);
+    classList.forEach((cls) => this.pinned.add(cls));
     this.processClasses(classList);
   }
   /**
@@ -8712,6 +9370,11 @@ class BrowserRuntime {
       results = [...existingResults, ...results];
       results.forEach((result) => this.incrementalParser.markProcessed(result.cls));
     }
+    if (this.options.skipExisting && results.length > 0 && typeof document !== "undefined") {
+      const existing = this.getExistingClasses();
+      results = results.filter((result) => !existing.has(result.cls));
+    }
+    if (results.length === 0) return;
     const cssRules = [];
     const rootCssRules = [];
     for (const result of results) {
@@ -8739,6 +9402,58 @@ class BrowserRuntime {
       rootCssCount: rootCssRules.length
     });
   }
+  /** #269: a class that must never be reclaimed. */
+  isPermanent(cls) {
+    if (this.pinned.has(cls)) return true;
+    if (typeof document === "undefined") return true;
+    return this.getExistingClasses().has(cls);
+  }
+  /**
+   * #269: delete the generated rules of classes no live element uses. Root/@property rules stay
+   * (they are shared and harmless); a rule text another cached class still emits is kept.
+   */
+  reclaim(classes) {
+    if (this.isDestroyed) return;
+    const victims = classes.filter((cls) => this.cache.has(cls));
+    if (victims.length === 0) return;
+    const results = victims.map((cls) => this.cache.get(cls));
+    victims.forEach((cls) => {
+      this.cache.delete(cls);
+      this.incrementalParser.unmarkProcessed(cls);
+    });
+    const stillUsed = /* @__PURE__ */ new Set();
+    for (const result of this.cache.values()) result.cssList.forEach((css) => stillUsed.add(css));
+    for (const result of results) {
+      const category = this.getCategory(result.cls);
+      for (const css of result.cssList) {
+        if (!stillUsed.has(css)) this.stylePartitionManager.removeRule(css, category);
+      }
+    }
+    this.reclaimedCount += victims.length;
+  }
+  /** Class names defined by the page's own stylesheets (BaroCSS's sheets and cross-origin sheets excluded). */
+  getExistingClasses() {
+    const own = new Set(Array.from(document.querySelectorAll("style[data-barocss]"), (s) => s.sheet));
+    const sheets = Array.from(document.styleSheets).filter((sheet) => {
+      if (own.has(sheet)) return false;
+      const owner = sheet.ownerNode;
+      return !(owner && typeof owner.hasAttribute === "function" && (owner.hasAttribute("data-barocss") || (owner.id || "").startsWith(this.options.styleId)));
+    });
+    if (this.existing && sheets.length === this.existingSheetCount) return this.existing;
+    const out = /* @__PURE__ */ new Set();
+    for (const sheet of sheets) {
+      let rules;
+      try {
+        rules = sheet.cssRules;
+      } catch {
+        continue;
+      }
+      collectLeadingClasses(rules, out);
+    }
+    this.existing = out;
+    this.existingSheetCount = sheets.length;
+    return out;
+  }
   /**
    * MutationObserver instance method to automatically call addClass when class attributes change in DOM
    */
@@ -8757,7 +9472,7 @@ class BrowserRuntime {
     return css;
   }
   getAllCss() {
-    const all = Array.from(this.cache.values()).flatMap((result) => result.cssList).join("\n");
+    const all = [...this.rootCache, ...Array.from(this.cache.values()).flatMap((result) => result.cssList)].join("\n");
     return all;
   }
   getClasses() {
@@ -8772,7 +9487,10 @@ class BrowserRuntime {
     return {
       runtime: {
         cachedClasses: this.cache.size,
-        rootCacheSize: this.rootCache.size
+        rootCacheSize: this.rootCache.size,
+        ruleCount: this.stylePartitionManager.ruleCount,
+        reclaimedClasses: this.reclaimedCount,
+        gc: this.gc?.stats() ?? null
       },
       ast: incremental.cacheStats.ast,
       incremental
@@ -8788,7 +9506,7 @@ class BrowserRuntime {
     clearAstCache(this.context);
     this.incrementalParser.clearProcessed();
     this.stylePartitionManager.cleanup();
-    this.stylePartitionManager = new StylePartitionManager(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`);
+    this.stylePartitionManager = new StylePartitionManager(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`, this.getCategory);
     this.injectPreflightCSS();
     this.ensureCssVars();
   }
@@ -8798,7 +9516,7 @@ class BrowserRuntime {
     this.rootCache.clear();
     this.incrementalParser.clearProcessed();
     this.stylePartitionManager.cleanup();
-    this.stylePartitionManager = new StylePartitionManager(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`);
+    this.stylePartitionManager = new StylePartitionManager(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`, this.getCategory);
     this.injectPreflightCSS();
     this.ensureCssVars();
   }
@@ -8826,6 +9544,7 @@ class BrowserRuntime {
   destroy() {
     if (this.isDestroyed) return;
     this.changeDetector.disconnect();
+    this.gc?.cancel();
     this.stylePartitionManager.cleanup();
     this.cache.clear();
     this.rootCache.clear();
@@ -8843,13 +9562,22 @@ class BrowserRuntime {
   }
 }
 let runtime = null;
-function getRuntime(options) {
-  if (!runtime) {
+let runtimeConfig;
+function getRuntime(options = {}) {
+  if (!runtime || runtime.getStats().isDestroyed) {
     runtime = new BrowserRuntime(options);
+    runtimeConfig = options.config;
+  } else if (options.config && options.config !== runtimeConfig) {
+    runtime.updateConfig(options.config);
+    runtimeConfig = options.config;
   }
   return runtime;
 }
 function baroBoot({ loadingClassName = "baro-boot", ...options } = {}) {
+  if (!document.body) {
+    document.addEventListener("DOMContentLoaded", () => baroBoot({ loadingClassName, ...options }), { once: true });
+    return;
+  }
   const startClassName = `${loadingClassName}-doing`;
   const endClassName = `${loadingClassName}-done`;
   try {
@@ -8860,18 +9588,87 @@ function baroBoot({ loadingClassName = "baro-boot", ...options } = {}) {
       document.body.classList.add(endClassName);
     } });
   } catch (error) {
+    document.body?.classList.remove(startClassName);
     console.error("BaroCSS boot failed:", error);
   }
 }
 const baroStart = baroBoot;
+function collectJsonRenderClassNames(spec) {
+  if (!spec || typeof spec !== "object" || Array.isArray(spec)) return [];
+  const elements = spec.elements;
+  if (!elements || typeof elements !== "object" || Array.isArray(elements)) return [];
+  const classes = /* @__PURE__ */ new Set();
+  for (const key of Object.keys(elements)) {
+    const element = elements[key];
+    if (!element || typeof element !== "object" || Array.isArray(element)) continue;
+    const props = element.props;
+    if (!props || typeof props !== "object" || Array.isArray(props)) continue;
+    const className = props.className;
+    if (typeof className !== "string") continue;
+    for (const cls of className.split(/\s+/)) {
+      if (cls) classes.add(cls);
+    }
+  }
+  return Array.from(classes);
+}
+function preloadJsonRenderClasses(spec, runtime2) {
+  const classes = collectJsonRenderClassNames(spec);
+  if (classes.length > 0) runtime2.addClass(classes);
+}
+const SHADCN_COLOR_NAMES = [
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "border",
+  "input",
+  "ring",
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5",
+  "sidebar",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring"
+];
+const shadcnTheme = {
+  colors: Object.fromEntries(SHADCN_COLOR_NAMES.map((n) => [n, `var(--${n})`])),
+  borderRadius: {
+    sm: "calc(var(--radius) - 4px)",
+    md: "calc(var(--radius) - 2px)",
+    lg: "var(--radius)",
+    xl: "calc(var(--radius) + 4px)"
+  }
+};
 export {
   BrowserRuntime,
   ChangeDetector,
+  LAYER_ORDER,
   StylePartitionManager,
   baroBoot,
   baroStart,
+  collectJsonRenderClassNames,
   getRuntime,
   normalizeClassName,
-  normalizeClassNameList
+  normalizeClassNameList,
+  preloadJsonRenderClasses,
+  shadcnTheme
 };
 //# sourceMappingURL=barocss.js.map