@unocss/preset-wind4/dist/shared/preset-wind4.CfYOwu2f.mjs

Tailwind 4 compact preset for UnoCSS

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.B6AdPBSv.mjs';
import { symbols, notNull } from '@unocss/core';
import { a as container, c as containerParent } from './preset-wind4.B7G_ZuoA.mjs';
import { getStringComponent } from '@unocss/rule-utils';

const verticalAlignAlias = {
  "mid": "middle",
  "base": "baseline",
  "btm": "bottom",
  "baseline": "baseline",
  "top": "top",
  "start": "top",
  "middle": "middle",
  "bottom": "bottom",
  "end": "bottom",
  "text-top": "text-top",
  "text-bottom": "text-bottom",
  "sub": "sub",
  "super": "super",
  ...Object.fromEntries(globalKeywords.map((x) => [x, x]))
};
const verticalAligns = [
  [
    /^(?:vertical|align|v)-(.+)$/,
    ([, v]) => ({ "vertical-align": verticalAlignAlias[v] ?? h.bracket.cssvar.numberWithUnit(v) }),
    {
      autocomplete: [
        `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join("|")})`,
        "(vertical|align|v)-<percentage>"
      ]
    }
  ]
];
const textAlignValues = ["center", "left", "right", "justify", "start", "end"];
const textAligns = [
  ...textAlignValues.map((v) => [`text-${v}`, { "text-align": v }]),
  ...[
    ...globalKeywords,
    ...textAlignValues
  ].map((v) => [`text-align-${v}`, { "text-align": v }])
];

