@cube-dev/ui-kit 0.0.0-canary-2b56a33 → 0.0.0-canary-85e8f98

package/es/components/form/wrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/helpers/DisplayTransition/DisplayTransition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/helpers/DisplayTransition/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/helpers/IconSwitch/IconSwitch.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/helpers/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/layout/Flex.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/layout/Flow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/layout/Grid.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/layout/Panel.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/layout/Prefix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/layout/ResizablePanel.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/layout/Space.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/layout/Suffix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/navigation/Tabs/DraggableTabList.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/navigation/Tabs/EditableTitle.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/navigation/Tabs/TabButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 
@@ -103,7 +103,7 @@ function isMenuEmpty(menu) {
  */
 export function TabButton({ item, tabData, isLastTab }) {
     // Get shared context
-    const { state, type, size, showActionsOnHover: parentShowActionsOnHover, isEditable: parentIsEditable, menu: parentMenu, menuTriggerProps: parentMenuTriggerProps, menuProps: parentMenuProps, contextMenu: parentContextMenu, onAction: parentOnAction, onDelete, dragState, dropState, editingKey, editValue, setEditValue, startEditing, submitEditing, cancelEditing, } = useTabsContext();
+    const { state, type, size, showActionsOnHover: parentShowActionsOnHover, isEditable: parentIsEditable, menu: parentMenu, menuTriggerProps: parentMenuTriggerProps, menuProps: parentMenuProps, contextMenu: parentContextMenu, onAction: parentOnAction, onDelete, dragState, dropState, tabStyles: parentTabStyles, editingKey, editValue, setEditValue, startEditing, submitEditing, cancelEditing, } = useTabsContext();
     const ref = useRef(null);
     const containerRef = useRef(null);
     const actionsRef = useRef(null);
@@ -301,7 +301,17 @@ export function TabButton({ item, tabData, isLastTab }) {
     // Render title with editing support if editable
     const titleContent = effectiveIsEditable ? (_jsx(EditableTitle, { title: tabData.title, isEditing: isEditing, editValue: isEditing ? editValue : '', onEditValueChange: handleEditValueChange, onStartEditing: handleStartEditing, onSubmit: handleSubmitEditing, onCancel: handleCancelEditing })) : (tabData.title);
     // Extract tab-specific props and pass through the rest (style props) to the Item
-    const { title: _title, content: _content, key: _key, isDisabled: _isDisabled, prerender: _prerender, keepMounted: _keepMounted, size: _size, type: _type, actions: _actions, showActionsOnHover: _showActionsOnHover, isEditable: _isEditable, onTitleChange: _onTitleChange, menu: _menu, menuTriggerProps: _menuTriggerProps, menuProps: _menuProps, contextMenu: _contextMenu, onAction: _onAction, qa, qaVal, styles, ...itemStyleProps } = tabData;
+    const { title: _title, content: _content, key: _key, isDisabled: _isDisabled, prerender: _prerender, keepMounted: _keepMounted, size: _size, type: _type, actions: _actions, showActionsOnHover: _showActionsOnHover, isEditable: _isEditable, onTitleChange: _onTitleChange, menu: _menu, menuTriggerProps: _menuTriggerProps, menuProps: _menuProps, contextMenu: _contextMenu, onAction: _onAction, qa, qaVal, styles: tabSpecificStyles, ...itemStyleProps } = tabData;
+    // Merge parent tabStyles with tab-specific styles (tab-specific overrides parent)
+    const effectiveStyles = useMemo(() => {
+        if (!parentTabStyles && !tabSpecificStyles)
+            return undefined;
+        if (!parentTabStyles)
+            return tabSpecificStyles;
+        if (!tabSpecificStyles)
+            return parentTabStyles;
+        return { ...parentTabStyles, ...tabSpecificStyles };
+    }, [parentTabStyles, tabSpecificStyles]);
     // Use the hook's targetRef when context menu is enabled
     const effectiveContainerRef = effectiveContextMenu && processedMenu
         ? contextMenu.targetRef
@@ -315,7 +325,7 @@ export function TabButton({ item, tabData, isLastTab }) {
     };
     return (_jsxs(TabContainer, { ref: effectiveContainerRef, "data-size": itemSize, mods: containerMods, tokens: { '$actions-width': `${actionsWidth}px` }, ...effectiveDragProps, children: [isDraggable && dropState && (_jsx(TabDropIndicator, { target: { type: 'item', key: item.key, dropPosition: 'before' }, dropState: dropState, position: "before" })), _jsx(TabElement, { preserveActionsSpace: true, showActionsOnHover: effectiveShowActionsOnHover, as: "button", ...mergeProps(tabProps, hoverProps, focusProps, {
                     onKeyDown: handleKeyDown,
-                }), ...ariaProps, ...itemStyleProps, ref: ref, qa: qa ?? `Tab-${String(item.key)}`, qaVal: qaVal, styles: styles, mods: mods, isSelected: isActive, isDisabled: isDisabled, size: itemSize, type: itemType, shape: itemShape, actions: actions ? true : undefined, children: titleContent }), actions && (_jsx("div", { ref: actionsRef, "data-element": "Actions", ...ACTIONS_EVENT_HANDLERS, children: _jsx(ItemActionProvider, { type: itemType, theme: "default", isDisabled: isDisabled, children: actions }) })), effectiveContextMenu && processedMenu && contextMenu.rendered, isDraggable && dropState && isLastTab && (_jsx(TabDropIndicator, { target: { type: 'item', key: item.key, dropPosition: 'after' }, dropState: dropState, position: "after" }))] }));
+                }), ...ariaProps, ...itemStyleProps, ref: ref, qa: qa ?? `Tab-${String(item.key)}`, qaVal: qaVal, styles: effectiveStyles, mods: mods, isSelected: isActive, isDisabled: isDisabled, size: itemSize, type: itemType, shape: itemShape, actions: actions ? true : undefined, children: titleContent }), actions && (_jsx("div", { ref: actionsRef, "data-element": "Actions", ...ACTIONS_EVENT_HANDLERS, children: _jsx(ItemActionProvider, { type: itemType, theme: "default", isDisabled: isDisabled, children: actions }) })), effectiveContextMenu && processedMenu && contextMenu.rendered, isDraggable && dropState && isLastTab && (_jsx(TabDropIndicator, { target: { type: 'item', key: item.key, dropPosition: 'after' }, dropState: dropState, position: "after" }))] }));
 }
 
         

