@unocss/preset-wind 0.16.3 → 0.18.0

package/dist/index.cjs

@@ -158,25 +158,29 @@ const properties = {
   "zoom-out-up": { "transform-origin": "center bottom" }
 };
 const animations = [
-  [/^animate-(.*)$/, ([, name], { constructCSS }) => {
+  [/^animate-(.+)$/, ([, name], { constructCSS }) => {
     const kf = keyframes[name];
     if (kf) {
       return `@keyframes ${name}${kf}
 ${constructCSS(Object.assign({ animation: `${name} ${durations[name] || "1s"} ${timingFns[name] || "linear"} infinite` }, properties[name]))}`;
     }
   }],
-  ["animate-none", { animation: "none" }],
   [/^animate(?:-duration)?-((.+)(?:(s|ms)?))$/, ([, d]) => ({ "animation-duration": utils.handler.bracket.time(d.replace(/-duration/, "")) })],
   [/^animate-delay-((.+)(?:(s|ms)?))$/, ([, d]) => ({ "animation-delay": utils.handler.bracket.time(d) })],
-  [/^animate-(?:fill-)?mode-(none|forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
-  [/^animate-(?:direction-)?(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
+  [/^animate-(?:fill-)?mode-(forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
+  ["animate-mode-none", { "animation-fill-mode": "none" }],
+  ["animate-fill-mode-none", { "animation-fill-mode": "none" }],
+  [/^animate-(?:direction-)?(reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
+  ["animate-normal", { "animation-direction": "normal" }],
+  ["animate-direction-normal", { "animation-direction": "normal" }],
   [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": d.replace(/\-/g, ", ") })],
   [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": d })],
-  [/^animate-play(?:-state)?-(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })]
+  [/^animate-play(?:-state)?-(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
+  ["animate-none", { animation: "none" }]
 ];
 
 const colorResolver = (mode) => ([, body], { theme }) => {
-  const data = rules$1.parseColorUtil(body, theme);
+  const data = utils.parseColor(body, theme);
   if (!data)
     return;
   const { opacity, color, rgba } = data;
@@ -208,11 +212,20 @@ const colorResolver = (mode) => ([, body], { theme }) => {
       };
   }
 };
+const bgGradientDirections = {
+  t: "top",
+  tr: "top right",
+  r: "right",
+  br: "bottom right",
+  b: "bottom",
+  bl: "bottom left",
+  l: "left",
+  tl: "top left"
+};
 const backgroundStyles = [
   ["bg-fixed", { "background-attachment": "fixed" }],
   ["bg-local", { "background-attachment": "local" }],
   ["bg-scroll", { "background-attachment": "scroll" }],
-  ["bg-blend-normal", { "background-blend-mode": "normal" }],
   ["bg-blend-multiply", { "background-blend-mode": "multiply" }],
   ["bg-blend-screen", { "background-blend-mode": "screen" }],
   ["bg-blend-overlay", { "background-blend-mode": "overlay" }],
@@ -228,41 +241,23 @@ const backgroundStyles = [
   ["bg-blend-saturation", { "background-blend-mode": "saturation" }],
   ["bg-blend-color", { "background-blend-mode": "color" }],
   ["bg-blend-luminosity", { "background-blend-mode": "luminosity" }],
+  ["bg-blend-normal", { "background-blend-mode": "normal" }],
   ["bg-clip-border", { "-webkit-background-clip": "border-box", "background-attachment": "border-box" }],
   ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-attachment": "content-box" }],
   ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-attachment": "padding-box" }],
   ["bg-clip-text", { "-webkit-background-clip": "text", "background-attachment": "text" }],
-  [/^from-(.+)$/, colorResolver("from")],
-  [/^to-(.+)$/, colorResolver("to")],
-  [/^via-(.+)$/, colorResolver("via")],
-  [/^from-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-from-opacity": utils.handler.bracket.percent(opacity) })],
-  [/^to-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-to-opacity": utils.handler.bracket.percent(opacity) })],
-  [/^via-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-via-opacity": utils.handler.bracket.percent(opacity) })],
-  ["bg-none", { "background-image": "none" }],
-  ["bg-gradient-to-t", {
-    "background-image": "linear-gradient(to top, var(--un-gradient-stops))"
-  }],
-  ["bg-gradient-to-tr", {
-    "background-image": "linear-gradient(to top right, var(--un-gradient-stops))"
-  }],
-  ["bg-gradient-to-r", {
-    "background-image": "linear-gradient(to right, var(--un-gradient-stops))"
-  }],
-  ["bg-gradient-to-br", {
-    "background-image": "linear-gradient(to bottom right, var(--un-gradient-stops))"
-  }],
-  ["bg-gradient-to-b", {
-    "background-image": "linear-gradient(to bottom, var(--un-gradient-stops))"
-  }],
-  ["bg-gradient-to-bl", {
-    "background-image": "linear-gradient(to bottom left, var(--un-gradient-stops))"
-  }],
-  ["bg-gradient-to-l", {
-    "background-image": "linear-gradient(to left, var(--un-gradient-stops))"
-  }],
-  ["bg-gradient-to-tl", {
-    "background-image": "linear-gradient(to top left, var(--un-gradient-stops))"
+  [/^(?:bg-gradient-)?from-(.+)$/, colorResolver("from")],
+  [/^(?:bg-gradient-)?to-(.+)$/, colorResolver("to")],
+  [/^(?:bg-gradient-)?via-(.+)$/, colorResolver("via")],
+  [/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": utils.handler.bracket.percent(opacity) })],
+  [/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": utils.handler.bracket.percent(opacity) })],
+  [/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": utils.handler.bracket.percent(opacity) })],
+  [/^bg-gradient-to-([trbl]{1,2})$/, ([, d]) => {
+    const v = bgGradientDirections[d];
+    if (v)
+      return { "background-image": `linear-gradient(to ${v}, var(--un-gradient-stops))` };
   }],
+  ["bg-none", { "background-image": "none" }],
   ["bg-origin-border", { "background-origin": "border-box" }],
   ["bg-origin-padding", { "background-origin": "padding-box" }],
   ["bg-origin-content", { "background-origin": "content-box" }],
@@ -286,36 +281,37 @@ const backgroundStyles = [
   ["bg-contain", { "background-size": "contain" }]
 ];
 
-const listStyleProps = ["none", "disc", "circle", "square", "decimal", "zero-decimal", "greek", "roman", "upper-roman", "alpha", "upper-alpha"];
+const listStyleProps = ["disc", "circle", "square", "decimal", "zero-decimal", "greek", "roman", "upper-roman", "alpha", "upper-alpha"];
 const listStyle = [
-  [new RegExp(`^list-((${listStyleProps.join("|")})(?:(-outside|-inside))?)$`), ([, value]) => {
+  [new RegExp(`^list-((?:${listStyleProps.join("|")})(?:-outside|-inside)?)$`), ([, value]) => {
     const style = value.split(/-outside|-inside/)[0];
-    const position = /inside|outside/.exec(value) ?? [];
+    const position = /outside|inside/.exec(value) ?? [];
     if (position.length) {
       return {
         "list-style-position": `${position[0]}`,
-        "list-style-type": `${style}`
+        "list-style-type": style
       };
     }
-    return {
-      "list-style-type": `${style}`
-    };
+    return { "list-style-type": style };
   }],
-  [/^list-(inside|outside)$/, ([, value]) => {
-    return {
-      "list-style-position": value
-    };
-  }]
+  [/^list-(outside|inside)$/, ([, value]) => ({ "list-style-position": value })],
+  ["list-none", { "list-style-type": "none" }]
 ];
 const boxDecorationBreaks = [
   ["decoration-slice", { "box-decoration-break": "slice" }],
   ["decoration-clone", { "box-decoration-break": "clone" }]
 ];
+const accentOpacity = [
+  [/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": utils.handler.bracket.percent(d) })]
+];
+const accentColors = [
+  [/^accent-(.+)$/, utils.colorResolver("accent-color", "accent")]
+];
 const caretOpacity = [
   [/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": utils.handler.bracket.percent(d) })]
 ];
 const caretColors = [
-  [/^caret-(.+)$/, rules$1.colorResolver("caret-color", "caret")]
+  [/^caret-(.+)$/, utils.colorResolver("caret-color", "caret")]
 ];
 const imageRenderings = [
   ["image-render-auto", { "image-rendering": "auto" }],
@@ -329,7 +325,6 @@ const imageRenderings = [
   ]]
 ];
 const overflowValues = [
-  "none",
   "auto",
   "hidden",
   "visible",
@@ -338,7 +333,42 @@ const overflowValues = [
 ];
 const overscrolls = [
   [/^overscroll-(.+)$/, ([, v]) => overflowValues.includes(v) ? { "overscroll-behavior": v } : void 0],
-  [/^overscroll-([xy])-(.+)$/, ([, d, v]) => overflowValues.includes(v) ? { [`overscroll-behavior-${d}`]: v } : void 0]
+  ["overscroll-none", { "overscroll-behavior": "none" }],
+  [/^overscroll-([xy])-(.+)$/, ([, d, v]) => overflowValues.includes(v) ? { [`overscroll-behavior-${d}`]: v } : void 0],
+  ["overscroll-x-none", { "overscroll-behavior-x": "none" }],
+  ["overscroll-y-none", { "overscroll-behavior-y": "none" }]
+];
+const scrollBehaviors = [
+  ["scroll-auto", { "scroll-behavior": "auto" }],
+  ["scroll-smooth", { "scroll-behavior": "smooth" }]
+];
+
+const columns = [
+  [/^columns-(.+)$/, ([, v]) => {
+    const column = utils.handler.bracket.global.number.auto.numberWithUnit(v);
+    if (column)
+      return { column };
+  }],
+  ["break-before-auto", { "break-before": "auto" }],
+  ["break-before-avoid", { "break-before": "avoid" }],
+  ["break-before-all", { "break-before": "all" }],
+  ["break-before-avoid-page", { "break-before": "avoid-page" }],
+  ["break-before-page", { "break-before": "page" }],
+  ["break-before-left", { "break-before": "left" }],
+  ["break-before-right", { "break-before": "right" }],
+  ["break-before-column", { "break-before": "column" }],
+  ["break-inside-auto", { "break-inside": "auto" }],
+  ["break-inside-avoid", { "break-inside": "avoid" }],
+  ["break-inside-avoid-page", { "break-inside": "avoid-page" }],
+  ["break-inside-avoid-column", { "break-inside": "avoid-column" }],
+  ["break-after-auto", { "break-after": "auto" }],
+  ["break-after-avoid", { "break-after": "avoid" }],
+  ["break-after-all", { "break-after": "all" }],
+  ["break-after-avoid-page", { "break-after": "avoid-page" }],
+  ["break-after-page", { "break-after": "page" }],
+  ["break-after-left", { "break-after": "left" }],
+  ["break-after-right", { "break-after": "right" }],
+  ["break-after-column", { "break-after": "column" }]
 ];
 
 const queryMatcher = /@media \(min-width: (.+)\)/;
@@ -375,34 +405,33 @@ const containerShortcuts = [
   }]
 ];
 
-const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
 const filterContnet = "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia) var(--un-drop-shadow)";
 const filterBase = {
-  "--un-blur": varEmpty,
-  "--un-brightness": varEmpty,
-  "--un-contrast": varEmpty,
-  "--un-grayscale": varEmpty,
-  "--un-hue-rotate": varEmpty,
-  "--un-invert": varEmpty,
-  "--un-saturate": varEmpty,
-  "--un-sepia": varEmpty,
-  "--un-drop-shadow": varEmpty,
+  "--un-blur": rules$1.varEmpty,
+  "--un-brightness": rules$1.varEmpty,
+  "--un-contrast": rules$1.varEmpty,
+  "--un-grayscale": rules$1.varEmpty,
+  "--un-hue-rotate": rules$1.varEmpty,
+  "--un-invert": rules$1.varEmpty,
+  "--un-saturate": rules$1.varEmpty,
+  "--un-sepia": rules$1.varEmpty,
+  "--un-drop-shadow": rules$1.varEmpty,
   "filter": filterContnet,
-  [variants.CONTROL_BYPASS_PSEUDO]: ""
+  [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const backdropFilterContent = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
 const backdropFilterBase = {
-  "--un-backdrop-blur": varEmpty,
-  "--un-backdrop-brightness": varEmpty,
-  "--un-backdrop-contrast": varEmpty,
-  "--un-backdrop-grayscale": varEmpty,
-  "--un-backdrop-hue-rotate": varEmpty,
-  "--un-backdrop-invert": varEmpty,
-  "--un-backdrop-saturate": varEmpty,
-  "--un-backdrop-sepia": varEmpty,
+  "--un-backdrop-blur": rules$1.varEmpty,
+  "--un-backdrop-brightness": rules$1.varEmpty,
+  "--un-backdrop-contrast": rules$1.varEmpty,
+  "--un-backdrop-grayscale": rules$1.varEmpty,
+  "--un-backdrop-hue-rotate": rules$1.varEmpty,
+  "--un-backdrop-invert": rules$1.varEmpty,
+  "--un-backdrop-saturate": rules$1.varEmpty,
+  "--un-backdrop-sepia": rules$1.varEmpty,
   "-webkit-backdrop-filter": backdropFilterContent,
   "backdrop-filter": backdropFilterContent,
-  [variants.CONTROL_BYPASS_PSEUDO]: ""
+  [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const percentWithDefault = (defaultValue = "1") => (str) => {
   const v = str ? utils.handler.bracket.percent(str) : defaultValue;
@@ -419,12 +448,7 @@ const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
 };
 const filters = [
   ["filter", filterBase],
-  ["filter-none", { filter: "none" }],
   ["backdrop-filter", backdropFilterBase],
-  ["backdrop-filter-none", {
-    "-webkit-backdrop-filter": "none",
-    "backdrop-filter": "none"
-  }],
   [/^(backdrop-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || utils.handler.bracket.px(s))],
   [/^(backdrop-)?brightness-(\d+)$/, toFilter("brightness", (s) => utils.handler.bracket.percent(s))],
   [/^(backdrop-)?contrast-(\d+)$/, toFilter("contrast", (s) => utils.handler.bracket.percent(s))],
@@ -437,11 +461,15 @@ const filters = [
   [/^(backdrop-)?hue-rotate-(\d+)$/, toFilter("hue-rotate", (s) => `${utils.handler.bracket.number(s)}deg`)],
   [/^(backdrop-)?invert(?:-(\d+))?$/, toFilter("invert", percentWithDefault())],
   [/^(backdrop-)?saturate(?:-(\d+))?$/, toFilter("saturate", percentWithDefault("0"))],
-  [/^(backdrop-)?sepia(?:-(\d+))?$/, toFilter("sepia", percentWithDefault())]
+  [/^(backdrop-)?sepia(?:-(\d+))?$/, toFilter("sepia", percentWithDefault())],
+  ["filter-none", { filter: "none" }],
+  ["backdrop-filter-none", {
+    "-webkit-backdrop-filter": "none",
+    "backdrop-filter": "none"
+  }]
 ];
 
 const mixBlendModes = [
-  ["mix-blend-normal", { "mix-blend-mode": "normal" }],
   ["mix-blend-multiply", { "mix-blend-mode": "multiply" }],
   ["mix-blend-screen", { "mix-blend-mode": "screen" }],
   ["mix-blend-overlay", { "mix-blend-mode": "overlay" }],
@@ -456,20 +484,16 @@ const mixBlendModes = [
   ["mix-blend-hue", { "mix-blend-mode": "hue" }],
   ["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
   ["mix-blend-color", { "mix-blend-mode": "color" }],
-  ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }]
+  ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
+  ["mix-blend-normal", { "mix-blend-mode": "normal" }]
 ];
 
-const directionSize = (prefix) => ([_, direction, size]) => {
-  const v = utils.handler.bracket.rem.fraction.cssvar(size);
-  if (v)
-    return utils.directionMap[direction].map((i) => [prefix + i, v]);
-};
 const spaces = [
   [/^space-?([xy])-?(-?.+)$/, (match) => {
     const [, direction, size] = match;
     if (size === "reverse")
       return { [`--un-space-${direction}-reverse`]: 1 };
-    const results = directionSize("margin")(match)?.map((item) => {
+    const results = utils.directionSize("margin")(match)?.map((item) => {
       const value = item[0].endsWith("right") || item[0].endsWith("bottom") ? `calc(${item[1]} * var(--un-space-${direction}-reverse))` : `calc(${item[1]} * calc(1 - var(--un-space-${direction}-reverse)))`;
       return [item[0], value];
     });
@@ -489,11 +513,6 @@ const textTransforms = [
   ["normal-case", { "text-transform": "none" }]
 ];
 const hyphens = [
-  ["hyphens-none", {
-    "-webkit-hyphens": "none",
-    "-ms-hyphens": "none",
-    "hyphens": "none"
-  }],
   ["hyphens-manual", {
     "-webkit-hyphens": "manual",
     "-ms-hyphens": "manual",
@@ -503,17 +522,22 @@ const hyphens = [
     "-webkit-hyphens": "auto",
     "-ms-hyphens": "auto",
     "hyphens": "auto"
+  }],
+  ["hyphens-none", {
+    "-webkit-hyphens": "none",
+    "-ms-hyphens": "none",
+    "hyphens": "none"
   }]
 ];
 const writingModes = [
-  ["write-normal", { "writing-mode": "horizontal-tb" }],
   ["write-vertical-right", { "writing-mode": "vertical-rl" }],
-  ["write-vertical-left", { "writing-mode": "vertical-lr" }]
+  ["write-vertical-left", { "writing-mode": "vertical-lr" }],
+  ["write-normal", { "writing-mode": "horizontal-tb" }]
 ];
 const writingOrientations = [
   ["write-orient-mixed", { "text-orientation": "mixed" }],
-  ["write-orient-upright", { "text-orientation": "upright" }],
-  ["write-orient-sideways", { "text-orientation": "sideways" }]
+  ["write-orient-sideways", { "text-orientation": "sideways" }],
+  ["write-orient-upright", { "text-orientation": "upright" }]
 ];
 const screenReadersAccess = [
   [
@@ -568,16 +592,8 @@ const objectPositions = [
 ];
 
 const tables = [
-  ["border-collapse", { "border-collapse": "collapse" }],
-  ["border-separate", { "border-collapse": "separate" }],
-  ["caption-top", { "caption-side": "top" }],
-  ["caption-bottom", { "caption-side": "bottom" }],
   ["inline-table", { display: "inline-table" }],
   ["table", { display: "table" }],
-  ["table-auto", { "table-layout": "auto" }],
-  ["table-empty-cells-visible", { "empty-cells": "show" }],
-  ["table-empty-cells-hidden", { "empty-cells": "hide" }],
-  ["table-fixed", { "table-layout": "fixed" }],
   ["table-caption", { display: "table-caption" }],
   ["table-cell", { display: "table-cell" }],
   ["table-column", { display: "table-column" }],
@@ -585,7 +601,15 @@ const tables = [
   ["table-footer-group", { display: "table-footer-group" }],
   ["table-header-group", { display: "table-header-group" }],
   ["table-row", { display: "table-row" }],
-  ["table-row-group", { display: "table-row-group" }]
+  ["table-row-group", { display: "table-row-group" }],
+  ["border-collapse", { "border-collapse": "collapse" }],
+  ["border-separate", { "border-collapse": "separate" }],
+  ["caption-top", { "caption-side": "top" }],
+  ["caption-bottom", { "caption-side": "bottom" }],
+  ["table-auto", { "table-layout": "auto" }],
+  ["table-fixed", { "table-layout": "fixed" }],
+  ["table-empty-cells-visible", { "empty-cells": "show" }],
+  ["table-empty-cells-hidden", { "empty-cells": "hide" }]
 ];
 
 const variablesAbbrMap = {
@@ -614,8 +638,8 @@ const cssVariables = [[
 ]];
 
 const divideColors = [
-  [/^divide-(.+)$/, rules$1.colorResolver("border-color", "divide")],
-  [/^divide-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-divide-opacity": utils.handler.bracket.percent(opacity) })]
+  [/^divide-(.+)$/, utils.colorResolver("border-color", "divide")],
+  [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": utils.handler.bracket.percent(opacity) })]
 ];
 const divideSizes = [
   [/^divide-?([xy])$/, handlerDivide],
@@ -665,7 +689,7 @@ const fontVariantNumericBase = {
   "--un-numeric-spacing": rules$1.varEmpty,
   "--un-numeric-fraction": rules$1.varEmpty,
   "font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
-  [variants.CONTROL_BYPASS_PSEUDO]: ""
+  [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const fontVariantNumeric = [
   [/^ordinal$/, () => [fontVariantNumericBase, { "--un-ordinal": "ordinal" }]],
@@ -679,6 +703,67 @@ const fontVariantNumeric = [
   ["normal-nums", { "font-variant-numeric": "normal" }]
 ];
 
+const touchActionBase = {
+  "--un-pan-x": rules$1.varEmpty,
+  "--un-pan-y": rules$1.varEmpty,
+  "--un-pinch-zoom": rules$1.varEmpty,
+  "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)",
+  [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
+};
+const touchActions = [
+  [/^touch-pan-(x|left|right)$/, ([, d]) => [
+    touchActionBase,
+    {
+      "--un-pan-x": `pan-${d}`,
+      "touch-action": "var(--un-touch-action)"
+    }
+  ]],
+  [/^touch-pan-(y|up|down)$/, ([, d]) => [
+    touchActionBase,
+    {
+      "--un-pan-y": `pan-${d}`,
+      "touch-action": "var(--un-touch-action)"
+    }
+  ]],
+  [/^touch-pinch-zoom$/, () => [
+    touchActionBase,
+    {
+      "--un-pinch-zoom": "pinch-zoom",
+      "touch-action": "var(--un-touch-action)"
+    }
+  ]],
+  ["touch-auto", { "touch-action": "auto" }],
+  ["touch-manipulation", { "touch-action": "manipulation" }],
+  ["touch-none", { "touch-action": "none" }]
+];
+
+const scrolls = [
+  [/^snap-(x|y|base)$/, ([, d]) => [
+    {
+      "--un-scroll-snap-strictness": "proximity",
+      [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
+    },
+    {
+      "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
+    }
+  ]],
+  ["snap-mandatory", { "--un-scroll-snap-strictness": "mandatory" }],
+  ["snap-proximity", { "--un-scroll-snap-strictness": "proximity" }],
+  ["snap-none", { "scroll-snap-type": "none" }],
+  ["snap-start", { "scroll-snap-align": "start" }],
+  ["snap-end", { "scroll-snap-align": "end" }],
+  ["snap-center", { "scroll-snap-align": "center" }],
+  ["snap-align-none", { "scroll-snap-align": "none" }],
+  ["snap-normal", { "scroll-snap-stop": "normal" }],
+  ["snap-always", { "scroll-snap-stop": "always" }],
+  [/^scroll-ma?()-?(-?.+)$/, utils.directionSize("scroll-margin")],
+  [/^scroll-m-?([xy])-?(-?.+)$/, utils.directionSize("scroll-margin")],
+  [/^scroll-m-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-margin")],
+  [/^scroll-pa?()-?(-?.+)$/, utils.directionSize("scroll-padding")],
+  [/^scroll-p-?([xy])-?(-?.+)$/, utils.directionSize("scroll-padding")],
+  [/^scroll-p-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-padding")]
+];
+
 const rules = [
   rules$1.cssVariables,
   cssVariables,
@@ -704,10 +789,13 @@ const rules = [
   rules$1.transforms,
   animations,
   rules$1.cursors,
+  touchActions,
   rules$1.userSelects,
   rules$1.resizes,
+  scrolls,
   listStyle,
   rules$1.appearance,
+  columns,
   rules$1.placements,
   rules$1.alignments,
   rules$1.justifies,
@@ -716,6 +804,7 @@ const rules = [
   divides,
   rules$1.overflows,
   overscrolls,
+  scrollBehaviors,
   rules$1.textOverflows,
   rules$1.whitespaces,
   rules$1.breaks,
@@ -723,7 +812,7 @@ const rules = [
   rules$1.bgColors,
   boxDecorationBreaks,
   backgroundStyles,
-  rules$1.fillColors,
+  rules$1.svgUtilities,
   objectPositions,
   rules$1.paddings,
   rules$1.textAligns,
@@ -742,9 +831,10 @@ const rules = [
   hyphens,
   writingModes,
   writingOrientations,
-  rules$1.placeholder,
   caretColors,
   caretOpacity,
+  accentColors,
+  accentOpacity,
   rules$1.opacity,
   mixBlendModes,
   rules$1.boxShadows,
@@ -753,10 +843,32 @@ const rules = [
   imageRenderings,
   filters,
   rules$1.transitions,
+  rules$1.willChange,
   rules$1.contents,
   rules$1.questionMark
 ].flat(1);
 
+const variantColorsScheme = [
+  utils.variantMatcher("\\.dark", (input) => `.dark $$ ${input}`),
+  utils.variantMatcher("\\.light", (input) => `.light $$ ${input}`),
+  (v) => {
+    const dark = utils.variantMatcher("@dark")(v);
+    if (dark) {
+      return {
+        ...dark,
+        parent: "@media (prefers-color-scheme: dark)"
+      };
+    }
+    const light = utils.variantMatcher("@light")(v);
+    if (light) {
+      return {
+        ...light,
+        parent: "@media (prefers-color-scheme: light)"
+      };
+    }
+  }
+];
+
 const presetWind = (options = {}) => ({
   name: "@unocss/preset-wind",
   theme: theme.theme,
@@ -765,8 +877,8 @@ const presetWind = (options = {}) => ({
     ...containerShortcuts
   ],
   variants: [
-    ...variants.variants,
-    ...options.dark === "media" ? variants.variantColorsMedia : variants.variantColorsClass
+    ...variants.variants(options),
+    ...variantColorsScheme
   ],
   options
 });

package/dist/index.d.ts

@@ -7,6 +7,10 @@ interface UnoOptions {
      * @default 'class'
      */
     dark?: 'class' | 'media';
+    /**
+     * @default false
+     */
+    attributifyPseudo?: Boolean;
 }
 declare const presetWind: (options?: UnoOptions) => Preset<Theme>;
 

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import { theme } from '@unocss/preset-mini/theme';
-import { CONTROL_BYPASS_PSEUDO, variants, variantColorsMedia, variantColorsClass } from '@unocss/preset-mini/variants';
+import { CONTROL_BYPASS_PSEUDO_CLASS, variants } from '@unocss/preset-mini/variants';
 import { toArray } from '@unocss/core';
 export { colors, theme } from '@unocss/preset-mini';
-import { parseColorUtil, colorResolver as colorResolver$1, varEmpty as varEmpty$1, cssVariables as cssVariables$1, pointerEvents, appearances, positions, insets, zIndexes, orders, grids, floats, margins, boxSizing, displays, aspectRatio, sizes, flex, transforms, cursors, userSelects, resizes, appearance, placements, alignments, justifies, gaps, overflows, textOverflows, whitespaces, breaks, borders, bgColors, fillColors, paddings, textAligns, textIndents, verticalAligns, fonts, fontStyles, textColors, textDecorations, fontSmoothings, tabSizes, textStrokes, textShadows, placeholder, opacity, boxShadows, outline, rings, transitions, contents, questionMark } from '@unocss/preset-mini/rules';
-import { handler, directionMap } from '@unocss/preset-mini/utils';
+import { varEmpty, cssVariables as cssVariables$1, pointerEvents, appearances, positions, insets, zIndexes, orders, grids, floats, margins, boxSizing, displays, aspectRatio, sizes, flex, transforms, cursors, userSelects, resizes, appearance, placements, alignments, justifies, gaps, overflows, textOverflows, whitespaces, breaks, borders, bgColors, svgUtilities, paddings, textAligns, textIndents, verticalAligns, fonts, fontStyles, textColors, textDecorations, fontSmoothings, tabSizes, textStrokes, textShadows, opacity, boxShadows, outline, rings, transitions, willChange, contents, questionMark } from '@unocss/preset-mini/rules';
+import { handler, parseColor, colorResolver as colorResolver$1, directionSize, directionMap, variantMatcher } from '@unocss/preset-mini/utils';
 
 const keyframes = {
   "pulse": "{0%, 100% {opacity:1} 50% {opacity:.5}}",
@@ -154,25 +154,29 @@ const properties = {
   "zoom-out-up": { "transform-origin": "center bottom" }
 };
 const animations = [
-  [/^animate-(.*)$/, ([, name], { constructCSS }) => {
+  [/^animate-(.+)$/, ([, name], { constructCSS }) => {
     const kf = keyframes[name];
     if (kf) {
       return `@keyframes ${name}${kf}
 ${constructCSS(Object.assign({ animation: `${name} ${durations[name] || "1s"} ${timingFns[name] || "linear"} infinite` }, properties[name]))}`;
     }
   }],
-  ["animate-none", { animation: "none" }],
   [/^animate(?:-duration)?-((.+)(?:(s|ms)?))$/, ([, d]) => ({ "animation-duration": handler.bracket.time(d.replace(/-duration/, "")) })],
   [/^animate-delay-((.+)(?:(s|ms)?))$/, ([, d]) => ({ "animation-delay": handler.bracket.time(d) })],
-  [/^animate-(?:fill-)?mode-(none|forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
-  [/^animate-(?:direction-)?(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
+  [/^animate-(?:fill-)?mode-(forwards|backwards|both|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-fill-mode": d })],
+  ["animate-mode-none", { "animation-fill-mode": "none" }],
+  ["animate-fill-mode-none", { "animation-fill-mode": "none" }],
+  [/^animate-(?:direction-)?(reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-direction": d })],
+  ["animate-normal", { "animation-direction": "normal" }],
+  ["animate-direction-normal", { "animation-direction": "normal" }],
   [/^animate-(?:iteration-)?count-(.+)$/, ([, d]) => ({ "animation-iteration-count": d.replace(/\-/g, ", ") })],
   [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": d })],
-  [/^animate-play(?:-state)?-(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })]
+  [/^animate-play(?:-state)?-(paused|running|inherit|initial|revert|unset)$/, ([, d]) => ({ "animation-play-state": d })],
+  ["animate-none", { animation: "none" }]
 ];
 
 const colorResolver = (mode) => ([, body], { theme }) => {
-  const data = parseColorUtil(body, theme);
+  const data = parseColor(body, theme);
   if (!data)
     return;
   const { opacity, color, rgba } = data;
@@ -204,11 +208,20 @@ const colorResolver = (mode) => ([, body], { theme }) => {
       };
   }
 };
+const bgGradientDirections = {
+  t: "top",
+  tr: "top right",
+  r: "right",
+  br: "bottom right",
+  b: "bottom",
+  bl: "bottom left",
+  l: "left",
+  tl: "top left"
+};
 const backgroundStyles = [
   ["bg-fixed", { "background-attachment": "fixed" }],
   ["bg-local", { "background-attachment": "local" }],
   ["bg-scroll", { "background-attachment": "scroll" }],
-  ["bg-blend-normal", { "background-blend-mode": "normal" }],
   ["bg-blend-multiply", { "background-blend-mode": "multiply" }],
   ["bg-blend-screen", { "background-blend-mode": "screen" }],
   ["bg-blend-overlay", { "background-blend-mode": "overlay" }],
@@ -224,41 +237,23 @@ const backgroundStyles = [
   ["bg-blend-saturation", { "background-blend-mode": "saturation" }],
   ["bg-blend-color", { "background-blend-mode": "color" }],
   ["bg-blend-luminosity", { "background-blend-mode": "luminosity" }],
+  ["bg-blend-normal", { "background-blend-mode": "normal" }],
   ["bg-clip-border", { "-webkit-background-clip": "border-box", "background-attachment": "border-box" }],
   ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-attachment": "content-box" }],
   ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-attachment": "padding-box" }],
   ["bg-clip-text", { "-webkit-background-clip": "text", "background-attachment": "text" }],
-  [/^from-(.+)$/, colorResolver("from")],
-  [/^to-(.+)$/, colorResolver("to")],
-  [/^via-(.+)$/, colorResolver("via")],
-  [/^from-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-from-opacity": handler.bracket.percent(opacity) })],
-  [/^to-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-to-opacity": handler.bracket.percent(opacity) })],
-  [/^via-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-via-opacity": handler.bracket.percent(opacity) })],
-  ["bg-none", { "background-image": "none" }],
-  ["bg-gradient-to-t", {
-    "background-image": "linear-gradient(to top, var(--un-gradient-stops))"
-  }],
-  ["bg-gradient-to-tr", {
-    "background-image": "linear-gradient(to top right, var(--un-gradient-stops))"
-  }],
-  ["bg-gradient-to-r", {
-    "background-image": "linear-gradient(to right, var(--un-gradient-stops))"
-  }],
-  ["bg-gradient-to-br", {
-    "background-image": "linear-gradient(to bottom right, var(--un-gradient-stops))"
-  }],
-  ["bg-gradient-to-b", {
-    "background-image": "linear-gradient(to bottom, var(--un-gradient-stops))"
-  }],
-  ["bg-gradient-to-bl", {
-    "background-image": "linear-gradient(to bottom left, var(--un-gradient-stops))"
-  }],
-  ["bg-gradient-to-l", {
-    "background-image": "linear-gradient(to left, var(--un-gradient-stops))"
-  }],
-  ["bg-gradient-to-tl", {
-    "background-image": "linear-gradient(to top left, var(--un-gradient-stops))"
+  [/^(?:bg-gradient-)?from-(.+)$/, colorResolver("from")],
+  [/^(?:bg-gradient-)?to-(.+)$/, colorResolver("to")],
+  [/^(?:bg-gradient-)?via-(.+)$/, colorResolver("via")],
+  [/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": handler.bracket.percent(opacity) })],
+  [/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": handler.bracket.percent(opacity) })],
+  [/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": handler.bracket.percent(opacity) })],
+  [/^bg-gradient-to-([trbl]{1,2})$/, ([, d]) => {
+    const v = bgGradientDirections[d];
+    if (v)
+      return { "background-image": `linear-gradient(to ${v}, var(--un-gradient-stops))` };
   }],
+  ["bg-none", { "background-image": "none" }],
   ["bg-origin-border", { "background-origin": "border-box" }],
   ["bg-origin-padding", { "background-origin": "padding-box" }],
   ["bg-origin-content", { "background-origin": "content-box" }],
@@ -282,31 +277,32 @@ const backgroundStyles = [
   ["bg-contain", { "background-size": "contain" }]
 ];
 
-const listStyleProps = ["none", "disc", "circle", "square", "decimal", "zero-decimal", "greek", "roman", "upper-roman", "alpha", "upper-alpha"];
+const listStyleProps = ["disc", "circle", "square", "decimal", "zero-decimal", "greek", "roman", "upper-roman", "alpha", "upper-alpha"];
 const listStyle = [
-  [new RegExp(`^list-((${listStyleProps.join("|")})(?:(-outside|-inside))?)$`), ([, value]) => {
+  [new RegExp(`^list-((?:${listStyleProps.join("|")})(?:-outside|-inside)?)$`), ([, value]) => {
     const style = value.split(/-outside|-inside/)[0];
-    const position = /inside|outside/.exec(value) ?? [];
+    const position = /outside|inside/.exec(value) ?? [];
     if (position.length) {
       return {
         "list-style-position": `${position[0]}`,
-        "list-style-type": `${style}`
+        "list-style-type": style
       };
     }
-    return {
-      "list-style-type": `${style}`
-    };
+    return { "list-style-type": style };
   }],
-  [/^list-(inside|outside)$/, ([, value]) => {
-    return {
-      "list-style-position": value
-    };
-  }]
+  [/^list-(outside|inside)$/, ([, value]) => ({ "list-style-position": value })],
+  ["list-none", { "list-style-type": "none" }]
 ];
 const boxDecorationBreaks = [
   ["decoration-slice", { "box-decoration-break": "slice" }],
   ["decoration-clone", { "box-decoration-break": "clone" }]
 ];
+const accentOpacity = [
+  [/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": handler.bracket.percent(d) })]
+];
+const accentColors = [
+  [/^accent-(.+)$/, colorResolver$1("accent-color", "accent")]
+];
 const caretOpacity = [
   [/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": handler.bracket.percent(d) })]
 ];
@@ -325,7 +321,6 @@ const imageRenderings = [
   ]]
 ];
 const overflowValues = [
-  "none",
   "auto",
   "hidden",
   "visible",
@@ -334,7 +329,42 @@ const overflowValues = [
 ];
 const overscrolls = [
   [/^overscroll-(.+)$/, ([, v]) => overflowValues.includes(v) ? { "overscroll-behavior": v } : void 0],
-  [/^overscroll-([xy])-(.+)$/, ([, d, v]) => overflowValues.includes(v) ? { [`overscroll-behavior-${d}`]: v } : void 0]
+  ["overscroll-none", { "overscroll-behavior": "none" }],
+  [/^overscroll-([xy])-(.+)$/, ([, d, v]) => overflowValues.includes(v) ? { [`overscroll-behavior-${d}`]: v } : void 0],
+  ["overscroll-x-none", { "overscroll-behavior-x": "none" }],
+  ["overscroll-y-none", { "overscroll-behavior-y": "none" }]
+];
+const scrollBehaviors = [
+  ["scroll-auto", { "scroll-behavior": "auto" }],
+  ["scroll-smooth", { "scroll-behavior": "smooth" }]
+];
+
+const columns = [
+  [/^columns-(.+)$/, ([, v]) => {
+    const column = handler.bracket.global.number.auto.numberWithUnit(v);
+    if (column)
+      return { column };
+  }],
+  ["break-before-auto", { "break-before": "auto" }],
+  ["break-before-avoid", { "break-before": "avoid" }],
+  ["break-before-all", { "break-before": "all" }],
+  ["break-before-avoid-page", { "break-before": "avoid-page" }],
+  ["break-before-page", { "break-before": "page" }],
+  ["break-before-left", { "break-before": "left" }],
+  ["break-before-right", { "break-before": "right" }],
+  ["break-before-column", { "break-before": "column" }],
+  ["break-inside-auto", { "break-inside": "auto" }],
+  ["break-inside-avoid", { "break-inside": "avoid" }],
+  ["break-inside-avoid-page", { "break-inside": "avoid-page" }],
+  ["break-inside-avoid-column", { "break-inside": "avoid-column" }],
+  ["break-after-auto", { "break-after": "auto" }],
+  ["break-after-avoid", { "break-after": "avoid" }],
+  ["break-after-all", { "break-after": "all" }],
+  ["break-after-avoid-page", { "break-after": "avoid-page" }],
+  ["break-after-page", { "break-after": "page" }],
+  ["break-after-left", { "break-after": "left" }],
+  ["break-after-right", { "break-after": "right" }],
+  ["break-after-column", { "break-after": "column" }]
 ];
 
 const queryMatcher = /@media \(min-width: (.+)\)/;
@@ -371,7 +401,6 @@ const containerShortcuts = [
   }]
 ];
 
-const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
 const filterContnet = "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia) var(--un-drop-shadow)";
 const filterBase = {
   "--un-blur": varEmpty,
@@ -384,7 +413,7 @@ const filterBase = {
   "--un-sepia": varEmpty,
   "--un-drop-shadow": varEmpty,
   "filter": filterContnet,
-  [CONTROL_BYPASS_PSEUDO]: ""
+  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const backdropFilterContent = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
 const backdropFilterBase = {
@@ -398,7 +427,7 @@ const backdropFilterBase = {
   "--un-backdrop-sepia": varEmpty,
   "-webkit-backdrop-filter": backdropFilterContent,
   "backdrop-filter": backdropFilterContent,
-  [CONTROL_BYPASS_PSEUDO]: ""
+  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const percentWithDefault = (defaultValue = "1") => (str) => {
   const v = str ? handler.bracket.percent(str) : defaultValue;
@@ -415,12 +444,7 @@ const toFilter = (varName, resolver) => ([, b, s], { theme }) => {
 };
 const filters = [
   ["filter", filterBase],
-  ["filter-none", { filter: "none" }],
   ["backdrop-filter", backdropFilterBase],
-  ["backdrop-filter-none", {
-    "-webkit-backdrop-filter": "none",
-    "backdrop-filter": "none"
-  }],
   [/^(backdrop-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || handler.bracket.px(s))],
   [/^(backdrop-)?brightness-(\d+)$/, toFilter("brightness", (s) => handler.bracket.percent(s))],
   [/^(backdrop-)?contrast-(\d+)$/, toFilter("contrast", (s) => handler.bracket.percent(s))],
@@ -433,11 +457,15 @@ const filters = [
   [/^(backdrop-)?hue-rotate-(\d+)$/, toFilter("hue-rotate", (s) => `${handler.bracket.number(s)}deg`)],
   [/^(backdrop-)?invert(?:-(\d+))?$/, toFilter("invert", percentWithDefault())],
   [/^(backdrop-)?saturate(?:-(\d+))?$/, toFilter("saturate", percentWithDefault("0"))],
-  [/^(backdrop-)?sepia(?:-(\d+))?$/, toFilter("sepia", percentWithDefault())]
+  [/^(backdrop-)?sepia(?:-(\d+))?$/, toFilter("sepia", percentWithDefault())],
+  ["filter-none", { filter: "none" }],
+  ["backdrop-filter-none", {
+    "-webkit-backdrop-filter": "none",
+    "backdrop-filter": "none"
+  }]
 ];
 
 const mixBlendModes = [
-  ["mix-blend-normal", { "mix-blend-mode": "normal" }],
   ["mix-blend-multiply", { "mix-blend-mode": "multiply" }],
   ["mix-blend-screen", { "mix-blend-mode": "screen" }],
   ["mix-blend-overlay", { "mix-blend-mode": "overlay" }],
@@ -452,14 +480,10 @@ const mixBlendModes = [
   ["mix-blend-hue", { "mix-blend-mode": "hue" }],
   ["mix-blend-saturation", { "mix-blend-mode": "saturation" }],
   ["mix-blend-color", { "mix-blend-mode": "color" }],
-  ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }]
+  ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }],
+  ["mix-blend-normal", { "mix-blend-mode": "normal" }]
 ];
 
-const directionSize = (prefix) => ([_, direction, size]) => {
-  const v = handler.bracket.rem.fraction.cssvar(size);
-  if (v)
-    return directionMap[direction].map((i) => [prefix + i, v]);
-};
 const spaces = [
   [/^space-?([xy])-?(-?.+)$/, (match) => {
     const [, direction, size] = match;
@@ -485,11 +509,6 @@ const textTransforms = [
   ["normal-case", { "text-transform": "none" }]
 ];
 const hyphens = [
-  ["hyphens-none", {
-    "-webkit-hyphens": "none",
-    "-ms-hyphens": "none",
-    "hyphens": "none"
-  }],
   ["hyphens-manual", {
     "-webkit-hyphens": "manual",
     "-ms-hyphens": "manual",
@@ -499,17 +518,22 @@ const hyphens = [
     "-webkit-hyphens": "auto",
     "-ms-hyphens": "auto",
     "hyphens": "auto"
+  }],
+  ["hyphens-none", {
+    "-webkit-hyphens": "none",
+    "-ms-hyphens": "none",
+    "hyphens": "none"
   }]
 ];
 const writingModes = [
-  ["write-normal", { "writing-mode": "horizontal-tb" }],
   ["write-vertical-right", { "writing-mode": "vertical-rl" }],
-  ["write-vertical-left", { "writing-mode": "vertical-lr" }]
+  ["write-vertical-left", { "writing-mode": "vertical-lr" }],
+  ["write-normal", { "writing-mode": "horizontal-tb" }]
 ];
 const writingOrientations = [
   ["write-orient-mixed", { "text-orientation": "mixed" }],
-  ["write-orient-upright", { "text-orientation": "upright" }],
-  ["write-orient-sideways", { "text-orientation": "sideways" }]
+  ["write-orient-sideways", { "text-orientation": "sideways" }],
+  ["write-orient-upright", { "text-orientation": "upright" }]
 ];
 const screenReadersAccess = [
   [
@@ -564,16 +588,8 @@ const objectPositions = [
 ];
 
 const tables = [
-  ["border-collapse", { "border-collapse": "collapse" }],
-  ["border-separate", { "border-collapse": "separate" }],
-  ["caption-top", { "caption-side": "top" }],
-  ["caption-bottom", { "caption-side": "bottom" }],
   ["inline-table", { display: "inline-table" }],
   ["table", { display: "table" }],
-  ["table-auto", { "table-layout": "auto" }],
-  ["table-empty-cells-visible", { "empty-cells": "show" }],
-  ["table-empty-cells-hidden", { "empty-cells": "hide" }],
-  ["table-fixed", { "table-layout": "fixed" }],
   ["table-caption", { display: "table-caption" }],
   ["table-cell", { display: "table-cell" }],
   ["table-column", { display: "table-column" }],
@@ -581,7 +597,15 @@ const tables = [
   ["table-footer-group", { display: "table-footer-group" }],
   ["table-header-group", { display: "table-header-group" }],
   ["table-row", { display: "table-row" }],
-  ["table-row-group", { display: "table-row-group" }]
+  ["table-row-group", { display: "table-row-group" }],
+  ["border-collapse", { "border-collapse": "collapse" }],
+  ["border-separate", { "border-collapse": "separate" }],
+  ["caption-top", { "caption-side": "top" }],
+  ["caption-bottom", { "caption-side": "bottom" }],
+  ["table-auto", { "table-layout": "auto" }],
+  ["table-fixed", { "table-layout": "fixed" }],
+  ["table-empty-cells-visible", { "empty-cells": "show" }],
+  ["table-empty-cells-hidden", { "empty-cells": "hide" }]
 ];
 
 const variablesAbbrMap = {
@@ -611,7 +635,7 @@ const cssVariables = [[
 
 const divideColors = [
   [/^divide-(.+)$/, colorResolver$1("border-color", "divide")],
-  [/^divide-op(?:acity)?-?(.+)$/m, ([, opacity]) => ({ "--un-divide-opacity": handler.bracket.percent(opacity) })]
+  [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": handler.bracket.percent(opacity) })]
 ];
 const divideSizes = [
   [/^divide-?([xy])$/, handlerDivide],
@@ -655,13 +679,13 @@ const lineClamps = [
 ];
 
 const fontVariantNumericBase = {
-  "--un-ordinal": varEmpty$1,
-  "--un-slashed-zero": varEmpty$1,
-  "--un-numeric-figure": varEmpty$1,
-  "--un-numeric-spacing": varEmpty$1,
-  "--un-numeric-fraction": varEmpty$1,
+  "--un-ordinal": varEmpty,
+  "--un-slashed-zero": varEmpty,
+  "--un-numeric-figure": varEmpty,
+  "--un-numeric-spacing": varEmpty,
+  "--un-numeric-fraction": varEmpty,
   "font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
-  [CONTROL_BYPASS_PSEUDO]: ""
+  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const fontVariantNumeric = [
   [/^ordinal$/, () => [fontVariantNumericBase, { "--un-ordinal": "ordinal" }]],
@@ -675,6 +699,67 @@ const fontVariantNumeric = [
   ["normal-nums", { "font-variant-numeric": "normal" }]
 ];
 
+const touchActionBase = {
+  "--un-pan-x": varEmpty,
+  "--un-pan-y": varEmpty,
+  "--un-pinch-zoom": varEmpty,
+  "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)",
+  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
+};
+const touchActions = [
+  [/^touch-pan-(x|left|right)$/, ([, d]) => [
+    touchActionBase,
+    {
+      "--un-pan-x": `pan-${d}`,
+      "touch-action": "var(--un-touch-action)"
+    }
+  ]],
+  [/^touch-pan-(y|up|down)$/, ([, d]) => [
+    touchActionBase,
+    {
+      "--un-pan-y": `pan-${d}`,
+      "touch-action": "var(--un-touch-action)"
+    }
+  ]],
+  [/^touch-pinch-zoom$/, () => [
+    touchActionBase,
+    {
+      "--un-pinch-zoom": "pinch-zoom",
+      "touch-action": "var(--un-touch-action)"
+    }
+  ]],
+  ["touch-auto", { "touch-action": "auto" }],
+  ["touch-manipulation", { "touch-action": "manipulation" }],
+  ["touch-none", { "touch-action": "none" }]
+];
+
+const scrolls = [
+  [/^snap-(x|y|base)$/, ([, d]) => [
+    {
+      "--un-scroll-snap-strictness": "proximity",
+      [CONTROL_BYPASS_PSEUDO_CLASS]: ""
+    },
+    {
+      "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
+    }
+  ]],
+  ["snap-mandatory", { "--un-scroll-snap-strictness": "mandatory" }],
+  ["snap-proximity", { "--un-scroll-snap-strictness": "proximity" }],
+  ["snap-none", { "scroll-snap-type": "none" }],
+  ["snap-start", { "scroll-snap-align": "start" }],
+  ["snap-end", { "scroll-snap-align": "end" }],
+  ["snap-center", { "scroll-snap-align": "center" }],
+  ["snap-align-none", { "scroll-snap-align": "none" }],
+  ["snap-normal", { "scroll-snap-stop": "normal" }],
+  ["snap-always", { "scroll-snap-stop": "always" }],
+  [/^scroll-ma?()-?(-?.+)$/, directionSize("scroll-margin")],
+  [/^scroll-m-?([xy])-?(-?.+)$/, directionSize("scroll-margin")],
+  [/^scroll-m-?([rltb])-?(-?.+)$/, directionSize("scroll-margin")],
+  [/^scroll-pa?()-?(-?.+)$/, directionSize("scroll-padding")],
+  [/^scroll-p-?([xy])-?(-?.+)$/, directionSize("scroll-padding")],
+  [/^scroll-p-?([rltb])-?(-?.+)$/, directionSize("scroll-padding")]
+];
+
 const rules = [
   cssVariables$1,
   cssVariables,
@@ -700,10 +785,13 @@ const rules = [
   transforms,
   animations,
   cursors,
+  touchActions,
   userSelects,
   resizes,
+  scrolls,
   listStyle,
   appearance,
+  columns,
   placements,
   alignments,
   justifies,
@@ -712,6 +800,7 @@ const rules = [
   divides,
   overflows,
   overscrolls,
+  scrollBehaviors,
   textOverflows,
   whitespaces,
   breaks,
@@ -719,7 +808,7 @@ const rules = [
   bgColors,
   boxDecorationBreaks,
   backgroundStyles,
-  fillColors,
+  svgUtilities,
   objectPositions,
   paddings,
   textAligns,
@@ -738,9 +827,10 @@ const rules = [
   hyphens,
   writingModes,
   writingOrientations,
-  placeholder,
   caretColors,
   caretOpacity,
+  accentColors,
+  accentOpacity,
   opacity,
   mixBlendModes,
   boxShadows,
@@ -749,10 +839,32 @@ const rules = [
   imageRenderings,
   filters,
   transitions,
+  willChange,
   contents,
   questionMark
 ].flat(1);
 
+const variantColorsScheme = [
+  variantMatcher("\\.dark", (input) => `.dark $$ ${input}`),
+  variantMatcher("\\.light", (input) => `.light $$ ${input}`),
+  (v) => {
+    const dark = variantMatcher("@dark")(v);
+    if (dark) {
+      return {
+        ...dark,
+        parent: "@media (prefers-color-scheme: dark)"
+      };
+    }
+    const light = variantMatcher("@light")(v);
+    if (light) {
+      return {
+        ...light,
+        parent: "@media (prefers-color-scheme: light)"
+      };
+    }
+  }
+];
+
 const presetWind = (options = {}) => ({
   name: "@unocss/preset-wind",
   theme,
@@ -761,8 +873,8 @@ const presetWind = (options = {}) => ({
     ...containerShortcuts
   ],
   variants: [
-    ...variants,
-    ...options.dark === "media" ? variantColorsMedia : variantColorsClass
+    ...variants(options),
+    ...variantColorsScheme
   ],
   options
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-wind",
-  "version": "0.16.3",
+  "version": "0.18.0",
   "description": "Tailwind / Windi CSS compact preset for UnoCSS",
   "keywords": [
     "unocss",
@@ -35,8 +35,8 @@
     "*.css"
   ],
   "dependencies": {
-    "@unocss/core": "0.16.3",
-    "@unocss/preset-mini": "0.16.3"
+    "@unocss/core": "0.18.0",
+    "@unocss/preset-mini": "0.18.0"
   },
   "scripts": {
     "build": "unbuild",