@cube-dev/ui-kit 0.109.0 → 0.111.0

package/es/tasty/hooks/useStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 
@@ -10,7 +10,6 @@ import { categorizeStyleKeys, CHUNK_NAMES, generateChunkCacheKey, renderStylesFo
 import { getGlobalKeyframes, hasGlobalKeyframes } from '../config.js';
 import { allocateClassName, inject, keyframes, property } from '../injector/index.js';
 import { extractAnimationNamesFromStyles, extractLocalKeyframes, filterUsedKeyframes, hasLocalKeyframes, mergeKeyframes, replaceAnimationNames, } from '../keyframes/index.js';
-import { renderStyles } from '../pipeline/index.js';
 import { extractLocalProperties, hasLocalProperties } from '../properties/index.js';
 import { stringifyStyles } from '../utils/styles.js';
 /**
@@ -18,11 +17,55 @@ import { stringifyStyles } from '../utils/styles.js';
  *
  * @starting-style CSS cannot be applied via multiple class names because
  * of cascade - later rules override earlier ones. When @starting is detected,
- * we disable chunking and use a single class name for all styles.
+ * we combine top-level styles into a single chunk but keep sub-element styles
+ * in their own chunk for better caching.
  */
 function containsStartingStyle(styleKey) {
     return styleKey.includes('@starting');
 }
+/**
+ * Render, cache-key, and allocate a className for a single chunk.
+ * Returns a ProcessedChunk, or null if the chunk produces no CSS rules.
+ */
+function processChunk(styles, chunkName, styleKeys) {
+    if (styleKeys.length === 0)
+        return null;
+    const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);
+    if (renderResult.rules.length === 0)
+        return null;
+    const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);
+    const { className } = allocateClassName(cacheKey);
+    return { name: chunkName, styleKeys, cacheKey, renderResult, className };
+}
+/**
+ * Merge chunk map entries for @starting-style partial chunking.
+ *
+ * All non-subcomponent chunks are merged into a single COMBINED entry,
+ * while SUBCOMPONENTS stays separate. This preserves CSS cascade for
+ * @starting-style while still allowing sub-element styles to cache independently.
+ */
+function mergeChunksForStartingStyle(chunkMap) {
+    const merged = new Map();
+    const combinedKeys = [];
+    for (const [chunkName, keys] of chunkMap) {
+        if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) {
+            merged.set(CHUNK_NAMES.SUBCOMPONENTS, keys);
+        }
+        else {
+            combinedKeys.push(...keys);
+        }
+    }
+    if (combinedKeys.length > 0) {
+        // Insert COMBINED first so it appears before SUBCOMPONENTS
+        const result = new Map();
+        result.set(CHUNK_NAMES.COMBINED, combinedKeys);
+        for (const [k, v] of merged) {
+            result.set(k, v);
+        }
+        return result;
+    }
+    return merged;
+}
 /**
  * Get keyframes that are actually used in styles.
  * Returns null if no keyframes are used (fast path for zero overhead).
@@ -95,50 +138,21 @@ export function useStyles(styles) {
         if (!styleKey || !currentStyles) {
             return [];
         }
-        // Disable chunking for styles containing @starting-style rules.
-        // @starting-style CSS cannot work with multiple class names due to cascade -
-        // the rules would override each other instead of combining properly.
+        // Categorize style keys into chunks
+        let chunkMap = categorizeStyleKeys(currentStyles);
+        // Partial chunking for styles containing @starting-style rules.
+        // @starting-style CSS cannot work with multiple class names due to cascade,
+        // so we merge all top-level chunks into one but keep sub-element styles separate.
         if (containsStartingStyle(styleKey)) {
-            const renderResult = renderStyles(currentStyles);
-            if (renderResult.rules.length === 0) {
-                return [];
-            }
-            const { className } = allocateClassName(styleKey);
-            return [
-                {
-                    name: CHUNK_NAMES.COMBINED,
-                    styleKeys: Object.keys(currentStyles),
-                    cacheKey: styleKey,
-                    renderResult,
-                    className,
-                },
-            ];
+            chunkMap = mergeChunksForStartingStyle(chunkMap);
         }
-        // Categorize style keys into chunks
-        const chunkMap = categorizeStyleKeys(currentStyles);
+        // Process each chunk: render → cache key → allocate className
         const chunks = [];
         for (const [chunkName, chunkStyleKeys] of chunkMap) {
-            // Skip empty chunks
-            if (chunkStyleKeys.length === 0) {
-                continue;
-            }
-            // Generate cache key for this chunk
-            const cacheKey = generateChunkCacheKey(currentStyles, chunkName, chunkStyleKeys);
-            // Render styles for this chunk
-            const renderResult = renderStylesForChunk(currentStyles, chunkName, chunkStyleKeys);
-            // Skip chunks with no rules
-            if (renderResult.rules.length === 0) {
-                continue;
+            const chunk = processChunk(currentStyles, chunkName, chunkStyleKeys);
+            if (chunk) {
+                chunks.push(chunk);
             }
-            // Allocate className for this chunk (safe in render phase)
-            const { className } = allocateClassName(cacheKey);
-            chunks.push({
-                name: chunkName,
-                styleKeys: chunkStyleKeys,
-                cacheKey,
-                renderResult,
-                className,
-            });
         }
         return chunks;
     }, [styleKey]);

package/es/tasty/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/injector/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/injector/injector.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 
@@ -9,7 +9,7 @@
  * Style injector that works with structured style objects
  * Eliminates CSS string parsing for better performance
  */
