@cube-dev/ui-kit 0.107.0 → 0.108.1

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

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

package/es/components/content/Alert/types.js

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

package/es/components/content/Alert/use-alert.js

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

package/es/components/content/Avatar/Avatar.js

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

package/es/components/content/Badge/Badge.js

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

package/es/components/content/Card/Card.js

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

package/es/components/content/Content.js

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

package/es/components/content/CopyPasteBlock/CopyPasteBlock.js

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

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

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

package/es/components/content/CopySnippet/CopySnippet.js

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

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

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

package/es/components/content/Disclosure/Disclosure.js

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

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

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

package/es/components/content/Divider.js

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

package/es/components/content/Footer.js

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

package/es/components/content/Header.js

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

package/es/components/content/HotKeys/HotKeys.js

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.107.0
+ * @cube-dev/ui-kit v0.108.1
  * Released under the MIT license.
  */
 
@@ -65,6 +65,7 @@ const ACTIONS_EVENT_HANDLERS = {
 const ItemElement = tasty({
     as: 'div',
     styles: {
+        '@interacted': 'active | :hover | :focus | :focus-within | :has([data-pressed])',
         display: 'inline-grid',
         flow: 'column dense',
         gap: 0,
@@ -166,6 +167,9 @@ const ItemElement = tasty({
         '$label-padding-right': {
             '': '$inline-padding',
             'has-end-content': '0',
+            // Restore padding when actions are hidden AND no other visible end content
+            '!inside-wrapper & !has-suffix & !has-right-icon & auto-hide-actions & !preserve-actions-space & !@interacted': '$inline-padding',
+            'inside-wrapper & !has-suffix & !has-right-icon & !preserve-actions-space & !actions-shown': '$inline-padding',
         },
         '$label-padding-bottom': {
             '': '$block-padding',
@@ -203,6 +207,7 @@ const ItemElement = tasty({
             textOverflow: 'ellipsis',
             width: '0 100%',
             preset: 'inherit',
+            transition: 'padding',
             padding: '$block-padding $label-padding-right $label-padding-bottom $label-padding-left',
         },
         Description: {
@@ -255,26 +260,26 @@ const ItemElement = tasty({
             placeSelf: 'stretch',
             padding: {
                 '': '0 $side-padding',
-                'has-actions-content & show-actions-on-hover & !preserve-actions-space & !:hover & !:focus & !:focus-within': '0',
+                'inside-wrapper & !actions-shown': 0,
             },
             boxSizing: 'border-box',
             height: 'min ($size - 2bw)',
             width: {
                 '': 'fixed ($actions-width, 0px)',
-                'has-actions-content & !show-actions-on-hover': 'max calc-size(max-content, size)',
-                'has-actions-content & show-actions-on-hover & !preserve-actions-space': 'max 0px',
-                'has-actions-content & show-actions-on-hover & !preserve-actions-space & (:hover | :focus | :focus-within)': 'max calc-size(max-content, size)',
-                'has-actions-content & show-actions-on-hover & preserve-actions-space': 'max calc-size(max-content, size)',
+                'has-actions-content & !auto-hide-actions': 'max calc-size(max-content, size)',
+                'has-actions-content & auto-hide-actions & !preserve-actions-space': 'max 0px',
+                'has-actions-content & auto-hide-actions & (!preserve-actions-space & ((@interacted & !inside-wrapper) | (inside-wrapper & actions-shown)))': 'max calc-size(max-content, size)',
+                'has-actions-content & auto-hide-actions & preserve-actions-space': 'max calc-size(max-content, size)',
             },
             opacity: {
                 '': 1,
-                'show-actions-on-hover': 0,
-                'show-actions-on-hover & (active | :has([data-pressed]) | :hover | :focus | :focus-within)': 1,
+                'auto-hide-actions': 0,
+                'auto-hide-actions & ((@interacted & !inside-wrapper) | (inside-wrapper & actions-shown))': 1,
             },
             transition: 'width $transition ease-out, opacity $transition ease-out, padding $transition ease-out',
             interpolateSize: 'allow-keywords',
             // Size for the action buttons
-            '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (4x - 2bw))',
+            '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',
             // Side padding for the button
             '$side-padding': '(($size - $action-size - 2bw) / 2)',
         },
@@ -337,7 +342,7 @@ const ItemElement = tasty({
     styleProps: CONTAINER_STYLES,
 });
 const Item = (props, ref) => {
-    let { children, size = 'medium', type = 'item', theme = 'default', mods, icon: iconProp, rightIcon: rightIconProp, prefix, suffix, description, descriptionPlacement, labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip = true, isDisabled, style, loadingSlot = 'auto', isLoading = false, actions, showActionsOnHover = false, preserveActionsSpace = false, disableActionsFocus = false, shape, defaultTooltipPlacement = 'top', level = 3, highlight, highlightCaseSensitive = false, highlightStyles, ...rest } = props;
+    let { children, size = 'medium', type = 'item', theme = 'default', mods, icon: iconProp, rightIcon: rightIconProp, prefix, suffix, description, descriptionPlacement, labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip = true, isDisabled, style, loadingSlot = 'auto', isLoading = false, actions, autoHideActions = false, preserveActionsSpace = false, disableActionsFocus = false, shape, defaultTooltipPlacement = 'top', level = 3, highlight, highlightCaseSensitive = false, highlightStyles, insideWrapper = false, showActions = false, ...rest } = props;
     // Determine if Label will be rendered
     const hasLabel = !!(children || labelProps);
     // Set default descriptionPlacement based on type
@@ -501,8 +506,10 @@ const Item = (props, ref) => {
             'has-description': showDescription,
             'has-actions': !!actions,
             'has-actions-content': !!(actions && actions !== true),
-            'show-actions-on-hover': showActionsOnHover === true,
+            'auto-hide-actions': autoHideActions === true,
             'preserve-actions-space': preserveActionsSpace === true,
+            'inside-wrapper': insideWrapper,
+            'actions-shown': showActions && insideWrapper,
             checkbox: hasCheckbox,
             description: showDescription ? finalDescriptionPlacement : 'none',
         };
@@ -516,9 +523,11 @@ const Item = (props, ref) => {
         finalDescriptionPlacement,
         hasCheckbox,
         actions,
-        showActionsOnHover,
+        autoHideActions,
         preserveActionsSpace,
         hasLabel,
+        showActions,
+        insideWrapper,
     ]);
     const { labelProps: finalLabelProps, labelRef, renderWithTooltip, } = useAutoTooltip({
         tooltip,

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

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

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

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

package/es/components/content/Layout/GridLayout.js

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

package/es/components/content/Layout/Layout.js

@@ -1,17 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.107.0
+ * @cube-dev/ui-kit v0.108.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Children, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { extractStyles, filterBaseProps, INNER_STYLES, mergeStyles, OUTER_STYLES, tasty, } from '../../../tasty/index.js';
 import { isDevEnv } from '../../../tasty/utils/is-dev-env.js';
 import { useCombinedRefs } from '../../../utils/react/index.js';
 import { Alert } from '../Alert/index.js';
-import { LayoutProvider, useLayoutContext } from './LayoutContext.js';
+import { LayoutProvider, useLayoutActionsContext, useLayoutRefsContext, useLayoutStateContext, } from './LayoutContext.js';
 const LayoutElement = tasty({
     as: 'div',
     qa: 'Layout',
@@ -36,6 +36,7 @@ const LayoutElement = tasty({
             // .base-class[data-hover] > [data-element="Inner"] { ...}
             // Direct child selector required for nested layouts
             $: '>',
+            zIndex: 0,
             container: 'layout / inline-size',
             position: 'absolute',
             inset: '$inset-top $inset-right $inset-bottom $inset-left',
@@ -55,33 +56,15 @@ const LayoutElement = tasty({
         },
     },
 });
-// Check if a child is a Layout.Panel
-function isPanelElement(child) {
-    return (isValidElement(child) &&
-        typeof child.type !== 'string' &&
-        child.type.displayName === 'Layout.Panel');
-}
 function LayoutInner(props) {
-    const layoutContext = useLayoutContext();
+    const layoutActions = useLayoutActionsContext();
+    const layoutState = useLayoutStateContext();
+    const layoutRefs = useLayoutRefsContext();
     const localRef = useRef(null);
     const [isAutoHeight, setIsAutoHeight] = useState(false);
     const [isCollapsed, setIsCollapsed] = useState(false);
     const { isGrid, columns, rows, template, contentPadding, hasTransition = false, styles, children, style, forwardedRef, innerRef: innerRefProp, innerProps, _forceShowDevWarning, ...otherProps } = props;
     const combinedInnerRef = useCombinedRefs(innerRefProp);
-    // Separate panels from other children
-    const { panels, content } = useMemo(() => {
-        const panelElements = [];
-        const contentElements = [];
-        Children.forEach(children, (child) => {
-            if (isPanelElement(child)) {
-                panelElements.push(child);
-            }
-            else {
-                contentElements.push(child);
-            }
-        });
-        return { panels: panelElements, content: contentElements };
-    }, [children]);
     // Extract outer wrapper styles and inner content styles
     const outerStyles = extractStyles(otherProps, OUTER_STYLES);
     const innerStyles = extractStyles(otherProps, INNER_STYLES);
@@ -121,17 +104,17 @@ function LayoutInner(props) {
         template,
     ]);
     // Calculate inset values from panel sizes
-    const panelSizes = layoutContext?.panelSizes ?? {
+    const panelSizes = layoutState?.panelSizes ?? {
         left: 0,
         top: 0,
         right: 0,
         bottom: 0,
     };
-    const isDragging = layoutContext?.isDragging ?? false;
-    const isReady = layoutContext?.isReady ?? true;
-    const markReady = layoutContext?.markReady;
-    const dismissOverlayPanels = layoutContext?.dismissOverlayPanels;
-    const hasOverlayPanels = layoutContext?.hasOverlayPanels ?? false;
+    const isDragging = layoutState?.isDragging ?? false;
+    const isReady = layoutState?.isReady ?? true;
+    const markReady = layoutActions?.markReady;
+    const dismissOverlayPanels = layoutActions?.dismissOverlayPanels;
+    const hasOverlayPanels = layoutState?.hasOverlayPanels ?? false;
     // Mark layout as ready after first paint
     // Using useEffect + requestAnimationFrame ensures:
     // 1. Panels register in useLayoutEffect → correct insets before first paint
@@ -217,7 +200,7 @@ function LayoutInner(props) {
             dismissOverlayPanels?.();
         }
     }, [hasOverlayPanels, dismissOverlayPanels]);
-    return (_jsx(LayoutElement, { ref: setRefs, ...filterBaseProps(otherProps, { eventProps: true }), mods: mods, styles: finalStyles, style: insetStyle, onKeyDown: hasOverlayPanels ? handleKeyDown : undefined, children: showDevWarning ? (_jsxs(Alert, { theme: "danger", children: [_jsx("b", { children: "UIKit:" }), " ", _jsx("b", { children: "<Layout/>" }), " has collapsed to ", _jsx("b", { children: "0" }), " height. Ensure the parent container has a defined height or use the", ' ', _jsx("b", { children: "height" }), " prop on ", _jsx("b", { children: "<Layout/>" }), "."] })) : (_jsxs(_Fragment, { children: [panels, _jsx("div", { ref: combinedInnerRef, "data-element": "Inner", onFocus: handleInnerFocus, ...innerProps, children: content })] })) }));
+    return (_jsx(LayoutElement, { ref: setRefs, ...filterBaseProps(otherProps, { eventProps: true }), mods: mods, styles: finalStyles, style: insetStyle, onKeyDown: hasOverlayPanels ? handleKeyDown : undefined, children: showDevWarning ? (_jsxs(Alert, { theme: "danger", children: [_jsx("b", { children: "UIKit:" }), " ", _jsx("b", { children: "<Layout/>" }), " has collapsed to ", _jsx("b", { children: "0" }), " height. Ensure the parent container has a defined height or use the", ' ', _jsx("b", { children: "height" }), " prop on ", _jsx("b", { children: "<Layout/>" }), "."] })) : (_jsxs(_Fragment, { children: [_jsx("div", { ref: layoutRefs?.setPanelContainer, "data-element": "PanelContainer" }), _jsx("div", { ref: combinedInnerRef, "data-element": "Inner", onFocus: handleInnerFocus, ...innerProps, children: children })] })) }));
 }
 /**
  * Layout component provides a vertical flex layout with overflow-safe content.

package/es/components/content/Layout/LayoutBlock.js

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

package/es/components/content/Layout/LayoutCenter.js

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

package/es/components/content/Layout/LayoutContainer.js

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

package/es/components/content/Layout/LayoutContent.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.107.0
+ * @cube-dev/ui-kit v0.108.1
  * Released under the MIT license.
  */
 
@@ -51,6 +51,7 @@ const ContentElement = tasty({
         },
         // Custom scrollbar handles (when scrollbar="tiny")
         ScrollbarV: {
+            $: '>',
             position: 'absolute',
             right: '1px',
             top: '$scrollbar-v-top',
@@ -66,6 +67,7 @@ const ContentElement = tasty({
             pointerEvents: 'none',
         },
         ScrollbarH: {
+            $: '>',
             position: 'absolute',
             bottom: '1px',
             left: '$scrollbar-h-left',