@unocss/preset-wind4 66.1.2 → 66.1.3

package/dist/index.mjs

@@ -1,14 +1,14 @@
-import { LAYER_PREFLIGHTS, toArray, definePreset } from '@unocss/core';
+import { toArray, definePreset } from '@unocss/core';
 import { extractorArbitraryVariants } from '@unocss/extractor-arbitrary-variants';
-import { k as themeTracking, K as compressCSS, t as trackedTheme, w as getThemeByKey, g as globalKeywords, P as PRESET_NAME } from './shared/preset-wind4.DLkbGy_k.mjs';
+import { k as themeTracking, K as compressCSS, t as trackedTheme, w as getThemeByKey, g as globalKeywords, P as PRESET_NAME } from './shared/preset-wind4.D7fOjUVe.mjs';
 import { alphaPlaceholdersRE } from '@unocss/rule-utils';
 import { postprocessors } from './postprocess.mjs';
-import { l as variants } from './shared/preset-wind4.ZZA6r7w6.mjs';
+import { k as variants } from './shared/preset-wind4.B-PQ1xVa.mjs';
 import { theme as theme$1 } from './theme.mjs';
-import { s as shortcuts } from './shared/preset-wind4.BTkJgmuQ.mjs';
-import { r as rules } from './shared/preset-wind4.CupdUNh8.mjs';
+import { s as shortcuts } from './shared/preset-wind4.CKtLkvUz.mjs';
+import { r as rules } from './shared/preset-wind4.BicXgfCi.mjs';
 import './colors.mjs';
