@cube-dev/ui-kit 0.0.0-canary-00718fb → 0.0.0-canary-837dfc4

package/es/tasty/properties/index.js

@@ -0,0 +1,211 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
+ * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * Released under the MIT license.
  */
 
@@ -12,25 +12,58 @@ const DIRECTION_MAP = {
     top: 'to bottom',
     bottom: 'to top',
 };
-export function fadeStyle({ fade }) {
-    if (!fade)
-        return;
-    const processed = parseStyle(fade);
-    let { values, mods } = processed.groups[0] ?? { values: [], mods: [] };
+// Default mask colors (standard black with alpha for gradient masks)
+const DEFAULT_TRANSPARENT_COLOR = 'rgb(0 0 0 / 0)';
+const DEFAULT_OPAQUE_COLOR = 'rgb(0 0 0 / 1)';
+/**
+ * Process a single group and return gradient strings for its directions.
+ */
+function processGroup(group, isOnlyGroup) {
+    let { values, mods, colors } = group;
     let directions = filterMods(mods, DIRECTIONS);
     if (!values.length) {
         values = ['var(--fade-width)'];
     }
+    // If this is the only group and no directions specified, apply to all edges
     if (!directions.length) {
-        directions = ['top', 'right', 'bottom', 'left'];
+        if (isOnlyGroup) {
+            directions = ['top', 'right', 'bottom', 'left'];
+        }
+        else {
+            // For multi-group without explicit direction, skip this group
+            return [];
+        }
+    }
+    // Extract colors: first = transparent mask color, second = opaque mask color
+    const transparentColor = colors?.[0] || DEFAULT_TRANSPARENT_COLOR;
+    const opaqueColor = colors?.[1] || DEFAULT_OPAQUE_COLOR;
+    return directions.map((direction, index) => {
+        const size = values[index] || values[index % 2] || values[0];
+        return `linear-gradient(${DIRECTION_MAP[direction]}, ${transparentColor} 0%, ${opaqueColor} ${size})`;
+    });
+}
+export function fadeStyle({ fade }) {
+    if (!fade)
+        return;
+    const processed = parseStyle(fade);
+    const groups = processed.groups ?? [];
+    if (!groups.length)
+        return;
+    const isOnlyGroup = groups.length === 1;
+    // Process all groups and collect gradients
+    const gradients = [];
+    for (const group of groups) {
+        const groupGradients = processGroup({
+            values: group.values ?? [],
+            mods: group.mods ?? [],
+            colors: group.colors ?? [],
+        }, isOnlyGroup);
+        gradients.push(...groupGradients);
     }
+    if (!gradients.length)
+        return;
     return {
-        mask: directions
-            .map((direction, index) => {
-            const size = values[index] || values[index % 2] || values[0];
-            return `linear-gradient(${DIRECTION_MAP[direction]}, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 1) ${size})`;
-        })
-            .join(', '),
+        mask: gradients.join(', '),
         'mask-composite': 'intersect',
     };
 }

package/es/tasty/styles/fill.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * 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.0.0-canary-00718fb
+ * @cube-dev/ui-kit v0.0.0-canary-837dfc4
  * Released under the MIT license.
  */