const animations = [
  [/^(?:animate-)?keyframes-(.+)$/, ([, name], { theme }) => {
    const kf = theme.animation?.keyframes?.[name];
    if (kf) {
      return [
        `@keyframes ${name}${kf}`,
        { animation: name }
      ];
    }
  }, { autocomplete: ["animate-keyframes-$animation.keyframes", "keyframes-$animation.keyframes"] }],
  [/^animate-(.+)$/, ([, name], { theme }) => {
    const kf = theme.animation?.keyframes?.[name];
    if (kf) {
      const duration = theme.animation?.durations?.[name] ?? "1s";
      const timing = theme.animation?.timingFns?.[name] ?? "linear";
      const count = theme.animation?.counts?.[name] ?? 1;
      const props = theme.animation?.properties?.[name];
      return [
        `@keyframes ${name}${kf}`,
        {
          animation: `${name} ${duration} ${timing} ${count}`,
          ...props
        }
      ];
    }
    return { animation: h.bracket.cssvar(name) };
  }, { autocomplete: "animate-$animation.keyframes" }],
  [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": h.bracket.cssvar(d) ?? d })],
  // timings
  [/^animate-duration-(.+)$/, ([, d], { theme }) => ({ "animation-duration": theme.duration?.[d || "DEFAULT"] ?? h.bracket.cssvar.time(d) }), { autocomplete: ["animate-duration"] }],
  [/^animate-delay-(.+)$/, ([, d], { theme }) => ({ "animation-delay": theme.duration?.[d || "DEFAULT"] ?? h.bracket.cssvar.time(d) }), { autocomplete: ["animate-delay"] }],
  [/^animate-ease(?:-(.+))?$/, ([, d], { theme }) => ({ "animation-timing-function": theme.ease?.[d || "DEFAULT"] ?? h.bracket.cssvar(d) }), { autocomplete: ["animate-ease", "animate-ease-$ease"] }],
  // fill mode
  [/^animate-(fill-mode-|fill-|mode-)?(.+)$/, ([, t, d]) => ["none", "forwards", "backwards", "both", ...[t ? globalKeywords : []]].includes(d) ? { "animation-fill-mode": d } : void 0, {
    autocomplete: [
      "animate-(fill|mode|fill-mode)",
      "animate-(fill|mode|fill-mode)-(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)",
      "animate-(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)"
    ]
  }],
  // direction
  [/^animate-(direction-)?(.+)$/, ([, t, d]) => ["normal", "reverse", "alternate", "alternate-reverse", ...[t ? globalKeywords : []]].includes(d) ? { "animation-direction": d } : void 0, {
    autocomplete: [
      "animate-direction",
      "animate-direction-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)",
      "animate-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)"
    ]
  }],
  // others
  [/^animate-(?:iteration-count-|iteration-|count-)(.+)$/, ([, d]) => ({ "animation-iteration-count": h.bracket.cssvar(d) ?? d.replace(/-/g, ",") }), { autocomplete: ["animate-(iteration|count|iteration-count)", "animate-(iteration|count|iteration-count)-<num>"] }],
  [/^animate-(play-state-|play-|state-)?(.+)$/, ([, t, d]) => ["paused", "running", ...[t ? globalKeywords : []]].includes(d) ? { "animation-play-state": d } : void 0, {
    autocomplete: [
      "animate-(play|state|play-state)",
      "animate-(play|state|play-state)-(paused|running|inherit|initial|revert|revert-layer|unset)",
      "animate-(paused|running|inherit|initial|revert|revert-layer|unset)"
    ]
  }],
  ["animate-none", { animation: "none" }],
  ...makeGlobalStaticRules("animate", "animation")
];

const properties = {
  "gradient-position": defineProperty("--un-gradient-position"),
  "gradient-from": defineProperty("--un-gradient-from", { syntax: "<color>", initialValue: "#0000" }),
  "gradient-via": defineProperty("--un-gradient-via", { syntax: "<color>", initialValue: "#0000" }),
  "gradient-to": defineProperty("--un-gradient-to", { syntax: "<color>", initialValue: "#0000" }),
  "gradient-stops": defineProperty("--un-gradient-stops"),
  "gradient-via-stops": defineProperty("--un-gradient-via-stops"),
  "gradient-from-position": defineProperty("--un-gradient-from-position", { syntax: "<length-percentage>", initialValue: "0%" }),
  "gradient-via-position": defineProperty("--un-gradient-via-position", { syntax: "<length-percentage>", initialValue: "50%" }),
  "gradient-to-position": defineProperty("--un-gradient-to-position", { syntax: "<length-percentage>", initialValue: "100%" })
};
function resolveModifier(modifier) {
  let interpolationMethod = "in oklab";
  if (modifier) {
    if (modifier.startsWith("[") && modifier.endsWith("]")) {
      interpolationMethod = modifier.slice(1, -1);
    } else {
      switch (modifier) {
        case "longer":
        case "shorter":
        case "increasing":
        case "decreasing":
          interpolationMethod = `in oklch ${modifier} hue`;
          break;
        default:
          interpolationMethod = `in ${modifier}`;
      }
    }
  }
  return interpolationMethod;
}
function bgGradientColorResolver() {
  return function* ([, position, body], { theme }) {
    const css = {};
    const data = parseColor(body, theme);
    if (data) {
      const { color, keys, alpha } = data;
      if (color) {
        if (Object.values(SpecialColorKey).includes(color)) {
          css[`--un-gradient-${position}`] = color;
        } else {
          css[`--un-${position}-opacity`] = alpha;
          const value = keys ? generateThemeVariable("colors", keys) : color;
          css[`--un-gradient-${position}`] = `color-mix(in oklab, ${value} var(--un-${position}-opacity), transparent)`;
          yield defineProperty(`--un-${position}-opacity`, { syntax: "<percentage>", initialValue: "100%" });
        }
        if (keys) {
          themeTracking(`colors`, keys);
        }
        if (theme) {
          detectThemeValue(color, theme);
        }
      }
    } else {
      css[`--un-gradient-${position}`] = h.bracket.cssvar(body);
    }
    if (css[`--un-gradient-${position}`]) {
      switch (position) {
        case "from":
          yield {
            ...css,
            "--un-gradient-stops": "var(--un-gradient-via-stops, var(--un-gradient-position), var(--un-gradient-from) var(--un-gradient-from-position), var(--un-gradient-to) var(--un-gradient-to-position))"
          };
          break;
        case "via":
          yield {
            ...css,
            "--un-gradient-via-stops": `var(--un-gradient-position), var(--un-gradient-from) var(--un-gradient-from-position), var(--un-gradient-via) var(--un-gradient-via-position), var(--un-gradient-to) var(--un-gradient-to-position)`,
            "--un-gradient-stops": `var(--un-gradient-via-stops)`
          };
          break;
        case "to":
          yield {
            ...css,
            "--un-gradient-stops": "var(--un-gradient-via-stops, var(--un-gradient-position), var(--un-gradient-from) var(--un-gradient-from-position), var(--un-gradient-to) var(--un-gradient-to-position))"
          };
          break;
        case "stops":
          yield {
            ...css
          };
          break;
      }
      for (const p of Object.values(properties))
        yield p;
    }
  };
}
function bgGradientPositionResolver() {
  return function* ([, mode, body]) {
    yield {
      [`--un-gradient-${mode}-position`]: `${h.bracket.cssvar.percent(body)}`
    };
    for (const p of Object.values(properties))
      yield p;
  };
}
const backgroundStyles = [
  // gradients
  [/^bg-(linear|radial|conic)-([^/]+)(?:\/(.+))?$/, ([, m, d, s]) => {
    let v;
    if (h.number(d) != null) {
      v = `from ${h.number(d)}deg ${resolveModifier(s)};`;
    } else {
      v = h.bracket(d);
    }
    if (v) {
      return {
        "--un-gradient-position": v,
        "background-image": `${m}-gradient(var(--un-gradient-stops))`
      };
    }
  }, {
    autocomplete: ["bg-(linear|radial|conic)", "(from|to|via)-$colors", "(from|to|via)-(op|opacity)", "(from|to|via)-(op|opacity)-<percent>"]
  }],
  [/^(from|via|to|stops)-(.+)$/, bgGradientColorResolver()],
  [/^(from|via|to)-op(?:acity)?-?(.+)$/, ([, position, opacity]) => ({ [`--un-${position}-opacity`]: h.bracket.percent(opacity) })],
  [/^(from|via|to)-([\d.]+%)$/, bgGradientPositionResolver()],
  // images
  [/^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]) => {
    return {
      "--un-gradient-position": `${d in positionMap ? `to ${positionMap[d]} ` : " "}${resolveModifier(s)}`,
      "background-image": `${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("|")})` }],
  ["bg-none", { "background-image": "none" }],
  ["box-decoration-slice", { "box-decoration-break": "slice" }],
  ["box-decoration-clone", { "box-decoration-break": "clone" }],
  ...makeGlobalStaticRules("box-decoration", "box-decoration-break"),
  // size
  ["bg-auto", { "background-size": "auto" }],
  ["bg-cover", { "background-size": "cover" }],
  ["bg-contain", { "background-size": "contain" }],
  // attachments
  ["bg-fixed", { "background-attachment": "fixed" }],
  ["bg-local", { "background-attachment": "local" }],
  ["bg-scroll", { "background-attachment": "scroll" }],
  // clips
  ["bg-clip-border", { "-webkit-background-clip": "border-box", "background-clip": "border-box" }],
  ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-clip": "content-box" }],
  ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-clip": "padding-box" }],
  ["bg-clip-text", { "-webkit-background-clip": "text", "background-clip": "text" }],
  ...globalKeywords.map((keyword) => [`bg-clip-${keyword}`, {
    "-webkit-background-clip": keyword,
    "background-clip": keyword
  }]),
  // positions
  // skip 1 & 2 letters shortcut
  [/^bg-([-\w]{3,})$/, ([, s]) => ({ "background-position": positionMap[s] })],
  // repeats
  ["bg-repeat", { "background-repeat": "repeat" }],
  ["bg-no-repeat", { "background-repeat": "no-repeat" }],
  ["bg-repeat-x", { "background-repeat": "repeat-x" }],
  ["bg-repeat-y", { "background-repeat": "repeat-y" }],
  ["bg-repeat-round", { "background-repeat": "round" }],
  ["bg-repeat-space", { "background-repeat": "space" }],
  ...makeGlobalStaticRules("bg-repeat", "background-repeat"),
  // origins
  ["bg-origin-border", { "background-origin": "border-box" }],
  ["bg-origin-padding", { "background-origin": "padding-box" }],
  ["bg-origin-content", { "background-origin": "content-box" }],
  ...makeGlobalStaticRules("bg-origin", "background-origin")
];

