@unocss/preset-mini 0.57.6 → 0.58.0

package/dist/rules.mjs

@@ -1,8 +1,8 @@
-import { g as globalKeywords, h, c as colorResolver, e as directionMap, a as hasParseableColor, f as cornerMap, p as parseColor, i as isCSSMathFn, n as numberWithUnitRE, j as isSize, m as makeGlobalStaticRules, s as splitShorthand, b as colorableShadows, k as insetMap, r as resolveBreakpoints, l as directionSize } from './shared/preset-mini.Stl9mkMB.mjs';
+import { globalKeywords, h, isCSSMathFn, colorResolver, directionMap, hasParseableColor, cornerMap, parseColor, isSize, makeGlobalStaticRules, colorableShadows, splitShorthand, insetMap, resolveBreakpoints, directionSize } from './utils.mjs';
 import { colorToString, colorOpacityToString, hasThemeFn, transformThemeFn } from '@unocss/rule-utils';
 import { warnOnce, toArray } from '@unocss/core';
-import { d as displays, c as contentVisibility, a as contents, e as textOverflows, f as textTransforms, g as fontStyles, h as fontSmoothings, i as boxShadows, j as rings, k as cursors, l as appearances, p as pointerEvents, m as resizes, u as userSelects, w as whitespaces, n as breaks, o as transforms, q as contains, s as textWraps } from './shared/preset-mini.dPVVIvNm.mjs';
-export { b as boxShadowsBase, r as ringBase, t as transformBase, v as varEmpty } from './shared/preset-mini.dPVVIvNm.mjs';
+import { d as displays, c as contentVisibility, a as contents, e as textOverflows, f as textTransforms, g as fontStyles, h as fontSmoothings, i as boxShadows, j as rings, k as cursors, l as appearances, p as pointerEvents, m as resizes, u as userSelects, w as whitespaces, n as breaks, o as transforms, q as contains, s as textWraps } from './shared/preset-mini.5jRPR_fm.mjs';
+export { b as boxShadowsBase, r as ringBase, t as transformBase, v as varEmpty } from './shared/preset-mini.5jRPR_fm.mjs';
 
 const verticalAlignAlias = {
   "mid": "middle",
@@ -36,9 +36,9 @@ const textAligns = ["center", "left", "right", "justify", "start", "end"].map((v
 
 const outline = [
   // size
-  [/^outline-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "outline-width": theme.lineWidth?.[d] ?? h.bracket.cssvar.global.px(d) }), { autocomplete: "outline-(width|size)-<num>" }],
+  [/^outline-(?:width-|size-)?(.+)$/, handleWidth$2, { autocomplete: "outline-(width|size)-<num>" }],
   // color
-  [/^outline-(?:color-)?(.+)$/, colorResolver("outline-color", "outline-color", "borderColor"), { autocomplete: "outline-$colors" }],
+  [/^outline-(?:color-)?(.+)$/, handleColorOrWidth$2, { autocomplete: "outline-$colors" }],
   // offset
   [/^outline-offset-(.+)$/, ([, d], { theme }) => ({ "outline-offset": theme.lineWidth?.[d] ?? h.bracket.cssvar.global.px(d) }), { autocomplete: "outline-(offset)-<num>" }],
   // style
@@ -46,6 +46,14 @@ const outline = [
   ...["auto", "dashed", "dotted", "double", "hidden", "solid", "groove", "ridge", "inset", "outset", ...globalKeywords].map((v) => [`outline-${v}`, { "outline-style": v }]),
   ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
 ];
+function handleWidth$2([, b], { theme }) {
+  return { "outline-width": theme.lineWidth?.[b] ?? h.bracket.cssvar.global.px(b) };
+}
+function handleColorOrWidth$2(match, ctx) {
+  if (isCSSMathFn(h.bracket(match[1])))
+    return handleWidth$2(match, ctx);
+  return colorResolver("outline-color", "outline-color", "borderColor")(match, ctx);
+}
 const appearance = [
   ["appearance-none", {
     "-webkit-appearance": "none",
@@ -65,11 +73,11 @@ const willChange = [
 const borderStyles = ["solid", "dashed", "dotted", "double", "hidden", "none", "groove", "ridge", "inset", "outset", ...globalKeywords];
 const borders = [
   // compound
-  [/^(?:border|b)()(?:-(.+))?$/, handlerBorder, { autocomplete: "(border|b)-<directions>" }],
-  [/^(?:border|b)-([xy])(?:-(.+))?$/, handlerBorder],
-  [/^(?:border|b)-([rltbse])(?:-(.+))?$/, handlerBorder],
-  [/^(?:border|b)-(block|inline)(?:-(.+))?$/, handlerBorder],
-  [/^(?:border|b)-([bi][se])(?:-(.+))?$/, handlerBorder],
+  [/^(?:border|b)()(?:-(.+))?$/, handlerBorderSize, { autocomplete: "(border|b)-<directions>" }],
+  [/^(?:border|b)-([xy])(?:-(.+))?$/, handlerBorderSize],
+  [/^(?:border|b)-([rltbse])(?:-(.+))?$/, handlerBorderSize],
+  [/^(?:border|b)-(block|inline)(?:-(.+))?$/, handlerBorderSize],
+  [/^(?:border|b)-([bi][se])(?:-(.+))?$/, handlerBorderSize],
   // size
   [/^(?:border|b)-()(?:width|size)-(.+)$/, handlerBorderSize, { autocomplete: ["(border|b)-<num>", "(border|b)-<directions>-<num>"] }],
   [/^(?:border|b)-([xy])-(?:width|size)-(.+)$/, handlerBorderSize],
@@ -77,11 +85,11 @@ const borders = [
   [/^(?:border|b)-(block|inline)-(?:width|size)-(.+)$/, handlerBorderSize],
   [/^(?:border|b)-([bi][se])-(?:width|size)-(.+)$/, handlerBorderSize],
   // colors
-  [/^(?:border|b)-()(?:color-)?(.+)$/, handlerBorderColor, { autocomplete: ["(border|b)-$colors", "(border|b)-<directions>-$colors"] }],
-  [/^(?:border|b)-([xy])-(?:color-)?(.+)$/, handlerBorderColor],
-  [/^(?:border|b)-([rltbse])-(?:color-)?(.+)$/, handlerBorderColor],
-  [/^(?:border|b)-(block|inline)-(?:color-)?(.+)$/, handlerBorderColor],
-  [/^(?:border|b)-([bi][se])-(?:color-)?(.+)$/, handlerBorderColor],
+  [/^(?:border|b)-()(?:color-)?(.+)$/, handlerBorderColorOrSize, { autocomplete: ["(border|b)-$colors", "(border|b)-<directions>-$colors"] }],
+  [/^(?:border|b)-([xy])-(?:color-)?(.+)$/, handlerBorderColorOrSize],
+  [/^(?:border|b)-([rltbse])-(?:color-)?(.+)$/, handlerBorderColorOrSize],
+  [/^(?:border|b)-(block|inline)-(?:color-)?(.+)$/, handlerBorderColorOrSize],
+  [/^(?:border|b)-([bi][se])-(?:color-)?(.+)$/, handlerBorderColorOrSize],
   // opacity
   [/^(?:border|b)-()op(?:acity)?-?(.+)$/, handlerBorderOpacity, { autocomplete: "(border|b)-(op|opacity)-<percent>" }],
   [/^(?:border|b)-([xy])-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
@@ -127,31 +135,27 @@ function borderColorResolver(direction) {
         };
       }
     } else if (color) {
-      if (isCSSMathFn(color)) {
-        return {
-          "border-width": color
-        };
-      }
       return {
         [`border${direction}-color`]: colorToString(color, alpha)
       };
     }
   };
 }
-function handlerBorder(m, ctx) {
-  return handlerBorderSize(m, ctx);
-}
 function handlerBorderSize([, a = "", b], { theme }) {
   const v = theme.lineWidth?.[b || "DEFAULT"] ?? h.bracket.cssvar.global.px(b || "1");
   if (a in directionMap && v != null)
     return directionMap[a].map((i) => [`border${i}-width`, v]);
 }
-function handlerBorderColor([, a = "", c], { theme }) {
-  if (a in directionMap && hasParseableColor(c, theme, "borderColor")) {
-    return Object.assign(
-      {},
-      ...directionMap[a].map((i) => borderColorResolver(i)(["", c], theme))
-    );
+function handlerBorderColorOrSize([, a = "", b], ctx) {
+  if (a in directionMap) {
+    if (isCSSMathFn(h.bracket(b)))
+      return handlerBorderSize(["", a, b], ctx);
+    if (hasParseableColor(b, ctx.theme, "borderColor")) {
+      return Object.assign(
+        {},
+        ...directionMap[a].map((i) => borderColorResolver(i)(["", b], ctx.theme))
+      );
+    }
   }
 }
 function handlerBorderOpacity([, a = "", opacity]) {
@@ -172,15 +176,20 @@ function handlerBorderStyle([, a = "", s]) {
 const opacity = [
   [/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: h.bracket.percent.cssvar(d) })]
 ];
-const textColors = [
-  [/^(?:color|c)-(.+)$/, colorResolver("color", "text", "textColor"), { autocomplete: "(color|c)-$colors" }],
-  // auto detection and fallback to font-size if the content looks like a size
-  [/^text-(.+)$/, colorResolver("color", "text", "textColor", (css) => !css.color?.toString().match(numberWithUnitRE)), { autocomplete: "text-$colors" }],
-  [/^(?:text|color|c)-(.+)$/, ([, v]) => globalKeywords.includes(v) ? { color: v } : void 0, { autocomplete: `(text|color|c)-(${globalKeywords.join("|")})` }],
-  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-text-opacity": h.bracket.percent.cssvar(opacity2) }), { autocomplete: "(text|color|c)-(op|opacity)-<percent>" }]
-];
+const bgUrlRE = /^\[url\(.+\)\]$/;
+const bgLengthRE = /^\[length:.+\]$/;
+const bgPositionRE = /^\[position:.+\]$/;
 const bgColors = [
-  [/^bg-(.+)$/, (...args) => isSize(args[0][1]) ? void 0 : colorResolver("background-color", "bg", "backgroundColor")(...args), { autocomplete: "bg-$colors" }],
+  [/^bg-(.+)$/, (...args) => {
+    const d = args[0][1];
+    if (bgUrlRE.test(d))
+      return { "--un-url": h.bracket(d), "background-image": "var(--un-url)" };
+    if (bgLengthRE.test(d) && h.bracketOfLength(d) != null)
+      return { "background-size": h.bracketOfLength(d).split(" ").map((e) => h.fraction.auto.px.cssvar(e) ?? e).join(" ") };
+    if ((isSize(d) || bgPositionRE.test(d)) && h.bracketOfPosition(d) != null)
+      return { "background-position": h.bracketOfPosition(d).split(" ").map((e) => h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") };
+    return colorResolver("background-color", "bg", "backgroundColor")(...args);
+  }],
   [/^bg-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-bg-opacity": h.bracket.percent.cssvar(opacity2) }), { autocomplete: "bg-(op|opacity)-<percent>" }]
 ];
 const colorScheme = [
@@ -201,18 +210,10 @@ const decorationStyles = ["solid", "double", "dotted", "dashed", "wavy", ...glob
 const textDecorations = [
   [/^(?:decoration-)?(underline|overline|line-through)$/, ([, s]) => ({ "text-decoration-line": s }), { autocomplete: "decoration-(underline|overline|line-through)" }],
   // size
-  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s], { theme }) => ({ "text-decoration-thickness": theme.lineWidth?.[s] ?? h.bracket.cssvar.global.px(s) }), { autocomplete: "(underline|decoration)-<num>" }],
+  [/^(?:underline|decoration)-(?:size-)?(.+)$/, handleWidth$1, { autocomplete: "(underline|decoration)-<num>" }],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s }), { autocomplete: "(underline|decoration)-(auto|from-font)" }],
   // colors
-  [/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
-    const result = colorResolver("text-decoration-color", "line", "borderColor")(match, ctx);
-    if (result) {
-      return {
-        "-webkit-text-decoration-color": result["text-decoration-color"],
-        ...result
-      };
-    }
-  }, { autocomplete: "(underline|decoration)-$colors" }],
+  [/^(?:underline|decoration)-(.+)$/, handleColorOrWidth$1, { autocomplete: "(underline|decoration)-$colors" }],
   [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "(underline|decoration)-(op|opacity)-<percent>" }],
   // offset
   [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ "text-underline-offset": theme.lineWidth?.[s] ?? h.auto.bracket.cssvar.global.px(s) }), { autocomplete: "(underline|decoration)-(offset)-<num>" }],
@@ -222,6 +223,20 @@ const textDecorations = [
   ["no-underline", { "text-decoration": "none" }],
   ["decoration-none", { "text-decoration": "none" }]
 ];
+function handleWidth$1([, b], { theme }) {
+  return { "text-decoration-thickness": theme.lineWidth?.[b] ?? h.bracket.cssvar.global.px(b) };
+}
+function handleColorOrWidth$1(match, ctx) {
+  if (isCSSMathFn(h.bracket(match[1])))
+    return handleWidth$1(match, ctx);
+  const result = colorResolver("text-decoration-color", "line", "borderColor")(match, ctx);
+  if (result) {
+    return {
+      "-webkit-text-decoration-color": result["text-decoration-color"],
+      ...result
+    };
+  }
+}
 
 const transitionPropertyGroup = {
   all: "all",
@@ -304,48 +319,19 @@ const flex = [
   ["flex-nowrap", { "flex-wrap": "nowrap" }]
 ];
 
-function handleThemeByKey(s, theme, key) {
-  return theme[key]?.[s] || h.bracket.cssvar.global.rem(s);
-}
 const fonts = [
-  // size
-  [
-    /^text-(.+)$/,
-    ([, s = "base"], { theme }) => {
-      const [size, leading] = splitShorthand(s, "length");
-      const sizePairs = toArray(theme.fontSize?.[size]);
-      const lineHeight = leading ? handleThemeByKey(leading, theme, "lineHeight") : void 0;
-      if (sizePairs?.[0]) {
-        const [fontSize2, height, letterSpacing] = sizePairs;
-        if (typeof height === "object") {
-          return {
-            "font-size": fontSize2,
-            ...height
-          };
-        }
-        return {
-          "font-size": fontSize2,
-          "line-height": lineHeight ?? height ?? "1",
-          "letter-spacing": letterSpacing ? handleThemeByKey(letterSpacing, theme, "letterSpacing") : void 0
-        };
-      }
-      const fontSize = h.bracketOfLength.rem(size);
-      if (lineHeight && fontSize) {
-        return {
-          "font-size": fontSize,
-          "line-height": lineHeight
-        };
-      }
-      return { "font-size": h.bracketOfLength.rem(s) };
-    },
-    { autocomplete: "text-$fontSize" }
-  ],
-  [/^(?:text|font)-size-(.+)$/, ([, s], { theme }) => {
-    const themed = toArray(theme.fontSize?.[s]);
-    const size = themed?.[0] ?? h.bracket.cssvar.global.rem(s);
-    if (size != null)
-      return { "font-size": size };
-  }, { autocomplete: "text-size-$fontSize" }],
+  // text
+  [/^text-(.+)$/, handleText, { autocomplete: "text-$fontSize" }],
+  // text size
+  [/^(?:text|font)-size-(.+)$/, handleSize, { autocomplete: "text-size-$fontSize" }],
+  // text colors
+  [/^text-(?:color-)?(.+)$/, handlerColorOrSize, { autocomplete: "text-$colors" }],
+  // colors
+  [/^(?:color|c)-(.+)$/, colorResolver("color", "text", "textColor"), { autocomplete: "(color|c)-$colors" }],
+  // style
+  [/^(?:text|color|c)-(.+)$/, ([, v]) => globalKeywords.includes(v) ? { color: v } : void 0, { autocomplete: `(text|color|c)-(${globalKeywords.join("|")})` }],
+  // opacity
+  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "(text|color|c)-(op|opacity)-<percent>" }],
   // weights
   [
     /^(?:font|fw)-?([^-]+)$/,
@@ -425,6 +411,50 @@ const textShadows = [
   [/^text-shadow-color-(.+)$/, colorResolver("--un-text-shadow-color", "text-shadow", "shadowColor"), { autocomplete: "text-shadow-color-$colors" }],
   [/^text-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-shadow-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "text-shadow-color-(op|opacity)-<percent>" }]
 ];
+function handleThemeByKey(s, theme, key) {
+  return theme[key]?.[s] || h.bracket.cssvar.global.rem(s);
+}
+function handleSize([, s], { theme }) {
+  const themed = toArray(theme.fontSize?.[s]);
+  const size = themed?.[0] ?? h.bracket.cssvar.global.rem(s);
+  if (size != null)
+    return { "font-size": size };
+}
+function handlerColorOrSize(match, ctx) {
+  if (isCSSMathFn(h.bracket(match[1])))
+    return handleSize(match, ctx);
+  return colorResolver("color", "text", "textColor")(match, ctx);
+}
+function handleText([, s = "base"], { theme }) {
+  const split = splitShorthand(s, "length");
+  if (!split)
+    return;
+  const [size, leading] = split;
+  const sizePairs = toArray(theme.fontSize?.[size]);
+  const lineHeight = leading ? handleThemeByKey(leading, theme, "lineHeight") : void 0;
+  if (sizePairs?.[0]) {
+    const [fontSize2, height, letterSpacing] = sizePairs;
+    if (typeof height === "object") {
+      return {
+        "font-size": fontSize2,
+        ...height
+      };
+    }
+    return {
+      "font-size": fontSize2,
+      "line-height": lineHeight ?? height ?? "1",
+      "letter-spacing": letterSpacing ? handleThemeByKey(letterSpacing, theme, "letterSpacing") : void 0
+    };
+  }
+  const fontSize = h.bracketOfLength.rem(size);
+  if (lineHeight && fontSize) {
+    return {
+      "font-size": fontSize,
+      "line-height": lineHeight
+    };
+  }
+  return { "font-size": h.bracketOfLength.rem(s) };
+}
 
 const directions = {
   "": "",
@@ -781,7 +811,7 @@ const cssProperty = [
       return;
     const [prop, ...rest] = body.split(":");
     const value = rest.join(":");
-    if (!isURI(body) && prop.match(/^[a-z-]+$/) && isValidCSSBody(value)) {
+    if (!isURI(body) && /^[a-z-]+$/.test(prop) && isValidCSSBody(value)) {
       let parsed;
       if (hasThemeFn(value))
         parsed = transformThemeFn(value, theme);
@@ -844,12 +874,12 @@ const svgUtilities = [
   [/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "fill-(op|opacity)-<percent>" }],
   ["fill-none", { fill: "none" }],
   // stroke size
-  [/^stroke-(?:width-|size-)?(.+)$/, ([, s], { theme }) => ({ "stroke-width": theme.lineWidth?.[s] ?? h.bracket.cssvar.fraction.px.number(s) }), { autocomplete: ["stroke-width-$lineWidth", "stroke-size-$lineWidth"] }],
+  [/^stroke-(?:width-|size-)?(.+)$/, handleWidth, { autocomplete: ["stroke-width-$lineWidth", "stroke-size-$lineWidth"] }],
   // stroke dash
   [/^stroke-dash-(.+)$/, ([, s]) => ({ "stroke-dasharray": h.bracket.cssvar.number(s) }), { autocomplete: "stroke-dash-<num>" }],
   [/^stroke-offset-(.+)$/, ([, s], { theme }) => ({ "stroke-dashoffset": theme.lineWidth?.[s] ?? h.bracket.cssvar.px.numberWithUnit(s) }), { autocomplete: "stroke-offset-$lineWidth" }],
   // stroke colors
-  [/^stroke-(.+)$/, colorResolver("stroke", "stroke", "borderColor"), { autocomplete: "stroke-$colors" }],
+  [/^stroke-(.+)$/, handleColorOrWidth, { autocomplete: "stroke-$colors" }],
   [/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "stroke-(op|opacity)-<percent>" }],
   // line cap
   ["stroke-cap-square", { "stroke-linecap": "square" }],
@@ -864,6 +894,14 @@ const svgUtilities = [
   // none
   ["stroke-none", { stroke: "none" }]
 ];
+function handleWidth([, b], { theme }) {
+  return { "stroke-width": theme.lineWidth?.[b] ?? h.bracket.cssvar.fraction.px.number(b) };
+}
+function handleColorOrWidth(match, ctx) {
+  if (isCSSMathFn(h.bracket(match[1])))
+    return handleWidth(match, ctx);
+  return colorResolver("stroke", "stroke", "borderColor")(match, ctx);
+}
 
 const rules = [
   cssVariables,
@@ -887,7 +925,6 @@ const rules = [
   textShadows,
   textTransforms,
   textAligns,
-  textColors,
   fontStyles,
   fontSmoothings,
   boxShadows,
@@ -928,4 +965,4 @@ const rules = [
   questionMark
 ].flat(1);
 
-export { alignments, appearance, appearances, aspectRatio, bgColors, borderStyles, borders, boxShadows, boxSizing, breaks, colorScheme, containerParent, contains, contentVisibility, contents, cssProperty, cssVariables, cursors, displays, flex, flexGridJustifiesAlignments, floats, fontSmoothings, fontStyles, fonts, gaps, grids, handlerBorderStyle, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, rings, rules, sizes, svgUtilities, tabSizes, textAligns, textColors, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, textWraps, transforms, transitions, userSelects, verticalAligns, whitespaces, willChange, zIndexes };
+export { alignments, appearance, appearances, aspectRatio, bgColors, borderStyles, borders, boxShadows, boxSizing, breaks, colorScheme, containerParent, contains, contentVisibility, contents, cssProperty, cssVariables, cursors, displays, flex, flexGridJustifiesAlignments, floats, fontSmoothings, fontStyles, fonts, gaps, grids, handlerBorderStyle, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, rings, rules, sizes, svgUtilities, tabSizes, textAligns, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, textWraps, transforms, transitions, userSelects, verticalAligns, whitespaces, willChange, zIndexes };

package/dist/shared/{preset-mini.dPVVIvNm.mjs → preset-mini.5jRPR_fm.mjs}

@@ -1,4 +1,4 @@
-import { h, m as makeGlobalStaticRules, g as globalKeywords, c as colorResolver, a as hasParseableColor, b as colorableShadows, d as positionMap, x as xyzMap } from './preset-mini.Stl9mkMB.mjs';
+import { h, makeGlobalStaticRules, globalKeywords, colorResolver, isCSSMathFn, hasParseableColor, colorableShadows, positionMap, xyzMap } from '../utils.mjs';
 
 const cursorValues = ["auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out"];
 const containValues = ["none", "strict", "content", "size", "inline-size", "layout", "style", "paint"];
@@ -82,7 +82,8 @@ const breaks = [
 const textWraps = [
   ["text-wrap", { "text-wrap": "wrap" }],
   ["text-nowrap", { "text-wrap": "nowrap" }],
-  ["text-balance", { "text-wrap": "balance" }]
+  ["text-balance", { "text-wrap": "balance" }],
+  ["text-pretty", { "text-wrap": "pretty" }]
 ];
 const textOverflows = [
   ["truncate", { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }],
@@ -127,7 +128,7 @@ const ringBase = {
   "--un-shadow": "0 0 rgb(0 0 0 / 0)"
 };
 const rings = [
-  // size
+  // ring
   [/^ring(?:-(.+))?$/, ([, d], { theme }) => {
     const value = theme.ringWidth?.[d || "DEFAULT"] ?? h.px(d || "1");
     if (value) {
@@ -139,12 +140,13 @@ const rings = [
       };
     }
   }, { autocomplete: "ring-$ringWidth" }],
-  [/^ring-(?:width-|size-)(.+)$/, ([, d], { theme }) => ({ "--un-ring-width": theme.lineWidth?.[d] ?? h.bracket.cssvar.px(d) }), { autocomplete: "ring-(width|size)-$lineWidth" }],
+  // size
+  [/^ring-(?:width-|size-)(.+)$/, handleWidth, { autocomplete: "ring-(width|size)-$lineWidth" }],
   // offset size
   ["ring-offset", { "--un-ring-offset-width": "1px" }],
   [/^ring-offset-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "--un-ring-offset-width": theme.lineWidth?.[d] ?? h.bracket.cssvar.px(d) }), { autocomplete: "ring-offset-(width|size)-$lineWidth" }],
   // colors
-  [/^ring-(.+)$/, colorResolver("--un-ring-color", "ring", "borderColor"), { autocomplete: "ring-$colors" }],
+  [/^ring-(.+)$/, handleColorOrWidth, { autocomplete: "ring-$colors" }],
   [/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "ring-(op|opacity)-<percent>" }],
   // offset color
   [/^ring-offset-(.+)$/, colorResolver("--un-ring-offset-color", "ring-offset", "borderColor"), { autocomplete: "ring-offset-$colors" }],
@@ -152,6 +154,14 @@ const rings = [
   // style
   ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
+function handleWidth([, b], { theme }) {
+  return { "--un-ring-width": theme.ringWidth?.[b] ?? h.bracket.cssvar.px(b) };
+}
+function handleColorOrWidth(match, ctx) {
+  if (isCSSMathFn(h.bracket(match[1])))
+    return handleWidth(match, ctx);
+  return colorResolver("--un-ring-color", "ring", "borderColor")(match, ctx);
+}
 
 const boxShadowsBase = {
   "--un-ring-offset-shadow": "0 0 rgb(0 0 0 / 0)",

package/dist/shared/{preset-mini.XmVozI6N.d.mts → preset-mini.WMGBnRDa.d.mts}

@@ -13,7 +13,7 @@ type ThemeColorKeys = 'colors' | 'borderColor' | 'backgroundColor' | 'textColor'
 /**
  * Split utility shorthand delimited by / or :
  */
-declare function splitShorthand(body: string, type: string): string[];
+declare function splitShorthand(body: string, type: string): string[] | undefined;
 /**
  * Parse color string into {@link ParsedColorValue} (if possible). Color value will first be matched to theme object before parsing.
  * See also color.tests.ts for more examples.
@@ -52,6 +52,7 @@ declare function parseColor(body: string, theme: Theme, key?: ThemeColorKeys): P
  *
  * @param property - Property for the css value to be created.
  * @param varName - Base name for the opacity variable.
+ * @param [key] - Theme key to select the color from.
  * @param [shouldPass] - Function to decide whether to pass the css.
  * @return object.
  */
@@ -67,7 +68,7 @@ declare function resolveVerticalBreakpoints(context: Readonly<VariantContext<The
     size: string;
 }[] | undefined;
 declare function makeGlobalStaticRules(prefix: string, property?: string): StaticRule[];
-declare function isCSSMathFn(value: string): boolean;
+declare function isCSSMathFn(value: string | undefined): boolean;
 declare function isSize(str: string): boolean;
 
 export { CONTROL_MINI_NO_NEGATIVE as C, colorableShadows as a, resolveVerticalBreakpoints as b, colorResolver as c, directionSize as d, isSize as e, hasParseableColor as h, isCSSMathFn as i, makeGlobalStaticRules as m, parseColor as p, resolveBreakpoints as r, splitShorthand as s };

package/dist/shared/{preset-mini.Jpc0QYPj.d.cts → preset-mini.WoiFygE2.d.cts}

@@ -13,7 +13,7 @@ type ThemeColorKeys = 'colors' | 'borderColor' | 'backgroundColor' | 'textColor'
 /**
  * Split utility shorthand delimited by / or :
  */
-declare function splitShorthand(body: string, type: string): string[];
+declare function splitShorthand(body: string, type: string): string[] | undefined;
 /**
  * Parse color string into {@link ParsedColorValue} (if possible). Color value will first be matched to theme object before parsing.
  * See also color.tests.ts for more examples.
@@ -52,6 +52,7 @@ declare function parseColor(body: string, theme: Theme, key?: ThemeColorKeys): P
  *
  * @param property - Property for the css value to be created.
  * @param varName - Base name for the opacity variable.
+ * @param [key] - Theme key to select the color from.
  * @param [shouldPass] - Function to decide whether to pass the css.
  * @return object.
  */
@@ -67,7 +68,7 @@ declare function resolveVerticalBreakpoints(context: Readonly<VariantContext<The
     size: string;
 }[] | undefined;
 declare function makeGlobalStaticRules(prefix: string, property?: string): StaticRule[];
-declare function isCSSMathFn(value: string): boolean;
+declare function isCSSMathFn(value: string | undefined): boolean;
 declare function isSize(str: string): boolean;
 
 export { CONTROL_MINI_NO_NEGATIVE as C, colorableShadows as a, resolveVerticalBreakpoints as b, colorResolver as c, directionSize as d, isSize as e, hasParseableColor as h, isCSSMathFn as i, makeGlobalStaticRules as m, parseColor as p, resolveBreakpoints as r, splitShorthand as s };

package/dist/shared/{preset-mini.MACvs-wn.cjs → preset-mini.qLxuqSG-.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-const utils = require('./preset-mini.ImRm63ih.cjs');
+const utils = require('../utils.cjs');
 
 const cursorValues = ["auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out"];
 const containValues = ["none", "strict", "content", "size", "inline-size", "layout", "style", "paint"];
@@ -84,7 +84,8 @@ const breaks = [
 const textWraps = [
   ["text-wrap", { "text-wrap": "wrap" }],
   ["text-nowrap", { "text-wrap": "nowrap" }],
-  ["text-balance", { "text-wrap": "balance" }]
+  ["text-balance", { "text-wrap": "balance" }],
+  ["text-pretty", { "text-wrap": "pretty" }]
 ];
 const textOverflows = [
   ["truncate", { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }],
@@ -129,7 +130,7 @@ const ringBase = {
   "--un-shadow": "0 0 rgb(0 0 0 / 0)"
 };
 const rings = [
-  // size
+  // ring
   [/^ring(?:-(.+))?$/, ([, d], { theme }) => {
     const value = theme.ringWidth?.[d || "DEFAULT"] ?? utils.h.px(d || "1");
     if (value) {
@@ -141,12 +142,13 @@ const rings = [
       };
     }
   }, { autocomplete: "ring-$ringWidth" }],
-  [/^ring-(?:width-|size-)(.+)$/, ([, d], { theme }) => ({ "--un-ring-width": theme.lineWidth?.[d] ?? utils.h.bracket.cssvar.px(d) }), { autocomplete: "ring-(width|size)-$lineWidth" }],
+  // size
+  [/^ring-(?:width-|size-)(.+)$/, handleWidth, { autocomplete: "ring-(width|size)-$lineWidth" }],
   // offset size
   ["ring-offset", { "--un-ring-offset-width": "1px" }],
   [/^ring-offset-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "--un-ring-offset-width": theme.lineWidth?.[d] ?? utils.h.bracket.cssvar.px(d) }), { autocomplete: "ring-offset-(width|size)-$lineWidth" }],
   // colors
-  [/^ring-(.+)$/, utils.colorResolver("--un-ring-color", "ring", "borderColor"), { autocomplete: "ring-$colors" }],
+  [/^ring-(.+)$/, handleColorOrWidth, { autocomplete: "ring-$colors" }],
   [/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": utils.h.bracket.percent.cssvar(opacity) }), { autocomplete: "ring-(op|opacity)-<percent>" }],
   // offset color
   [/^ring-offset-(.+)$/, utils.colorResolver("--un-ring-offset-color", "ring-offset", "borderColor"), { autocomplete: "ring-offset-$colors" }],
@@ -154,6 +156,14 @@ const rings = [
   // style
   ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
+function handleWidth([, b], { theme }) {
+  return { "--un-ring-width": theme.ringWidth?.[b] ?? utils.h.bracket.cssvar.px(b) };
+}
+function handleColorOrWidth(match, ctx) {
+  if (utils.isCSSMathFn(utils.h.bracket(match[1])))
+    return handleWidth(match, ctx);
+  return utils.colorResolver("--un-ring-color", "ring", "borderColor")(match, ctx);
+}
 
 const boxShadowsBase = {
   "--un-ring-offset-shadow": "0 0 rgb(0 0 0 / 0)",

package/dist/shared/{preset-mini.QW22c5Df.d.ts → preset-mini.zVYE2D2j.d.ts}

@@ -13,7 +13,7 @@ type ThemeColorKeys = 'colors' | 'borderColor' | 'backgroundColor' | 'textColor'
 /**
  * Split utility shorthand delimited by / or :
  */
-declare function splitShorthand(body: string, type: string): string[];
+declare function splitShorthand(body: string, type: string): string[] | undefined;
 /**
  * Parse color string into {@link ParsedColorValue} (if possible). Color value will first be matched to theme object before parsing.
  * See also color.tests.ts for more examples.
@@ -52,6 +52,7 @@ declare function parseColor(body: string, theme: Theme, key?: ThemeColorKeys): P
  *
  * @param property - Property for the css value to be created.
  * @param varName - Base name for the opacity variable.
+ * @param [key] - Theme key to select the color from.
  * @param [shouldPass] - Function to decide whether to pass the css.
  * @return object.
  */
@@ -67,7 +68,7 @@ declare function resolveVerticalBreakpoints(context: Readonly<VariantContext<The
     size: string;
 }[] | undefined;
 declare function makeGlobalStaticRules(prefix: string, property?: string): StaticRule[];
-declare function isCSSMathFn(value: string): boolean;
+declare function isCSSMathFn(value: string | undefined): boolean;
 declare function isSize(str: string): boolean;
 
 export { CONTROL_MINI_NO_NEGATIVE as C, colorableShadows as a, resolveVerticalBreakpoints as b, colorResolver as c, directionSize as d, isSize as e, hasParseableColor as h, isCSSMathFn as i, makeGlobalStaticRules as m, parseColor as p, resolveBreakpoints as r, splitShorthand as s };

package/dist/theme.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 const colors = require('./colors.cjs');
-const transform = require('./shared/preset-mini.MACvs-wn.cjs');
-require('./shared/preset-mini.ImRm63ih.cjs');
+const transform = require('./shared/preset-mini.qLxuqSG-.cjs');
+require('./utils.cjs');
 require('@unocss/rule-utils');
 require('@unocss/core');
 

package/dist/theme.mjs

@@ -1,6 +1,6 @@
 import { colors } from './colors.mjs';
-import { t as transformBase, b as boxShadowsBase, r as ringBase } from './shared/preset-mini.dPVVIvNm.mjs';
-import './shared/preset-mini.Stl9mkMB.mjs';
+import { t as transformBase, b as boxShadowsBase, r as ringBase } from './shared/preset-mini.5jRPR_fm.mjs';
+import './utils.mjs';
 import '@unocss/rule-utils';
 import '@unocss/core';