tailwind-to-style 5.0.0 → 5.1.0

package/dist/animations/index.cjs

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v5.0.0
+ * tailwind-to-style v5.1.0
  * Zero-build runtime Tailwind CSS engine
  * 
  * @author Bigetion
@@ -7848,7 +7848,7 @@ function twsx(obj) {
 // Import directly from './className/index.js' if needed
 // export { twsxClassName, tw } from "./className/index.js";
 
-const _excluded = ["name", "prefix", "hash", "hashLength", "inject", "_"],
+const _excluded = ["name", "prefix", "hash", "hashLength", "inject"],
   _excluded2 = ["class", "className"],
   _excluded3 = ["class", "className"];
 
@@ -8347,14 +8347,115 @@ function processTokens(classString) {
 // Style Processing Utilities
 // ============================================================================
 
-function expandShorthands(config, baseSelector) {
-  const expanded = {};
-  const specialKeys = new Set(["name", "prefix", "hash", "hashLength", "inject", "base", "variants", "compoundVariants", "defaultVariants", "slots", "responsiveVariants", "extend", "animation", "enter", "exit", "enterFrom", "enterTo", "leaveFrom", "leaveTo", "_"]);
+/**
+ * Known CSS property names (camelCase and kebab-case).
+ * Used to differentiate raw CSS properties from Tailwind shorthand keys.
+ * Covers the full set of standard CSS properties.
+ */
+const CSS_PROPERTIES = new Set([
+// Box model
+"width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "min-width", "min-height", "max-width", "max-height", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "padding-top", "padding-right", "padding-bottom", "padding-left", "boxSizing", "box-sizing",
+// Display & layout
+"display", "overflow", "overflowX", "overflowY", "overflow-x", "overflow-y", "visibility", "opacity", "position", "top", "right", "bottom", "left", "zIndex", "z-index", "float", "clear",
+// Flexbox
+"flex", "flexGrow", "flexShrink", "flexBasis", "flexFlow", "flexDirection", "flexWrap", "flex-grow", "flex-shrink", "flex-basis", "flex-flow", "flex-direction", "flex-wrap", "alignItems", "alignContent", "alignSelf", "justifyContent", "justifyItems", "justifySelf", "align-items", "align-content", "align-self", "justify-content", "justify-items", "justify-self", "gap", "rowGap", "columnGap", "row-gap", "column-gap", "order", "placeItems", "placeContent", "placeSelf", "place-items", "place-content", "place-self",
+// Grid
+"grid", "gridTemplate", "gridTemplateColumns", "gridTemplateRows", "gridTemplateAreas", "gridColumn", "gridRow", "gridArea", "gridAutoFlow", "gridAutoColumns", "gridAutoRows", "grid-template", "grid-template-columns", "grid-template-rows", "grid-template-areas", "grid-column", "grid-row", "grid-area", "grid-auto-flow", "grid-auto-columns", "grid-auto-rows",
+// Typography
+"color", "fontSize", "fontWeight", "fontFamily", "fontStyle", "fontVariant", "fontStretch", "font-size", "font-weight", "font-family", "font-style", "font-variant", "font-stretch", "lineHeight", "letterSpacing", "wordSpacing", "textAlign", "textDecoration", "textTransform", "line-height", "letter-spacing", "word-spacing", "text-align", "text-decoration", "text-transform", "textOverflow", "whiteSpace", "wordBreak", "overflowWrap", "hyphens", "textIndent", "text-overflow", "white-space", "word-break", "overflow-wrap", "text-indent", "verticalAlign", "vertical-align", "fontFeatureSettings", "font-feature-settings",
+// Backgrounds
+"background", "backgroundColor", "backgroundImage", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundAttachment", "backgroundOrigin", "backgroundClip", "background-color", "background-image", "background-size", "background-position", "background-repeat", "background-attachment", "background-origin", "background-clip",
+// Borders
+"border", "borderTop", "borderRight", "borderBottom", "borderLeft", "border-top", "border-right", "border-bottom", "border-left", "borderWidth", "borderStyle", "borderColor", "borderRadius", "border-width", "border-style", "border-color", "border-radius", "borderTopWidth", "borderTopStyle", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomWidth", "borderBottomStyle", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderLeftWidth", "borderLeftStyle", "borderLeftColor", "borderRightWidth", "borderRightStyle", "borderRightColor", "outline", "outlineWidth", "outlineStyle", "outlineColor", "outlineOffset", "outline-width", "outline-style", "outline-color", "outline-offset",
+// Transforms & transitions
+"transform", "transformOrigin", "transformStyle", "perspective", "perspectiveOrigin", "transform-origin", "transform-style", "perspective-origin", "transition", "transitionProperty", "transitionDuration", "transitionTimingFunction", "transitionDelay", "transition-property", "transition-duration", "transition-timing-function", "transition-delay", "animation", "animationName", "animationDuration", "animationTimingFunction", "animationDelay", "animationIterationCount", "animationDirection", "animationFillMode", "animationPlayState", "animation-name", "animation-duration", "animation-timing-function", "animation-delay", "animation-iteration-count", "animation-direction", "animation-fill-mode", "animation-play-state",
+// Effects
+"boxShadow", "textShadow", "filter", "backdropFilter", "opacity", "box-shadow", "text-shadow", "backdrop-filter", "mix-blend-mode", "mixBlendMode", "isolation", "objectFit", "objectPosition", "object-fit", "object-position",
+// Lists & tables
+"listStyle", "listStyleType", "listStylePosition", "listStyleImage", "list-style", "list-style-type", "list-style-position", "list-style-image", "tableLayout", "borderCollapse", "borderSpacing", "captionSide", "emptyCells", "table-layout", "border-collapse", "border-spacing", "caption-side", "empty-cells",
+// SVG
+"fill", "stroke", "strokeWidth", "strokeDasharray", "strokeDashoffset", "strokeLinecap", "strokeLinejoin", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin",
+// Misc
+"content", "cursor", "pointerEvents", "userSelect", "resize", "appearance", "caretColor", "pointer-events", "user-select", "caret-color", "willChange", "will-change", "scrollBehavior", "scroll-behavior", "clipPath", "clip-path", "mask", "maskImage", "mask-image", "columns", "columnCount", "columnGap", "columnRule", "columnWidth", "columnSpan", "column-count", "column-rule", "column-width", "column-span", "pageBreakBefore", "pageBreakAfter", "pageBreakInside", "breakBefore", "breakAfter", "breakInside", "page-break-before", "page-break-after", "page-break-inside", "break-before", "break-after", "break-inside",
+// CSS variables & custom
+"all", "direction", "unicodeBidi", "unicode-bidi", "writingMode", "writing-mode", "overscrollBehavior", "overscroll-behavior", "touchAction", "touch-action", "scrollSnapType", "scrollSnapAlign", "scroll-snap-type", "scroll-snap-align"]);
+
+/**
+ * Detect if a key is a raw CSS property (camelCase or kebab-case).
+ * Also accepts CSS custom properties (--var-name) and any key containing a hyphen
+ * that doesn't match known Tailwind-ish patterns.
+ *
+ * @param {string} key
+ * @returns {boolean}
+ */
+function isCssProperty(key) {
+  // Explicit set match (fast path)
+  if (CSS_PROPERTIES.has(key)) return true;
+  // CSS custom properties
+  if (key.startsWith("--")) return true;
+  // kebab-case that isn't a Tailwind modifier pattern (no colons)
+  if (key.includes("-") && !key.includes(":") && !key.startsWith("@")) {
+    // Exclude known Tailwind-ish hyphenated shorthands already in PSEUDO_SHORTHANDS or BREAKPOINTS
+    if (PSEUDO_SHORTHANDS[key] || GROUP_PEER_STATES[key] || BREAKPOINTS[key]) return false;
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Convert a camelCase or kebab-case key to a kebab-case CSS property.
+ * @param {string} key
+ * @returns {string}
+ */
+function toCssPropertyName(key) {
+  // Already kebab-case
+  if (key.includes("-")) return key;
+  // camelCase → kebab-case
+  return key.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+
+/**
+ * Extract all raw CSS property key/value pairs from a config object.
+ * Returns an object suitable for the @css directive (kebab-case keys, string values).
+ *
+ * @param {Object} config
+ * @returns {Object|null} - null if nothing found
+ */
+function extractRawCssProps(config) {
+  let result = null;
   for (const _ref3 of Object.entries(config)) {
     var _ref4 = _slicedToArray(_ref3, 2);
     const key = _ref4[0];
     const value = _ref4[1];
+    if (!isCssProperty(key)) continue;
+    if (typeof value !== "string" && typeof value !== "number") continue;
+    if (!result) result = {};
+    result[toCssPropertyName(key)] = String(value);
+  }
+  return result;
+}
+function expandShorthands(config, baseSelector) {
+  const expanded = {};
+  const specialKeys = new Set(["name", "prefix", "hash", "hashLength", "inject", "base", "variants", "compoundVariants", "defaultVariants", "slots", "responsiveVariants", "extend", "animation", "enter", "exit", "enterFrom", "enterTo", "leaveFrom", "leaveTo", "_", "tw"]);
+
+  // Collect raw CSS properties into the @css directive for this selector
+  const rawCss = extractRawCssProps(config);
+  if (rawCss) {
+    // twsx supports { [selector]: { "@css": { prop: value } } }
+    // We expand that here so it lands in the style object correctly
+    if (!expanded[baseSelector]) expanded[baseSelector] = {};
+    // expanded[baseSelector] may already be a string (Tailwind classes) — keep both
+    // by using a special marker object that the caller (generateBasicClassName) will merge
+    expanded["__rawCss__"] = expanded["__rawCss__"] || {};
+    Object.assign(expanded["__rawCss__"], rawCss);
+  }
+  for (const _ref5 of Object.entries(config)) {
+    var _ref6 = _slicedToArray(_ref5, 2);
+    const key = _ref6[0];
+    const value = _ref6[1];
     if (specialKeys.has(key)) continue;
+    // Skip raw CSS properties — already handled above
+    if (isCssProperty(key) && (typeof value === "string" || typeof value === "number")) continue;
 
     // Process tokens in value
     const processedValue = typeof value === "string" ? processTokens(value) : value;
@@ -8406,22 +8507,40 @@ function expandShorthands(config, baseSelector) {
 }
 function processNestedStyles(config, baseSelector) {
   const result = {};
-  for (const _ref5 of Object.entries(config)) {
-    var _ref6 = _slicedToArray(_ref5, 2);
-    const key = _ref6[0];
-    const value = _ref6[1];
+  for (const _ref7 of Object.entries(config)) {
+    var _ref8 = _slicedToArray(_ref7, 2);
+    const key = _ref8[0];
+    const value = _ref8[1];
     if (typeof value === "object" && !Array.isArray(value)) {
       const nestedSelector = key.replace(/^&/, baseSelector);
       const nested = processNestedStyles(value, nestedSelector);
       Object.assign(result, nested);
-      if (value._) {
-        result[nestedSelector] = processTokens(value._);
+
+      // Support both `_` and `tw` as the Tailwind class key inside nested objects
+      const nestedTwClasses = [value._, value.tw].filter(Boolean).join(" ");
+      if (nestedTwClasses) {
+        result[nestedSelector] = processTokens(nestedTwClasses);
         const nestedShorthands = expandShorthands(value, nestedSelector);
+        // Wire raw CSS from nested object
+        if (nestedShorthands.__rawCss__) {
+          const existingNested = result[nestedSelector] || "";
+          if (typeof existingNested === "string") {
+            result[nestedSelector] = [existingNested, {
+              "@css": nestedShorthands.__rawCss__
+            }];
+          }
+          delete nestedShorthands.__rawCss__;
+        }
         Object.assign(result, nestedShorthands);
       }
     } else if (typeof value === "string") {
-      if (key === "_") {
-        result[baseSelector] = processTokens(value);
+      if (key === "_" || key === "tw") {
+        // Both _ and tw are Tailwind class shorthands for the current selector
+        if (result[baseSelector]) {
+          result[baseSelector] = result[baseSelector] + " " + processTokens(value);
+        } else {
+          result[baseSelector] = processTokens(value);
+        }
       } else {
         const selector = PSEUDO_SHORTHANDS[key] ? PSEUDO_SHORTHANDS[key].replace("&", baseSelector) : GROUP_PEER_STATES[key] ? GROUP_PEER_STATES[key].replace("&", baseSelector) : key.replace(/^&/, baseSelector);
         result[selector] = processTokens(value);
@@ -8486,10 +8605,10 @@ function processAnimations(config, baseSelector, className) {
 }
 function generateKeyframes(name, frames) {
   let css = "@keyframes ".concat(name, " {\n");
-  for (const _ref7 of Object.entries(frames)) {
-    var _ref8 = _slicedToArray(_ref7, 2);
-    const key = _ref8[0];
-    const value = _ref8[1];
+  for (const _ref9 of Object.entries(frames)) {
+    var _ref0 = _slicedToArray(_ref9, 2);
+    const key = _ref0[0];
+    const value = _ref0[1];
     // Convert Tailwind classes to approximate CSS (simplified)
     const cssValue = value.replace(/([a-z]+)-([a-z0-9-]+)/g, (match, prop, val) => {
       // This is a simplified conversion - real implementation would use twsx
@@ -8538,8 +8657,6 @@ function generateBasicClassName(config) {
     hashLength = _config$hashLength === void 0 ? globalConfig.hashLength : _config$hashLength,
     _config$inject = config.inject,
     inject = _config$inject === void 0 ? globalConfig.inject : _config$inject,
-    _config$_ = config._,
-    baseStyles = _config$_ === void 0 ? "" : _config$_,
     rest = _objectWithoutProperties(config, _excluded);
   const configHash = getConfigHash(config);
   let className;
@@ -8557,22 +8674,11 @@ function generateBasicClassName(config) {
     return cached;
   }
   const baseSelector = ".".concat(className);
-  const styleObj = {};
 
-  // Add base styles with token processing
-  if (baseStyles) {
-    styleObj[baseSelector] = processTokens(baseStyles);
-  }
+  // buildStyleObj handles `_`, `tw`, raw CSS props, pseudo shorthands, nested — all in one place
+  const styleObj = buildStyleObj(rest, baseSelector);
 
-  // Process shorthands (hover, focus, dark, group-hover, etc.)
-  const expanded = expandShorthands(rest, baseSelector);
-  Object.assign(styleObj, expanded);
-
-  // Process nested objects
-  const nested = processNestedStyles(rest, baseSelector);
-  Object.assign(styleObj, nested);
-
-  // Process animations
+  // Process animations (has its own dedicated fields)
   const _processAnimations = processAnimations(rest, baseSelector, className),
     animStyles = _processAnimations.styles,
     keyframes = _processAnimations.keyframes;
@@ -8597,6 +8703,60 @@ function generateBasicClassName(config) {
   return className;
 }
 
+// ============================================================================
+// Shared: Build a twsx-compatible style object from a style config object
+// Handles `_`, `tw` (Tailwind classes), raw CSS properties, pseudo shorthands,
+// breakpoints, and nested selectors — centralised so variants & slots reuse it.
+// ============================================================================
+
+/**
+ * Build a styleObj ready for twsx() from a style config value.
+ *
+ * @param {string|Object} styleValue - A Tailwind class string OR a mixed config object
+ * @param {string} selector          - The CSS selector to target (e.g. ".btn--color-primary")
+ * @returns {Object}                 - styleObj for twsx()
+ */
+function buildStyleObj(styleValue, selector) {
+  const styleObj = {};
+  if (typeof styleValue === "string") {
+    // Plain Tailwind class string
+    styleObj[selector] = processTokens(styleValue);
+    return styleObj;
+  }
+  if (typeof styleValue !== "object" || styleValue === null) return styleObj;
+
+  // Merge `_` and `tw` as Tailwind classes for this selector
+  const twClasses = [styleValue._, styleValue.tw].filter(Boolean).join(" ");
+
+  // Extract raw CSS properties
+  const rawCss = extractRawCssProps(styleValue);
+  if (twClasses && rawCss) {
+    // Both Tailwind classes AND raw CSS — use array form: [twClasses, { "@css": {...} }]
+    styleObj[selector] = [processTokens(twClasses), {
+      "@css": rawCss
+    }];
+  } else if (twClasses) {
+    styleObj[selector] = processTokens(twClasses);
+  } else if (rawCss) {
+    styleObj[selector] = [{
+      "@css": rawCss
+    }];
+  }
+
+  // Expand pseudo shorthands, breakpoints, nested selectors
+  const expanded = expandShorthands(styleValue, selector);
+  if (expanded.__rawCss__) {
+    // top-level rawCss already handled above; drop the marker
+    delete expanded.__rawCss__;
+  }
+  Object.assign(styleObj, expanded);
+
+  // Process nested style objects
+  const nested = processNestedStyles(styleValue, selector);
+  Object.assign(styleObj, nested);
+  return styleObj;
+}
+
 // ============================================================================
 // Core: Variants Mode
 // ============================================================================
@@ -8636,18 +8796,7 @@ function createVariants(config) {
   // Generate base styles
   if (base) {
     const baseSelector = ".".concat(baseClassName);
-    let styleObj = {};
-    if (typeof base === "string") {
-      styleObj[baseSelector] = processTokens(base);
-    } else if (typeof base === "object") {
-      if (base._) {
-        styleObj[baseSelector] = processTokens(base._);
-      }
-      const expanded = expandShorthands(base, baseSelector);
-      Object.assign(styleObj, expanded);
-      const nested = processNestedStyles(base, baseSelector);
-      Object.assign(styleObj, nested);
-    }
+    const styleObj = buildStyleObj(base, baseSelector);
     const baseCss = twsx(styleObj, {
       inject: false
     });
@@ -8655,28 +8804,17 @@ function createVariants(config) {
   }
 
   // Generate styles for each variant value
-  for (const _ref9 of Object.entries(variants)) {
-    var _ref0 = _slicedToArray(_ref9, 2);
-    const variantKey = _ref0[0];
-    const variantOptions = _ref0[1];
-    for (const _ref1 of Object.entries(variantOptions)) {
-      var _ref10 = _slicedToArray(_ref1, 2);
-      const optionKey = _ref10[0];
-      const optionValue = _ref10[1];
+  for (const _ref1 of Object.entries(variants)) {
+    var _ref10 = _slicedToArray(_ref1, 2);
+    const variantKey = _ref10[0];
+    const variantOptions = _ref10[1];
+    for (const _ref11 of Object.entries(variantOptions)) {
+      var _ref12 = _slicedToArray(_ref11, 2);
+      const optionKey = _ref12[0];
+      const optionValue = _ref12[1];
       const variantClassName = "".concat(baseClassName, "--").concat(variantKey, "-").concat(optionKey);
       const selector = ".".concat(variantClassName);
-      let styleObj = {};
-      if (typeof optionValue === "string") {
-        styleObj[selector] = processTokens(optionValue);
-      } else if (typeof optionValue === "object") {
-        if (optionValue._) {
-          styleObj[selector] = processTokens(optionValue._);
-        }
-        const expanded = expandShorthands(optionValue, selector);
-        Object.assign(styleObj, expanded);
-        const nested = processNestedStyles(optionValue, selector);
-        Object.assign(styleObj, nested);
-      }
+      const styleObj = buildStyleObj(optionValue, selector);
       const css = twsx(styleObj, {
         inject: false
       });
@@ -8687,10 +8825,10 @@ function createVariants(config) {
 
       // Generate responsive variant styles if enabled
       if (responsiveVariants.includes(variantKey)) {
-        for (const _ref11 of Object.entries(BREAKPOINTS)) {
-          var _ref12 = _slicedToArray(_ref11, 2);
-          const bp = _ref12[0];
-          const bpValue = _ref12[1];
+        for (const _ref13 of Object.entries(BREAKPOINTS)) {
+          var _ref14 = _slicedToArray(_ref13, 2);
+          const bp = _ref14[0];
+          const bpValue = _ref14[1];
           const respClassName = "".concat(baseClassName, "--").concat(bp, "-").concat(variantKey, "-").concat(optionKey);
           const respSelector = ".".concat(respClassName);
           const respStyleObj = {
@@ -8736,10 +8874,10 @@ function createVariants(config) {
   // Inject all CSS upfront
   if (inject) {
     let allCss = "";
-    for (const _ref13 of variantStyles.entries()) {
-      var _ref14 = _slicedToArray(_ref13, 2);
-      const key = _ref14[0];
-      const value = _ref14[1];
+    for (const _ref15 of variantStyles.entries()) {
+      var _ref16 = _slicedToArray(_ref15, 2);
+      const key = _ref16[0];
+      const value = _ref16[1];
       if (key === "__base__") {
         allCss += value + "\n";
       } else if (typeof value === "object" && value.css) {
@@ -8760,10 +8898,10 @@ function createVariants(config) {
     const classes = [baseClassName];
 
     // Add variant classes
-    for (const _ref15 of Object.entries(mergedProps)) {
-      var _ref16 = _slicedToArray(_ref15, 2);
-      const variantKey = _ref16[0];
-      const variantValue = _ref16[1];
+    for (const _ref17 of Object.entries(mergedProps)) {
+      var _ref18 = _slicedToArray(_ref17, 2);
+      const variantKey = _ref18[0];
+      const variantValue = _ref18[1];
       if (variantValue === undefined || variantValue === null) continue;
 
       // Handle boolean variants
@@ -8771,10 +8909,10 @@ function createVariants(config) {
 
       // Handle responsive variants: { size: { initial: 'sm', md: 'lg' } }
       if (typeof variantValue === "object" && !Array.isArray(variantValue)) {
-        for (const _ref17 of Object.entries(variantValue)) {
-          var _ref18 = _slicedToArray(_ref17, 2);
-          const bp = _ref18[0];
-          const bpVariantValue = _ref18[1];
+        for (const _ref19 of Object.entries(variantValue)) {
+          var _ref20 = _slicedToArray(_ref19, 2);
+          const bp = _ref20[0];
+          const bpVariantValue = _ref20[1];
           if (bp === "initial") {
             const variantData = variantStyles.get("".concat(variantKey, ":").concat(bpVariantValue));
             if (variantData) classes.push(variantData.className);
@@ -8792,18 +8930,18 @@ function createVariants(config) {
     }
 
     // Check compound variants
-    for (const _ref19 of variantStyles.entries()) {
-      var _ref20 = _slicedToArray(_ref19, 2);
-      const key = _ref20[0];
-      const data = _ref20[1];
+    for (const _ref21 of variantStyles.entries()) {
+      var _ref22 = _slicedToArray(_ref21, 2);
+      const key = _ref22[0];
+      const data = _ref22[1];
       if (!key.startsWith("__compound__:")) continue;
       const conditions = data.conditions,
         className = data.className;
       let matches = true;
-      for (const _ref21 of Object.entries(conditions)) {
-        var _ref22 = _slicedToArray(_ref21, 2);
-        const condKey = _ref22[0];
-        const condValue = _ref22[1];
+      for (const _ref23 of Object.entries(conditions)) {
+        var _ref24 = _slicedToArray(_ref23, 2);
+        const condKey = _ref24[0];
+        const condValue = _ref24[1];
         const propValue = mergedProps[condKey];
         const normalizedPropValue = propValue === true ? "true" : propValue === false ? "false" : propValue;
         if (Array.isArray(condValue)) {
@@ -8878,24 +9016,13 @@ function createSlots(config) {
   let allCss = "";
 
   // Generate base slot styles
-  for (const _ref23 of Object.entries(slots)) {
-    var _ref24 = _slicedToArray(_ref23, 2);
-    const slotName = _ref24[0];
-    const slotStyles = _ref24[1];
+  for (const _ref25 of Object.entries(slots)) {
+    var _ref26 = _slicedToArray(_ref25, 2);
+    const slotName = _ref26[0];
+    const slotStyles = _ref26[1];
     const slotClassName = "".concat(componentName, "__").concat(slotName);
     const selector = ".".concat(slotClassName);
-    let styleObj = {};
-    if (typeof slotStyles === "string") {
-      styleObj[selector] = processTokens(slotStyles);
-    } else if (typeof slotStyles === "object") {
-      if (slotStyles._) {
-        styleObj[selector] = processTokens(slotStyles._);
-      }
-      const expanded = expandShorthands(slotStyles, selector);
-      Object.assign(styleObj, expanded);
-      const nested = processNestedStyles(slotStyles, selector);
-      Object.assign(styleObj, nested);
-    }
+    const styleObj = buildStyleObj(slotStyles, selector);
     const css = twsx(styleObj, {
       inject: false
     });
@@ -8908,32 +9035,26 @@ function createSlots(config) {
 
   // Generate variant styles for each slot
   const variantSlotStyles = new Map();
-  for (const _ref25 of Object.entries(variants)) {
-    var _ref26 = _slicedToArray(_ref25, 2);
-    const variantKey = _ref26[0];
-    const variantOptions = _ref26[1];
-    for (const _ref27 of Object.entries(variantOptions)) {
-      var _ref28 = _slicedToArray(_ref27, 2);
-      const optionKey = _ref28[0];
-      const optionValue = _ref28[1];
-      if (typeof optionValue === "object" && !optionValue._) {
-        for (const _ref29 of Object.entries(optionValue)) {
-          var _ref30 = _slicedToArray(_ref29, 2);
-          const slotName = _ref30[0];
-          const slotStyles = _ref30[1];
+  for (const _ref27 of Object.entries(variants)) {
+    var _ref28 = _slicedToArray(_ref27, 2);
+    const variantKey = _ref28[0];
+    const variantOptions = _ref28[1];
+    for (const _ref29 of Object.entries(variantOptions)) {
+      var _ref30 = _slicedToArray(_ref29, 2);
+      const optionKey = _ref30[0];
+      const optionValue = _ref30[1];
+      // optionValue may be a slot-keyed object: { root: '...', header: '...' }
+      // Detect: it's an object, and its keys match slot names (not `_` / `tw` / raw CSS)
+      const isSlotMap = typeof optionValue === "object" && optionValue !== null && !optionValue._ && !optionValue.tw && !extractRawCssProps(optionValue) && Object.keys(optionValue).some(k => slots[k]);
+      if (isSlotMap) {
+        for (const _ref31 of Object.entries(optionValue)) {
+          var _ref32 = _slicedToArray(_ref31, 2);
+          const slotName = _ref32[0];
+          const slotStyles = _ref32[1];
           if (typeof slotStyles === "string" || typeof slotStyles === "object") {
             const variantClassName = "".concat(componentName, "__").concat(slotName, "--").concat(variantKey, "-").concat(optionKey);
             const selector = ".".concat(variantClassName);
-            let styleObj = {};
-            if (typeof slotStyles === "string") {
-              styleObj[selector] = processTokens(slotStyles);
-            } else {
-              if (slotStyles._) {
-                styleObj[selector] = processTokens(slotStyles._);
-              }
-              const expanded = expandShorthands(slotStyles, selector);
-              Object.assign(styleObj, expanded);
-            }
+            const styleObj = buildStyleObj(slotStyles, selector);
             const css = twsx(styleObj, {
               inject: false
             });
@@ -8957,22 +9078,22 @@ function createSlots(config) {
       const rest = _objectWithoutProperties(compound, _excluded3);
 
     // Check if compound has slot-specific styles
-    for (const _ref31 of slotData.entries()) {
-      var _ref32 = _slicedToArray(_ref31, 1);
-      const slotName = _ref32[0];
-      if (rest[slotName] && typeof rest[slotName] === "string") {
+    for (const _ref33 of slotData.entries()) {
+      var _ref34 = _slicedToArray(_ref33, 1);
+      const slotName = _ref34[0];
+      const slotValue = rest[slotName];
+      if (slotValue && (typeof slotValue === "string" || typeof slotValue === "object")) {
         const compoundClassName = "".concat(componentName, "__").concat(slotName, "--compound-").concat(i);
         const selector = ".".concat(compoundClassName);
-        const css = twsx({
-          [selector]: processTokens(rest[slotName])
-        }, {
+        const styleObj = buildStyleObj(slotValue, selector);
+        const css = twsx(styleObj, {
           inject: false
         });
         const conditions = {};
-        for (const _ref33 of Object.entries(rest)) {
-          var _ref34 = _slicedToArray(_ref33, 2);
-          const k = _ref34[0];
-          const v = _ref34[1];
+        for (const _ref35 of Object.entries(rest)) {
+          var _ref36 = _slicedToArray(_ref35, 2);
+          const k = _ref36[0];
+          const v = _ref36[1];
           if (!slots[k]) conditions[k] = v;
         }
         variantSlotStyles.set("__compound__:".concat(i, ":").concat(slotName), {
@@ -8997,17 +9118,17 @@ function createSlots(config) {
     let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const mergedProps = _objectSpread2(_objectSpread2({}, defaultVariants), props);
     const result = {};
-    for (const _ref35 of slotData.entries()) {
-      var _ref36 = _slicedToArray(_ref35, 2);
-      const slotName = _ref36[0];
-      const data = _ref36[1];
+    for (const _ref37 of slotData.entries()) {
+      var _ref38 = _slicedToArray(_ref37, 2);
+      const slotName = _ref38[0];
+      const data = _ref38[1];
       const classes = [data.className];
 
       // Add variant classes for this slot
-      for (const _ref37 of Object.entries(mergedProps)) {
-        var _ref38 = _slicedToArray(_ref37, 2);
-        const variantKey = _ref38[0];
-        const variantValue = _ref38[1];
+      for (const _ref39 of Object.entries(mergedProps)) {
+        var _ref40 = _slicedToArray(_ref39, 2);
+        const variantKey = _ref40[0];
+        const variantValue = _ref40[1];
         if (variantValue === undefined || variantValue === null) continue;
         const normalizedValue = variantValue === true ? "true" : variantValue === false ? "false" : variantValue;
         const key = "".concat(variantKey, ":").concat(normalizedValue, ":").concat(slotName);
@@ -9018,18 +9139,18 @@ function createSlots(config) {
       }
 
       // Check compound variants for this slot
-      for (const _ref39 of variantSlotStyles.entries()) {
-        var _ref40 = _slicedToArray(_ref39, 2);
-        const key = _ref40[0];
-        const data = _ref40[1];
+      for (const _ref41 of variantSlotStyles.entries()) {
+        var _ref42 = _slicedToArray(_ref41, 2);
+        const key = _ref42[0];
+        const data = _ref42[1];
         if (!key.startsWith("__compound__:") || !key.endsWith(":".concat(slotName))) continue;
         const conditions = data.conditions,
           className = data.className;
         let matches = true;
-        for (const _ref41 of Object.entries(conditions)) {
-          var _ref42 = _slicedToArray(_ref41, 2);
-          const condKey = _ref42[0];
-          const condValue = _ref42[1];
+        for (const _ref43 of Object.entries(conditions)) {
+          var _ref44 = _slicedToArray(_ref43, 2);
+          const condKey = _ref44[0];
+          const condValue = _ref44[1];
           const propValue = mergedProps[condKey];
           const normalizedPropValue = propValue === true ? "true" : propValue === false ? "false" : propValue;
           const normalizedCondValue = condValue === true ? "true" : condValue === false ? "false" : condValue;
@@ -9057,10 +9178,10 @@ function createSlots(config) {
     let slotOverrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const baseSlots = typeof props === "object" && !Array.isArray(props) && !("$$typeof" in props) ? slotsGenerator(props) : slotsGenerator();
     const result = {};
-    for (const _ref43 of Object.entries(baseSlots)) {
-      var _ref44 = _slicedToArray(_ref43, 2);
-      const slotName = _ref44[0];
-      const slotClasses = _ref44[1];
+    for (const _ref45 of Object.entries(baseSlots)) {
+      var _ref46 = _slicedToArray(_ref45, 2);
+      const slotName = _ref46[0];
+      const slotClasses = _ref46[1];
       result[slotName] = cx(slotClasses, slotOverrides[slotName]);
     }
     return result;
@@ -9230,17 +9351,17 @@ twsxClassName.setTheme = function (name) {
     // Apply theme tokens to CSS variables
     if (IS_BROWSER) {
       const root = document.documentElement;
-      for (const _ref45 of Object.entries(themes[name])) {
-        var _ref46 = _slicedToArray(_ref45, 2);
-        const key = _ref46[0];
-        const value = _ref46[1];
+      for (const _ref47 of Object.entries(themes[name])) {
+        var _ref48 = _slicedToArray(_ref47, 2);
+        const key = _ref48[0];
+        const value = _ref48[1];
         if (typeof value === "string") {
           root.style.setProperty("--".concat(key), value);
         } else if (typeof value === "object") {
-          for (const _ref47 of Object.entries(value)) {
-            var _ref48 = _slicedToArray(_ref47, 2);
-            const subKey = _ref48[0];
-            const subValue = _ref48[1];
+          for (const _ref49 of Object.entries(value)) {
+            var _ref50 = _slicedToArray(_ref49, 2);
+            const subKey = _ref50[0];
+            const subValue = _ref50[1];
             root.style.setProperty("--".concat(key, "-").concat(subKey), subValue);
           }
         }