@unocss/preset-mini 0.46.2 → 0.46.4

package/dist/{colors-09429298.d.ts → colors-884ab3c4.d.ts}

@@ -1,4 +1,4 @@
-import { T as Theme } from './types-486d85a1.js';
+import { T as Theme } from './types-3bfb4dc5.js';
 
 declare const colors: Theme['colors'];
 

package/dist/colors.d.ts

@@ -1,3 +1,3 @@
-export { c as colors } from './colors-09429298.js';
-import './types-486d85a1.js';
+export { c as colors } from './colors-884ab3c4.js';
+import './types-3bfb4dc5.js';
 import '@unocss/core';

package/dist/{default-d1eb2175.d.ts → default-21cad915.d.ts}

@@ -1,4 +1,4 @@
-import { T as Theme } from './types-486d85a1.js';
+import { T as Theme } from './types-3bfb4dc5.js';
 
 declare const theme: Theme;
 

package/dist/index.cjs

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const core = require('@unocss/core');
 require('./shared/preset-mini.09ec9c56.cjs');
 const colors$1 = require('./shared/preset-mini.b1936363.cjs');
-const _default$1 = require('./shared/preset-mini.3b14aba9.cjs');
+const _default$1 = require('./shared/preset-mini.4ec9b63c.cjs');
 const colors = require('./shared/preset-mini.30606736.cjs');
