@kbach/react 0.6.37 → 0.6.40

package/dist/core/index.d.ts

@@ -9,6 +9,22 @@
  * Plugin authors can register custom modifiers via registerModifier().
  */
 interface ModifierDef {
+    /**
+     * Cascade priority for CSS rule ORDER — NOT specificity. Two rules that
+     * differ only by modifier (e.g. `.hover\:bg-blue-6:hover` and
+     * `.focus\:bg-red-6:focus`) have equal CSS specificity, so when both
+     * conditions are true at once (hovering AND focused), the winner is
+     * whichever rule appears LATER in the stylesheet — CSS's normal same-
+     * specificity tiebreak. Without a fixed priority, "later" would depend on
+     * encounter order (whichever class the app happens to render/scan first),
+     * making the winner effectively random and inconsistent across reloads/
+     * builds. `order` fixes that: rules are emitted/injected sorted by this
+     * value (ascending — higher wins ties), regardless of source order, so
+     * e.g. `disabled:` always beats `hover:` on the same element no matter
+     * which one was written first in the className or rendered first in the
+     * app. Omit for the default (0). See getModifierOrder() below.
+     */
+    order?: number;
     /** CSS pseudo-class or pseudo-element appended to the selector (e.g. ':hover', '::before') */
     pseudo?: string;
     /** Ancestor selector prefix INCLUDING trailing space (e.g. '.group:hover ', '.peer:focus ~ ') */
@@ -1247,14 +1263,6 @@ declare function updateConfig(userConfig: FrameworkConfig): void;
  *  - Fast Refresh DOES re-run when kbach.config.js changes (new module → new object)
  */
 declare function initConfig(userConfig: FrameworkConfig): void;
-/**
- * Custom variants registered via plugins (modifier name → CSS selector template).
- * A direct reference to configStore.customVariants rather than a copy — the
- * object itself is only ever mutated in place (keys added in addVariant()
- * above, cleared in buildConfig()), never reassigned, so this binding always
- * reflects the current set.
- */
-declare const customVariants: Record<string, string>;
 
 /**
  * Module-level dark-mode singleton.
@@ -1335,4 +1343,4 @@ declare function subscribeGlobalWidth(listener: WidthListener): () => void;
  */
 declare function getActiveBreakpoints(width?: number, screens?: Record<string, number>): Set<string>;
 
-export { BASE_RESET, type ColorShades, type ColorValue, type DarkMode, type DefaultColorName, type DefaultSpacingKey, type FrameworkConfig, LRUCache, type ParsedClass, type Platform, type PluginAPI, RESET_STYLE_ID, type ResolvedConfig, type ResolvedStyle, type StyleValue, type ThemeColors, type ThemeConfig, type ThemeMode, type ThemeSpacing, buildConfig, clearCache, clearPluginModifiers, customVariants, defaultColors, defaultTheme, disableRuntimeCSS, escapeCSSSelector, expandModeAwareColorClasses, flatten, generateClassCSS, generateKbachTypesDts, getActiveBreakpoints, getAllModifierNames, getBuiltinStandaloneNames, getBuiltinUtilityPrefixes, getConfig, getDefaultFontFamily, getEffectiveIsWeb, getGlobalDarkMode, getGlobalScreens, getGlobalWidth, getInteractiveModifiers, getModeModifiers, getModifier, getResponsiveModifiers, initConfig, isKnownModifier, isKnownUtility, isModeAwareColor, isNative, isRuntimeCSSDisabled, isWeb, kbachWarn, matchModifier, normalizeClassString, onConfigChange, parseClass, parseClasses, parseHexRgb, registerModifier, resetConfig, resolve, resolveColor, resolveSizing, resolveSpacing, resolveUtility, setDefaultFontFamily, setGlobalDarkMode, setGlobalWidth, setResolveTarget, splitClassTokens, subscribeGlobalDarkMode, subscribeGlobalWidth, syncGlobalDarkMode, syncGlobalScreens, syncGlobalWidth, toNativeValue, updateConfig };
+export { BASE_RESET, type ColorShades, type ColorValue, type DarkMode, type DefaultColorName, type DefaultSpacingKey, type FrameworkConfig, LRUCache, type ParsedClass, type Platform, type PluginAPI, RESET_STYLE_ID, type ResolvedConfig, type ResolvedStyle, type StyleValue, type ThemeColors, type ThemeConfig, type ThemeMode, type ThemeSpacing, buildConfig, clearCache, clearPluginModifiers, defaultColors, defaultTheme, disableRuntimeCSS, escapeCSSSelector, expandModeAwareColorClasses, flatten, generateClassCSS, generateKbachTypesDts, getActiveBreakpoints, getAllModifierNames, getBuiltinStandaloneNames, getBuiltinUtilityPrefixes, getConfig, getDefaultFontFamily, getEffectiveIsWeb, getGlobalDarkMode, getGlobalScreens, getGlobalWidth, getInteractiveModifiers, getModeModifiers, getModifier, getResponsiveModifiers, initConfig, isKnownModifier, isKnownUtility, isModeAwareColor, isNative, isRuntimeCSSDisabled, isWeb, kbachWarn, matchModifier, normalizeClassString, onConfigChange, parseClass, parseClasses, parseHexRgb, registerModifier, resetConfig, resolve, resolveColor, resolveSizing, resolveSpacing, resolveUtility, setDefaultFontFamily, setGlobalDarkMode, setGlobalWidth, setResolveTarget, splitClassTokens, subscribeGlobalDarkMode, subscribeGlobalWidth, syncGlobalDarkMode, syncGlobalScreens, syncGlobalWidth, toNativeValue, updateConfig };

package/dist/core/index.js

@@ -26,7 +26,6 @@ __export(index_exports, {
   buildConfig: () => buildConfig,
   clearCache: () => clearCache,
   clearPluginModifiers: () => clearPluginModifiers,
-  customVariants: () => customVariants,
   defaultColors: () => defaultColors,
   defaultTheme: () => defaultTheme,
   disableRuntimeCSS: () => disableRuntimeCSS,
@@ -89,6 +88,11 @@ module.exports = __toCommonJS(index_exports);
 function isModeAwareColor(v) {
   return typeof v === "object" && v !== null && "light" in v && "dark" in v;
 }
+function splitColorShadeRef(ref) {
+  const lastDash = ref.lastIndexOf("-");
+  if (lastDash <= 0) return null;
+  return { name: ref.slice(0, lastDash), shade: ref.slice(lastDash + 1) };
+}
 
 // src/core/platform.ts
 var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
@@ -165,64 +169,64 @@ var LRUCache = class {
 // src/core/registry.ts
 var BUILTIN_MODIFIERS = {
   // ── Mode ─────────────────────────────────────────────────────────────────
-  dark: { darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
-  "not-light": { darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
-  light: { darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
-  "not-dark": { darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
+  dark: { order: 60, darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
+  "not-light": { order: 60, darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
+  light: { order: 60, darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
+  "not-dark": { order: 60, darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
   // ── Interactive — JS state + CSS pseudo ───────────────────────────────────
-  hover: { pseudo: ":hover", jsBehavior: "interactive", jsMatch: (_, s) => !!s.hover },
-  "not-hover": { pseudo: ":not(:hover)", jsBehavior: "interactive", jsMatch: (_, s) => !s.hover },
-  focus: { pseudo: ":focus", jsBehavior: "interactive", jsMatch: (_, s) => !!s.focus },
-  "not-focus": { pseudo: ":not(:focus)", jsBehavior: "interactive", jsMatch: (_, s) => !s.focus },
-  active: { pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.active || !!s.pressed },
-  "not-active": { pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.active && !s.pressed },
-  pressed: { pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.pressed || !!s.active },
-  "not-pressed": { pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.pressed && !s.active },
-  disabled: { pseudo: ":disabled", jsBehavior: "interactive", jsMatch: (_, s) => !!s.disabled },
-  "not-disabled": { pseudo: ":not(:disabled)", jsBehavior: "interactive", jsMatch: (_, s) => !s.disabled },
-  checked: { pseudo: ":checked", jsBehavior: "interactive", jsMatch: (_, s) => !!s.checked },
-  "not-checked": { pseudo: ":not(:checked)", jsBehavior: "interactive", jsMatch: (_, s) => !s.checked },
-  visited: { pseudo: ":visited", jsBehavior: "interactive", jsMatch: (_, s) => !!s.visited },
-  "not-visited": { pseudo: ":not(:visited)", jsBehavior: "interactive", jsMatch: (_, s) => !s.visited },
-  placeholder: { pseudo: "::placeholder", jsBehavior: "interactive", jsMatch: (_, s) => !!s.placeholder },
+  hover: { order: 10, pseudo: ":hover", jsBehavior: "interactive", jsMatch: (_, s) => !!s.hover },
+  "not-hover": { order: 10, pseudo: ":not(:hover)", jsBehavior: "interactive", jsMatch: (_, s) => !s.hover },
+  focus: { order: 20, pseudo: ":focus", jsBehavior: "interactive", jsMatch: (_, s) => !!s.focus },
+  "not-focus": { order: 20, pseudo: ":not(:focus)", jsBehavior: "interactive", jsMatch: (_, s) => !s.focus },
+  active: { order: 30, pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.active || !!s.pressed },
+  "not-active": { order: 30, pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.active && !s.pressed },
+  pressed: { order: 30, pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.pressed || !!s.active },
+  "not-pressed": { order: 30, pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.pressed && !s.active },
+  disabled: { order: 40, pseudo: ":disabled", jsBehavior: "interactive", jsMatch: (_, s) => !!s.disabled },
+  "not-disabled": { order: 40, pseudo: ":not(:disabled)", jsBehavior: "interactive", jsMatch: (_, s) => !s.disabled },
+  checked: { order: 35, pseudo: ":checked", jsBehavior: "interactive", jsMatch: (_, s) => !!s.checked },
+  "not-checked": { order: 35, pseudo: ":not(:checked)", jsBehavior: "interactive", jsMatch: (_, s) => !s.checked },
+  visited: { order: 5, pseudo: ":visited", jsBehavior: "interactive", jsMatch: (_, s) => !!s.visited },
+  "not-visited": { order: 5, pseudo: ":not(:visited)", jsBehavior: "interactive", jsMatch: (_, s) => !s.visited },
+  placeholder: { order: 0, pseudo: "::placeholder", jsBehavior: "interactive", jsMatch: (_, s) => !!s.placeholder },
   // ── CSS-only pseudo-classes (structural) ──────────────────────────────────
-  first: { pseudo: ":first-child", jsBehavior: "css-only", forcesImportant: true },
-  last: { pseudo: ":last-child", jsBehavior: "css-only", forcesImportant: true },
-  odd: { pseudo: ":nth-child(odd)", jsBehavior: "css-only", forcesImportant: true },
-  even: { pseudo: ":nth-child(even)", jsBehavior: "css-only", forcesImportant: true },
-  only: { pseudo: ":only-child", jsBehavior: "css-only", forcesImportant: true },
-  "focus-within": { pseudo: ":focus-within", jsBehavior: "css-only", forcesImportant: true },
-  "focus-visible": { pseudo: ":focus-visible", jsBehavior: "css-only", forcesImportant: true },
+  first: { order: 0, pseudo: ":first-child", jsBehavior: "css-only", forcesImportant: true },
+  last: { order: 0, pseudo: ":last-child", jsBehavior: "css-only", forcesImportant: true },
+  odd: { order: 0, pseudo: ":nth-child(odd)", jsBehavior: "css-only", forcesImportant: true },
+  even: { order: 0, pseudo: ":nth-child(even)", jsBehavior: "css-only", forcesImportant: true },
+  only: { order: 0, pseudo: ":only-child", jsBehavior: "css-only", forcesImportant: true },
+  "focus-within": { order: 15, pseudo: ":focus-within", jsBehavior: "css-only", forcesImportant: true },
+  "focus-visible": { order: 25, pseudo: ":focus-visible", jsBehavior: "css-only", forcesImportant: true },
   // ── CSS-only pseudo-elements ───────────────────────────────────────────────
-  before: { pseudo: "::before", jsBehavior: "css-only" },
-  after: { pseudo: "::after", jsBehavior: "css-only" },
-  selection: { pseudo: "::selection", jsBehavior: "css-only" },
-  "first-letter": { pseudo: "::first-letter", jsBehavior: "css-only" },
-  "first-line": { pseudo: "::first-line", jsBehavior: "css-only" },
-  marker: { pseudo: "::marker", jsBehavior: "css-only" },
+  before: { order: 0, pseudo: "::before", jsBehavior: "css-only" },
+  after: { order: 0, pseudo: "::after", jsBehavior: "css-only" },
+  selection: { order: 0, pseudo: "::selection", jsBehavior: "css-only" },
+  "first-letter": { order: 0, pseudo: "::first-letter", jsBehavior: "css-only" },
+  "first-line": { order: 0, pseudo: "::first-line", jsBehavior: "css-only" },
+  marker: { order: 0, pseudo: "::marker", jsBehavior: "css-only" },
   // ── Group / peer ancestor selectors (CSS-only) ─────────────────────────────
-  "group-hover": { ancestorSelector: ".group:hover ", jsBehavior: "css-only", forcesImportant: true },
-  "group-focus": { ancestorSelector: ".group:focus ", jsBehavior: "css-only", forcesImportant: true },
-  "peer-hover": { ancestorSelector: ".peer:hover ~ ", jsBehavior: "css-only", forcesImportant: true },
-  "peer-focus": { ancestorSelector: ".peer:focus ~ ", jsBehavior: "css-only", forcesImportant: true },
+  "group-hover": { order: 10, ancestorSelector: ".group:hover ", jsBehavior: "css-only", forcesImportant: true },
+  "group-focus": { order: 20, ancestorSelector: ".group:focus ", jsBehavior: "css-only", forcesImportant: true },
+  "peer-hover": { order: 10, ancestorSelector: ".peer:hover ~ ", jsBehavior: "css-only", forcesImportant: true },
+  "peer-focus": { order: 20, ancestorSelector: ".peer:focus ~ ", jsBehavior: "css-only", forcesImportant: true },
   // ── Responsive — both CSS (@media min-width) and JS (breakpoints set) ──────
-  sm: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("sm") },
-  md: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("md") },
-  lg: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("lg") },
-  xl: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("xl") },
-  "2xl": { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("2xl") },
+  sm: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("sm") },
+  md: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("md") },
+  lg: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("lg") },
+  xl: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("xl") },
+  "2xl": { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("2xl") },
   // ── Print media (CSS-only) ─────────────────────────────────────────────────
-  print: { mediaQuery: "print", jsBehavior: "css-only", forcesImportant: true },
+  print: { order: 70, mediaQuery: "print", jsBehavior: "css-only", forcesImportant: true },
   // ── Orientation / accessibility media (CSS-only) ───────────────────────────
-  landscape: { mediaQuery: "(orientation: landscape)", jsBehavior: "css-only", forcesImportant: true },
-  portrait: { mediaQuery: "(orientation: portrait)", jsBehavior: "css-only", forcesImportant: true },
-  "motion-reduce": { mediaQuery: "(prefers-reduced-motion: reduce)", jsBehavior: "css-only", forcesImportant: true },
-  "motion-safe": { mediaQuery: "(prefers-reduced-motion: no-preference)", jsBehavior: "css-only", forcesImportant: true },
-  "contrast-more": { mediaQuery: "(prefers-contrast: more)", jsBehavior: "css-only", forcesImportant: true },
-  "contrast-less": { mediaQuery: "(prefers-contrast: less)", jsBehavior: "css-only", forcesImportant: true },
+  landscape: { order: 70, mediaQuery: "(orientation: landscape)", jsBehavior: "css-only", forcesImportant: true },
+  portrait: { order: 70, mediaQuery: "(orientation: portrait)", jsBehavior: "css-only", forcesImportant: true },
+  "motion-reduce": { order: 70, mediaQuery: "(prefers-reduced-motion: reduce)", jsBehavior: "css-only", forcesImportant: true },
+  "motion-safe": { order: 70, mediaQuery: "(prefers-reduced-motion: no-preference)", jsBehavior: "css-only", forcesImportant: true },
+  "contrast-more": { order: 70, mediaQuery: "(prefers-contrast: more)", jsBehavior: "css-only", forcesImportant: true },
+  "contrast-less": { order: 70, mediaQuery: "(prefers-contrast: less)", jsBehavior: "css-only", forcesImportant: true },
   // ── Directionality (CSS-only) ──────────────────────────────────────────────
-  rtl: { dirSelector: '[dir="rtl"] ', jsBehavior: "css-only", forcesImportant: true },
-  ltr: { dirSelector: '[dir="ltr"] ', jsBehavior: "css-only", forcesImportant: true }
+  rtl: { order: 80, dirSelector: '[dir="rtl"] ', jsBehavior: "css-only", forcesImportant: true },
+  ltr: { order: 80, dirSelector: '[dir="ltr"] ', jsBehavior: "css-only", forcesImportant: true }
 };
 var _pluginModifiers = {};
 var _allNames = null;
@@ -259,6 +263,8 @@ function getNamedGroupPeerModifier(name) {
   const pseudo = trigger === "hover" ? ":hover" : ":focus";
   const combinator = kind === "group" ? " " : " ~ ";
   const def = {
+    // Matches the plain group-hover/group-focus/peer-hover/peer-focus order below.
+    order: trigger === "hover" ? 10 : 20,
     ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
     jsBehavior: "css-only",
     forcesImportant: true
@@ -297,6 +303,15 @@ function getResponsiveModifiers() {
   }
   return _responsiveNames;
 }
+function getModifierOrder(bucketKey) {
+  if (bucketKey === "base") return -1;
+  let max = 0;
+  for (const mod of bucketKey.split(":")) {
+    const order = getModifier(mod)?.order ?? 0;
+    if (order > max) max = order;
+  }
+  return max;
+}
 function matchModifier(name, isDark, state, breakpoints) {
   return getModifier(name)?.jsMatch?.(isDark, state, breakpoints) ?? false;
 }
@@ -319,13 +334,11 @@ function resolveColor(value, colors, isArbitrary) {
     else if (isModeAwareColor(entry)) hex = pickModeAwareFallback(entry);
     else if (typeof entry === "object" && "6" in entry) hex = pickModeAwareFallback(entry["6"]);
   } else {
-    const lastDash = colorPart.lastIndexOf("-");
-    if (lastDash > 0) {
-      const colorName = colorPart.slice(0, lastDash);
-      const shade = colorPart.slice(lastDash + 1);
-      const scale = colors[colorName];
-      if (scale && typeof scale === "object" && !isModeAwareColor(scale) && shade in scale) {
-        const shadeVal = scale[shade];
+    const split = splitColorShadeRef(colorPart);
+    if (split) {
+      const scale = colors[split.name];
+      if (scale && typeof scale === "object" && !isModeAwareColor(scale) && split.shade in scale) {
+        const shadeVal = scale[split.shade];
         hex = shadeVal !== void 0 ? pickModeAwareFallback(shadeVal) : null;
       }
     }
@@ -466,6 +479,7 @@ function resolveSpacing(value, negative, spacing, isArbitrary) {
     if (negative) {
       if (typeof resolved === "number") return -resolved;
       if (typeof resolved === "string") {
+        if (resolved.startsWith("-")) return resolved.slice(1);
         if (/^\d/.test(resolved)) return `-${resolved}`;
         if (/^(calc|var|min|max|clamp|env)\s*\(/.test(resolved)) return `calc(-1 * (${resolved}))`;
       }
@@ -644,7 +658,7 @@ function makeBorderSideResolver(widthProp, colorProp) {
     if (!value) return { [widthProp]: 1 };
     if (isArbitrary) {
       const w2 = toNativeValue(value);
-      if (typeof w2 === "number") return { [widthProp]: w2 };
+      if (typeof w2 === "number") return { [widthProp]: getEffectiveIsWeb() ? value : w2 };
       return { [colorProp]: value };
     }
     const color = resolveColor(value, colors, false);
@@ -665,7 +679,7 @@ var borderResolvers = {
     if (!value) return { borderWidth: borderWidth["DEFAULT"] ?? 1 };
     if (isArbitrary) {
       const w2 = toNativeValue(value);
-      if (typeof w2 === "number") return { borderWidth: w2 };
+      if (typeof w2 === "number") return { borderWidth: getEffectiveIsWeb() ? value : w2 };
       return { borderColor: value };
     }
     const color = resolveColor(value, colors, false);
@@ -864,9 +878,9 @@ var filterResolvers = {
     const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-contrast": v, filter: FILTER_COMPOSE };
   },
-  grayscale: ({ value }) => {
+  grayscale: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = value === "0" ? "grayscale(0)" : "grayscale(100%)";
+    const v = isArbitrary ? `grayscale(${value})` : value === "0" ? "grayscale(0)" : "grayscale(100%)";
     return { "--kb-grayscale": v, filter: FILTER_COMPOSE };
   },
   "hue-rotate": ({ value, negative, isArbitrary }) => {
@@ -875,9 +889,9 @@ var filterResolvers = {
     if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
     return { "--kb-hue-rotate": `hue-rotate(${deg})`, filter: FILTER_COMPOSE };
   },
-  invert: ({ value }) => {
+  invert: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = value === "0" ? "invert(0)" : "invert(100%)";
+    const v = isArbitrary ? `invert(${value})` : value === "0" ? "invert(0)" : "invert(100%)";
     return { "--kb-invert": v, filter: FILTER_COMPOSE };
   },
   saturate: ({ value, isArbitrary }) => {
@@ -885,9 +899,9 @@ var filterResolvers = {
     const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-saturate": v, filter: FILTER_COMPOSE };
   },
-  sepia: ({ value }) => {
+  sepia: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = value === "0" ? "sepia(0)" : "sepia(100%)";
+    const v = isArbitrary ? `sepia(${value})` : value === "0" ? "sepia(0)" : "sepia(100%)";
     return { "--kb-sepia": v, filter: FILTER_COMPOSE };
   },
   "drop-shadow": ({ value, isArbitrary }) => {
@@ -938,9 +952,10 @@ var filterResolvers = {
     const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-contrast": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
-  "backdrop-grayscale": ({ value }) => {
+  "backdrop-grayscale": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    return { "--kb-backdrop-grayscale": value === "0" ? "grayscale(0)" : "grayscale(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+    const v = isArbitrary ? `grayscale(${value})` : value === "0" ? "grayscale(0)" : "grayscale(100%)";
+    return { "--kb-backdrop-grayscale": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-hue-rotate": ({ value, negative, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -948,9 +963,10 @@ var filterResolvers = {
     if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
     return { "--kb-backdrop-hue-rotate": `hue-rotate(${deg})`, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
-  "backdrop-invert": ({ value }) => {
+  "backdrop-invert": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    return { "--kb-backdrop-invert": value === "0" ? "invert(0)" : "invert(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+    const v = isArbitrary ? `invert(${value})` : value === "0" ? "invert(0)" : "invert(100%)";
+    return { "--kb-backdrop-invert": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-opacity": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -962,9 +978,10 @@ var filterResolvers = {
     const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-saturate": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
-  "backdrop-sepia": ({ value }) => {
+  "backdrop-sepia": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    return { "--kb-backdrop-sepia": value === "0" ? "sepia(0)" : "sepia(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+    const v = isArbitrary ? `sepia(${value})` : value === "0" ? "sepia(0)" : "sepia(100%)";
+    return { "--kb-backdrop-sepia": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-filter": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1034,8 +1051,8 @@ var filterResolvers = {
 
 // src/core/resolvers/layout.ts
 var _standalone = null;
-function buildStandalone() {
-  const web = getEffectiveIsWeb();
+var _standaloneWeb = null;
+function buildStandalone(web) {
   return {
     // Display
     // React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
@@ -1050,7 +1067,6 @@ function buildStandalone() {
     "inline-block": { display: web ? "inline-block" : "flex" },
     inline: { display: web ? "inline" : "flex" },
     grid: web ? { display: "grid" } : null,
-    grd: web ? { display: "grid" } : null,
     "inline-flex": { display: web ? "inline-flex" : "flex" },
     "inline-grid": { display: web ? "inline-grid" : "flex" },
     hidden: { display: "none" },
@@ -1402,7 +1418,11 @@ function buildStandalone() {
   };
 }
 function getStandalone() {
-  if (!_standalone) _standalone = buildStandalone();
+  const web = getEffectiveIsWeb();
+  if (!_standalone || _standaloneWeb !== web) {
+    _standalone = buildStandalone(web);
+    _standaloneWeb = web;
+  }
   return _standalone;
 }
 var layoutResolvers = {
@@ -1966,6 +1986,18 @@ var effectResolvers = {
     if (!isArbitrary && isNaN(parseFloat(value))) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
+  },
+  ease: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { transitionTimingFunction: value };
+    const presets = {
+      linear: "linear",
+      in: "cubic-bezier(0.4, 0, 1, 1)",
+      out: "cubic-bezier(0, 0, 0.2, 1)",
+      "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+    };
+    const v = presets[value];
+    return v !== void 0 ? { transitionTimingFunction: v } : null;
   }
 };
 
@@ -3015,9 +3047,21 @@ function getDefaultFontFamily() {
 }
 var _styleEl = null;
 var _ruleIndexByKey = /* @__PURE__ */ new Map();
+var _sheetKeys = [];
+var _ruleOrderByKey = /* @__PURE__ */ new Map();
+function findInsertionIndex(order) {
+  let lo = 0, hi = _sheetKeys.length;
+  while (lo < hi) {
+    const mid = lo + hi >>> 1;
+    if (_ruleOrderByKey.get(_sheetKeys[mid]) > order) hi = mid;
+    else lo = mid + 1;
+  }
+  return lo;
+}
 function evictInjectedRule(rule) {
   const idx = _ruleIndexByKey.get(rule);
   _ruleIndexByKey.delete(rule);
+  _ruleOrderByKey.delete(rule);
   if (idx === void 0) return;
   const sheet = _styleEl?.sheet;
   if (!sheet) return;
@@ -3026,6 +3070,7 @@ function evictInjectedRule(rule) {
   } catch {
     return;
   }
+  _sheetKeys.splice(idx, 1);
   for (const [key, i] of _ruleIndexByKey) {
     if (i > idx) _ruleIndexByKey.set(key, i - 1);
   }
@@ -3045,15 +3090,20 @@ function getStyleEl() {
   document.head.appendChild(_styleEl);
   return _styleEl;
 }
-function injectRule(rule) {
+function injectRule(rule, order) {
   if (isRuntimeCSSDisabled()) return;
   if (_injectedRules.get(rule)) return;
   try {
     const sheet = getStyleEl().sheet;
     if (sheet) {
-      const idx = sheet.cssRules.length;
+      const idx = findInsertionIndex(order);
       sheet.insertRule(rule, idx);
+      _sheetKeys.splice(idx, 0, rule);
+      for (const [key, i] of _ruleIndexByKey) {
+        if (i >= idx) _ruleIndexByKey.set(key, i + 1);
+      }
       _ruleIndexByKey.set(rule, idx);
+      _ruleOrderByKey.set(rule, order);
       _injectedRules.set(rule, true);
     }
   } catch {
@@ -3245,9 +3295,10 @@ function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens
   rules.push(rule);
   return rules;
 }
-function injectClassRule(cls, bucketKey, styles, darkMode, important) {
+function injectClassRule(cls, bucketKey, styles, darkMode, important, order) {
   const cssRules = buildClassCSSRules(cls, bucketKey, styles, darkMode, important, getGlobalScreens());
-  for (const r of cssRules) injectRule(r);
+  for (const r of cssRules) injectRule(r, order);
+  return cssRules;
 }
 function generateClassCSS(classString, theme, darkMode = "attribute", screens = {}) {
   const rules = [];
@@ -3261,10 +3312,16 @@ function generateClassCSS(classString, theme, darkMode = "attribute", screens =
 }
 function resolve(classString, theme, darkMode = "attribute") {
   const cache = getThemeCache(theme);
-  const cacheKey = `${classString}::${darkMode}`;
+  const cacheKey = `${classString}::${darkMode}::${getEffectiveIsWeb() ? "web" : "native"}`;
   const cached = cache.get(cacheKey);
-  if (cached) return cached;
+  if (cached) {
+    if (isWeb) {
+      for (const { rule, order } of cached.rules) injectRule(rule, order);
+    }
+    return cached.result;
+  }
   const result = {};
+  const rules = [];
   const onWeb = isWeb;
   for (const parsed of parseClasses(expandModeAwareColorClasses(classString, theme.colors))) {
     const styles = resolveUtility(parsed, theme);
@@ -3278,10 +3335,13 @@ function resolve(classString, theme, darkMode = "attribute") {
     if (!result[bucketKey]) result[bucketKey] = {};
     Object.assign(result[bucketKey], styles);
     if (onWeb) {
-      injectClassRule(parsed.original, bucketKey, styles, darkMode, parsed.important);
+      const order = getModifierOrder(bucketKey);
+      for (const r of injectClassRule(parsed.original, bucketKey, styles, darkMode, parsed.important, order)) {
+        rules.push({ rule: r, order });
+      }
     }
   }
-  cache.set(cacheKey, result);
+  cache.set(cacheKey, { result, rules });
   return result;
 }
 function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new Set()) {
@@ -3335,6 +3395,8 @@ function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new
 function clearCache() {
   _injectedRules.clear();
   _ruleIndexByKey.clear();
+  _ruleOrderByKey.clear();
+  _sheetKeys.length = 0;
   if (_styleEl) {
     _styleEl.remove();
     _styleEl = null;
@@ -3362,7 +3424,7 @@ function deepMerge(base, override) {
   }
   return result;
 }
-var configStore = { resolved: null, listeners: /* @__PURE__ */ new Set(), customVariants: {} };
+var configStore = { resolved: null, listeners: /* @__PURE__ */ new Set() };
 function getConfig() {
   if (configStore.resolved) return configStore.resolved;
   configStore.resolved = buildConfig({});
@@ -3404,10 +3466,9 @@ function resolveColorRefs(colors) {
       const a = opacity > 1 ? opacity / 100 : opacity;
       return hexToRgba(baseHex, a);
     }
-    const lastDash = ref.lastIndexOf("-");
-    if (lastDash <= 0) return null;
-    const name = ref.slice(0, lastDash);
-    const shade = ref.slice(lastDash + 1);
+    const split = splitColorShadeRef(ref);
+    if (!split) return null;
+    const { name, shade } = split;
     if (!/^\d+$/.test(shade)) return null;
     const entry = colors[name];
     if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
@@ -3469,7 +3530,6 @@ function buildConfig(userConfig) {
     clearPluginUtilities();
     clearPluginModifiers();
   }
-  for (const k of Object.keys(configStore.customVariants)) delete configStore.customVariants[k];
   const pluginAPI = makePluginAPI(resolved.theme);
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
@@ -3498,8 +3558,6 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? null;
-      if (selector !== null && selector !== name) customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {
@@ -3532,7 +3590,6 @@ function initConfig(userConfig) {
   if (configStore._src === userConfig) return;
   updateConfig(userConfig);
 }
-var customVariants = configStore.customVariants;
 
 // src/core/darkModeStore.ts
 var store2 = { isDark: false, notifiedIsDark: false, subscribers: /* @__PURE__ */ new Set() };
@@ -3560,7 +3617,6 @@ function subscribeGlobalDarkMode(callback) {
   buildConfig,
   clearCache,
   clearPluginModifiers,
-  customVariants,
   defaultColors,
   defaultTheme,
   disableRuntimeCSS,