-import './shared/preset-wind4.D2A57N1S.mjs';
+import './shared/preset-wind4.BAz4i9y9.mjs';
 
 const resetCSS = `
 /*
@@ -58,14 +58,6 @@ html,
   -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
-/*
-  Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element.
-*/
-
-body {
-  line-height: inherit;
-}
-
 /*
   1. Add the correct height in Firefox.
   2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
@@ -297,13 +289,23 @@ textarea,
 }
 
 /*
-  1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-  2. Set the default placeholder color to a semi-transparent version of the current text color.
+  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 */
 
 ::placeholder {
-  opacity: 1; /* 1 */
-  color: color-mix(in oklab, currentColor 50%, transparent); /* 2 */
+  opacity: 1;
+}
+
+/*
+  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
+  crash when using \`color-mix(\u2026)\` with \`currentcolor\`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+*/
+
+@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
+  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
+  ::placeholder {
+    color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
 }
 
 /*
@@ -402,15 +404,11 @@ function reset(options) {
     getCSS: ({ generator }) => {
       themeTracking("font", "sans");
       themeTracking("font", "mono");
-      themeTracking("defaults", ["font", "family"]);
-      themeTracking("defaults", ["font", "featureSettings"]);
-      themeTracking("defaults", ["font", "variationSettings"]);
-      themeTracking("defaults", ["monoFont", "family"]);
-      themeTracking("defaults", ["monoFont", "featureSettings"]);
-      themeTracking("defaults", ["monoFont", "variationSettings"]);
+      themeTracking("default", ["font", "family"]);
+      themeTracking("default", ["monoFont", "family"]);
       return compressCSS(resetCSS, generator.config.envMode === "dev");
     },
-    layer: LAYER_PREFLIGHTS
+    layer: "base"
   };
 }
 
@@ -533,8 +531,9 @@ const presetWind4 = definePreset((options = {}) => {
     shortcuts,
     theme: theme$1,
     layers: {
-      "cssvar-property": -200,
-      "theme": -150
+      properties: -200,
+      theme: -150,
+      base: -100
     },
     preflights: preflights(options),
     variants: variants(options),

package/dist/postprocess.d.mts

@@ -1,10 +1,10 @@
 import { PresetWind4Options } from './index.mjs';
 export { postprocessors } from './index.mjs';
 import { Postprocessor } from '@unocss/core';
-import './shared/preset-wind4.BXbWGSRz.mjs';
-import './shared/preset-wind4.D71xGC6i.mjs';
+import './shared/preset-wind4.CeNzqhCV.mjs';
+import './shared/preset-wind4.O8irdiHr.mjs';
 import './shortcuts.mjs';
-import './shared/preset-wind4.Bga6atur.mjs';
+import './shared/preset-wind4.Hki3f6hz.mjs';
 
 declare function important({ important: option }: PresetWind4Options): Postprocessor[];
 

package/dist/postprocess.d.ts

@@ -1,10 +1,10 @@
 import { PresetWind4Options } from './index.js';
 export { postprocessors } from './index.js';
 import { Postprocessor } from '@unocss/core';
-import './shared/preset-wind4.BXbWGSRz.js';
-import './shared/preset-wind4.Ca5oWgxX.js';
+import './shared/preset-wind4.CeNzqhCV.js';
+import './shared/preset-wind4.oLaz9HAb.js';
 import './shortcuts.js';
-import './shared/preset-wind4.Bga6atur.js';
+import './shared/preset-wind4.Hki3f6hz.js';
 
 declare function important({ important: option }: PresetWind4Options): Postprocessor[];
 

package/dist/postprocess.mjs

@@ -10,6 +10,8 @@ function important({ important: option }) {
   };
   return [
     option === true ? (util) => {
+      if (util.layer === "properties")
+        return;
       util.entries.forEach((i) => {
         if (i[1] != null && !String(i[1]).endsWith("!important"))
           i[1] += " !important";

package/dist/rules.d.mts

@@ -1,6 +1,6 @@
 import { Rule, CSSEntries, Shortcut, StaticRule, CSSValueInput } from '@unocss/core';
-import { T as Theme } from './shared/preset-wind4.BXbWGSRz.mjs';
-export { r as rules } from './shared/preset-wind4.D71xGC6i.mjs';
+import { T as Theme } from './shared/preset-wind4.CeNzqhCV.mjs';
+export { r as rules } from './shared/preset-wind4.O8irdiHr.mjs';
 
 declare const verticalAligns: Rule<Theme>[];
 declare const textAligns: Rule<Theme>[];

package/dist/rules.d.ts

@@ -1,6 +1,6 @@
 import { Rule, CSSEntries, Shortcut, StaticRule, CSSValueInput } from '@unocss/core';
-import { T as Theme } from './shared/preset-wind4.BXbWGSRz.js';
-export { r as rules } from './shared/preset-wind4.Ca5oWgxX.js';
+import { T as Theme } from './shared/preset-wind4.CeNzqhCV.js';
+export { r as rules } from './shared/preset-wind4.oLaz9HAb.js';
 
 declare const verticalAligns: Rule<Theme>[];
 declare const textAligns: Rule<Theme>[];

package/dist/rules.mjs

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

package/dist/shared/{preset-wind4.ZZA6r7w6.mjs → preset-wind4.B-PQ1xVa.mjs}

@@ -1,5 +1,5 @@
-import { variantGetParameter, variantMatcher, variantGetBracket, variantParentMatcher, getBracket, hasThemeFn, transformThemeFn, getStringComponent } from '@unocss/rule-utils';
-import { b as h, r as resolveBreakpoints, C as CONTROL_NO_NEGATIVE, f as cssMathFnRE, j as cssVarFnRE, B as hasParseableColor } from './preset-wind4.DLkbGy_k.mjs';
+import { variantGetParameter, calcMaxWidthBySize, variantMatcher, variantGetBracket, variantParentMatcher, getBracket, hasThemeFn, transformThemeFn, getStringComponent } from '@unocss/rule-utils';
+import { b as h, r as resolveBreakpoints, C as CONTROL_NO_NEGATIVE, f as cssMathFnRE, j as cssVarFnRE, B as hasParseableColor } from './preset-wind4.D7fOjUVe.mjs';
 import { toArray, escapeRegExp, escapeSelector } from '@unocss/core';
 
 const variantAria = {
@@ -44,15 +44,6 @@ const variantTaggedAriaAttributes = [
   taggedAria("previous")
 ];
 
-function calcMaxWidthBySize(size) {
-  const value = size.match(/^-?\d+\.?\d*/)?.[0] || "";
-  const unit = size.slice(value.length);
-  if (unit === "px") {
-    const maxWidth = Number.parseFloat(value) - 0.1;
-    return Number.isNaN(maxWidth) ? size : `${maxWidth}${unit}`;
-  }
-  return `calc(${size} - 0.1px)`;
-}
 const sizePseudo = /(max|min)-\[([^\]]*)\]:/;
 function variantBreakpoints() {
   const regexCache = {};
@@ -953,4 +944,4 @@ function variants(options) {
   ].flat();
 }
 
-export { variantScope as A, variantVariables as B, variantTheme as C, variantStickyHover as D, variantNegative as E, placeholderModifier as F, variantPseudoClassesAndElements as G, variantPseudoClassFunctions as H, variantTaggedPseudoClasses as I, variantPartClasses as J, variantStartingStyle as K, variantSupports as L, variantTaggedAriaAttributes as a, variantBreakpoints as b, calcMaxWidthBySize as c, variantChildren as d, variantCombinators as e, variantSvgCombinators as f, variantContainerQuery as g, variantColorsMediaOrClass as h, variantColorsScheme as i, variantDataAttribute as j, variantTaggedDataAttributes as k, variants as l, variantLanguageDirections as m, variantImportant as n, variantNoscript as o, variantScripting as p, variantPrint as q, variantCustomMedia as r, variantContrasts as s, variantMotions as t, variantOrientations as u, variantAria as v, variantForcedColors as w, variantSelector as x, variantCssLayer as y, variantInternalLayer as z };
+export { variantVariables as A, variantTheme as B, variantStickyHover as C, variantNegative as D, placeholderModifier as E, variantPseudoClassesAndElements as F, variantPseudoClassFunctions as G, variantTaggedPseudoClasses as H, variantPartClasses as I, variantStartingStyle as J, variantSupports as K, variantTaggedAriaAttributes as a, variantBreakpoints as b, variantChildren as c, variantCombinators as d, variantSvgCombinators as e, variantContainerQuery as f, variantColorsMediaOrClass as g, variantColorsScheme as h, variantDataAttribute as i, variantTaggedDataAttributes as j, variants as k, variantLanguageDirections as l, variantImportant as m, variantNoscript as n, variantScripting as o, variantPrint as p, variantCustomMedia as q, variantContrasts as r, variantMotions as s, variantOrientations as t, variantForcedColors as u, variantAria as v, variantSelector as w, variantCssLayer as x, variantInternalLayer as y, variantScope as z };

package/dist/shared/{preset-wind4.D2A57N1S.mjs → preset-wind4.BAz4i9y9.mjs}

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

package/dist/shared/{preset-wind4.CupdUNh8.mjs → preset-wind4.BicXgfCi.mjs}

@@ -1,6 +1,6 @@
-import { g as globalKeywords, b as h, E as makeGlobalStaticRules, p as positionMap, q as parseColor, S as SpecialColorKey, l as generateThemeVariable, F as defineProperty, k as themeTracking, m as detectThemeValue, z as colorResolver, G as isCSSMathFn, d as directionMap, B as hasParseableColor, c as cornerMap, y as colorCSSGenerator, H as isSize, o as directionSize, n as numberResolver, A as colorableShadows, i as insetMap, J as hyphenate, r as resolveBreakpoints, C as CONTROL_NO_NEGATIVE, x as xyzMap, L as splitComma, e as xyzArray, M as bracketTypeRe } from './preset-wind4.DLkbGy_k.mjs';
+import { g as globalKeywords, b as h, E as makeGlobalStaticRules, p as positionMap, q as parseColor, S as SpecialColorKey, l as generateThemeVariable, F as defineProperty, k as themeTracking, m as detectThemeValue, z as colorResolver, G as isCSSMathFn, d as directionMap, B as hasParseableColor, c as cornerMap, y as colorCSSGenerator, H as isSize, o as directionSize, n as numberResolver, A as colorableShadows, i as insetMap, J as hyphenate, r as resolveBreakpoints, C as CONTROL_NO_NEGATIVE, x as xyzMap, L as splitComma, e as xyzArray, M as bracketTypeRe } from './preset-wind4.D7fOjUVe.mjs';
 import { notNull } from '@unocss/core';
-import { a as container, c as containerParent } from './preset-wind4.D2A57N1S.mjs';
+import { a as container, c as containerParent } from './preset-wind4.BAz4i9y9.mjs';
 import { getStringComponent } from '@unocss/rule-utils';
 
 const verticalAlignAlias = {
@@ -21,8 +21,8 @@ const verticalAlignAlias = {
 };
 const verticalAligns = [
   [
-    /^(?:vertical|align|v)-([-\w]+%?)$/,
-    ([, v]) => ({ "vertical-align": verticalAlignAlias[v] ?? h.numberWithUnit(v) }),
+    /^(?:vertical|align|v)-(.+)$/,
+    ([, v]) => ({ "vertical-align": verticalAlignAlias[v] ?? h.bracket.cssvar.numberWithUnit(v) }),
     {
       autocomplete: [
         `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join("|")})`,
@@ -294,6 +294,7 @@ const outline = [
       "outline-offset": `2px`
     };
   }],
+  ["outline-none", { "--un-outline-style": "none", "outline-style": "none" }],
   ...["auto", "dashed", "dotted", "double", "solid", "groove", "ridge", "inset", "outset", ...globalKeywords].map((v) => [`outline-${v}`, { "--un-outline-style": v, "outline-style": v }])
 ];
 function* handleWidth$2([, b]) {
@@ -1326,21 +1327,27 @@ function getPropName(minmax, hw) {
 }
 function getSizeValue(theme, hw, prop) {
   let v;
-  if (theme.container?.[prop]) {
-    themeTracking("container", prop);
-    v = generateThemeVariable("container", prop);
-  }
-  switch (prop) {
-    case "fit":
-    case "max":
-    case "min":
-      v = `${prop}-content`;
-      break;
-    case "screen":
-      v = hw === "w" ? "100vw" : "100vh";
+  const keys = ["container", "spacing"];
+  for (const key of keys) {
+    if (theme[key]?.[prop]) {
+      themeTracking(key, prop);
+      v = generateThemeVariable(key, prop);
       break;
+    }
   }
-  if (h.number(prop) != null) {
+  if (!v) {
+    switch (prop) {
+      case "fit":
+      case "max":
+      case "min":
+        v = `${prop}-content`;
+        break;
+      case "screen":
+        v = hw === "w" ? "100vw" : "100vh";
+        break;
+    }
+  }
+  if (!v && h.number(prop) != null) {
     themeTracking(`spacing`);
     v = `calc(var(--spacing) * ${h.number(prop)})`;
   }
@@ -1972,8 +1979,8 @@ const transitions = [
   [
     /^transition(?:-(\D+?))?(?:-(\d+))?$/,
     ([, prop, d], { theme }) => {
-      themeTracking("defaults", ["transition", "timingFunction"]);
-      themeTracking("defaults", ["transition", "duration"]);
+      themeTracking("default", ["transition", "timingFunction"]);
+      themeTracking("default", ["transition", "duration"]);
       const defaultTransition = {
         "transition-property": theme.property?.DEFAULT,
         "transition-timing-function": `var(--un-ease, ${generateThemeVariable("defaults", ["transition", "timingFunction"])})`,
@@ -2067,14 +2074,14 @@ const fonts = [
   [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "(text|color|c)-(op|opacity)-<percent>" }],
   // weights
   [
-    /^(?:font|fw)-?([^-]+)$/,
+    /^fw-?([^-]+)$/,
     ([, s], { theme }) => {
       let v;
       if (theme.fontWeight?.[s]) {
         themeTracking(`fontWeight`, s);
         v = generateThemeVariable("fontWeight", s);
       } else {
-        v = h.bracket.global.number(s);
+        v = h.bracket.cssvar.global.number(s);
       }
       return {
         "--un-font-weight": v,
@@ -2165,22 +2172,46 @@ const fonts = [
     ([, s]) => ({ "font-stretch": h.bracket.cssvar.fraction.global(s) }),
     { autocomplete: "font-stretch-<percentage>" }
   ],
-  // family
+  // family & weight
   [
     /^font-(.+)$/,
     ([, d], { theme }) => {
       let v;
       if (theme.font?.[d]) {
-        themeTracking(`font`, d);
+        themeTracking("font", d);
         v = generateThemeVariable("font", d);
-      } else {
-        v = h.bracket.cssvar.global(d);
+        return { "font-family": v };
+      }
+      if (theme.fontWeight?.[d]) {
+        themeTracking("fontWeight", d);
+        v = generateThemeVariable("fontWeight", d);
+        return { "--un-font-weight": v, "font-weight": v };
+      }
+      v = h.number(d);
+      if (v != null) {
+        return { "--un-font-weight": v, "font-weight": v };
+      }
+      v = h.bracketOfFamily(d);
+      if (v != null && h.number(v) == null) {
+        v = h.cssvar(v) ?? v;
+        return { "font-family": v };
+      }
+      v = h.bracketOfNumber(d);
+      if (v != null) {
+        v = h.cssvar.number(v);
+        return { "--un-font-weight": v, "font-weight": v };
+      }
+      v = h.bracket(d);
+      if (v != null && h.number(v) != null) {
+        const num = h.number(v);
+        return { "--un-font-weight": num, "font-weight": num };
+      }
+      v = h.bracket.cssvar.global(d);
+      if (v != null) {
+        return { "font-family": v };
       }
-      return {
-        "font-family": v
-      };
     },
-    { autocomplete: "font-$font" }
+    { autocomplete: ["font-$font", "font-$fontWeight"] }
   ]
 ];
 const tabSizes = [
@@ -2196,7 +2227,7 @@ const tabSizes = [
   }]
 ];
 const textIndents = [
-  [/^indent(?:-(.+))?$/, ([, s]) => {
+  [/^indent-(.+)$/, ([, s]) => {
     let v = numberResolver(s);
     if (v != null) {
       themeTracking(`spacing`);

package/dist/shared/{preset-wind4.BTkJgmuQ.mjs → preset-wind4.CKtLkvUz.mjs}

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

package/dist/shared/{preset-wind4.BXbWGSRz.d.mts → preset-wind4.CeNzqhCV.d.mts}

@@ -37,7 +37,7 @@ interface Theme {
     perspective?: Record<string, string>;
     textStrokeWidth?: Record<string, string>;
     property?: Record<string, string>;
-    defaults?: Record<string, Record<string, string>>;
+    default?: Record<string, Record<string, string>>;
     animation?: ThemeAnimation;
     duration?: Record<string, string>;
     containers?: {

package/dist/shared/{preset-wind4.BXbWGSRz.d.ts → preset-wind4.CeNzqhCV.d.ts}

@@ -37,7 +37,7 @@ interface Theme {
     perspective?: Record<string, string>;
     textStrokeWidth?: Record<string, string>;
     property?: Record<string, string>;
-    defaults?: Record<string, Record<string, string>>;
+    default?: Record<string, Record<string, string>>;
     animation?: ThemeAnimation;
     duration?: Record<string, string>;
     containers?: {

package/dist/shared/{preset-wind4.DLkbGy_k.mjs → preset-wind4.D7fOjUVe.mjs}

@@ -135,7 +135,7 @@ const unitOnlyMap = {
   lvh: 100,
   lvw: 100
 };
-const bracketTypeRe = /^\[(color|image|length|size|position|quoted|string):/i;
+const bracketTypeRe = /^\[(color|image|length|size|position|quoted|string|number|family):/i;
 const splitComma = /,(?![^()]*\))/g;
 const remRE = /(-?[.\d]+)rem/g;
 
@@ -279,16 +279,21 @@ function bracketWithType(str, requiredType) {
     if (!match) {
       base = str.slice(1, -1);
     } else {
-      if (!requiredType)
+      if (!requiredType) {
         hintedType = match[1];
+      } else if (match[1] !== requiredType) {
+        return;
+      }
       base = str.slice(match[0].length, -1);
     }
     if (!base)
       return;
     if (base === '=""')
       return;
-    if (base.startsWith("--"))
-      base = `var(${base})`;
+    if (base.startsWith("--")) {
+      const [name, defaultValue] = base.slice(2).split(",");
+      base = `var(--${escapeSelector(name)}${defaultValue ? `, ${defaultValue}` : ""})`;
+    }
     let curly = 0;
     for (const i of base) {
       if (i === "[") {
@@ -323,14 +328,23 @@ function bracketOfColor(str) {
   return bracketWithType(str, "color");
 }
 function bracketOfLength(str) {
-  return bracketWithType(str, "length");
+  return bracketWithType(str, "length") || bracketWithType(str, "size");
 }
 function bracketOfPosition(str) {
   return bracketWithType(str, "position");
 }
+function bracketOfFamily(str) {
+  return bracketWithType(str, "family");
+}
+function bracketOfNumber(str) {
+  return bracketWithType(str, "number");
+}
 function cssvar(str) {
-  if (/^\$[^\s'"`;{}]/.test(str)) {
-    const [name, defaultValue] = str.slice(1).split(",");
+  if (str.startsWith("var("))
+    return str;
+  const match = str.match(/^(?:\$|--)([^\s'"`;{}]+)$/);
+  if (match) {
+    const [name, defaultValue] = match[1].split(",");
     return `var(--${escapeSelector(name)}${defaultValue ? `, ${defaultValue}` : ""})`;
   }
 }
@@ -380,7 +394,9 @@ const valueHandlers = {
   auto: auto,
   bracket: bracket,
   bracketOfColor: bracketOfColor,
+  bracketOfFamily: bracketOfFamily,
   bracketOfLength: bracketOfLength,
+  bracketOfNumber: bracketOfNumber,
   bracketOfPosition: bracketOfPosition,
   cssvar: cssvar,
   degree: degree,
@@ -421,7 +437,7 @@ function directionSize(propertyPrefix) {
     }
     return [void 0, void 0];
   }
-  function resovleSpace(theme) {
+  function resolveSpace(theme) {
     let base;
     let unit;
     if (theme.spacing?.DEFAULT) {
@@ -442,24 +458,26 @@ function directionSize(propertyPrefix) {
     }, {});
   }
   return ([_, direction, size], { theme }) => {
-    const spaceMap = resovleSpace(theme);
-    let v;
-    const isNegative = size?.startsWith("-");
-    if (isNegative)
-      size = size.slice(1);
-    v = numberResolver(size, spaceMap[size]);
-    if (v != null) {
-      if (!Number.isNaN(v)) {
-        themeTracking("spacing");
-        return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, `calc(var(--spacing) * ${isNegative ? "-" : ""}${v})`]);
-      } else {
-        themeTracking("spacing", size);
-        return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, isNegative ? `calc(var(--spacing-${size} * -1)` : `var(--spacing-${size})`]);
+    if (size != null && direction != null) {
+      const spaceMap = resolveSpace(theme);
+      let v;
+      const isNegative = size.startsWith("-");
+      if (isNegative)
+        size = size.slice(1);
+      v = numberResolver(size, spaceMap[size]);
+      if (v != null) {
+        if (!Number.isNaN(v)) {
+          themeTracking("spacing");
+          return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, `calc(var(--spacing) * ${isNegative ? "-" : ""}${v})`]);
+        } else {
+          themeTracking("spacing", size);
+          return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, isNegative ? `calc(var(--spacing-${size} * -1)` : `var(--spacing-${size})`]);
+        }
+      }
+      v = h.bracket.cssvar.global.auto.fraction.rem(isNegative ? `-${size}` : size);
+      if (v != null) {
+        return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]);
       }
