@cube-dev/ui-kit 0.0.0-canary-e9dc427 → 0.0.0-canary-5eba492

package/es/tasty/tasty.js

@@ -1,22 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 
-import { createElement, forwardRef, useContext, useInsertionEffect, useMemo, useRef, } from 'react';
+import { createElement, forwardRef, useMemo, } from 'react';
 import { isValidElementType } from 'react-is';
-import { allocateClassName, inject, injectGlobal } from './injector';
-import { BreakpointsContext } from './providers/BreakpointsProvider';
+import { useStyles } from './hooks/useStyles';
 import { BASE_STYLES } from './styles/list';
-import { cacheWrapper } from './utils/cache-wrapper';
 import { getDisplayName } from './utils/getDisplayName';
 import { mergeStyles } from './utils/mergeStyles';
 import { modAttrs } from './utils/modAttrs';
 import { processTokens, stringifyTokens } from './utils/processTokens';
-import { renderStyles } from './utils/renderStyles';
-import { stringifyStyles } from './utils/styles';
 /**
  * Mapping of is* properties to their corresponding HTML attributes
  */
@@ -46,52 +42,13 @@ function handleIsProperties(props) {
         }
     }
 }
-/**
- * Simple hash function for internal cache keys
- */
-// Generate unique cache key for style deduplication
-function generateStyleCacheKey(styleKey, contextKey) {
-    // Use null character as separator for better performance and no collision risk
-    return contextKey ? `${styleKey}\0${contextKey}` : styleKey;
-}
 // Implementation
 export function tasty(Component, options) {
-    if (typeof Component === 'string') {
-        return tastyGlobal(Component, options);
-    }
     if (isValidElementType(Component)) {
         return tastyWrap(Component, options);
     }
     return tastyElement(Component);
 }
