@cube-dev/ui-kit 0.96.0 → 0.97.1

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.1
  * Released under the MIT license.
  */
 
@@ -15,6 +15,7 @@ import { CONTAINER_STYLES, tasty, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
 import { ItemAction } from '../../actions/ItemAction';
 import { ItemActionProvider } from '../../actions/ItemActionContext';
+import { highlightText } from '../highlightText';
 import { HotKeys } from '../HotKeys';
 import { ItemBadge } from '../ItemBadge';
 import { useAutoTooltip } from '../use-auto-tooltip';
@@ -280,7 +281,7 @@ const ItemElement = tasty({
     styleProps: CONTAINER_STYLES,
 });
 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, showActionsOnHover = false, disableActionsFocus = false, isButton = false, shape = 'button', 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, showActionsOnHover = false, disableActionsFocus = false, isButton = false, shape = 'button', defaultTooltipPlacement = 'top', highlight, highlightCaseSensitive = false, highlightStyles, ...rest } = props;
     // Loading state makes the component disabled
     const finalIsDisabled = isDisabled === true || (isLoading && isDisabled !== false);
     // Determine if we should show checkbox instead of icon
@@ -374,6 +375,13 @@ const Item = (props, ref) => {
         labelProps,
         isDynamicLabel: !!actions,
     });
+    // Process children with highlight if applicable
+    const processedChildren = useMemo(() => {
+        if (typeof children === 'string' && highlight) {
+            return highlightText(children, highlight, highlightCaseSensitive, highlightStyles);
+        }
+        return children;
+    }, [children, highlight, highlightCaseSensitive, highlightStyles]);
     // Render function that creates the item element
     const renderItemElement = (tooltipTriggerProps, tooltipRef) => {
         // Use callback ref to merge multiple refs without calling hooks
@@ -394,7 +402,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, "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, disableActionsFocus: disableActionsFocus, 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: processedChildren })) : 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, disableActionsFocus: disableActionsFocus, children: actions })) : null }))] }));
     };
     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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.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.96.0
