@pandacss/preset-base 2.0.0-beta.9 → 2.0.1

package/dist/index.mjs

@@ -57,6 +57,8 @@ var conditions = {
   required: "&:is(:required, [data-required], [aria-required=true])",
   valid: "&:is(:valid, [data-valid])",
   invalid: "&:is(:invalid, [data-invalid], [aria-invalid=true])",
+  userValid: "&:is(:user-valid, [data-user-valid])",
+  userInvalid: "&:is(:user-invalid, [data-user-invalid])",
   autofill: "&:autofill",
   inRange: "&:is(:in-range, [data-in-range])",
   outOfRange: "&:is(:out-of-range, [data-outside-range])",
@@ -75,6 +77,7 @@ var conditions = {
   fullscreen: "&:is(:fullscreen, [data-fullscreen])",
   loading: "&:is([data-loading], [aria-busy=true])",
   hidden: "&:is([hidden], [data-hidden])",
+  inert: "&:is([inert], [data-inert])",
   current: "&:is([aria-current=true], [data-current])",
   currentPage: "&[aria-current=page]",
   currentStep: "&[aria-current=step]",
@@ -106,47 +109,13 @@ var conditions = {
   icon: "& :where(svg)",
   starting: "@starting-style",
   noscript: "@media (scripting: none)",
-  invertedColors: "@media (inverted-colors: inverted)"
-};
-
-// src/global-css.ts
-var EMPTY = "/*-*/ /*-*/";
-var globalCss = {
-  "*, ::before, ::after, ::backdrop": {
-    "--blur": EMPTY,
-    "--brightness": EMPTY,
-    "--contrast": EMPTY,
-    "--grayscale": EMPTY,
-    "--hue-rotate": EMPTY,
-    "--invert": EMPTY,
-    "--saturate": EMPTY,
-    "--sepia": EMPTY,
-    "--drop-shadow": EMPTY,
-    "--backdrop-blur": EMPTY,
-    "--backdrop-brightness": EMPTY,
-    "--backdrop-contrast": EMPTY,
-    "--backdrop-grayscale": EMPTY,
-    "--backdrop-hue-rotate": EMPTY,
-    "--backdrop-invert": EMPTY,
-    "--backdrop-opacity": EMPTY,
-    "--backdrop-saturate": EMPTY,
-    "--backdrop-sepia": EMPTY,
-    "--gradient-from-position": EMPTY,
-    "--gradient-to-position": EMPTY,
-    "--gradient-via-position": EMPTY,
-    "--scroll-snap-strictness": "proximity",
-    "--border-spacing-x": 0,
-    "--border-spacing-y": 0,
-    "--translate-x": 0,
-    "--translate-y": 0,
-    "--rotate": 0,
-    "--rotate-x": 0,
-    "--rotate-y": 0,
-    "--skew-x": 0,
-    "--skew-y": 0,
-    "--scale-x": 1,
-    "--scale-y": 1
-  }
+  invertedColors: "@media (inverted-colors: inverted)",
+  pointerFine: "@media (pointer: fine)",
+  pointerCoarse: "@media (pointer: coarse)",
+  pointerNone: "@media (pointer: none)",
+  anyPointerFine: "@media (any-pointer: fine)",
+  anyPointerCoarse: "@media (any-pointer: coarse)",
+  anyPointerNone: "@media (any-pointer: none)"
 };
 
 // src/patterns.ts
@@ -438,14 +407,14 @@ var divider = definePattern({
     thickness: "1px"
   },
   transform(props, { map }) {
-    const { orientation, thickness, color, ...rest } = props;
+    const { orientation, thickness, color: color2, ...rest } = props;
     return {
       "--thickness": thickness,
       width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
       height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
       borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
       borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
-      borderColor: color,
+      borderColor: color2,
       ...rest
     };
   }
@@ -632,8 +601,8 @@ var background = {
     group: "Background",
     transform(value) {
       return {
-        backgroundClip: value,
-        WebkitBackgroundClip: value
+        WebkitBackgroundClip: value,
+        backgroundClip: value
       };
     }
   },
@@ -1121,6 +1090,14 @@ var divide = {
   }
 };
 
+// src/css-var.ts
+function cssVar(syntax, initialValue) {
+  return initialValue === void 0 ? { syntax, inherits: false } : { syntax, inherits: false, initialValue };
+}
+function anyVar(initialValue) {
+  return cssVar("*", initialValue);
+}
+
 // src/utilities/effects.ts
 var effects = {
   opacity: {
@@ -1155,6 +1132,7 @@ var effects = {
   brightness: {
     className: "brightness",
     group: "Effect",
+    globalVars: { "--brightness": anyVar() },
     transform(value) {
       return {
         "--brightness": `brightness(${value})`
@@ -1164,6 +1142,7 @@ var effects = {
   contrast: {
     className: "contrast",
     group: "Effect",
+    globalVars: { "--contrast": anyVar() },
     transform(value) {
       return {
         "--contrast": `contrast(${value})`
@@ -1173,6 +1152,7 @@ var effects = {
   grayscale: {
     className: "grayscale",
     group: "Effect",
+    globalVars: { "--grayscale": anyVar() },
     transform(value) {
       return {
         "--grayscale": `grayscale(${value})`
@@ -1182,6 +1162,7 @@ var effects = {
   hueRotate: {
     className: "hue-rotate",
     group: "Effect",
+    globalVars: { "--hue-rotate": anyVar() },
     transform(value) {
       return {
         "--hue-rotate": `hue-rotate(${value})`
@@ -1191,6 +1172,7 @@ var effects = {
   invert: {
     className: "invert",
     group: "Effect",
+    globalVars: { "--invert": anyVar() },
     transform(value) {
       return {
         "--invert": `invert(${value})`
@@ -1200,6 +1182,7 @@ var effects = {
   saturate: {
     className: "saturate",
     group: "Effect",
+    globalVars: { "--saturate": anyVar() },
     transform(value) {
       return {
         "--saturate": `saturate(${value})`
@@ -1209,6 +1192,7 @@ var effects = {
   sepia: {
     className: "sepia",
     group: "Effect",
+    globalVars: { "--sepia": anyVar() },
     transform(value) {
       return {
         "--sepia": `sepia(${value})`
@@ -1219,6 +1203,7 @@ var effects = {
     className: "drop-shadow",
     group: "Effect",
     values: "dropShadows",
+    globalVars: { "--drop-shadow": anyVar() },
     transform(value) {
       return {
         "--drop-shadow": value
@@ -1229,6 +1214,7 @@ var effects = {
     className: "blur",
     group: "Effect",
     values: "blurs",
+    globalVars: { "--blur": anyVar() },
     transform(value) {
       return {
         "--blur": `blur(${value})`
@@ -1243,8 +1229,8 @@ var effects = {
     },
     transform(value) {
       return {
-        backdropFilter: value,
-        WebkitBackdropFilter: value
+        WebkitBackdropFilter: value,
+        backdropFilter: value
       };
     }
   },
@@ -1252,6 +1238,7 @@ var effects = {
     className: "bkdp-blur",
     group: "Effect",
     values: "blurs",
+    globalVars: { "--backdrop-blur": anyVar() },
     transform(value) {
       return {
         "--backdrop-blur": `blur(${value})`
@@ -1261,6 +1248,7 @@ var effects = {
   backdropBrightness: {
     className: "bkdp-brightness",
     group: "Effect",
+    globalVars: { "--backdrop-brightness": anyVar() },
     transform(value) {
       return {
         "--backdrop-brightness": `brightness(${value})`
@@ -1270,6 +1258,7 @@ var effects = {
   backdropContrast: {
     className: "bkdp-contrast",
     group: "Effect",
+    globalVars: { "--backdrop-contrast": anyVar() },
     transform(value) {
       return {
         "--backdrop-contrast": `contrast(${value})`
@@ -1279,6 +1268,7 @@ var effects = {
   backdropGrayscale: {
     className: "bkdp-grayscale",
     group: "Effect",
+    globalVars: { "--backdrop-grayscale": anyVar() },
     transform(value) {
       return {
         "--backdrop-grayscale": `grayscale(${value})`
@@ -1288,6 +1278,7 @@ var effects = {
   backdropHueRotate: {
     className: "bkdp-hue-rotate",
     group: "Effect",
+    globalVars: { "--backdrop-hue-rotate": anyVar() },
     transform(value) {
       return {
         "--backdrop-hue-rotate": `hue-rotate(${value})`
@@ -1297,6 +1288,7 @@ var effects = {
   backdropInvert: {
     className: "bkdp-invert",
     group: "Effect",
+    globalVars: { "--backdrop-invert": anyVar() },
     transform(value) {
       return {
         "--backdrop-invert": `invert(${value})`
@@ -1306,6 +1298,7 @@ var effects = {
   backdropOpacity: {
     className: "bkdp-opacity",
     group: "Effect",
+    globalVars: { "--backdrop-opacity": anyVar() },
     transform(value) {
       return {
         "--backdrop-opacity": value
@@ -1315,6 +1308,7 @@ var effects = {
   backdropSaturate: {
     className: "bkdp-saturate",
     group: "Effect",
+    globalVars: { "--backdrop-saturate": anyVar() },
     transform(value) {
       return {
         "--backdrop-saturate": `saturate(${value})`
@@ -1324,6 +1318,7 @@ var effects = {
   backdropSepia: {
     className: "bkdp-sepia",
     group: "Effect",
+    globalVars: { "--backdrop-sepia": anyVar() },
     transform(value) {
       return {
         "--backdrop-sepia": `sepia(${value})`
@@ -1574,6 +1569,12 @@ var focusRing = {
 };
 
 // src/utilities/gradient.ts
+var stopColor = () => cssVar("<color>", "#0000");
+var composed = {
+  "--gradient-position": anyVar(),
+  "--gradient-stops": anyVar(),
+  "--gradient-via-stops": anyVar()
+};
 var gradientVia = createColorMixTransform("--gradient-via");
 var linearGradientDirectionMap = /* @__PURE__ */ new Map([
   ["to-t", "to top"],
@@ -1599,6 +1600,7 @@ var backgroundGradients = {
     shorthand: "bgGradient",
     className: "bg-grad",
     group: "Background Gradient",
+    globalVars: composed,
     values: linearGradientValues,
     transform(value, { raw, token }) {
       const tokenValue = token(`gradients.${raw}`);
@@ -1619,6 +1621,7 @@ var backgroundGradients = {
     shorthand: "bgLinear",
     className: "bg-linear",
     group: "Background Gradient",
+    globalVars: composed,
     values: linearGradientValues,
     transform(value, { raw, token }) {
       const tokenValue = token(`gradients.${raw}`);
@@ -1639,6 +1642,7 @@ var backgroundGradients = {
     shorthand: "bgRadial",
     className: "bg-radial",
     group: "Background Gradient",
+    globalVars: composed,
     values: "gradients",
     transform(value, { raw, token }) {
       const tokenValue = token(`gradients.${raw}`);
@@ -1656,6 +1660,7 @@ var backgroundGradients = {
     shorthand: "bgConic",
     className: "bg-conic",
     group: "Background Gradient",
+    globalVars: composed,
     transform(value) {
       return {
         "--gradient-stops": gradientStops,
@@ -1667,6 +1672,7 @@ var backgroundGradients = {
   textGradient: {
     className: "txt-grad",
     group: "Background Gradient",
+    globalVars: composed,
     values: linearGradientValues,
     transform(value, { raw, token }) {
       const tokenValue = token(`gradients.${raw}`);
@@ -1696,6 +1702,7 @@ var backgroundGradients = {
   gradientFromPosition: {
     className: "grad-from-pos",
     group: "Background Gradient",
+    globalVars: { "--gradient-from-position": cssVar("<length-percentage>", "0%") },
     transform(value) {
       return {
         "--gradient-from-position": value
@@ -1705,6 +1712,7 @@ var backgroundGradients = {
   gradientToPosition: {
     className: "grad-to-pos",
     group: "Background Gradient",
+    globalVars: { "--gradient-to-position": cssVar("<length-percentage>", "100%") },
     transform(value) {
       return {
         "--gradient-to-position": value
@@ -1715,18 +1723,21 @@ var backgroundGradients = {
     className: "grad-from",
     values: "colors",
     group: "Background Gradient",
+    globalVars: { "--gradient-from": stopColor() },
     transform: createColorMixTransform("--gradient-from")
   },
   gradientTo: {
     className: "grad-to",
     values: "colors",
     group: "Background Gradient",
+    globalVars: { "--gradient-to": stopColor() },
     transform: createColorMixTransform("--gradient-to")
   },
   gradientVia: {
     className: "grad-via",
     values: "colors",
     group: "Background Gradient",
+    globalVars: { "--gradient-via": stopColor() },
     transform(value, args) {
       const transformed = gradientVia(value, args);
       return {
@@ -1739,6 +1750,7 @@ var backgroundGradients = {
   gradientViaPosition: {
     className: "grad-via-pos",
     group: "Background Gradient",
+    globalVars: { "--gradient-via-position": cssVar("<length-percentage>", "50%") },
     transform(value) {
       return {
         "--gradient-via-position": value
@@ -1797,6 +1809,19 @@ var helpers = {
 };
 
 // src/utilities/interactivity.ts
+var SCROLLBAR_COLOR = "var(--scrollbar-thumb, currentColor) var(--scrollbar-track, transparent)";
+function scrollbarColorStyles(colorVars) {
+  return {
+    ...colorVars,
+    scrollbarColor: SCROLLBAR_COLOR,
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: "var(--scrollbar-thumb, currentColor)"
+    },
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: "var(--scrollbar-track, transparent)"
+    }
+  };
+}
 var interactivity = {
   accentColor: {
     className: "ac-c",
@@ -1842,9 +1867,25 @@ var interactivity = {
   },
   scrollbarColor: {
     className: "scr-bar-c",
+    group: "Scroll"
+  },
+  scrollbarThumb: {
+    className: "scr-bar-th",
+    values: "colors",
+    group: "Scroll",
+    globalVars: { "--scrollbar-thumb": cssVar("<color>") },
+    transform(value, args) {
+      return scrollbarColorStyles(createColorMixTransform("--scrollbar-thumb")(value, args));
+    }
+  },
+  scrollbarTrack: {
+    className: "scr-bar-tk",
     values: "colors",
     group: "Scroll",
-    transform: createColorMixTransform("scrollbarColor")
+    globalVars: { "--scrollbar-track": cssVar("<color>") },
+    transform(value, args) {
+      return scrollbarColorStyles(createColorMixTransform("--scrollbar-track")(value, args));
+    }
   },
   scrollbarGutter: {
     className: "scr-bar-g",
@@ -1852,7 +1893,6 @@ var interactivity = {
   },
   scrollbarWidth: {
     className: "scr-bar-w",
-    values: "sizes",
     group: "Scroll"
   },
   // Scroll Margin
@@ -1994,6 +2034,7 @@ var interactivity = {
     className: "scrs-strt",
     values: ["mandatory", "proximity"],
     group: "Scroll",
+    globalVars: { "--scroll-snap-strictness": anyVar("proximity") },
     transform(value) {
       return {
         "--scroll-snap-strictness": value
@@ -2147,8 +2188,8 @@ var layout = {
     group: "Layout",
     transform(value) {
       return {
-        boxDecorationBreak: value,
-        WebkitBoxDecorationBreak: value
+        WebkitBoxDecorationBreak: value,
+        boxDecorationBreak: value
       };
     }
   },
@@ -2302,6 +2343,245 @@ var list = {
   }
 };
 
+// src/utilities/mask.ts
+var IDENTITY = "linear-gradient(#fff, #fff)";
+var maskVar = (name) => `var(--mask-${name})`;
+var LAYERS = ["linear", "radial", "conic"];
+var EDGES = ["left", "right", "bottom", "top"];
+var MASK_IMAGE = LAYERS.map(maskVar).join(", ");
+var MASK_EDGES = EDGES.map(maskVar).join(", ");
+var image = { syntax: "*", inherits: false, initialValue: IDENTITY };
+var composedList = { syntax: "*", inherits: false };
+var keyword = (initialValue) => ({ syntax: "*", inherits: false, initialValue });
+var color = (initialValue) => ({ syntax: "<color>", inherits: false, initialValue });
+var position = (initialValue) => ({
+  syntax: "<length-percentage>",
+  inherits: false,
+  initialValue
+});
+function gradientVars(name) {
+  return {
+    [`--mask-${name}`]: image,
+    [`--mask-${name}-from-color`]: color("black"),
+    [`--mask-${name}-to-color`]: color("transparent"),
+    [`--mask-${name}-from-position`]: position("0%"),
+    [`--mask-${name}-to-position`]: position("100%")
+  };
+}
+var maskVars = Object.assign(
+  {},
+  ...[...LAYERS, ...EDGES].map(gradientVars),
+  ...LAYERS.map((layer) => ({ [`--mask-${layer}-stops`]: composedList })),
+  {
+    // `to bottom` is as valid here as `45deg`.
+    "--mask-linear-position": keyword("0deg"),
+    "--mask-conic-position": keyword("0deg"),
+    "--mask-radial-position": keyword("center"),
+    "--mask-radial-shape": keyword("ellipse"),
+    "--mask-radial-size": keyword("farthest-corner"),
+    "--mask-composite": keyword("intersect"),
+    "--mask-composite-webkit": keyword("source-in")
+  }
+);
+function cssProps(styles) {
+  return styles;
+}
+function maskLayers(layers) {
+  return {
+    WebkitMaskImage: MASK_IMAGE,
+    maskImage: MASK_IMAGE,
+    WebkitMaskComposite: maskVar("composite-webkit"),
+    maskComposite: maskVar("composite"),
+    ...layers
+  };
+}
+function stopList(name) {
+  return `${maskVar(`${name}-from-color`)} ${maskVar(`${name}-from-position`)}, ${maskVar(`${name}-to-color`)} ${maskVar(`${name}-to-position`)}`;
+}
+function edgeLayers(edges) {
+  const layers = { "--mask-linear": MASK_EDGES };
+  for (const edge of edges) layers[`--mask-${edge}`] = `linear-gradient(to ${edge}, ${stopList(edge)})`;
+  return maskLayers(layers);
+}
+var GEOMETRY = {
+  linear: { fn: "linear-gradient", head: maskVar("linear-position") },
+  radial: {
+    fn: "radial-gradient",
+    head: `${maskVar("radial-shape")} ${maskVar("radial-size")} at ${maskVar("radial-position")}`
+  },
+  conic: { fn: "conic-gradient", head: `from ${maskVar("conic-position")}` }
+};
+function gradientLayer(layer) {
+  const { fn, head } = GEOMETRY[layer];
+  return maskLayers({
+    [`--mask-${layer}-stops`]: `${head}, ${stopList(layer)}`,
+    [`--mask-${layer}`]: `${fn}(${maskVar(`${layer}-stops`)})`
+  });
+}
+function positionStop(className, vars, wiring) {
+  return {
+    className,
+    values: "spacing",
+    group: "Mask",
+    globalVars: maskVars,
+    transform(value) {
+      const stops = Object.fromEntries(vars.map((name) => [`--mask-${name}`, value]));
+      return cssProps({ ...wiring(), ...stops });
+    }
+  };
+}
+function colorStop(className, vars, wiring) {
+  return {
+    className,
+    values: "colors",
+    group: "Mask",
+    globalVars: maskVars,
+    transform(value, args) {
+      const stops = {};
+      for (const name of vars) Object.assign(stops, createColorMixTransform(`--mask-${name}`)(value, args));
+      return cssProps({ ...wiring(), ...stops });
+    }
+  };
+}
+function stopProps(prop, className, targets, wiring) {
+  const vars = (suffix) => targets.map((target) => `${target}-${suffix}`);
+  return {
+    [`${prop}From`]: positionStop(`${className}-from`, vars("from-position"), wiring),
+    [`${prop}To`]: positionStop(`${className}-to`, vars("to-position"), wiring),
+    [`${prop}FromColor`]: colorStop(`${className}-from-c`, vars("from-color"), wiring),
+    [`${prop}ToColor`]: colorStop(`${className}-to-c`, vars("to-color"), wiring)
+  };
+}
+var EDGE_GROUPS = [
+  ["Top", "t", ["top"]],
+  ["Right", "r", ["right"]],
+  ["Bottom", "b", ["bottom"]],
+  ["Left", "l", ["left"]],
+  ["X", "x", ["left", "right"]],
+  ["Y", "y", ["top", "bottom"]]
+];
+var edgeProps = Object.assign(
+  {},
+  ...EDGE_GROUPS.map(
+    ([name, short, edges]) => stopProps(`mask${name}`, `msk-${short}`, edges, () => edgeLayers(edges))
+  )
+);
+var layerProps = (layer) => stopProps(`mask${layer[0].toUpperCase()}${layer.slice(1)}`, `msk-${layer}`, [layer], () => gradientLayer(layer));
+function prefixed(prop, className) {
+  const webkit = `Webkit${prop[0].toUpperCase()}${prop.slice(1)}`;
+  return {
+    className,
+    group: "Mask",
+    transform(value) {
+      return cssProps({ [webkit]: value, [prop]: value });
+    }
+  };
+}
+var webkitMaskComposite = {
+  add: "source-over",
+  subtract: "source-out",
+  intersect: "source-in",
+  exclude: "xor"
+};
+var POSITION = {
+  center: "center",
+  top: "top",
+  bottom: "bottom",
+  left: "left",
+  right: "right"
+};
+var linearDirectionMap = /* @__PURE__ */ new Map([
+  ["to-t", "to top"],
+  ["to-tr", "to top right"],
+  ["to-r", "to right"],
+  ["to-br", "to bottom right"],
+  ["to-b", "to bottom"],
+  ["to-bl", "to bottom left"],
+  ["to-l", "to left"],
+  ["to-tl", "to top left"]
+]);
+var maskLinearValues = () => Object.fromEntries(linearDirectionMap.entries());
+function asAngle(raw, value) {
+  if (/^-?\d+(\.\d+)?$/.test(raw)) return `${raw}deg`;
+  return value;
+}
+var varOnly = (name, className, values) => ({
+  className,
+  group: "Mask",
+  globalVars: maskVars,
+  values,
+  transform: (value) => ({ [`--mask-${name}`]: value })
+});
+var mask = {
+  mask: prefixed("mask", "msk"),
+  maskImage: prefixed("maskImage", "msk-i"),
+  maskSize: prefixed("maskSize", "msk-s"),
+  maskPosition: prefixed("maskPosition", "msk-p"),
+  maskRepeat: prefixed("maskRepeat", "msk-r"),
+  maskClip: prefixed("maskClip", "msk-cp"),
+  maskOrigin: prefixed("maskOrigin", "msk-o"),
+  maskComposite: {
+    className: "msk-cmp",
+    group: "Mask",
+    globalVars: maskVars,
+    // Via variables so class order can't decide — every fade helper emits this same pair.
+    transform(value) {
+      return cssProps({
+        "--mask-composite": value,
+        "--mask-composite-webkit": webkitMaskComposite[value] ?? value,
+        WebkitMaskComposite: maskVar("composite-webkit"),
+        maskComposite: maskVar("composite")
+      });
+    }
+  },
+  maskMode: { className: "msk-md", group: "Mask" },
+  maskType: { className: "msk-t", group: "Mask" },
+  ...edgeProps,
+  maskLinear: {
+    className: "msk-linear",
+    group: "Mask",
+    globalVars: maskVars,
+    values: maskLinearValues,
+    transform(value, { raw }) {
+      const angle = linearDirectionMap.get(String(raw)) ?? asAngle(String(raw), value);
+      return cssProps({ ...gradientLayer("linear"), "--mask-linear-position": angle });
+    }
+  },
+  ...layerProps("linear"),
+  maskRadial: {
+    className: "msk-radial",
+    group: "Mask",
+    globalVars: maskVars,
+    transform(value) {
+      return cssProps({ ...gradientLayer("radial"), "--mask-radial-size": value });
+    }
+  },
+  ...layerProps("radial"),
+  maskRadialAt: varOnly("radial-position", "msk-radial-at", {
+    ...POSITION,
+    "top left": "top left",
+    "top right": "top right",
+    "bottom left": "bottom left",
+    "bottom right": "bottom right"
+  }),
+  maskRadialSize: varOnly("radial-size", "msk-radial-sz", {
+    "closest-side": "closest-side",
+    "closest-corner": "closest-corner",
+    "farthest-side": "farthest-side",
+    "farthest-corner": "farthest-corner"
+  }),
+  maskRadialShape: varOnly("radial-shape", "msk-radial-shape", { circle: "circle", ellipse: "ellipse" }),
+  maskConic: {
+    className: "msk-conic",
+    group: "Mask",
+    globalVars: maskVars,
+    transform(value, { raw }) {
+      return cssProps({ ...gradientLayer("conic"), "--mask-conic-position": asAngle(String(raw), value) });
+    }
+  },
+  ...layerProps("conic")
+};
+
 // src/utilities/outline.ts
 var outline = {
   outlineWidth: {
@@ -2343,56 +2623,35 @@ var polyfill = {
     className: "ap",
     group: "Visibility",
     transform(value) {
-      return { appearance: value, WebkitAppearance: value };
+      return { WebkitAppearance: value, appearance: value };
     }
   },
   backfaceVisibility: {
     className: "bfv",
     group: "Visibility",
     transform(value) {
-      return { backfaceVisibility: value, WebkitBackfaceVisibility: value };
+      return { WebkitBackfaceVisibility: value, backfaceVisibility: value };
     }
   },
   clipPath: {
     className: "cp-path",
     group: "Other",
     transform(value) {
-      return { clipPath: value, WebkitClipPath: value };
+      return { WebkitClipPath: value, clipPath: value };
     }
   },
   hyphens: {
     className: "hy",
     group: "Other",
     transform(value) {
-      return { hyphens: value, WebkitHyphens: value };
-    }
-  },
-  mask: {
-    className: "msk",
-    group: "Other",
-    transform(value) {
-      return { mask: value, WebkitMask: value };
-    }
-  },
-  maskImage: {
-    className: "msk-i",
-    group: "Other",
-    transform(value) {
-      return { maskImage: value, WebkitMaskImage: value };
-    }
-  },
-  maskSize: {
-    className: "msk-s",
-    group: "Other",
-    transform(value) {
-      return { maskSize: value, WebkitMaskSize: value };
+      return { WebkitHyphens: value, hyphens: value };
     }
   },
   textSizeAdjust: {
     className: "txt-adj",
     group: "Typography",
     transform(value) {
-      return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
+      return { WebkitTextSizeAdjust: value, textSizeAdjust: value };
     }
   }
 };
@@ -2761,6 +3020,7 @@ var tables = {
     className: "bd-sx",
     values: "spacing",
     group: "Table",
+    globalVars: { "--border-spacing-x": cssVar("<length>", "0") },
     transform(value) {
       return {
         "--border-spacing-x": value
@@ -2771,6 +3031,7 @@ var tables = {
     className: "bd-sy",
     values: "spacing",
     group: "Table",
+    globalVars: { "--border-spacing-y": cssVar("<length>", "0") },
     transform(value) {
       return {
         "--border-spacing-y": value
@@ -2784,6 +3045,8 @@ var tables = {
 };
 
 // src/utilities/transforms.ts
+var length = () => cssVar("<length-percentage>", "0");
+var ROTATE_AXES = ["x", "y", "z"].map((axis) => `var(--rotate-${axis},)`).join(" ");
 var positiveFractions = {
   "1/2": "50%",
   "1/3": "33.333333%",
@@ -2818,18 +3081,20 @@ var transforms = {
     className: "rotate",
     group: "Transform",
     property: "rotate",
-    values: {
-      auto: "var(--rotate-x) var(--rotate-y)",
-      "auto-3d": "var(--rotate-x) var(--rotate-y) var(--rotate-z)"
+    // `auto-3d` is an alias: an unset axis contributes nothing either way.
+    values: { auto: "auto", "auto-3d": "auto" },
+    transform(value) {
+      return value === "auto" ? { transform: ROTATE_AXES } : { rotate: value };
     }
   },
   rotateX: {
     className: "rotate-x",
     group: "Transform",
     property: "rotate",
+    globalVars: { "--rotate-x": anyVar() },
     transform(value) {
       return {
-        "--rotate-x": value
+        "--rotate-x": `rotateX(${value})`
       };
     }
   },
@@ -2837,9 +3102,10 @@ var transforms = {
     className: "rotate-y",
     group: "Transform",
     property: "rotate",
+    globalVars: { "--rotate-y": anyVar() },
     transform(value) {
       return {
-        "--rotate-y": value
+        "--rotate-y": `rotateY(${value})`
       };
     }
   },
@@ -2847,9 +3113,10 @@ var transforms = {
     className: "rotate-z",
     group: "Transform",
     property: "rotate",
+    globalVars: { "--rotate-z": anyVar() },
     transform(value) {
       return {
-        "--rotate-z": value
+        "--rotate-z": `rotateZ(${value})`
       };
     }
   },
@@ -2864,6 +3131,7 @@ var transforms = {
   scaleX: {
     className: "scale-x",
     group: "Transform",
+    globalVars: { "--scale-x": anyVar("1") },
     transform(value) {
       return {
         "--scale-x": value
@@ -2873,6 +3141,7 @@ var transforms = {
   scaleY: {
     className: "scale-y",
     group: "Transform",
+    globalVars: { "--scale-y": anyVar("1") },
     transform(value) {
       return {
         "--scale-y": value
@@ -2892,6 +3161,7 @@ var transforms = {
     shorthand: "x",
     className: "translate-x",
     group: "Transform",
+    globalVars: { "--translate-x": length() },
     values(theme) {
       return {
         ...theme("spacing"),
@@ -2908,6 +3178,7 @@ var transforms = {
     shorthand: "y",
     className: "translate-y",
     group: "Transform",
+    globalVars: { "--translate-y": length() },
     values(theme) {
       return {
         ...theme("spacing"),
@@ -2924,11 +3195,11 @@ var transforms = {
     shorthand: "z",
     className: "translate-z",
     group: "Transform",
+    // `<length>`, not `<length-percentage>`: the third slot of `translate` rejects a
+    // percentage, and a stray one would take x and y down with it.
+    globalVars: { "--translate-z": cssVar("<length>", "0") },
     values(theme) {
-      return {
-        ...theme("spacing"),
-        ...fractions
-      };
+      return theme("spacing");
     },
     transform(value) {
       return {
@@ -3234,11 +3505,7 @@ var typography = {
   },
   textWrap: {
     className: "tw",
-    values: ["wrap", "balance", "nowrap"],
-    group: "Typography",
-    transform(value) {
-      return { textWrap: value };
-    }
+    group: "Typography"
   },
   truncate: {
     className: "trunc",
@@ -3276,6 +3543,7 @@ var typography = {
 var utilities = Object.assign(
   {},
   layout,
+  mask,
   display,
   flexGrid,
   spacing,
@@ -3306,9 +3574,7 @@ var preset = definePreset({
   name: "@pandacss/preset-base",
   conditions,
   utilities,
-  patterns,
-  // globalVars,
-  globalCss
+  patterns
 });
 var index_default = preset;
 export {