@barocss/kit 0.4.0 → 0.6.0

package/dist/index.js

@@ -34,6 +34,19 @@ function property(name, initialValue, syntax, source) {
   }
   return atRule("property", name, nodes, source);
 }
+let debugEnabled = false;
+function setDebug(enabled) {
+  debugEnabled = enabled;
+}
+function isDebug() {
+  return debugEnabled;
+}
+function debugLog(...args) {
+  if (debugEnabled) console.log(...args);
+}
+function debugWarn(...args) {
+  if (debugEnabled) console.warn(...args);
+}
 class AstCache {
   constructor() {
     this.cache = /* @__PURE__ */ new Map();
@@ -142,7 +155,7 @@ function clearAllCaches() {
   parseResultCache.clear();
   utilityCache.clear();
   resetContextCaches?.();
-  console.log("[clearAllCaches] All caches cleared");
+  debugLog("[clearAllCaches] All caches cleared");
 }
 class WeakCache {
   constructor() {
@@ -223,7 +236,12 @@ function registerUtility(util, ctx) {
   const state = ctx && getContextState(ctx);
   if (ctx && !state) throw new Error("Utility registration requires a context from createContext");
   (state?.utilities || utilityRegistry).push(util);
-  if (ctx) clearContextCaches(ctx);
+  if (ctx) {
+    clearContextCaches(ctx);
+  } else {
+    parseResultCache.clear();
+    utilityCache.clear();
+  }
 }
 function getUtility(ctx) {
   return ctx && getContextState(ctx)?.utilities || utilityRegistry;
@@ -319,6 +337,11 @@ function staticUtility(name, decls, opts, ctx) {
     priority: opts?.priority
   }, ctx);
 }
+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,
@@ -337,7 +360,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;
@@ -387,14 +410,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);
@@ -410,6 +438,62 @@ function functionalUtility(opts, ctx) {
     priority: opts.priority
   }, ctx);
 }
