@cube-dev/ui-kit 0.60.5 → 0.61.1

package/es/tasty/styles/marginBlock.js

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

package/es/tasty/styles/marginInline.js

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

package/es/tasty/styles/outline.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.60.5
+ * @cube-dev/ui-kit v0.61.1
  * Released under the MIT license.
  */
 
@@ -28,12 +28,18 @@ export function outlineStyle({ outline }) {
         return;
     if (outline === true)
         outline = '1ow';
-    const { values, mods, color } = parseStyle(String(outline));
+    const { values, mods, colors } = parseStyle(String(outline));
     const typeMods = filterMods(mods, BORDER_STYLES);
     const value = values[0] || 'var(--outline-width)';
     const type = typeMods[0] || 'solid';
-    const outlineColor = color || 'var(--outline-color)';
+    const outlineColor = colors?.[0] || 'var(--outline-color)';
     const styleValue = [value, type, outlineColor].join(' ');
+    if (values.length > 1) {
+        return {
+            outline: styleValue,
+            'outline-offset': values[1],
+        };
+    }
     return { outline: styleValue };
 }
 outlineStyle.__lookupStyles = ['outline'];

package/es/tasty/styles/padding.js

@@ -1,12 +1,20 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.60.5
+ * @cube-dev/ui-kit v0.61.1
  * Released under the MIT license.
  */
 
 import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';
 export function paddingStyle({ padding, paddingBlock, paddingInline, paddingTop, paddingRight, paddingBottom, paddingLeft, }) {
+    if (Array.isArray(padding)) {
+        return {
+            'padding-top': padding[0],
+            'padding-right': padding[1] || padding[0],
+            'padding-bottom': padding[2] || padding[0],
+            'padding-left': padding[3] || padding[1] || padding[0],
+        };
+    }
     if (typeof padding === 'number') {
         padding = `${padding}px`;
     }

package/es/tasty/styles/paddingBlock.js

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

package/es/tasty/styles/paddingInline.js

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

package/es/tasty/styles/place.js

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.61.1
+ * Released under the MIT license.
+ */
+
+export function placeStyle({ place }) {
+    if (typeof place !== 'string')
+        return;
+    if (!place)
+        return;
+    return {
+        'place-items': place,
+        'place-content': place,
+    };
+}
+placeStyle.__lookupStyles = ['place'];
+
+        

package/es/tasty/styles/predefined.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.60.5
+ * @cube-dev/ui-kit v0.61.1
  * Released under the MIT license.
  */
 
@@ -31,6 +31,7 @@ import { paddingInlineStyle } from './paddingInline';
 import { presetStyle } from './preset';
 import { radiusStyle } from './radius';
 import { resetStyle } from './reset';
+import { scrollbarStyle } from './scrollbar';
 import { shadowStyle } from './shadow';
 import { styledScrollbarStyle } from './styledScrollbar';
 import { transitionStyle } from './transition';
@@ -95,6 +96,7 @@ export function predefine() {
     defineStyleAlias('letterSpacing', 'letter-spacing', numberConverter);
     defineStyleAlias('textTransform');
     defineStyleAlias('fontFamily');
+    defineStyleAlias('overflow');
     defineStyleAlias('paddingTop', 'padding-top', numberConverter);
     defineStyleAlias('paddingRight', 'padding-right', numberConverter);
     defineStyleAlias('paddingBottom', 'padding-bottom', numberConverter);
@@ -153,7 +155,9 @@ export function predefine() {
         fontStyle,
         fontStyleStyle,
         groupRadiusAttr,
+        // DEPRECATED: `styledScrollbar` is deprecated, use `scrollbar` instead
         styledScrollbarStyle,
+        scrollbarStyle,
         fadeStyle,
         insetStyle,
     ]

package/es/tasty/styles/preset.js

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

package/es/tasty/styles/radius.js

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

package/es/tasty/styles/reset.js

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

package/es/tasty/styles/scrollbar.js

@@ -0,0 +1,149 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.61.1
+ * Released under the MIT license.
+ */
+
+import { parseStyle } from '../utils/styles';
+/**
+ * Creates cross-browser compatible scrollbar styles
+ *
+ * Supports both Firefox (scrollbar-width, scrollbar-color) and
+ * WebKit/Chromium browsers (::-webkit-scrollbar)
+ */
+export function scrollbarStyle({ scrollbar, overflow }) {
+    // Check if scrollbar is defined
+    if (!scrollbar && scrollbar !== 0)
+        return;
+    // Support true as alias for thin
+    const value = scrollbar === true || scrollbar === '' ? 'thin' : scrollbar;
+    const { mods, colors, values } = parseStyle(String(value));
+    const style = {};
+    // Default colors for scrollbar
+    const defaultThumbColor = 'var(--scrollbar-thumb-color)';
+    const defaultTrackColor = 'var(--scrollbar-track-color, transparent)';
+    // Setup default Firefox scrollbar style
+    style['scrollbar-color'] = `${defaultThumbColor} transparent`;
+    // Default scrollbar size
+    const defaultSize = '8px';
+    const sizeValue = values[0] || defaultSize;
+    // Process modifiers
+    if (mods.includes('thin')) {
+        style['scrollbar-width'] = 'thin';
+    }
+    else if (values.includes('none')) {
+        style['scrollbar-width'] = 'none';
+        style['scrollbar-color'] = 'transparent transparent';
+        // Also hide WebKit scrollbars
+        style['&::-webkit-scrollbar'] = {
+            width: '0px',
+            height: '0px',
+            display: 'none',
+        };
+        return style;
+    }
+    else if (mods.includes('auto')) {
+        style['scrollbar-width'] = 'auto';
+    }
+    // Handle scrollbar gutter behavior
+    if (mods.includes('stable') || mods.includes('both-edges')) {
+        // scrollbar-gutter is supported in newer browsers only
+        style['scrollbar-gutter'] = mods.includes('both-edges')
+            ? 'stable both-edges'
+            : 'stable';
+    }
+    // Custom size setup for WebKit
+    if (sizeValue) {
+        style['&::-webkit-scrollbar'] = {
+            ...(style['&::-webkit-scrollbar'] || {}),
+            width: sizeValue,
+            height: sizeValue,
+        };
+    }
+    // Extract colors (support up to 3: thumb, track, corner)
+    // These will be used in various places throughout the function
+    const thumbColor = colors && colors[0] ? colors[0] : defaultThumbColor;
+    const trackColor = colors && colors[1] ? colors[1] : defaultTrackColor;
+    const cornerColor = colors && colors[2] ? colors[2] : trackColor;
+    // Apply colors if they are specified
+    if (colors && colors.length) {
+        // Firefox
+        style['scrollbar-color'] = `${thumbColor} ${trackColor}`;
+        // WebKit - always set these for consistency
+        if (!style['&::-webkit-scrollbar']) {
+            style['&::-webkit-scrollbar'] = {};
+        }
+        style['&::-webkit-scrollbar']['background'] = trackColor;
+        style['&::-webkit-scrollbar-track'] = {
+            ...(style['&::-webkit-scrollbar-track'] || {}),
+            background: trackColor,
+        };
+        style['&::-webkit-scrollbar-thumb'] = {
+            ...(style['&::-webkit-scrollbar-thumb'] || {}),
+            background: thumbColor,
+        };
+        style['&::-webkit-scrollbar-corner'] = {
+            ...(style['&::-webkit-scrollbar-corner'] || {}),
+            background: cornerColor,
+        };
+    }
+    // Handle 'always' mode: force scrollbars to show
+    if (mods.includes('always')) {
+        style['overflow'] = overflow || 'scroll';
+        // Use auto for WebKit browsers since they don't support 'always'
+        // This is closer to the expected behavior
+        if (!style['scrollbar-gutter']) {
+            style['scrollbar-gutter'] = 'stable';
+        }
+        // Ensure scrollbars appear in WebKit even with little content
+        if (!style['&::-webkit-scrollbar']) {
+            style['&::-webkit-scrollbar'] = {};
+        }
+        style['&::-webkit-scrollbar']['display'] = 'block';
+    }
+    // Enhanced 'styled' mode with better transitions and appearance
+    if (mods.includes('styled')) {
+        const baseTransition = [
+            'background var(--transition)',
+            'border-radius var(--transition)',
+            'box-shadow var(--transition)',
+            'width var(--transition)',
+            'height var(--transition)',
+            'border var(--transition)',
+        ].join(', ');
+        // Firefox
+        style['scrollbar-width'] = style['scrollbar-width'] || 'thin';
+        style['scrollbar-color'] =
+            style['scrollbar-color'] || `${defaultThumbColor} ${defaultTrackColor}`;
+        // WebKit
+        style['&::-webkit-scrollbar'] = {
+            width: sizeValue,
+            height: sizeValue,
+            transition: baseTransition,
+            background: defaultTrackColor,
+            ...(style['&::-webkit-scrollbar'] || {}),
+        };
+        style['&::-webkit-scrollbar-thumb'] = {
+            'border-radius': '8px',
+            'min-height': '24px',
+            transition: baseTransition,
+            background: defaultThumbColor,
+            ...(style['&::-webkit-scrollbar-thumb'] || {}),
+        };
+        style['&::-webkit-scrollbar-track'] = {
+            background: defaultTrackColor,
+            transition: baseTransition,
+            ...(style['&::-webkit-scrollbar-track'] || {}),
+        };
+        style['&::-webkit-scrollbar-corner'] = {
+            background: defaultTrackColor,
+            transition: baseTransition,
+            ...(style['&::-webkit-scrollbar-corner'] || {}),
+        };
+    }
+    return style;
+}
+scrollbarStyle.__lookupStyles = ['scrollbar', 'overflow'];
+
+        

package/es/tasty/styles/shadow.js

@@ -1,15 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.60.5
+ * @cube-dev/ui-kit v0.61.1
  * Released under the MIT license.
  */
 
 import { parseStyle } from '../utils/styles';
 function toBoxShadow(shadow) {
-    const { values, mods, color } = parseStyle(shadow);
+    const { values, mods, colors } = parseStyle(shadow);
     const mod = mods[0] || '';
-    const shadowColor = color || 'var(--shadow-color)';
+    const shadowColor = (colors && colors[0]) || 'var(--shadow-color)';
     return [mod, ...values, shadowColor].join(' ');
 }
 export function shadowStyle({ shadow }) {

package/es/tasty/styles/styledScrollbar.js

@@ -1,10 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.60.5
+ * @cube-dev/ui-kit v0.61.1
  * Released under the MIT license.
  */
 
+/**
+ * @deprecated `styledScrollbar` is deprecated. Use `scrollbar` instead.
+ */
 export function styledScrollbarStyle({ styledScrollbar: val }) {
     if (val == null)
         return null;

package/es/tasty/styles/transition.js

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

package/es/tasty/styles/types.js

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

package/es/tasty/styles/width.js

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

package/es/tasty/tasty.js

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

package/es/tasty/types.js

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

package/es/tasty/utils/getModCombinations.js

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

package/es/tasty/utils/mergeStyles.js

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

package/es/tasty/utils/modAttrs.js

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

package/es/tasty/utils/renderStyles.js

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

package/es/tasty/utils/responsive.js

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

package/es/tasty/utils/styles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.60.5
+ * @cube-dev/ui-kit v0.61.1
  * Released under the MIT license.
  */
 
@@ -85,6 +85,7 @@ export function parseStyle(value, mode = 0) {
             mods: [],
             all: [],
             value: '',
+            colors: [],
         };
     }
     const CACHE = ATTR_CACHE_MODE_MAP[mode];
@@ -95,6 +96,7 @@ export function parseStyle(value, mode = 0) {
         const mods = [];
         const all = [];
         const values = [];
+        const colors = [];
         const autoCalc = mode !== 1;
         let currentValue = '';
         let calc = -1;
@@ -117,13 +119,15 @@ export function parseStyle(value, mode = 0) {
                 counter++;
             }
             else if (hashColor) {
-                // currentValue += `${hashColor} `;
                 if (mode === 2) {
                     color = hashColor;
                 }
                 else {
                     color = parseColor(hashColor, false).color;
                 }
+                if (color) {
+                    colors.push(color);
+                }
             }
             else if (mod) {
                 // ignore mods inside brackets
@@ -256,6 +260,7 @@ export function parseStyle(value, mode = 0) {
             values,
             mods,
             all,
+            colors,
             value: `${parsedValue} ${color}`.trim(),
             color,
         });
@@ -392,8 +397,8 @@ export function hexToRgb(hex) {
         .substring(1)
         .match(/.{2}/g)
         .map((x, i) => parseInt(x, 16) * (i === 3 ? 1 / 255 : 1));
-    if (Number.isNaN(rgba[0])) {
-        return 'rgb(0 0 0 / 1)';
+    if (rgba.some((v) => Number.isNaN(v))) {
+        return null;
     }
     if (rgba.length >= 3) {
         return `rgb(${rgba.slice(0, 3).join(' ')}${rgba.length > 3 ? ` / ${rgba[3]}` : ''})`;

package/es/tasty/utils/warnings.js

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

package/es/tokens.js

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

package/es/type-checks.js

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

package/es/utils/ResizeSensor.js

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

package/es/utils/modules.js

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

package/es/utils/promise.js

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

package/es/utils/random.js

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