-// Internal specialized implementations
-function tastyGlobal(selector, styles) {
-    const _StyleDeclarationComponent = ({ breakpoints, }) => {
-        let contextBreakpoints = useContext(BreakpointsContext);
-        const breakpointsList = (breakpoints ?? contextBreakpoints) || [980];
-        const disposeRef = useRef(null);
-        const styleResults = useMemo(() => {
-            if (!styles)
-                return [];
-            return renderStyles(styles, breakpointsList, selector);
-        }, [selector, styles, breakpointsList]);
-        // Inject styles at insertion phase; cleanup on change/unmount
-        useInsertionEffect(() => {
-            disposeRef.current?.();
-            if (styleResults.length === 0)
-                return;
-            const { dispose } = injectGlobal(styleResults);
-            disposeRef.current = dispose;
-            return () => {
-                disposeRef.current?.();
-                disposeRef.current = null;
-            };
-        }, [styleResults]);
-        return null;
-    };
-    _StyleDeclarationComponent.displayName = `TastyStyleDeclaration(${selector})`;
-    return _StyleDeclarationComponent;
-}
 function tastyWrap(Component, options) {
     let { as: extendTag, element: extendElement, ...defaultProps } = (options ?? {});
     let propsWithStyles = ['styles'].concat(Object.keys(defaultProps).filter((prop) => prop.endsWith('Styles')));
@@ -162,18 +119,10 @@ function tastyElement(tastyOptions) {
         });
     }
     else {
-        /**
-         * An additional optimization that allows to avoid rendering styles across various instances
-         * of the same element if no custom styles are provided via `styles` prop or direct style props.
-         */
-        const renderDefaultStyles = cacheWrapper((breakpoints) => {
-            // Return rules without className - injector will add it
-            return renderStyles(defaultStyles || {}, breakpoints);
-        });
         let { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps ?? {};
         // eslint-disable-next-line react/display-name
         _TastyComponent = forwardRef((allProps, ref) => {
-            let { as, styles, variant: _omitVariant, breakpoints, mods, element, qa, qaVal, className: userClassName, tokens, style, ...otherProps } = allProps;
+            let { as, styles, variant: _omitVariant, mods, element, qa, qaVal, className: userClassName, tokens, style, ...otherProps } = allProps;
             // Optimize propStyles extraction - avoid creating empty objects
             let propStyles = null;
             const propsToCheck = styleProps
@@ -192,66 +141,17 @@ function tastyElement(tastyOptions) {
                 (styles && Object.keys(styles).length === 0)) {
                 styles = undefined;
             }
-            let contextBreakpoints = useContext(BreakpointsContext);
-            breakpoints = breakpoints ?? contextBreakpoints;
-            // Memoize breakpoints key once
-            const breakpointsKey = useMemo(() => breakpoints?.join(',') || '', [breakpoints?.join(',')]);
-            const propStylesKey = stringifyStyles(propStyles);
-            // Optimize style computation and cache key generation
-            const { allStyles, cacheKey, useDefaultStyles } = useMemo(() => {
+            // Merge default styles with instance styles and prop styles
+            const allStyles = useMemo(() => {
                 const hasStyles = styles && Object.keys(styles).length > 0;
                 const hasPropStyles = propStyles && Object.keys(propStyles).length > 0;
-                const useDefault = !hasStyles && !hasPropStyles;
-                const merged = useDefault
-                    ? defaultStyles
-                    : mergeStyles(defaultStyles, styles, propStyles);
-                // Generate cache key for style deduplication
-                const styleKey = stringifyStyles(merged || {});
-                const key = generateStyleCacheKey(styleKey, breakpointsKey ? `bp:${breakpointsKey}` : undefined);
-                return {
-                    allStyles: merged,
-                    cacheKey: key,
-                    useDefaultStyles: useDefault,
-                };
-            }, [styles, propStylesKey, breakpointsKey]);
-            // Compute rules synchronously; inject via insertion effect
-            const directResult = useMemo(() => {
-                if (useDefaultStyles) {
-                    return renderDefaultStyles(breakpoints);
-                }
-                else if (allStyles && Object.keys(allStyles).length > 0) {
-                    // Return rules without className - injector will add it
-                    return renderStyles(allStyles, breakpoints);
-                }
-                else {
-                    return { rules: [], className: '' };
-                }
-            }, [useDefaultStyles, allStyles, breakpointsKey, cacheKey]);
-            const disposeRef = useRef(null);
-            // Allocate className in render phase (safe for React Strict Mode)
-            const allocatedClassName = useMemo(() => {
-                if (!directResult.rules.length || !cacheKey)
-                    return '';
-                const { className } = allocateClassName(cacheKey);
-                return className;
-            }, [directResult.rules.length, cacheKey]);
-            // Inject styles in insertion effect (avoids render phase side effects)
-            useInsertionEffect(() => {
-                // Cleanup previous disposal reference
-                disposeRef.current?.();
-                if (directResult.rules.length > 0) {
-                    const injectionResult = inject(directResult.rules, { cacheKey });
-                    disposeRef.current = injectionResult.dispose;
-                }
-                else {
-                    disposeRef.current = null;
+                if (!hasStyles && !hasPropStyles) {
+                    return defaultStyles;
                 }
-                return () => {
-                    disposeRef.current?.();
-                    disposeRef.current = null;
-                };
-            }, [directResult.rules, cacheKey]);
-            const injectedClassName = allocatedClassName;
+                return mergeStyles(defaultStyles, styles, propStyles);
+            }, [styles, propStyles]);
+            // Use the useStyles hook for style generation and injection
+            const { className: stylesClassName } = useStyles({ styles: allStyles });
             // Merge default tokens with instance tokens (instance overrides defaults)
             const tokensKey = stringifyTokens(tokens);
             const mergedTokens = useMemo(() => {
@@ -282,11 +182,8 @@ function tastyElement(tastyOptions) {
                 const modsObject = mods;
                 modProps = modAttrs(modsObject);
             }
-            // Merge user className with injected className
-            const finalClassName = [
-                userClassName || '',
-                injectedClassName,
-            ]
+            // Merge user className with generated className
+            const finalClassName = [userClassName || '', stylesClassName]
                 .filter(Boolean)
                 .join(' ');
             const elementProps = {
@@ -302,9 +199,7 @@ function tastyElement(tastyOptions) {
             };
             // Apply the helper to handle is* properties
             handleIsProperties(elementProps);
-            // NEW: Use plain createElement instead of styled Element
             const renderedElement = createElement(as ?? originalAs, elementProps);
-            // Note: Empty className is normal for elements with no styles
             return renderedElement;
         });
     }

package/es/tasty/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/tasty/utils/cache-wrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/tasty/utils/case-converter.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/tasty/utils/colors.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/tasty/utils/dotize.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/tasty/utils/filterBaseProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/tasty/utils/getDisplayName.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/tasty/utils/isDevEnv.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/tasty/utils/mergeStyles.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 
-import { isSelector } from './renderStyles';
+import { isSelector } from '../pipeline';
 export function mergeStyles(...objects) {
     let styles = objects[0] ? { ...objects[0] } : {};
     let pos = 1;

package/es/tasty/utils/modAttrs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/tasty/utils/processTokens.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/tasty/utils/string.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/tasty/utils/styles.js

@@ -1,11 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 
 import { StyleParser } from '../parser/parser';
+import { createStateParserContext, parseAdvancedState } from '../states';
 import { cacheWrapper } from './cache-wrapper';
 import { camelToKebab } from './case-converter';
 const devMode = process.env.NODE_ENV !== 'production';
@@ -27,9 +28,6 @@ const SIMPLE_COLOR_PATTERNS = [
 // Rate limiting for dev warnings to avoid spam
 let colorWarningCount = 0;
 const MAX_COLOR_WARNINGS = 10;
-const IS_DVH_SUPPORTED = typeof CSS !== 'undefined' && typeof CSS?.supports === 'function'
-    ? CSS.supports('height: 100dvh')
-    : false;
 export const CUSTOM_UNITS = {
     r: 'var(--radius)',
     cr: 'var(--card-radius)',
@@ -43,12 +41,6 @@ export const CUSTOM_UNITS = {
     sf: function sf(num) {
         return `minmax(0, ${num}fr)`;
     },
-    // global setting
-    dvh: function dvh(num) {
-        return IS_DVH_SUPPORTED
-            ? `${num}dvh`
-            : `calc(var(--cube-dynamic-viewport-height, 100dvh) / 100 * ${num})`;
-    },
     // span unit for GridProvider
     sp: function spanWidth(num) {
         return `((${num} * var(--column-width)) + (${num - 1} * var(--column-gap)))`;
@@ -117,6 +109,20 @@ export function customFunc(name, fn) {
     __tastyFuncs[name] = fn;
     __tastyParser.setFuncs(__tastyFuncs);
 }
+/**
+ * Get the global StyleParser instance.
+ * Used by configure() to apply parser configuration.
+ */
+export function getGlobalParser() {
+    return __tastyParser;
+}
+/**
+ * Get the current custom functions registry.
+ * Used by configure() to merge with new functions.
+ */
+export function getGlobalFuncs() {
+    return __tastyFuncs;
+}
 /**
  *
  * @param {String} value
@@ -208,11 +214,38 @@ export function strToRgb(color, ignoreAlpha = false) {
         return hexToRgb(color);
     return null;
 }
+/**
+ * Extract RGB values from an rgb()/rgba() string.
+ * Supports all modern CSS syntax variations:
+ * - Comma-separated: rgb(255, 128, 0)
+ * - Space-separated: rgb(255 128 0)
+ * - Fractional: rgb(128.5, 64.3, 32.1)
+ * - Percentages: rgb(50%, 25%, 75%)
+ * - Slash alpha notation: rgb(255 128 0 / 0.5)
+ *
+ * Returns array of RGB values (0-255 range), converting percentages as needed.
+ */
 export function getRgbValuesFromRgbaString(str) {
-    return str
-        .match(/\d+/g)
-        .map((s) => parseInt(s))
-        .slice(0, 3);
+    // Extract content inside rgb()/rgba()
+    const match = str.match(/rgba?\(([^)]+)\)/i);
+    if (!match)
+        return [];
+    const inner = match[1].trim();
+    // Split by slash first (for alpha), then handle color components
+    const [colorPart] = inner.split('/');
+    // Split by comma or whitespace
+    const parts = colorPart
+        .trim()
+        .split(/[,\s]+/)
+        .filter(Boolean);
+    return parts.slice(0, 3).map((part) => {
+        part = part.trim();
+        if (part.endsWith('%')) {
+            // Convert percentage to 0-255 range
+            return (parseFloat(part) / 100) * 255;
+        }
+        return parseFloat(part);
+    });
 }
 export function hexToRgb(hex) {
     const rgba = hex
@@ -275,7 +308,16 @@ export function extractStyles(props, styleList = [], defaultStyles, propMap, ign
     }, {});
     return styles;
 }
-const STATES_REGEXP = /([&|!^])|([()])|([a-z][a-z0-9-]+=(?:"[^"]*"|'[^']*'|[^\s&|!^()]+))|([a-z][a-z0-9-]+)|(:[a-z][a-z0-9-]+\([^)]+\)|:[a-z][a-z0-9-]+)|(\.[a-z][a-z0-9-]+)|(\[[^\]]+])/gi;
+// Enhanced regex that includes advanced state patterns
+// Matches: operators, parentheses, @media(...), @(...), @root(...), @own(...), @starting, @predefined,
+//          value mods, boolean mods, pseudo-classes, classes, attribute selectors
+const STATES_REGEXP = /([&|!^])|([()])|(@media:[a-z]+)|(@media\([^)]+\))|(@root\([^)]+\))|(@own\([^)]+\))|(@\([^)]+\))|(@starting)|(@[A-Za-z][A-Za-z0-9-]*)|([a-z][a-z0-9-]+=(?:"[^"]*"|'[^']*'|[^\s&|!^()]+))|([a-z][a-z0-9-]+)|(:[a-z][a-z0-9-]+\([^)]+\)|:[a-z][a-z0-9-]+)|(\.[a-z][a-z0-9-]+)|(\[[^\]]+])/gi;
+/**
+ * Check if a token is an advanced state (starts with @)
+ */
+export function isAdvancedStateToken(token) {
+    return token.startsWith('@') || token.startsWith('!@');
+}
 export const STATE_OPERATORS = {
     NOT: '!',
     AND: '&',
@@ -317,11 +359,38 @@ function convertTokensToComputeUnits(tokens) {
     });
     return tokens.length === 1 ? tokens[0] : tokens;
 }
+/**
+ * Replace commas with | only outside of parentheses.
+ * This preserves commas in advanced states like @(card, w < 600px)
+ */
+function replaceCommasOutsideParens(str) {
+    let result = '';
+    let depth = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str[i];
+        if (char === '(') {
+            depth++;
+            result += char;
+        }
+        else if (char === ')') {
+            depth--;
+            result += char;
+        }
+        else if (char === ',' && depth === 0) {
+            // Only replace commas at the top level (outside parentheses)
+            result += '|';
+        }
+        else {
+            result += char;
+        }
+    }
+    return result;
+}
 /**
  * Parse state notation and return tokens, modifiers and compute model.
  */
 function parseStateNotationInner(notation, value) {
-    const tokens = notation.replace(/,/g, '|').match(STATES_REGEXP);
+    const tokens = replaceCommasOutsideParens(notation).match(STATES_REGEXP);
     if (!tokens || !tokens.length) {
         return {
             model: undefined,
@@ -380,10 +449,115 @@ function parseStateNotationInner(notation, value) {
     };
 }
 export const parseStateNotation = cacheWrapper(parseStateNotationInner);
+/**
+ * Build an AtRuleContext from parsed advanced states
+ */
+export function buildAtRuleContext(advancedStates, negatedStates) {
+    if (advancedStates.length === 0)
+        return undefined;
+    const ctx = {};
+    for (const state of advancedStates) {
+        const isNegated = negatedStates.has(state.raw);
+        switch (state.type) {
+            case 'media': {
+                if (!ctx.media)
+                    ctx.media = [];
+                let mediaCondition = '';
+                if (state.mediaType) {
+                    // @media:print, @media:screen, etc.
+                    mediaCondition = state.mediaType;
+                }
+                else if (state.condition) {
+                    // @media(width < 920px)
+                    mediaCondition = `(${state.condition})`;
+                }
+                if (mediaCondition) {
+                    if (isNegated) {
+                        ctx.media.push(`not ${mediaCondition}`);
+                    }
+                    else {
+                        ctx.media.push(mediaCondition);
+                    }
+                }
+                break;
+            }
+            case 'container': {
+                if (!ctx.container)
+                    ctx.container = [];
+                let condition = state.condition;
+                if (isNegated) {
+                    condition = `not (${condition})`;
+                }
+                ctx.container.push({
+                    name: state.containerName,
+                    condition,
+                });
+                break;
+            }
+            case 'root': {
+                if (!ctx.rootStates)
+                    ctx.rootStates = [];
+                // Parse the condition to generate the proper selector
+                const rootSelector = buildRootSelector(state.condition, isNegated);
+                ctx.rootStates.push(rootSelector);
+                break;
+            }
+            case 'starting': {
+                if (!isNegated) {
+                    ctx.startingStyle = true;
+                }
+                break;
+            }
+            // 'own' and 'predefined' are handled differently (selector-based, not at-rule)
+            // 'modifier' is a regular state
+        }
+    }
+    // Return undefined if no at-rules were added
+    if (!ctx.media?.length &&
+        !ctx.container?.length &&
+        !ctx.rootStates?.length &&
+        !ctx.startingStyle) {
+        return undefined;
+    }
+    return ctx;
+}
+/**
+ * Build a root state selector from a condition
+ */
+function buildRootSelector(condition, isNegated) {
+    // Handle different condition formats:
+    // - theme=dark -> [data-theme="dark"]
+    // - .className -> .className
+    // - [attr] -> [attr]
+    // - booleanMod -> [data-boolean-mod]
+    let selector;
+    if (condition.startsWith('.')) {
+        // Class selector
+        selector = condition;
+    }
+    else if (condition.startsWith('[')) {
+        // Attribute selector
+        selector = condition;
+    }
+    else if (condition.includes('=')) {
+        // Value mod: theme=dark -> [data-theme="dark"]
+        const [key, value] = condition.split('=');
+        selector = `[data-${camelToKebab(key.trim())}="${value.trim()}"]`;
+    }
+    else {
+        // Boolean mod: camelCase -> [data-camel-case]
+        selector = `[data-${camelToKebab(condition)}]`;
+    }
+    if (isNegated) {
+        return `:not(${selector})`;
+    }
+    return selector;
+}
 /**
  * Parse state notation and return tokens, modifiers and compute model.
+ * Enhanced to detect and extract advanced states.
  */
-export function styleStateMapToStyleStateDataList(styleStateMap) {
+export function styleStateMapToStyleStateDataList(styleStateMap, parserContext) {
     if (typeof styleStateMap !== 'object' || !styleStateMap) {
         return {
             states: [
@@ -395,17 +569,76 @@ export function styleStateMapToStyleStateDataList(styleStateMap) {
                 },
             ],
             mods: [],
+            hasAdvancedStates: false,
         };
     }
     const stateDataList = [];
+    let hasAdvancedStates = false;
     Object.keys(styleStateMap).forEach((stateNotation) => {
         const state = parseStateNotation(stateNotation, styleStateMap[stateNotation]);
+        // Check if this state contains any advanced states
+        const advancedStates = [];
+        const negatedAdvancedStates = new Set();
+        const regularMods = [];
+        const ownMods = [];
+        const negatedOwnMods = [];
+        // Scan tokens for advanced states
+        if (state.tokens) {
+            let isNegated = false;
+            for (const token of state.tokens) {
+                if (token === '!') {
+                    isNegated = true;
+                    continue;
+                }
+                if (isAdvancedStateToken(token)) {
+                    hasAdvancedStates = true;
+                    const ctx = parserContext || createStateParserContext(undefined);
+                    const parsed = parseAdvancedState(token, ctx);
+                    advancedStates.push(parsed);
+                    // Handle @own states specially - extract condition as ownMod
+                    if (parsed.type === 'own' && parsed.condition) {
+                        if (isNegated) {
+                            negatedOwnMods.push(parsed.condition);
+                        }
+                        else {
+                            ownMods.push(parsed.condition);
+                        }
+                    }
+                    else if (isNegated) {
+                        negatedAdvancedStates.add(token);
+                    }
+                    isNegated = false;
+                }
+                else if (token.length > 1 &&
+                    !['&', '|', '^', '(', ')'].includes(token)) {
+                    regularMods.push(token);
+                    isNegated = false;
+                }
+                else {
+                    isNegated = false;
+                }
+            }
+        }
+        // If there are advanced states, build the atRuleContext
+        if (advancedStates.length > 0) {
+            state.advancedStates = advancedStates;
+            state.atRuleContext = buildAtRuleContext(advancedStates, negatedAdvancedStates);
+            // Filter mods to only include regular mods (not advanced states)
+            state.mods = regularMods;
+        }
+        // Store own mods for sub-element selector generation
+        if (ownMods.length > 0) {
+            state.ownMods = ownMods;
+        }
+        if (negatedOwnMods.length > 0) {
+            state.negatedOwnMods = negatedOwnMods;
+        }
         stateDataList.push(state);
     });
     stateDataList.reverse();
     let initialState;
     const allMods = stateDataList.reduce((all, state) => {
-        if (!state.mods.length) {
+        if (!state.mods.length && !state.advancedStates?.length) {
             initialState = state;
         }
         else {
@@ -424,7 +657,7 @@ export function styleStateMapToStyleStateDataList(styleStateMap) {
             value: true,
         });
     }
-    return { states: stateDataList, mods: allMods };
+    return { states: stateDataList, mods: allMods, hasAdvancedStates };
 }
 export const COMPUTE_FUNC_MAP = {
     '!': (a) => !a, // NOT - boolean negation