@unocss/preset-mini 0.22.0 → 0.22.1

package/dist/chunks/default.cjs

@@ -71,12 +71,12 @@ const textStrokeWidth = {
   lg: "thick"
 };
 const textShadow = {
-  DEFAULT: "0px 0px 1px rgb(0 0 0/20%), 0px 0px 1px rgb(1 0 5/10%)",
-  sm: "1px 1px 3px rgb(36 37 47 / 25%)",
-  md: "0px 1px 2px rgb(30 29 39 / 19%), 1px 2px 4px rgb(54 64 147 / 18%)",
-  lg: "3px 3px 6px rgb(0 0 0 / 26%), 0px 0px 5px rgb(15 3 86 / 22%)",
-  xl: "1px 1px 3px rgb(0 0 0 / 29%), 2px 4px 7px rgb(73 64 125 / 35%)",
-  none: "none"
+  DEFAULT: ["0 0 1px rgba(0,0,0,0.2)", "0 0 1px rgba(1,0,5,0.1)"],
+  sm: "1px 1px 3px rgba(36,37,47,0.25)",
+  md: ["0 1px 2px rgba(30,29,39,0.19)", "1px 2px 4px rgba(54,64,147,0.18)"],
+  lg: ["3px 3px 6px rgba(0,0,0,0.26)", "0 0 5px rgba(15,3,86,0.22)"],
+  xl: ["1px 1px 3px rgba(0,0,0,0.29)", "2px 4px 7px rgba(73,64,125,0.35)"],
+  none: "0 0 #0000"
 };
 const lineHeight = {
   none: "1",
@@ -115,13 +115,13 @@ const borderRadius = {
   "full": "9999px"
 };
 const boxShadow = {
-  "DEFAULT": "var(--un-shadow-inset) 0 1px 3px 0 rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 1px 2px -1px rgba(var(--un-shadow-color), 0.1)",
-  "sm": "var(--un-shadow-inset) 0 1px 2px 0 rgba(var(--un-shadow-color), 0.05)",
-  "md": "var(--un-shadow-inset) 0 4px 6px -1px rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 2px 4px -2px rgba(var(--un-shadow-color), 0.1)",
-  "lg": "var(--un-shadow-inset) 0 10px 15px -3px rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 4px 6px -4px rgba(var(--un-shadow-color), 0.1)",
-  "xl": "var(--un-shadow-inset) 0 20px 25px -5px rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 8px 10px -6px rgba(var(--un-shadow-color), 0.1)",
-  "2xl": "var(--un-shadow-inset) 0 25px 50px -12px rgba(var(--un-shadow-color), 0.25)",
-  "inner": "inset 0 2px 4px 0 rgba(var(--un-shadow-color), 0.05)",
+  "DEFAULT": ["var(--un-shadow-inset) 0 1px 3px 0 rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 1px 2px -1px rgba(0,0,0,0.1)"],
+  "sm": "var(--un-shadow-inset) 0 1px 2px 0 rgba(0,0,0,0.05)",
+  "md": ["var(--un-shadow-inset) 0 4px 6px -1px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 2px 4px -2px rgba(0,0,0,0.1)"],
+  "lg": ["var(--un-shadow-inset) 0 10px 15px -3px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 4px 6px -4px rgba(0,0,0,0.1)"],
+  "xl": ["var(--un-shadow-inset) 0 20px 25px -5px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 8px 10px -6px rgba(0,0,0,0.1)"],
+  "2xl": "var(--un-shadow-inset) 0 25px 50px -12px rgba(0,0,0,0.25)",
+  "inner": "inset 0 2px 4px 0 rgba(0,0,0,0.05)",
   "none": "0 0 #0000"
 };
 
@@ -136,12 +136,12 @@ const blur = {
   "3xl": "64px"
 };
 const dropShadow = {
-  "DEFAULT": ["0 1px 2px rgba(0, 0, 0, 0.1)", "0 1px 1px rgba(0, 0, 0, 0.06)"],
-  "sm": "0 1px 1px rgba(0, 0, 0, 0.05)",
-  "md": ["0 4px 3px rgba(0, 0, 0, 0.07)", "0 2px 2px rgba(0, 0, 0, 0.06)"],
-  "lg": ["0 10px 8px rgba(0, 0, 0, 0.04)", "0 4px 3px rgba(0, 0, 0, 0.1)"],
-  "xl": ["0 20px 13px rgba(0, 0, 0, 0.03)", "0 8px 5px rgba(0, 0, 0, 0.08)"],
-  "2xl": "0 25px 25px rgba(0, 0, 0, 0.15)",
+  "DEFAULT": ["0 1px 2px rgba(0,0,0,0.1)", "0 1px 1px rgba(0,0,0,0.06)"],
+  "sm": "0 1px 1px rgba(0,0,0,0.05)",
+  "md": ["0 4px 3px rgba(0,0,0,0.07)", "0 2px 2px rgba(0,0,0,0.06)"],
+  "lg": ["0 10px 8px rgba(0,0,0,0.04)", "0 4px 3px rgba(0,0,0,0.1)"],
+  "xl": ["0 20px 13px rgba(0,0,0,0.03)", "0 8px 5px rgba(0,0,0,0.08)"],
+  "2xl": "0 25px 25px rgba(0,0,0,0.15)",
   "none": "0 0 #0000"
 };
 
@@ -187,6 +187,12 @@ const theme = {
   maxHeight,
   minWidth: maxWidth,
   minHeight: maxHeight,
+  inlineSize: width,
+  blockSize: height,
+  maxInlineSize: maxWidth,
+  maxBlockSize: maxHeight,
+  minInlineSize: maxWidth,
+  minBlockSize: maxHeight,
   colors: colors.colors,
   fontFamily,
   fontSize,

package/dist/chunks/default.mjs

@@ -69,12 +69,12 @@ const textStrokeWidth = {
   lg: "thick"
 };
 const textShadow = {
-  DEFAULT: "0px 0px 1px rgb(0 0 0/20%), 0px 0px 1px rgb(1 0 5/10%)",
-  sm: "1px 1px 3px rgb(36 37 47 / 25%)",
-  md: "0px 1px 2px rgb(30 29 39 / 19%), 1px 2px 4px rgb(54 64 147 / 18%)",
-  lg: "3px 3px 6px rgb(0 0 0 / 26%), 0px 0px 5px rgb(15 3 86 / 22%)",
-  xl: "1px 1px 3px rgb(0 0 0 / 29%), 2px 4px 7px rgb(73 64 125 / 35%)",
-  none: "none"
+  DEFAULT: ["0 0 1px rgba(0,0,0,0.2)", "0 0 1px rgba(1,0,5,0.1)"],
+  sm: "1px 1px 3px rgba(36,37,47,0.25)",
+  md: ["0 1px 2px rgba(30,29,39,0.19)", "1px 2px 4px rgba(54,64,147,0.18)"],
+  lg: ["3px 3px 6px rgba(0,0,0,0.26)", "0 0 5px rgba(15,3,86,0.22)"],
+  xl: ["1px 1px 3px rgba(0,0,0,0.29)", "2px 4px 7px rgba(73,64,125,0.35)"],
+  none: "0 0 #0000"
 };
 const lineHeight = {
   none: "1",
@@ -113,13 +113,13 @@ const borderRadius = {
   "full": "9999px"
 };
 const boxShadow = {
-  "DEFAULT": "var(--un-shadow-inset) 0 1px 3px 0 rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 1px 2px -1px rgba(var(--un-shadow-color), 0.1)",
-  "sm": "var(--un-shadow-inset) 0 1px 2px 0 rgba(var(--un-shadow-color), 0.05)",
-  "md": "var(--un-shadow-inset) 0 4px 6px -1px rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 2px 4px -2px rgba(var(--un-shadow-color), 0.1)",
-  "lg": "var(--un-shadow-inset) 0 10px 15px -3px rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 4px 6px -4px rgba(var(--un-shadow-color), 0.1)",
-  "xl": "var(--un-shadow-inset) 0 20px 25px -5px rgba(var(--un-shadow-color), 0.1), var(--un-shadow-inset) 0 8px 10px -6px rgba(var(--un-shadow-color), 0.1)",
-  "2xl": "var(--un-shadow-inset) 0 25px 50px -12px rgba(var(--un-shadow-color), 0.25)",
-  "inner": "inset 0 2px 4px 0 rgba(var(--un-shadow-color), 0.05)",
+  "DEFAULT": ["var(--un-shadow-inset) 0 1px 3px 0 rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 1px 2px -1px rgba(0,0,0,0.1)"],
+  "sm": "var(--un-shadow-inset) 0 1px 2px 0 rgba(0,0,0,0.05)",
+  "md": ["var(--un-shadow-inset) 0 4px 6px -1px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 2px 4px -2px rgba(0,0,0,0.1)"],
+  "lg": ["var(--un-shadow-inset) 0 10px 15px -3px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 4px 6px -4px rgba(0,0,0,0.1)"],
+  "xl": ["var(--un-shadow-inset) 0 20px 25px -5px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 8px 10px -6px rgba(0,0,0,0.1)"],
+  "2xl": "var(--un-shadow-inset) 0 25px 50px -12px rgba(0,0,0,0.25)",
+  "inner": "inset 0 2px 4px 0 rgba(0,0,0,0.05)",
   "none": "0 0 #0000"
 };
 
@@ -134,12 +134,12 @@ const blur = {
   "3xl": "64px"
 };
 const dropShadow = {
-  "DEFAULT": ["0 1px 2px rgba(0, 0, 0, 0.1)", "0 1px 1px rgba(0, 0, 0, 0.06)"],
-  "sm": "0 1px 1px rgba(0, 0, 0, 0.05)",
-  "md": ["0 4px 3px rgba(0, 0, 0, 0.07)", "0 2px 2px rgba(0, 0, 0, 0.06)"],
-  "lg": ["0 10px 8px rgba(0, 0, 0, 0.04)", "0 4px 3px rgba(0, 0, 0, 0.1)"],
-  "xl": ["0 20px 13px rgba(0, 0, 0, 0.03)", "0 8px 5px rgba(0, 0, 0, 0.08)"],
-  "2xl": "0 25px 25px rgba(0, 0, 0, 0.15)",
+  "DEFAULT": ["0 1px 2px rgba(0,0,0,0.1)", "0 1px 1px rgba(0,0,0,0.06)"],
+  "sm": "0 1px 1px rgba(0,0,0,0.05)",
+  "md": ["0 4px 3px rgba(0,0,0,0.07)", "0 2px 2px rgba(0,0,0,0.06)"],
+  "lg": ["0 10px 8px rgba(0,0,0,0.04)", "0 4px 3px rgba(0,0,0,0.1)"],
+  "xl": ["0 20px 13px rgba(0,0,0,0.03)", "0 8px 5px rgba(0,0,0,0.08)"],
+  "2xl": "0 25px 25px rgba(0,0,0,0.15)",
   "none": "0 0 #0000"
 };
 
@@ -185,6 +185,12 @@ const theme = {
   maxHeight,
   minWidth: maxWidth,
   minHeight: maxHeight,
+  inlineSize: width,
+  blockSize: height,
+  maxInlineSize: maxWidth,
+  maxBlockSize: maxHeight,
+  minInlineSize: maxWidth,
+  minBlockSize: maxHeight,
   colors,
   fontFamily,
   fontSize,

package/dist/chunks/default2.cjs

@@ -46,19 +46,28 @@ const borders = [
   [/^(?:border|b)()(?:-(.+))?$/, handlerBorder],
   [/^(?:border|b)-([xy])(?:-(.+))?$/, handlerBorder],
   [/^(?:border|b)-([rltbse])(?:-(.+))?$/, handlerBorder],
-  [/^(?:border|b)-()size-(.+)$/, handlerBorderSize],
-  [/^(?:border|b)-([xy])-size-(.+)$/, handlerBorderSize],
-  [/^(?:border|b)-([rltbse])-size-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)-(block|inline)(?:-(.+))?$/, handlerBorder],
+  [/^(?:border|b)-([bi][se])(?:-(.+))?$/, handlerBorder],
+  [/^(?:border|b)-()(?:width|size)-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)-([xy])-(?:width|size)-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)-([rltbse])-(?:width|size)-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)-(block|inline)-(?:width|size)-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)-([bi][se])-(?:width|size)-(.+)$/, handlerBorderSize],
   [/^(?:border|b)-()(?:color-)?(.+)$/, handlerBorderColor],
   [/^(?:border|b)-([xy])-(?:color-)?(.+)$/, handlerBorderColor],
   [/^(?:border|b)-([rltbse])-(?:color-)?(.+)$/, handlerBorderColor],