package/es/components/navigation/Tabs/TabDropIndicator.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/navigation/Tabs/TabPanel.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 
@@ -21,18 +21,28 @@ export function shouldRenderPanel(isActive, wasVisited, effectivePrerender, effe
 /**
  * Renders a single tab panel with proper ARIA attributes.
  */
-export function TabPanelRenderer({ tabKey, state, content, prerender, keepMounted, tabPrerender, tabKeepMounted, visitedKeys, panelStyles, qa, qaVal, }) {
+export function TabPanelRenderer({ tabKey, state, content, prerender, keepMounted, tabPrerender, tabKeepMounted, visitedKeys, defaultPanelStyles, panelStyles, qa, qaVal, }) {
     const ref = useRef(null);
     const { tabPanelProps } = useTabPanel({ key: tabKey }, state, ref);
     const isActive = state.selectedKey === tabKey;
     // Determine effective prerender/keepMounted (tab-level overrides global)
     const effectivePrerender = tabPrerender ?? prerender;
     const effectiveKeepMounted = tabKeepMounted ?? keepMounted;
+    // Merge default panel styles with panel-specific styles (panel-specific overrides default)
+    const effectiveStyles = useMemo(() => {
+        if (!defaultPanelStyles && !panelStyles)
+            return undefined;
+        if (!defaultPanelStyles)
+            return panelStyles;
+        if (!panelStyles)
+            return defaultPanelStyles;
+        return { ...defaultPanelStyles, ...panelStyles };
+    }, [defaultPanelStyles, panelStyles]);
     // Determine if panel should render
     if (!shouldRenderPanel(isActive, visitedKeys.has(tabKey), effectivePrerender, effectiveKeepMounted)) {
         return null;
     }
-    return (_jsx(TabPanelElement, { ...tabPanelProps, ref: ref, qa: qa ?? 'TabPanel', qaVal: qaVal ?? String(tabKey), styles: panelStyles, style: {
+    return (_jsx(TabPanelElement, { ...tabPanelProps, ref: ref, qa: qa ?? 'TabPanel', qaVal: qaVal ?? String(tabKey), styles: effectiveStyles, style: {
             display: isActive ? 'contents' : 'none',
         }, children: content }));
 }
@@ -48,7 +58,7 @@ export function TabPanelRenderer({ tabKey, state, content, prerender, keepMounte
  * - `panelCacheKeys`: Adds cache-key-based invalidation (lazy - only when active)
  * - No caching props: Only active panel is rendered, unmount when inactive
  */
-export function CachedPanelRenderer({ parsedTabs, explicitPanels, state, renderPanel, panelCacheKeys, prerender, keepMounted, visitedKeys, }) {
+export function CachedPanelRenderer({ parsedTabs, explicitPanels, state, renderPanel, panelCacheKeys, prerender, keepMounted, visitedKeys, defaultPanelStyles, }) {
     // Cache for rendered content - stores { content, cacheKey } per panel
     const contentCacheRef = useRef(new Map());
     /** Get the cache key for a panel. Returns undefined if not defined. */
@@ -121,7 +131,7 @@ export function CachedPanelRenderer({ parsedTabs, explicitPanels, state, renderP
                 const cached = contentCacheRef.current.get(tab.key);
                 content = cached?.content ?? null;
             }
-            return (_jsx(TabPanelRenderer, { tabKey: tab.key, state: state, content: content, prerender: prerender, keepMounted: keepMounted, tabPrerender: tabPrerender, tabKeepMounted: tabKeepMounted, visitedKeys: visitedKeys, panelStyles: explicitPanel?.styles, qa: explicitPanel?.qa, qaVal: explicitPanel?.qaVal }, tab.key));
+            return (_jsx(TabPanelRenderer, { tabKey: tab.key, state: state, content: content, prerender: prerender, keepMounted: keepMounted, tabPrerender: tabPrerender, tabKeepMounted: tabKeepMounted, visitedKeys: visitedKeys, defaultPanelStyles: defaultPanelStyles, panelStyles: explicitPanel?.styles, qa: explicitPanel?.qa, qaVal: explicitPanel?.qaVal }, tab.key));
         }) }));
 }
 

package/es/components/navigation/Tabs/TabPicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/navigation/Tabs/Tabs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 
@@ -75,9 +75,17 @@ TabList.displayName = 'CubeTabList';
 // Main Tabs Component
 // =============================================================================
 function TabsComponent(props, ref) {
-    const { label = 'Tabs', defaultActiveKey, activeKey, size, type = 'default', onChange, onDelete, onTitleChange, showActionsOnHover, isEditable: parentIsEditable, menu: parentMenu, menuTriggerProps: parentMenuTriggerProps, menuProps: parentMenuProps, contextMenu: parentContextMenu, onAction: parentOnAction, children, prefix, suffix, prerender = false, keepMounted = false, qa = 'Tabs', renderPanel, panelCacheKeys, isReorderable = false, keyOrder, onReorder, showTabPicker = false, showScrollArrows = false, tabPickerPosition = 'suffix', scrollArrowsPosition = 'suffix', ...otherProps } = props;
-    // Extract outer styles
-    const combinedStyles = extractStyles(otherProps, OUTER_STYLES);
+    const { label = 'Tabs', defaultActiveKey, activeKey, size, type = 'default', onChange, onDelete, onTitleChange, showActionsOnHover, isEditable: parentIsEditable, menu: parentMenu, menuTriggerProps: parentMenuTriggerProps, menuProps: parentMenuProps, contextMenu: parentContextMenu, onAction: parentOnAction, children, prefix, suffix, prerender = false, keepMounted = false, qa = 'Tabs', renderPanel, panelCacheKeys, isReorderable = false, keyOrder, onReorder, showTabPicker = false, showScrollArrows = false, tabPickerPosition = 'suffix', scrollArrowsPosition = 'suffix', tabListStyles, tabStyles, tabPanelStyles, ...otherProps } = props;
+    // Extract outer styles and merge with tabListStyles for Container sub-element
+    const baseStyles = extractStyles(otherProps, OUTER_STYLES);
+    const combinedStyles = useMemo(() => {
+        if (!tabListStyles)
+            return baseStyles;
+        return {
+            ...baseStyles,
+            Container: tabListStyles,
+        };
+    }, [baseStyles, tabListStyles]);
     // DOM element refs
     const listRef = useRef(null);
     const scrollRef = useRef(null);
@@ -301,6 +309,7 @@ function TabsComponent(props, ref) {
         contextMenu: parentContextMenu,
         onDelete,
         onAction: parentOnAction,
+        tabStyles,
         editingKey,
         editValue,
         setEditValue,
@@ -319,6 +328,7 @@ function TabsComponent(props, ref) {
         parentContextMenu,
         onDelete,
         parentOnAction,
+        tabStyles,
         editingKey,
         editValue,
         setEditValue,
@@ -370,14 +380,14 @@ function TabsComponent(props, ref) {
         (shouldShowScrollArrows && scrollArrowsPosition === 'suffix');
     // Wrap with TabsProvider so prefix/suffix can access context (size, type)
     // The inner TabsProvider in renderTabListContent will override for tab buttons
-    return (_jsxs(TabsProvider, { value: baseContextValue, children: [_jsxs(TabsElement, { ref: ref, qa: qa, mods: mods, styles: combinedStyles, style: handleHStyle, "data-size": size, children: [prefix || prefixHasActions ? (_jsxs("div", { "data-element": "Prefix", children: [tabPickerPosition === 'prefix' && tabPickerElement, scrollArrowsPosition === 'prefix' && scrollArrowsElement, prefix] })) : null, _jsxs("div", { "data-element": "ScrollWrapper", children: [_jsx("div", { ref: scrollRef, "data-element": "Scroll", children: isReorderable ? (_jsx(DraggableTabList, { state: state, listRef: listRef, orderedKeys: orderedParsedTabs.map((t) => t.key), onReorder: onReorder, children: (dragState, dropState, collectionProps) => renderTabListContent(createContextValue(dragState, dropState), collectionProps) })) : (renderTabListContent(createContextValue())) }), isTinyScrollbar && hasOverflowX && _jsx("div", { "data-element": "ScrollbarH" })] }), suffix || suffixHasActions ? (_jsxs("div", { "data-element": "Suffix", children: [scrollArrowsPosition === 'suffix' && scrollArrowsElement, tabPickerPosition === 'suffix' && tabPickerElement, suffix] })) : null] }), renderPanel && (_jsx(CachedPanelRenderer, { parsedTabs: parsedTabs, explicitPanels: explicitPanels, state: state, renderPanel: renderPanel, panelCacheKeys: panelCacheKeys, prerender: prerender, keepMounted: keepMounted, visitedKeys: visitedKeysRef.current })), !renderPanel &&
+    return (_jsxs(TabsProvider, { value: baseContextValue, children: [_jsxs(TabsElement, { ref: ref, qa: qa, mods: mods, styles: combinedStyles, style: handleHStyle, "data-size": size, children: [prefix || prefixHasActions ? (_jsxs("div", { "data-element": "Prefix", children: [tabPickerPosition === 'prefix' && tabPickerElement, scrollArrowsPosition === 'prefix' && scrollArrowsElement, prefix] })) : null, _jsxs("div", { "data-element": "ScrollWrapper", children: [_jsx("div", { ref: scrollRef, "data-element": "Scroll", children: isReorderable ? (_jsx(DraggableTabList, { state: state, listRef: listRef, orderedKeys: orderedParsedTabs.map((t) => t.key), onReorder: onReorder, children: (dragState, dropState, collectionProps) => renderTabListContent(createContextValue(dragState, dropState), collectionProps) })) : (renderTabListContent(createContextValue())) }), isTinyScrollbar && hasOverflowX && _jsx("div", { "data-element": "ScrollbarH" })] }), suffix || suffixHasActions ? (_jsxs("div", { "data-element": "Suffix", children: [scrollArrowsPosition === 'suffix' && scrollArrowsElement, tabPickerPosition === 'suffix' && tabPickerElement, suffix] })) : null] }), renderPanel && (_jsx(CachedPanelRenderer, { parsedTabs: parsedTabs, explicitPanels: explicitPanels, state: state, renderPanel: renderPanel, panelCacheKeys: panelCacheKeys, prerender: prerender, keepMounted: keepMounted, visitedKeys: visitedKeysRef.current, defaultPanelStyles: tabPanelStyles })), !renderPanel &&
                 hasAnyContent &&
                 parsedTabs.map((tab) => {
                     const explicitPanel = explicitPanels.get(tab.key);
                     const content = explicitPanel?.content ?? tab.content;
                     if (content == null)
                         return null;
-                    return (_jsx(TabPanelRenderer, { tabKey: tab.key, state: state, content: content, prerender: prerender, keepMounted: keepMounted, tabPrerender: explicitPanel?.prerender ?? tab.prerender, tabKeepMounted: explicitPanel?.keepMounted ?? tab.keepMounted, visitedKeys: visitedKeysRef.current, panelStyles: explicitPanel?.styles, qa: explicitPanel?.qa, qaVal: explicitPanel?.qaVal }, tab.key));
+                    return (_jsx(TabPanelRenderer, { tabKey: tab.key, state: state, content: content, prerender: prerender, keepMounted: keepMounted, tabPrerender: explicitPanel?.prerender ?? tab.prerender, tabKeepMounted: explicitPanel?.keepMounted ?? tab.keepMounted, visitedKeys: visitedKeysRef.current, defaultPanelStyles: tabPanelStyles, panelStyles: explicitPanel?.styles, qa: explicitPanel?.qa, qaVal: explicitPanel?.qaVal }, tab.key));
                 })] }));
 }
 // =============================================================================

package/es/components/navigation/Tabs/TabsAction.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/navigation/Tabs/TabsContext.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/navigation/Tabs/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/navigation/Tabs/styled.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 
@@ -184,21 +184,23 @@ export const TabElement = tasty(Item, {
             'type=radio & hovered': '#white.5',
             '(type=file | type=radio) & selected': '#white',
         },
-        border: {
-            '': '0 #clear',
-            'type=file & selected': '$tab-indicator-size #purple bottom',
-        },
+        border: 0,
         preset: {
             '': 't3m',
             'size=xsmall': 't4',
         },
         shadow: {
-            '': 'none',
-            'focused & focus-visible': 'inset 0 0 0 1bw #purple-text',
-            editing: 'inset 0 0 0 1bw #purple-text',
+            '': '$selection-shadow',
+            'focused & focus-visible': 'inset 0 0 0 1bw #purple-text, $selection-shadow',
+            editing: 'inset 0 0 0 1bw #purple-text, $selection-shadow',
             'type=radio & selected': '$item-shadow',
             'type=radio & selected & focused & focus-visible': '$item-shadow, inset 0 0 0 1bw #purple-text',
         },
+        '$selection-shadow': {
+            '': 'inset 0 0 0 0 #purple',
+            'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #purple',
+            '!type=file': 'none',
+        },
         // Collapse horizontal padding for narrow type
         '$label-padding-left': {
             '': '$inline-padding',

package/es/components/navigation/Tabs/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/navigation/Tabs/use-tab-editing.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/navigation/Tabs/use-tab-indicator.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/navigation/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/organisms/FileTabs/FileTabs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/organisms/StatsCard/StatsCard.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/other/Calendar/Calendar.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/other/Calendar/CalendarCell.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/other/Calendar/CalendarGrid.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/other/Calendar/RangeCalendar.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/other/CloudLogo/CloudLogo.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/AlertDialog.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/AlertDialogApiProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/AlertDialogZone.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/Dialog.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/DialogContainer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/DialogForm.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/DialogTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2b56a33
+ * @cube-dev/ui-kit v0.0.0-canary-85e8f98
  * Released under the MIT license.
  */