@cube-dev/ui-kit 0.87.6 → 0.89.0

package/es/components/content/Item/Item.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.87.6
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
@@ -31,7 +31,6 @@ const DEFAULT_ICON_STYLES = {
         'checkbox & !selected': 0,
         'checkbox & !selected & hovered': 0.4,
     },
-    gridRow: 'span 2',
 };
 const ADDITION_STYLES = {
     $: '>',
@@ -39,7 +38,6 @@ const ADDITION_STYLES = {
     flow: 'column',
     placeItems: 'center',
     placeContent: 'stretch',
-    gridRow: 'span 2',
 };
 const ACTIONS_EVENT_HANDLERS = {
     onClick: (e) => e.stopPropagation(),
@@ -54,6 +52,7 @@ const ACTIONS_EVENT_HANDLERS = {
     },
 };
 const ItemElement = tasty({
+    as: 'div',
     styles: {
         display: 'inline-grid',
         flow: 'column dense',
@@ -61,18 +60,10 @@ const ItemElement = tasty({
         outline: 0,
         placeItems: 'stretch',
         placeContent: 'stretch',
-        gridColumns: {
-            '': '1sf max-content max-content',
-            'with-actions': '1sf max-content max-content max-content',
-            'with-icon ^ with-prefix': 'max-content 1sf max-content max-content',
-            'with-icon ^ with-prefix & with-actions': 'max-content 1sf max-content max-content max-content',
-            'with-icon & with-prefix': 'max-content max-content 1sf max-content max-content',
-            'with-icon & with-prefix & with-actions': 'max-content max-content 1sf max-content max-content max-content',
-            '(with-icon ^ with-right-icon) & !with-description & !with-prefix & !with-suffix & !with-label': 'max-content',
-        },
-        gridRows: {
-            '': 'auto auto',
-            'with-description-block': 'auto auto auto',
+        gridTemplate: {
+            '': '"icon prefix label suffix rightIcon actions" auto "icon prefix label suffix rightIcon actions" auto / max-content max-content 1sf max-content max-content max-content',
+            'description=inline': '"icon prefix label suffix rightIcon actions" auto "icon prefix description suffix rightIcon actions" auto / max-content max-content 1sf max-content max-content max-content',
+            'description=block': '"icon prefix label suffix rightIcon actions" auto "description description description description description description" auto / max-content max-content 1sf max-content max-content max-content',
         },
         // Prevent items from shrinking inside vertical flex layouts (Menu, ListBox, etc)
         flexShrink: {
@@ -84,15 +75,17 @@ const ItemElement = tasty({
         margin: 0,
         radius: {
             '': true,
-            card: '1cr',
+            'shape=card': '1cr',
+            'shape=button': true,
+            'shape=sharp': '0',
         },
         height: {
             '': 'min $size',
-            '[data-size="inline"]': '(1lh + 2bw)',
+            'size=inline': '(1lh + 2bw)',
         },
         width: {
             '': 'min $size',
-            '[data-size="inline"]': 'min (1lh + 2bw)',
+            'size=inline': 'min (1lh + 2bw)',
         },
         border: '#clear',
         fill: {
@@ -112,10 +105,10 @@ const ItemElement = tasty({
         preset: {
             '': 't3',
             button: 't3m',
-            '[data-size="xsmall"]': 't4',
-            '[data-size="xlarge"]': 't2',
-            '[data-size="xlarge"] & button': 't2m',
-            '[data-size="inline"]': 'tag',
+            'size=xsmall': 't4',
+            'size=xlarge': 't2',
+            'size=xlarge & button': 't2m',
+            'size=inline': 'tag',
         },
         boxSizing: 'border-box',
         textDecoration: 'none',
@@ -124,33 +117,64 @@ const ItemElement = tasty({
         outlineOffset: 1,
         cursor: {
             '': 'default',
-            ':is(button) | :is(a)': 'pointer',
+            ':is(a)': 'pointer',
+            ':is(button) | listboxitem | menuitem': '$pointer',
             disabled: 'not-allowed',
         },
         $size: {
             '': '$size-md',
-            '[data-size="xsmall"]': '$size-xs',
-            '[data-size="small"]': '$size-sm',
-            '[data-size="medium"]': '$size-md',
-            '[data-size="large"]': '$size-lg',
-            '[data-size="xlarge"]': '$size-xl',
-            '[data-size="inline"]': '1lh',
+            'size=xsmall': '$size-xs',
+            'size=small': '$size-sm',
+            'size=medium': '$size-md',
+            'size=large': '$size-lg',
+            'size=xlarge': '$size-xl',
+            'size=inline': '1lh',
         },
         '$inline-padding': {
             '': 'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',
-            '[data-size="inline"]': '.25x',
+            'size=inline': '.25x',
         },
         '$block-padding': {
             '': '.5x',
-            '[data-size="xsmall"] | [data-size="small"]': '.25x',
-            '[data-size="inline"]': 0,
+            'size=xsmall | size=small': '.25x',
+            'size=inline': 0,
         },
         '$inline-compensation': '.5x',
         '$min-inline-padding': '(1x - 1bw)',
-        Icon: DEFAULT_ICON_STYLES,
-        RightIcon: DEFAULT_ICON_STYLES,
+        '$label-padding-left': {
+            '': '$inline-padding',
+            'has-start-content': '0',
+        },
+        '$label-padding-right': {
+            '': '$inline-padding',
+            'has-end-content': '0',
+        },
+        '$label-padding-bottom': {
+            '': '$block-padding',
+            'description=inline': '0',
+        },
+        '$description-padding-left': {
+            '': '$inline-padding',
+            'has-start-content': 0,
+            'description=block': '($inline-padding - $inline-compensation + 1bw)',
+            'description=block & !has-start-content': '$inline-padding',
+        },
+        '$description-padding-right': {
+            '': '$inline-padding',
+            'has-end-content': 0,
+            'description=block': '($inline-padding - $inline-compensation + 1bw)',
+            'description=block & !has-end-content': '$inline-padding',
+        },
+        '$description-padding-bottom': {
+            '': '$block-padding',
+            'description=block': '$bottom-padding',
+        },
+        '$bottom-padding': 'max($block-padding, (($size - 4x) / 2) + $block-padding)',
+        Icon: { ...DEFAULT_ICON_STYLES, gridArea: 'icon' },
+        RightIcon: { ...DEFAULT_ICON_STYLES, gridArea: 'rightIcon' },
         Label: {
             $: '>',
+            gridArea: 'label',
             display: 'block',
             placeSelf: 'center start',
             boxSizing: 'border-box',
@@ -159,24 +183,11 @@ const ItemElement = tasty({
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             maxWidth: '100%',
-            padding: {
-                '': '$block-padding $inline-padding',
-                '(with-icon | with-prefix)': '$block-padding $inline-padding $block-padding 0',
-                '(with-right-icon | with-suffix | with-actions)': '$block-padding 0 $block-padding $inline-padding',
-                '(with-icon | with-prefix) & (with-right-icon | with-suffix | with-actions)': '$block-padding 0',
-                'with-description & !with-description-block': '$block-padding $inline-padding 0 $inline-padding',
-                'with-description & !with-description-block & (with-icon | with-prefix)': '$block-padding $inline-padding 0 0',
-                'with-description & !with-description-block & (with-right-icon | with-suffix | with-actions)': '$block-padding 0 0 $inline-padding',
-                'with-description & !with-description-block & (with-icon | with-prefix) & (with-right-icon | with-suffix | with-actions)': '$block-padding 0 0 0',
-            },
-            gridRow: {
-                '': 'span 2',
-                'with-description': 'span 1',
-                'with-description-block': 'span 2',
-            },
+            padding: '$block-padding $label-padding-right $label-padding-bottom $label-padding-left',
         },
         Description: {
             $: '>',
+            gridArea: 'description',
             preset: 't4',
             color: 'inherit',
             opacity: 0.75,
@@ -185,42 +196,27 @@ const ItemElement = tasty({
             textOverflow: 'ellipsis',
             maxWidth: '100%',
             textAlign: 'left',
-            gridRow: {
-                '': 'span 1',
-                'with-description-block': '3 / span 1',
-            },
-            gridColumn: {
-                '': 'span 1',
-                'with-description-block': '1 / -1',
-            },
-            padding: {
-                '': '0 $inline-padding $block-padding $inline-padding',
-                '(with-icon | with-prefix)': '0 $inline-padding $block-padding 0',
-                '(with-right-icon | with-suffix)': '0 0 $block-padding $inline-padding',
-                '(with-icon | with-prefix) & (with-right-icon | with-suffix)': '0 0 $block-padding 0',
-                'with-description-block': '0 ($inline-padding - $inline-compensation + 1bw) $bottom-padding ($inline-padding - $inline-compensation + 1bw)',
-                'with-description-block & !with-icon': '0 ($inline-padding - $inline-compensation + 1bw) $bottom-padding $inline-padding',
-                'with-description-block & !with-right-icon': '0 $inline-padding $bottom-padding ($inline-padding - $inline-compensation + 1bw)',
-                'with-description-block & !with-right-icon & !with-icon': '0 $inline-padding $bottom-padding $inline-padding',
-            },
-            '$bottom-padding': 'max($block-padding, (($size - 4x) / 2) + $block-padding)',
+            padding: '0 $description-padding-right $description-padding-bottom $description-padding-left',
         },
         Prefix: {
             ...ADDITION_STYLES,
+            gridArea: 'prefix',
             padding: {
                 '': '$inline-padding left',
-                'with-icon': 0,
+                'has-icon': 0,
             },
         },
         Suffix: {
             ...ADDITION_STYLES,
+            gridArea: 'suffix',
             padding: {
                 '': '$inline-padding right',
-                'with-right-icon': 0,
+                'has-right-icon': 0,
             },
         },
         Actions: {
             $: '>',
+            gridArea: 'actions',
             display: 'flex',
             gap: '1bw',
             placeItems: 'center',
@@ -229,10 +225,9 @@ const ItemElement = tasty({
             padding: '0 $side-padding',
             boxSizing: 'border-box',
             height: 'min ($size - 2bw)',
-            gridRow: 'span 2',
             width: {
                 '': '($actions-width, 0px)',
-                'with-actions-content': 'calc-size(max-content, size)',
+                'has-actions-content': 'calc-size(max-content, size)',
             },
             transition: 'width $transition ease-out',
             interpolateSize: 'allow-keywords',
@@ -418,7 +413,7 @@ export function useAutoTooltip({ tooltip, children, labelProps, isDynamicLabel =
     };
 }
 const Item = (props, ref) => {
-    let { children, size = 'medium', type = 'item', theme = 'default', mods, icon, rightIcon, prefix, suffix, description, descriptionPlacement = 'inline', labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip = true, isDisabled, style, loadingSlot = 'auto', isLoading = false, isCard = false, actions, isButton = false, defaultTooltipPlacement = 'top', ...rest } = props;
+    let { children, size = 'medium', type = 'item', theme = 'default', mods, icon, rightIcon, prefix, suffix, description, descriptionPlacement = 'inline', labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip = true, isDisabled, style, loadingSlot = 'auto', isLoading = false, isCard = false, actions, isButton = false, shape = 'button', defaultTooltipPlacement = 'top', ...rest } = props;
     // Loading state makes the component disabled
     const finalIsDisabled = isDisabled === true || (isLoading && isDisabled !== false);
     // Determine if we should show checkbox instead of icon
@@ -432,7 +427,7 @@ const Item = (props, ref) => {
             return 'rightIcon';
         return 'icon'; // fallback
     }, [loadingSlot, icon, rightIcon]);
-    const showDescriptions = useMemo(() => {
+    const showDescription = useMemo(() => {
         const copyProps = { ...descriptionProps };
         delete copyProps.id;
         return !!(description || Object.keys(copyProps).length > 0);
@@ -462,21 +457,27 @@ const Item = (props, ref) => {
     }, [hotkeys, finalIsDisabled]);
     mods = useMemo(() => {
         return {
-            'with-icon': !!finalIcon,
-            'with-right-icon': !!finalRightIcon,
-            'with-label': !!(children || labelProps),
-            'with-prefix': !!finalPrefix,
-            'with-suffix': !!finalSuffix,
-            'with-description': showDescriptions,
-            'with-description-block': showDescriptions && descriptionPlacement === 'block',
-            'with-actions': !!actions,
-            'with-actions-content': !!(actions && actions !== true),
+            'has-icon': !!finalIcon,
+            'has-start-content': !!(finalIcon || finalPrefix),
+            'has-end-content': !!(finalRightIcon || finalSuffix || actions),
+            'has-right-icon': !!finalRightIcon,
+            'has-label': !!(children || labelProps),
+            'has-prefix': !!finalPrefix,
+            'has-suffix': !!finalSuffix,
+            'has-description': showDescription,
+            'has-actions': !!actions,
+            'has-actions-content': !!(actions && actions !== true),
             checkbox: hasCheckbox,
             disabled: finalIsDisabled,
             selected: isSelected === true,
             loading: isLoading,
             card: isCard === true,
             button: isButton === true,
+            ...(typeof size === 'number' ? {} : { size }),
+            description: showDescription ? descriptionPlacement : 'none',
+            type,
+            theme,
+            shape,
             ...mods,
         };
     }, [
@@ -484,14 +485,18 @@ const Item = (props, ref) => {
         finalRightIcon,
         finalPrefix,
         finalSuffix,
-        showDescriptions,
+        showDescription,
         descriptionPlacement,
         hasCheckbox,
         isSelected,
         isLoading,
         isCard,
         isButton,
+        shape,
         actions,
+        size,
+        type,
+        theme,
         mods,
     ]);
     const { labelProps: finalLabelProps, labelRef, renderWithTooltip, } = useAutoTooltip({
@@ -520,7 +525,7 @@ const Item = (props, ref) => {
         const finalStyle = typeof size === 'number'
             ? { ...style, '--size': `${size}px` }
             : style;
-        return (_jsxs(ItemElement, { ref: handleRef, variant: theme && type ? `${theme}.${type}` : undefined, disabled: finalIsDisabled, "data-size": typeof size === 'number' ? undefined : size, "data-type": type, "data-theme": theme, "aria-disabled": finalIsDisabled, "aria-selected": isSelected, mods: mods, styles: styles, type: htmlType, ...mergeProps(rest, tooltipTriggerProps || {}), style: finalStyle, children: [finalIcon && (_jsx("div", { "data-element": "Icon", children: hasCheckbox ? _jsx(CheckIcon, {}) : finalIcon })), finalPrefix && _jsx("div", { "data-element": "Prefix", children: finalPrefix }), children || labelProps ? (_jsx("div", { "data-element": "Label", ...finalLabelProps, ref: labelRef, children: children })) : null, showDescriptions ? (_jsx("div", { "data-element": "Description", ...descriptionProps, children: description })) : null, finalSuffix && _jsx("div", { "data-element": "Suffix", children: finalSuffix }), finalRightIcon && (_jsx("div", { "data-element": "RightIcon", children: finalRightIcon })), actions && (_jsx("div", { "data-element": "Actions", ...ACTIONS_EVENT_HANDLERS, children: actions !== true ? (_jsx(ItemActionProvider, { type: type, theme: theme, children: actions })) : null }))] }));
+        return (_jsxs(ItemElement, { ref: handleRef, variant: theme && type ? `${theme}.${type}` : undefined, disabled: finalIsDisabled, "aria-disabled": finalIsDisabled, "aria-selected": isSelected, mods: mods, styles: styles, type: htmlType, ...mergeProps(rest, tooltipTriggerProps || {}), style: finalStyle, children: [finalIcon && (_jsx("div", { "data-element": "Icon", children: hasCheckbox ? _jsx(CheckIcon, {}) : finalIcon })), finalPrefix && _jsx("div", { "data-element": "Prefix", children: finalPrefix }), children || labelProps ? (_jsx("div", { "data-element": "Label", ...finalLabelProps, ref: labelRef, children: children })) : null, showDescription ? (_jsx("div", { "data-element": "Description", ...descriptionProps, children: description })) : null, finalSuffix && _jsx("div", { "data-element": "Suffix", children: finalSuffix }), finalRightIcon && (_jsx("div", { "data-element": "RightIcon", children: finalRightIcon })), actions && (_jsx("div", { "data-element": "Actions", ...ACTIONS_EVENT_HANDLERS, children: actions !== true ? (_jsx(ItemActionProvider, { type: type, theme: theme, children: actions })) : null }))] }));
     }, [
         ref,
         theme,
@@ -545,6 +550,7 @@ const Item = (props, ref) => {
         actions,
         size,
         style,
+        shape,
     ]);
     return renderWithTooltip(renderItemElement, defaultTooltipPlacement);
 };

package/es/components/content/Item/index.js

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

package/es/components/content/ItemBadge/ItemBadge.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.87.6
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
@@ -55,7 +55,7 @@ export const ItemBadge = forwardRef(function ItemBadge(allProps, ref) {
         checkbox: hasCheckbox,
         selected: isSelected,
         loading: isLoading,
-        'with-label': !!children,
+        'has-label': !!children,
         context: !!contextType,
         ...mods,
     }), [hasCheckbox, isSelected, isLoading, children, contextType, mods]);

package/es/components/content/ItemBadge/index.js

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

package/es/components/content/List/SectionHeading.js

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

package/es/components/content/List/index.js

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

package/es/components/content/Paragraph.js

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

package/es/components/content/Placeholder/Placeholder.js

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

package/es/components/content/PrismCode/PrismCode.js

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

package/es/components/content/PrismCode/prismSetup.js

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

package/es/components/content/PrismDiffCode/PrismDiffCode.js

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

package/es/components/content/Result/Result.js

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

package/es/components/content/Skeleton/Skeleton.js

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

package/es/components/content/Tag/Tag.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.87.6
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
@@ -18,21 +18,21 @@ const TagElement = tasty(Item, {
         fill: {
             '': '#dark.04',
             ...Object.keys(THEMES).reduce((map, type) => {
-                map[`[data-type="${type}"]`] = THEMES[type].fill;
+                map[`type=${type}`] = THEMES[type].fill;
                 return map;
             }, {}),
         },
         color: {
             '': '#dark.65',
             ...Object.keys(THEMES).reduce((map, type) => {
-                map[`[data-type="${type}"]`] = THEMES[type].color;
+                map[`type=${type}`] = THEMES[type].color;
                 return map;
             }, {}),
         },
         border: {
             '': true,
             ...Object.keys(THEMES).reduce((map, type) => {
-                map[`[data-type="${type}"]`] = THEMES[type].border;
+                map[`type=${type}`] = THEMES[type].border;
                 return map;
             }, {}),
         },

package/es/components/content/Text.js

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

package/es/components/content/Title.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.87.6
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
@@ -20,12 +20,12 @@ const TitleElement = tasty({
         color: '#dark',
         preset: {
             '': 'h6',
-            '[data-level="1"]': 'h1',
-            '[data-level="2"]': 'h2',
-            '[data-level="3"]': 'h3',
-            '[data-level="4"]': 'h4',
-            '[data-level="5"]': 'h5',
-            '[data-level="6"]': 'h6',
+            'level=1': 'h1',
+            'level=2': 'h2',
+            'level=3': 'h3',
+            'level=4': 'h4',
+            'level=5': 'h5',
+            'level=6': 'h6',
         },
         margin: '0',
         whiteSpace: {

package/es/components/fields/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.87.6
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
@@ -33,7 +33,7 @@ const CheckboxWrapperElement = tasty({
         gap: '1x',
         flow: 'row',
         preset: 'default',
-        cursor: 'pointer',
+        cursor: '$pointer',
         width: 'max max-content',
         color: '#dark-02',
     },

package/es/components/fields/Checkbox/CheckboxGroup.js

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

package/es/components/fields/Checkbox/context.js

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

package/es/components/fields/Checkbox/index.js

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

package/es/components/fields/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.87.6
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
@@ -59,12 +59,13 @@ const ComboBoxOverlayElement = tasty({
             '': false,
             hidden: true,
         },
+        boxSizing: 'border-box',
         transition: 'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',
         translate: {
             '': '0 0',
             'open & [data-placement="top"]': '0 0',
             '!open & [data-placement="top"]': '0 1x',
-            'open & ([data-placement="bottom"] | ![data-placement]': '0 0',
+            'open & ([data-placement="bottom"] | ![data-placement])': '0 0',
             '!open & ([data-placement="bottom"] | ![data-placement])': '0 -1x',
         },
         transformOrigin: {
@@ -407,7 +408,7 @@ function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction
                     hidden: phase === 'unmounted',
                 }, styles: overlayStyles, style: {
                     '--min-width': comboBoxWidth ? `${comboBoxWidth}px` : undefined,
-                }, children: _jsx(ListBox, { ref: listBoxRef, focusOnHover: true, disableSelectionToggle: true, id: `ComboBoxListBox-${comboBoxId}`, "aria-label": ariaLabel || (typeof label === 'string' ? label : 'Options'), selectedKey: effectiveSelectedKey, selectionMode: "single", isDisabled: isDisabled, disabledKeys: disabledKeys, shouldUseVirtualFocus: true, items: items, filter: filter, styles: listBoxStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, stateRef: listStateRef, size: "medium", type: "popover", onSelectionChange: onSelectionChange, children: children }) }) })) }));
+                }, children: _jsx(ListBox, { ref: listBoxRef, focusOnHover: true, disableSelectionToggle: true, id: `ComboBoxListBox-${comboBoxId}`, "aria-label": ariaLabel || (typeof label === 'string' ? label : 'Options'), selectedKey: effectiveSelectedKey, selectionMode: "single", isDisabled: isDisabled, disabledKeys: disabledKeys, shouldUseVirtualFocus: true, items: items, filter: filter, styles: listBoxStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, stateRef: listStateRef, size: "medium", shape: "popover", onSelectionChange: onSelectionChange, children: children }) }) })) }));
     return _jsx(Portal, { children: overlayContent });
 }
 // ============================================================================

package/es/components/fields/ComboBox/index.js

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

package/es/components/fields/DatePicker/DateInput.js

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