-    }
-    v = h.bracket.cssvar.global.auto.fraction.rem(isNegative ? `-${size}` : size);
-    if (v != null) {
-      return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]);
     }
   };
 }
@@ -653,7 +671,7 @@ function defineProperty(property, options = {}) {
     [symbols.variants]: () => [
       {
         parent: "",
-        layer: "cssvar-property",
+        layer: "properties",
         selector: () => `@property ${property}`
       }
     ],

package/dist/shared/{preset-wind4.Bga6atur.d.ts → preset-wind4.Hki3f6hz.d.mts}

@@ -818,7 +818,7 @@ declare const theme: {
         transform: string;
         readonly DEFAULT: string;
     };
-    defaults: {
+    default: {
         transition: {
             duration: string;
             timingFunction: string;

package/dist/shared/{preset-wind4.Bga6atur.d.mts → preset-wind4.Hki3f6hz.d.ts}

@@ -818,7 +818,7 @@ declare const theme: {
         transform: string;
         readonly DEFAULT: string;
     };
-    defaults: {
+    default: {
         transition: {
             duration: string;
             timingFunction: string;

package/dist/shared/{preset-wind4.D71xGC6i.d.mts → preset-wind4.O8irdiHr.d.mts}

@@ -1,5 +1,5 @@
 import { Rule } from '@unocss/core';
-import { T as Theme } from './preset-wind4.BXbWGSRz.mjs';
+import { T as Theme } from './preset-wind4.CeNzqhCV.mjs';
 
 declare const rules: Rule<Theme>[];
 

package/dist/shared/{preset-wind4.Ca5oWgxX.d.ts → preset-wind4.oLaz9HAb.d.ts}

@@ -1,5 +1,5 @@
 import { Rule } from '@unocss/core';
-import { T as Theme } from './preset-wind4.BXbWGSRz.js';
+import { T as Theme } from './preset-wind4.CeNzqhCV.js';
 
 declare const rules: Rule<Theme>[];
 

package/dist/shortcuts.d.mts

@@ -1,5 +1,5 @@
 import * as _unocss_core from '@unocss/core';
-import { T as Theme } from './shared/preset-wind4.BXbWGSRz.mjs';
+import { T as Theme } from './shared/preset-wind4.CeNzqhCV.mjs';
 
 declare const shortcuts: _unocss_core.Shortcut<Theme>[];
 

package/dist/shortcuts.d.ts

@@ -1,5 +1,5 @@
 import * as _unocss_core from '@unocss/core';
-import { T as Theme } from './shared/preset-wind4.BXbWGSRz.js';
+import { T as Theme } from './shared/preset-wind4.CeNzqhCV.js';
 
 declare const shortcuts: _unocss_core.Shortcut<Theme>[];
 

package/dist/shortcuts.mjs

@@ -1,5 +1,5 @@
-export { s as shortcuts } from './shared/preset-wind4.BTkJgmuQ.mjs';
-import './shared/preset-wind4.D2A57N1S.mjs';
+export { s as shortcuts } from './shared/preset-wind4.CKtLkvUz.mjs';
+import './shared/preset-wind4.BAz4i9y9.mjs';
 import '@unocss/core';
-import './shared/preset-wind4.DLkbGy_k.mjs';
+import './shared/preset-wind4.D7fOjUVe.mjs';
 import '@unocss/rule-utils';

package/dist/theme.d.mts

@@ -1,7 +1,7 @@
 export { colors } from './colors.mjs';
-export { t as theme } from './shared/preset-wind4.Bga6atur.mjs';
-import { T as Theme } from './shared/preset-wind4.BXbWGSRz.mjs';
-export { C as Colors, a as ThemeAnimation } from './shared/preset-wind4.BXbWGSRz.mjs';
+export { t as theme } from './shared/preset-wind4.Hki3f6hz.mjs';
+import { T as Theme } from './shared/preset-wind4.CeNzqhCV.mjs';
+export { C as Colors, a as ThemeAnimation } from './shared/preset-wind4.CeNzqhCV.mjs';
 
 declare const animation: {
     keyframes: {

package/dist/theme.d.ts

@@ -1,7 +1,7 @@
 export { colors } from './colors.js';
-export { t as theme } from './shared/preset-wind4.Bga6atur.js';
-import { T as Theme } from './shared/preset-wind4.BXbWGSRz.js';
-export { C as Colors, a as ThemeAnimation } from './shared/preset-wind4.BXbWGSRz.js';
+export { t as theme } from './shared/preset-wind4.Hki3f6hz.js';
+import { T as Theme } from './shared/preset-wind4.CeNzqhCV.js';
+export { C as Colors, a as ThemeAnimation } from './shared/preset-wind4.CeNzqhCV.js';
 
 declare const animation: {
     keyframes: {

package/dist/theme.mjs

@@ -547,7 +547,7 @@ const theme = {
   blur,
   perspective,
   property,
-  defaults,
+  default: defaults,
   // for rules & variants
   container,
   // for variant