@pandacss/preset-base 0.41.0 → 0.42.0

package/dist/index.mjs

@@ -589,27 +589,27 @@ var createColorMixTransform = (prop) => (value, args) => {
 var background = {
   backgroundPosition: {
     shorthand: "bgPosition",
-    className: "bg-pos",
+    className: "bg-p",
     group: "Background"
   },
   backgroundPositionX: {
     shorthand: "bgPositionX",
-    className: "bg-pos-x",
+    className: "bg-p-x",
     group: "Background"
   },
   backgroundPositionY: {
     shorthand: "bgPositionY",
-    className: "bg-pos-y",
+    className: "bg-p-y",
     group: "Background"
   },
   backgroundAttachment: {
     shorthand: "bgAttachment",
-    className: "bg-attach",
+    className: "bg-a",
     group: "Background"
   },
   backgroundClip: {
     shorthand: "bgClip",
-    className: "bg-clip",
+    className: "bg-cp",
     group: "Background",
     transform(value) {
       return {
@@ -627,73 +627,74 @@ var background = {
   },
   backgroundColor: {
     shorthand: "bgColor",
-    className: "bg",
+    className: "bg-c",
     values: "colors",
     group: "Background",
     transform: createColorMixTransform("backgroundColor")
   },
   backgroundOrigin: {
     shorthand: "bgOrigin",
-    className: "bg-origin",
+    className: "bg-o",
     group: "Background"
   },
   backgroundImage: {
     shorthand: "bgImage",
-    className: "bg-img",
+    className: "bg-i",
     values: "assets",
     group: "Background"
   },
   backgroundRepeat: {
     shorthand: "bgRepeat",
-    className: "bg-repeat",
+    className: "bg-r",
     group: "Background"
   },
   backgroundBlendMode: {
     shorthand: "bgBlendMode",
-    className: "bg-blend",
+    className: "bg-bm",
     group: "Background"
   },
   backgroundSize: {
     shorthand: "bgSize",
-    className: "bg-size",
+    className: "bg-s",
     group: "Background"
   }
 };
 
 // src/utilities/border.ts
 var border = {
+  // Border Radius
   borderRadius: {
-    className: "rounded",
+    className: "bdr",
     shorthand: "rounded",
     values: "radii",
     group: "Border Radius"
   },
   borderTopLeftRadius: {
-    className: "rounded-tl",
+    className: "bdr-tl",
     shorthand: "roundedTopLeft",
     values: "radii",
     group: "Border Radius"
   },
   borderTopRightRadius: {
-    className: "rounded-tr",
+    className: "bdr-tr",
     shorthand: "roundedTopRight",
     values: "radii",
     group: "Border Radius"
   },
   borderBottomRightRadius: {
-    className: "rounded-br",
+    className: "bdr-br",
     shorthand: "roundedBottomRight",
     values: "radii",
     group: "Border Radius"
   },
   borderBottomLeftRadius: {
-    className: "rounded-bl",
+    className: "bdr-bl",
     shorthand: "roundedBottomLeft",
     values: "radii",
     group: "Border Radius"
   },
   borderTopRadius: {
-    className: "rounded-t",
+    className: "bdr-t",
     shorthand: "roundedTop",
     property: "borderRadius",
     values: "radii",
@@ -706,7 +707,7 @@ var border = {
     }
   },
   borderRightRadius: {
-    className: "rounded-r",
+    className: "bdr-r",
     shorthand: "roundedRight",
     property: "borderRadius",
     values: "radii",
@@ -719,7 +720,7 @@ var border = {
     }
   },
   borderBottomRadius: {
-    className: "rounded-b",
+    className: "bdr-b",
     shorthand: "roundedBottom",
     property: "borderRadius",
     values: "radii",
@@ -732,7 +733,7 @@ var border = {
     }
   },
   borderLeftRadius: {
-    className: "rounded-l",
+    className: "bdr-l",
     shorthand: "roundedLeft",
     values: "radii",
     property: "borderRadius",
@@ -745,19 +746,19 @@ var border = {
     }
   },
   borderStartStartRadius: {
-    className: "rounded-ss",
+    className: "bdr-ss",
     shorthand: "roundedStartStart",
     values: "radii",
     group: "Border Radius"
   },
   borderStartEndRadius: {
-    className: "rounded-se",
+    className: "bdr-se",
     shorthand: "roundedStartEnd",
     values: "radii",
     group: "Border Radius"
   },
   borderStartRadius: {
-    className: "rounded-s",
+    className: "bdr-s",
     values: "radii",
     property: "borderRadius",
     shorthand: "roundedStart",
@@ -770,19 +771,19 @@ var border = {
     }
   },
   borderEndStartRadius: {
-    className: "rounded-es",
+    className: "bdr-es",
     shorthand: "roundedEndStart",
     values: "radii",
     group: "Border Radius"
   },
   borderEndEndRadius: {
-    className: "rounded-ee",
+    className: "bdr-ee",
     shorthand: "roundedEndEnd",
     values: "radii",
     group: "Border Radius"
   },
   borderEndRadius: {
-    className: "rounded-e",
+    className: "bdr-e",
     shorthand: "roundedEnd",
     property: "borderRadius",
     values: "radii",
@@ -794,180 +795,181 @@ var border = {
       };
     }
   },
+  // Border
   border: {
-    className: "border",
+    className: "bd",
     values: "borders",
     group: "Border"
   },
   borderWidth: {
-    className: "border-w",
+    className: "bd-w",
     values: "borderWidths",
     group: "Border Radius"
   },
   borderTopWidth: {
-    className: "border-tw",
+    className: "bd-t-w",
     values: "borderWidths",
     group: "Border"
   },
   borderLeftWidth: {
-    className: "border-lw",
+    className: "bd-l-w",
     values: "borderWidths",
     group: "Border"
   },
   borderRightWidth: {
-    className: "border-rw",
+    className: "bd-r-w",
     values: "borderWidths",
     group: "Border"
   },
   borderBottomWidth: {
-    className: "border-bw",
+    className: "bd-b-w",
     values: "borderWidths",
     group: "Border"
   },
   borderColor: {
-    className: "border",
+    className: "bd-c",
     values: "colors",
     group: "Border",
     transform: createColorMixTransform("borderColor")
   },
   borderInline: {
-    className: "border-x",
+    className: "bd-x",
     values: "borders",
     group: "Border",
     shorthand: "borderX"
   },
   borderInlineWidth: {
-    className: "border-x",
+    className: "bd-x-w",
     values: "borderWidths",
     group: "Border",
     shorthand: "borderXWidth"
   },
   borderInlineColor: {
-    className: "border-x",
+    className: "bd-x-c",
     values: "colors",
     group: "Border",
     shorthand: "borderXColor",
     transform: createColorMixTransform("borderInlineColor")
   },
   borderBlock: {
-    className: "border-y",
+    className: "bd-y",
     values: "borders",
     group: "Border",
     shorthand: "borderY"
   },
   borderBlockWidth: {
-    className: "border-y",
+    className: "bd-y-w",
     values: "borderWidths",
     group: "Border",
     shorthand: "borderYWidth"
   },
   borderBlockColor: {
-    className: "border-y",
+    className: "bd-y-c",
     values: "colors",
     group: "Border",
     shorthand: "borderYColor",
     transform: createColorMixTransform("borderBlockColor")
   },
   borderLeft: {
-    className: "border-l",
+    className: "bd-l",
     values: "borders",
     group: "Border"
   },
   borderLeftColor: {
-    className: "border-l",
+    className: "bd-l-c",
     values: "colors",
     group: "Border",
     transform: createColorMixTransform("borderLeftColor")
   },
   borderInlineStart: {
-    className: "border-s",
+    className: "bd-s",
     values: "borders",
     group: "Border",
     shorthand: "borderStart"
   },
   borderInlineStartWidth: {
-    className: "border-s",
+    className: "bd-s-w",
     values: "borderWidths",
     group: "Border",
     shorthand: "borderStartWidth"
   },
   borderInlineStartColor: {
-    className: "border-s",
+    className: "bd-s-c",
     values: "colors",
     group: "Border",
     shorthand: "borderStartColor",
     transform: createColorMixTransform("borderInlineStartColor")
   },
   borderRight: {
-    className: "border-r",
+    className: "bd-r",
     values: "borders",
     group: "Border"
   },
   borderRightColor: {
-    className: "border-r",
+    className: "bd-r-c",
     values: "colors",
     group: "Border",
     transform: createColorMixTransform("borderRightColor")
   },
   borderInlineEnd: {
-    className: "border-e",
+    className: "bd-e",
     values: "borders",
     group: "Border",
     shorthand: "borderEnd"
   },
   borderInlineEndWidth: {
-    className: "border-e",
+    className: "bd-e-w",
     values: "borderWidths",
     group: "Border",
     shorthand: "borderEndWidth"
   },
   borderInlineEndColor: {
-    className: "border-e",
+    className: "bd-e-c",
     values: "colors",
     group: "Border",
     shorthand: "borderEndColor",
     transform: createColorMixTransform("borderInlineEndColor")
   },
   borderTop: {
-    className: "border-t",
+    className: "bd-t",
     values: "borders",
     group: "Border"
   },
   borderTopColor: {
-    className: "border-t",
+    className: "bd-t-c",
     values: "colors",
     group: "Border",
     transform: createColorMixTransform("borderTopColor")
   },
   borderBottom: {
-    className: "border-b",
+    className: "bd-b",
     values: "borders",
     group: "Border"
   },
   borderBottomColor: {
-    className: "border-b",
+    className: "bd-b-c",
     values: "colors",
     group: "Border",
     transform: createColorMixTransform("borderBottomColor")
   },
   borderBlockEnd: {
-    className: "border-be",
+    className: "bd-be",
     values: "borders",
     group: "Border"
   },
   borderBlockEndColor: {
-    className: "border-be",
+    className: "bd-be-c",
     values: "colors",
     group: "Border",
     transform: createColorMixTransform("borderBlockEndColor")
   },
   borderBlockStart: {
-    className: "border-bs",
+    className: "bd-bs",
     values: "borders",
     group: "Border"
   },
   borderBlockStartColor: {
-    className: "border-bs",
+    className: "bd-bs-c",
     values: "colors",
     group: "Border",
     transform: createColorMixTransform("borderBlockStartColor")
@@ -981,13 +983,13 @@ var container2 = {
     group: "Container"
   },
   containerName: {
-    className: "cq-name",
+    className: "cq-n",
     property: "containerName",
     values: "containerNames",
     group: "Container"
   },
   containerType: {
-    className: "cq-type",
+    className: "cq-t",
     group: "Container"
   }
 };
@@ -1032,7 +1034,7 @@ var display = {
 var divideColor = createColorMixTransform("borderColor");
 var divide = {
   divideX: {
-    className: "divide-x",
+    className: "dvd-x",
     values: "borderWidths",
     group: "Border",
     transform(value) {
@@ -1045,7 +1047,7 @@ var divide = {
     }
   },
   divideY: {
-    className: "divide-y",
+    className: "dvd-y",
     values: "borderWidths",
     group: "Border",
     transform(value) {
@@ -1058,7 +1060,7 @@ var divide = {
     }
   },
   divideColor: {
-    className: "divide-color",
+    className: "dvd-c",
     values: "colors",
     group: "Border",
     transform(value, args) {
@@ -1068,7 +1070,7 @@ var divide = {
     }
   },
   divideStyle: {
-    className: "divide-style",
+    className: "dvd-s",
     property: "borderStyle",
     group: "Border",
     transform(value) {
@@ -1084,24 +1086,25 @@ var divide = {
 // src/utilities/effects.ts
 var effects = {
   opacity: {
+    className: "op",
     values: "opacity",
     group: "Background"
   },
   boxShadow: {
     shorthand: "shadow",
-    className: "shadow",
+    className: "bx-sh",
     values: "shadows",
     group: "Shadow"
   },
   boxShadowColor: {
     shorthand: "shadowColor",
-    className: "shadow-color",
+    className: "bx-sh-c",
     values: "colors",
     transform: createColorMixTransform("--shadow-color"),
     group: "Color"
   },
   mixBlendMode: {
-    className: "mix-blend",
+    className: "mix-bm",
     group: "Effect"
   },
   filter: {
@@ -1195,7 +1198,7 @@ var effects = {
     }
   },
   backdropFilter: {
-    className: "backdrop",
+    className: "bkdp",
     group: "Effect",
     values: {
       auto: "var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )"
@@ -1208,7 +1211,7 @@ var effects = {
     }
   },
   backdropBlur: {
-    className: "backdrop-blur",
+    className: "bkdp-blur",
     group: "Effect",
     values: "blurs",
     transform(value) {
@@ -1218,7 +1221,7 @@ var effects = {
     }
   },
   backdropBrightness: {
-    className: "backdrop-brightness",
+    className: "bkdp-brightness",
     group: "Effect",
     transform(value) {
       return {
@@ -1227,7 +1230,7 @@ var effects = {
     }
   },
   backdropContrast: {
-    className: "backdrop-contrast",
+    className: "bkdp-contrast",
     group: "Effect",
     transform(value) {
       return {
@@ -1236,7 +1239,7 @@ var effects = {
     }
   },
   backdropGrayscale: {
-    className: "backdrop-grayscale",
+    className: "bkdp-grayscale",
     group: "Effect",
     transform(value) {
       return {
@@ -1245,7 +1248,7 @@ var effects = {
     }
   },
   backdropHueRotate: {
-    className: "backdrop-hue-rotate",
+    className: "bkdp-hue-rotate",
     group: "Effect",
     transform(value) {
       return {
@@ -1254,7 +1257,7 @@ var effects = {
     }
   },
   backdropInvert: {
-    className: "backdrop-invert",
+    className: "bkdp-invert",
     group: "Effect",
     transform(value) {
       return {
@@ -1263,7 +1266,7 @@ var effects = {
     }
   },
   backdropOpacity: {
-    className: "backdrop-opacity",
+    className: "bkdp-opacity",
     group: "Effect",
     transform(value) {
       return {
@@ -1272,7 +1275,7 @@ var effects = {
     }
   },
   backdropSaturate: {
-    className: "backdrop-saturate",
+    className: "bkdp-saturate",
     group: "Effect",
     transform(value) {
       return {
@@ -1281,7 +1284,7 @@ var effects = {
     }
   },
   backdropSepia: {
-    className: "backdrop-sepia",
+    className: "bkdp-sepia",
     group: "Effect",
     transform(value) {
       return {
@@ -1294,7 +1297,7 @@ var effects = {
 // src/utilities/flex-and-grid.ts
 var flexGrid = {
   flexBasis: {
-    className: "basis",
+    className: "flex-b",
     group: "Flex Layout",
     values(theme) {
       return {
@@ -1340,20 +1343,20 @@ var flexGrid = {
     }
   },
   flexDirection: {
-    className: "flex",
+    className: "flex-d",
     group: "Flex Layout",
     shorthand: "flexDir"
   },
   flexGrow: {
-    className: "grow",
+    className: "flex-g",
     group: "Flex Layout"
   },
   flexShrink: {
-    className: "shrink",
+    className: "flex-sh",
     group: "Flex Layout"
   },
   gridTemplateColumns: {
-    className: "grid-cols",
+    className: "grid-tc",
     group: "Grid Layout",
     values: {
       "1": "repeat(1, minmax(0, 1fr))",
@@ -1371,7 +1374,7 @@ var flexGrid = {
     }
   },
   gridTemplateRows: {
-    className: "grid-rows",
+    className: "grid-tr",
     group: "Grid Layout",
     values: {
       "1": "repeat(1, minmax(0, 1fr))",
@@ -1389,7 +1392,7 @@ var flexGrid = {
     }
   },
   gridColumn: {
-    className: "col-span",
+    className: "grid-c",
     group: "Grid Layout",
     values: {
       full: "1 / -1",
@@ -1408,7 +1411,7 @@ var flexGrid = {
     }
   },
   gridRow: {
-    className: "row-span",
+    className: "grid-r",
     group: "Grid Layout",
     values: {
       full: "1 / -1",
@@ -1427,19 +1430,19 @@ var flexGrid = {
     }
   },
   gridColumnStart: {
-    className: "col-start",
+    className: "grid-cs",
     group: "Grid Layout"
   },
   gridColumnEnd: {
-    className: "col-end",
+    className: "grid-ce",
     group: "Grid Layout"
   },
   gridAutoFlow: {
-    className: "grid-flow",
+    className: "grid-af",
     group: "Grid Layout"
   },
   gridAutoColumns: {
-    className: "auto-cols",
+    className: "grid-ac",
     group: "Grid Layout",
     values: {
       min: "min-content",
@@ -1448,7 +1451,7 @@ var flexGrid = {
     }
   },
   gridAutoRows: {
-    className: "auto-rows",
+    className: "grid-ar",
     group: "Grid Layout",
     values: {
       min: "min-content",
@@ -1462,44 +1465,44 @@ var flexGrid = {
     values: "spacing"
   },
   gridGap: {
-    className: "gap",
+    className: "grid-g",
     group: "Grid Layout",
     values: "spacing"
   },
   gridRowGap: {
-    className: "gap-x",
+    className: "grid-rg",
     group: "Grid Layout",
     values: "spacing"
   },
   gridColumnGap: {
-    className: "gap-y",
+    className: "grid-cg",
     group: "Grid Layout",
     values: "spacing"
   },
   rowGap: {
-    className: "gap-x",
+    className: "rg",
     group: "Grid Layout",
     values: "spacing"
   },
   columnGap: {
-    className: "gap-y",
+    className: "cg",
     group: "Grid Layout",
     values: "spacing"
   },
   justifyContent: {
-    className: "justify",
+    className: "jc",
     group: "Flex Layout"
   },
   alignContent: {
-    className: "content",
+    className: "ac",
     group: "Flex Layout"
   },
   alignItems: {
-    className: "items",
+    className: "ai",
     group: "Flex Layout"
   },
   alignSelf: {
-    className: "self",
+    className: "as",
     group: "Flex Layout"
   }
 };
@@ -1523,7 +1526,7 @@ var gradientVars = {
 var backgroundGradients = {
   backgroundGradient: {
     shorthand: "bgGradient",
-    className: "bg-gradient",
+    className: "bg-grad",
     group: "Background Gradient",
     values(theme) {
       return {
@@ -1539,7 +1542,7 @@ var backgroundGradients = {
     }
   },
   textGradient: {
-    className: "text-gradient",
+    className: "txt-grad",
     group: "Background Gradient",
     values(theme) {
       return {
@@ -1557,7 +1560,7 @@ var backgroundGradients = {
     }
   },
   gradientFromPosition: {
-    className: "gradient-from-pos",
+    className: "grad-from-pos",
     group: "Background Gradient",
     transform(value) {
       return {
@@ -1566,7 +1569,7 @@ var backgroundGradients = {
     }
   },
   gradientToPosition: {
-    className: "gradient-to-pos",
+    className: "grad-to-pos",
     group: "Background Gradient",
     transform(value) {
       return {
@@ -1575,19 +1578,19 @@ var backgroundGradients = {
     }
   },
   gradientFrom: {
-    className: "gradient-from",
+    className: "grad-from",
     values: "colors",
     group: "Background Gradient",
     transform: createColorMixTransform("--gradient-from")
   },
   gradientTo: {
-    className: "gradient-to",
+    className: "grad-to",
     values: "colors",
     group: "Background Gradient",
     transform: createColorMixTransform("--gradient-to")
   },
   gradientVia: {
-    className: "gradient-via",
+    className: "grad-via",
     values: "colors",
     group: "Background Gradient",
     transform(value, args) {
@@ -1599,7 +1602,7 @@ var backgroundGradients = {
     }
   },
   gradientViaPosition: {
-    className: "gradient-via-pos",
+    className: "grad-via-pos",
     group: "Background Gradient",
     transform(value) {
       return {
@@ -1662,23 +1665,24 @@ var helpers = {
 // src/utilities/interactivity.ts
 var interactivity = {
   accentColor: {
-    className: "accent",
+    className: "ac-c",
     values: "colors",
     transform: createColorMixTransform("accentColor"),
     group: "Color"
   },
   caretColor: {
-    className: "caret",
+    className: "ca-c",
     values: "colors",
     group: "Color",
     transform: createColorMixTransform("caretColor")
   },
   scrollBehavior: {
-    className: "scroll",
+    className: "scr-bhv",
     group: "Scroll"
   },
+  // Scroll bar
   scrollbar: {
-    className: "scrollbar",
+    className: "scr-bar",
     values: ["visible", "hidden"],
     group: "Scroll",
     transform(value) {
@@ -1702,130 +1706,149 @@ var interactivity = {
       }
     }
   },
+  scrollbarColor: {
+    className: "scr-bar-c",
+    values: "colors",
+    group: "Scroll",
+    transform: createColorMixTransform("scrollbarColor")
+  },
+  scrollbarGutter: {
+    className: "scr-bar-g",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollbarWidth: {
+    className: "scr-bar-w",
+    values: "sizes",
+    group: "Scroll"
+  },
+  // Scroll Margin
   scrollMargin: {
-    className: "scroll-m",
+    className: "scr-m",
     values: "spacing",
     group: "Scroll"
   },
   scrollMarginLeft: {
-    className: "scroll-ml",
+    className: "scr-ml",
     values: "spacing",
     group: "Scroll"
   },
   scrollMarginRight: {
-    className: "scroll-mr",
+    className: "scr-mr",
     values: "spacing",
     group: "Scroll"
   },
   scrollMarginTop: {
-    className: "scroll-mt",
+    className: "scr-mt",
     values: "spacing",
     group: "Scroll"
   },
   scrollMarginBottom: {
-    className: "scroll-mb",
+    className: "scr-mb",
     values: "spacing",
     group: "Scroll"
   },
   scrollMarginBlock: {
-    className: "scroll-my",
+    className: "scr-my",
     values: "spacing",
     group: "Scroll",
     shorthand: ["scrollMarginY"]
   },
   scrollMarginBlockEnd: {
-    className: "scroll-mb",
+    className: "scr-mbe",
     values: "spacing",
     group: "Scroll"
   },
   scrollMarginBlockStart: {
-    className: "scroll-mt",
+    className: "scr-mbt",
     values: "spacing",
     group: "Scroll"
   },
   scrollMarginInline: {
-    className: "scroll-mx",
+    className: "scr-mx",
     values: "spacing",
     group: "Scroll",
     shorthand: ["scrollMarginX"]
   },
   scrollMarginInlineEnd: {
-    className: "scroll-me",
+    className: "scr-me",
     values: "spacing",
     group: "Scroll"
   },
   scrollMarginInlineStart: {
-    className: "scroll-ms",
+    className: "scr-ms",
     values: "spacing",
     group: "Scroll"
   },
+  // Scroll Padding
   scrollPadding: {
-    className: "scroll-p",
+    className: "scr-p",
     values: "spacing",
     group: "Scroll"
   },
   scrollPaddingBlock: {
-    className: "scroll-pb",
+    className: "scr-py",
     values: "spacing",
     group: "Scroll",
     shorthand: ["scrollPaddingY"]
   },
   scrollPaddingBlockStart: {
-    className: "scroll-pt",
+    className: "scr-pbs",
     values: "spacing",
     group: "Scroll"
   },
   scrollPaddingBlockEnd: {
-    className: "scroll-pb",
+    className: "scr-pbe",
     values: "spacing",
     group: "Scroll"
   },
   scrollPaddingInline: {
-    className: "scroll-px",
+    className: "scr-px",
     values: "spacing",
     group: "Scroll",
     shorthand: ["scrollPaddingX"]
   },
   scrollPaddingInlineEnd: {
-    className: "scroll-pe",
+    className: "scr-pe",
     values: "spacing",
     group: "Scroll"
   },
   scrollPaddingInlineStart: {
-    className: "scroll-ps",
+    className: "scr-ps",
     values: "spacing",
     group: "Scroll"
   },
   scrollPaddingLeft: {
-    className: "scroll-pl",
+    className: "scr-pl",
     values: "spacing",
     group: "Scroll"
   },
   scrollPaddingRight: {
-    className: "scroll-pr",
+    className: "scr-pr",
     values: "spacing",
     group: "Scroll"
   },
   scrollPaddingTop: {
-    className: "scroll-pt",
+    className: "scr-pt",
     values: "spacing",
     group: "Scroll"
   },
   scrollPaddingBottom: {
-    className: "scroll-pb",
+    className: "scr-pb",
     values: "spacing",
     group: "Scroll"
   },
+  // Scroll Snap
   scrollSnapAlign: {
-    className: "snap-align",
+    className: "scr-sa",
     group: "Scroll"
   },
   scrollSnapStop: {
-    className: "snap-stop",
+    className: "scrs-s",
     group: "Scroll"
   },
   scrollSnapType: {
-    className: "snap-type",
+    className: "scrs-t",
     group: "Scroll",
     values: {
       none: "none",
@@ -1835,7 +1858,7 @@ var interactivity = {
     }
   },
   scrollSnapStrictness: {
-    className: "snap-strictness",
+    className: "scrs-strt",
     values: ["mandatory", "proximity"],
     group: "Scroll",
     transform(value) {
@@ -1845,36 +1868,73 @@ var interactivity = {
     }
   },
   scrollSnapMargin: {
-    className: "snap-m",
+    className: "scrs-m",
     values: "spacing",
     group: "Scroll"
   },
   scrollSnapMarginTop: {
-    className: "snap-mt",
+    className: "scrs-mt",
     values: "spacing",
     group: "Scroll"
   },
   scrollSnapMarginBottom: {
-    className: "snap-mb",
+    className: "scrs-mb",
     values: "spacing",
     group: "Scroll"
   },
   scrollSnapMarginLeft: {
-    className: "snap-ml",
+    className: "scrs-ml",
     values: "spacing",
     group: "Scroll"
   },
   scrollSnapMarginRight: {
-    className: "snap-mr",
+    className: "scrs-mr",
     values: "spacing",
     group: "Scroll"
   },
+  scrollSnapCoordinate: {
+    className: "scrs-c",
+    group: "Scroll"
+  },
+  scrollSnapDestination: {
+    className: "scrs-d",
+    group: "Scroll"
+  },
+  scrollSnapPointsX: {
+    className: "scrs-px",
+    group: "Scroll"
+  },
+  scrollSnapPointsY: {
+    className: "scrs-py",
+    group: "Scroll"
+  },
+  scrollSnapTypeX: {
+    className: "scrs-tx",
+    group: "Scroll"
+  },
+  scrollSnapTypeY: {
+    className: "scrs-ty",
+    group: "Scroll"
+  },
+  // Scroll Timeline
+  scrollTimeline: {
+    className: "scrtl",
+    group: "Scroll"
+  },
+  scrollTimelineAxis: {
+    className: "scrtl-a",
+    group: "Scroll"
+  },
+  scrollTimelineName: {
+    className: "scrtl-n",
+    group: "Scroll"
+  },
   touchAction: {
-    className: "touch",
+    className: "tch-a",
     group: "Interactivity"
   },
   userSelect: {
-    className: "select",
+    className: "us",
     group: "Interactivity",
     transform(value) {
       return {
@@ -1882,18 +1942,75 @@ var interactivity = {
         userSelect: value
       };
     }
+  },
+  // Overflow
+  overflow: {
+    className: "ov",
+    group: "Scroll"
+  },
+  overflowWrap: {
+    className: "ov-wrap",
+    group: "Scroll"
+  },
+  overflowX: {
+    className: "ov-x",
+    group: "Scroll"
+  },
+  overflowY: {
+    className: "ov-y",
+    group: "Scroll"
+  },
+  overflowAnchor: {
+    className: "ov-a",
+    group: "Scroll"
+  },
+  overflowBlock: {
+    className: "ov-b",
+    group: "Scroll"
+  },
+  overflowInline: {
+    className: "ov-i",
+    group: "Scroll"
+  },
+  overflowClipBox: {
+    className: "ovcp-bx",
+    group: "Scroll"
+  },
+  overflowClipMargin: {
+    className: "ovcp-m",
+    group: "Scroll"
+  },
+  overscrollBehavior: {
+    className: "ovs-b",
+    group: "Scroll"
+  },
+  overscrollBehaviorX: {
+    className: "ovs-bx",
+    group: "Scroll"
+  },
+  overscrollBehaviorY: {
+    className: "ovs-by",
+    group: "Scroll"
+  },
+  overscrollBehaviorBlock: {
+    className: "ovs-bb",
+    group: "Scroll"
+  },
+  overscrollBehaviorInline: {
+    className: "ovs-bi",
+    group: "Scroll"
   }
 };
 
 // src/utilities/layout.ts
 var layout = {
   aspectRatio: {
-    className: "aspect",
+    className: "asp",
     values: "aspectRatios",
     group: "Layout"
   },
   boxDecorationBreak: {
-    className: "decoration",
+    className: "bx-db",
     group: "Layout",
     transform(value) {
       return {
@@ -1908,27 +2025,27 @@ var layout = {
     group: "Visibility"
   },
   boxSizing: {
-    className: "box",
+    className: "bx-s",
     group: "System"
   },
   objectPosition: {
-    className: "obj-pos",
+    className: "obj-p",
     group: "Layout"
   },
   objectFit: {
-    className: "obj-fit",
+    className: "obj-f",
     group: "Layout"
   },
   overscrollBehavior: {
-    className: "overscroll",
+    className: "ovscl",
     group: "Scroll"
   },
   overscrollBehaviorX: {
-    className: "overscroll-x",
+    className: "ovscl-x",
     group: "Scroll"
   },
   overscrollBehaviorY: {
-    className: "overscroll-y",
+    className: "ovscl-y",
     group: "Scroll"
   },
   position: {
@@ -1946,6 +2063,14 @@ var layout = {
     values: "spacing",
     group: "Position"
   },
+  inset: {
+    className: "inset",
+    group: "Position",
+    values: (theme) => ({
+      auto: "auto",
+      ...theme("spacing")
+    })
+  },
   insetInline: {
     className: "inset-x",
     values: "spacing",
@@ -1958,32 +2083,24 @@ var layout = {
     group: "Position",
     shorthand: ["insetY"]
   },
-  inset: {
-    className: "inset",
-    group: "Position",
-    values: (theme) => ({
-      auto: "auto",
-      ...theme("spacing")
-    })
-  },
   insetBlockEnd: {
-    className: "inset-b",
+    className: "inset-be",
     values: "spacing",
     group: "Position"
   },
   insetBlockStart: {
-    className: "inset-t",
+    className: "inset-bs",
     values: "spacing",
     group: "Position"
   },
   insetInlineEnd: {
-    className: "end",
+    className: "inset-e",
     values: "spacing",
     group: "Position",
     shorthand: ["insetEnd", "end"]
   },
   insetInlineStart: {
-    className: "start",
+    className: "inset-s",
     values: "spacing",
     group: "Position",
     shorthand: ["insetStart", "start"]
@@ -2034,30 +2151,34 @@ var layout = {
 // src/utilities/list.ts
 var list = {
   listStyleType: {
-    className: "list-type",
+    className: "li-t",
     group: "List"
   },
   listStylePosition: {
-    className: "list-pos",
+    className: "li-pos",
     group: "List"
   },
   listStyleImage: {
-    className: "list-img",
+    className: "li-img",
     group: "List",
     values: "assets"
+  },
+  listStyle: {
+    className: "li-s",
+    group: "List"
   }
 };
 
 // src/utilities/outline.ts
 var outline = {
   outlineWidth: {
-    className: "ring-width",
+    className: "ring-w",
     shorthand: "ringWidth",
     values: "borderWidths",
     group: "Border"
   },
   outlineColor: {
-    className: "ring-color",
+    className: "ring-c",
     values: "colors",
     group: "Color",
     shorthand: "ringColor",
@@ -2076,7 +2197,7 @@ var outline = {
     }
   },
   outlineOffset: {
-    className: "ring-offset",
+    className: "ring-o",
     shorthand: "ringOffset",
     values: "spacing",
     group: "Border"
@@ -2086,56 +2207,56 @@ var outline = {
 // src/utilities/polyfill.ts
 var polyfill = {
   appearance: {
-    className: "appearance",
+    className: "ap",
     group: "Visibility",
     transform(value) {
       return { appearance: value, WebkitAppearance: value };
     }
   },
   backfaceVisibility: {
-    className: "backface",
+    className: "bfv",
     group: "Visibility",
     transform(value) {
       return { backfaceVisibility: value, WebkitBackfaceVisibility: value };
     }
   },
   clipPath: {
-    className: "clip-path",
+    className: "cp-path",
     group: "Other",
     transform(value) {
       return { clipPath: value, WebkitClipPath: value };
     }
   },
   hyphens: {
-    className: "hyphens",
+    className: "hy",
     group: "Other",
     transform(value) {
       return { hyphens: value, WebkitHyphens: value };
     }
   },
   mask: {
-    className: "mask",
+    className: "msk",
     group: "Other",
     transform(value) {
       return { mask: value, WebkitMask: value };
     }
   },
   maskImage: {
-    className: "mask-image",
+    className: "msk-i",
     group: "Other",
     transform(value) {
       return { maskImage: value, WebkitMaskImage: value };
     }
   },
   maskSize: {
-    className: "mask-size",
+    className: "msk-s",
     group: "Other",
     transform(value) {
       return { maskSize: value, WebkitMaskSize: value };
     }
   },
   textSizeAdjust: {
-    className: "text-adjust",
+    className: "txt-adj",
     group: "Typography",
     transform(value) {
       return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
@@ -2206,7 +2327,7 @@ var sizing = {
     values: widthValues
   },
   inlineSize: {
-    className: "w",
+    className: "w-is",
     group: "Width",
     values: widthValues
   },
@@ -2217,7 +2338,7 @@ var sizing = {
     values: widthValues
   },
   minInlineSize: {
-    className: "min-w",
+    className: "min-w-is",
     group: "Width",
     values: widthValues
   },
@@ -2228,7 +2349,7 @@ var sizing = {
     values: widthValues
   },
   maxInlineSize: {
-    className: "max-w",
+    className: "max-w-is",
     group: "Width",
     values: widthValues
   },
@@ -2239,7 +2360,7 @@ var sizing = {
     values: heightValues
   },
   blockSize: {
-    className: "h",
+    className: "h-bs",
     group: "Height",
     values: heightValues
   },
@@ -2250,7 +2371,7 @@ var sizing = {
     values: heightValues
   },
   minBlockSize: {
-    className: "min-h",
+    className: "min-h-bs",
     group: "Height",
     values: heightValues
   },
@@ -2310,12 +2431,12 @@ var spacing = {
     shorthand: ["py", "paddingY"]
   },
   paddingBlockEnd: {
-    className: "pb",
+    className: "pbe",
     values: "spacing",
     group: "Padding"
   },
   paddingBlockStart: {
-    className: "pt",
+    className: "pbs",
     values: "spacing",
     group: "Padding"
   },
@@ -2374,12 +2495,12 @@ var spacing = {
     shorthand: ["my", "marginY"]
   },
   marginBlockEnd: {
-    className: "mb",
+    className: "mbe",
     values: marginValues,
     group: "Margin"
   },
   marginBlockStart: {
-    className: "mt",
+    className: "mbs",
     values: marginValues,
     group: "Margin"
   },
@@ -2402,7 +2523,7 @@ var spacing = {
     group: "Margin"
   },
   spaceX: {
-    className: "space-x",
+    className: "sx",
     values: marginValues,
     property: "marginInlineStart",
     group: "Margin",
@@ -2416,7 +2537,7 @@ var spacing = {
     }
   },
   spaceY: {
-    className: "space-y",
+    className: "sy",
     values: marginValues,
     property: "marginBlockStart",
     group: "Margin",
@@ -2440,26 +2561,50 @@ var svg = {
     transform: createColorMixTransform("fill")
   },
   stroke: {
-    className: "stroke",
+    className: "stk",
     values: "colors",
     group: "Color",
     transform: createColorMixTransform("stroke")
   },
   strokeWidth: {
-    className: "stroke-w",
+    className: "stk-w",
     values: "borderWidths",
     group: "Border"
+  },
+  strokeDasharray: {
+    className: "stk-dsh",
+    group: "Border"
+  },
+  strokeDashoffset: {
+    className: "stk-do",
+    group: "Border"
+  },
+  strokeLinecap: {
+    className: "stk-lc",
+    group: "Border"
+  },
+  strokeLinejoin: {
+    className: "stk-lj",
+    group: "Border"
+  },
+  strokeMiterlimit: {
+    className: "stk-ml",
+    group: "Border"
+  },
+  strokeOpacity: {
+    className: "stk-op",
+    group: "Border"
   }
 };
 
 // src/utilities/tables.ts
 var tables = {
   borderCollapse: {
-    className: "border",
+    className: "bd-cl",
     group: "Table"
   },
   borderSpacing: {
-    className: "border-spacing",
+    className: "bd-sp",
     group: "Table",
     values(theme) {
       return {
@@ -2469,7 +2614,7 @@ var tables = {
     }
   },
   borderSpacingX: {
-    className: "border-spacing-x",
+    className: "bd-sx",
     values: "spacing",
     group: "Table",
     transform(value) {
@@ -2479,7 +2624,7 @@ var tables = {
     }
   },
   borderSpacingY: {
-    className: "border-spacing-y",
+    className: "bd-sy",
     values: "spacing",
     group: "Table",
     transform(value) {
@@ -2489,7 +2634,7 @@ var tables = {
     }
   },
   tableLayout: {
-    className: "table",
+    className: "tbl",
     group: "Table"
   }
 };
@@ -2510,7 +2655,19 @@ var negativeFractions = Object.fromEntries(
 var fractions = { ...positiveFractions, ...negativeFractions };
 var transforms = {
   transformOrigin: {
-    className: "origin",
+    className: "trf-o",
+    group: "Transform"
+  },
+  transformBox: {
+    className: "trf-b",
+    group: "Transform"
+  },
+  transformStyle: {
+    className: "trf-s",
+    group: "Transform"
+  },
+  transform: {
+    className: "trf",
     group: "Transform"
   },
   rotate: {
@@ -2656,7 +2813,7 @@ var transitionMap = {
 };
 var transitions = {
   transitionTimingFunction: {
-    className: "ease",
+    className: "trs-tmf",
     values: "easings",
     group: "Transition",
     transform(value) {
@@ -2667,12 +2824,12 @@ var transitions = {
     }
   },
   transitionDelay: {
-    className: "delay",
+    className: "trs-dly",
     values: "durations",
     group: "Transition"
   },
   transitionDuration: {
-    className: "duration",
+    className: "trs-dur",
     values: "durations",
     group: "Transition",
     transform(value) {
@@ -2683,7 +2840,7 @@ var transitions = {
     }
   },
   transitionProperty: {
-    className: "transition-prop",
+    className: "trs-prop",
     group: "Transition",
     transform(value) {
       return {
@@ -2693,50 +2850,91 @@ var transitions = {
     }
   },
   transition: {
-    className: "transition",
+    className: "trs",
     values: Object.keys(transitionMap),
     group: "Transition",
     transform(value) {
       return transitionMap[value] ?? { transition: value };
     }
   },
+  // Animations
   animation: {
-    className: "animation",
+    className: "anim",
     values: "animations",
-    group: "Transition"
+    group: "Animation"
   },
   animationName: {
-    className: "animation-name",
+    className: "anim-n",
     values: "keyframes",
-    group: "Transition"
+    group: "Animation"
   },
   animationTimingFunction: {
-    className: "animation-ease",
+    className: "anim-tmf",
     values: "easings",
-    group: "Transition"
+    group: "Animation"
   },
   animationDuration: {
-    className: "animation-duration",
+    className: "anim-dur",
     values: "durations",
-    group: "Transition"
+    group: "Animation"
   },
   animationDelay: {
-    className: "animation-delay",
+    className: "anim-dly",
     values: "durations",
-    group: "Transition"
+    group: "Animation"
+  },
+  animationPlayState: {
+    className: "anim-ps",
+    group: "Animation"
+  },
+  animationComposition: {
+    className: "anim-comp",
+    group: "Animation"
+  },
+  animationFillMode: {
+    className: "anim-fm",
+    group: "Animation"
+  },
+  animationDirection: {
+    className: "anim-dir",
+    group: "Animation"
+  },
+  animationIterationCount: {
+    className: "anim-ic",
+    group: "Animation"
+  },
+  animationRange: {
+    className: "anim-r",
+    group: "Animation"
+  },
+  animationState: {
+    className: "anim-s",
+    group: "Animation"
+  },
+  animationRangeStart: {
+    className: "anim-rs",
+    group: "Animation"
+  },
+  animationRangeEnd: {
+    className: "anim-re",
+    group: "Animation"
+  },
+  animationTimeline: {
+    className: "anim-tl",
+    group: "Animation"
   }
 };
 
 // src/utilities/typography.ts
 var typography = {
   color: {
-    className: "text",
+    className: "c",
     values: "colors",
     group: "Color",
     transform: createColorMixTransform("color")
   },
   fontFamily: {
-    className: "font",
+    className: "ff",
     values: "fonts",
     group: "Typography"
   },
@@ -2745,13 +2943,29 @@ var typography = {
     values: "fontSizes",
     group: "Typography"
   },
+  fontSizeAdjust: {
+    className: "fs-a",
+    group: "Typography"
+  },
+  fontPalette: {
+    className: "fp",
+    group: "Typography"
+  },
+  fontKerning: {
+    className: "fk",
+    group: "Typography"
+  },
+  fontFeatureSettings: {
+    className: "ff-s",
+    group: "Typography"
+  },
   fontWeight: {
     className: "fw",
     values: "fontWeights",
     group: "Typography"
   },
   fontSmoothing: {
-    className: "smoothing",
+    className: "fsmt",
     group: "Typography",
     values: {
       antialiased: "antialiased",
@@ -2763,87 +2977,103 @@ var typography = {
       };
     }
   },
+  fontVariant: {
+    className: "fv",
+    group: "Typography"
+  },
+  fontVariantAlternates: {
+    className: "fv-alt",
+    group: "Typography"
+  },
+  fontVariantCaps: {
+    className: "fv-caps",
+    group: "Typography"
+  },
+  fontVariationSettings: {
+    className: "fv-s",
+    group: "Typography"
+  },
   fontVariantNumeric: {
-    className: "numeric",
+    className: "fv-num",
     group: "Typography"
   },
   letterSpacing: {
-    className: "tracking",
+    className: "ls",
     values: "letterSpacings",
     group: "Typography"
   },
   lineHeight: {
-    className: "leading",
+    className: "lh",
     values: "lineHeights",
     group: "Typography"
   },
   textAlign: {
-    className: "text-align",
+    className: "ta",
     group: "Typography"
   },
   textDecoration: {
-    className: "text-decor",
+    className: "td",
     group: "Typography"
   },
   textDecorationColor: {
-    className: "text-decor-color",
+    className: "td-c",
     values: "colors",
     transform: createColorMixTransform("textDecorationColor"),
     group: "Typography"
   },
   textEmphasisColor: {
-    className: "text-emphasis-color",
+    className: "te-c",
     values: "colors",
     transform: createColorMixTransform("textEmphasisColor"),
     group: "Typography"
   },
   textDecorationStyle: {
-    className: "decoration-style",
+    className: "td-s",
     group: "Typography"
   },
   textDecorationThickness: {
-    className: "decoration-thickness",
+    className: "td-t",
     group: "Typography"
   },
   textUnderlineOffset: {
-    className: "underline-offset",
+    className: "tu-o",
     group: "Typography"
   },
   textTransform: {
-    className: "text-transform",
+    className: "tt",
     group: "Typography"
   },
   textIndent: {
-    className: "indent",
+    className: "ti",
     group: "Typography",
     values: "spacing"
   },
   textShadow: {
-    className: "text-shadow",
+    className: "tsh",
     values: "shadows",
     group: "Typography"
   },
   textShadowColor: {
     shorthand: "textShadowColor",
-    className: "text-shadow",
+    className: "tsh-c",
     values: "colors",
     transform: createColorMixTransform("--text-shadow-color"),
     group: "Typography"
   },
   textOverflow: {
-    className: "text-overflow",
+    className: "tov",
     group: "Typography"
   },
   verticalAlign: {
-    className: "v-align",
+    className: "va",
     group: "Typography"
   },
   wordBreak: {
-    className: "break",
+    className: "wb",
     group: "Typography"
   },
   textWrap: {
-    className: "text-wrap",
+    className: "tw",
     values: ["wrap", "balance", "nowrap"],
     group: "Typography",
     transform(value) {
@@ -2851,7 +3081,7 @@ var typography = {
     }
   },
   truncate: {
-    className: "truncate",
+    className: "trunc",
     values: { type: "boolean" },
     group: "Typography",
     transform(value) {
@@ -2865,7 +3095,7 @@ var typography = {
     }
   },
   lineClamp: {
-    className: "clamp",
+    className: "lc",
     group: "Typography",
     transform(value) {
       if (value === "none") {