-import { getEffectiveDefinition, normalizePropertyDefinition, } from '../properties/index.js';
+import { colorInitialValueToRgb, getEffectiveDefinition, normalizePropertyDefinition, } from '../properties/index.js';
 import { isDevEnv } from '../utils/is-dev-env.js';
 import { parseStyle } from '../utils/styles.js';
 import { SheetManager } from './sheet-manager.js';
@@ -401,6 +401,19 @@ export class StyleInjector {
         }
         // Track that this property was injected with its normalized definition
         registry.injectedProperties.set(cssName, normalizedDef);
+        // Auto-register companion -rgb property for color properties.
+        // E.g. --white-color gets a companion --white-color-rgb with syntax: '<number>+'
+        if (effectiveResult.isColor) {
+            const rgbCssName = `${cssName}-rgb`;
+            if (!this.isPropertyDefined(rgbCssName, { root })) {
+                this.property(rgbCssName, {
+                    syntax: '<number>+',
+                    inherits: definition.inherits,
+                    initialValue: colorInitialValueToRgb(definition.initialValue),
+                    root,
+                });
+            }
+        }
     }
     /**
      * Check whether a given @property name was already injected by this injector.

package/es/tasty/injector/sheet-manager.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/injector/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/keyframes/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/parser/classify.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/parser/const.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/parser/lru.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/parser/parser.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/parser/tokenizer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/parser/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/pipeline/conditions.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/pipeline/exclusive.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/pipeline/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/pipeline/materialize.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/pipeline/parseStateKey.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/pipeline/simplify.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/plugins/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/plugins/okhsl-plugin.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/plugins/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/properties/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 
@@ -15,6 +15,7 @@
  * - `$name` for regular properties → `--name`
  * - `#name` for color properties → `--name-color` (auto-sets syntax: '<color>')
  */
+import { getRgbValuesFromRgbaString, strToRgb } from '../utils/styles.js';
 // ============================================================================
 // Constants
 // ============================================================================
@@ -184,6 +185,7 @@ export function getEffectiveDefinition(token, userDefinition) {
         return {
             cssName: '',
             definition: userDefinition,
+            isColor: false,
             isValid: false,
             error: parsed.error,
         };
@@ -197,6 +199,7 @@ export function getEffectiveDefinition(token, userDefinition) {
                 inherits: userDefinition.inherits, // Allow inherits to be customized
                 initialValue: userDefinition.initialValue ?? 'transparent', // Default to transparent
             },
+            isColor: true,
             isValid: true,
         };
     }
@@ -204,8 +207,33 @@ export function getEffectiveDefinition(token, userDefinition) {
     return {
         cssName: parsed.cssName,
         definition: userDefinition,
+        isColor: false,
         isValid: true,
     };
 }
+// ============================================================================
+// Color RGB Companion Helpers
+// ============================================================================
+/**
+ * Extract RGB triplet string from a color initial value.
+ * Used when auto-creating the companion `-rgb` property for color @property definitions.
+ *
+ * @param initialValue - The color property's initial value (e.g., 'rgb(255 255 255)', 'transparent', '#fff')
+ * @returns Space-separated RGB triplet (e.g., '255 255 255'), defaults to '0 0 0'
+ */
+export function colorInitialValueToRgb(initialValue) {
+    if (initialValue == null)
+        return '0 0 0';
+    const str = String(initialValue).trim();
+    if (!str || str === 'transparent')
+        return '0 0 0';
+    const rgba = strToRgb(str);
+    if (rgba) {
+        const values = getRgbValuesFromRgbaString(rgba);
+        if (values.length >= 3)
+            return values.slice(0, 3).join(' ');
+    }
+    return '0 0 0';
+}
 
         

package/es/tasty/states/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/static/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/static/tastyStatic.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/static/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/align.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/border.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/boxShadow.combinator.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/color.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/createStyle.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 
@@ -13,6 +13,13 @@ const CACHE = {};
  * Example: var(--primary-color, var(--secondary-color)) → var(--primary-color-rgb, var(--secondary-color-rgb))
  */
 export function convertColorChainToRgbChain(colorValue) {
+    // Handle rgb(var(--name-color-rgb) / alpha) pattern.
+    // When #name.opacity is parsed, the classifier produces rgb(var(--name-color-rgb) / .opacity).
+    // The RGB chain should be just the inner var() reference, without the rgb() wrapper and opacity.
+    const rgbVarMatch = colorValue.match(/^rgba?\(\s*(var\(--[a-z0-9-]+-color-rgb\))\s*\//);
+    if (rgbVarMatch) {
+        return rgbVarMatch[1];
+    }
     // Match var(--name-color, ...) pattern
     const varPattern = /var\(--([a-z0-9-]+)-color\s*(?:,\s*(.+))?\)/;
     const match = colorValue.match(varPattern);

package/es/tasty/styles/dimension.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/display.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/fade.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/fill.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/flow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/gap.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/height.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/inset.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/justify.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/list.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.109.0
+ * @cube-dev/ui-kit v0.111.0
  * Released under the MIT license.
  */