@cube-dev/ui-kit 0.99.3 → 0.100.0

package/es/tasty/parser/tokenizer.js

@@ -1,23 +1,32 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
+const isWhitespace = (ch) => ch === ' ' || ch === '\n' || ch === '\t' || ch === '\r' || ch === '\f';
 export function scan(src, cb) {
     let depth = 0;
     let inUrl = false;
     let inQuote = 0;
     let start = 0;
     let i = 0;
-    const flush = (isComma) => {
+    // Track if we just saw a standalone slash separator (whitespace before, whitespace after)
+    let pendingSlash = false;
+    const flush = (isComma, isSlash) => {
+        // If we have a pending slash, emit the part break
+        const actualSlash = isSlash || pendingSlash;
+        pendingSlash = false;
         if (start < i) {
             const prevChar = start > 0 ? src[start - 1] : null;
-            cb(src.slice(start, i), isComma, prevChar);
+            cb(src.slice(start, i), isComma, actualSlash, prevChar);
         }
         else if (isComma) {
-            cb('', true, null); // empty token followed by comma => group break.
+            cb('', true, false, null); // empty token followed by comma => group break.
+        }
+        else if (actualSlash) {
+            cb('', false, true, null); // empty token followed by slash => part break.
         }
         start = i + 1;
     };
@@ -54,20 +63,30 @@ export function scan(src, cb) {
             continue; // inside url(...) treat everything as part of token
         if (!depth) {
             if (ch === ',') {
-                flush(true);
+                flush(true, false);
+                continue;
+            }
+            // Slash is only a separator when surrounded by whitespace (e.g., "a / b")
+            // This preserves CSS patterns like "center/cover" as single tokens
+            if (ch === '/') {
+                const prevIsWhitespace = isWhitespace(src[i - 1]);
+                const nextIsWhitespace = isWhitespace(src[i + 1]);
+                if (prevIsWhitespace && nextIsWhitespace) {
+                    // Already flushed by whitespace before, mark pending slash
+                    pendingSlash = true;
+                    start = i + 1; // skip the slash character
+                    continue;
+                }
+                // Not surrounded by whitespace - treat as part of token
                 continue;
             }
-            if (ch === ' ' ||
-                ch === '\n' ||
-                ch === '\t' ||
-                ch === '\r' ||
-                ch === '\f') {
-                flush(false);
+            if (isWhitespace(ch)) {
+                flush(false, false);
                 continue;
             }
         }
     }
-    flush(false); // tail
+    flush(false, false); // tail
 }
 
         

package/es/tasty/parser/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
@@ -11,6 +11,13 @@ export var Bucket;
     Bucket[Bucket["Value"] = 1] = "Value";
     Bucket[Bucket["Mod"] = 2] = "Mod";
 })(Bucket || (Bucket = {}));
