@unocss/preset-wind4 66.4.1 → 66.5.0

package/dist/index.mjs

@@ -1,14 +1,14 @@
 import { uniq, toArray, definePreset } from '@unocss/core';
 import { extractorArbitraryVariants } from '@unocss/extractor-arbitrary-variants';
-import { n as trackedProperties, k as themeTracking, M as compressCSS, z as getThemeByKey, m as detectThemeValue, t as trackedTheme, g as globalKeywords, P as PRESET_NAME } from './shared/preset-wind4.Dh6P6wnz.mjs';
+import { n as trackedProperties, k as themeTracking, M as compressCSS, z as getThemeByKey, m as detectThemeValue, t as trackedTheme, g as globalKeywords, P as PRESET_NAME } from './shared/preset-wind4.DQ5mCnzs.mjs';
 import { alphaPlaceholdersRE } from '@unocss/rule-utils';
 import { postprocessors } from './postprocess.mjs';
-import { k as variants } from './shared/preset-wind4.CGl5yp9H.mjs';
+import { k as variants } from './shared/preset-wind4.CnuVK22X.mjs';
 import { theme as theme$1 } from './theme.mjs';
-import { s as shortcuts } from './shared/preset-wind4.DJR3nFnD.mjs';
-import { r as rules } from './shared/preset-wind4.CqdenNgh.mjs';
+import { s as shortcuts } from './shared/preset-wind4.B-pGDZEs.mjs';
+import { r as rules } from './shared/preset-wind4.0HJheUIP.mjs';
 import './colors.mjs';
