@cube-dev/ui-kit 0.76.0 → 0.76.2

package/es/stories/Form.legacy-stories.js

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

package/es/stories/FormFieldArgs.js

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

package/es/stories/Layout.stories.js

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

package/es/stories/Tasty.stories.js

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

package/es/stories/components/ConfirmDeletionDialogForm.js

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

package/es/stories/components/DialogFormApp.js

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

package/es/stories/components/StyledButton.js

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

package/es/stories/lists/baseProps.js

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

package/es/tasty/debug.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.76.0
+ * @cube-dev/ui-kit v0.76.2
  * Released under the MIT license.
  */
 
@@ -370,63 +370,70 @@ export const tastyDebug = {
         const { root } = opts || {};
         injector.instance.resetMetrics({ root });
     },
-    // 5) Tasty global CSS and selector analysis
-    global(opts) {
-        const { root = document, log = false } = opts || {};
-        const css = getGlobalCSS(root);
-        const rules = extractCSSRules(css);
-        // Analyze selectors
-        const selectors = {
-            elements: [],
-            classes: [],
-            ids: [],
-            pseudoClasses: [],
-            mediaQueries: [],
-            keyframes: [],
-            other: [],
-        };
-        rules.forEach((rule) => {
-            const selector = rule.selector;
-            if (selector.startsWith('@media')) {
-                selectors.mediaQueries.push(selector);
-            }
-            else if (selector.startsWith('@keyframes')) {
-                selectors.keyframes.push(selector);
-            }
-            else if (selector.includes('.') &&
-                !selector.includes('#') &&
-                !selector.includes(':')) {
-                selectors.classes.push(selector);
-            }
-            else if (selector.includes('#') &&
-                !selector.includes('.') &&
-                !selector.includes(':')) {
-                selectors.ids.push(selector);
-            }
-            else if (selector.includes(':')) {
-                selectors.pseudoClasses.push(selector);
-            }
-            else if (/^[a-zA-Z][a-zA-Z0-9]*$/.test(selector.trim())) {
-                selectors.elements.push(selector);
+    // 5) Get CSS for specific global types
+    getGlobalTypeCSS(type, opts) {
+        const { root = document } = opts || {};
+        const registry = injector.instance['sheetManager']?.getRegistry(root);
+        if (!registry) {
+            return { css: '', ruleCount: 0, size: 0 };
+        }
+        const cssChunks = [];
+        let ruleCount = 0;
+        if (type === 'keyframes') {
+            // Handle keyframes separately - they're stored in keyframesCache
+            for (const [, entry] of registry.keyframesCache) {
+                const info = entry.info;
+                const sheet = registry.sheets[info.sheetIndex];
+                const styleSheet = sheet?.sheet?.sheet;
+                if (styleSheet && info.ruleIndex < styleSheet.cssRules.length) {
+                    const rule = styleSheet.cssRules[info.ruleIndex];
+                    if (rule) {
+                        cssChunks.push(rule.cssText);
+                        ruleCount++;
+                    }
+                }
+                else if (info.cssText) {
+                    cssChunks.push(info.cssText);
+                    ruleCount++;
+                }
             }
-            else {
-                selectors.other.push(selector);
+        }
+        else {
+            // Handle other global types stored in globalRules
+            const prefix = type === 'global' ? 'global:' : type === 'raw' ? 'raw:' : 'property:';
+            for (const [key, ruleInfo] of registry.globalRules) {
+                if (key.startsWith(prefix)) {
+                    const sheet = registry.sheets[ruleInfo.sheetIndex];
+                    const styleSheet = sheet?.sheet?.sheet;
+                    if (styleSheet) {
+                        const start = Math.max(0, ruleInfo.ruleIndex);
+                        const end = Math.min(styleSheet.cssRules.length - 1, ruleInfo.endRuleIndex ?? ruleInfo.ruleIndex);
+                        if (start >= 0 &&
+                            end >= start &&
+                            start < styleSheet.cssRules.length) {
+                            for (let i = start; i <= end; i++) {
+                                const rule = styleSheet.cssRules[i];
+                                if (rule) {
+                                    cssChunks.push(rule.cssText);
+                                    ruleCount++;
+                                }
+                            }
+                        }
+                    }
+                    else if (ruleInfo.cssText && ruleInfo.cssText.length) {
+                        // Fallback in environments without CSSOM access
+                        cssChunks.push(...ruleInfo.cssText);
+                        ruleCount += ruleInfo.cssText.length;
+                    }
+                }
             }
-        });
-        const result = {
-            css,
-            totalRules: rules.length,
-            totalCSSSize: css.length,
-            selectors,
-        };
-        if (log) {
-            console.group(`🌍 Global CSS (${result.totalRules} rules)`);
-            console.log(`📊 Size: ${result.totalCSSSize} characters`);
-            console.log('🎯 Selector breakdown:', result.selectors);
-            console.log('🎨 CSS:\n' + result.css);
-            console.groupEnd();
         }
-        return result;
+        const rawCSS = cssChunks.join('\n');
+        return {
+            css: prettifyCSS(rawCSS),
+            ruleCount,
+            size: rawCSS.length, // Use raw CSS size for consistent calculations
+        };
     },
     // 6) Defined @property and keyframes
     defs(opts) {
@@ -483,12 +490,21 @@ export const tastyDebug = {
     summary(opts) {
         const { root = document, log = false, includePageCSS = false } = opts || {};
         const cacheStatus = this.cache({ root });
-        const globalBreakdown = this.global({ root });
         const definitions = this.defs({ root });
         const metrics = this.metrics({ root });
         const activeCSS = this.css('active', { root, prettify: false });
         const unusedCSS = this.css('unused', { root, prettify: false });
         const allCSS = this.css('all', { root, prettify: false });
+        // Calculate global CSS by subtracting class-based CSS from total
+        const classCSSSize = activeCSS.length + unusedCSS.length;
+        const totalGlobalCSSSize = allCSS.length - classCSSSize;
+        // Get CSS for each global type separately for display purposes
+        const globalData = this.getGlobalTypeCSS('global', { root });
+        const rawData = this.getGlobalTypeCSS('raw', { root });
+        const keyframesData = this.getGlobalTypeCSS('keyframes', { root });
+        const propertyData = this.getGlobalTypeCSS('property', { root });
+        // Use the calculated sizes to avoid double-counting
+        const globalTypesTotalSize = globalData.size + rawData.size + keyframesData.size + propertyData.size;
         // Build cleanup summary from metrics
         const cleanupSummary = {
             enabled: !!metrics,
@@ -527,19 +543,47 @@ export const tastyDebug = {
                     : undefined,
             };
         }
+        // If individual extraction matches total, use individual sizes
+        // Otherwise, proportionally scale the individual sizes to match the total
+        const useIndividualSizes = Math.abs(globalTypesTotalSize - totalGlobalCSSSize) < 100;
+        let adjustedGlobalSizes;
+        if (useIndividualSizes) {
+            adjustedGlobalSizes = {
+                globalCSSSize: globalData.size,
+                rawCSSSize: rawData.size,
+                keyframesCSSSize: keyframesData.size,
+                propertyCSSSize: propertyData.size,
+            };
+        }
+        else {
+            // Scale proportionally to match the actual total
+            const scaleFactor = totalGlobalCSSSize / globalTypesTotalSize;
+            adjustedGlobalSizes = {
+                globalCSSSize: Math.round(globalData.size * scaleFactor),
+                rawCSSSize: Math.round(rawData.size * scaleFactor),
+                keyframesCSSSize: Math.round(keyframesData.size * scaleFactor),
+                propertyCSSSize: Math.round(propertyData.size * scaleFactor),
+            };
+        }
         const summary = {
             activeClasses: cacheStatus.classes.active,
             unusedClasses: cacheStatus.classes.unused,
             totalStyledClasses: cacheStatus.classes.all,
             activeCSSSize: activeCSS.length,
             unusedCSSSize: unusedCSS.length,
+            ...adjustedGlobalSizes,
             totalCSSSize: allCSS.length,
             activeCSS: prettifyCSS(activeCSS),
             unusedCSS: prettifyCSS(unusedCSS),
+            globalCSS: globalData.css,
+            rawCSS: rawData.css,
+            keyframesCSS: keyframesData.css,
+            propertyCSS: propertyData.css,
             allCSS: prettifyCSS(allCSS),
-            globalCSS: globalBreakdown.css,
-            globalCSSSize: globalBreakdown.totalCSSSize,
-            globalRuleCount: globalBreakdown.totalRules,
+            globalRuleCount: globalData.ruleCount,
+            rawRuleCount: rawData.ruleCount,
+            keyframesRuleCount: keyframesData.ruleCount,
+            propertyRuleCount: propertyData.ruleCount,
             page,
             metrics,
             definedProperties: definitions.properties,
@@ -557,8 +601,36 @@ export const tastyDebug = {
             console.log(`💾 CSS Size:`);
             console.log(`  • Active CSS: ${summary.activeCSSSize} characters`);
             console.log(`  • Unused CSS: ${summary.unusedCSSSize} characters`);
-            console.log(`  • Global CSS: ${summary.globalCSSSize} characters (${summary.globalRuleCount} rules)`);
-            console.log(`  • Total CSS: ${summary.totalCSSSize} characters`);
+            console.log(`  • Global CSS (injectGlobal): ${summary.globalCSSSize} characters (${summary.globalRuleCount} rules)`);
+            console.log(`  • Raw CSS (createGlobalStyle): ${summary.rawCSSSize} characters (${summary.rawRuleCount} rules)`);
+            console.log(`  • Keyframes CSS: ${summary.keyframesCSSSize} characters (${summary.keyframesRuleCount} rules)`);
+            console.log(`  • Property CSS: ${summary.propertyCSSSize} characters (${summary.propertyRuleCount} rules)`);
+            // Show breakdown calculation
+            const calculatedTotal = summary.activeCSSSize +
+                summary.unusedCSSSize +
+                summary.globalCSSSize +
+                summary.rawCSSSize +
+                summary.keyframesCSSSize +
+                summary.propertyCSSSize;
+            console.log(`  • Calculated Total: ${calculatedTotal} characters`);
+            console.log(`  • Actual Total: ${summary.totalCSSSize} characters`);
+            const difference = Math.abs(calculatedTotal - summary.totalCSSSize);
+            if (difference > 100) {
+                console.warn(`  ⚠️  Size mismatch: ${difference} characters difference`);
+                // Debug: show what might be missing
+                console.group('🔍 Debugging size mismatch:');
+                console.log(`Active + Unused = ${summary.activeCSSSize + summary.unusedCSSSize}`);
+                console.log(`All Global Types = ${summary.globalCSSSize + summary.rawCSSSize + summary.keyframesCSSSize + summary.propertyCSSSize}`);
+                console.log(`Class-based vs Total difference = ${summary.totalCSSSize - (summary.activeCSSSize + summary.unusedCSSSize)}`);
+                // Show scaling information
+                console.log(`Raw global extraction total: ${globalTypesTotalSize}`);
+                console.log(`Calculated global size: ${totalGlobalCSSSize}`);
+                console.log(`Used individual sizes: ${useIndividualSizes}`);
+                if (!useIndividualSizes) {
+                    console.log(`Scale factor applied: ${(totalGlobalCSSSize / globalTypesTotalSize).toFixed(3)}`);
+                }
+                console.groupEnd();
+            }
             if (page) {
                 console.log(`📄 Page CSS:`);
                 console.log(`  • Total page CSS: ${page.cssSize} characters`);

package/es/tasty/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * Released under the MIT license.
  */
 
@@ -98,6 +98,12 @@ export function inject(rules, options) {
 export function injectGlobal(rules, options) {
     return getGlobalInjector().injectGlobal(rules, options);
 }
+/**
+ * Internal method for createGlobalStyle - not exported publicly
+ */
+function injectCreateGlobalStyle(rules, options) {
+    return getGlobalInjector().injectCreateGlobalStyle(rules, options);
+}
 /**
  * Inject keyframes and return object with toString() and dispose()
  */

package/es/tasty/injector/injector.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.76.0
+ * @cube-dev/ui-kit v0.76.2
  * Released under the MIT license.
  */
 
@@ -201,6 +201,28 @@ export class StyleInjector {
             },
         };
     }
+    /**
+     * Inject styles from createGlobalStyle (separate from injectGlobal for tracking)
+     */
+    injectCreateGlobalStyle(rules, options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        if (!rules || rules.length === 0) {
+            return { dispose: () => { } };
+        }
+        // Use a different prefix to distinguish from injectGlobal
+        const key = `raw:${this.globalRuleCounter++}`;
+        const info = this.sheetManager.insertGlobalRule(registry, rules, key, root);
+        if (registry.metrics) {
+            registry.metrics.totalInsertions++;
+        }
+        return {
+            dispose: () => {
+                if (info)
+                    this.sheetManager.deleteGlobalRule(registry, key);
+            },
+        };
+    }
     /**
      * Dispose of a className
      */
@@ -442,8 +464,8 @@ export class StyleInjector {
                 const css = this.interpolateTemplate();
                 if (css.trim()) {
                     const styleResults = this.parseCSSToStyleResults(css);
-                    // Bind the global inject method to the outer injector instance
-                    const result = injector.injectGlobal(styleResults, {
+                    // Use a special method for createGlobalStyle to distinguish from injectGlobal
+                    const result = injector.injectCreateGlobalStyle(styleResults, {
                         root: this.props.root,
                     });
                     this.disposeFunction = result.dispose;

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * Released under the MIT license.
  */
 

package/es/tasty/providers/BreakpointsProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * Released under the MIT license.
  */
 

package/es/tasty/styles/dimension.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * Released under the MIT license.
  */
 

package/es/tasty/styles/font.js

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

package/es/tasty/styles/fontStyle.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * Released under the MIT license.
  */
 

package/es/tasty/styles/groupRadius.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * 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.76.0
+ * @cube-dev/ui-kit v0.76.2
  * Released under the MIT license.
  */