@kbach/react 0.5.1 → 0.5.3

package/dist/index.js

@@ -142,290 +142,312 @@ var defaultColors = {
   black: "#000000",
   white: "#ffffff",
   slate: {
-    1: "#f8f9fc",
-    2: "#edf0f8",
-    3: "#dde3f2",
-    4: "#c5cee8",
-    5: "#9badd3",
-    6: "#6c87b6",
-    7: "#526b98",
-    8: "#3e5479",
-    9: "#2d3f5e",
-    10: "#1d2b42",
-    11: "#0f1828"
+    1: "#f8fafc",
+    2: "#f1f5f9",
+    3: "#e2e8f0",
+    4: "#cbd5e1",
+    5: "#94a3b8",
+    6: "#64748b",
+    7: "#475569",
+    8: "#334155",
+    9: "#1e293b",
+    10: "#0f172a",
+    11: "#020617",
+    12: "#01020a"
   },
   gray: {
-    1: "#f9f9f9",
-    2: "#f3f3f3",
-    3: "#e6e6e7",
-    4: "#d2d2d4",
-    5: "#aaaaad",
-    6: "#757578",
-    7: "#585860",
-    8: "#434349",
-    9: "#2c2c32",
-    10: "#1c1c21",
-    11: "#0c0c0f"
+    1: "#f9fafb",
+    2: "#f3f4f6",
+    3: "#e5e7eb",
+    4: "#d1d5db",
+    5: "#9ca3af",
+    6: "#6b7280",
+    7: "#4b5563",
+    8: "#374151",
+    9: "#1f2937",
+    10: "#111827",
+    11: "#030712",
+    12: "#020409"
   },
   zinc: {
     1: "#fafafa",
     2: "#f4f4f5",
-    3: "#e8e8ea",
-    4: "#d3d4d7",
-    5: "#a9aaae",
-    6: "#74757c",
-    7: "#57585f",
-    8: "#42434b",
-    9: "#2a2b31",
-    10: "#1a1b20",
-    11: "#0b0b0e"
+    3: "#e4e4e7",
+    4: "#d4d4d8",
+    5: "#a1a1aa",
+    6: "#71717a",
+    7: "#52525b",
+    8: "#3f3f46",
+    9: "#27272a",
+    10: "#18181b",
+    11: "#09090b",
+    12: "#050506"
   },
   neutral: {
     1: "#fafafa",
     2: "#f5f5f5",
-    3: "#e9e9e9",
-    4: "#d5d5d5",
-    5: "#ababab",
-    6: "#777777",
-    7: "#5a5a5a",
-    8: "#444444",
-    9: "#2d2d2d",
-    10: "#1d1d1d",
-    11: "#0d0d0d"
+    3: "#e5e5e5",
+    4: "#d4d4d4",
+    5: "#a3a3a3",
+    6: "#737373",
+    7: "#525252",
+    8: "#404040",
+    9: "#262626",
+    10: "#171717",
+    11: "#0a0a0a",
+    12: "#050505"
   },
   stone: {
-    1: "#fafaf8",
-    2: "#f5f4f1",
-    3: "#e9e6e0",
-    4: "#d6d0c8",
-    5: "#b3ab9c",
-    6: "#7e7568",
-    7: "#605850",
-    8: "#4a4440",
-    9: "#302c28",
-    10: "#201d1a",
-    11: "#100f0c"
+    1: "#fafaf9",
+    2: "#f5f5f4",
+    3: "#e7e5e4",
+    4: "#d6d3d1",
+    5: "#a8a29e",
+    6: "#78716c",
+    7: "#57534e",
+    8: "#44403c",
+    9: "#292524",
+    10: "#1c1917",
+    11: "#0c0a09",
+    12: "#070605"
   },
   red: {
-    1: "#fff4f3",
-    2: "#ffe8e6",
-    3: "#ffd1ce",
-    4: "#ffaba5",
-    5: "#ff7b73",
-    6: "#f44642",
-    7: "#d6302c",
-    8: "#be2020",
-    9: "#961515",
-    10: "#6e0f0f",
-    11: "#3e0606"
+    1: "#fef2f2",
+    2: "#fee2e2",
+    3: "#fecaca",
+    4: "#fca5a5",
+    5: "#f87171",
+    6: "#ef4444",
+    7: "#dc2626",
+    8: "#b91c1c",
+    9: "#991b1b",
+    10: "#7f1d1d",
+    11: "#450a0a",
+    12: "#280606"
   },
   orange: {
-    1: "#fff8ec",
-    2: "#ffedce",
-    3: "#ffdda0",
-    4: "#ffc06a",
-    5: "#ff9c32",
-    6: "#f47c0c",
-    7: "#cc6205",
-    8: "#a34b04",
-    9: "#7d3806",
-    10: "#5b2807",
-    11: "#311502"
+    1: "#fff7ed",
+    2: "#ffedd5",
+    3: "#fed7aa",
+    4: "#fdba74",
+    5: "#fb923c",
+    6: "#f97316",
+    7: "#ea580c",
+    8: "#c2410c",
+    9: "#9a3412",
+    10: "#7c2d12",
+    11: "#431407",
+    12: "#270c04"
   },
   amber: {
-    1: "#fffbea",
-    2: "#fff5c7",
-    3: "#ffeb85",
-    4: "#ffd944",
-    5: "#f8c00e",
-    6: "#e4a500",
-    7: "#bd8300",
-    8: "#956600",
-    9: "#704c00",
-    10: "#513600",
-    11: "#2d1e00"
+    1: "#fffbeb",
+    2: "#fef3c7",
+    3: "#fde68a",
+    4: "#fcd34d",
+    5: "#fbbf24",
+    6: "#f59e0b",
+    7: "#d97706",
+    8: "#b45309",
+    9: "#92400e",
+    10: "#78350f",
+    11: "#451a03",
+    12: "#291002"
   },
   yellow: {
-    1: "#ffffe8",
-    2: "#ffffc8",
-    3: "#fffb82",
-    4: "#fff342",
-    5: "#f5da0e",
-    6: "#e1bd00",
-    7: "#bb9a00",
-    8: "#947800",
-    9: "#6f5900",
-    10: "#514200",
-    11: "#2d2500"
+    1: "#fefce8",
+    2: "#fef9c3",
+    3: "#fef08a",
+    4: "#fde047",
+    5: "#facc15",
+    6: "#eab308",
+    7: "#ca8a04",
+    8: "#a16207",
+    9: "#854d0e",
+    10: "#713f12",
+    11: "#422006",
+    12: "#271304"
   },
   lime: {
-    1: "#f5ffe8",
-    2: "#eaffca",
-    3: "#d5ff90",
-    4: "#b8f658",
-    5: "#97e422",
-    6: "#74c90b",
-    7: "#5aa407",
-    8: "#457e08",
-    9: "#346008",
-    10: "#254408",
-    11: "#132505"
+    1: "#f7fee7",
+    2: "#ecfccb",
+    3: "#d9f99d",
+    4: "#bef264",
+    5: "#a3e635",
+    6: "#84cc16",
+    7: "#65a30d",
+    8: "#4d7c0f",
+    9: "#3f6212",
+    10: "#365314",
+    11: "#1a2e05",
+    12: "#0f1b03"
   },
   green: {
-    1: "#f0fdf5",
-    2: "#dcfce9",
-    3: "#b8f4d2",
-    4: "#84e8b1",
-    5: "#47d38d",
-    6: "#1cb86d",
-    7: "#129a57",
-    8: "#0e7b45",
-    9: "#0d6035",
-    10: "#0b4f2d",
-    11: "#042a18"
+    1: "#f0fdf4",
+    2: "#dcfce7",
+    3: "#bbf7d0",
+    4: "#86efac",
+    5: "#4ade80",
+    6: "#22c55e",
+    7: "#16a34a",
+    8: "#15803d",
+    9: "#166534",
+    10: "#14532d",
+    11: "#052e16",
+    12: "#031b0d"
   },
   emerald: {
-    1: "#ecfdf7",
-    2: "#d0fcea",
-    3: "#a5f4d6",
-    4: "#6aeabc",
-    5: "#35d49f",
-    6: "#10b982",
-    7: "#099768",
-    8: "#087a53",
-    9: "#0a5f43",
-    10: "#094e37",
-    11: "#032b1f"
+    1: "#ecfdf5",
+    2: "#d1fae5",
+    3: "#a7f3d0",
+    4: "#6ee7b7",
+    5: "#34d399",
+    6: "#10b981",
+    7: "#059669",
+    8: "#047857",
+    9: "#065f46",
+    10: "#064e3b",
+    11: "#022c22",
+    12: "#011a14"
   },
   teal: {
-    1: "#efffff",
-    2: "#ccfcf8",
-    3: "#99f7f1",
-    4: "#60eee6",
-    5: "#2cdad3",
-    6: "#13bebc",
-    7: "#0d9997",
-    8: "#0d7a78",
-    9: "#0e6160",
-    10: "#0d4f4e",
-    11: "#063535"
+    1: "#f0fdfa",
+    2: "#ccfbf1",
+    3: "#99f6e4",
+    4: "#5eead4",
+    5: "#2dd4bf",
+    6: "#14b8a6",
+    7: "#0d9488",
+    8: "#0f766e",
+    9: "#115e59",
+    10: "#134e4a",
+    11: "#042f2e",
+    12: "#021c1b"
   },
   cyan: {
     1: "#ecfeff",
-    2: "#cffcfe",
-    3: "#a3f6fc",
-    4: "#67ebfa",
-    5: "#23d7f5",
-    6: "#07bde0",
-    7: "#0898b8",
-    8: "#0c7896",
-    9: "#135f78",
-    10: "#134e65",
-    11: "#053143"
+    2: "#cffafe",
+    3: "#a5f3fc",
+    4: "#67e8f9",
+    5: "#22d3ee",
+    6: "#06b6d4",
+    7: "#0891b2",
+    8: "#0e7490",
+    9: "#155e75",
+    10: "#164e63",
+    11: "#083344",
+    12: "#041e28"
   },
   sky: {
-    1: "#f0f8ff",
+    1: "#f0f9ff",
     2: "#e0f2fe",
-    3: "#bde3fd",
-    4: "#89cffa",
-    5: "#48b4f8",
-    6: "#149aeb",
-    7: "#057ec8",
-    8: "#0664a4",
-    9: "#0a5087",
-    10: "#0d4270",
-    11: "#082748"
+    3: "#bae6fd",
+    4: "#7dd3fc",
+    5: "#38bdf8",
+    6: "#0ea5e9",
+    7: "#0284c7",
+    8: "#0369a1",
+    9: "#075985",
+    10: "#0c4a6e",
+    11: "#082f49",
+    12: "#041b2b"
   },
   blue: {
-    1: "#eff5ff",
-    2: "#dde9fe",
-    3: "#bdd2fd",
-    4: "#8db1fb",
-    5: "#5a89f7",
-    6: "#2f64f3",
-    7: "#1b4de6",
-    8: "#1740cc",
-    9: "#142da8",
-    10: "#102080",
-    11: "#0b144f"
+    1: "#eff6ff",
+    2: "#dbeafe",
+    3: "#bfdbfe",
+    4: "#93c5fd",
+    5: "#60a5fa",
+    6: "#3b82f6",
+    7: "#2563eb",
+    8: "#1d4ed8",
+    9: "#1e40af",
+    10: "#1e3a8a",
+    11: "#172554",
+    12: "#0d1633"
   },
   indigo: {
-    1: "#eff1ff",
-    2: "#e2e7ff",
-    3: "#c9d1ff",
-    4: "#a9b4ff",
-    5: "#8590fe",
-    6: "#6267f3",
-    7: "#4f51e7",
-    8: "#4240d0",
-    9: "#3434ae",
-    10: "#292888",
-    11: "#181854"
+    1: "#eef2ff",
+    2: "#e0e7ff",
+    3: "#c7d2fe",
+    4: "#a5b4fc",
+    5: "#818cf8",
+    6: "#6366f1",
+    7: "#4f46e5",
+    8: "#4338ca",
+    9: "#3730a3",
+    10: "#312e81",
+    11: "#1e1b4b",
+    12: "#12102d"
   },
   violet: {
     1: "#f5f3ff",
-    2: "#ede9ff",
-    3: "#ddd5fe",
-    4: "#c6b8fd",
-    5: "#a893fa",
-    6: "#8a69f7",
-    7: "#7248ec",
-    8: "#6137d6",
-    9: "#4f28ae",
-    10: "#3f218e",
-    11: "#250f58"
+    2: "#ede9fe",
+    3: "#ddd6fe",
+    4: "#c4b5fd",
+    5: "#a78bfa",
+    6: "#8b5cf6",
+    7: "#7c3aed",
+    8: "#6d28d9",
+    9: "#5b21b6",
+    10: "#4c1d95",
+    11: "#2e1065",
+    12: "#1c0a3d"
   },
   purple: {
-    1: "#fbf3ff",
-    2: "#f4e8ff",
-    3: "#e9cfff",
-    4: "#d8adfd",
-    5: "#bf7cfa",
-    6: "#a650f5",
-    7: "#8f30e7",
-    8: "#7c1fce",
-    9: "#671caa",
-    10: "#521885",
-    11: "#300860"
+    1: "#faf5ff",
+    2: "#f3e8ff",
+    3: "#e9d5ff",
+    4: "#d8b4fe",
+    5: "#c084fc",
+    6: "#a855f7",
+    7: "#9333ea",
+    8: "#7e22ce",
+    9: "#6b21a8",
+    10: "#581c87",
+    11: "#3b0764",
+    12: "#23043c"
   },
   fuchsia: {
-    1: "#fef3ff",
-    2: "#fbe8ff",
-    3: "#f6cfff",
-    4: "#efaaff",
-    5: "#e672fb",
-    6: "#d748ef",
-    7: "#be20d3",
-    8: "#a41ab5",
-    9: "#86168e",
-    10: "#631470",
-    11: "#42024a"
+    1: "#fdf4ff",
+    2: "#fae8ff",
+    3: "#f5d0fe",
+    4: "#f0abfc",
+    5: "#e879f9",
+    6: "#d946ef",
+    7: "#c026d3",
+    8: "#a21caf",
+    9: "#86198f",
+    10: "#701a75",
+    11: "#4a044e",
+    12: "#2d022f"
   },
   pink: {
-    1: "#fef2f8",
-    2: "#fde7f3",
-    3: "#fbcde7",
-    4: "#f8a8d1",
-    5: "#f36cb8",
-    6: "#ea3f98",
-    7: "#d4217c",
-    8: "#be1965",
-    9: "#9c1651",
-    10: "#74143e",
-    11: "#450827"
+    1: "#fdf2f8",
+    2: "#fce7f3",
+    3: "#fbcfe8",
+    4: "#f9a8d4",
+    5: "#f472b6",
+    6: "#ec4899",
+    7: "#db2777",
+    8: "#be185d",
+    9: "#9d174d",
+    10: "#831843",
+    11: "#500724",
+    12: "#300415"
   },
   rose: {
-    1: "#fff2f3",
-    2: "#ffe5e8",
-    3: "#ffcacd",
-    4: "#ff9fa7",
-    5: "#fd6b77",
-    6: "#f43e52",
-    7: "#e01e31",
-    8: "#c0152c",
-    9: "#9a1222",
-    10: "#701019",
-    11: "#420611"
+    1: "#fff1f2",
+    2: "#ffe4e6",
+    3: "#fecdd3",
+    4: "#fda4af",
+    5: "#fb7185",
+    6: "#f43f5e",
+    7: "#e11d48",
+    8: "#be123c",
+    9: "#9f1239",
+    10: "#881337",
+    11: "#4c0519",
+    12: "#2d030e"
   }
 };
 var defaultTheme = {
@@ -756,7 +778,18 @@ var MODIFIERS = /* @__PURE__ */ new Set([
   "first-line",
   "marker",
   // Print media modifier
-  "print"
+  "print",
+  // Orientation media modifiers (CSS-injection only)
+  "landscape",
+  "portrait",
+  // Accessibility media modifiers (CSS-injection only)
+  "motion-reduce",
+  "motion-safe",
+  "contrast-more",
+  "contrast-less",
+  // Directionality modifiers (CSS-injection only)
+  "rtl",
+  "ltr"
 ]);
 var UTILITY_PREFIXES = [
   // Multi-word flex
@@ -933,6 +966,7 @@ var UTILITY_PREFIXES = [
   "outline-offset",
   "will-change",
   "mix-blend",
+  "bg-blend",
   "decoration",
   "perspective",
   "tint",
@@ -955,6 +989,8 @@ var UTILITY_PREFIXES = [
   "capitalize",
   "normal-case",
   "antialiased",
+  "subpixel-antialiased",
+  "overflow-ellipsis",
   "truncate",
   "sr-only",
   "not-sr-only",
@@ -1281,6 +1317,20 @@ var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
   "max-h-screen",
   "min-w-screen",
   "max-w-screen",
+  // max-w named container sizes (Tailwind compat)
+  "max-w-none",
+  "max-w-xs",
+  "max-w-sm",
+  "max-w-md",
+  "max-w-lg",
+  "max-w-xl",
+  "max-w-2xl",
+  "max-w-3xl",
+  "max-w-4xl",
+  "max-w-5xl",
+  "max-w-6xl",
+  "max-w-7xl",
+  "max-w-prose",
   // Extended cursors (web-only)
   "cursor-grab",
   "cursor-grabbing",
@@ -1670,6 +1720,8 @@ var STANDALONE = {
   "resize-y": isWeb ? { resize: "vertical" } : null,
   "resize-x": isWeb ? { resize: "horizontal" } : null,
   antialiased: isWeb ? { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" } : null,
+  "subpixel-antialiased": isWeb ? { WebkitFontSmoothing: "subpixel-antialiased", MozOsxFontSmoothing: "auto" } : null,
+  "overflow-ellipsis": isWeb ? { textOverflow: "ellipsis" } : null,
   "sr-only": isWeb ? {
     position: "absolute",
     width: 1,
@@ -1784,6 +1836,20 @@ var STANDALONE = {
   "max-h-screen": { maxHeight: "100vh" },
   "min-w-screen": isWeb ? { minWidth: "100vw" } : null,
   "max-w-screen": isWeb ? { maxWidth: "100vw" } : null,
+  // max-w named container sizes (mirrors Tailwind's container scale)
+  "max-w-none": { maxWidth: "none" },
+  "max-w-xs": { maxWidth: 320 },
+  "max-w-sm": { maxWidth: 384 },
+  "max-w-md": { maxWidth: 448 },
+  "max-w-lg": { maxWidth: 512 },
+  "max-w-xl": { maxWidth: 576 },
+  "max-w-2xl": { maxWidth: 672 },
+  "max-w-3xl": { maxWidth: 768 },
+  "max-w-4xl": { maxWidth: 896 },
+  "max-w-5xl": { maxWidth: 1024 },
+  "max-w-6xl": { maxWidth: 1152 },
+  "max-w-7xl": { maxWidth: 1280 },
+  "max-w-prose": isWeb ? { maxWidth: "65ch" } : null,
   // Extended cursors (web-only)
   "cursor-grab": isWeb ? { cursor: "grab" } : null,
   "cursor-grabbing": isWeb ? { cursor: "grabbing" } : null,
@@ -2523,7 +2589,7 @@ var RESOLVERS = {
     };
     return widths[value] ? { columnWidth: widths[value] } : null;
   },
-  // ── Mix blend mode (web-only) ─────────────────────────────────────────────
+  // ── Mix / background blend mode (web-only) ───────────────────────────────
   "mix-blend": ({ value }) => {
     if (!isWeb) return null;
     const modes = [
@@ -2547,6 +2613,28 @@ var RESOLVERS = {
     ];
     return modes.includes(value) ? { mixBlendMode: value } : null;
   },
+  "bg-blend": ({ value }) => {
+    if (!isWeb) return null;
+    const modes = [
+      "normal",
+      "multiply",
+      "screen",
+      "overlay",
+      "darken",
+      "lighten",
+      "color-dodge",
+      "color-burn",
+      "hard-light",
+      "soft-light",
+      "difference",
+      "exclusion",
+      "hue",
+      "saturation",
+      "color",
+      "luminosity"
+    ];
+    return modes.includes(value) ? { backgroundBlendMode: value } : null;
+  },
   // ── Will-change (web-only) ─────────────────────────────────────────────────
   "will-change": ({ value, isArbitrary }) => {
     if (!isWeb) return null;
@@ -3087,6 +3175,18 @@ var GROUP_PEER_PREFIX = {
 var MODE_MODS = /* @__PURE__ */ new Set(["dark", "light", "not-dark", "not-light"]);
 var RESPONSIVE_MODS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
 var PRINT_MODS = /* @__PURE__ */ new Set(["print"]);
+var MEDIA_MODS = {
+  landscape: "(orientation: landscape)",
+  portrait: "(orientation: portrait)",
+  "motion-reduce": "(prefers-reduced-motion: reduce)",
+  "motion-safe": "(prefers-reduced-motion: no-preference)",
+  "contrast-more": "(prefers-contrast: more)",
+  "contrast-less": "(prefers-contrast: less)"
+};
+var DIR_MODS = {
+  rtl: '[dir="rtl"]',
+  ltr: '[dir="ltr"]'
+};
 function buildDivideDecls(styles) {
   const parts = [];
   if ("__divideX" in styles) {
@@ -3108,12 +3208,12 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
     injectRule(styles.__keyframe);
   }
   const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
-  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
-  if (!cssDecls) return;
   const escaped = escapeCSSSelector(cls);
   const childSuffix = isDivide ? " > * + *" : "";
   if (bucketKey === "base") {
-    injectRule(`.${escaped}${childSuffix} { ${cssDecls} }`);
+    const baseCssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
+    if (!baseCssDecls) return;
+    injectRule(`.${escaped}${childSuffix} { ${baseCssDecls} }`);
     return;
   }
   const mods = bucketKey.split(":");
@@ -3122,12 +3222,29 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
   const hasDark = nonResponsiveMods.includes("dark") || nonResponsiveMods.includes("not-light");
   const hasLight = nonResponsiveMods.includes("light") || nonResponsiveMods.includes("not-dark");
   const hasPrint = nonResponsiveMods.includes("print");
+  const mediaMods = nonResponsiveMods.filter((m) => m in MEDIA_MODS);
+  const dirMods = nonResponsiveMods.filter((m) => m in DIR_MODS);
   const ancestorMods = nonResponsiveMods.filter((m) => m in GROUP_PEER_PREFIX);
-  const pseudoMods = nonResponsiveMods.filter((m) => !MODE_MODS.has(m) && !(m in GROUP_PEER_PREFIX) && !PRINT_MODS.has(m));
+  const pseudoMods = nonResponsiveMods.filter(
+    (m) => !MODE_MODS.has(m) && !(m in GROUP_PEER_PREFIX) && !PRINT_MODS.has(m) && !(m in MEDIA_MODS) && !(m in DIR_MODS)
+  );
   const pseudoSuffix = pseudoMods.map((p) => MODIFIER_TO_PSEUDO[p] ?? `:${p}`).join("");
   const elementSelector = `.${escaped}${pseudoSuffix}${childSuffix}`;
   const ancestorPrefix = ancestorMods.length ? ancestorMods.map((m) => GROUP_PEER_PREFIX[m]).join(" ") + " " : "";
-  const selector = `${ancestorPrefix}${elementSelector}`;
+  const dirPrefix = dirMods.length ? dirMods.map((m) => DIR_MODS[m]).join(" ") + " " : "";
+  const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
+  const CSS_ONLY_PSEUDOS = /* @__PURE__ */ new Set([
+    "first",
+    "last",
+    "odd",
+    "even",
+    "only",
+    "focus-within",
+    "focus-visible"
+  ]);
+  const needsImportant = important || hasPrint || mediaMods.length > 0 || dirMods.length > 0 || ancestorMods.length > 0 || pseudoMods.some((m) => CSS_ONLY_PSEUDOS.has(m));
+  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
+  if (!cssDecls) return;
   let rule;
   if (hasDark) {
     if (darkMode === "media") {
@@ -3151,6 +3268,9 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
   if (hasPrint) {
     rule = `@media print { ${rule} }`;
   }
+  for (const m of mediaMods) {
+    rule = `@media ${MEDIA_MODS[m]} { ${rule} }`;
+  }
   if (responsiveMods.length > 0) {
     const screens = getGlobalScreens();
     const minWidth = Math.max(...responsiveMods.map((m) => screens[m] ?? 0));
@@ -3247,9 +3367,19 @@ function resolve(classString, theme, darkMode = "attribute") {
   return result;
 }
 function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new Set()) {
-  const result = { ...resolved.base ?? {} };
-  for (const [key, styles] of Object.entries(resolved)) {
-    if (key === "base" || !styles) continue;
+  const result = {};
+  const entries = Object.entries(resolved);
+  entries.sort((a, b) => {
+    const pa = a[0] === "base" ? -1 : a[0].split(":").length;
+    const pb = b[0] === "base" ? -1 : b[0].split(":").length;
+    return pa - pb;
+  });
+  for (const [key, styles] of entries) {
+    if (!styles) continue;
+    if (key === "base") {
+      Object.assign(result, styles);
+      continue;
+    }
     const mods = key.split(":");
     if (matchesMods(mods, isDark, state, breakpoints)) {
       Object.assign(result, styles);
@@ -3301,6 +3431,17 @@ function matchesMods(mods, isDark, state, breakpoints) {
       case "xl":
       case "2xl":
         return breakpoints.has(mod);
+      // CSS-only modifiers — never applied as inline styles
+      case "print":
+      case "landscape":
+      case "portrait":
+      case "motion-reduce":
+      case "motion-safe":
+      case "contrast-more":
+      case "contrast-less":
+      case "rtl":
+      case "ltr":
+        return false;
       default:
         return false;
     }