-import './shared/preset-wind4.Y5BADsqi.mjs';
+import './shared/preset-wind4.MfvwEdUa.mjs';
 
 function properties() {
   return {
@@ -446,7 +446,8 @@ const ExcludeCssVarKeys = [
   "property",
   "aria",
   "media",
-  "supports"
+  "supports",
+  "containers"
 ];
 function getThemeVarsMap(theme2, keys) {
   const themeMap = /* @__PURE__ */ new Map([

package/dist/rules.d.mts

@@ -1,4 +1,4 @@
-import { Rule, CSSEntries, Shortcut, StaticRule, CSSValueInput } from '@unocss/core';
+import { Rule, CSSEntries, Shortcut, StaticRule, CSSValueInput, VariantHandler } from '@unocss/core';
 import { T as Theme } from './shared/preset-wind4.CeNzqhCV.mjs';
 export { r as rules } from './shared/preset-wind4.O8irdiHr.mjs';
 import { Theme as Theme$1 } from '@unocss/preset-wind4';
@@ -105,7 +105,7 @@ declare const aspectRatio: Rule<Theme>[];
 declare const paddings: Rule<Theme>[];
 declare const margins: Rule<Theme>[];
 declare const spaces: Rule<Theme>[];
-declare function notLastChildSelector(s: string): string;
+declare function notLastChildSelectorVariant(s: string): VariantHandler;
 
 declare const displays: Rule<Theme>[];
 declare const appearances: Rule<Theme>[];
@@ -168,4 +168,4 @@ declare const cssProperty: Rule<Theme>[];
 
 declare const viewTransition: Rule<Theme>[];
 
-export { accents, accessibility, alignments, animations, appearance, appearances, aspectRatio, backgroundBlendModes, backgroundStyles, bgColors, borderStyles, borders, boxShadows, boxSizing, breaks, carets, colorScheme, columns, container, containerParent, containerShortcuts, contains, contentVisibility, contents, cssProperty, cssVariables, cursors, displays, divides, dynamicViewportHeight, fieldSizing, filters, flex, flexGridJustifiesAlignments, floats, fontSmoothings, fontStyles, fontVariantNumeric, fonts, gaps, grids, handlerBorderStyle, hyphens, imageRenderings, insets, isolations, justifies, lineClamps, listStyle, margins, masks, mixBlendModes, notLastChildSelector, objectPositions, opacity, orders, outline, overflows, overscrolls, paddings, placeholders, placements, pointerEvents, positions, questionMark, resizes, rings, screenReadersAccess, scrollBehaviors, scrolls, shadowProperties, sizes, spaces, splitShorthand, svgUtilities, tabSizes, tables, textAligns, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, textWraps, touchActions, transformBase, transforms, transitions, userSelects, verticalAligns, viewTransition, whitespaces, willChange, writingModes, writingOrientations, zIndexes };
+export { accents, accessibility, alignments, animations, appearance, appearances, aspectRatio, backgroundBlendModes, backgroundStyles, bgColors, borderStyles, borders, boxShadows, boxSizing, breaks, carets, colorScheme, columns, container, containerParent, containerShortcuts, contains, contentVisibility, contents, cssProperty, cssVariables, cursors, displays, divides, dynamicViewportHeight, fieldSizing, filters, flex, flexGridJustifiesAlignments, floats, fontSmoothings, fontStyles, fontVariantNumeric, fonts, gaps, grids, handlerBorderStyle, hyphens, imageRenderings, insets, isolations, justifies, lineClamps, listStyle, margins, masks, mixBlendModes, notLastChildSelectorVariant, objectPositions, opacity, orders, outline, overflows, overscrolls, paddings, placeholders, placements, pointerEvents, positions, questionMark, resizes, rings, screenReadersAccess, scrollBehaviors, scrolls, shadowProperties, sizes, spaces, splitShorthand, svgUtilities, tabSizes, tables, textAligns, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, textWraps, touchActions, transformBase, transforms, transitions, userSelects, verticalAligns, viewTransition, whitespaces, willChange, writingModes, writingOrientations, zIndexes };

package/dist/rules.d.ts

@@ -1,4 +1,4 @@
-import { Rule, CSSEntries, Shortcut, StaticRule, CSSValueInput } from '@unocss/core';
+import { Rule, CSSEntries, Shortcut, StaticRule, CSSValueInput, VariantHandler } from '@unocss/core';
 import { T as Theme } from './shared/preset-wind4.CeNzqhCV.js';
 export { r as rules } from './shared/preset-wind4.oLaz9HAb.js';
 import { Theme as Theme$1 } from '@unocss/preset-wind4';
@@ -105,7 +105,7 @@ declare const aspectRatio: Rule<Theme>[];
 declare const paddings: Rule<Theme>[];
 declare const margins: Rule<Theme>[];
 declare const spaces: Rule<Theme>[];
-declare function notLastChildSelector(s: string): string;
+declare function notLastChildSelectorVariant(s: string): VariantHandler;
 
 declare const displays: Rule<Theme>[];
 declare const appearances: Rule<Theme>[];
@@ -168,4 +168,4 @@ declare const cssProperty: Rule<Theme>[];
 
 declare const viewTransition: Rule<Theme>[];
 
-export { accents, accessibility, alignments, animations, appearance, appearances, aspectRatio, backgroundBlendModes, backgroundStyles, bgColors, borderStyles, borders, boxShadows, boxSizing, breaks, carets, colorScheme, columns, container, containerParent, containerShortcuts, contains, contentVisibility, contents, cssProperty, cssVariables, cursors, displays, divides, dynamicViewportHeight, fieldSizing, filters, flex, flexGridJustifiesAlignments, floats, fontSmoothings, fontStyles, fontVariantNumeric, fonts, gaps, grids, handlerBorderStyle, hyphens, imageRenderings, insets, isolations, justifies, lineClamps, listStyle, margins, masks, mixBlendModes, notLastChildSelector, objectPositions, opacity, orders, outline, overflows, overscrolls, paddings, placeholders, placements, pointerEvents, positions, questionMark, resizes, rings, screenReadersAccess, scrollBehaviors, scrolls, shadowProperties, sizes, spaces, splitShorthand, svgUtilities, tabSizes, tables, textAligns, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, textWraps, touchActions, transformBase, transforms, transitions, userSelects, verticalAligns, viewTransition, whitespaces, willChange, writingModes, writingOrientations, zIndexes };
+export { accents, accessibility, alignments, animations, appearance, appearances, aspectRatio, backgroundBlendModes, backgroundStyles, bgColors, borderStyles, borders, boxShadows, boxSizing, breaks, carets, colorScheme, columns, container, containerParent, containerShortcuts, contains, contentVisibility, contents, cssProperty, cssVariables, cursors, displays, divides, dynamicViewportHeight, fieldSizing, filters, flex, flexGridJustifiesAlignments, floats, fontSmoothings, fontStyles, fontVariantNumeric, fonts, gaps, grids, handlerBorderStyle, hyphens, imageRenderings, insets, isolations, justifies, lineClamps, listStyle, margins, masks, mixBlendModes, notLastChildSelectorVariant, objectPositions, opacity, orders, outline, overflows, overscrolls, paddings, placeholders, placements, pointerEvents, positions, questionMark, resizes, rings, screenReadersAccess, scrollBehaviors, scrolls, shadowProperties, sizes, spaces, splitShorthand, svgUtilities, tabSizes, tables, textAligns, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, textWraps, touchActions, transformBase, transforms, transitions, userSelects, verticalAligns, viewTransition, whitespaces, willChange, writingModes, writingOrientations, zIndexes };

package/dist/rules.mjs

@@ -1,5 +1,5 @@
-export { d as accents, an as accessibility, I as alignments, a as animations, c as appearance, $ as appearances, V as aspectRatio, ak as backgroundBlendModes, b as backgroundStyles, m as bgColors, g as borderStyles, h as borders, T as boxShadows, O as boxSizing, a8 as breaks, e as carets, n as colorScheme, p as columns, a1 as contains, a6 as contentVisibility, a7 as contents, aD as cssProperty, aC as cssVariables, a0 as cursors, _ as displays, u as divides, am as dynamicViewportHeight, ao as fieldSizing, x as filters, y as flex, K as flexGridJustifiesAlignments, M as floats, ad as fontSmoothings, ac as fontStyles, aA as fontVariantNumeric, av as fonts, z as gaps, A as grids, j as handlerBorderStyle, ae as hyphens, i as imageRenderings, L as insets, ai as isolations, G as justifies, C as lineClamps, l as listStyle, X as margins, D as masks, al as mixBlendModes, Z as notLastChildSelector, aj as objectPositions, k as opacity, H as orders, o as outline, B as overflows, f as overscrolls, W as paddings, E as placeholders, J as placements, a2 as pointerEvents, F as positions, P as questionMark, a3 as resizes, Q as rings, r as rules, ah as screenReadersAccess, s as scrollBehaviors, R as scrolls, S as shadowProperties, U as sizes, Y as spaces, aB as splitShorthand, ap as svgUtilities, aw as tabSizes, aq as tables, t as textAligns, q as textDecorations, ax as textIndents, aa as textOverflows, az as textShadows, ay as textStrokes, ab as textTransforms, a9 as textWraps, ar as touchActions, as as transformBase, at as transforms, au as transitions, a4 as userSelects, v as verticalAligns, aE as viewTransition, a5 as whitespaces, w as willChange, af as writingModes, ag as writingOrientations, N as zIndexes } from './shared/preset-wind4.CqdenNgh.mjs';
-export { a as container, c as containerParent, b as containerShortcuts } from './shared/preset-wind4.Y5BADsqi.mjs';
-import './shared/preset-wind4.Dh6P6wnz.mjs';
+export { d as accents, an as accessibility, I as alignments, a as animations, c as appearance, $ as appearances, V as aspectRatio, ak as backgroundBlendModes, b as backgroundStyles, m as bgColors, g as borderStyles, h as borders, T as boxShadows, O as boxSizing, a8 as breaks, e as carets, n as colorScheme, p as columns, a1 as contains, a6 as contentVisibility, a7 as contents, aD as cssProperty, aC as cssVariables, a0 as cursors, _ as displays, u as divides, am as dynamicViewportHeight, ao as fieldSizing, x as filters, y as flex, K as flexGridJustifiesAlignments, M as floats, ad as fontSmoothings, ac as fontStyles, aA as fontVariantNumeric, av as fonts, z as gaps, A as grids, j as handlerBorderStyle, ae as hyphens, i as imageRenderings, L as insets, ai as isolations, G as justifies, C as lineClamps, l as listStyle, X as margins, D as masks, al as mixBlendModes, Z as notLastChildSelectorVariant, aj as objectPositions, k as opacity, H as orders, o as outline, B as overflows, f as overscrolls, W as paddings, E as placeholders, J as placements, a2 as pointerEvents, F as positions, P as questionMark, a3 as resizes, Q as rings, r as rules, ah as screenReadersAccess, s as scrollBehaviors, R as scrolls, S as shadowProperties, U as sizes, Y as spaces, aB as splitShorthand, ap as svgUtilities, aw as tabSizes, aq as tables, t as textAligns, q as textDecorations, ax as textIndents, aa as textOverflows, az as textShadows, ay as textStrokes, ab as textTransforms, a9 as textWraps, ar as touchActions, as as transformBase, at as transforms, au as transitions, a4 as userSelects, v as verticalAligns, aE as viewTransition, a5 as whitespaces, w as willChange, af as writingModes, ag as writingOrientations, N as zIndexes } from './shared/preset-wind4.0HJheUIP.mjs';
+export { a as container, c as containerParent, b as containerShortcuts } from './shared/preset-wind4.MfvwEdUa.mjs';
+import './shared/preset-wind4.DQ5mCnzs.mjs';
 import '@unocss/core';
 import '@unocss/rule-utils';

package/dist/shared/{preset-wind4.CqdenNgh.mjs → preset-wind4.0HJheUIP.mjs}

@@ -1,7 +1,7 @@
-import { g as globalKeywords, b as h, G as makeGlobalStaticRules, p as positionMap, w as parseColor, S as SpecialColorKey, l as generateThemeVariable, H as defineProperty, k as themeTracking, m as detectThemeValue, B as colorResolver, I as isCSSMathFn, d as directionMap, E as hasParseableColor, c as cornerMap, A as colorCSSGenerator, J as isSize, s as directionSize, q as numberResolver, D as colorableShadows, L as hyphenate, i as insetMap, r as resolveBreakpoints, C as CONTROL_NO_NEGATIVE, x as xyzMap, N as splitComma, e as xyzArray, O as bracketTypeRe } from './preset-wind4.Dh6P6wnz.mjs';
+import { g as globalKeywords, b as h, G as makeGlobalStaticRules, p as positionMap, w as parseColor, S as SpecialColorKey, l as generateThemeVariable, H as defineProperty, k as themeTracking, m as detectThemeValue, B as colorResolver, I as isCSSMathFn, d as directionMap, E as hasParseableColor, c as cornerMap, A as colorCSSGenerator, J as isSize, s as directionSize, q as numberResolver, D as colorableShadows, L as hyphenate, i as insetMap, r as resolveBreakpoints, C as CONTROL_NO_NEGATIVE, x as xyzMap, N as splitComma, e as xyzArray, O as bracketTypeRe } from './preset-wind4.DQ5mCnzs.mjs';
 import { symbols, notNull } from '@unocss/core';
-import { a as container, c as containerParent } from './preset-wind4.Y5BADsqi.mjs';
-import { getStringComponent } from '@unocss/rule-utils';
+import { a as container, c as containerParent } from './preset-wind4.MfvwEdUa.mjs';
+import { getStringComponents, getStringComponent } from '@unocss/rule-utils';
 
 const verticalAlignAlias = {
   "mid": "middle",
@@ -223,13 +223,16 @@ const backgroundStyles = [
   [/^bg-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({
     "background-image": `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgb(255 255 255 / 0))))`
   }), { autocomplete: ["bg-gradient-repeating", "bg-gradient-(linear|radial|conic)", "bg-gradient-repeating-(linear|radial|conic)"] }],
-  // ignore any center position
-  [/^bg-(linear|radial|conic)(?:-to-([rltb]{1,2}))?(?:\/(.+))?$/, ([, m, d, s]) => {
+  [/^bg-(gradient|linear|radial|conic)(?:-to-([rltb]{1,2}))?(?:\/(.+))?$/, ([, m, d, s]) => {
     return {
       "--un-gradient-position": `${d in positionMap ? `to ${positionMap[d]} ` : " "}${resolveModifier(s)}`,
-      "background-image": `${m}-gradient(var(--un-gradient-stops))`
+      "background-image": `${m === "gradient" ? "linear" : m}-gradient(var(--un-gradient-stops))`
     };
-  }, { autocomplete: `bg-gradient-to-(${Object.keys(positionMap).filter((k) => k.length <= 2 && Array.from(k).every((c) => "rltb".includes(c))).join("|")})` }],
+  }, {
+    autocomplete: ["gradient", "linear", "radial", "conic"].map((i) => {
+      return `bg-${i}-to-(${Object.keys(positionMap).filter((k) => k.length <= 2 && Array.from(k).every((c) => "rltb".includes(c))).join("|")})`;
+    })
+  }],
   ["bg-none", { "background-image": "none" }],
   ["box-decoration-slice", { "box-decoration-break": "slice" }],
   ["box-decoration-clone", { "box-decoration-break": "clone" }],
@@ -631,19 +634,25 @@ const margins = [
 ];
 const spaces = [
   [/^space-([xy])-(.+)$/, handlerSpace, { autocomplete: ["space-(x|y)", "space-(x|y)-reverse", "space-(x|y)-$spacing"] }],
-  [/^space-([xy])-reverse$/, function* ([, d], { symbols }) {
+  [/^space-([xy])-reverse$/, function* ([m, d], { symbols }) {
     yield {
-      [symbols.selector]: notLastChildSelector,
+      [symbols.variants]: [notLastChildSelectorVariant(m)],
       [`--un-space-${d}-reverse`]: "1"
     };
     yield defineProperty(`--un-space-${d}-reverse`, { initialValue: 0 });
   }]
 ];
-function notLastChildSelector(s) {
-  const not = ">:not(:last-child)";
-  return s.includes(not) ? s : `${s}${not}`;
+function notLastChildSelectorVariant(s) {
+  return {
+    matcher: s,
+    handle: (input, next) => next({
+      ...input,
+      parent: `${input.parent ? `${input.parent} $$ ` : ""}${input.selector}`,
+      selector: ":where(&>:not(:last-child))"
+    })
+  };
 }
-function* handlerSpace([, d, s], { theme, symbols }) {
+function* handlerSpace([m, d, s], { theme, symbols }) {
   let v;
   const num = numberResolver(s);
   if (num != null) {
@@ -660,7 +669,7 @@ function* handlerSpace([, d, s], { theme, symbols }) {
     });
     if (results) {
       yield {
-        [symbols.selector]: notLastChildSelector,
+        [symbols.variants]: [notLastChildSelectorVariant(m)],
         [`--un-space-${d}-reverse`]: "0",
         ...Object.fromEntries(results)
       };
@@ -675,37 +684,37 @@ const divides = [
     const result = colorResolver("border-color", "divide")(match, ctx);
     if (result) {
       yield {
-        [ctx.symbols.selector]: notLastChildSelector,
+        [ctx.symbols.variants]: [notLastChildSelectorVariant(match[0])],
         ...result[0]
       };
       yield result[1];
     }
   }, { autocomplete: "divide-$colors" }],
-  [/^divide-op(?:acity)?-?(.+)$/, function* ([, opacity], { symbols }) {
+  [/^divide-op(?:acity)?-?(.+)$/, function* ([match, opacity], { symbols }) {
     yield {
-      [symbols.selector]: notLastChildSelector,
+      [symbols.variants]: [notLastChildSelectorVariant(match)],
       "--un-divide-opacity": h.bracket.percent(opacity)
     };
   }, { autocomplete: ["divide-(op|opacity)", "divide-(op|opacity)-<percent>"] }],
   // divides
   [/^divide-?([xy])$/, handlerDivide, { autocomplete: ["divide-(x|y)", "divide-(x|y)-reverse"] }],
   [/^divide-?([xy])-?(.+)$/, handlerDivide],
-  [/^divide-?([xy])-reverse$/, function* ([, d], { symbols }) {
+  [/^divide-?([xy])-reverse$/, function* ([m, d], { symbols }) {
     yield {
-      [symbols.selector]: notLastChildSelector,
+      [symbols.variants]: [notLastChildSelectorVariant(m)],
       [`--un-divide-${d}-reverse`]: "1"
     };
     yield defineProperty(`--un-divide-${d}-reverse`, { initialValue: 0 });
   }],
   // styles
-  [new RegExp(`^divide-(${borderStyles.join("|")})$`), function* ([, style], { symbols }) {
+  [new RegExp(`^divide-(${borderStyles.join("|")})$`), function* ([match, style], { symbols }) {
     yield {
-      [symbols.selector]: notLastChildSelector,
+      [symbols.variants]: [notLastChildSelectorVariant(match)],
       "border-style": style
     };
   }, { autocomplete: borderStyles.map((i) => `divide-${i}`) }]
 ];
-function* handlerDivide([, d, s], { symbols }) {
+function* handlerDivide([m, d, s], { symbols }) {
   let v = h.bracket.cssvar.px(s || "1");
   if (v != null) {
     if (v === "0")
@@ -723,7 +732,7 @@ function* handlerDivide([, d, s], { symbols }) {
     });
     if (results) {
       yield {
-        [symbols.selector]: notLastChildSelector,
+        [symbols.variants]: [notLastChildSelectorVariant(m)],
         [`--un-divide-${d}-reverse`]: 0,
         ...Object.fromEntries(results.flat())
       };
@@ -792,18 +801,31 @@ function toFilter(varName, resolver) {
     }
   };
 }
-function dropShadowResolver([, s], { theme }) {
-  let v = theme.dropShadow?.[s || "DEFAULT"];
-  if (v != null) {
-    const shadows = colorableShadows(v, "--un-drop-shadow-color");
+function dropShadowResolver(match, ctx) {
+  const [, s] = match;
+  const { theme } = ctx;
+  let res = [];
+  if (s) {
+    res = getStringComponents(s, "/", 2) ?? [];
+    if (s.startsWith("/"))
+      res = ["", s.slice(1)];
+  }
+  let v = theme.dropShadow?.[res[0] || "DEFAULT"];
+  const c = s ? h.bracket.cssvar(s) : void 0;
+  if ((v != null || c != null) && !hasParseableColor(c, theme)) {
+    const alpha = res[1] ? h.bracket.percent.cssvar(res[1]) : void 0;
     return [
       {
-        "--un-drop-shadow": `drop-shadow(${shadows.join(") drop-shadow(")})`,
+        "--un-drop-shadow-opacity": alpha,
+        "--un-drop-shadow": `drop-shadow(${colorableShadows(v || c, "--un-drop-shadow-color", alpha).join(") drop-shadow(")})`,
         "filter": filterCSS
       },
       ...filterProperties
     ];
   }
+  if (hasParseableColor(s, theme)) {
+    return colorResolver("--un-drop-shadow-color", "drop-shadow")(match, ctx);
+  }
   v = h.bracket.cssvar(s) ?? (s === "none" ? "" : void 0);
   if (v != null) {
     return [
@@ -821,7 +843,7 @@ const filters = [
   [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-brightness-<percent>", "brightness-<percent>"] }],
   [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-contrast-<percent>", "contrast-<percent>"] }],
   // drop-shadow only on filter
-  [/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver, {
+  [/^(?:filter-)?drop-shadow(?:-?(.+))?$/, dropShadowResolver, {
     autocomplete: [
       "filter-drop",
       "filter-drop-shadow",
@@ -830,16 +852,18 @@ const filters = [
       "drop-shadow-color",
       "filter-drop-shadow-$dropShadow",
       "drop-shadow-$dropShadow",
+      "filter-drop-shadow-$colors",
+      "drop-shadow-$colors",
       "filter-drop-shadow-color-$colors",
       "drop-shadow-color-$colors",
       "filter-drop-shadow-color-(op|opacity)",
       "drop-shadow-color-(op|opacity)",
       "filter-drop-shadow-color-(op|opacity)-<percent>",
-      "drop-shadow-color-(op|opacity)-<percent>"
+      "drop-shadow(-color)?-(op|opacity)-<percent>"
     ]
   }],
   [/^(?:filter-)?drop-shadow-color-(.+)$/, colorResolver("--un-drop-shadow-color", "drop-shadow")],
-  [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": h.bracket.percent(opacity) })],
+  [/^(?:filter-)?drop-shadow(?:-color)?-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": h.bracket.percent(opacity) })],
   [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault), { autocomplete: ["(backdrop|filter)-grayscale", "(backdrop|filter)-grayscale-<percent>", "grayscale-<percent>"] }],
   [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => h.bracket.cssvar.degree(s))],
   [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault), { autocomplete: ["(backdrop|filter)-invert", "(backdrop|filter)-invert-<percent>", "invert-<percent>"] }],
@@ -1392,7 +1416,7 @@ const shadowProperties = {
 };
 const boxShadows = [
   // shadow
-  [/^shadow(?:-(.+))?$/, handleShadow("shadow"), { autocomplete: ["shadow-$colors", "shadow-$shadow"] }],
+  [/^shadow(?:-?(.+))?$/, handleShadow("shadow"), { autocomplete: ["shadow-$colors", "shadow-$shadow"] }],
   [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "shadow-(op|opacity)-<percent>" }],
   // inset shadow
   [/^inset-shadow(?:-(.+))?$/, handleShadow("insetShadow"), { autocomplete: ["inset-shadow-$colors", "inset-shadow-$insetShadow"] }],
@@ -1402,13 +1426,21 @@ function handleShadow(themeKey) {
   return (match, ctx) => {
     const [, d] = match;
     const { theme } = ctx;
-    const v = theme[themeKey]?.[d || "DEFAULT"];
+    let res = [];
+    if (d) {
+      res = getStringComponents(d, "/", 2) ?? [];
+      if (d.startsWith("/"))
+        res = ["", d.slice(1)];
+    }
+    const v = theme[themeKey]?.[res[0] || "DEFAULT"];
     const c = d ? h.bracket.cssvar(d) : void 0;
     const shadowVar = hyphenate(themeKey);
     if ((v != null || c != null) && !hasParseableColor(c, theme)) {
+      const alpha = res[1] ? h.bracket.percent.cssvar(res[1]) : void 0;
       return [
         {
-          [`--un-${shadowVar}`]: colorableShadows(v || c, `--un-${shadowVar}-color`).join(","),
+          [`--un-${shadowVar}-opacity`]: alpha,
+          [`--un-${shadowVar}`]: colorableShadows(v || c, `--un-${shadowVar}-color`, alpha).join(","),
           "box-shadow": "var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)"
         },
         ...Object.values(shadowProperties)
@@ -2451,21 +2483,27 @@ const textStrokes = [
   [/^text-stroke-(.+)$/, colorResolver("-webkit-text-stroke-color", "text-stroke"), { autocomplete: "text-stroke-$colors" }],
   [/^text-stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-stroke-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "text-stroke-(op|opacity)-<percent>" }]
 ];
-const opRE = /op(?:acity)?-/;
+function handleTextShadow(match, ctx) {
+  const [, s] = match;
+  const { theme } = ctx;
+  let res = [];
+  if (s) {
+    res = getStringComponents(s, "/", 2) ?? [];
+  }
+  const v = theme.textShadow?.[res[0]];
+  const c = s ? h.bracket.cssvar(s) : void 0;
+  if ((v != null || c != null) && !hasParseableColor(c, theme)) {
+    const alpha = res[1] ? h.bracket.percent.cssvar(res[1]) : void 0;
+    return {
+      "--un-text-shadow-opacity": alpha,
+      "--un-text-shadow": colorableShadows(v || c, "--un-text-shadow-color", alpha).join(","),
+      "text-shadow": "var(--un-text-shadow)"
+    };
+  }
+  return colorResolver("--un-text-shadow-color", "text-shadow")(match, ctx) ?? { "text-shadow": h.bracket.cssvar.global(s) };
+}
 const textShadows = [
-  [/^text-shadow(?:-(.+))?$/, (match, ctx) => {
-    const [_, s = "DEFAULT"] = match;
-    const v = ctx.theme.textShadow?.[s];
-    if (v != null) {
-      return {
-        "--un-text-shadow": colorableShadows(v, "--un-text-shadow-color").join(","),
-        "text-shadow": "var(--un-text-shadow)"
-      };
-    }
-    if (opRE.test(s))
-      return { "--un-text-shadow-opacity": h.bracket.percent.cssvar(s.replace(opRE, "")) };
-    return colorResolver("--un-text-shadow-color", "text-shadow")(match, ctx) ?? { "text-shadow": h.bracket.cssvar.global(s) };
-  }, {
+  [/^text-shadow-(.+)$/, handleTextShadow, {
     autocomplete: [
       "text-shadow-$textShadow",
       "text-shadow(-color)?-$colors",
@@ -2474,7 +2512,7 @@ const textShadows = [
   }],
   // colors
   [/^text-shadow-color-(.+)$/, colorResolver("--un-text-shadow-color", "text-shadow"), { 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>" }]
+  [/^text-shadow(?:-color)?-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-shadow-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "text-shadow(-color)?-(op|opacity)-<percent>" }]
 ];
 const fontVariantNumericProperties = [
   defineProperty("--un-ordinal"),
@@ -2745,4 +2783,4 @@ const rules = [
   questionMark
 ].flat();
 
-export { appearances as $, grids as A, overflows as B, lineClamps as C, masks as D, placeholders as E, positions as F, justifies as G, orders as H, alignments as I, placements as J, flexGridJustifiesAlignments as K, insets as L, floats as M, zIndexes as N, boxSizing as O, questionMark as P, rings as Q, scrolls as R, shadowProperties as S, boxShadows as T, sizes as U, aspectRatio as V, paddings as W, margins as X, spaces as Y, notLastChildSelector as Z, displays as _, animations as a, cursors as a0, contains as a1, pointerEvents as a2, resizes as a3, userSelects as a4, whitespaces as a5, contentVisibility as a6, contents as a7, breaks as a8, textWraps as a9, fontVariantNumeric as aA, splitShorthand as aB, cssVariables as aC, cssProperty as aD, viewTransition as aE, textOverflows as aa, textTransforms as ab, fontStyles as ac, fontSmoothings as ad, hyphens as ae, writingModes as af, writingOrientations as ag, screenReadersAccess as ah, isolations as ai, objectPositions as aj, backgroundBlendModes as ak, mixBlendModes as al, dynamicViewportHeight as am, accessibility as an, fieldSizing as ao, svgUtilities as ap, tables as aq, touchActions as ar, transformBase as as, transforms as at, transitions as au, fonts as av, tabSizes as aw, textIndents as ax, textStrokes as ay, textShadows as az, backgroundStyles as b, appearance as c, accents as d, carets as e, overscrolls as f, borderStyles as g, borders as h, imageRenderings as i, handlerBorderStyle as j, opacity as k, listStyle as l, bgColors as m, colorScheme as n, outline as o, columns as p, textDecorations as q, rules as r, scrollBehaviors as s, textAligns as t, divides as u, verticalAligns as v, willChange as w, filters as x, flex as y, gaps as z };
+export { appearances as $, grids as A, overflows as B, lineClamps as C, masks as D, placeholders as E, positions as F, justifies as G, orders as H, alignments as I, placements as J, flexGridJustifiesAlignments as K, insets as L, floats as M, zIndexes as N, boxSizing as O, questionMark as P, rings as Q, scrolls as R, shadowProperties as S, boxShadows as T, sizes as U, aspectRatio as V, paddings as W, margins as X, spaces as Y, notLastChildSelectorVariant as Z, displays as _, animations as a, cursors as a0, contains as a1, pointerEvents as a2, resizes as a3, userSelects as a4, whitespaces as a5, contentVisibility as a6, contents as a7, breaks as a8, textWraps as a9, fontVariantNumeric as aA, splitShorthand as aB, cssVariables as aC, cssProperty as aD, viewTransition as aE, textOverflows as aa, textTransforms as ab, fontStyles as ac, fontSmoothings as ad, hyphens as ae, writingModes as af, writingOrientations as ag, screenReadersAccess as ah, isolations as ai, objectPositions as aj, backgroundBlendModes as ak, mixBlendModes as al, dynamicViewportHeight as am, accessibility as an, fieldSizing as ao, svgUtilities as ap, tables as aq, touchActions as ar, transformBase as as, transforms as at, transitions as au, fonts as av, tabSizes as aw, textIndents as ax, textStrokes as ay, textShadows as az, backgroundStyles as b, appearance as c, accents as d, carets as e, overscrolls as f, borderStyles as g, borders as h, imageRenderings as i, handlerBorderStyle as j, opacity as k, listStyle as l, bgColors as m, colorScheme as n, outline as o, columns as p, textDecorations as q, rules as r, scrollBehaviors as s, textAligns as t, divides as u, verticalAligns as v, willChange as w, filters as x, flex as y, gaps as z };

package/dist/shared/{preset-wind4.DJR3nFnD.mjs → preset-wind4.B-pGDZEs.mjs}

@@ -1,4 +1,4 @@
-import { b as containerShortcuts } from './preset-wind4.Y5BADsqi.mjs';
+import { b as containerShortcuts } from './preset-wind4.MfvwEdUa.mjs';
 
 const shortcuts = [
   ...containerShortcuts

package/dist/shared/{preset-wind4.CGl5yp9H.mjs → preset-wind4.CnuVK22X.mjs}

@@ -1,5 +1,5 @@
 import { variantGetParameter, calcMaxWidthBySize, variantMatcher, variantGetBracket, variantParentMatcher, getBracket, hasThemeFn, transformThemeFn, getStringComponent, createPartClasses, createPseudoClassesAndElements, createPseudoClassFunctions, createTaggedPseudoClasses } from '@unocss/rule-utils';
-import { b as h, r as resolveBreakpoints, C as CONTROL_NO_NEGATIVE, f as cssMathFnRE, j as cssVarFnRE, E as hasParseableColor } from './preset-wind4.Dh6P6wnz.mjs';
+import { b as h, r as resolveBreakpoints, C as CONTROL_NO_NEGATIVE, f as cssMathFnRE, j as cssVarFnRE, E as hasParseableColor } from './preset-wind4.DQ5mCnzs.mjs';
 import { toArray } from '@unocss/core';
 
 const variantAria = {
@@ -538,7 +538,7 @@ const variantImplicitGroup = {
 const anchoredNumberRE = /^-?[0-9.]+(?:[a-z]+|%)?$/;
 const numberRE = /-?[0-9.]+(?:[a-z]+|%)?/;
 const ignoreProps = [
-  /\b(opacity|color|flex|backdrop-filter|^filter|transform|mask-image)\b/
+  /\b(opacity|color|flex|backdrop-filter|^filter|^scale|transform|mask-image)\b/
 ];
 function negateMathFunction(value) {
   const match = value.match(cssMathFnRE) || value.match(cssVarFnRE);

package/dist/shared/{preset-wind4.Dh6P6wnz.mjs → preset-wind4.DQ5mCnzs.mjs}

@@ -428,7 +428,7 @@ function numberResolver(size, defaultValue) {
   }
 }
 function directionSize(property, map = directionMap, formatter = (p, d) => `${p}${d}`) {
-  return ([_, direction, size], { theme }) => {
+  return (([_, direction, size], { theme }) => {
     if (size != null && direction != null) {
       let v;
       const isNegative = size.startsWith("-");
@@ -447,7 +447,7 @@ function directionSize(property, map = directionMap, formatter = (p, d) => `${p}
         return map[direction].map((i) => [formatter(property, i), v]);
       }
     }
-  };
+  });
 }
 function splitShorthand(body, type) {
   const [front, rest] = getStringComponent(body, "[", "]", ["/", ":"]) ?? [];
@@ -584,11 +584,12 @@ function colorCSSGenerator(data, property, varName, ctx) {
       if (keys) {
         themeTracking(`colors`, keys);
         if (!modifier) {
+          const colorValue = ["shadow", "inset-shadow", "text-shadow", "drop-shadow"].includes(varName) ? `${alpha ? `color-mix(in oklab, ${value} ${alpha}, transparent)` : `${value}`} var(${alphaKey})` : `${value} ${alpha ?? `var(${alphaKey})`}`;
           result.push({
             [symbols.parent]: "@supports (color: color-mix(in lab, red, red))",
             [symbols.noMerge]: true,
             [symbols.shortcutsNoMerge]: true,
-            [property]: `color-mix(in oklab, ${value} ${alpha ?? `var(${alphaKey})`}, transparent)${rawColorComment}`
+            [property]: `color-mix(in oklab, ${colorValue}, transparent)${rawColorComment}`
           });
         }
       }
@@ -607,7 +608,7 @@ function colorResolver(property, varName) {
     return colorCSSGenerator(data, property, varName, ctx);
   };
 }
-function colorableShadows(shadows, colorVar) {
+function colorableShadows(shadows, colorVar, alpha) {
   const colored = [];
   shadows = toArray(shadows);
   for (let i = 0; i < shadows.length; i++) {
@@ -625,16 +626,17 @@ function colorableShadows(shadows, colorVar) {
     if (parseCssColor(components.at(0))) {
       const color = parseCssColor(components.shift());
       if (color)
-        colorVarValue = `, ${colorToString(color)}`;
+        colorVarValue = colorToString(color);
     } else if (parseCssColor(lastComp)) {
       const color = parseCssColor(components.pop());
       if (color)
-        colorVarValue = `, ${colorToString(color)}`;
+        colorVarValue = colorToString(color);
     } else if (lastComp && cssVarFnRE.test(lastComp)) {
       const color = components.pop();
-      colorVarValue = `, ${color}`;
+      if (color)
+        colorVarValue = color;
     }
-    colored.push(`${isInset ? "inset " : ""}${components.join(" ")} var(${colorVar}${colorVarValue})`);
+    colored.push(`${isInset ? "inset " : ""}${components.join(" ")} var(${colorVar}, ${alpha ? `oklab(from ${colorVarValue} l a b / ${alpha})` : colorVarValue})`);
   }
   return colored;
 }

package/dist/shared/{preset-wind4.Y5BADsqi.mjs → preset-wind4.MfvwEdUa.mjs}

@@ -1,5 +1,5 @@
 import { isString } from '@unocss/core';
-import { r as resolveBreakpoints } from './preset-wind4.Dh6P6wnz.mjs';
+import { r as resolveBreakpoints } from './preset-wind4.DQ5mCnzs.mjs';
 
 const containerParent = [
   [/^@container(?:\/(\w+))?(?:-(normal))?$/, ([, l, v]) => {

package/dist/shortcuts.mjs

@@ -1,5 +1,5 @@
-export { s as shortcuts } from './shared/preset-wind4.DJR3nFnD.mjs';
-import './shared/preset-wind4.Y5BADsqi.mjs';
+export { s as shortcuts } from './shared/preset-wind4.B-pGDZEs.mjs';
+import './shared/preset-wind4.MfvwEdUa.mjs';
 import '@unocss/core';
-import './shared/preset-wind4.Dh6P6wnz.mjs';
+import './shared/preset-wind4.DQ5mCnzs.mjs';
 import '@unocss/rule-utils';

package/dist/utils.d.mts

@@ -155,7 +155,7 @@ declare function parseThemeColor(theme: Theme, keys: string[]): {
 declare function getThemeByKey(theme: Theme, themeKey: keyof Theme, keys: string[]): any;
 declare function colorCSSGenerator(data: ReturnType<typeof parseColor>, property: string, varName: string, ctx?: RuleContext<Theme>): [CSSObject, ...CSSValueInput[]] | undefined;
 declare function colorResolver(property: string, varName: string): ([, body]: string[], ctx: RuleContext<Theme>) => (CSSValueInput | string)[] | undefined;
-declare function colorableShadows(shadows: string | string[], colorVar: string): string[];
+declare function colorableShadows(shadows: string | string[], colorVar: string, alpha?: string): string[];
 declare function hasParseableColor(color: string | undefined, theme: Theme): boolean;
 declare function resolveBreakpoints({ theme, generator }: Readonly<VariantContext<Theme>>, key?: 'breakpoint' | 'verticalBreakpoint'): {
     point: string;

package/dist/utils.d.ts

@@ -155,7 +155,7 @@ declare function parseThemeColor(theme: Theme, keys: string[]): {
 declare function getThemeByKey(theme: Theme, themeKey: keyof Theme, keys: string[]): any;
 declare function colorCSSGenerator(data: ReturnType<typeof parseColor>, property: string, varName: string, ctx?: RuleContext<Theme>): [CSSObject, ...CSSValueInput[]] | undefined;
 declare function colorResolver(property: string, varName: string): ([, body]: string[], ctx: RuleContext<Theme>) => (CSSValueInput | string)[] | undefined;
-declare function colorableShadows(shadows: string | string[], colorVar: string): string[];
+declare function colorableShadows(shadows: string | string[], colorVar: string, alpha?: string): string[];
 declare function hasParseableColor(color: string | undefined, theme: Theme): boolean;
 declare function resolveBreakpoints({ theme, generator }: Readonly<VariantContext<Theme>>, key?: 'breakpoint' | 'verticalBreakpoint'): {
     point: string;

package/dist/utils.mjs

@@ -1,5 +1,5 @@
-import { a as remRE } from './shared/preset-wind4.Dh6P6wnz.mjs';
-export { C as CONTROL_NO_NEGATIVE, P as PRESET_NAME, S as SpecialColorKey, K as camelize, A as colorCSSGenerator, B as colorResolver, D as colorableShadows, M as compressCSS, c as cornerMap, f as cssMathFnRE, j as cssVarFnRE, H as defineProperty, m as detectThemeValue, d as directionMap, s as directionSize, l as generateThemeVariable, z as getThemeByKey, g as globalKeywords, b as h, h as handler, E as hasParseableColor, L as hyphenate, i as insetMap, I as isCSSMathFn, J as isSize, G as makeGlobalStaticRules, q as numberResolver, w as parseColor, y as parseThemeColor, p as positionMap, o as propertyTracking, r as resolveBreakpoints, F as resolveVerticalBreakpoints, u as splitShorthand, k as themeTracking, n as trackedProperties, t as trackedTheme, v as valueHandlers, e as xyzArray, x as xyzMap } from './shared/preset-wind4.Dh6P6wnz.mjs';
+import { a as remRE } from './shared/preset-wind4.DQ5mCnzs.mjs';
+export { C as CONTROL_NO_NEGATIVE, P as PRESET_NAME, S as SpecialColorKey, K as camelize, A as colorCSSGenerator, B as colorResolver, D as colorableShadows, M as compressCSS, c as cornerMap, f as cssMathFnRE, j as cssVarFnRE, H as defineProperty, m as detectThemeValue, d as directionMap, s as directionSize, l as generateThemeVariable, z as getThemeByKey, g as globalKeywords, b as h, h as handler, E as hasParseableColor, L as hyphenate, i as insetMap, I as isCSSMathFn, J as isSize, G as makeGlobalStaticRules, q as numberResolver, w as parseColor, y as parseThemeColor, p as positionMap, o as propertyTracking, r as resolveBreakpoints, F as resolveVerticalBreakpoints, u as splitShorthand, k as themeTracking, n as trackedProperties, t as trackedTheme, v as valueHandlers, e as xyzArray, x as xyzMap } from './shared/preset-wind4.DQ5mCnzs.mjs';
 export * from '@unocss/rule-utils';
 import '@unocss/core';
 

package/dist/variants.mjs

@@ -1,4 +1,4 @@
-export { F as placeholderModifier, v as variantAria, b as variantBreakpoints, c as variantChildren, g as variantColorsMediaOrClass, h as variantColorsScheme, d as variantCombinators, f as variantContainerQuery, r as variantContrasts, x as variantCssLayer, q as variantCustomMedia, i as variantDataAttribute, u as variantForcedColors, D as variantImplicitGroup, m as variantImportant, y as variantInternalLayer, l as variantLanguageDirections, s as variantMotions, E as variantNegative, n as variantNoscript, t as variantOrientations, J as variantPartClasses, p as variantPrint, H as variantPseudoClassFunctions, G as variantPseudoClassesAndElements, z as variantScope, o as variantScripting, w as variantSelector, K as variantStartingStyle, C as variantStickyHover, L as variantSupports, e as variantSvgCombinators, a as variantTaggedAriaAttributes, j as variantTaggedDataAttributes, I as variantTaggedPseudoClasses, B as variantTheme, A as variantVariables, k as variants } from './shared/preset-wind4.CGl5yp9H.mjs';
+export { F as placeholderModifier, v as variantAria, b as variantBreakpoints, c as variantChildren, g as variantColorsMediaOrClass, h as variantColorsScheme, d as variantCombinators, f as variantContainerQuery, r as variantContrasts, x as variantCssLayer, q as variantCustomMedia, i as variantDataAttribute, u as variantForcedColors, D as variantImplicitGroup, m as variantImportant, y as variantInternalLayer, l as variantLanguageDirections, s as variantMotions, E as variantNegative, n as variantNoscript, t as variantOrientations, J as variantPartClasses, p as variantPrint, H as variantPseudoClassFunctions, G as variantPseudoClassesAndElements, z as variantScope, o as variantScripting, w as variantSelector, K as variantStartingStyle, C as variantStickyHover, L as variantSupports, e as variantSvgCombinators, a as variantTaggedAriaAttributes, j as variantTaggedDataAttributes, I as variantTaggedPseudoClasses, B as variantTheme, A as variantVariables, k as variants } from './shared/preset-wind4.CnuVK22X.mjs';
 import '@unocss/rule-utils';
-import './shared/preset-wind4.Dh6P6wnz.mjs';
+import './shared/preset-wind4.DQ5mCnzs.mjs';
 import '@unocss/core';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unocss/preset-wind4",
   "type": "module",
-  "version": "66.4.1",
+  "version": "66.5.0",
   "description": "Tailwind 4 compact preset for UnoCSS",
   "authors": [
     {
@@ -74,9 +74,9 @@
     "dist"
   ],
   "dependencies": {
-    "@unocss/core": "66.4.1",
-    "@unocss/extractor-arbitrary-variants": "66.4.1",
-    "@unocss/rule-utils": "66.4.1"
+    "@unocss/core": "66.5.0",
+    "@unocss/extractor-arbitrary-variants": "66.5.0",
+    "@unocss/rule-utils": "66.5.0"
   },
   "scripts": {
     "build": "unbuild",