-const _default = require('./shared/preset-mini.5d486e77.cjs');
-const _default$2 = require('./shared/preset-mini.134e02be.cjs');
-require('./shared/preset-mini.14f57094.cjs');
+const _default = require('./shared/preset-mini.6de47c6f.cjs');
+const _default$2 = require('./shared/preset-mini.c106b68c.cjs');
+require('./shared/preset-mini.fbe02827.cjs');
 
 const preflights = [
   {

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import { Preflight, PresetOptions, Preset } from '@unocss/core';
-export { c as colors } from './colors-09429298.js';
-export { t as theme } from './default-d1eb2175.js';
-import { T as Theme } from './types-486d85a1.js';
-export { T as Theme, a as ThemeAnimation } from './types-486d85a1.js';
-export { p as parseColor } from './utilities-c2105bec.js';
+export { c as colors } from './colors-884ab3c4.js';
+export { t as theme } from './default-21cad915.js';
+import { T as Theme } from './types-3bfb4dc5.js';
+export { T as Theme, a as ThemeAnimation } from './types-3bfb4dc5.js';
+export { p as parseColor } from './utilities-10273596.js';
 
 declare const preflights: Preflight[];
 

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import { entriesToCss, toArray } from '@unocss/core';
 import './shared/preset-mini.489445bc.mjs';
 export { p as parseColor } from './shared/preset-mini.690517b1.mjs';
-import { r as rules } from './shared/preset-mini.4883e112.mjs';
+import { r as rules } from './shared/preset-mini.6616d61c.mjs';
 export { c as colors } from './shared/preset-mini.65ac75be.mjs';
-import { t as theme } from './shared/preset-mini.809a4128.mjs';
-export { t as theme } from './shared/preset-mini.809a4128.mjs';
-import { v as variants } from './shared/preset-mini.a626625a.mjs';
-import './shared/preset-mini.810922e5.mjs';
+import { t as theme } from './shared/preset-mini.2aa41602.mjs';
+export { t as theme } from './shared/preset-mini.2aa41602.mjs';
+import { v as variants } from './shared/preset-mini.fef10425.mjs';
+import './shared/preset-mini.74d943b2.mjs';
 
 const preflights = [
   {

package/dist/rules.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const decoration = require('./shared/preset-mini.09ec9c56.cjs');
-const _default = require('./shared/preset-mini.3b14aba9.cjs');
+const _default = require('./shared/preset-mini.4ec9b63c.cjs');
 require('./shared/preset-mini.b1936363.cjs');
 require('@unocss/core');
 
@@ -57,6 +57,7 @@ exports.willChange = decoration.willChange;
 exports.zIndexes = decoration.zIndexes;
 exports.aspectRatio = _default.aspectRatio;
 exports.bgColors = _default.bgColors;
+exports.containerParent = _default.containerParent;
 exports.cssProperty = _default.cssProperty;
 exports.cssVariables = _default.cssVariables;
 exports.flex = _default.flex;

package/dist/rules.d.ts

@@ -1,5 +1,5 @@
 import { Rule, CSSEntries } from '@unocss/core';
-import { T as Theme } from './types-486d85a1.js';
+import { T as Theme } from './types-3bfb4dc5.js';
 
 declare const verticalAligns: Rule[];
 declare const textAligns: Rule[];
@@ -22,6 +22,8 @@ declare const opacity: Rule[];
 declare const textColors: Rule[];
 declare const bgColors: Rule[];
 
+declare const containerParent: Rule[];
+
 declare const rules: Rule[];
 
 declare const flex: Rule<Theme>[];
@@ -120,4 +122,4 @@ declare const cssProperty: Rule[];
 
 declare const textDecorations: Rule<Theme>[];
 
-export { alignments, appearance, appearances, aspectRatio, bgColors, borderStyles, borders, boxShadows, boxShadowsBase, boxSizing, breaks, contentVisibility, contents, cssProperty, cssVariables, cursors, displays, flex, floats, fontSmoothings, fontStyles, fonts, gaps, grids, handlerBorderStyle, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, ringBase, rings, rules, sizes, svgUtilities, tabSizes, textAligns, textColors, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, transformBase, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };
+export { alignments, appearance, appearances, aspectRatio, bgColors, borderStyles, borders, boxShadows, boxShadowsBase, boxSizing, breaks, containerParent, contentVisibility, contents, cssProperty, cssVariables, cursors, displays, flex, floats, fontSmoothings, fontStyles, fonts, gaps, grids, handlerBorderStyle, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, ringBase, rings, rules, sizes, svgUtilities, tabSizes, textAligns, textColors, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, transformBase, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };

package/dist/rules.mjs

@@ -1,4 +1,4 @@
 export { F as alignments, C as appearance, s as appearances, R as borderStyles, b as borders, o as boxShadows, P as boxShadowsBase, K as boxSizing, z as breaks, c as contentVisibility, a as contents, q as cursors, d as displays, I as floats, n as fontSmoothings, m as fontStyles, f as fonts, S as handlerBorderStyle, H as insets, E as justifies, D as orders, B as outline, A as overflows, G as placements, u as pointerEvents, p as positions, v as resizes, Q as ringBase, r as rings, t as tabSizes, l as textAligns, h as textDecorations, e as textIndents, g as textOverflows, j as textShadows, i as textStrokes, k as textTransforms, O as transformBase, M as transforms, L as transitions, x as userSelects, T as varEmpty, w as verticalAligns, y as whitespaces, N as willChange, J as zIndexes } from './shared/preset-mini.489445bc.mjs';
-export { c as aspectRatio, b as bgColors, h as cssProperty, e as cssVariables, f as flex, g as gaps, a as grids, m as margins, o as opacity, p as paddings, q as questionMark, r as rules, s as sizes, d as svgUtilities, t as textColors } from './shared/preset-mini.4883e112.mjs';
+export { d as aspectRatio, b as bgColors, c as containerParent, i as cssProperty, h as cssVariables, f as flex, g as gaps, a as grids, m as margins, o as opacity, p as paddings, q as questionMark, r as rules, s as sizes, e as svgUtilities, t as textColors } from './shared/preset-mini.6616d61c.mjs';
 import './shared/preset-mini.690517b1.mjs';
 import '@unocss/core';

package/dist/shared/{preset-mini.809a4128.mjs → preset-mini.2aa41602.mjs}

@@ -224,6 +224,7 @@ const maxHeight = {
   ...baseSize,
   screen: "100vh"
 };
+const containers = Object.fromEntries(Object.entries(baseSize).map(([k, v]) => [k, `(min-width: ${v})`]));
 
 const preflightBase = {
   ...transformBase,
@@ -264,7 +265,8 @@ const theme = {
   spacing,
   duration,
   ringWidth,
-  preflightBase
+  preflightBase,
+  containers
 };
 
-export { fontSize as a, blur as b, textIndent as c, dropShadow as d, textStrokeWidth as e, fontFamily as f, textShadow as g, letterSpacing as h, breakpoints as i, lineWidth as j, duration as k, lineHeight as l, borderRadius as m, boxShadow as n, easing as o, baseSize as p, width as q, ringWidth as r, spacing as s, theme as t, maxWidth as u, verticalBreakpoints as v, wordSpacing as w, height as x, maxHeight as y, preflightBase as z };
+export { preflightBase as A, fontSize as a, blur as b, textIndent as c, dropShadow as d, textStrokeWidth as e, fontFamily as f, textShadow as g, letterSpacing as h, breakpoints as i, lineWidth as j, duration as k, lineHeight as l, borderRadius as m, boxShadow as n, easing as o, baseSize as p, width as q, ringWidth as r, spacing as s, theme as t, maxWidth as u, verticalBreakpoints as v, wordSpacing as w, height as x, maxHeight as y, containers as z };

package/dist/shared/{preset-mini.3b14aba9.cjs → preset-mini.4ec9b63c.cjs}

@@ -2,7 +2,7 @@
 
 const decoration = require('./preset-mini.09ec9c56.cjs');
 const colors = require('./preset-mini.b1936363.cjs');
-require('@unocss/core');
+const core = require('@unocss/core');
 
 const opacity = [
   [/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: colors.handler.bracket.percent.cssvar(d) })]
@@ -17,6 +17,16 @@ const bgColors = [
   [/^bg-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-bg-opacity": colors.handler.bracket.percent(opacity2) }), { autocomplete: "bg-(op|opacity)-<percent>" }]
 ];
 
+const containerParent = [
+  [/^@container(?:\/(\w+))?(?:-(normal))?$/, ([, l, v]) => {
+    core.warnOnce("The container query rule is experimental and may not follow semver.");
+    return {
+      "container-type": v ?? "inline-size",
+      "container-name": l
+    };
+  }]
+];
+
 const flex = [
   ["flex", { display: "flex" }],
   ["inline-flex", { display: "inline-flex" }],
@@ -287,11 +297,13 @@ const rules = [
   decoration.transitions,
   decoration.transforms,
   decoration.willChange,
+  containerParent,
   questionMark
 ].flat(1);
 
 exports.aspectRatio = aspectRatio;
 exports.bgColors = bgColors;
+exports.containerParent = containerParent;
 exports.cssProperty = cssProperty;
 exports.cssVariables = cssVariables;
 exports.flex = flex;

package/dist/shared/{preset-mini.4883e112.mjs → preset-mini.6616d61c.mjs}

@@ -1,6 +1,6 @@
 import { d as displays, b as borders, c as contentVisibility, a as contents, f as fonts, t as tabSizes, e as textIndents, g as textOverflows, h as textDecorations, i as textStrokes, j as textShadows, k as textTransforms, l as textAligns, m as fontStyles, n as fontSmoothings, o as boxShadows, r as rings, p as positions, q as cursors, s as appearances, u as pointerEvents, v as resizes, w as verticalAligns, x as userSelects, y as whitespaces, z as breaks, A as overflows, B as outline, C as appearance, D as orders, E as justifies, F as alignments, G as placements, H as insets, I as floats, J as zIndexes, K as boxSizing, L as transitions, M as transforms, N as willChange } from './preset-mini.489445bc.mjs';
 import { h as handler, c as colorResolver, n as numberWithUnitRE, r as resolveVerticalBreakpoints, l as resolveBreakpoints, o as directionSize } from './preset-mini.690517b1.mjs';
-import '@unocss/core';
+import { warnOnce } from '@unocss/core';
 
 const opacity = [
   [/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: handler.bracket.percent.cssvar(d) })]
@@ -15,6 +15,16 @@ const bgColors = [
   [/^bg-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-bg-opacity": handler.bracket.percent(opacity2) }), { autocomplete: "bg-(op|opacity)-<percent>" }]
 ];
 
+const containerParent = [
+  [/^@container(?:\/(\w+))?(?:-(normal))?$/, ([, l, v]) => {
+    warnOnce("The container query rule is experimental and may not follow semver.");
+    return {
+      "container-type": v ?? "inline-size",
+      "container-name": l
+    };
+  }]
+];
+
 const flex = [
   ["flex", { display: "flex" }],
   ["inline-flex", { display: "inline-flex" }],
@@ -285,7 +295,8 @@ const rules = [
   transitions,
   transforms,
   willChange,
+  containerParent,
   questionMark
 ].flat(1);
 
-export { grids as a, bgColors as b, aspectRatio as c, svgUtilities as d, cssVariables as e, flex as f, gaps as g, cssProperty as h, margins as m, opacity as o, paddings as p, questionMark as q, rules as r, sizes as s, textColors as t };
+export { grids as a, bgColors as b, containerParent as c, aspectRatio as d, svgUtilities as e, flex as f, gaps as g, cssVariables as h, cssProperty as i, margins as m, opacity as o, paddings as p, questionMark as q, rules as r, sizes as s, textColors as t };

package/dist/shared/{preset-mini.5d486e77.cjs → preset-mini.6de47c6f.cjs}

@@ -226,6 +226,7 @@ const maxHeight = {
   ...baseSize,
   screen: "100vh"
 };
+const containers = Object.fromEntries(Object.entries(baseSize).map(([k, v]) => [k, `(min-width: ${v})`]));
 
 const preflightBase = {
   ...decoration.transformBase,
@@ -266,7 +267,8 @@ const theme = {
   spacing,
   duration,
   ringWidth,
-  preflightBase
+  preflightBase,
+  containers
 };
 
 exports.baseSize = baseSize;
@@ -274,6 +276,7 @@ exports.blur = blur;
 exports.borderRadius = borderRadius;
 exports.boxShadow = boxShadow;
 exports.breakpoints = breakpoints;
+exports.containers = containers;
 exports.dropShadow = dropShadow;
 exports.duration = duration;
 exports.easing = easing;

package/dist/shared/{preset-mini.810922e5.mjs → preset-mini.74d943b2.mjs}

@@ -39,9 +39,9 @@ const variantParentMatcher = (name, parent) => {
     autocomplete: `${name}:`
   };
 };
-const variantGetBracket = (name, matcher, separators) => {
-  if (matcher.startsWith(`${name}-[`)) {
-    const [match, rest] = getBracket(matcher.slice(name.length + 1), "[", "]") ?? [];
+const variantGetBracket = (prefix, matcher, separators) => {
+  if (matcher.startsWith(`${prefix}[`)) {
+    const [match, rest] = getBracket(matcher.slice(prefix.length), "[", "]") ?? [];
     if (match && rest) {
       for (const separator of separators) {
         if (rest.startsWith(separator))
@@ -51,15 +51,24 @@ const variantGetBracket = (name, matcher, separators) => {
     }
   }
 };
-const variantGetParameter = (name, matcher, separators) => {
-  if (matcher.startsWith(`${name}-`)) {
-    const body = variantGetBracket(name, matcher, separators);
-    if (body)
-      return body;
-    for (const separator of separators) {
-      const pos = matcher.indexOf(separator, name.length + 1);
-      if (pos !== -1)
-        return [matcher.slice(name.length + 1, pos), matcher.slice(pos + separator.length)];
+const variantGetParameter = (prefix, matcher, separators) => {
+  if (matcher.startsWith(prefix)) {
+    const body = variantGetBracket(prefix, matcher, separators);
+    if (body) {
+      const [label = "", rest = body[1]] = variantGetParameter("/", body[1], separators) ?? [];
+      return [body[0], rest, label];
+    }
+    for (const separator of separators.filter((x) => x !== "/")) {
+      const pos = matcher.indexOf(separator, prefix.length);
+      if (pos !== -1) {
+        const labelPos = matcher.indexOf("/", prefix.length);
+        const unlabelled = labelPos === -1 || pos <= labelPos;
+        return [
+          matcher.slice(prefix.length, unlabelled ? pos : labelPos),
+          matcher.slice(pos + separator.length),
+          unlabelled ? "" : matcher.slice(labelPos + 1, pos)
+        ];
+      }
     }
   }
 };

package/dist/shared/{preset-mini.134e02be.cjs → preset-mini.c106b68c.cjs}

@@ -2,12 +2,12 @@
 
 const colors = require('./preset-mini.b1936363.cjs');
 const core = require('@unocss/core');
-const variants$1 = require('./preset-mini.14f57094.cjs');
+const variants$1 = require('./preset-mini.fbe02827.cjs');
 
 const variantAria = {
   name: "aria",
   match(matcher, { theme }) {
-    const variant = variants$1.variantGetParameter("aria", matcher, [":", "-"]);
+    const variant = variants$1.variantGetParameter("aria-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       const aria = colors.handler.bracket(match) ?? theme.aria?.[match] ?? "";
@@ -86,7 +86,7 @@ const scopeMatcher = (name, combinator) => ({
   match(matcher) {
     if (!matcher.startsWith(name))
       return;
-    let body = variants$1.variantGetBracket(name, matcher, [":", "-"]);
+    let body = variants$1.variantGetBracket(`${name}-`, matcher, [":", "-"]);
     if (!body) {
       for (const separator of [":", "-"]) {
         if (matcher.startsWith(`${name}${separator}`)) {
@@ -115,10 +115,42 @@ const variantCombinators = [
   scopeMatcher("siblings", "~")
 ];
 
+const variantContainerQuery = {
+  name: "@",
+  match(matcher, { theme }) {
+    if (matcher.startsWith("@container"))
+      return;
+    const variant = variants$1.variantGetParameter("@", matcher, [":", "-"]);
+    if (variant) {
+      const [match, rest, label] = variant;
+      const unbracket = colors.handler.bracket(match);
+      let container;
+      if (unbracket) {
+        const minWidth = colors.handler.numberWithUnit(unbracket);
+        if (minWidth)
+          container = `(min-width: ${minWidth})`;
+      } else {
+        container = theme.containers?.[match] ?? "";
+      }
+      if (container) {
+        core.warnOnce("The container query variant is experimental and may not follow semver.");
+        return {
+          matcher: rest,
+          handle: (input, next) => next({
+            ...input,
+            parent: `${input.parent ? `${input.parent} $$ ` : ""}@container${label ? ` ${label} ` : " "}${container}`
+          })
+        };
+      }
+    }
+  },
+  multiPass: true
+};
+
 const variantDataAttribute = {
   name: "data",
   match(matcher, { theme }) {
-    const variant = variants$1.variantGetParameter("data", matcher, [":", "-"]);
+    const variant = variants$1.variantGetParameter("data-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       const dataAttribute = colors.handler.bracket(match) ?? theme.data?.[match] ?? "";
@@ -136,7 +168,7 @@ const variantPrint = variants$1.variantParentMatcher("print", "@media print");
 const variantCustomMedia = {
   name: "media",
   match(matcher, { theme }) {
-    const variant = variants$1.variantGetParameter("media", matcher, [":", "-"]);
+    const variant = variants$1.variantGetParameter("media-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       let media = colors.handler.bracket(match) ?? "";
@@ -159,7 +191,7 @@ const variantCustomMedia = {
 const variantSupports = {
   name: "supports",
   match(matcher, { theme }) {
-    const variant = variants$1.variantGetParameter("supports", matcher, [":", "-"]);
+    const variant = variants$1.variantGetParameter("supports-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       let supports = colors.handler.bracket(match) ?? "";
@@ -201,7 +233,7 @@ const variantLanguageDirections = [
 const variantSelector = {
   name: "selector",
   match(matcher) {
-    const variant = variants$1.variantGetBracket("selector", matcher, [":", "-"]);
+    const variant = variants$1.variantGetBracket("selector-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       const selector = colors.handler.bracket(match);
@@ -217,7 +249,7 @@ const variantSelector = {
 const variantCssLayer = {
   name: "layer",
   match(matcher) {
-    const variant = variants$1.variantGetParameter("layer", matcher, [":", "-"]);
+    const variant = variants$1.variantGetParameter("layer-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       const layer = colors.handler.bracket(match) ?? match;
@@ -236,7 +268,7 @@ const variantCssLayer = {
 const variantInternalLayer = {
   name: "uno-layer",
   match(matcher) {
-    const variant = variants$1.variantGetParameter("uno-layer", matcher, [":", "-"]);
+    const variant = variants$1.variantGetParameter("uno-layer-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       const layer = colors.handler.bracket(match) ?? match;
@@ -252,7 +284,7 @@ const variantInternalLayer = {
 const variantScope = {
   name: "scope",
   match(matcher) {
-    const variant = variants$1.variantGetBracket("scope", matcher, [":", "-"]);
+    const variant = variants$1.variantGetBracket("scope-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       const scope = colors.handler.bracket(match);
@@ -442,7 +474,7 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
   const pseudoRE = new RegExp(`^${tag}-(?:(?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))(?:(/\\w+))?[:-]`);
   const pseudoColonRE = new RegExp(`^${tag}-(?:(?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))(?:(/\\w+))?[:]`);
   const matchBracket = (input) => {
-    const body = variants$1.variantGetBracket(tag, input, []);
+    const body = variants$1.variantGetBracket(`${tag}-`, input, []);
     if (!body)
       return;
     const [match, rest] = body;
@@ -483,7 +515,7 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
         return;
       const [label, matcher, prefix, sort] = result;
       if (label !== "")
-        core.warnOnce("The labeled pseudo is experimental and may be changed in breaking ways at any time.");
+        core.warnOnce("The labeled variant is experimental and may not follow semver.");
       return {
         matcher,
         handle: (input2, next) => next({
@@ -587,6 +619,7 @@ const variants = (options) => [
   ...variantColorsMediaOrClass(options),
   ...variantLanguageDirections,
   variantScope,
+  variantContainerQuery,
   variantVariables
 ];
 
@@ -596,6 +629,7 @@ exports.variantAria = variantAria;
 exports.variantBreakpoints = variantBreakpoints;
 exports.variantColorsMediaOrClass = variantColorsMediaOrClass;
 exports.variantCombinators = variantCombinators;
+exports.variantContainerQuery = variantContainerQuery;
 exports.variantCssLayer = variantCssLayer;
 exports.variantCustomMedia = variantCustomMedia;
 exports.variantDataAttribute = variantDataAttribute;

package/dist/shared/{preset-mini.14f57094.cjs → preset-mini.fbe02827.cjs}

@@ -41,9 +41,9 @@ const variantParentMatcher = (name, parent) => {
     autocomplete: `${name}:`
   };
 };
-const variantGetBracket = (name, matcher, separators) => {
-  if (matcher.startsWith(`${name}-[`)) {
-    const [match, rest] = colors.getBracket(matcher.slice(name.length + 1), "[", "]") ?? [];
+const variantGetBracket = (prefix, matcher, separators) => {
+  if (matcher.startsWith(`${prefix}[`)) {
+    const [match, rest] = colors.getBracket(matcher.slice(prefix.length), "[", "]") ?? [];
     if (match && rest) {
       for (const separator of separators) {
         if (rest.startsWith(separator))
@@ -53,15 +53,24 @@ const variantGetBracket = (name, matcher, separators) => {
     }
   }
 };
-const variantGetParameter = (name, matcher, separators) => {
-  if (matcher.startsWith(`${name}-`)) {
-    const body = variantGetBracket(name, matcher, separators);
-    if (body)
-      return body;
-    for (const separator of separators) {
-      const pos = matcher.indexOf(separator, name.length + 1);
-      if (pos !== -1)
-        return [matcher.slice(name.length + 1, pos), matcher.slice(pos + separator.length)];
+const variantGetParameter = (prefix, matcher, separators) => {
+  if (matcher.startsWith(prefix)) {
+    const body = variantGetBracket(prefix, matcher, separators);
+    if (body) {
+      const [label = "", rest = body[1]] = variantGetParameter("/", body[1], separators) ?? [];
+      return [body[0], rest, label];
+    }
+    for (const separator of separators.filter((x) => x !== "/")) {
+      const pos = matcher.indexOf(separator, prefix.length);
+      if (pos !== -1) {
+        const labelPos = matcher.indexOf("/", prefix.length);
+        const unlabelled = labelPos === -1 || pos <= labelPos;
+        return [
+          matcher.slice(prefix.length, unlabelled ? pos : labelPos),
+          matcher.slice(pos + separator.length),
+          unlabelled ? "" : matcher.slice(labelPos + 1, pos)
+        ];
+      }
     }
   }
 };

package/dist/shared/{preset-mini.a626625a.mjs → preset-mini.fef10425.mjs}

@@ -1,11 +1,11 @@
 import { h as handler, l as resolveBreakpoints, q as getBracket, C as CONTROL_MINI_NO_NEGATIVE, s as getComponent } from './preset-mini.690517b1.mjs';
-import { escapeRegExp, warnOnce, escapeSelector } from '@unocss/core';
-import { v as variantGetParameter, a as variantGetBracket, b as variantParentMatcher, c as variantMatcher } from './preset-mini.810922e5.mjs';
+import { warnOnce, escapeRegExp, escapeSelector } from '@unocss/core';
+import { v as variantGetParameter, a as variantGetBracket, b as variantParentMatcher, c as variantMatcher } from './preset-mini.74d943b2.mjs';
 
 const variantAria = {
   name: "aria",
   match(matcher, { theme }) {
-    const variant = variantGetParameter("aria", matcher, [":", "-"]);
+    const variant = variantGetParameter("aria-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       const aria = handler.bracket(match) ?? theme.aria?.[match] ?? "";
@@ -84,7 +84,7 @@ const scopeMatcher = (name, combinator) => ({
   match(matcher) {
     if (!matcher.startsWith(name))
       return;
-    let body = variantGetBracket(name, matcher, [":", "-"]);
+    let body = variantGetBracket(`${name}-`, matcher, [":", "-"]);
     if (!body) {
       for (const separator of [":", "-"]) {
         if (matcher.startsWith(`${name}${separator}`)) {
@@ -113,10 +113,42 @@ const variantCombinators = [
   scopeMatcher("siblings", "~")
 ];
 
+const variantContainerQuery = {
+  name: "@",
+  match(matcher, { theme }) {
+    if (matcher.startsWith("@container"))
+      return;
+    const variant = variantGetParameter("@", matcher, [":", "-"]);
+    if (variant) {
+      const [match, rest, label] = variant;
+      const unbracket = handler.bracket(match);
+      let container;
+      if (unbracket) {
+        const minWidth = handler.numberWithUnit(unbracket);
+        if (minWidth)
+          container = `(min-width: ${minWidth})`;
+      } else {
+        container = theme.containers?.[match] ?? "";
+      }
+      if (container) {
+        warnOnce("The container query variant is experimental and may not follow semver.");
+        return {
+          matcher: rest,
+          handle: (input, next) => next({
+            ...input,
+            parent: `${input.parent ? `${input.parent} $$ ` : ""}@container${label ? ` ${label} ` : " "}${container}`
+          })
+        };
+      }
+    }
+  },
+  multiPass: true
+};
+
 const variantDataAttribute = {
   name: "data",
   match(matcher, { theme }) {
-    const variant = variantGetParameter("data", matcher, [":", "-"]);
+    const variant = variantGetParameter("data-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       const dataAttribute = handler.bracket(match) ?? theme.data?.[match] ?? "";
@@ -134,7 +166,7 @@ const variantPrint = variantParentMatcher("print", "@media print");
 const variantCustomMedia = {
   name: "media",
   match(matcher, { theme }) {
-    const variant = variantGetParameter("media", matcher, [":", "-"]);
+    const variant = variantGetParameter("media-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       let media = handler.bracket(match) ?? "";
@@ -157,7 +189,7 @@ const variantCustomMedia = {
 const variantSupports = {
   name: "supports",
   match(matcher, { theme }) {
-    const variant = variantGetParameter("supports", matcher, [":", "-"]);
+    const variant = variantGetParameter("supports-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       let supports = handler.bracket(match) ?? "";
@@ -199,7 +231,7 @@ const variantLanguageDirections = [
 const variantSelector = {
   name: "selector",
   match(matcher) {
-    const variant = variantGetBracket("selector", matcher, [":", "-"]);
+    const variant = variantGetBracket("selector-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       const selector = handler.bracket(match);
@@ -215,7 +247,7 @@ const variantSelector = {
 const variantCssLayer = {
   name: "layer",
   match(matcher) {
-    const variant = variantGetParameter("layer", matcher, [":", "-"]);
+    const variant = variantGetParameter("layer-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       const layer = handler.bracket(match) ?? match;
@@ -234,7 +266,7 @@ const variantCssLayer = {
 const variantInternalLayer = {
   name: "uno-layer",
   match(matcher) {
-    const variant = variantGetParameter("uno-layer", matcher, [":", "-"]);
+    const variant = variantGetParameter("uno-layer-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       const layer = handler.bracket(match) ?? match;
@@ -250,7 +282,7 @@ const variantInternalLayer = {
 const variantScope = {
   name: "scope",
   match(matcher) {
-    const variant = variantGetBracket("scope", matcher, [":", "-"]);
+    const variant = variantGetBracket("scope-", matcher, [":", "-"]);
     if (variant) {
       const [match, rest] = variant;
       const scope = handler.bracket(match);
@@ -440,7 +472,7 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
   const pseudoRE = new RegExp(`^${tag}-(?:(?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))(?:(/\\w+))?[:-]`);
   const pseudoColonRE = new RegExp(`^${tag}-(?:(?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))(?:(/\\w+))?[:]`);
   const matchBracket = (input) => {
-    const body = variantGetBracket(tag, input, []);
+    const body = variantGetBracket(`${tag}-`, input, []);
     if (!body)
       return;
     const [match, rest] = body;
@@ -481,7 +513,7 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
         return;
       const [label, matcher, prefix, sort] = result;
       if (label !== "")
-        warnOnce("The labeled pseudo is experimental and may be changed in breaking ways at any time.");
+        warnOnce("The labeled variant is experimental and may not follow semver.");
       return {
         matcher,
         handle: (input2, next) => next({
@@ -585,7 +617,8 @@ const variants = (options) => [
   ...variantColorsMediaOrClass(options),
   ...variantLanguageDirections,
   variantScope,
+  variantContainerQuery,
   variantVariables
 ];
 
-export { variantAria as a, variantBreakpoints as b, calcMaxWidthBySize as c, variantCombinators as d, variantDataAttribute as e, variantPrint as f, variantCustomMedia as g, variantSupports as h, variantColorsMediaOrClass as i, variantLanguageDirections as j, variantSelector as k, variantCssLayer as l, variantInternalLayer as m, variantScope as n, variantVariables as o, variantPseudoClassesAndElements as p, variantPseudoClassFunctions as q, variantTaggedPseudoClasses as r, partClasses as s, variantImportant as t, variantNegative as u, variants as v };
+export { variantAria as a, variantBreakpoints as b, calcMaxWidthBySize as c, variantCombinators as d, variantContainerQuery as e, variantDataAttribute as f, variantPrint as g, variantCustomMedia as h, variantSupports as i, variantColorsMediaOrClass as j, variantLanguageDirections as k, variantSelector as l, variantCssLayer as m, variantInternalLayer as n, variantScope as o, variantVariables as p, variantPseudoClassesAndElements as q, variantPseudoClassFunctions as r, variantTaggedPseudoClasses as s, partClasses as t, variantImportant as u, variants as v, variantNegative as w };

package/dist/theme.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const colors = require('./shared/preset-mini.30606736.cjs');
-const _default = require('./shared/preset-mini.5d486e77.cjs');
+const _default = require('./shared/preset-mini.6de47c6f.cjs');
 require('./shared/preset-mini.09ec9c56.cjs');
 require('./shared/preset-mini.b1936363.cjs');
 require('@unocss/core');
@@ -16,6 +16,7 @@ exports.blur = _default.blur;
 exports.borderRadius = _default.borderRadius;
 exports.boxShadow = _default.boxShadow;
 exports.breakpoints = _default.breakpoints;
+exports.containers = _default.containers;
 exports.dropShadow = _default.dropShadow;
 exports.duration = _default.duration;
 exports.easing = _default.easing;

package/dist/theme.d.ts

@@ -1,7 +1,7 @@
-export { c as colors } from './colors-09429298.js';
-export { t as theme } from './default-d1eb2175.js';
-import { T as Theme } from './types-486d85a1.js';
-export { T as Theme, a as ThemeAnimation } from './types-486d85a1.js';
+export { c as colors } from './colors-884ab3c4.js';
+export { t as theme } from './default-21cad915.js';
+import { T as Theme } from './types-3bfb4dc5.js';
+export { C as Colors, T as Theme, a as ThemeAnimation } from './types-3bfb4dc5.js';
 import '@unocss/core';
 
 declare const blur: {
@@ -194,6 +194,9 @@ declare const maxHeight: {
     prose: string;
     none: string;
 };
+declare const containers: {
+    [k: string]: string;
+};
 
 declare const preflightBase: {
     '--un-ring-inset': string;
@@ -219,4 +222,4 @@ declare const preflightBase: {
     '--un-translate-z': number;
 };
 
-export { baseSize, blur, borderRadius, boxShadow, breakpoints, dropShadow, duration, easing, fontFamily, fontSize, height, letterSpacing, lineHeight, lineWidth, maxHeight, maxWidth, preflightBase, ringWidth, spacing, textIndent, textShadow, textStrokeWidth, verticalBreakpoints, width, wordSpacing };
+export { baseSize, blur, borderRadius, boxShadow, breakpoints, containers, dropShadow, duration, easing, fontFamily, fontSize, height, letterSpacing, lineHeight, lineWidth, maxHeight, maxWidth, preflightBase, ringWidth, spacing, textIndent, textShadow, textStrokeWidth, verticalBreakpoints, width, wordSpacing };

package/dist/theme.mjs

@@ -1,5 +1,5 @@
 export { c as colors } from './shared/preset-mini.65ac75be.mjs';
-export { p as baseSize, b as blur, m as borderRadius, n as boxShadow, i as breakpoints, d as dropShadow, k as duration, o as easing, f as fontFamily, a as fontSize, x as height, h as letterSpacing, l as lineHeight, j as lineWidth, y as maxHeight, u as maxWidth, z as preflightBase, r as ringWidth, s as spacing, c as textIndent, g as textShadow, e as textStrokeWidth, t as theme, v as verticalBreakpoints, q as width, w as wordSpacing } from './shared/preset-mini.809a4128.mjs';
+export { p as baseSize, b as blur, m as borderRadius, n as boxShadow, i as breakpoints, z as containers, d as dropShadow, k as duration, o as easing, f as fontFamily, a as fontSize, x as height, h as letterSpacing, l as lineHeight, j as lineWidth, y as maxHeight, u as maxWidth, A as preflightBase, r as ringWidth, s as spacing, c as textIndent, g as textShadow, e as textStrokeWidth, t as theme, v as verticalBreakpoints, q as width, w as wordSpacing } from './shared/preset-mini.2aa41602.mjs';
 import './shared/preset-mini.489445bc.mjs';
 import './shared/preset-mini.690517b1.mjs';
 import '@unocss/core';

package/dist/{types-486d85a1.d.ts → types-3bfb4dc5.d.ts}

@@ -7,6 +7,9 @@ interface ThemeAnimation {
     properties?: Record<string, object>;
     counts?: Record<string, string | number>;
 }
+interface Colors {
+    [key: string]: Colors | string;
+}
 interface Theme {
     width?: Record<string, string>;
     height?: Record<string, string>;
@@ -23,9 +26,9 @@ interface Theme {
     borderRadius?: Record<string, string>;
     breakpoints?: Record<string, string>;
     verticalBreakpoints?: Record<string, string>;
-    colors?: Record<string, string | Record<string, string>>;
+    colors?: Colors;
     fontFamily?: Record<string, string>;
-    fontSize?: Record<string, [string, string]>;
+    fontSize?: Record<string, string | [string, string]>;
     lineHeight?: Record<string, string>;
     letterSpacing?: Record<string, string>;
     wordSpacing?: Record<string, string>;
@@ -44,6 +47,7 @@ interface Theme {
     easing?: Record<string, string>;
     media?: Record<string, string>;
     supports?: Record<string, string>;
+    containers?: Record<string, string>;
     animation?: ThemeAnimation;
     gridAutoColumn?: Record<string, string>;
     gridAutoRow?: Record<string, string>;
@@ -59,4 +63,4 @@ interface Theme {
     preflightBase?: Record<string, string | number>;
 }
 
-export { Theme as T, ThemeAnimation as a };
+export { Colors as C, Theme as T, ThemeAnimation as a };

package/dist/{utilities-c2105bec.d.ts → utilities-10273596.d.ts}

@@ -1,5 +1,5 @@
 import { DynamicMatcher, ParsedColorValue, CSSObject, VariantContext, Rule } from '@unocss/core';
-import { T as Theme } from './types-486d85a1.js';
+import { T as Theme } from './types-3bfb4dc5.js';
 
 declare const CONTROL_MINI_NO_NEGATIVE = "$$mini-no-negative";
 /**

package/dist/utils.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const colors = require('./shared/preset-mini.b1936363.cjs');
-const variants = require('./shared/preset-mini.14f57094.cjs');
+const variants = require('./shared/preset-mini.fbe02827.cjs');
 require('@unocss/core');
 
 

package/dist/utils.d.ts

@@ -1,7 +1,7 @@
 import * as _unocss_core from '@unocss/core';
 import { RGBAColorValue, CSSColorValue, VariantHandlerContext, VariantObject } from '@unocss/core';
-export { C as CONTROL_MINI_NO_NEGATIVE, c as colorResolver, a as colorableShadows, d as directionSize, g as getBracket, e as getComponent, f as getComponents, h as hasParseableColor, m as makeGlobalStaticRules, p as parseColor, r as resolveBreakpoints, b as resolveVerticalBreakpoints } from './utilities-c2105bec.js';
-import './types-486d85a1.js';
+export { C as CONTROL_MINI_NO_NEGATIVE, c as colorResolver, a as colorableShadows, d as directionSize, g as getBracket, e as getComponent, f as getComponents, h as hasParseableColor, m as makeGlobalStaticRules, p as parseColor, r as resolveBreakpoints, b as resolveVerticalBreakpoints } from './utilities-10273596.js';
+import './types-3bfb4dc5.js';
 
 declare function hex2rgba(hex?: string): RGBAColorValue | undefined;
 declare function parseCssColor(str?: string): CSSColorValue | undefined;
@@ -77,7 +77,7 @@ declare const h: _unocss_core.ValueHandler<"number" | "global" | "auto" | "posit
 
 declare const variantMatcher: (name: string, handler: (input: VariantHandlerContext) => Record<string, any>) => VariantObject;
 declare const variantParentMatcher: (name: string, parent: string) => VariantObject;
-declare const variantGetBracket: (name: string, matcher: string, separators: string[]) => string[] | undefined;
-declare const variantGetParameter: (name: string, matcher: string, separators: string[]) => string[] | undefined;
+declare const variantGetBracket: (prefix: string, matcher: string, separators: string[]) => string[] | undefined;
+declare const variantGetParameter: (prefix: string, matcher: string, separators: string[]) => string[] | undefined;
 
 export { colorOpacityToString, colorToString, cornerMap, directionMap, globalKeywords, h, handler, hex2rgba, insetMap, parseCssColor, positionMap, handlers as valueHandlers, variantGetBracket, variantGetParameter, variantMatcher, variantParentMatcher, xyzMap };

package/dist/utils.mjs

@@ -1,3 +1,3 @@
 export { C as CONTROL_MINI_NO_NEGATIVE, f as colorOpacityToString, c as colorResolver, e as colorToString, i as colorableShadows, b as cornerMap, d as directionMap, o as directionSize, q as getBracket, s as getComponent, y as getComponents, g as globalKeywords, v as h, h as handler, a as hasParseableColor, t as hex2rgba, j as insetMap, m as makeGlobalStaticRules, p as parseColor, u as parseCssColor, k as positionMap, l as resolveBreakpoints, r as resolveVerticalBreakpoints, w as valueHandlers, x as xyzMap } from './shared/preset-mini.690517b1.mjs';
-export { a as variantGetBracket, v as variantGetParameter, c as variantMatcher, b as variantParentMatcher } from './shared/preset-mini.810922e5.mjs';
+export { a as variantGetBracket, v as variantGetParameter, c as variantMatcher, b as variantParentMatcher } from './shared/preset-mini.74d943b2.mjs';
 import '@unocss/core';

package/dist/variants.cjs

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const _default = require('./shared/preset-mini.134e02be.cjs');
+const _default = require('./shared/preset-mini.c106b68c.cjs');
 require('./shared/preset-mini.b1936363.cjs');
 require('@unocss/core');
-require('./shared/preset-mini.14f57094.cjs');
+require('./shared/preset-mini.fbe02827.cjs');
 
 
 
@@ -15,6 +15,7 @@ exports.variantAria = _default.variantAria;
 exports.variantBreakpoints = _default.variantBreakpoints;
 exports.variantColorsMediaOrClass = _default.variantColorsMediaOrClass;
 exports.variantCombinators = _default.variantCombinators;
+exports.variantContainerQuery = _default.variantContainerQuery;
 exports.variantCssLayer = _default.variantCssLayer;
 exports.variantCustomMedia = _default.variantCustomMedia;
 exports.variantDataAttribute = _default.variantDataAttribute;

package/dist/variants.d.ts

@@ -1,9 +1,9 @@
 import { VariantObject, Variant } from '@unocss/core';
-import { T as Theme } from './types-486d85a1.js';
+import { T as Theme } from './types-3bfb4dc5.js';
 import { PresetMiniOptions } from './index.js';
-import './colors-09429298.js';
-import './default-d1eb2175.js';
-import './utilities-c2105bec.js';
+import './colors-884ab3c4.js';
+import './default-21cad915.js';
+import './utilities-10273596.js';
 
 declare const variantAria: VariantObject;
 
@@ -12,6 +12,8 @@ declare const variantBreakpoints: Variant<Theme>;
 
 declare const variantCombinators: Variant[];
 
+declare const variantContainerQuery: VariantObject;
+
 declare const variantDataAttribute: VariantObject;
 
 declare const variantPrint: Variant;
@@ -40,4 +42,4 @@ declare const variantImportant: Variant;
 
 declare const variantNegative: Variant;
 
-export { calcMaxWidthBySize, partClasses, variantAria, variantBreakpoints, variantColorsMediaOrClass, variantCombinators, variantCssLayer, variantCustomMedia, variantDataAttribute, variantImportant, variantInternalLayer, variantLanguageDirections, variantNegative, variantPrint, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantScope, variantSelector, variantSupports, variantTaggedPseudoClasses, variantVariables, variants };
+export { calcMaxWidthBySize, partClasses, variantAria, variantBreakpoints, variantColorsMediaOrClass, variantCombinators, variantContainerQuery, variantCssLayer, variantCustomMedia, variantDataAttribute, variantImportant, variantInternalLayer, variantLanguageDirections, variantNegative, variantPrint, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantScope, variantSelector, variantSupports, variantTaggedPseudoClasses, variantVariables, variants };

package/dist/variants.mjs

@@ -1,4 +1,4 @@
-export { c as calcMaxWidthBySize, s as partClasses, a as variantAria, b as variantBreakpoints, i as variantColorsMediaOrClass, d as variantCombinators, l as variantCssLayer, g as variantCustomMedia, e as variantDataAttribute, t as variantImportant, m as variantInternalLayer, j as variantLanguageDirections, u as variantNegative, f as variantPrint, q as variantPseudoClassFunctions, p as variantPseudoClassesAndElements, n as variantScope, k as variantSelector, h as variantSupports, r as variantTaggedPseudoClasses, o as variantVariables, v as variants } from './shared/preset-mini.a626625a.mjs';
+export { c as calcMaxWidthBySize, t as partClasses, a as variantAria, b as variantBreakpoints, j as variantColorsMediaOrClass, d as variantCombinators, e as variantContainerQuery, m as variantCssLayer, h as variantCustomMedia, f as variantDataAttribute, u as variantImportant, n as variantInternalLayer, k as variantLanguageDirections, w as variantNegative, g as variantPrint, r as variantPseudoClassFunctions, q as variantPseudoClassesAndElements, o as variantScope, l as variantSelector, i as variantSupports, s as variantTaggedPseudoClasses, p as variantVariables, v as variants } from './shared/preset-mini.fef10425.mjs';
 import './shared/preset-mini.690517b1.mjs';
 import '@unocss/core';
-import './shared/preset-mini.810922e5.mjs';
+import './shared/preset-mini.74d943b2.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-mini",
-  "version": "0.46.2",
+  "version": "0.46.4",
   "description": "The minimal preset for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -61,7 +61,7 @@
     "*.css"
   ],
   "dependencies": {
-    "@unocss/core": "0.46.2"
+    "@unocss/core": "0.46.4"
   },
   "scripts": {
     "build": "unbuild",