+ * @cube-dev/ui-kit v0.97.1
  * Released under the MIT license.
  */
 

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

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Children, forwardRef, isValidElement, useEffect, useMemo, useRef, useState, } from 'react';
+import { Children, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { extractStyles, filterBaseProps, INNER_STYLES, mergeStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { isDevEnv } from '../../../tasty/utils/isDevEnv';
 import { Alert } from '../Alert';
@@ -26,6 +26,11 @@ const LayoutElement = tasty({
             collapsed: '6x',
         },
         '$content-padding': '1x',
+        // Auto-border size for sub-components (set when layout is vertical)
+        '$layout-border-size': {
+            '': '0',
+            vertical: '1bw',
+        },
         Inner: {
             // Direct child selector required for nested layouts
             $: '>',
@@ -74,6 +79,13 @@ function LayoutInner(props) {
     // Extract outer wrapper styles and inner content styles
     const outerStyles = extractStyles(otherProps, OUTER_STYLES);
     const innerStyles = extractStyles(otherProps, INNER_STYLES);
+    // Calculate if the layout flow is vertical (for auto-border feature)
+    // Default flow is 'column' (vertical), check if user overrides it
+    const isVertical = useMemo(() => {
+        const providedFlow = styles?.Inner?.flow;
+        const flowValue = typeof providedFlow === 'string' ? providedFlow : 'column';
+        return flowValue.startsWith('column');
+    }, [styles?.Inner]);
     // Merge styles using the same pattern as LayoutPane
     const finalStyles = useMemo(() => {
         // Handle grid mode and grid properties
@@ -111,6 +123,8 @@ function LayoutInner(props) {
     const isDragging = layoutContext?.isDragging ?? false;
     const isReady = layoutContext?.isReady ?? true;
     const markReady = layoutContext?.markReady;
+    const dismissOverlayPanels = layoutContext?.dismissOverlayPanels;
+    const hasOverlayPanels = layoutContext?.hasOverlayPanels ?? false;
     // Mark layout as ready after first paint
     // Using useEffect + requestAnimationFrame ensures:
     // 1. Panels register in useLayoutEffect → correct insets before first paint
@@ -160,7 +174,8 @@ function LayoutInner(props) {
         'has-transition': hasTransition,
         'auto-height': isAutoHeight && !isCollapsed,
         collapsed: isCollapsed,
-    }), [isDragging, isReady, hasTransition, isAutoHeight, isCollapsed]);
+        vertical: isVertical,
+    }), [isDragging, isReady, hasTransition, isAutoHeight, isCollapsed, isVertical]);
     // Combine local ref with forwarded ref
     const setRefs = (element) => {
         localRef.current = element;
@@ -173,7 +188,29 @@ function LayoutInner(props) {
     };
     // Show dev warning when collapsed and in dev mode (or forced for stories)
     const showDevWarning = isCollapsed && (_forceShowDevWarning || isDevEnv());
-    return (_jsx(LayoutElement, { ref: setRefs, ...filterBaseProps(otherProps, { eventProps: true }), mods: mods, styles: finalStyles, style: insetStyle, 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", { "data-element": "Inner", children: content })] })) }));
+    // Handle focus entering the Inner element - dismiss overlay panels
+    const handleInnerFocus = useCallback((e) => {
+        // Only dismiss if there are overlay panels
+        if (!hasOverlayPanels)
+            return;
+        // Check if focus is coming from outside the Inner element
+        const inner = e.currentTarget;
+        const relatedTarget = e.relatedTarget;
+        // If relatedTarget is null or not inside the Inner element,
+        // focus is entering from outside - dismiss overlay panels
+        if (!relatedTarget || !inner.contains(relatedTarget)) {
+            dismissOverlayPanels?.();
+        }
+    }, [hasOverlayPanels, dismissOverlayPanels]);
+    // Handle Escape key anywhere in the Layout - dismiss overlay panels
+    const handleKeyDown = useCallback((e) => {
+        if (hasOverlayPanels && e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            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", { "data-element": "Inner", onFocus: handleInnerFocus, children: content })] })) }));
 }
 /**
  * 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.96.0
+ * @cube-dev/ui-kit v0.97.1
  * Released under the MIT license.
  */
 

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

@@ -0,0 +1,31 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.97.1
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { tasty } from '../../../tasty';
+import { LayoutContainer } from './LayoutContainer';
+const CenterElement = tasty(LayoutContainer, {
+    qa: 'LayoutCenter',
+    styles: {
+        placeItems: 'center',
+        placeContent: 'center',
+        Inner: {
+            textAlign: 'center',
+            placeItems: 'center',
+        },
+    },
+});
+function LayoutCenter(props, ref) {
+    const { children, ...otherProps } = props;
+    return (_jsx(CenterElement, { ...otherProps, ref: ref, children: children }));
+}
+const _LayoutCenter = forwardRef(LayoutCenter);
+_LayoutCenter.displayName = 'Layout.Center';
+export { _LayoutCenter as LayoutCenter };
+
+        

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

@@ -0,0 +1,54 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.97.1
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, mergeStyles, tasty, } from '../../../tasty';
+import { LayoutContextReset } from './LayoutContext';
+const ContainerElement = tasty({
+    as: 'div',
+    qa: 'LayoutContainer',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        flexGrow: 1,
+        flexShrink: 1,
+        placeItems: 'center start',
+        placeContent: 'stretch',
+        overflow: 'auto',
+        scrollbar: 'thin',
+        padding: '$content-padding',
+        placeSelf: 'stretch',
+        width: '100%',
+        border: {
+            '': 0,
+            '!:last-child': '$layout-border-size solid #border bottom',
+        },
+        Inner: {
+            $: '>',
+            placeSelf: 'center',
+            display: 'flex',
+            flow: 'column',
+            width: '40x 100% 120x',
+            boxSizing: 'border-box',
+        },
+    },
+});
+function LayoutContainer(props, ref) {
+    const { children, styles, innerStyles: innerStylesProp, ...otherProps } = props;
+    const innerStyles = extractStyles(otherProps, CONTAINER_STYLES, innerStylesProp);
+    const hasInnerStyles = Object.keys(innerStyles).length > 0;
+    const finalStyles = useMemo(() => {
+        return mergeStyles(styles, hasInnerStyles ? { Inner: innerStyles } : null);
+    }, [styles, hasInnerStyles, innerStyles]);
+    return (_jsx(ContainerElement, { ref: ref, ...filterBaseProps(otherProps, { eventProps: true }), styles: finalStyles, children: _jsx("div", { "data-element": "Inner", children: _jsx(LayoutContextReset, { children: children }) }) }));
+}
+const _LayoutContainer = forwardRef(LayoutContainer);
+_LayoutContainer.displayName = 'Layout.Container';
+export { _LayoutContainer as LayoutContainer };
+
+        

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.1
  * Released under the MIT license.
  */
 
@@ -28,6 +28,10 @@ const ContentElement = tasty({
         height: 'min 0',
         overflow: 'hidden',
         boxSizing: 'content-box',
+        border: {
+            '': 0,
+            '!:last-child': '$layout-border-size solid #border bottom',
+        },
         Inner: {
             $: '>',
             display: 'flex',

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.1
  * Released under the MIT license.
  */
 
@@ -13,6 +13,7 @@ export function useLayoutContext() {
 }
 export function LayoutProvider({ children, hasTransition = false, }) {
     const registeredPanels = useRef(new Set());
+    const overlayPanelCallbacks = useRef(new Set());
     const [panelSizes, setPanelSizes] = useState({
         left: 0,
         top: 0,
@@ -21,6 +22,7 @@ export function LayoutProvider({ children, hasTransition = false, }) {
     });
     const [isDragging, setIsDragging] = useState(false);
     const [isReady, setIsReady] = useState(false);
+    const [hasOverlayPanels, setHasOverlayPanels] = useState(false);
     const registerPanel = useCallback((side, size) => {
         if (registeredPanels.current.has(side)) {
             throw new Error(`Layout: Only one panel per side is allowed. ` +
@@ -67,6 +69,20 @@ export function LayoutProvider({ children, hasTransition = false, }) {
     const markReady = useCallback(() => {
         setIsReady(true);
     }, []);
+    // Register an overlay panel's dismiss callback
+    const registerOverlayPanel = useCallback((dismiss) => {
+        overlayPanelCallbacks.current.add(dismiss);
+        setHasOverlayPanels(true);
+        // Return unregister function
+        return () => {
+            overlayPanelCallbacks.current.delete(dismiss);
+            setHasOverlayPanels(overlayPanelCallbacks.current.size > 0);
+        };
+    }, []);
+    // Dismiss all overlay panels
+    const dismissOverlayPanels = useCallback(() => {
+        overlayPanelCallbacks.current.forEach((dismiss) => dismiss());
+    }, []);
     const value = useMemo(() => ({
         registerPanel,
         unregisterPanel,
@@ -77,6 +93,9 @@ export function LayoutProvider({ children, hasTransition = false, }) {
         isDragging,
         isReady,
         hasTransition,
+        registerOverlayPanel,
+        dismissOverlayPanels,
+        hasOverlayPanels,
     }), [
         registerPanel,
         unregisterPanel,
@@ -87,6 +106,9 @@ export function LayoutProvider({ children, hasTransition = false, }) {
         isDragging,
         isReady,
         hasTransition,
+        registerOverlayPanel,
+        dismissOverlayPanels,
+        hasOverlayPanels,
     ]);
     return (_jsx(LayoutContext.Provider, { value: value, children: children }));
 }

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.1
  * Released under the MIT license.
  */
 
@@ -14,7 +14,8 @@ const FooterElement = tasty(LayoutContent, {
     qa: 'LayoutFooter',
     role: 'contentinfo',
     styles: {
-        border: 'top',
+        // Footer inherits auto-border from LayoutContent
+        // (no border when last-child, which is typical for footers)
         height: 'min 5x',
         flexShrink: 0,
         flexGrow: 0,

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.1
  * Released under the MIT license.
  */
 
@@ -17,6 +17,7 @@ const HeaderElement = tasty(LayoutContent, {
     as: 'header',
     qa: 'LayoutHeader',
     styles: {
+        // Header always has bottom border (inherent style)
         border: 'bottom',
         flexShrink: 0,
         flexGrow: 0,

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

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