+export const makeEmptyPart = () => ({
+    mods: [],
+    values: [],
+    colors: [],
+    all: [],
+    output: '',
+});
 export const makeEmptyDetails = () => ({
     input: '',
     output: '',
@@ -18,10 +25,28 @@ export const makeEmptyDetails = () => ({
     values: [],
     colors: [],
     all: [],
+    parts: [],
 });
-export const finalizeGroup = (d) => {
-    // Join processed pieces already stored in `all` with single spaces.
-    d.output = d.all.join(' ');
+export const finalizePart = (p) => {
+    p.output = p.all.join(' ');
+    return p;
+};
+/**
+ * Aggregate parts into a StyleDetails group.
+ * Combines all parts' arrays into group-level arrays for backward compatibility.
+ */
+export const finalizeGroup = (d, parts) => {
+    // Store parts
+    d.parts = parts;
+    // Aggregate all parts into group-level arrays
+    for (const part of parts) {
+        d.mods.push(...part.mods);
+        d.values.push(...part.values);
+        d.colors.push(...part.colors);
+        d.all.push(...part.all);
+    }
+    // Join parts' outputs with ' / ' for the group output
+    d.output = parts.map((p) => p.output).join(' / ');
     return d;
 };
 

package/es/tasty/pipeline/conditions.js

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

package/es/tasty/properties/index.js

@@ -0,0 +1,211 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.100.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Properties Utilities
+ *
+ * Utilities for extracting and processing CSS @property definitions in styles.
+ * Unlike keyframes, properties are permanent once registered and don't need cleanup.
+ *
+ * Property names use tasty token syntax:
+ * - `$name` for regular properties → `--name`
+ * - `#name` for color properties → `--name-color` (auto-sets syntax: '<color>')
+ */
+// ============================================================================
+// Constants
+// ============================================================================
+const PROPERTIES_KEY = '@properties';
+/**
+ * Valid CSS custom property name pattern (after the -- prefix).
+ * Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.
+ */
+const VALID_PROPERTY_NAME_PATTERN = /^[a-z_][a-z0-9-_]*$/i;
+// ============================================================================
+// Validation Functions
+// ============================================================================
+/**
+ * Validate a CSS custom property name (the part after --).
+ * Returns true if the name is valid for use as a CSS custom property.
+ */
+export function isValidPropertyName(name) {
+    return VALID_PROPERTY_NAME_PATTERN.test(name);
+}
+// ============================================================================
+// Extraction Functions
+// ============================================================================
+/**
+ * Check if styles object has local @properties definition.
+ * Fast path: single property lookup.
+ */
+export function hasLocalProperties(styles) {
+    return PROPERTIES_KEY in styles;
+}
+/**
+ * Extract local @properties from styles object.
+ * Returns null if no local properties (fast path).
+ */
+export function extractLocalProperties(styles) {
+    const properties = styles[PROPERTIES_KEY];
+    if (!properties || typeof properties !== 'object') {
+        return null;
+    }
+    return properties;
+}
+// ============================================================================
+// Token Parsing Functions
+// ============================================================================
+/**
+ * Parse a property token name and return the CSS property name and whether it's a color.
+ * Supports tasty token syntax and validates the property name.
+ *
+ * Token formats:
+ * - `$name` → { cssName: '--name', isColor: false }
+ * - `#name` → { cssName: '--name-color', isColor: true }
+ * - `--name` → { cssName: '--name', isColor: false } (legacy, auto-detect color by suffix)
+ * - `name` → { cssName: '--name', isColor: false } (legacy)
+ *
+ * @param token - The property token to parse
+ * @returns Parsed result with cssName, isColor, isValid, and optional error
+ */
+export function parsePropertyToken(token) {
+    if (!token || typeof token !== 'string') {
+        return {
+            cssName: '',
+            isColor: false,
+            isValid: false,
+            error: 'Property token must be a non-empty string',
+        };
+    }
+    let name;
+    let isColor;
+    if (token.startsWith('$')) {
+        // Regular property token: $name → --name
+        name = token.slice(1);
+        isColor = false;
+    }
+    else if (token.startsWith('#')) {
+        // Color property token: #name → --name-color
+        name = token.slice(1);
+        isColor = true;
+    }
+    else if (token.startsWith('--')) {
+        // Legacy format with -- prefix
+        name = token.slice(2);
+        isColor = token.endsWith('-color');
+    }
+    else {
+        // Legacy format without prefix
+        name = token;
+        isColor = token.endsWith('-color');
+    }
+    // Validate the name
+    if (!name) {
+        return {
+            cssName: '',
+            isColor,
+            isValid: false,
+            error: 'Property name cannot be empty',
+        };
+    }
+    if (!isValidPropertyName(name)) {
+        return {
+            cssName: '',
+            isColor,
+            isValid: false,
+            error: `Invalid property name "${name}". Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.`,
+        };
+    }
+    // Build the CSS custom property name
+    // For #name tokens, we add -color suffix
+    // For legacy formats (--name-color or name-color), the name already includes -color
+    let cssName;
+    if (token.startsWith('#')) {
+        // Color token: #name → --name-color
+        cssName = `--${name}-color`;
+    }
+    else {
+        // All other formats: just add -- prefix
+        cssName = `--${name}`;
+    }
+    return {
+        cssName,
+        isColor,
+        isValid: true,
+    };
+}
+// ============================================================================
+// Normalization Functions
+// ============================================================================
+/**
+ * Normalize a property name to the CSS custom property format.
+ *
+ * @deprecated Use parsePropertyToken instead for proper token handling
+ */
+export function normalizePropertyName(name) {
+    const result = parsePropertyToken(name);
+    return result.isValid ? result.cssName : `--${name}`;
+}
+/**
+ * Normalize a property definition to a consistent string representation.
+ * Used for comparing definitions to detect changes/conflicts.
+ *
+ * Keys are sorted alphabetically to ensure consistent comparison:
+ * { inherits: true, syntax: '<color>' } === { syntax: '<color>', inherits: true }
+ */
+export function normalizePropertyDefinition(def) {
+    const normalized = {};
+    // Add properties in alphabetical order
+    if (def.inherits !== undefined) {
+        normalized.inherits = def.inherits;
+    }
+    if (def.initialValue !== undefined) {
+        normalized.initialValue = String(def.initialValue);
+    }
+    if (def.syntax !== undefined) {
+        normalized.syntax = def.syntax;
+    }
+    return JSON.stringify(normalized);
+}
+/**
+ * Get the effective property definition for a token.
+ * For color tokens (#name), auto-sets syntax to '<color>' and defaults initialValue to 'transparent'.
+ *
+ * @param token - Property token ($name, #name, --name, or plain name)
+ * @param userDefinition - User-provided definition options
+ * @returns Effective definition with cssName, definition, isValid, and optional error
+ */
+export function getEffectiveDefinition(token, userDefinition) {
+    const parsed = parsePropertyToken(token);
+    if (!parsed.isValid) {
+        return {
+            cssName: '',
+            definition: userDefinition,
+            isValid: false,
+            error: parsed.error,
+        };
+    }
+    if (parsed.isColor) {
+        // Color properties have fixed syntax and default initialValue
+        return {
+            cssName: parsed.cssName,
+            definition: {
+                syntax: '<color>', // Always '<color>' for color tokens, cannot be overridden
+                inherits: userDefinition.inherits, // Allow inherits to be customized
+                initialValue: userDefinition.initialValue ?? 'transparent', // Default to transparent
+            },
+            isValid: true,
+        };
+    }
+    // Regular properties use the definition as-is
+    return {
+        cssName: parsed.cssName,
+        definition: userDefinition,
+        isValid: true,
+    };
+}
+
+        

package/es/tasty/states/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
@@ -14,7 +14,12 @@
 import { hasStylesGenerated } from '../config.js';
 import { isDevEnv } from '../utils/isDevEnv.js';
 // Built-in state names that cannot be overridden
-const BUILTIN_STATES = new Set(['@starting', '@keyframes', '@supports']);
+const BUILTIN_STATES = new Set([
+    '@starting',
+    '@keyframes',
+    '@properties',
+    '@supports',
+]);
 // Reserved prefixes that are built-in
 const RESERVED_PREFIXES = [
     '@media',
@@ -23,6 +28,7 @@ const RESERVED_PREFIXES = [
     '@(',
     '@starting',
     '@keyframes',
+    '@properties',
     '@supports',
 ];
 // Global predefined states storage

package/es/tasty/static/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.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.99.3
+ * @cube-dev/ui-kit v0.100.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.99.3
+ * @cube-dev/ui-kit v0.100.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.99.3
+ * @cube-dev/ui-kit v0.100.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.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
@@ -19,9 +19,39 @@ const BORDER_STYLES = [
     'outset',
 ];
 /**
+ * Process a single group and return border values for its directions.
+ * @returns Object with directions as keys and border values, or null for "all directions"
+ */
+function processGroup(group) {
+    const { values, mods, colors } = group;
+    const directions = filterMods(mods, DIRECTIONS);
+    const typeMods = filterMods(mods, BORDER_STYLES);
+    const width = values[0] || 'var(--border-width)';
+    const style = typeMods[0] || 'solid';
+    const color = colors?.[0] || 'var(--border-color)';
+    return {
+        directions,
+        borderValue: { width, style, color },
+    };
+}
+/**
+ * Format a border value to CSS string.
+ */
+function formatBorderValue(value) {
+    return `${value.width} ${value.style} ${value.color}`;
+}
+/**
+ * Border style handler with multi-group support.
+ *
+ * Single group (backward compatible):
+ * - `border="1bw solid #red"` - all sides
+ * - `border="1bw solid #red top left"` - only top and left
+ *
+ * Multi-group (new):
+ * - `border="1bw #red, 2bw #blue top"` - all sides red 1bw, then top overridden to blue 2bw
+ * - `border="1bw, dashed top bottom, #purple left right"` - base 1bw, dashed on top/bottom, purple on left/right
  *
- * @param border
- * @return {{border: string}|*}
+ * Later groups override earlier groups for conflicting directions.
  */
 export function borderStyle({ border }) {
     if (!border && border !== 0)
@@ -29,27 +59,91 @@ export function borderStyle({ border }) {
     if (border === true)
         border = '1bw';
     const processed = parseStyle(String(border));
-    const { values, mods, colors } = processed.groups[0] ??
-        { values: [], mods: [], colors: [] };
-    const directions = filterMods(mods, DIRECTIONS);
-    const typeMods = filterMods(mods, BORDER_STYLES);
-    const value = values[0] || 'var(--border-width)';
-    const type = typeMods[0] || 'solid';
-    const borderColor = (colors && colors[0]) || 'var(--border-color)';
-    const styleValue = [value, type, borderColor].join(' ');
-    if (!directions.length) {
-        return { border: styleValue };
+    const groups = processed.groups ?? [];
+    if (!groups.length)
+        return;
+    // Single group - use original logic for backward compatibility
+    if (groups.length === 1) {
+        const { directions, borderValue } = processGroup({
+            values: groups[0].values ?? [],
+            mods: groups[0].mods ?? [],
+            colors: groups[0].colors ?? [],
+        });
+        const styleValue = formatBorderValue(borderValue);
+        if (!directions.length) {
+            return { border: styleValue };
+        }
+        const zeroValue = `0 ${borderValue.style} ${borderValue.color}`;
+        return DIRECTIONS.reduce((styles, dir) => {
+            if (directions.includes(dir)) {
+                styles[`border-${dir}`] = styleValue;
+            }
+            else {
+                styles[`border-${dir}`] = zeroValue;
+            }
+            return styles;
+        }, {});
+    }
+    // Multi-group - process groups in order, later groups override earlier
+    // Track whether any group specifies directions
+    let hasAnyDirections = false;
+    // Build a map of direction -> border value
+    // Start with undefined (no border set)
+    const directionMap = {
+        top: null,
+        right: null,
+        bottom: null,
+        left: null,
+    };
+    // Track the last "all directions" value for fallback
+    let allDirectionsValue = null;
+    // Process groups in order (first to last)
+    for (const group of groups) {
+        const { directions, borderValue } = processGroup({
+            values: group.values ?? [],
+            mods: group.mods ?? [],
+            colors: group.colors ?? [],
+        });
+        if (directions.length === 0) {
+            // No specific directions - applies to all
+            allDirectionsValue = borderValue;
+            // Set all directions
+            for (const dir of DIRECTIONS) {
+                directionMap[dir] = borderValue;
+            }
+        }
+        else {
+            // Specific directions - override only those
+            hasAnyDirections = true;
+            for (const dir of directions) {
+                directionMap[dir] = borderValue;
+            }
+        }
     }
-    const zeroValue = [0, type, borderColor].join(' ');
-    return DIRECTIONS.reduce((styles, dir) => {
-        if (mods.includes(dir)) {
-            styles[`border-${dir}`] = styleValue;
+    // If no group specified any directions and we have an all-directions value,
+    // return the simple `border` shorthand
+    if (!hasAnyDirections && allDirectionsValue) {
+        return { border: formatBorderValue(allDirectionsValue) };
+    }
+    // Otherwise, output individual border-* properties
+    const result = {};
+    for (const dir of DIRECTIONS) {
+        const value = directionMap[dir];
+        if (value) {
+            result[`border-${dir}`] = formatBorderValue(value);
         }
         else {
-            styles[`border-${dir}`] = zeroValue;
+            // No border for this direction - set to 0
+            // Use the last all-directions value for style/color consistency, or defaults
+            const fallback = allDirectionsValue || {
+                width: '0',
+                style: 'solid',
+                color: 'var(--border-color)',
+            };
+            result[`border-${dir}`] = `0 ${fallback.style} ${fallback.color}`;
         }
-        return styles;
-    }, {});
+    }
+    return result;
 }
 borderStyle.__lookupStyles = ['border'];
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
@@ -15,7 +15,7 @@ export function boxShadowCombinator(styles) {
         return list;
     }, []);
     if (!values.length)
-        return '';
+        return;
     return { 'box-shadow': values.join(', ') };
 }
 boxShadowCombinator.__lookupStyles = ['outline', 'shadow'];