+  [/^(?:border|b)-(block|inline)-(?:color-)?(.+)$/, handlerBorderColor],
+  [/^(?:border|b)-([bi][se])-(?:color-)?(.+)$/, handlerBorderColor],
   [/^(?:border|b)-()op(?:acity)?-?(.+)$/, handlerBorderOpacity],
   [/^(?:border|b)-([xy])-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
   [/^(?:border|b)-([rltbse])-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
+  [/^(?:border|b)-(block|inline)-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
+  [/^(?:border|b)-([bi][se])-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
   [/^(?:border-)?(?:rounded|rd)()(?:-(.+))?$/, handlerRounded],
-  [/^(?:border-)?(?:rounded|rd)-([xy])(?:-(.+))?$/, handlerRounded],
   [/^(?:border-)?(?:rounded|rd)-([rltb])(?:-(.+))?$/, handlerRounded],
   [/^(?:border-)?(?:rounded|rd)-([rltb]{2})(?:-(.+))?$/, handlerRounded],
+  [/^(?:border-)?(?:rounded|rd)-([bi][se])(?:-(.+))?$/, handlerRounded],
+  [/^(?:border-)?(?:rounded|rd)-([bi][se]-[bi][se])(?:-(.+))?$/, handlerRounded],
   ["border-solid", { "border-style": "solid" }],
   ["border-dashed", { "border-style": "dashed" }],
   ["border-dotted", { "border-style": "dotted" }],
@@ -252,7 +261,29 @@ const textStrokes = [
   [/^text-stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-stroke-opacity": utilities.handler.bracket.percent(opacity) })]
 ];
 const textShadows = [
-  [/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => ({ "text-shadow": theme.textShadow?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar(s) })]
+  [/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => {
+    const v = theme.textShadow?.[s || "DEFAULT"];
+    if (v != null) {
+      const shadow = core.toArray(v);
+      const colored = shadow.map((s2) => s2.replace(/\s\S+$/, " var(--un-text-shadow-color)"));
+      return {
+        "--un-text-shadow": shadow.join(","),
+        "--un-text-shadow-colored": colored.join(","),
+        "text-shadow": "var(--un-text-shadow)"
+      };
+    }
+    return { "text-shadow": utilities.handler.bracket.cssvar(s) };
+  }],
+  [/^text-shadow-color-(.+)$/, (m, ctx) => {
+    const color = utilities.colorResolver("--un-text-shadow-color", "text-shadow")(m, ctx);
+    if (color) {
+      return {
+        ...color,
+        "--un-text-shadow": "var(--un-text-shadow-colored)"
+      };
+    }
+  }],
+  [/^text-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-shadow-opacity": utilities.handler.bracket.percent(opacity) })]
 ];
 
 const directions = {
@@ -388,16 +419,18 @@ const placements = [
   ["place-self-stretch", { "place-self": "stretch" }]
 ];
 function handleInsetValue(v) {
-  return { auto: "auto", full: "100%" }[v] ?? utilities.handler.bracket.fraction.cssvar.auto.rem(v);
+  return utilities.handler.bracket.fraction.cssvar.auto.rem(v);
 }
 function handleInsetValues([, d, v]) {
   const r = handleInsetValue(v);
-  if (r != null && d in utilities.directionMap)
-    return utilities.directionMap[d].map((i) => [i.slice(1), r]);
+  if (r != null && d in utilities.insetMap)
+    return utilities.insetMap[d].map((i) => [i.slice(1), r]);
 }
 const insets = [
   [/^(?:position-|pos-)?inset-(.+)$/, ([, v]) => ({ inset: handleInsetValue(v) })],
   [/^(?:position-|pos-)?inset-([xy])-(.+)$/, handleInsetValues],
+  [/^(?:position-|pos-)?inset-(block|inline)-(.+)$/, handleInsetValues],
+  [/^(?:position-|pos-)?inset-([bi][se])-(.+)$/, handleInsetValues],
   [/^(?:position-|pos-)?(top|left|right|bottom)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })]
 ];
 const floats = [
@@ -493,19 +526,62 @@ const fontSmoothings = [
   }]
 ];
 
+const shadowBase = {
+  [core.CONTROL_SHORTCUT_NO_MERGE]: "",
+  "--un-ring-offset-shadow": "0 0 #0000",
+  "--un-ring-shadow": "0 0 #0000",
+  "--un-shadow-inset": varEmpty,
+  "--un-shadow": "0 0 #0000",
+  "--un-shadow-colored": "0 0 #0000"
+};
+const boxShadows = [
+  [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
+    const v = theme.boxShadow?.[d || "DEFAULT"];
+    if (v) {
+      const shadow = core.toArray(v);
+      const colored = shadow.map((s) => s.replace(/\s\S+$/, " var(--un-shadow-color)"));
+      return [
+        shadowBase,
+        {
+          "--un-shadow": shadow.join(","),
+          "--un-shadow-colored": colored.join(","),
+          "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
+        }
+      ];
+    }
+  }],
+  [/^shadow-(.+)$/, (m, ctx) => {
+    const color = utilities.colorResolver("--un-shadow-color", "shadow")(m, ctx);
+    if (color) {
+      return {
+        ...color,
+        "--un-shadow": "var(--un-shadow-colored)"
+      };
+    }
+  }],
+  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": utilities.handler.bracket.percent.cssvar(opacity) })],
+  ["shadow-inset", { "--un-shadow-inset": "inset" }]
+];
+
+const ringBase = {
+  "--un-ring-inset": varEmpty,
+  "--un-ring-offset-width": "0px",
+  "--un-ring-offset-color": "#fff",
+  "--un-ring-color": "rgba(147,197,253,0.5)",
+  ...shadowBase
+};
 const rings = [
   [/^ring(?:-(.+))?$/, ([, d]) => {
     const value = utilities.handler.px(d || "1");
     if (value) {
-      return {
-        "--un-ring-inset": varEmpty,
-        "--un-ring-offset-width": "0px",
-        "--un-ring-offset-color": "#fff",
-        "--un-ring-color": "rgba(147, 197, 253, .5)",
-        "--un-ring-offset-shadow": "var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)",
-        "--un-ring-shadow": `var(--un-ring-inset) 0 0 0 calc(${value} + var(--un-ring-offset-width)) var(--un-ring-color)`,
-        "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)"
-      };
+      return [
+        ringBase,
+        {
+          "--un-ring-offset-shadow": "var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)",
+          "--un-ring-shadow": `var(--un-ring-inset) 0 0 0 calc(${value} + var(--un-ring-offset-width)) var(--un-ring-color)`,
+          "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)"
+        }
+      ];
     }
   }],
   ["ring-offset", { "--un-ring-offset-width": "1px" }],
@@ -517,46 +593,17 @@ const rings = [
   ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
 
-const shadowColorResolver = (body, theme) => {
-  const data = utilities.parseColor(body, theme);
-  if (!data)
-    return;
-  const { color, rgba } = data;
-  if (!color)
-    return;
-  if (rgba) {
-    return {
-      "--un-shadow-color": `${rgba.slice(0, 3).join(",")}`
-    };
-  } else {
-    return {
-      "--un-shadow-color": color
-    };
-  }
+const sizeMapping = {
+  h: "height",
+  w: "width",
+  inline: "inline-size",
+  block: "block-size"
 };
-const boxShadows = [
-  [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
-    const value = theme.boxShadow?.[d || "DEFAULT"];
-    if (value) {
-      return {
-        "--un-shadow-inset": varEmpty,
-        "--un-shadow-color": "0,0,0",
-        "--un-shadow": value,
-        "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
-      };
-    }
-  }],
-  [/^shadow-(.+)$/, ([, d], { theme }) => shadowColorResolver(d, theme)],
-  ["shadow-inset", { "--un-shadow-inset": "inset" }]
-];
-
 function getPropName(minmax, hw) {
-  return `${minmax ? `${minmax}-` : ""}${hw === "h" ? "height" : "width"}`;
+  return `${minmax || ""}${sizeMapping[hw]}`;
 }
 function getSizeValue(minmax, hw, theme, prop) {
-  let str = `${hw === "h" ? "height" : "width"}`;
-  if (minmax)
-    str = `${minmax}${utilities.capitalize(str)}`;
+  const str = getPropName(minmax, hw).replace(/-(\w)/g, (_, p) => p.toUpperCase());
   const v = theme[str]?.[prop];
   if (v != null)
     return v;
@@ -569,8 +616,9 @@ function getSizeValue(minmax, hw, theme, prop) {
   return utilities.handler.bracket.cssvar.fraction.auto.rem(prop);
 }
 const sizes = [
-  [/^(?:(min|max)-)?(w|h)-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
-  [/^(?:(min|max)-)?(w)-screen-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: theme.breakpoints?.[s] })]
+  [/^(min-|max-)?([wh])-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
+  [/^(min-|max-)?(block|inline)-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
+  [/^(min-|max-)?(w)-screen-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: theme.breakpoints?.[s] })]
 ];
 function getAspectRatio(prop) {
   if (/^\d+\/\d+$/.test(prop))
@@ -590,22 +638,53 @@ const aspectRatio = [
 const paddings = [
   [/^pa?()-?(-?.+)$/, utilities.directionSize("padding")],
   [/^p-?([xy])-?(-?.+)$/, utilities.directionSize("padding")],
-  [/^p-?([rltbse])-?(-?.+)$/, utilities.directionSize("padding")]
+  [/^p-?([rltbse])-?(-?.+)$/, utilities.directionSize("padding")],
+  [/^p-(inline|block)-(-?.+)$/, utilities.directionSize("padding")],
+  [/^p-?([bi][se])-?(-?.+)$/, utilities.directionSize("padding")]
 ];
 const margins = [
   [/^ma?()-?(-?.+)$/, utilities.directionSize("margin")],
   [/^m-?([xy])-?(-?.+)$/, utilities.directionSize("margin")],
-  [/^m-?([rltbse])-?(-?.+)$/, utilities.directionSize("margin")]
+  [/^m-?([rltbse])-?(-?.+)$/, utilities.directionSize("margin")],
+  [/^m-(inline|block)-(-?.+)$/, utilities.directionSize("margin")],
+  [/^m-?([bi][se])-?(-?.+)$/, utilities.directionSize("margin")]
 ];
 
 const transformGpu = {
-  "--un-transform": "rotate(var(--un-rotate)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z))"
+  "--un-transform": [
+    "translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z))",
+    "rotate(var(--un-rotate))",
+    "rotateX(var(--un-rotate-x))",
+    "rotateY(var(--un-rotate-y))",
+    "rotateZ(var(--un-rotate-z))",
+    "skewX(var(--un-skew-x))",
+    "skewY(var(--un-skew-y))",
+    "scaleX(var(--un-scale-x))",
+    "scaleY(var(--un-scale-y))",
+    "scaleZ(var(--un-scale-z))"
+  ].join(" ")
 };
 const transformCpu = {
-  "--un-transform": "rotate(var(--un-rotate)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))"
+  "--un-transform": [
+    "translateX(var(--un-translate-x))",
+    "translateY(var(--un-translate-y))",
+    "translateZ(var(--un-translate-z))",
+    "rotate(var(--un-rotate))",
+    "rotateX(var(--un-rotate-x))",
+    "rotateY(var(--un-rotate-y))",
+    "rotateZ(var(--un-rotate-z))",
+    "skewX(var(--un-skew-x))",
+    "skewY(var(--un-skew-y))",
+    "scaleX(var(--un-scale-x))",
+    "scaleY(var(--un-scale-y))",
+    "scaleZ(var(--un-scale-z))"
+  ].join(" ")
 };
 const transformBase = {
   "--un-rotate": 0,
+  "--un-rotate-x": 0,
+  "--un-rotate-y": 0,
+  "--un-rotate-z": 0,
   "--un-scale-x": 1,
   "--un-scale-y": 1,
   "--un-scale-z": 1,
@@ -639,7 +718,8 @@ const transforms = [
   }],
   [/^translate-()(.+)$/, handleTranslate],
   [/^translate-([xyz])-(.+)$/, handleTranslate],
-  [/^rotate-(.+)$/, handleRotate],
+  [/^rotate-()(.+)$/, handleRotate],
+  [/^rotate(-[xyz])-(.+)$/, handleRotate],
   [/^skew-()(.+)$/, handleSkew],
   [/^skew-([xy])-(.+)$/, handleSkew],
   [/^scale-()(.+)$/, handleScale],
@@ -678,14 +758,14 @@ function handleScale([, d, b]) {
     ];
   }
 }
-function handleRotate([, b]) {
+function handleRotate([, d, b]) {
   const v = utilities.handler.bracket.degree(b);
   if (v != null) {
     return [
       transformBase,
       {
-        "--un-rotate": v,
-        "transform": "var(--un-transform)"
+        [`--un-rotate${d || ""}`]: v,
+        transform: "var(--un-transform)"
       }
     ];
   }
@@ -734,6 +814,9 @@ const cssVariables = [
       return { [prop]: `var(--${varname})` };
   }]
 ];
+const cssProperty = [
+  [/^\[(.+):(.+)\]$/, ([, prop, value]) => ({ [prop]: utilities.handler.bracket(`[${value}]`) })]
+];
 
 const questionMark = [
   [
@@ -774,7 +857,7 @@ const svgUtilities = [
   [/^fill-(.+)$/, utilities.colorResolver("fill", "fill")],
   [/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": utilities.handler.bracket.percent(opacity) })],
   ["fill-none", { fill: "none" }],
-  [/^stroke-(?:size-|width-)?(.+)$/, ([, s]) => ({ "stroke-width": utilities.handler.bracket.fraction.px.number(s) })],
+  [/^stroke-(?:width-|size-)?(.+)$/, ([, s]) => ({ "stroke-width": utilities.handler.bracket.fraction.px.number(s) })],
   [/^stroke-dash-(.+)$/, ([, s]) => ({ "stroke-dasharray": utilities.handler.bracket.number(s) })],
   [/^stroke-offset-(.+)$/, ([, s]) => ({ "stroke-dashoffset": utilities.handler.bracket.px.numberWithUnit(s) })],
   [/^stroke-(.+)$/, utilities.colorResolver("stroke", "stroke")],
@@ -792,6 +875,7 @@ const svgUtilities = [
 
 const rules = [
   cssVariables,
+  cssProperty,
   paddings,
   margins,
   displays,
@@ -856,6 +940,7 @@ exports.boxShadows = boxShadows;
 exports.boxSizing = boxSizing;
 exports.breaks = breaks;
 exports.contents = contents;
+exports.cssProperty = cssProperty;
 exports.cssVariables = cssVariables;
 exports.cursors = cursors;
 exports.displays = displays;
@@ -881,6 +966,7 @@ exports.questionMark = questionMark;
 exports.resizes = resizes;
 exports.rings = rings;
 exports.rules = rules;
+exports.shadowBase = shadowBase;
 exports.sizes = sizes;
 exports.svgUtilities = svgUtilities;
 exports.tabSizes = tabSizes;

package/dist/chunks/default2.mjs

@@ -1,4 +1,4 @@
-import { h as handler, c as colorResolver, d as directionMap, p as parseColor, a as cornerMap, b as capitalize, e as directionSize, f as positionMap, x as xyzMap } from './utilities.mjs';
+import { h as handler, c as colorResolver, d as directionMap, p as parseColor, a as cornerMap, i as insetMap, b as directionSize, e as positionMap, x as xyzMap } from './utilities.mjs';
 import { toArray, CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core';
 
 const verticalAlignAlias = {
@@ -44,19 +44,28 @@ const borders = [
   [/^(?:border|b)()(?:-(.+))?$/, handlerBorder],
   [/^(?:border|b)-([xy])(?:-(.+))?$/, handlerBorder],
   [/^(?:border|b)-([rltbse])(?:-(.+))?$/, handlerBorder],
-  [/^(?:border|b)-()size-(.+)$/, handlerBorderSize],
-  [/^(?:border|b)-([xy])-size-(.+)$/, handlerBorderSize],
-  [/^(?:border|b)-([rltbse])-size-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)-(block|inline)(?:-(.+))?$/, handlerBorder],
+  [/^(?:border|b)-([bi][se])(?:-(.+))?$/, handlerBorder],
+  [/^(?:border|b)-()(?:width|size)-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)-([xy])-(?:width|size)-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)-([rltbse])-(?:width|size)-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)-(block|inline)-(?:width|size)-(.+)$/, handlerBorderSize],
+  [/^(?:border|b)-([bi][se])-(?:width|size)-(.+)$/, handlerBorderSize],
   [/^(?:border|b)-()(?:color-)?(.+)$/, handlerBorderColor],
   [/^(?:border|b)-([xy])-(?:color-)?(.+)$/, handlerBorderColor],
   [/^(?:border|b)-([rltbse])-(?:color-)?(.+)$/, handlerBorderColor],
+  [/^(?:border|b)-(block|inline)-(?:color-)?(.+)$/, handlerBorderColor],
+  [/^(?:border|b)-([bi][se])-(?:color-)?(.+)$/, handlerBorderColor],
   [/^(?:border|b)-()op(?:acity)?-?(.+)$/, handlerBorderOpacity],
   [/^(?:border|b)-([xy])-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
   [/^(?:border|b)-([rltbse])-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
+  [/^(?:border|b)-(block|inline)-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
+  [/^(?:border|b)-([bi][se])-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
   [/^(?:border-)?(?:rounded|rd)()(?:-(.+))?$/, handlerRounded],
-  [/^(?:border-)?(?:rounded|rd)-([xy])(?:-(.+))?$/, handlerRounded],
   [/^(?:border-)?(?:rounded|rd)-([rltb])(?:-(.+))?$/, handlerRounded],
   [/^(?:border-)?(?:rounded|rd)-([rltb]{2})(?:-(.+))?$/, handlerRounded],
+  [/^(?:border-)?(?:rounded|rd)-([bi][se])(?:-(.+))?$/, handlerRounded],
+  [/^(?:border-)?(?:rounded|rd)-([bi][se]-[bi][se])(?:-(.+))?$/, handlerRounded],
   ["border-solid", { "border-style": "solid" }],
   ["border-dashed", { "border-style": "dashed" }],
   ["border-dotted", { "border-style": "dotted" }],
@@ -250,7 +259,29 @@ const textStrokes = [
   [/^text-stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-stroke-opacity": handler.bracket.percent(opacity) })]
 ];
 const textShadows = [
-  [/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => ({ "text-shadow": theme.textShadow?.[s || "DEFAULT"] || handler.bracket.cssvar(s) })]
+  [/^text-shadow(?:-(.+))?$/, ([, s], { theme }) => {
+    const v = theme.textShadow?.[s || "DEFAULT"];
+    if (v != null) {
+      const shadow = toArray(v);
+      const colored = shadow.map((s2) => s2.replace(/\s\S+$/, " var(--un-text-shadow-color)"));
+      return {
+        "--un-text-shadow": shadow.join(","),
+        "--un-text-shadow-colored": colored.join(","),
+        "text-shadow": "var(--un-text-shadow)"
+      };
+    }
+    return { "text-shadow": handler.bracket.cssvar(s) };
+  }],
+  [/^text-shadow-color-(.+)$/, (m, ctx) => {
+    const color = colorResolver("--un-text-shadow-color", "text-shadow")(m, ctx);
+    if (color) {
+      return {
+        ...color,
+        "--un-text-shadow": "var(--un-text-shadow-colored)"
+      };
+    }
+  }],
+  [/^text-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-shadow-opacity": handler.bracket.percent(opacity) })]
 ];
 
 const directions = {
@@ -386,16 +417,18 @@ const placements = [
   ["place-self-stretch", { "place-self": "stretch" }]
 ];
 function handleInsetValue(v) {
-  return { auto: "auto", full: "100%" }[v] ?? handler.bracket.fraction.cssvar.auto.rem(v);
+  return handler.bracket.fraction.cssvar.auto.rem(v);
 }
 function handleInsetValues([, d, v]) {
   const r = handleInsetValue(v);
-  if (r != null && d in directionMap)
-    return directionMap[d].map((i) => [i.slice(1), r]);
+  if (r != null && d in insetMap)
+    return insetMap[d].map((i) => [i.slice(1), r]);
 }
 const insets = [
   [/^(?:position-|pos-)?inset-(.+)$/, ([, v]) => ({ inset: handleInsetValue(v) })],
   [/^(?:position-|pos-)?inset-([xy])-(.+)$/, handleInsetValues],
+  [/^(?:position-|pos-)?inset-(block|inline)-(.+)$/, handleInsetValues],
+  [/^(?:position-|pos-)?inset-([bi][se])-(.+)$/, handleInsetValues],
   [/^(?:position-|pos-)?(top|left|right|bottom)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })]
 ];
 const floats = [
@@ -491,19 +524,62 @@ const fontSmoothings = [
   }]
 ];
 
+const shadowBase = {
+  [CONTROL_SHORTCUT_NO_MERGE]: "",
+  "--un-ring-offset-shadow": "0 0 #0000",
+  "--un-ring-shadow": "0 0 #0000",
+  "--un-shadow-inset": varEmpty,
+  "--un-shadow": "0 0 #0000",
+  "--un-shadow-colored": "0 0 #0000"
+};
+const boxShadows = [
+  [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
+    const v = theme.boxShadow?.[d || "DEFAULT"];
+    if (v) {
+      const shadow = toArray(v);
+      const colored = shadow.map((s) => s.replace(/\s\S+$/, " var(--un-shadow-color)"));
+      return [
+        shadowBase,
+        {
+          "--un-shadow": shadow.join(","),
+          "--un-shadow-colored": colored.join(","),
+          "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
+        }
+      ];
+    }
+  }],
+  [/^shadow-(.+)$/, (m, ctx) => {
+    const color = colorResolver("--un-shadow-color", "shadow")(m, ctx);
+    if (color) {
+      return {
+        ...color,
+        "--un-shadow": "var(--un-shadow-colored)"
+      };
+    }
+  }],
+  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent.cssvar(opacity) })],
+  ["shadow-inset", { "--un-shadow-inset": "inset" }]
+];
+
+const ringBase = {
+  "--un-ring-inset": varEmpty,
+  "--un-ring-offset-width": "0px",
+  "--un-ring-offset-color": "#fff",
+  "--un-ring-color": "rgba(147,197,253,0.5)",
+  ...shadowBase
+};
 const rings = [
   [/^ring(?:-(.+))?$/, ([, d]) => {
     const value = handler.px(d || "1");
     if (value) {
-      return {
-        "--un-ring-inset": varEmpty,
-        "--un-ring-offset-width": "0px",
-        "--un-ring-offset-color": "#fff",
-        "--un-ring-color": "rgba(147, 197, 253, .5)",
-        "--un-ring-offset-shadow": "var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)",
-        "--un-ring-shadow": `var(--un-ring-inset) 0 0 0 calc(${value} + var(--un-ring-offset-width)) var(--un-ring-color)`,
-        "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)"
-      };
+      return [
+        ringBase,
+        {
+          "--un-ring-offset-shadow": "var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)",
+          "--un-ring-shadow": `var(--un-ring-inset) 0 0 0 calc(${value} + var(--un-ring-offset-width)) var(--un-ring-color)`,
+          "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)"
+        }
+      ];
     }
   }],
   ["ring-offset", { "--un-ring-offset-width": "1px" }],
@@ -515,46 +591,17 @@ const rings = [
   ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
 
-const shadowColorResolver = (body, theme) => {
-  const data = parseColor(body, theme);
-  if (!data)
-    return;
-  const { color, rgba } = data;
-  if (!color)
-    return;
-  if (rgba) {
-    return {
-      "--un-shadow-color": `${rgba.slice(0, 3).join(",")}`
-    };
-  } else {
-    return {
-      "--un-shadow-color": color
-    };
-  }
+const sizeMapping = {
+  h: "height",
+  w: "width",
+  inline: "inline-size",
+  block: "block-size"
 };
-const boxShadows = [
-  [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
-    const value = theme.boxShadow?.[d || "DEFAULT"];
-    if (value) {
-      return {
-        "--un-shadow-inset": varEmpty,
-        "--un-shadow-color": "0,0,0",
-        "--un-shadow": value,
-        "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
-      };
-    }
-  }],
-  [/^shadow-(.+)$/, ([, d], { theme }) => shadowColorResolver(d, theme)],
-  ["shadow-inset", { "--un-shadow-inset": "inset" }]
-];
-
 function getPropName(minmax, hw) {
-  return `${minmax ? `${minmax}-` : ""}${hw === "h" ? "height" : "width"}`;
+  return `${minmax || ""}${sizeMapping[hw]}`;
 }
 function getSizeValue(minmax, hw, theme, prop) {
-  let str = `${hw === "h" ? "height" : "width"}`;
-  if (minmax)
-    str = `${minmax}${capitalize(str)}`;
+  const str = getPropName(minmax, hw).replace(/-(\w)/g, (_, p) => p.toUpperCase());
   const v = theme[str]?.[prop];
   if (v != null)
     return v;
@@ -567,8 +614,9 @@ function getSizeValue(minmax, hw, theme, prop) {
   return handler.bracket.cssvar.fraction.auto.rem(prop);
 }
 const sizes = [
-  [/^(?:(min|max)-)?(w|h)-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
-  [/^(?:(min|max)-)?(w)-screen-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: theme.breakpoints?.[s] })]
+  [/^(min-|max-)?([wh])-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
+  [/^(min-|max-)?(block|inline)-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
+  [/^(min-|max-)?(w)-screen-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: theme.breakpoints?.[s] })]
 ];
 function getAspectRatio(prop) {
   if (/^\d+\/\d+$/.test(prop))
@@ -588,22 +636,53 @@ const aspectRatio = [
 const paddings = [
   [/^pa?()-?(-?.+)$/, directionSize("padding")],
   [/^p-?([xy])-?(-?.+)$/, directionSize("padding")],
-  [/^p-?([rltbse])-?(-?.+)$/, directionSize("padding")]
+  [/^p-?([rltbse])-?(-?.+)$/, directionSize("padding")],
+  [/^p-(inline|block)-(-?.+)$/, directionSize("padding")],
+  [/^p-?([bi][se])-?(-?.+)$/, directionSize("padding")]
 ];
 const margins = [
   [/^ma?()-?(-?.+)$/, directionSize("margin")],
   [/^m-?([xy])-?(-?.+)$/, directionSize("margin")],
-  [/^m-?([rltbse])-?(-?.+)$/, directionSize("margin")]
+  [/^m-?([rltbse])-?(-?.+)$/, directionSize("margin")],
+  [/^m-(inline|block)-(-?.+)$/, directionSize("margin")],
+  [/^m-?([bi][se])-?(-?.+)$/, directionSize("margin")]
 ];
 
 const transformGpu = {
-  "--un-transform": "rotate(var(--un-rotate)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z))"
+  "--un-transform": [
+    "translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z))",
+    "rotate(var(--un-rotate))",
+    "rotateX(var(--un-rotate-x))",
+    "rotateY(var(--un-rotate-y))",
+    "rotateZ(var(--un-rotate-z))",
+    "skewX(var(--un-skew-x))",
+    "skewY(var(--un-skew-y))",
+    "scaleX(var(--un-scale-x))",
+    "scaleY(var(--un-scale-y))",
+    "scaleZ(var(--un-scale-z))"
+  ].join(" ")
 };
 const transformCpu = {
-  "--un-transform": "rotate(var(--un-rotate)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))"
+  "--un-transform": [
+    "translateX(var(--un-translate-x))",
+    "translateY(var(--un-translate-y))",
+    "translateZ(var(--un-translate-z))",
+    "rotate(var(--un-rotate))",
+    "rotateX(var(--un-rotate-x))",
+    "rotateY(var(--un-rotate-y))",
+    "rotateZ(var(--un-rotate-z))",
+    "skewX(var(--un-skew-x))",
+    "skewY(var(--un-skew-y))",
+    "scaleX(var(--un-scale-x))",
+    "scaleY(var(--un-scale-y))",
+    "scaleZ(var(--un-scale-z))"
+  ].join(" ")
 };
 const transformBase = {
   "--un-rotate": 0,
+  "--un-rotate-x": 0,
+  "--un-rotate-y": 0,
+  "--un-rotate-z": 0,
   "--un-scale-x": 1,
   "--un-scale-y": 1,
   "--un-scale-z": 1,
@@ -637,7 +716,8 @@ const transforms = [
   }],
   [/^translate-()(.+)$/, handleTranslate],
   [/^translate-([xyz])-(.+)$/, handleTranslate],
-  [/^rotate-(.+)$/, handleRotate],
+  [/^rotate-()(.+)$/, handleRotate],
+  [/^rotate(-[xyz])-(.+)$/, handleRotate],
   [/^skew-()(.+)$/, handleSkew],
   [/^skew-([xy])-(.+)$/, handleSkew],
   [/^scale-()(.+)$/, handleScale],
@@ -676,14 +756,14 @@ function handleScale([, d, b]) {
     ];
   }
 }
-function handleRotate([, b]) {
+function handleRotate([, d, b]) {
   const v = handler.bracket.degree(b);
   if (v != null) {
     return [
       transformBase,
       {
-        "--un-rotate": v,
-        "transform": "var(--un-transform)"
+        [`--un-rotate${d || ""}`]: v,
+        transform: "var(--un-transform)"
       }
     ];
   }
@@ -732,6 +812,9 @@ const cssVariables = [
       return { [prop]: `var(--${varname})` };
   }]
 ];
+const cssProperty = [
+  [/^\[(.+):(.+)\]$/, ([, prop, value]) => ({ [prop]: handler.bracket(`[${value}]`) })]
+];
 
 const questionMark = [
   [
@@ -772,7 +855,7 @@ const svgUtilities = [
   [/^fill-(.+)$/, colorResolver("fill", "fill")],
   [/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": handler.bracket.percent(opacity) })],
   ["fill-none", { fill: "none" }],
-  [/^stroke-(?:size-|width-)?(.+)$/, ([, s]) => ({ "stroke-width": handler.bracket.fraction.px.number(s) })],
+  [/^stroke-(?:width-|size-)?(.+)$/, ([, s]) => ({ "stroke-width": handler.bracket.fraction.px.number(s) })],
   [/^stroke-dash-(.+)$/, ([, s]) => ({ "stroke-dasharray": handler.bracket.number(s) })],
   [/^stroke-offset-(.+)$/, ([, s]) => ({ "stroke-dashoffset": handler.bracket.px.numberWithUnit(s) })],
   [/^stroke-(.+)$/, colorResolver("stroke", "stroke")],
@@ -790,6 +873,7 @@ const svgUtilities = [
 
 const rules = [
   cssVariables,
+  cssProperty,
   paddings,
   margins,
   displays,
@@ -844,4 +928,4 @@ const rules = [
   questionMark
 ].flat(1);
 
-export { textDecorations as $, sizes as A, aspectRatio as B, paddings as C, margins as D, varEmpty as E, displays as F, appearances as G, cursors as H, pointerEvents as I, resizes as J, userSelects as K, whitespaces as L, contents as M, breaks as N, textOverflows as O, textTransforms as P, fontStyles as Q, fontSmoothings as R, svgUtilities as S, transforms as T, transitions as U, fonts as V, tabSizes as W, textIndents as X, textStrokes as Y, textShadows as Z, cssVariables as _, appearance as a, borders as b, opacity as c, textColors as d, bgColors as e, flex as f, gaps as g, grids as h, overflows as i, justifies as j, orders as k, alignments as l, placements as m, insets as n, outline as o, positions as p, floats as q, rules as r, boxSizing as s, textAligns as t, questionMark as u, verticalAligns as v, willChange as w, rings as x, boxShadows as y, zIndexes as z };
+export { cssVariables as $, boxShadows as A, sizes as B, aspectRatio as C, paddings as D, margins as E, varEmpty as F, displays as G, appearances as H, cursors as I, pointerEvents as J, resizes as K, userSelects as L, whitespaces as M, contents as N, breaks as O, textOverflows as P, textTransforms as Q, fontStyles as R, fontSmoothings as S, svgUtilities as T, transforms as U, transitions as V, fonts as W, tabSizes as X, textIndents as Y, textStrokes as Z, textShadows as _, appearance as a, cssProperty as a0, textDecorations as a1, borders as b, opacity as c, textColors as d, bgColors as e, flex as f, gaps as g, grids as h, overflows as i, justifies as j, orders as k, alignments as l, placements as m, insets as n, outline as o, positions as p, floats as q, rules as r, boxSizing as s, textAligns as t, questionMark as u, verticalAligns as v, willChange as w, rings as x, shadowBase as y, zIndexes as z };

package/dist/chunks/utilities.cjs

@@ -12,13 +12,27 @@ const directionMap = {
   "x": ["-left", "-right"],
   "y": ["-top", "-bottom"],
   "": [""],
-  "a": [""]
+  "bs": ["-block-start"],
+  "be": ["-block-end"],
+  "is": ["-inline-start"],
+  "ie": ["-inline-end"],
+  "block": ["-block-start", "-block-end"],
+  "inline": ["-inline-start", "-inline-end"]
+};
+const insetMap = {
+  ...directionMap,
+  bs: ["-inset-block-start"],
+  be: ["-inset-block-end"],
+  is: ["-inset-inline-start"],
+  ie: ["-inset-inline-end"],
+  block: ["-inset-block-start", "-inset-block-end"],
+  inline: ["-inset-inline-start", "-inset-inline-end"]
 };
 const cornerMap = {
-  "t": ["-top-left", "-top-right"],
+  "l": ["-top-left", "-bottom-left"],
   "r": ["-top-right", "-bottom-right"],
+  "t": ["-top-left", "-top-right"],
   "b": ["-bottom-left", "-bottom-right"],
-  "l": ["-bottom-left", "-top-left"],
   "tl": ["-top-left"],
   "lt": ["-top-left"],
   "tr": ["-top-right"],
@@ -27,7 +41,19 @@ const cornerMap = {
   "lb": ["-bottom-left"],
   "br": ["-bottom-right"],
   "rb": ["-bottom-right"],
-  "": [""]
+  "": [""],
+  "bs": ["-start-start", "-start-end"],
+  "be": ["-end-start", "-end-end"],
+  "is": ["-end-start", "-start-start"],
+  "ie": ["-start-end", "-end-end"],
+  "bs-is": ["-start-start"],
+  "is-bs": ["-start-start"],
+  "bs-ie": ["-start-end"],
+  "ie-bs": ["-start-end"],
+  "be-is": ["-end-start"],
+  "is-be": ["-end-start"],
+  "be-ie": ["-end-end"],
+  "ie-be": ["-end-end"]
 };
 const xyzMap = {
   "x": ["-x"],
@@ -332,6 +358,7 @@ exports.directionMap = directionMap;
 exports.directionSize = directionSize;
 exports.h = h;
 exports.handler = handler;
+exports.insetMap = insetMap;
 exports.parseColor = parseColor;
 exports.positionMap = positionMap;
 exports.valueHandlers = valueHandlers;

package/dist/chunks/utilities.mjs

@@ -10,13 +10,27 @@ const directionMap = {
   "x": ["-left", "-right"],
   "y": ["-top", "-bottom"],
   "": [""],
-  "a": [""]
+  "bs": ["-block-start"],
+  "be": ["-block-end"],
+  "is": ["-inline-start"],
+  "ie": ["-inline-end"],
+  "block": ["-block-start", "-block-end"],
+  "inline": ["-inline-start", "-inline-end"]
+};
+const insetMap = {
+  ...directionMap,
+  bs: ["-inset-block-start"],
+  be: ["-inset-block-end"],
+  is: ["-inset-inline-start"],
+  ie: ["-inset-inline-end"],
+  block: ["-inset-block-start", "-inset-block-end"],
+  inline: ["-inset-inline-start", "-inset-inline-end"]
 };
 const cornerMap = {
-  "t": ["-top-left", "-top-right"],
+  "l": ["-top-left", "-bottom-left"],
   "r": ["-top-right", "-bottom-right"],
+  "t": ["-top-left", "-top-right"],
   "b": ["-bottom-left", "-bottom-right"],
-  "l": ["-bottom-left", "-top-left"],
   "tl": ["-top-left"],
   "lt": ["-top-left"],
   "tr": ["-top-right"],
@@ -25,7 +39,19 @@ const cornerMap = {
   "lb": ["-bottom-left"],
   "br": ["-bottom-right"],
   "rb": ["-bottom-right"],
-  "": [""]
+  "": [""],
+  "bs": ["-start-start", "-start-end"],
+  "be": ["-end-start", "-end-end"],
+  "is": ["-end-start", "-start-start"],
+  "ie": ["-start-end", "-end-end"],
+  "bs-is": ["-start-start"],
+  "is-bs": ["-start-start"],
+  "bs-ie": ["-start-end"],
+  "ie-bs": ["-start-end"],
+  "be-is": ["-end-start"],
+  "is-be": ["-end-start"],
+  "be-ie": ["-end-end"],
+  "ie-be": ["-end-end"]
 };
 const xyzMap = {
   "x": ["-x"],
@@ -323,4 +349,4 @@ const colorResolver = (property, varName) => ([, body], { theme }) => {
   }
 };
 
-export { cornerMap as a, capitalize as b, colorResolver as c, directionMap as d, directionSize as e, positionMap as f, h as g, handler as h, parseColor as p, valueHandlers as v, xyzMap as x };
+export { cornerMap as a, directionSize as b, colorResolver as c, directionMap as d, positionMap as e, h as f, capitalize as g, handler as h, insetMap as i, parseColor as p, valueHandlers as v, xyzMap as x };

package/dist/{colors-6d634692.d.ts → colors-338f482c.d.ts}

@@ -1,4 +1,4 @@
-import { T as Theme } from './types-a2d2b52f';
+import { T as Theme } from './types-c14b808b';
 
 declare const colors: Theme['colors'];
 

package/dist/colors.d.ts

@@ -1,2 +1,2 @@
-export { c as colors } from './colors-6d634692';
-import './types-a2d2b52f';
+export { c as colors } from './colors-338f482c';
+import './types-c14b808b';

package/dist/{default-958434b6.d.ts → default-17948303.d.ts}

@@ -1,4 +1,4 @@
-import { T as Theme } from './types-a2d2b52f';
+import { T as Theme } from './types-c14b808b';
 
 declare const theme: Theme;
 

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import { PresetOptions, Preset } from '@unocss/core';
-import { T as Theme } from './types-a2d2b52f';
-export { T as Theme, a as ThemeAnimation } from './types-a2d2b52f';
-export { t as theme } from './default-958434b6';
-export { c as colors } from './colors-6d634692';
-export { p as parseColor } from './utilities-22a522e2';
+import { T as Theme } from './types-c14b808b';
+export { T as Theme, a as ThemeAnimation } from './types-c14b808b';
+export { t as theme } from './default-17948303';
+export { c as colors } from './colors-338f482c';
+export { p as parseColor } from './utilities-13c33ba5';
 
 interface PresetMiniOptions extends PresetOptions {
     /**

package/dist/rules.cjs

@@ -18,6 +18,7 @@ exports.boxShadows = _default.boxShadows;
 exports.boxSizing = _default.boxSizing;
 exports.breaks = _default.breaks;
 exports.contents = _default.contents;
+exports.cssProperty = _default.cssProperty;
 exports.cssVariables = _default.cssVariables;
 exports.cursors = _default.cursors;
 exports.displays = _default.displays;
@@ -43,6 +44,7 @@ exports.questionMark = _default.questionMark;
 exports.resizes = _default.resizes;
 exports.rings = _default.rings;
 exports.rules = _default.rules;
+exports.shadowBase = _default.shadowBase;
 exports.sizes = _default.sizes;
 exports.svgUtilities = _default.svgUtilities;
 exports.tabSizes = _default.tabSizes;

package/dist/rules.d.ts

@@ -1,5 +1,5 @@
 import { Rule } from '@unocss/core';
-import { T as Theme } from './types-a2d2b52f';
+import { T as Theme } from './types-c14b808b';
 
 declare const verticalAligns: Rule[];
 declare const textAligns: Rule[];
@@ -49,6 +49,14 @@ declare const questionMark: Rule[];
 
 declare const rings: Rule<Theme>[];
 
+declare const shadowBase: {
+    "$$shortcut-no-merge": string;
+    '--un-ring-offset-shadow': string;
+    '--un-ring-shadow': string;
+    '--un-shadow-inset': string;
+    '--un-shadow': string;
+    '--un-shadow-colored': string;
+};
 declare const boxShadows: Rule<Theme>[];
 
 declare const sizes: Rule<Theme>[];
@@ -85,7 +93,8 @@ declare const textStrokes: Rule<Theme>[];
 declare const textShadows: Rule<Theme>[];
 
 declare const cssVariables: Rule[];
+declare const cssProperty: Rule[];
 
 declare const textDecorations: Rule[];
 
-export { alignments, appearance, appearances, aspectRatio, bgColors, borders, boxShadows, boxSizing, breaks, contents, cssVariables, cursors, displays, flex, floats, fontSmoothings, fontStyles, fonts, gaps, grids, 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, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };
+export { alignments, appearance, appearances, aspectRatio, bgColors, borders, boxShadows, boxSizing, breaks, contents, cssProperty, cssVariables, cursors, displays, flex, floats, fontSmoothings, fontStyles, fonts, gaps, grids, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, rings, rules, shadowBase, sizes, svgUtilities, tabSizes, textAligns, textColors, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };

package/dist/rules.mjs

@@ -1,3 +1,3 @@
-export { l as alignments, a as appearance, G as appearances, B as aspectRatio, e as bgColors, b as borders, y as boxShadows, s as boxSizing, N as breaks, M as contents, _ as cssVariables, H as cursors, F as displays, f as flex, q as floats, R as fontSmoothings, Q as fontStyles, V as fonts, g as gaps, h as grids, n as insets, j as justifies, D as margins, c as opacity, k as orders, o as outline, i as overflows, C as paddings, m as placements, I as pointerEvents, p as positions, u as questionMark, J as resizes, x as rings, r as rules, A as sizes, S as svgUtilities, W as tabSizes, t as textAligns, d as textColors, $ as textDecorations, X as textIndents, O as textOverflows, Z as textShadows, Y as textStrokes, P as textTransforms, T as transforms, U as transitions, K as userSelects, E as varEmpty, v as verticalAligns, L as whitespaces, w as willChange, z as zIndexes } from './chunks/default2.mjs';
+export { l as alignments, a as appearance, H as appearances, C as aspectRatio, e as bgColors, b as borders, A as boxShadows, s as boxSizing, O as breaks, N as contents, a0 as cssProperty, $ as cssVariables, I as cursors, G as displays, f as flex, q as floats, S as fontSmoothings, R as fontStyles, W as fonts, g as gaps, h as grids, n as insets, j as justifies, E as margins, c as opacity, k as orders, o as outline, i as overflows, D as paddings, m as placements, J as pointerEvents, p as positions, u as questionMark, K as resizes, x as rings, r as rules, y as shadowBase, B as sizes, T as svgUtilities, X as tabSizes, t as textAligns, d as textColors, a1 as textDecorations, Y as textIndents, P as textOverflows, _ as textShadows, Z as textStrokes, Q as textTransforms, U as transforms, V as transitions, L as userSelects, F as varEmpty, v as verticalAligns, M as whitespaces, w as willChange, z as zIndexes } from './chunks/default2.mjs';
 import './chunks/utilities.mjs';
 import '@unocss/core';

package/dist/theme.d.ts

@@ -1,7 +1,7 @@
-export { c as colors } from './colors-6d634692';
-export { t as theme } from './default-958434b6';
-import { T as Theme } from './types-a2d2b52f';
-export { T as Theme, a as ThemeAnimation } from './types-a2d2b52f';
+export { c as colors } from './colors-338f482c';
+export { t as theme } from './default-17948303';
+import { T as Theme } from './types-c14b808b';
+export { T as Theme, a as ThemeAnimation } from './types-c14b808b';
 
 declare const blur: {
     DEFAULT: string;
@@ -55,11 +55,11 @@ declare const borderRadius: {
     full: string;
 };
 declare const boxShadow: {
-    DEFAULT: string;
+    DEFAULT: string[];
     sm: string;
-    md: string;
-    lg: string;
-    xl: string;
+    md: string[];
+    lg: string[];
+    xl: string[];
     '2xl': string;
     inner: string;
     none: string;

package/dist/{types-a2d2b52f.d.ts → types-c14b808b.d.ts}

@@ -11,6 +11,12 @@ interface Theme {
     maxHeight?: Record<string, string>;
     minWidth?: Record<string, string>;
     minHeight?: Record<string, string>;
+    inlineSize?: Record<string, string>;
+    blockSize?: Record<string, string>;
+    maxInlineSize?: Record<string, string>;
+    maxBlockSize?: Record<string, string>;
+    minInlineSize?: Record<string, string>;
+    minBlockSize?: Record<string, string>;
     borderRadius?: Record<string, string>;
     breakpoints?: Record<string, string>;
     colors?: Record<string, string | Record<string, string>>;
@@ -19,9 +25,9 @@ interface Theme {
     lineHeight?: Record<string, string>;
     letterSpacing?: Record<string, string>;
     wordSpacing?: Record<string, string>;
-    boxShadow?: Record<string, string>;
+    boxShadow?: Record<string, string | string[]>;
     textIndent?: Record<string, string>;
-    textShadow?: Record<string, string>;
+    textShadow?: Record<string, string | string[]>;
     textStrokeWidth?: Record<string, string>;
     blur?: Record<string, string>;
     dropShadow?: Record<string, string | string[]>;

package/dist/{utilities-22a522e2.d.ts → utilities-13c33ba5.d.ts}

@@ -1,5 +1,5 @@
 import { DynamicMatcher, ParsedColorValue } from '@unocss/core';
-import { T as Theme } from './types-a2d2b52f';
+import { T as Theme } from './types-c14b808b';
 
 declare function capitalize<T extends string>(str: T): Capitalize<T>;
 /**

package/dist/utils.cjs

@@ -15,6 +15,7 @@ exports.directionMap = utilities.directionMap;
 exports.directionSize = utilities.directionSize;
 exports.h = utilities.h;
 exports.handler = utilities.handler;
+exports.insetMap = utilities.insetMap;
 exports.parseColor = utilities.parseColor;
 exports.positionMap = utilities.positionMap;
 exports.valueHandlers = utilities.valueHandlers;

package/dist/utils.d.ts

@@ -1,9 +1,10 @@
 import * as _unocss_core from '@unocss/core';
 import { VariantHandler } from '@unocss/core';
-export { c as capitalize, a as colorResolver, d as directionSize, p as parseColor } from './utilities-22a522e2';
-import './types-a2d2b52f';
+export { c as capitalize, a as colorResolver, d as directionSize, p as parseColor } from './utilities-13c33ba5';
+import './types-c14b808b';
 
 declare const directionMap: Record<string, string[]>;
+declare const insetMap: Record<string, string[]>;
 declare const cornerMap: Record<string, string[]>;
 declare const xyzMap: Record<string, string[]>;
 declare const positionMap: Record<string, string>;
@@ -59,4 +60,4 @@ declare const h: _unocss_core.ValueHandler<"number" | "auto" | "numberWithUnit"
 declare const variantMatcher: (name: string, selector?: ((input: string) => string | undefined) | undefined) => (input: string) => VariantHandler | undefined;
 declare const variantParentMatcher: (name: string, parent: string) => (input: string) => VariantHandler | undefined;
 
-export { cornerMap, directionMap, h, handler, positionMap, handlers as valueHandlers, variantMatcher, variantParentMatcher, xyzMap };
+export { cornerMap, directionMap, h, handler, insetMap, positionMap, handlers as valueHandlers, variantMatcher, variantParentMatcher, xyzMap };

package/dist/utils.mjs

@@ -1,3 +1,3 @@
-export { b as capitalize, c as colorResolver, a as cornerMap, d as directionMap, e as directionSize, g as h, h as handler, p as parseColor, f as positionMap, v as valueHandlers, x as xyzMap } from './chunks/utilities.mjs';
+export { g as capitalize, c as colorResolver, a as cornerMap, d as directionMap, b as directionSize, f as h, h as handler, i as insetMap, p as parseColor, e as positionMap, v as valueHandlers, x as xyzMap } from './chunks/utilities.mjs';
 export { v as variantMatcher, a as variantParentMatcher } from './chunks/variants.mjs';
 import '@unocss/core';

package/dist/variants.d.ts

@@ -1,10 +1,10 @@
 import * as _unocss_core from '@unocss/core';
 import { Variant, VariantFunction, VariantObject } from '@unocss/core';
-import { T as Theme } from './types-a2d2b52f';
+import { T as Theme } from './types-c14b808b';
 import { PresetMiniOptions } from './index';
-import './default-958434b6';
-import './colors-6d634692';
-import './utilities-22a522e2';
+import './default-17948303';
+import './colors-338f482c';
+import './utilities-13c33ba5';
 
 declare const variantBreakpoints: Variant<Theme>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-mini",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "description": "The minimal preset for UnoCSS",
   "keywords": [
     "unocss",
@@ -61,7 +61,7 @@
     "*.css"
   ],
   "dependencies": {
-    "@unocss/core": "0.22.0"
+    "@unocss/core": "0.22.1"
   },
   "scripts": {
     "build": "unbuild",