+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 = "";
@@ -476,6 +560,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);
@@ -491,6 +578,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) {
@@ -524,6 +621,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;
@@ -548,6 +730,11 @@ function parseUtility(value, ctx) {
   let opacity = "";
   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;
   }
@@ -603,6 +790,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;
@@ -611,7 +800,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 = [];
@@ -633,6 +822,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};`;
@@ -664,6 +854,7 @@ function astToCss(ast, baseSelector, opts, _indent = "") {
             }).join(", ");
           }
         }
+        if (!isSafePrelude(selector)) return "";
         if (minify) {
           const css = `${indent}${selector}{${astToCss(
             node.nodes,
@@ -688,6 +879,7 @@ ${astToCss(
         }
       }
       case "style-rule": {
+        if (!isSafePrelude(node.selector)) return "";
         if (minify) {
           const css = `${indent}${node.selector} {${astToCss(
             node.nodes,
@@ -712,6 +904,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,
@@ -740,13 +933,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,
@@ -757,26 +950,270 @@ ${astToCss(
   }
   return finalResult;
 }
-function rootToCss(nodes) {
+function rootToCss(nodes, opts) {
+  const minify = opts?.minify === true;
   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(minify ? `${node.prop}:${node.value};` : `${node.prop}: ${node.value};`);
+      }
+    } else if (node.type === "at-rule" && isSafePrelude(node.name) && isSafePrelude(node.params)) {
+      if (minify) {
+        const body = node.nodes.filter((child) => child.type === "decl" && isSafeDecl(child.prop, child.value)).map((child) => child.type === "decl" ? `${child.prop}:${child.value};` : "").join("");
+        list.push(`@${node.name} ${node.params}{${body}}`);
+      } else {
+        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 list.join(minify ? "" : "\n");
+  }).join(minify ? "" : "\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(colors) {
+  if (!colors) 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(colors);
+  return result;
+}
+function boxShadowToCssVars(boxShadow) {
+  if (!boxShadow) return {};
+  const result = {};
+  for (const key in boxShadow) {
+    result[`--shadow-${key}`] = boxShadow[key];
+  }
+  return result;
+}
+function fontSizeToCssVars(fontSize) {
+  if (!fontSize) return {};
+  const result = {};
+  for (const key in fontSize) {
+    const value = fontSize[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(fontWeight) {
+  if (!fontWeight) return {};
+  const result = {};
+  for (const key in fontWeight) {
+    result[`--font-weight-${key}`] = fontWeight[key];
+  }
+  return result;
+}
+function fontFamilyToCssVars(fontFamily) {
+  if (!fontFamily) return {};
+  const result = {};
+  for (const key in fontFamily) {
+    const value = fontFamily[key];
+    if (Array.isArray(value)) {
+      result[`--font-${key}`] = value.join(", ");
+    } else {
+      result[`--font-${key}`] = value;
+    }
+  }
+  return result;
+}
+function letterSpacingToCssVars(letterSpacing) {
+  if (!letterSpacing) return {};
+  const result = {};
+  for (const key in letterSpacing) {
+    result[`--letter-spacing-${key}`] = letterSpacing[key];
+  }
+  return result;
+}
+function spacingToCssVars(spacing) {
+  if (!spacing) return {};
+  const result = {};
+  for (const key in spacing) {
+    result[`--spacing-${escapeKey(key)}`] = spacing[key];
+  }
+  return result;
+}
+function borderRadiusToCssVars(borderRadius) {
+  if (!borderRadius) return {};
+  const result = {};
+  for (const key in borderRadius) {
+    result[`--radius-${escapeKey(key)}`] = borderRadius[key];
+  }
+  return result;
+}
+function zIndexToCssVars(zIndex) {
+  if (!zIndex) return {};
+  const result = {};
+  for (const key in zIndex) {
+    result[`--z-${escapeKey(key)}`] = String(zIndex[key]);
+  }
+  return result;
+}
+function opacityToCssVars(opacity) {
+  if (!opacity) return {};
+  const result = {};
+  for (const key in opacity) {
+    result[`--opacity-${escapeKey(key)}`] = String(opacity[key]);
+  }
+  return result;
+}
+function animationToCssVars(animations) {
+  if (!animations) return {};
+  const result = {};
+  for (const key in animations) {
+    result[`--animate-${escapeKey(key)}`] = animations[key];
+  }
+  return result;
+}
+function keyframesToCss(keyframes) {
+  if (!keyframes) return "";
+  let css = "";
+  for (const name in keyframes) {
+    const frames = keyframes[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(transitionDuration) {
+  const result = {};
+  for (const key in transitionDuration) {
+    if (key === "DEFAULT") {
+      result[`--default-transition-duration`] = transitionDuration[key];
+    } else {
+      result[`--transition-duration-${escapeKey(key)}`] = transitionDuration[key];
+    }
+  }
+  return result;
+}
+function transitionDelayToCssVars(transitionDelay) {
+  const result = {};
+  for (const key in transitionDelay) {
+    if (key === "DEFAULT") {
+      result[`--default-transition-delay`] = transitionDelay[key];
+    } else {
+      result[`--transition-delay-${escapeKey(key)}`] = transitionDelay[key];
+    }
+  }
+  return result;
+}
+function blurToCssVars(blur) {
+  const result = {};
+  for (const key in blur) {
+    if (key === "DEFAULT") {
+      result[`--default-blur`] = blur[key];
+    } else {
+      result[`--blur-${escapeKey(key)}`] = blur[key];
+    }
+  }
+  return result;
+}
+function containerToCssVars(container) {
+  const result = {};
+  for (const key in container) {
+    result[`--container-${escapeKey(key)}`] = container[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 = [];
@@ -932,8 +1369,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) {
@@ -952,33 +1389,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({
@@ -1055,7 +1499,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;
 }
@@ -1096,7 +1540,7 @@ function generateCss(classList, ctx, opts) {
     });
     const result = css;
     if (!result || result.trim() === "") {
-      console.warn("[generateCss] Empty CSS generated for class:", {
+      debugWarn("[generateCss] Empty CSS generated for class:", {
         class: cls,
         ast: cleanAst,
         hasStyleRule,
@@ -1106,17 +1550,17 @@ function generateCss(classList, ctx, opts) {
     }
     return result;
   }).join(opts?.minify ? "" : "\n");
-  const rootRules = [...new Set(allAtRootNodes.filter((node) => node.type === "at-rule").map((node) => rootToCss([node])))];
-  const rootDeclarations = [...new Set(allAtRootNodes.filter((node) => node.type === "decl").map((node) => rootToCss([node])))];
+  const rootRules = [...new Set(allAtRootNodes.filter((node) => node.type === "at-rule").map((node) => rootToCss([node], { minify: opts?.minify })))];
+  const rootDeclarations = [...new Set(allAtRootNodes.filter((node) => node.type === "decl").map((node) => rootToCss([node], { minify: opts?.minify })).filter((decl2) => decl2 !== ""))];
   const rootCss = [
     ...rootRules,
-    ...rootDeclarations.length ? [`:root,:host {${rootDeclarations.join("\n")}}`] : []
+    ...rootDeclarations.length ? [`:root,:host${opts?.minify ? "" : " "}{${rootDeclarations.join(opts?.minify ? "" : "\n")}}`] : []
   ].join(opts?.minify ? "" : "\n");
   if (allAtRootNodes.length > 0) {
-    console.log("[generateCss] All collected atRoot nodes:", allAtRootNodes);
+    debugLog("[generateCss] All collected atRoot nodes:", allAtRootNodes);
   }
   if (!results || results.trim() === "") {
-    console.warn("[generateCss] Empty final result:", {
+    debugWarn("[generateCss] Empty final result:", {
       classList,
       results,
       allAtRootNodes
@@ -1259,7 +1703,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 });
@@ -1280,7 +1724,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;
     }
   }
@@ -1426,6 +1870,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
@@ -1433,223 +1886,17 @@ class IncrementalParser {
   processClassesSync(classes) {
     this.applyClasses(classes);
   }
-  /**
-   * Returns all currently processed class names
-   * 
-   * This method is useful for debugging and monitoring purposes,
-   * providing visibility into which classes have been processed.
-   * 
-   * @returns Array of all processed class names
-   */
-  getProcessedClasses() {
-    return Array.from(this.processedClasses);
-  }
-}
-function escapeKey(key) {
-  return key.replace(".", "\\.");
-}
-function colorsToCssVars(colors) {
-  if (!colors) 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(colors);
-  return result;
-}
-function boxShadowToCssVars(boxShadow) {
-  if (!boxShadow) return {};
-  const result = {};
-  for (const key in boxShadow) {
-    result[`--shadow-${key}`] = boxShadow[key];
-  }
-  return result;
-}
-function fontSizeToCssVars(fontSize) {
-  if (!fontSize) return {};
-  const result = {};
-  for (const key in fontSize) {
-    const value = fontSize[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(fontWeight) {
-  if (!fontWeight) return {};
-  const result = {};
-  for (const key in fontWeight) {
-    result[`--font-weight-${key}`] = fontWeight[key];
-  }
-  return result;
-}
-function fontFamilyToCssVars(fontFamily) {
-  if (!fontFamily) return {};
-  const result = {};
-  for (const key in fontFamily) {
-    const value = fontFamily[key];
-    if (Array.isArray(value)) {
-      result[`--font-${key}`] = value.join(", ");
-    } else {
-      result[`--font-${key}`] = value;
-    }
-  }
-  return result;
-}
-function letterSpacingToCssVars(letterSpacing) {
-  if (!letterSpacing) return {};
-  const result = {};
-  for (const key in letterSpacing) {
-    result[`--letter-spacing-${key}`] = letterSpacing[key];
-  }
-  return result;
-}
-function spacingToCssVars(spacing) {
-  if (!spacing) return {};
-  const result = {};
-  for (const key in spacing) {
-    result[`--spacing-${escapeKey(key)}`] = spacing[key];
-  }
-  return result;
-}
-function borderRadiusToCssVars(borderRadius) {
-  if (!borderRadius) return {};
-  const result = {};
-  for (const key in borderRadius) {
-    result[`--radius-${escapeKey(key)}`] = borderRadius[key];
-  }
-  return result;
-}
-function zIndexToCssVars(zIndex) {
-  if (!zIndex) return {};
-  const result = {};
-  for (const key in zIndex) {
-    result[`--z-${escapeKey(key)}`] = String(zIndex[key]);
-  }
-  return result;
-}
-function opacityToCssVars(opacity) {
-  if (!opacity) return {};
-  const result = {};
-  for (const key in opacity) {
-    result[`--opacity-${escapeKey(key)}`] = String(opacity[key]);
-  }
-  return result;
-}
-function animationToCssVars(animations) {
-  if (!animations) return {};
-  const result = {};
-  for (const key in animations) {
-    result[`--animate-${escapeKey(key)}`] = animations[key];
-  }
-  return result;
-}
-function keyframesToCss(keyframes) {
-  if (!keyframes) return "";
-  let css = "";
-  for (const name in keyframes) {
-    const frames = keyframes[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(transitionDuration) {
-  const result = {};
-  for (const key in transitionDuration) {
-    if (key === "DEFAULT") {
-      result[`--default-transition-duration`] = transitionDuration[key];
-    } else {
-      result[`--transition-duration-${escapeKey(key)}`] = transitionDuration[key];
-    }
-  }
-  return result;
-}
-function transitionDelayToCssVars(transitionDelay) {
-  const result = {};
-  for (const key in transitionDelay) {
-    if (key === "DEFAULT") {
-      result[`--default-transition-delay`] = transitionDelay[key];
-    } else {
-      result[`--transition-delay-${escapeKey(key)}`] = transitionDelay[key];
-    }
-  }
-  return result;
-}
-function blurToCssVars(blur) {
-  const result = {};
-  for (const key in blur) {
-    if (key === "DEFAULT") {
-      result[`--default-blur`] = blur[key];
-    } else {
-      result[`--blur-${escapeKey(key)}`] = blur[key];
-    }
-  }
-  return result;
-}
-function containerToCssVars(container) {
-  const result = {};
-  for (const key in container) {
-    result[`--container-${escapeKey(key)}`] = container[key];
+  /**
+   * Returns all currently processed class names
+   * 
+   * This method is useful for debugging and monitoring purposes,
+   * providing visibility into which classes have been processed.
+   * 
+   * @returns Array of all processed class names
+   */
+  getProcessedClasses() {
+    return Array.from(this.processedClasses);
   }
-  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 */
@@ -1781,6 +2028,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 */
@@ -1946,6 +2197,60 @@ textarea {
 [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 = `
 /* BaroCSS Preflight - Full Reset */
@@ -1958,10 +2263,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 */
@@ -2022,6 +2331,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 */
@@ -2207,7 +2520,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;
 }
 
@@ -2309,6 +2624,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") {
@@ -2433,6 +2791,7 @@ ${keyframesToCss(theme.keyframes || {})}
   return result;
 }
 function createContext(configObj) {
+  if (configObj.debug !== void 0) setDebug(!!configObj.debug);
   const configWithDefaults = {
     presets: [
       { theme: defaultTheme },
@@ -2485,6 +2844,10 @@ function createContext(configObj) {
   return ctx;
 }
 function jsonToAst(input, ctx) {
+  const unsafeVariant = (input.variants || []).some(
+    (v) => typeof v === "string" ? !isSafeVariantToken(v) : !isSafeVariantValue(v.name || "") || !isSafeVariantValue(v.value || "") || hasCommentToken(v.name || "") || hasCommentToken(v.value || "")
+  );
+  if (unsafeVariant) return [];
   let utilReg = getUtility(ctx).find((u) => u.name === input.utility.name);
   if (input.utility.value && !input.utility.arbitrary && !input.utility.customProperty) {
     const fullName = `${input.utility.name}-${input.utility.value}`;
@@ -2494,7 +2857,7 @@ function jsonToAst(input, ctx) {
     }
   }
   if (!utilReg) {
-    console.warn(`[jsonToAst] Unknown utility: "${input.utility.name}"`);
+    debugWarn(`[jsonToAst] Unknown utility: "${input.utility.name}"`);
     return [];
   }
   const parsedUtility = {
@@ -2541,9 +2904,12 @@ function jsonToAst(input, ctx) {
       }
       const plugin = getModifier(ctx).find((p) => p.match(matchKey, ctx));
       if (!plugin) {
-        console.warn(`[jsonToAst] Unknown variant: "${matchKey}"`);
+        debugWarn(`[jsonToAst] Unknown variant: "${matchKey}"`);
         continue;
       }
+      if (plugin.astHandler) {
+        ast = plugin.astHandler(ast, parsedModifier, ctx, [], i);
+      }
       if (plugin.modifySelector) {
         const result = plugin.modifySelector({
           selector,
@@ -2620,7 +2986,7 @@ function jsonToAst(input, ctx) {
       }
     }
   }
-  return ast;
+  return applyVarPrefix(ast, ctx);
 }
 function generateCssFromJson(inputs, ctx, opts) {
   const allAtRootNodes = [];
@@ -2884,6 +3250,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(raw2) {
+  let v = raw2.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" });
@@ -3035,6 +3425,7 @@ staticUtility("snap-proximity", [["--baro-scroll-snap-strictness", "proximity"]]
 ].forEach(([name, prop]) => {
   functionalUtility({
     name: `scroll-${name}`,
+    spacingKeys: true,
     prop,
     supportsArbitrary: true,
     supportsCustomProperty: true,
@@ -3062,6 +3453,7 @@ staticUtility("snap-proximity", [["--baro-scroll-snap-strictness", "proximity"]]
 ].forEach(([name, prop]) => {
   functionalUtility({
     name: `scroll-${name}`,
+    spacingKeys: true,
     prop,
     supportsArbitrary: true,
     supportsCustomProperty: true,
@@ -3086,10 +3478,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" });
@@ -3107,7 +3499,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]
@@ -3120,7 +3512,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]
@@ -3310,6 +3702,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",
@@ -3548,6 +3941,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()],
@@ -3776,56 +4170,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, opacity, realThemeValue) {
@@ -3890,9 +4280,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 [
@@ -3901,7 +4291,7 @@ functionalUtility({
     }
     return null;
   },
-  handleCustomProperty: (value) => [decl("box-shadow", `var(${value})`)]
+  handleCustomProperty: (value) => shadowLayer(`var(${value})`)
 });
 functionalUtility({
   name: "inset-shadow",
@@ -3960,22 +4350,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"],
@@ -3985,20 +4392,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, opacity, realThemeValue) {
@@ -4072,7 +4470,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 [
@@ -4314,18 +4720,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,
@@ -4361,7 +4779,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",
@@ -4445,10 +4863,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" });
@@ -4456,12 +4874,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" });
@@ -4542,6 +4987,7 @@ staticUtility("sticky", [["position", "sticky"]], { category: "layout" });
   staticUtility(`-${name}-px`, [[prop, "-1px"]], { category: "layout" });
   functionalUtility({
     name,
+    spacingKeys: true,
     prop,
     supportsNegative: true,
     supportsFraction: true,
@@ -4572,12 +5018,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;
@@ -4588,12 +5035,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;
@@ -4604,12 +5052,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;
@@ -4668,6 +5117,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,
@@ -4901,7 +5375,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;
@@ -4917,7 +5391,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;
@@ -4933,7 +5407,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;
@@ -4961,11 +5435,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" });
@@ -5096,11 +5570,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"
   });
@@ -5120,149 +5595,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"],
@@ -5295,6 +5676,7 @@ functionalUtility({
   staticUtility(name, [["width", value]]);
 });
 functionalUtility({
+  spacingKeys: true,
   name: "w",
   prop: "width",
   supportsArbitrary: true,
@@ -5327,6 +5709,7 @@ functionalUtility({
   staticUtility(name, [["width", w], ["height", h]]);
 });
 functionalUtility({
+  spacingKeys: true,
   name: "size",
   supportsArbitrary: true,
   supportsCustomProperty: true,
@@ -5366,6 +5749,7 @@ functionalUtility({
   staticUtility(name, [["height", value]]);
 });
 functionalUtility({
+  spacingKeys: true,
   name: "h",
   prop: "height",
   supportsArbitrary: true,
@@ -5396,6 +5780,7 @@ functionalUtility({
   staticUtility(name, [["min-height", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "min-h",
   prop: "min-height",
   supportsArbitrary: true,
@@ -5426,6 +5811,7 @@ functionalUtility({
   staticUtility(name, [["max-height", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "max-h",
   prop: "max-height",
   supportsArbitrary: true,
@@ -5472,6 +5858,7 @@ functionalUtility({
   staticUtility(name, [["min-width", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "min-w",
   prop: "min-width",
   supportsArbitrary: true,
@@ -5489,6 +5876,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)"],
@@ -5504,6 +5894,7 @@ functionalUtility({
   staticUtility(name, [["max-width", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "max-w",
   prop: "max-width",
   supportsArbitrary: true,
@@ -5519,22 +5910,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" });
@@ -5580,12 +5972,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",
@@ -5593,6 +5985,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"
 });
@@ -5602,6 +5996,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(raw2) {
+  const hint = /^([a-z-]+):(.+)$/.exec(raw2);
+  if (hint && (hint[1] === "color" || FONT_SIZE_HINTS.has(hint[1]))) {
+    return { fontSize: hint[1] !== "color", value: hint[2] };
+  }
+  const fontSize = raw2 === "0" || LENGTH_RE.test(raw2) || FONT_SIZE_KEYWORDS.test(raw2) || /^(calc|min|max|clamp)\(/.test(raw2);
+  return { fontSize, value: raw2 };
+}
 staticUtility("text-inherit", [["color", "inherit"]], { category: "typography" });
 staticUtility("text-current", [["color", "currentColor"]], { category: "typography" });
 staticUtility("text-transparent", [["color", "transparent"]], { category: "typography" });
@@ -5615,27 +6020,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"
@@ -5651,7 +6043,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)];
@@ -5765,17 +6157,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})`)],
@@ -5799,7 +6181,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"
 });
@@ -5814,7 +6196,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"
 });
@@ -5828,8 +6210,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"
 });
@@ -5852,14 +6234,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"
 });
@@ -5869,7 +6251,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>")
@@ -5926,19 +6309,18 @@ functionalUtility({
   supportsCustomProperty: true,
   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")],
@@ -5949,14 +6331,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 });
 });
@@ -5967,12 +6349,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 [
@@ -6001,79 +6378,60 @@ 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,
@@ -6081,72 +6439,18 @@ functionalUtility({
     supportsArbitrary: true,
     supportsCustomProperty: true,
     supportsOpacity: true,
-    handle: (value, context, token, extra) => {
+    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)
-          ];
-        }
+        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;
     },
@@ -6181,20 +6485,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:")) {
@@ -6207,18 +6498,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"]],
@@ -6233,12 +6526,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,
@@ -6269,11 +6564,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"]],
@@ -6283,11 +6582,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"],
@@ -6299,18 +6603,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})`));
     },
@@ -6321,12 +6626,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"],
@@ -6334,25 +6662,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)];
@@ -6361,26 +6679,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" });
@@ -6405,16 +6732,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)];
     }
@@ -6425,7 +6754,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})`)];
   },
@@ -6446,6 +6775,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"
 });
@@ -6454,7 +6817,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" }
@@ -6462,7 +6825,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"]], {
@@ -6591,13 +6954,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"
 });
@@ -6611,13 +6972,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"
 });
@@ -6631,26 +6990,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"
 });
@@ -6677,7 +7021,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({
@@ -6688,18 +7032,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"
 });
@@ -6711,18 +7053,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"
 });
@@ -6734,25 +7074,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"
 });
@@ -6791,11 +7122,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"
 });
@@ -6809,11 +7140,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"
 });
@@ -6827,12 +7158,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"
@@ -6877,6 +7210,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"
 });
@@ -6908,52 +7257,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({
@@ -6963,19 +7312,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"
 });
@@ -6986,19 +7333,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"
 });
@@ -7009,37 +7354,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"
 });
@@ -7050,7 +7375,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}`)];
     }
@@ -7215,8 +7540,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",
@@ -7249,9 +7579,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",
@@ -7271,6 +7598,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, raw2] = bracket;
+    if (raw2 === void 0) return `[${kind}-${key}]`;
+    const value = /^(["']).*\1$/.test(raw2) ? raw2 : `"${decodeArbitrarySelector(raw2)}"`;
+    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 breakpoints = context.theme("breakpoints") || context.config("theme.breakpoints") || {};
@@ -7301,7 +7657,7 @@ functionalModifier(
     const breakpoints = context.theme("breakpoints") || context.config("theme.breakpoints") || {};
     if (Object.keys(breakpoints).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")];
@@ -7320,6 +7676,8 @@ functionalModifier(
           if (value) {
             mediaQuery = `(width < ${value})`;
           }
+        } else if (/^\d*\.?\d+(px|em|rem)?$/.test(mediaQuery)) {
+          mediaQuery = `(width < ${mediaQuery})`;
         }
         return [atRule("media", mediaQuery, [], "responsive")];
       }
@@ -7388,132 +7746,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"
@@ -7546,27 +7909,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(
@@ -7574,17 +7924,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
 );
@@ -7628,7 +7975,7 @@ functionalModifier(
         };
       } else {
         return {
-          selector: `&:not(${inner})`,
+          selector: `&:not(${functionalArgument(inner)})`,
           source: "attribute"
         };
       }
@@ -7779,29 +8126,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 raw2 = /^group-(.+)$/.exec(mod.type);
+    const [variant, base] = splitGroupName("group", raw2?.[1] ?? "");
+    const m = raw2 ? [raw2[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"
       };
     }
@@ -7811,19 +8185,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"
     } : {
@@ -7834,27 +8208,35 @@ functionalModifier(
   void 0
 );
 functionalModifier(
-  (mod) => /^peer-(.+)$/.test(mod),
+  (mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod),
   ({ selector, mod }) => {
-    const m = /^peer-(.+)$/.exec(mod.type);
+    const raw2 = /^peer-(.+)$/.exec(mod.type);
+    const [variant, base] = splitGroupName("peer", raw2?.[1] ?? "");
+    const m = raw2 ? [raw2[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"
       };
     }
@@ -7863,7 +8245,7 @@ functionalModifier(
       if (pattern) {
         const key = pattern[1];
         return {
-          selector: `&:is(:where(.peer)[aria-${key}]~*)`,
+          selector: `&:is(${g}[aria-${key}]~*)`,
           source: "peer"
         };
       }
@@ -7873,19 +8255,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,
@@ -7936,12 +8318,58 @@ 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 container = kind === "container";
+  const min = MIN_W.exec(prelude);
+  if (min) return [container ? 4 : 2, toPx(min[1], min[2])];
+  const max = MAX_W.exec(prelude);
+  if (max) return [container ? 3 : 1, -toPx(max[1], max[2])];
+  if (!container && LATE_MEDIA.test(prelude)) return [5, 0];
+  return [0, 0];
+}
+function ruleSortKey(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;
+}
 export {
   AstCache,
   IncrementalParser,
   ParseResultCache,
   UtilityCache,
   WeakCache,
+  arbitraryPropertyRegistration,
   astCache,
   astToCss,
   atRoot,
@@ -7950,6 +8378,7 @@ export {
   clearAstCache,
   collectDeclPaths,
   comment,
+  compareKeys,
   configGetter,
   createContext,
   decl,
@@ -7957,6 +8386,7 @@ export {
   deepMerge,
   defaultConfig,
   escapeClassName,
+  expandThemeFunctions,
   functionalModifier,
   functionalUtility,
   generateCss,
@@ -7966,10 +8396,17 @@ export {
   getModifier,
   getPreflightCSS,
   getUtility,
+  hasCommentDelimiter,
+  hasCommentToken,
   hasPreset,
+  isDebug,
+  isSafeVariantToken,
+  isSafeVariantValue,
+  isStructureSafeValue,
   jsonToAst,
   mergeAstTreeList,
   modifierRegistry,
+  normalizeMathSpacing,
   optimizeAst,
   parseClassName,
   parseClassToAst,
@@ -7981,13 +8418,16 @@ export {
   resolveTheme,
   rootToCss,
   rule,
+  ruleSortKey,
   setContextCacheReset,
+  setDebug,
   staticModifier,
   staticUtility,
   styleRule,
   themeGetter,
   themeToCssVars,
   tokenize,
+  upperBound,
   utilityCache
 };
 //# sourceMappingURL=index.js.map