const outline = [
  // size
  [/^outline-(?:width-|size-)?(.+)$/, handleWidth$2, { autocomplete: "outline-(width|size)-<num>" }],
  // color
  [/^outline-(?:color-)?(.+)$/, handleColorOrWidth$2, { autocomplete: "outline-$colors" }],
  [/^outline-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-outline-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "outline-(op|opacity)-<percent>" }],
  // offset
  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": h.bracket.cssvar.global.px(d) }), { autocomplete: "outline-(offset)-<num>" }],
  ["outline-offset-none", { "outline-offset": "0" }],
  // style
  ["outline", [
    {
      "outline-style": "var(--un-outline-style)",
      "outline-width": "1px"
    },
    defineProperty("--un-outline-style", { initialValue: "solid" })
  ]],
  ["outline-hidden", [
    { "outline-style": "none" },
    {
      [symbols.parent]: `@media (forced-colors: active)`,
      "outline": `2px solid transparent`,
      "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]) {
  const v = h.bracket.cssvar.global.px(b);
  if (v != null) {
    yield {
      "outline-style": "var(--un-outline-style)",
      "outline-width": v
    };
    yield defineProperty("--un-outline-style", { initialValue: "solid" });
  }
}
function* handleColorOrWidth$2(match, ctx) {
  if (isCSSMathFn(h.bracket(match[1]))) {
    yield* handleWidth$2(match);
  } else {
    const result = colorResolver("outline-color", "outline")(match, ctx);
    if (result) {
      for (const i of result) {
        yield i;
      }
    }
  }
}
const appearance = [
  ["appearance-auto", { "-webkit-appearance": "auto", "appearance": "auto" }],
  ["appearance-none", { "-webkit-appearance": "none", "appearance": "none" }]
];
function willChangeProperty(prop) {
  const v = h.bracket(prop);
  if (v && h.properties(v)) {
    return v;
  }
  return h.properties.auto.cssvar.global(prop) ?? {
    contents: "contents",
    scroll: "scroll-position"
  }[prop];
}
const willChange = [
  [/^will-change-(.+)/, ([, p]) => ({ "will-change": willChangeProperty(p) })]
];
const listStyles = {
  "disc": "disc",
  "circle": "circle",
  "square": "square",
  "decimal": "decimal",
  "zero-decimal": "decimal-leading-zero",
  "greek": "lower-greek",
  "roman": "lower-roman",
  "upper-roman": "upper-roman",
  "alpha": "lower-alpha",
  "upper-alpha": "upper-alpha",
  "latin": "lower-latin",
  "upper-latin": "upper-latin"
};
const listStyle = [
  // base
  [/^list-(.+?)(?:-(outside|inside))?$/, ([, alias, position]) => {
    const style = listStyles[alias];
    if (style) {
      if (position) {
        return {
          "list-style-position": position,
          "list-style-type": style
        };
      }
      return { "list-style-type": style };
    }
  }, { autocomplete: [`list-(${Object.keys(listStyles).join("|")})`, `list-(${Object.keys(listStyles).join("|")})-(outside|inside)`] }],
  // styles
  ["list-outside", { "list-style-position": "outside" }],
  ["list-inside", { "list-style-position": "inside" }],
  ["list-none", { "list-style-type": "none" }],
  // image
  [/^list-image-(.+)$/, ([, d]) => {
    if (/^\[url\(.+\)\]$/.test(d))
      return { "list-style-image": h.bracket(d) };
  }],
  ["list-image-none", { "list-style-image": "none" }],
  ...makeGlobalStaticRules("list", "list-style-type")
];
const accents = [
  [/^accent-(.+)$/, colorResolver("accent-color", "accent"), { autocomplete: "accent-$colors" }],
  [/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": h.bracket.percent(d) }), { autocomplete: ["accent-(op|opacity)", "accent-(op|opacity)-<percent>"] }]
];
const carets = [
  [/^caret-(.+)$/, colorResolver("caret-color", "caret"), { autocomplete: "caret-$colors" }],
  [/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": h.bracket.percent(d) }), { autocomplete: ["caret-(op|opacity)", "caret-(op|opacity)-<percent>"] }]
];
const imageRenderings = [
  ["image-render-auto", { "image-rendering": "auto" }],
  ["image-render-edge", { "image-rendering": "crisp-edges" }],
  ["image-render-pixel", [
    ["-ms-interpolation-mode", "nearest-neighbor"],
    ["image-rendering", "-webkit-optimize-contrast"],
    ["image-rendering", "-moz-crisp-edges"],
    ["image-rendering", "-o-pixelated"],
    ["image-rendering", "pixelated"]
  ]]
];
const overscrolls = [
  ["overscroll-auto", { "overscroll-behavior": "auto" }],
  ["overscroll-contain", { "overscroll-behavior": "contain" }],
  ["overscroll-none", { "overscroll-behavior": "none" }],
  ...makeGlobalStaticRules("overscroll", "overscroll-behavior"),
  ["overscroll-x-auto", { "overscroll-behavior-x": "auto" }],
  ["overscroll-x-contain", { "overscroll-behavior-x": "contain" }],
  ["overscroll-x-none", { "overscroll-behavior-x": "none" }],
  ...makeGlobalStaticRules("overscroll-x", "overscroll-behavior-x"),
  ["overscroll-y-auto", { "overscroll-behavior-y": "auto" }],
  ["overscroll-y-contain", { "overscroll-behavior-y": "contain" }],
  ["overscroll-y-none", { "overscroll-behavior-y": "none" }],
  ...makeGlobalStaticRules("overscroll-y", "overscroll-behavior-y")
];
const scrollBehaviors = [
  ["scroll-auto", { "scroll-behavior": "auto" }],
  ["scroll-smooth", { "scroll-behavior": "smooth" }],
  ...makeGlobalStaticRules("scroll", "scroll-behavior")
];

const borderStyles = ["solid", "dashed", "dotted", "double", "hidden", "none", "groove", "ridge", "inset", "outset", ...globalKeywords];
const borders = [
  // compound
  [/^(?:border|b)()(?:-(.+))?$/, handlerBorderSize, { autocomplete: "(border|b)-<directions>" }],
  [/^(?:border|b)-([xy])(?:-(.+))?$/, handlerBorderSize],
  [/^(?:border|b)-([rltbse])(?:-(.+))?$/, handlerBorderSize],
  [/^(?:border|b)-(block|inline)(?:-(.+))?$/, handlerBorderSize],
  [/^(?:border|b)-([bi][se])(?:-(.+))?$/, handlerBorderSize],
  // size
  [/^(?:border|b)-()(?:width|size)-(.+)$/, handlerBorderSize, { autocomplete: ["(border|b)-<num>", "(border|b)-<directions>-<num>"] }],
  [/^(?:border|b)-([xy])-(?:width|size)-(.+)$/, handlerBorderSize],
  [/^(?:border|b)-([rltbse])-(?:width|size)-(.+)$/, handlerBorderSize],
  [/^(?:border|b)-(block|inline)-(?:width|size)-(.+)$/, handlerBorderSize],
  [/^(?:border|b)-([bi][se])-(?:width|size)-(.+)$/, handlerBorderSize],
  // colors
  [/^(?:border|b)-()(?:color-)?(.+)$/, handlerBorderColorOrSize, { autocomplete: ["(border|b)-$colors", "(border|b)-<directions>-$colors"] }],
  [/^(?:border|b)-([xy])-(?:color-)?(.+)$/, handlerBorderColorOrSize],
  [/^(?:border|b)-([rltbse])-(?:color-)?(.+)$/, handlerBorderColorOrSize],
  [/^(?:border|b)-(block|inline)-(?:color-)?(.+)$/, handlerBorderColorOrSize],
  [/^(?:border|b)-([bi][se])-(?:color-)?(.+)$/, handlerBorderColorOrSize],
  // opacity
  [/^(?:border|b)-()op(?:acity)?-?(.+)$/, handlerBorderOpacity, { autocomplete: "(border|b)-(op|opacity)-<percent>" }],
  [/^(?:border|b)-([xy])-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
  [/^(?:border|b)-([rltbse])-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
  [/^(?:border|b)-(block|inline)-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
  [/^(?:border|b)-([bi][se])-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
  // radius
  [/^(?:border-|b-)?(?:rounded|rd)()(?:-(.+))?$/, handlerRounded, { autocomplete: ["(border|b)-(rounded|rd)", "(border|b)-(rounded|rd)-$radius", "(rounded|rd)", "(rounded|rd)-$radius"] }],
  [/^(?:border-|b-)?(?:rounded|rd)-([rltbse])(?:-(.+))?$/, handlerRounded],
  [/^(?:border-|b-)?(?:rounded|rd)-([rltb]{2})(?:-(.+))?$/, handlerRounded],
  [/^(?:border-|b-)?(?:rounded|rd)-([bise][se])(?:-(.+))?$/, handlerRounded],
  [/^(?:border-|b-)?(?:rounded|rd)-([bi][se]-[bi][se])(?:-(.+))?$/, handlerRounded],
  // style
  [/^(?:border|b)-(?:style-)?()(.+)$/, handlerBorderStyle, { autocomplete: ["(border|b)-style", `(border|b)-(${borderStyles.join("|")})`, "(border|b)-<directions>-style", `(border|b)-<directions>-(${borderStyles.join("|")})`, `(border|b)-<directions>-style-(${borderStyles.join("|")})`, `(border|b)-style-(${borderStyles.join("|")})`] }],
  [/^(?:border|b)-([xy])-(?:style-)?(.+)$/, handlerBorderStyle],
  [/^(?:border|b)-([rltbse])-(?:style-)?(.+)$/, handlerBorderStyle],
  [/^(?:border|b)-(block|inline)-(?:style-)?(.+)$/, handlerBorderStyle],
  [/^(?:border|b)-([bi][se])-(?:style-)?(.+)$/, handlerBorderStyle]
];
function borderColorResolver(direction) {
  return ([, body], ctx) => {
    const data = parseColor(body, ctx.theme);
    const result = colorCSSGenerator(data, `border${direction}-color`, `border${direction}`, ctx);
    if (result) {
      const css = result[0];
      if (data?.color && !Object.values(SpecialColorKey).includes(data.color) && !data.alpha && direction && direction !== "") {
        css[`--un-border${direction}-opacity`] = `var(--un-border-opacity)`;
      }
      return result;
    }
  };
}
function handlerBorderSize([, a = "", b = "1"]) {
  const v = h.bracket.cssvar.global.px(b);
  if (a in directionMap && v != null)
    return directionMap[a].map((i) => [`border${i}-width`, v]);
}
function handlerBorderColorOrSize([, a = "", b], ctx) {
  if (a in directionMap) {
    if (isCSSMathFn(h.bracket(b)))
      return handlerBorderSize(["", a, b]);
    if (hasParseableColor(b, ctx.theme)) {
      const directions = directionMap[a].map((i) => borderColorResolver(i)(["", b], ctx)).filter(notNull);
      return [
        directions.map((d) => d[0]).reduce((acc, item) => {
          Object.assign(acc, item);
          return acc;
        }, {}),
        ...directions.flatMap((d) => d.slice(1))
      ];
    }
  }
}
function handlerBorderOpacity([, a = "", opacity]) {
  const v = h.bracket.percent.cssvar(opacity);
  if (a in directionMap && v != null)
    return directionMap[a].map((i) => [`--un-border${i}-opacity`, v]);
}
function handlerRounded([, a = "", s = "DEFAULT"], { theme }) {
  if (a in cornerMap) {
    if (s === "full")
      return cornerMap[a].map((i) => [`border${i}-radius`, "calc(infinity * 1px)"]);
    const _v = theme.radius?.[s] ?? h.bracket.cssvar.global.fraction.rem(s);
    if (_v != null) {
      const isVar = theme.radius && s in theme.radius;
      if (isVar) {
        themeTracking(`radius`, s);
      }
      return cornerMap[a].map((i) => [
        `border${i}-radius`,
        isVar ? generateThemeVariable("radius", s) : _v
      ]);
    }
  }
}
function handlerBorderStyle([, a = "", s]) {
  if (borderStyles.includes(s) && a in directionMap) {
    return [
      ["--un-border-style", s],
      ...directionMap[a].map((i) => [`border${i}-style`, s])
    ];
  }
}

const opacity = [
  [/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: h.bracket.percent.cssvar(d) })]
];
const bgUrlRE = /^\[url\(.+\)\]$/;
const bgLengthRE = /^\[(?:length|size):.+\]$/;
const bgPositionRE = /^\[position:.+\]$/;
const bgGradientRE = /^\[(?:linear|conic|radial)-gradient\(.+\)\]$/;
const bgImageRE = /^\[image:.+\]$/;
const bgColors = [
  [/^bg-(.+)$/, (...args) => {
    const d = args[0][1];
    if (bgUrlRE.test(d))
      return { "--un-url": h.bracket(d), "background-image": "var(--un-url)" };
    if (bgLengthRE.test(d) && h.bracketOfLength(d) != null)
      return { "background-size": h.bracketOfLength(d).split(" ").map((e) => h.fraction.auto.px.cssvar(e) ?? e).join(" ") };
    if ((isSize(d) || bgPositionRE.test(d)) && h.bracketOfPosition(d) != null)
      return { "background-position": h.bracketOfPosition(d).split(" ").map((e) => h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") };
    if (bgGradientRE.test(d) || bgImageRE.test(d)) {
      const s = h.bracket(d);
      if (s) {
        const url = s.startsWith("http") ? `url(${s})` : h.cssvar(s);
        return { "background-image": url ?? s };
      }
    }
    return colorResolver("background-color", "bg")(...args);
  }, { autocomplete: "bg-$colors" }],
  [/^bg-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-bg-opacity": h.bracket.percent.cssvar(opacity2) }), { autocomplete: "bg-(op|opacity)-<percent>" }]
];
const colorScheme = [
  [/^(?:color-)?scheme-(.+)$/, ([, v]) => ({ "color-scheme": v.split("-").join(" ") })]
];

const columns = [
  [/^columns-(.+)$/, ([, v]) => ({ columns: h.bracket.global.number.auto.numberWithUnit(v) }), { autocomplete: "columns-<num>" }],
  // break before
  ["break-before-auto", { "break-before": "auto" }],
  ["break-before-avoid", { "break-before": "avoid" }],
  ["break-before-all", { "break-before": "all" }],
  ["break-before-avoid-page", { "break-before": "avoid-page" }],
  ["break-before-page", { "break-before": "page" }],
  ["break-before-left", { "break-before": "left" }],
  ["break-before-right", { "break-before": "right" }],
  ["break-before-column", { "break-before": "column" }],
  ...makeGlobalStaticRules("break-before"),
  // break inside
  ["break-inside-auto", { "break-inside": "auto" }],
  ["break-inside-avoid", { "break-inside": "avoid" }],
  ["break-inside-avoid-page", { "break-inside": "avoid-page" }],
  ["break-inside-avoid-column", { "break-inside": "avoid-column" }],
  ...makeGlobalStaticRules("break-inside"),
  // break after
  ["break-after-auto", { "break-after": "auto" }],
  ["break-after-avoid", { "break-after": "avoid" }],
  ["break-after-all", { "break-after": "all" }],
  ["break-after-avoid-page", { "break-after": "avoid-page" }],
  ["break-after-page", { "break-after": "page" }],
  ["break-after-left", { "break-after": "left" }],
  ["break-after-right", { "break-after": "right" }],
  ["break-after-column", { "break-after": "column" }],
  ...makeGlobalStaticRules("break-after")
];

const decorationStyles = ["solid", "double", "dotted", "dashed", "wavy", ...globalKeywords];
const textDecorations = [
  [/^(?:decoration-)?(underline|overline|line-through)$/, ([, s]) => ({ "text-decoration-line": s }), { autocomplete: "decoration-(underline|overline|line-through)" }],
  // size
  [/^(?:underline|decoration)-(?:size-)?(.+)$/, handleWidth$1, { autocomplete: "(underline|decoration)-<num>" }],
  [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s }), { autocomplete: "(underline|decoration)-(auto|from-font)" }],
  // colors
  [/^(?:underline|decoration)-(.+)$/, handleColorOrWidth$1, { autocomplete: "(underline|decoration)-$colors" }],
  [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "(underline|decoration)-(op|opacity)-<percent>" }],
  // offset
  [/^(?:underline|decoration)-offset-(.+)$/, ([, s]) => ({ "text-underline-offset": h.auto.bracket.cssvar.global.px(s) }), { autocomplete: "(underline|decoration)-(offset)-<num>" }],
  // style
  ...decorationStyles.map((v) => [`underline-${v}`, { "text-decoration-style": v }]),
  ...decorationStyles.map((v) => [`decoration-${v}`, { "text-decoration-style": v }]),
  ["no-underline", { "text-decoration": "none" }],
  ["decoration-none", { "text-decoration": "none" }]
];
function handleWidth$1([, b]) {
  return { "text-decoration-thickness": h.bracket.cssvar.global.px(b) };
}
function handleColorOrWidth$1(match, ctx) {
  if (isCSSMathFn(h.bracket(match[1])))
    return handleWidth$1(match);
  const result = colorResolver("text-decoration-color", "line")(match, ctx);
  if (result) {
    const css = result[0];
    css["-webkit-text-decoration-color"] = css["text-decoration-color"];
    return result;
  }
}

const paddings = [
  [/^pa?()-?(.+)$/, directionSize("padding"), { autocomplete: ["(m|p)<num>", "(m|p)-<num>"] }],
  [/^p-?xy()()$/, directionSize("padding"), { autocomplete: "(m|p)-(xy)" }],
  [/^p-?([xy])(?:-?(.+))?$/, directionSize("padding")],
  [/^p-?([rltbse])(?:-?(.+))?$/, directionSize("padding"), { autocomplete: "(m|p)<directions>-<num>" }],
  [/^p-(block|inline)(?:-(.+))?$/, directionSize("padding"), { autocomplete: "(m|p)-(block|inline)-<num>" }],
  [/^p-?([bi][se])(?:-?(.+))?$/, directionSize("padding"), { autocomplete: "(m|p)-(bs|be|is|ie)-<num>" }]
];
const margins = [
  [/^ma?()-?(.+)$/, directionSize("margin")],
  [/^m-?xy()()$/, directionSize("margin")],
  [/^m-?([xy])(?:-?(.+))?$/, directionSize("margin")],
  [/^m-?([rltbse])(?:-?(.+))?$/, directionSize("margin")],
  [/^m-(block|inline)(?:-(.+))?$/, directionSize("margin")],
  [/^m-?([bi][se])(?:-?(.+))?$/, directionSize("margin")]
];
const spaces = [
  [/^space-([xy])-(.+)$/, handlerSpace, { autocomplete: ["space-(x|y)", "space-(x|y)-reverse", "space-(x|y)-$spacing"] }],
  [/^space-([xy])-reverse$/, function* ([, d], { symbols }) {
    yield {
      [symbols.selector]: notLastChildSelector,
      [`--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* handlerSpace([, d, s], { theme, symbols }) {
  let v;
  const num = numberResolver(s);
  if (num != null) {
    themeTracking(`spacing`);
    v = `calc(var(--spacing) * ${num})`;
  } else {
    v = theme.spacing?.[s] ?? h.bracket.cssvar.auto.fraction.rem(s || "1");
  }
  if (v != null) {
    const results = directionMap[d === "x" ? "inline" : "block"].map((item, index) => {
      const key = `margin${item}`;
      const value = ` calc(${v} * ${index === 0 ? `var(--un-space-${d}-reverse)` : `calc(1 - var(--un-space-${d}-reverse))`})`;
      return [key, value];
    });
    if (results) {
      yield {
        [symbols.selector]: notLastChildSelector,
        [`--un-space-${d}-reverse`]: "0",
        ...Object.fromEntries(results)
      };
      yield defineProperty(`--un-space-${d}-reverse`, { initialValue: 0 });
    }
  }
}

const divides = [
  // color & opacity
  [/^divide-(.+)$/, function* (match, ctx) {
    const result = colorResolver("border-color", "divide")(match, ctx);
    if (result) {
      yield {
        [ctx.symbols.selector]: notLastChildSelector,
        ...result[0]
      };
      yield result[1];
    }
  }, { autocomplete: "divide-$colors" }],
  [/^divide-op(?:acity)?-?(.+)$/, function* ([, opacity], { symbols }) {
    yield {
      [symbols.selector]: notLastChildSelector,
      "--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 }) {
    yield {
      [symbols.selector]: notLastChildSelector,
      [`--un-divide-${d}-reverse`]: "1"
    };
    yield defineProperty(`--un-divide-${d}-reverse`, { initialValue: 0 });
  }],
  // styles
  [new RegExp(`^divide-(${borderStyles.join("|")})$`), function* ([, style], { symbols }) {
    yield {
      [symbols.selector]: notLastChildSelector,
      "border-style": style
    };
  }, { autocomplete: borderStyles.map((i) => `divide-${i}`) }]
];
function* handlerDivide([, d, s], { symbols }) {
  let v = h.bracket.cssvar.px(s || "1");
  if (v != null) {
    if (v === "0")
      v = "0px";
    const directionMap = {
      x: ["-left", "-right"],
      y: ["-top", "-bottom"]
    };
    const results = directionMap[d].map((item) => {
      const value = item.endsWith("left") || item.endsWith("top") ? `calc(${v} * var(--un-divide-${d}-reverse))` : `calc(${v} * calc(1 - var(--un-divide-${d}-reverse)))`;
      return [
        [`border${item}-width`, value],
        [`border${item}-style`, `var(--un-border-style)`]
      ];
    });
    if (results) {
      yield {
        [symbols.selector]: notLastChildSelector,
        [`--un-divide-${d}-reverse`]: 0,
        ...Object.fromEntries(results.flat())
      };
      yield defineProperty(`--un-divide-${d}-reverse`, { initialValue: 0 });
      yield defineProperty(`--un-border-style`, { initialValue: "solid" });
    }
  }
}

const filterBaseKeys = [
  "blur",
  "brightness",
  "contrast",
  "grayscale",
  "hue-rotate",
  "invert",
  "saturate",
  "sepia",
  "drop-shadow"
];
const filterProperties = filterBaseKeys.map((i) => defineProperty(`--un-${i}`));
const filterCSS = filterBaseKeys.map((i) => `var(--un-${i},)`).join(" ");
const backdropBaseKeys = [
  "backdrop-blur",
  "backdrop-brightness",
  "backdrop-contrast",
  "backdrop-grayscale",
  "backdrop-hue-rotate",
  "backdrop-invert",
  "backdrop-opacity",
  "backdrop-saturate",
  "backdrop-sepia"
];
const backdropProperties = backdropBaseKeys.map((i) => defineProperty(`--un-${i}`));
const backdropCSS = backdropBaseKeys.map((i) => `var(--un-${i},)`).join(" ");
function percentWithDefault(str) {
  let v = h.bracket.cssvar(str || "");
  if (v != null)
    return v;
  v = str ? h.percent(str) : "100%";
  if (v != null && Number.parseFloat(v.slice(0, -1)) <= 100)
    return v;
}
function toFilter(varName, resolver) {
  return ([, b, s], { theme }) => {
    const value = resolver(s, theme) ?? (s === "none" ? "0" : "");
    if (value !== "") {
      if (b) {
        return [
          {
            [`--un-${b}${varName}`]: `${varName}(${value})`,
            "-webkit-backdrop-filter": backdropCSS,
            "backdrop-filter": backdropCSS
          },
          ...backdropProperties
        ];
      } else {
        return [
          {
            [`--un-${varName}`]: `${varName}(${value})`,
            filter: filterCSS
          },
          ...filterProperties
        ];
      }
    }
  };
}
function dropShadowResolver([, s], { theme }) {
  let v = theme.dropShadow?.[s || "DEFAULT"];
  if (v != null) {
    const shadows = colorableShadows(v, "--un-drop-shadow-color");
    return [
      {
        "--un-drop-shadow": `drop-shadow(${shadows.join(") drop-shadow(")})`,
        "filter": filterCSS
      },
      ...filterProperties
    ];
  }
  v = h.bracket.cssvar(s) ?? (s === "none" ? "" : void 0);
  if (v != null) {
    return [
      {
        "--un-drop-shadow": v ? `drop-shadow(${v})` : v,
        "filter": filterCSS
      },
      ...filterProperties
    ];
  }
}
const filters = [
  // filters
  [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || h.bracket.cssvar.px(s)), { autocomplete: ["(backdrop|filter)-blur-$blur", "blur-$blur", "filter-blur"] }],
  [/^(?:(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, {
    autocomplete: [
      "filter-drop",
      "filter-drop-shadow",
      "filter-drop-shadow-color",
      "drop-shadow",
      "drop-shadow-color",
      "filter-drop-shadow-$dropShadow",
      "drop-shadow-$dropShadow",
      "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>"
    ]
  }],
  [/^(?: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) })],
  [/^(?:(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>"] }],
  // opacity only on backdrop-filter
  [/^(backdrop-)op(?:acity)?-(.+)$/, toFilter("opacity", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["backdrop-(op|opacity)", "backdrop-(op|opacity)-<percent>"] }],
  [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-saturate", "(backdrop|filter)-saturate-<percent>", "saturate-<percent>"] }],
  [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault), { autocomplete: ["(backdrop|filter)-sepia", "(backdrop|filter)-sepia-<percent>", "sepia-<percent>"] }],
  // base
  ["filter", { filter: filterCSS }],
  ["backdrop-filter", {
    "-webkit-backdrop-filter": backdropCSS,
    "backdrop-filter": backdropCSS
  }],
  // nones
  ["filter-none", { filter: "none" }],
  ["backdrop-filter-none", {
    "-webkit-backdrop-filter": "none",
    "backdrop-filter": "none"
  }],
  ...globalKeywords.map((keyword) => [`filter-${keyword}`, { filter: keyword }]),
  ...globalKeywords.map((keyword) => [`backdrop-filter-${keyword}`, {
    "-webkit-backdrop-filter": keyword,
    "backdrop-filter": keyword
  }])
];

const flex = [
  // display
  ["flex", { display: "flex" }],
  ["inline-flex", { display: "inline-flex" }],
  ["flex-inline", { display: "inline-flex" }],
  // flex
  [/^flex-(.*)$/, ([, d]) => ({ flex: h.bracket(d) != null ? h.bracket(d).split(" ").map((e) => h.cssvar.fraction(e) ?? e).join(" ") : h.cssvar.fraction(d) })],
  ["flex-1", { flex: "1 1 0%" }],
  ["flex-auto", { flex: "1 1 auto" }],
  ["flex-initial", { flex: "0 1 auto" }],
  ["flex-none", { flex: "none" }],
  // shrink/grow/basis
  [/^(?:flex-)?shrink(?:-(.*))?$/, ([, d = ""]) => ({ "flex-shrink": h.bracket.cssvar.number(d) ?? 1 }), { autocomplete: ["flex-shrink-<num>", "shrink-<num>"] }],
  [/^(?:flex-)?grow(?:-(.*))?$/, ([, d = ""]) => ({ "flex-grow": h.bracket.cssvar.number(d) ?? 1 }), { autocomplete: ["flex-grow-<num>", "grow-<num>"] }],
  [/^(?:flex-)?basis-(.+)$/, ([, d]) => {
    const v = numberResolver(d);
    if (v != null) {
      themeTracking(`spacing`);
      return { "flex-basis": `calc(var(--spacing) * ${v})` };
    }
    return { "flex-basis": h.bracket.cssvar.auto.fraction.rem(d) };
  }, { autocomplete: ["flex-basis-$spacing", "basis-$spacing"] }],
  // directions
  ["flex-row", { "flex-direction": "row" }],
  ["flex-row-reverse", { "flex-direction": "row-reverse" }],
  ["flex-col", { "flex-direction": "column" }],
  ["flex-col-reverse", { "flex-direction": "column-reverse" }],
  // wraps
  ["flex-wrap", { "flex-wrap": "wrap" }],
  ["flex-wrap-reverse", { "flex-wrap": "wrap-reverse" }],
  ["flex-nowrap", { "flex-wrap": "nowrap" }]
];

const directions = {
  "": "",
  "x": "column-",
  "y": "row-",
  "col": "column-",
  "row": "row-"
};
function handleGap([, d = "", s]) {
  const v = numberResolver(s);
  if (v != null) {
    themeTracking(`spacing`);
    return { [`${directions[d]}gap`]: `calc(var(--spacing) * ${v})` };
  }
  return { [`${directions[d]}gap`]: h.bracket.cssvar.global.rem(s) };
}
const gaps = [
  [/^(?:flex-|grid-)?gap-?()(.+)$/, handleGap, { autocomplete: ["gap-$spacing", "gap-<num>"] }],
  [/^(?:flex-|grid-)?gap-([xy])-?(.+)$/, handleGap, { autocomplete: ["gap-(x|y)-$spacing", "gap-(x|y)-<num>"] }],
  [/^(?:flex-|grid-)?gap-(col|row)-?(.+)$/, handleGap, { autocomplete: ["gap-(col|row)-$spacing", "gap-(col|row)-<num>"] }]
];

function rowCol(s) {
  return s.replace("col", "column");
}
function autoDirection(prop) {
  switch (prop) {
    case "min":
      return "min-content";
    case "max":
      return "max-content";
    case "fr":
      return "minmax(0,1fr)";
  }
  return h.bracket.cssvar.auto.rem(prop);
}
const grids = [
  // displays
  ["grid", { display: "grid" }],
  ["inline-grid", { display: "inline-grid" }],
  // global
  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v]) => ({
    [`grid-${rowCol(c)}`]: h.bracket.number.cssvar.auto(v)
  })],
  // span
  [/^(?:grid-)?(row|col)-span-(.+)$/, ([, c, s]) => {
    if (s === "full")
      return { [`grid-${rowCol(c)}`]: "1/-1" };
    const v = h.bracket.number.cssvar(s);
    if (v != null)
      return { [`grid-${rowCol(c)}`]: `span ${v}/span ${v}` };
  }, { autocomplete: "(grid-row|grid-col|row|col)-span-<num>" }],
  // starts & ends
  [/^(?:grid-)?(row|col)-start-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: h.bracket.cssvar(v) ?? v })],
  [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: h.bracket.cssvar(v) ?? v }), { autocomplete: "(grid-row|grid-col|row|col)-(start|end)-<num>" }],
  // auto flows
  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v]) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(v) }), { autocomplete: "(grid-auto|auto)-(rows|cols)-<num>" }],
  // grid-auto-flow, auto-flow: uno
  // grid-flow: wind
  [/^(?:grid-auto-flow|auto-flow|grid-flow)-(.+)$/, ([, v]) => ({ "grid-auto-flow": h.bracket.cssvar(v) })],
  [/^(?:grid-auto-flow|auto-flow|grid-flow)-(row|col|dense|row-dense|col-dense)$/, ([, v]) => ({ "grid-auto-flow": rowCol(v).replace("-", " ") }), { autocomplete: ["(grid-auto-flow|auto-flow|grid-flow)-(row|col|dense|row-dense|col-dense)"] }],
  // templates
  [/^(?:grid-)?(rows|cols)-(.+)$/, ([, c, v]) => ({
    [`grid-template-${rowCol(c)}`]: h.bracket.cssvar(v)
  })],
  [/^(?:grid-)?(rows|cols)-minmax-([\w.-]+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(auto-fill,minmax(${d},1fr))` })],
  [/^(?:grid-)?(rows|cols)-(\d+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(${d},minmax(0,1fr))` }), { autocomplete: "(grid-rows|grid-cols|rows|cols)-<num>" }],
  // areas
  [/^grid-area(s)?-(.+)$/, ([, s, v]) => {
    if (s != null)
      return { "grid-template-areas": h.cssvar(v) ?? v.split("-").map((s2) => `"${h.bracket(s2)}"`).join(" ") };
    return { "grid-area": h.bracket.cssvar(v) };
  }],
  // template none
  ["grid-rows-none", { "grid-template-rows": "none" }],
  ["grid-cols-none", { "grid-template-columns": "none" }],
  // template subgrid
  ["grid-rows-subgrid", { "grid-template-rows": "subgrid" }],
  ["grid-cols-subgrid", { "grid-template-columns": "subgrid" }]
];

const overflowValues = [
  "auto",
  "hidden",
  "clip",
  "visible",
  "scroll",
  "overlay",
  ...globalKeywords
];
const overflows = [
  [/^(?:overflow|of)-(.+)$/, ([, v]) => overflowValues.includes(v) ? { overflow: v } : void 0, { autocomplete: [`(overflow|of)-(${overflowValues.join("|")})`, `(overflow|of)-(x|y)-(${overflowValues.join("|")})`] }],
  [/^(?:overflow|of)-([xy])-(.+)$/, ([, d, v]) => overflowValues.includes(v) ? { [`overflow-${d}`]: v } : void 0]
];

const lineClamps = [
  [/^line-clamp-(\d+)$/, ([, v]) => ({
    "overflow": "hidden",
    "display": "-webkit-box",
    "-webkit-box-orient": "vertical",
    "-webkit-line-clamp": v
  }), { autocomplete: ["line-clamp", "line-clamp-(1|2|3|4|5|6|none)"] }],
  ["line-clamp-none", {
    "overflow": "visible",
    "display": "block",
    "-webkit-box-orient": "horizontal",
    "-webkit-line-clamp": "unset"
  }]
];

const linearMap = {
  t: ["top"],
  b: ["bottom"],
  l: ["left"],
  r: ["right"],
  x: ["left", "right"],
  y: ["top", "bottom"]
};
const maskInitialValue = "linear-gradient(#fff, #fff)";
const baseMaskImage = {
  "mask-image": "var(--un-mask-linear), var(--un-mask-radial), var(--un-mask-conic)",
  "mask-composite": "intersect"
};
function handlePosition([, v = ""]) {
  if (v in cornerMap) {
    const positions = v.split("").flatMap((c) => linearMap[c]).join(" ");
    return { "mask-position": positions };
  }
  const _v = h.bracket.cssvar.global.position(v);
  if (_v !== null)
    return { "mask-position": _v };
}
function handleImage([_, gradient = "", direction, val], ctx) {
  const css = { ...baseMaskImage };
  const props = [];
  props.push(...["linear", "radial", "conic"].map((g) => defineProperty(`--un-mask-${g}`, { initialValue: maskInitialValue })));
  if (gradient in linearMap) {
    css["--un-mask-linear"] = "var(--un-mask-left), var(--un-mask-right), var(--un-mask-bottom), var(--un-mask-top)";
    for (const dir of linearMap[gradient]) {
      css[`--un-mask-${dir}`] = `linear-gradient(to ${dir}, var(--un-mask-${dir}-from-color) var(--un-mask-${dir}-from-position), var(--un-mask-${dir}-to-color) var(--un-mask-${dir}-to-position))`;
      if (numberResolver(val) != null) {
        themeTracking("spacing");
        css[`--un-mask-${dir}-${direction}-position`] = `calc(var(--spacing) * ${h.bracket.cssvar.fraction.number(val)})`;
      } else {
        css[`--un-mask-${dir}-${direction}-position`] = h.bracket.cssvar.fraction.rem(val);
      }
      if (hasParseableColor(val, ctx.theme)) {
        const result = colorResolver(`--un-mask-${dir}-${direction}-color`, hyphenate("colors"))([_, val], ctx);
        if (result) {
          const [c, ...p] = result;
          Object.assign(css, c);
          props.push(...p);
        }
      }
      props.push(...["from", "to"].flatMap((p) => [
        defineProperty(`--un-mask-${dir}-${p}-position`, { syntax: "<length-percentage>", initialValue: p === "from" ? "0%" : "100%" }),
        defineProperty(`--un-mask-${dir}-${p}-color`, { syntax: "<color>", initialValue: p === "from" ? "black" : "transparent" })
      ]));
    }
    props.push(...["top", "right", "bottom", "left"].map((d) => defineProperty(`--un-mask-${d}`, { initialValue: maskInitialValue })));
  } else {
    if (direction == null) {
      if (gradient === "radial") {
        css["--un-mask-radial"] = "radial-gradient(var(--un-mask-radial-stops, var(--un-mask-radial-size)))";
        css["--un-mask-radial-size"] = h.bracket.cssvar.rem(val);
      } else {
        css[`--un-mask-${gradient}`] = `${gradient}-gradient(var(--un-mask-${gradient}-stops, var(--un-mask-${gradient}-position)))`;
        css[`--un-mask-${gradient}-position`] = numberResolver(val) ? `calc(1deg * ${h.bracket.cssvar.number(val)})` : h.bracket.cssvar.fraction(val);
      }
    } else {
      const gradientStopsPrefixMap = {
        linear: "",
        radial: "var(--un-mask-radial-shape) var(--un-mask-radial-size) at ",
        conic: "from "
      };
      css[`--un-mask-${gradient}-stops`] = `${gradientStopsPrefixMap[gradient]}var(--un-mask-${gradient}-position), var(--un-mask-${gradient}-from-color) var(--un-mask-${gradient}-from-position), var(--un-mask-${gradient}-to-color) var(--un-mask-${gradient}-to-position)`;
      css[`--un-mask-${gradient}`] = `${gradient}-gradient(var(--un-mask-${gradient}-stops))`;
      if (hasParseableColor(val, ctx.theme)) {
        const result = colorResolver(`--un-mask-${gradient}-${direction}-color`, hyphenate("colors"))([_, val], ctx);
        if (result) {
          const [c, ...p] = result;
          Object.assign(css, c);
          props.push(...p);
        }
      } else {
        if (numberResolver(val) != null) {
          themeTracking("spacing");
          css[`--un-mask-${gradient}-${direction}-position`] = `calc(var(--spacing) * ${h.bracket.cssvar.fraction.number(val)})`;
        } else {
          css[`--un-mask-${gradient}-${direction}-position`] = h.bracket.cssvar.fraction.rem(val);
        }
      }
    }
    if (gradient === "radial") {
      props.push(...[
        defineProperty("--un-mask-radial-shape", { initialValue: "ellipse" }),
        defineProperty("--un-mask-radial-size", { initialValue: "farthest-corner" })
      ]);
    }
    props.push(...["from", "to"].flatMap((p) => [
      defineProperty(`--un-mask-${gradient}-position`, { initialValue: gradient === "radial" ? "center" : "0deg" }),
      defineProperty(`--un-mask-${gradient}-${p}-position`, { syntax: "<length-percentage>", initialValue: p === "from" ? "0%" : "100%" }),
      defineProperty(`--un-mask-${gradient}-${p}-color`, { syntax: "<color>", initialValue: p === "from" ? "black" : "transparent" })
    ]));
  }
  return [css, ...props];
}
function handleSize$1([, v = ""]) {
  const _v = h.bracket.cssvar.global.fraction.rem(v);
  if (_v !== null)
    return { "mask-size": _v };
}
const masks = [
  // mask-clip
  ["mask-clip-border", { "mask-clip": "border-box" }],
  ["mask-clip-padding", { "mask-clip": "padding-box" }],
  ["mask-clip-content", { "mask-clip": "content-box" }],
  ["mask-clip-fill", { "mask-clip": "fill-box" }],
  ["mask-clip-stroke", { "mask-clip": "stroke-box" }],
  ["mask-clip-view", { "mask-clip": "view-box" }],
  ["mask-no-clip", { "mask-clip": "no-clip" }],
  // mask-composite
  ["mask-add", { "mask-composite": "add" }],
  ["mask-subtract", { "mask-composite": "subtract" }],
  ["mask-intersect", { "mask-composite": "intersect" }],
  ["mask-exclude", { "mask-composite": "exclude" }],
  // mask-image
  [/^mask-(.+)$/, ([, v]) => ({ "mask-image": h.bracket.cssvar(v) })],
  [/^mask-(linear|radial|conic|[xytblr])-(from|to)()(?:-(.+))?$/, handleImage, {
    autocomplete: [
      "mask-(linear|radial|conic)-(from|to)-$colors",
      "mask-(linear|radial|conic)-(from|to)-<percentage>",
      "mask-(linear|radial|conic)-(from|to)",
      "mask-(linear|radial|conic)-<percent>",
      "mask-(x|y|t|b|l|r)-(from|to)-$colors",
      "mask-(x|y|t|b|l|r)-(from|to)-<percentage>",
      "mask-(x|y|t|b|l|r)-(from|to)",
      "mask-(x|y|t|b|l|r)-<percent>"
    ]