@cube-dev/ui-kit 0.115.0 → 0.116.0

package/dist/components/form/Label.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { extractStyles } from "../../tasty/utils/styles.js";
 import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
 import { tasty } from "../../tasty/tasty.js";

package/dist/components/form/wrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { mergeProps } from "../../utils/react/mergeProps.js";
 import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
 import { jsx } from "react/jsx-runtime";

package/dist/components/helpers/DisplayTransition/DisplayTransition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 
 //#region src/components/helpers/DisplayTransition/DisplayTransition.tsx

package/dist/components/helpers/IconSwitch/IconSwitch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { DisplayTransition } from "../DisplayTransition/DisplayTransition.js";
 import { isValidElement, useCallback, useLayoutEffect, useRef, useState } from "react";

package/dist/components/layout/Flex.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { extractStyles } from "../../tasty/utils/styles.js";
 import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
 import { tasty } from "../../tasty/tasty.js";

package/dist/components/layout/Flow.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { extractStyles } from "../../tasty/utils/styles.js";
 import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
 import { tasty } from "../../tasty/tasty.js";

package/dist/components/layout/Grid.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { extractStyles } from "../../tasty/utils/styles.js";
 import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
 import { tasty } from "../../tasty/tasty.js";

package/dist/components/layout/Panel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, DIMENSION_STYLES, OUTER_STYLES } from "../../tasty/styles/list.js";
 import { tasty } from "../../tasty/tasty.js";
 import { forwardRef, useMemo } from "react";

package/dist/components/layout/Prefix.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { extractStyles, parseStyle } from "../../tasty/utils/styles.js";
 import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
 import { tasty } from "../../tasty/tasty.js";

package/dist/components/layout/ResizablePanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { tasty } from "../../tasty/tasty.js";
 import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";

package/dist/components/layout/Space.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { extractStyles } from "../../tasty/utils/styles.js";
 import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
 import { tasty } from "../../tasty/tasty.js";

package/dist/components/layout/Suffix.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { extractStyles, parseStyle } from "../../tasty/utils/styles.js";
 import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
 import { tasty } from "../../tasty/tasty.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useCallback, useMemo } from "react";
 import { ListDropTargetDelegate, ListKeyboardDelegate, useDraggableCollection, useDroppableCollection } from "react-aria";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { EditableTitleInputElement, HiddenMeasure } from "./styled.js";
 import { useLayoutEffect, useRef, useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { DropIndicatorElement } from "./styled.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -13,7 +13,6 @@ import { useDropIndicator } from "react-aria";
 */
 function TabDropIndicator({ target, dropState, position }) {
 	const ref = useRef(null);
-	const prevContentRef = useRef(null);
 	const [, setTick] = useState(0);
 	const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator({ target }, dropState, ref);
 	useEffect(() => {
@@ -21,19 +20,10 @@ function TabDropIndicator({ target, dropState, position }) {
 		if (!element) return;
 		const tabList = element.closest("[data-element=\"TabList\"]");
 		if (!tabList) return;
-		prevContentRef.current = tabList.textContent;
-		const observer = new MutationObserver(() => {
-			const currentContent = tabList.textContent;
-			if (currentContent !== prevContentRef.current) {
-				prevContentRef.current = currentContent;
-				setTick((n) => n + 1);
-			}
-		});
-		observer.observe(tabList, {
-			subtree: true,
-			characterData: true,
-			childList: true
+		const observer = new ResizeObserver(() => {
+			setTick((n) => n + 1);
 		});
+		observer.observe(tabList);
 		return () => observer.disconnect();
 	}, [isHidden]);
 	if (isHidden) return null;

package/dist/components/navigation/Tabs/TabDropIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabDropIndicator.js","names":[],"sources":["../../../../src/components/navigation/Tabs/TabDropIndicator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { useDropIndicator } from 'react-aria';\n\nimport { DropIndicatorElement } from './styled';\n\nimport type { DropTarget } from 'react-aria';\nimport type { DroppableCollectionState } from 'react-stately';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface TabDropIndicatorProps {\n  /** Drop target configuration */\n  target: DropTarget;\n  /** Droppable collection state from React Aria */\n  dropState: DroppableCollectionState;\n  /** Position of the indicator (before or after the tab) */\n  position: 'before' | 'after';\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Visual drop indicator for drag-and-drop tab reordering.\n *\n * Renders a vertical line showing where the dragged tab will be dropped.\n * Only visible when the drop target is active.\n */\nexport function TabDropIndicator({\n  target,\n  dropState,\n  position,\n}: TabDropIndicatorProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const prevContentRef = useRef<string | null>(null);\n  const [, setTick] = useState(0);\n\n  const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(\n    { target },\n    dropState,\n    ref,\n  );\n\n  // Re-evaluate drop target registration when tab content changes.\n  // Active only while the indicator is rendered in the DOM (during drags).\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const tabList = element.closest('[data-element=\"TabList\"]');\n    if (!tabList) return;\n\n    prevContentRef.current = tabList.textContent;\n\n    const observer = new MutationObserver(() => {\n      const currentContent = tabList.textContent;\n\n      if (currentContent !== prevContentRef.current) {\n        prevContentRef.current = currentContent;\n        setTick((n) => n + 1);\n      }\n    });\n\n    observer.observe(tabList, {\n      subtree: true,\n      characterData: true,\n      childList: true,\n    });\n\n    return () => observer.disconnect();\n  }, [isHidden]);\n\n  if (isHidden) {\n    return null;\n  }\n\n  return (\n    <DropIndicatorElement\n      ref={ref}\n      role=\"option\"\n      {...dropIndicatorProps}\n      mods={{\n        'drop-target': isDropTarget,\n        after: position === 'after',\n        before: position === 'before',\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA+BA,SAAgB,iBAAiB,EAC/B,QACA,WACA,YACwB;CACxB,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,iBAAiB,OAAsB,KAAK;CAClD,MAAM,GAAG,WAAW,SAAS,EAAE;CAE/B,MAAM,EAAE,oBAAoB,UAAU,iBAAiB,iBACrD,EAAE,QAAQ,EACV,WACA,IACD;AAID,iBAAgB;EACd,MAAM,UAAU,IAAI;AACpB,MAAI,CAAC,QAAS;EAEd,MAAM,UAAU,QAAQ,QAAQ,6BAA2B;AAC3D,MAAI,CAAC,QAAS;AAEd,iBAAe,UAAU,QAAQ;EAEjC,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,iBAAiB,QAAQ;AAE/B,OAAI,mBAAmB,eAAe,SAAS;AAC7C,mBAAe,UAAU;AACzB,aAAS,MAAM,IAAI,EAAE;;IAEvB;AAEF,WAAS,QAAQ,SAAS;GACxB,SAAS;GACT,eAAe;GACf,WAAW;GACZ,CAAC;AAEF,eAAa,SAAS,YAAY;IACjC,CAAC,SAAS,CAAC;AAEd,KAAI,SACF,QAAO;AAGT,QACE,oBAAC;EACM;EACL,MAAK;EACL,GAAI;EACJ,MAAM;GACJ,eAAe;GACf,OAAO,aAAa;GACpB,QAAQ,aAAa;GACtB;GACD"}
+{"version":3,"file":"TabDropIndicator.js","names":[],"sources":["../../../../src/components/navigation/Tabs/TabDropIndicator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { useDropIndicator } from 'react-aria';\n\nimport { DropIndicatorElement } from './styled';\n\nimport type { DropTarget } from 'react-aria';\nimport type { DroppableCollectionState } from 'react-stately';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface TabDropIndicatorProps {\n  /** Drop target configuration */\n  target: DropTarget;\n  /** Droppable collection state from React Aria */\n  dropState: DroppableCollectionState;\n  /** Position of the indicator (before or after the tab) */\n  position: 'before' | 'after';\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Visual drop indicator for drag-and-drop tab reordering.\n *\n * Renders a vertical line showing where the dragged tab will be dropped.\n * Only visible when the drop target is active.\n */\nexport function TabDropIndicator({\n  target,\n  dropState,\n  position,\n}: TabDropIndicatorProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [, setTick] = useState(0);\n\n  const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(\n    { target },\n    dropState,\n    ref,\n  );\n\n  // Re-evaluate drop target registration when tab layout changes.\n  // Active only while the indicator is rendered in the DOM (during drags).\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const tabList = element.closest('[data-element=\"TabList\"]');\n    if (!tabList) return;\n\n    const observer = new ResizeObserver(() => {\n      setTick((n) => n + 1);\n    });\n\n    observer.observe(tabList);\n\n    return () => observer.disconnect();\n  }, [isHidden]);\n\n  if (isHidden) {\n    return null;\n  }\n\n  return (\n    <DropIndicatorElement\n      ref={ref}\n      role=\"option\"\n      {...dropIndicatorProps}\n      mods={{\n        'drop-target': isDropTarget,\n        after: position === 'after',\n        before: position === 'before',\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA+BA,SAAgB,iBAAiB,EAC/B,QACA,WACA,YACwB;CACxB,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,GAAG,WAAW,SAAS,EAAE;CAE/B,MAAM,EAAE,oBAAoB,UAAU,iBAAiB,iBACrD,EAAE,QAAQ,EACV,WACA,IACD;AAID,iBAAgB;EACd,MAAM,UAAU,IAAI;AACpB,MAAI,CAAC,QAAS;EAEd,MAAM,UAAU,QAAQ,QAAQ,6BAA2B;AAC3D,MAAI,CAAC,QAAS;EAEd,MAAM,WAAW,IAAI,qBAAqB;AACxC,YAAS,MAAM,IAAI,EAAE;IACrB;AAEF,WAAS,QAAQ,QAAQ;AAEzB,eAAa,SAAS,YAAY;IACjC,CAAC,SAAS,CAAC;AAEd,KAAI,SACF,QAAO;AAGT,QACE,oBAAC;EACM;EACL,MAAK;EACL,GAAI;EACJ,MAAM;GACJ,eAAe;GACf,OAAO,aAAa;GACpB,QAAQ,aAAa;GACtB;GACD"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { TabPanelElement } from "./styled.js";
 import { useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { MoreIcon } from "../../../icons/MoreIcon.js";

package/dist/components/navigation/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { mergeStyles } from "../../../tasty/utils/merge-styles.js";
 import { OUTER_STYLES } from "../../../tasty/styles/list.js";
@@ -59,7 +59,7 @@ TabList.displayName = "CubeTabList";
 function TabsComponent(props, ref) {
 	const { label = "Tabs", defaultActiveKey, activeKey, size, type = "default", onChange, onDelete, onTitleChange, autoHideActions, 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", tabListPadding, tabListStyles, prefixStyles, suffixStyles, ...otherProps } = props;
 	const baseStyles = extractStyles(otherProps, OUTER_STYLES);
-	const tabListPaddingStyles = useMemo(() => tabListPadding ? { padding: `0 ${tabListPadding}` } : void 0, [tabListPadding]);
+	const tabListPaddingStyles = useMemo(() => tabListPadding ? { "$tablist-padding": `${tabListPadding}` } : void 0, [tabListPadding]);
 	const combinedStyles = useMergeStyles(baseStyles, {
 		TabList: useMemo(() => mergeStyles(tabListPaddingStyles, tabListStyles), [tabListPaddingStyles, tabListStyles]),
 		Prefix: prefixStyles,

package/dist/components/navigation/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["CollectionItem","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import {\n  Children,\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaTabListProps, useTabList } from 'react-aria';\nimport {\n  Item as CollectionItem,\n  DraggableCollectionState,\n  DroppableCollectionState,\n  useTabListState,\n} from 'react-stately';\n\nimport { useEvent, useWarn } from '../../../_internal/hooks';\nimport { DirectionIcon } from '../../../icons';\nimport { extractStyles, mergeStyles, OUTER_STYLES } from '../../../tasty';\nimport { mergeProps, useMergeStyles } from '../../../utils/react';\nimport { useTinyScrollbar } from '../../content/Layout/hooks/useTinyScrollbar';\n\nimport { DraggableTabList } from './DraggableTabList';\nimport { TabIndicatorElement, TabsElement } from './styled';\nimport { TabButton } from './TabButton';\nimport { CachedPanelRenderer, TabPanelRenderer } from './TabPanel';\nimport { TabPicker } from './TabPicker';\nimport { TabsAction } from './TabsAction';\nimport { TabsContextValue, TabsProvider } from './TabsContext';\nimport { useTabEditing } from './use-tab-editing';\nimport { useTabIndicator } from './use-tab-indicator';\n\nimport type { Key } from '@react-types/shared';\nimport type {\n  CubeTabListProps,\n  CubeTabPanelProps,\n  CubeTabProps,\n  CubeTabsProps,\n  ParsedPanel,\n  ParsedTab,\n} from './types';\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Generic helper to check if a child is a specific component by displayName.\n */\nfunction isComponentElement<T>(\n  child: ReactNode,\n  displayName: string,\n): child is ReactElement<T> {\n  return (\n    isValidElement(child) &&\n    typeof child.type === 'function' &&\n    (child.type as any).displayName === displayName\n  );\n}\n\n/** Checks if a child is a Tab component. */\nconst isTabElement = (child: ReactNode): child is ReactElement<CubeTabProps> =>\n  isComponentElement<CubeTabProps>(child, 'CubeTab');\n\n/** Checks if a child is a TabPanel component. */\nconst isTabPanelElement = (\n  child: ReactNode,\n): child is ReactElement<CubeTabPanelProps> =>\n  isComponentElement<CubeTabPanelProps>(child, 'CubeTabPanel');\n\n/** Checks if a child is a TabList component. */\nconst isTabListElement = (\n  child: ReactNode,\n): child is ReactElement<CubeTabListProps> =>\n  isComponentElement<CubeTabListProps>(child, 'CubeTabList');\n\n/**\n * Extracts the raw key from a React element, stripping the \".$\" prefix\n * that React adds via Children.map/toArray.\n */\nfunction getRawKey(element: ReactElement): string | null {\n  if (element.key == null) return null;\n  const keyStr = String(element.key);\n  return keyStr.startsWith('.$') ? keyStr.slice(2) : keyStr;\n}\n\n// =============================================================================\n// Tab Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction Tab(_props: CubeTabProps): ReactElement | null {\n  return null;\n}\n\nTab.displayName = 'CubeTab';\n\n// =============================================================================\n// TabPanel Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabPanel(_props: CubeTabPanelProps): ReactElement | null {\n  return null;\n}\n\nTabPanel.displayName = 'CubeTabPanel';\n\n// =============================================================================\n// TabList Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabList(_props: CubeTabListProps): ReactElement | null {\n  return null;\n}\n\nTabList.displayName = 'CubeTabList';\n\n// =============================================================================\n// Main Tabs Component\n// =============================================================================\n\nfunction TabsComponent(\n  props: CubeTabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    label = 'Tabs',\n    defaultActiveKey,\n    activeKey,\n    size,\n    type = 'default',\n    onChange,\n    onDelete,\n    onTitleChange,\n    autoHideActions,\n    isEditable: parentIsEditable,\n    menu: parentMenu,\n    menuTriggerProps: parentMenuTriggerProps,\n    menuProps: parentMenuProps,\n    contextMenu: parentContextMenu,\n    onAction: parentOnAction,\n    children,\n    prefix,\n    suffix,\n    prerender = false,\n    keepMounted = false,\n    qa = 'Tabs',\n    renderPanel,\n    panelCacheKeys,\n    isReorderable = false,\n    keyOrder,\n    onReorder,\n    showTabPicker = false,\n    showScrollArrows = false,\n    tabPickerPosition = 'suffix',\n    scrollArrowsPosition = 'suffix',\n    tabListPadding,\n    tabListStyles,\n    prefixStyles,\n    suffixStyles,\n    ...otherProps\n  } = props;\n\n  // Extract outer styles\n  const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n  // Build TabList padding style (memoized)\n  const tabListPaddingStyles = useMemo(\n    () => (tabListPadding ? { padding: `0 ${tabListPadding}` } : undefined),\n    [tabListPadding],\n  );\n\n  // Merge tabListPaddingStyles with tabListStyles (memoized)\n  const mergedTabListStyles = useMemo(\n    () => mergeStyles(tabListPaddingStyles, tabListStyles),\n    [tabListPaddingStyles, tabListStyles],\n  );\n\n  // Merge all sub-element styles into baseStyles\n  const combinedStyles = useMergeStyles(baseStyles, {\n    TabList: mergedTabListStyles,\n    Prefix: prefixStyles,\n    Suffix: suffixStyles,\n  });\n\n  // DOM element refs\n  const listRef = useRef<HTMLDivElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  // Track visited tabs for keepMounted functionality\n  const visitedKeysRef = useRef<Set<string>>(new Set());\n\n  // =========================================================================\n  // Tab Title Editing Hook\n  // =========================================================================\n  const {\n    editingKey,\n    editValue,\n    setEditValue,\n    startEditing,\n    cancelEditing,\n    submitEditing,\n  } = useTabEditing({ onChange, onTitleChange });\n\n  // =========================================================================\n  // Parse children to extract tabs and explicit panels\n  // =========================================================================\n  const { parsedTabs, explicitPanels, hasAnyContent } = useMemo(() => {\n    const childArray = Children.toArray(children);\n    const tabs: ParsedTab[] = [];\n    const panels = new Map<string, ParsedPanel>();\n    let hasExplicitList = false;\n    let tabChildren: ReactNode[] = [];\n\n    // Check for explicit Tabs.List / Tabs.Panel structure\n    for (const child of childArray) {\n      if (isTabListElement(child)) {\n        hasExplicitList = true;\n        tabChildren = Children.toArray(child.props.children);\n      } else if (isTabPanelElement(child)) {\n        const key = getRawKey(child as ReactElement);\n\n        if (key != null) {\n          panels.set(key, {\n            key,\n            content: child.props.children,\n            prerender: child.props.prerender,\n            keepMounted: child.props.keepMounted,\n            styles: child.props.styles,\n            qa: child.props.qa,\n            qaVal: child.props.qaVal,\n          });\n        }\n      }\n    }\n\n    // If no explicit list, use direct Tab children\n    if (!hasExplicitList) {\n      tabChildren = childArray;\n    }\n\n    // Parse Tab elements\n    let hasContent = panels.size > 0;\n\n    for (const child of tabChildren) {\n      if (isTabElement(child)) {\n        const key = getRawKey(child) ?? child.props.id;\n\n        if (key != null) {\n          const { id: _id, children: tabContent, ...tabProps } = child.props;\n\n          tabs.push({\n            ...tabProps,\n            key,\n            content: tabContent,\n          });\n\n          if (tabContent != null) {\n            hasContent = true;\n          }\n        }\n      }\n    }\n\n    return {\n      parsedTabs: tabs,\n      explicitPanels: panels,\n      hasAnyContent: hasContent,\n    };\n  }, [children]);\n\n  // Clean up visitedKeys when tabs are removed\n  const currentTabKeysSet = useMemo(\n    () => new Set(parsedTabs.map((t) => t.key)),\n    [parsedTabs],\n  );\n\n  useEffect(() => {\n    for (const key of visitedKeysRef.current) {\n      if (!currentTabKeysSet.has(key)) {\n        visitedKeysRef.current.delete(key);\n      }\n    }\n  }, [currentTabKeysSet]);\n\n  // =========================================================================\n  // Order tabs according to keyOrder\n  // =========================================================================\n  const orderedParsedTabs = useMemo(() => {\n    if (!keyOrder || keyOrder.length === 0) {\n      return parsedTabs;\n    }\n\n    const tabMap = new Map<string, ParsedTab>();\n    for (const tab of parsedTabs) {\n      tabMap.set(tab.key, tab);\n    }\n\n    const ordered: ParsedTab[] = [];\n    for (const key of keyOrder) {\n      const tab = tabMap.get(String(key));\n      if (tab) {\n        ordered.push(tab);\n        tabMap.delete(String(key));\n      }\n    }\n\n    // Append any tabs not in keyOrder\n    for (const tab of parsedTabs) {\n      if (tabMap.has(tab.key)) {\n        ordered.push(tab);\n      }\n    }\n\n    return ordered;\n  }, [parsedTabs, keyOrder]);\n\n  // Create collection items for React Stately\n  const collectionItems = useMemo(() => {\n    return orderedParsedTabs.map((tab) => (\n      <CollectionItem\n        key={tab.key}\n        textValue={typeof tab.title === 'string' ? tab.title : String(tab.key)}\n      >\n        {tab.title}\n      </CollectionItem>\n    ));\n  }, [orderedParsedTabs]);\n\n  // Determine disabled keys\n  const disabledKeys = useMemo(() => {\n    return new Set(\n      parsedTabs.filter((tab) => tab.isDisabled).map((tab) => tab.key),\n    );\n  }, [parsedTabs]);\n\n  // Handle selection change (converts React Aria's Key to string for our API)\n  const handleSelectionChange = useEvent((key: Key) => {\n    const keyStr = String(key);\n    visitedKeysRef.current.add(keyStr);\n    onChange?.(keyStr);\n  });\n\n  // Convert keys to strings for React Aria compatibility\n  const selectedKey = activeKey != null ? String(activeKey) : undefined;\n  const defaultSelectedKey =\n    defaultActiveKey != null ? String(defaultActiveKey) : undefined;\n\n  // Create aria props for useTabListState\n  const ariaProps: AriaTabListProps<object> = useMemo(\n    () => ({\n      selectedKey,\n      defaultSelectedKey,\n      onSelectionChange: handleSelectionChange,\n      disabledKeys,\n      children: collectionItems,\n      'aria-label': label,\n    }),\n    [\n      selectedKey,\n      defaultSelectedKey,\n      handleSelectionChange,\n      disabledKeys,\n      collectionItems,\n      label,\n    ],\n  );\n\n  // Create state using useTabListState\n  const state = useTabListState(ariaProps);\n\n  // Track initial selected key for visited tabs\n  useEffect(() => {\n    if (state.selectedKey != null) {\n      visitedKeysRef.current.add(String(state.selectedKey));\n    }\n  }, [state.selectedKey]);\n\n  // Get tablist props from react-aria\n  const { tabListProps } = useTabList(ariaProps, state, listRef);\n\n  // Handle selection from TabPicker (needs to update internal state in uncontrolled mode)\n  const handleTabPickerSelect = useEvent((key: string) => {\n    // Update internal state (for uncontrolled mode)\n    state.setSelectedKey(key);\n    // Also call the external onChange handler\n    handleSelectionChange(key);\n  });\n\n  // =========================================================================\n  // Tab Indicator (for default type)\n  // =========================================================================\n  // Create order token that changes when tab order changes (for indicator recalculation)\n  const orderToken = useMemo(\n    () => orderedParsedTabs.map((t) => t.key).join(','),\n    [orderedParsedTabs],\n  );\n\n  const indicatorStyle = useTabIndicator(\n    listRef,\n    state.selectedKey,\n    type === 'default' || type === 'narrow',\n    orderToken,\n  );\n\n  // =========================================================================\n  // Tiny Scrollbar (not for radio type)\n  // =========================================================================\n  const isTinyScrollbar = type !== 'radio';\n  const { handleHStyle, hasOverflowX, isScrolling, isAtStartX, isAtEndX } =\n    useTinyScrollbar(scrollRef, isTinyScrollbar);\n\n  const hasPanels = hasAnyContent || !!renderPanel;\n\n  // =========================================================================\n  // Tab Picker visibility\n  // =========================================================================\n  useWarn(showTabPicker && type === 'radio', {\n    key: ['tabs-tabpicker-radio-unsupported'],\n    args: [\n      'Tabs:',\n      '`showTabPicker` is not supported when `type=\"radio\"`. The TabPicker will not be rendered.',\n    ],\n  });\n\n  const shouldShowTabPicker =\n    type !== 'radio' &&\n    (showTabPicker === true || (showTabPicker === 'auto' && hasOverflowX));\n\n  // =========================================================================\n  // Scroll Arrows visibility and handlers\n  // =========================================================================\n  useWarn(showScrollArrows && type === 'radio', {\n    key: ['tabs-scrollarrows-radio-unsupported'],\n    args: [\n      'Tabs:',\n      '`showScrollArrows` is not supported when `type=\"radio\"`. The scroll arrows will not be rendered.',\n    ],\n  });\n\n  const shouldShowScrollArrows =\n    type !== 'radio' &&\n    (showScrollArrows === true ||\n      (showScrollArrows === 'auto' && hasOverflowX));\n\n  const handleScrollLeft = useEvent(() => {\n    const el = scrollRef.current;\n    if (el) {\n      el.scrollTo({\n        left: el.scrollLeft - el.clientWidth,\n        behavior: 'smooth',\n      });\n    }\n  });\n\n  const handleScrollRight = useEvent(() => {\n    const el = scrollRef.current;\n    if (el) {\n      el.scrollTo({\n        left: el.scrollLeft + el.clientWidth,\n        behavior: 'smooth',\n      });\n    }\n  });\n\n  // =========================================================================\n  // Base Context Value (without drag/drop states)\n  // =========================================================================\n  const baseContextValue = useMemo(\n    () => ({\n      state,\n      type,\n      size,\n      autoHideActions,\n      isEditable: parentIsEditable,\n      menu: parentMenu,\n      menuTriggerProps: parentMenuTriggerProps,\n      menuProps: parentMenuProps,\n      contextMenu: parentContextMenu,\n      onDelete,\n      onAction: parentOnAction,\n      editingKey,\n      editValue,\n      setEditValue,\n      startEditing,\n      submitEditing,\n      cancelEditing,\n    }),\n    [\n      state,\n      type,\n      size,\n      autoHideActions,\n      parentIsEditable,\n      parentMenu,\n      parentMenuTriggerProps,\n      parentMenuProps,\n      parentContextMenu,\n      onDelete,\n      parentOnAction,\n      editingKey,\n      editValue,\n      setEditValue,\n      startEditing,\n      submitEditing,\n      cancelEditing,\n    ],\n  );\n\n  // Helper to create full context value with optional drag/drop states\n  const createContextValue = (\n    dragState?: DraggableCollectionState,\n    dropState?: DroppableCollectionState,\n  ): TabsContextValue => ({\n    ...baseContextValue,\n    dragState,\n    dropState,\n  });\n\n  // =========================================================================\n  // Tab List Content Renderer\n  // =========================================================================\n  const renderTabListContent = (\n    contextValue: TabsContextValue,\n    collectionProps: Record<string, unknown> = {},\n  ) => (\n    <div\n      {...mergeProps(tabListProps, collectionProps)}\n      ref={listRef}\n      data-element=\"TabList\"\n    >\n      <TabsProvider value={contextValue}>\n        {orderedParsedTabs.map((tab, index) => {\n          const item = state.collection.getItem(tab.key);\n          if (!item) return null;\n\n          return (\n            <TabButton\n              key={item.key}\n              item={item}\n              tabData={tab}\n              isLastTab={index === orderedParsedTabs.length - 1}\n            />\n          );\n        })}\n      </TabsProvider>\n      {indicatorStyle && (\n        <TabIndicatorElement\n          style={{\n            left: indicatorStyle.left,\n            width: indicatorStyle.width,\n          }}\n        />\n      )}\n    </div>\n  );\n\n  // =========================================================================\n  // Mods for styling\n  // =========================================================================\n  const mods = useMemo(\n    () => ({\n      type,\n      size,\n      deletable: !!onDelete,\n      scrolling: isScrolling,\n      'fade-left': !isAtStartX,\n      'fade-right': !isAtEndX,\n      'has-panels': hasPanels,\n    }),\n    [type, size, onDelete, isScrolling, isAtStartX, isAtEndX, hasPanels],\n  );\n\n  // =========================================================================\n  // Action Elements (TabPicker and Scroll Arrows)\n  // =========================================================================\n  const scrollArrowsElement = shouldShowScrollArrows ? (\n    <>\n      <TabsAction\n        icon={<DirectionIcon to=\"left\" />}\n        aria-label=\"Scroll tabs left\"\n        isDisabled={isAtStartX}\n        onPress={handleScrollLeft}\n      />\n      <TabsAction\n        icon={<DirectionIcon to=\"right\" />}\n        aria-label=\"Scroll tabs right\"\n        isDisabled={isAtEndX}\n        onPress={handleScrollRight}\n      />\n    </>\n  ) : null;\n\n  const tabPickerElement = shouldShowTabPicker ? (\n    <TabPicker\n      tabs={orderedParsedTabs}\n      selectedKey={state.selectedKey}\n      size={size}\n      type={type}\n      onSelect={handleTabPickerSelect}\n      onDelete={onDelete}\n    />\n  ) : null;\n\n  // Determine which actions go in prefix/suffix\n  // In prefix: TabPicker first (left), then scroll arrows (right)\n  // In suffix: scroll arrows first (left), then TabPicker (right)\n  const prefixHasActions =\n    (shouldShowTabPicker && tabPickerPosition === 'prefix') ||\n    (shouldShowScrollArrows && scrollArrowsPosition === 'prefix');\n\n  const suffixHasActions =\n    (shouldShowTabPicker && tabPickerPosition === 'suffix') ||\n    (shouldShowScrollArrows && scrollArrowsPosition === 'suffix');\n\n  // Wrap with TabsProvider so prefix/suffix can access context (size, type)\n  // The inner TabsProvider in renderTabListContent will override for tab buttons\n  return (\n    <TabsProvider value={baseContextValue}>\n      <TabsElement\n        ref={ref}\n        qa={qa}\n        mods={mods}\n        styles={combinedStyles}\n        style={handleHStyle}\n        data-size={size}\n      >\n        {prefix || prefixHasActions ? (\n          <div data-element=\"Prefix\">\n            {tabPickerPosition === 'prefix' && tabPickerElement}\n            {scrollArrowsPosition === 'prefix' && scrollArrowsElement}\n            {prefix}\n          </div>\n        ) : null}\n        <div data-element=\"ScrollWrapper\">\n          <div ref={scrollRef} data-element=\"Scroll\">\n            {isReorderable ? (\n              <DraggableTabList\n                state={state}\n                listRef={listRef}\n                orderedKeys={orderedParsedTabs.map((t) => t.key)}\n                onReorder={onReorder}\n              >\n                {(dragState, dropState, collectionProps) =>\n                  renderTabListContent(\n                    createContextValue(dragState, dropState),\n                    collectionProps,\n                  )\n                }\n              </DraggableTabList>\n            ) : (\n              renderTabListContent(createContextValue())\n            )}\n          </div>\n          {isTinyScrollbar && hasOverflowX && <div data-element=\"ScrollbarH\" />}\n        </div>\n        {suffix || suffixHasActions ? (\n          <div data-element=\"Suffix\">\n            {scrollArrowsPosition === 'suffix' && scrollArrowsElement}\n            {tabPickerPosition === 'suffix' && tabPickerElement}\n            {suffix}\n          </div>\n        ) : null}\n      </TabsElement>\n\n      {/* Functional panel rendering with content caching */}\n      {renderPanel && (\n        <CachedPanelRenderer\n          parsedTabs={parsedTabs}\n          explicitPanels={explicitPanels}\n          state={state}\n          renderPanel={renderPanel}\n          panelCacheKeys={panelCacheKeys}\n          prerender={prerender}\n          keepMounted={keepMounted}\n          visitedKeys={visitedKeysRef.current}\n        />\n      )}\n\n      {/* Static panel rendering (traditional children-based approach) */}\n      {!renderPanel &&\n        hasAnyContent &&\n        parsedTabs.map((tab) => {\n          const explicitPanel = explicitPanels.get(tab.key);\n          const content = explicitPanel?.content ?? tab.content;\n\n          if (content == null) return null;\n\n          return (\n            <TabPanelRenderer\n              key={tab.key}\n              tabKey={tab.key}\n              state={state}\n              content={content}\n              prerender={prerender}\n              keepMounted={keepMounted}\n              tabPrerender={explicitPanel?.prerender ?? tab.prerender}\n              tabKeepMounted={explicitPanel?.keepMounted ?? tab.keepMounted}\n              visitedKeys={visitedKeysRef.current}\n              panelStyles={explicitPanel?.styles}\n              qa={explicitPanel?.qa}\n              qaVal={explicitPanel?.qaVal}\n            />\n          );\n        })}\n    </TabsProvider>\n  );\n}\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nconst _Tabs = forwardRef(TabsComponent);\n\n/**\n * Tabs component for organizing content into multiple panels.\n * Built with React Aria for full accessibility support.\n *\n * **Note:** Tab keys are internally converted to strings for React Aria compatibility.\n *\n * @example\n * // Simple usage\n * <Tabs defaultActiveKey=\"tab1\">\n *   <Tab key=\"tab1\" title=\"Tab 1\">Content 1</Tab>\n *   <Tab key=\"tab2\" title=\"Tab 2\">Content 2</Tab>\n * </Tabs>\n *\n * @example\n * // Tabs-only (no panels)\n * <Tabs activeKey={activeTab} onChange={setActiveTab}>\n *   <Tab key=\"overview\" title=\"Overview\" />\n *   <Tab key=\"settings\" title=\"Settings\" />\n * </Tabs>\n *\n * @example\n * // Explicit panels\n * <Tabs defaultActiveKey=\"tab1\">\n *   <Tabs.List>\n *     <Tab key=\"tab1\" title=\"Tab 1\" />\n *     <Tab key=\"tab2\" title=\"Tab 2\" />\n *   </Tabs.List>\n *   <Tabs.Panel key=\"tab1\">Content 1</Tabs.Panel>\n *   <Tabs.Panel key=\"tab2\">Content 2</Tabs.Panel>\n * </Tabs>\n */\nexport const Tabs = Object.assign(_Tabs, {\n  Tab,\n  List: TabList,\n  Panel: TabPanel,\n  Action: TabsAction,\n});\n\nexport { Tab, TabList, TabPanel, TabsAction };\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["CollectionItem","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import {\n  Children,\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaTabListProps, useTabList } from 'react-aria';\nimport {\n  Item as CollectionItem,\n  DraggableCollectionState,\n  DroppableCollectionState,\n  useTabListState,\n} from 'react-stately';\n\nimport { useEvent, useWarn } from '../../../_internal/hooks';\nimport { DirectionIcon } from '../../../icons';\nimport { extractStyles, mergeStyles, OUTER_STYLES } from '../../../tasty';\nimport { mergeProps, useMergeStyles } from '../../../utils/react';\nimport { useTinyScrollbar } from '../../content/Layout/hooks/useTinyScrollbar';\n\nimport { DraggableTabList } from './DraggableTabList';\nimport { TabIndicatorElement, TabsElement } from './styled';\nimport { TabButton } from './TabButton';\nimport { CachedPanelRenderer, TabPanelRenderer } from './TabPanel';\nimport { TabPicker } from './TabPicker';\nimport { TabsAction } from './TabsAction';\nimport { TabsContextValue, TabsProvider } from './TabsContext';\nimport { useTabEditing } from './use-tab-editing';\nimport { useTabIndicator } from './use-tab-indicator';\n\nimport type { Key } from '@react-types/shared';\nimport type {\n  CubeTabListProps,\n  CubeTabPanelProps,\n  CubeTabProps,\n  CubeTabsProps,\n  ParsedPanel,\n  ParsedTab,\n} from './types';\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Generic helper to check if a child is a specific component by displayName.\n */\nfunction isComponentElement<T>(\n  child: ReactNode,\n  displayName: string,\n): child is ReactElement<T> {\n  return (\n    isValidElement(child) &&\n    typeof child.type === 'function' &&\n    (child.type as any).displayName === displayName\n  );\n}\n\n/** Checks if a child is a Tab component. */\nconst isTabElement = (child: ReactNode): child is ReactElement<CubeTabProps> =>\n  isComponentElement<CubeTabProps>(child, 'CubeTab');\n\n/** Checks if a child is a TabPanel component. */\nconst isTabPanelElement = (\n  child: ReactNode,\n): child is ReactElement<CubeTabPanelProps> =>\n  isComponentElement<CubeTabPanelProps>(child, 'CubeTabPanel');\n\n/** Checks if a child is a TabList component. */\nconst isTabListElement = (\n  child: ReactNode,\n): child is ReactElement<CubeTabListProps> =>\n  isComponentElement<CubeTabListProps>(child, 'CubeTabList');\n\n/**\n * Extracts the raw key from a React element, stripping the \".$\" prefix\n * that React adds via Children.map/toArray.\n */\nfunction getRawKey(element: ReactElement): string | null {\n  if (element.key == null) return null;\n  const keyStr = String(element.key);\n  return keyStr.startsWith('.$') ? keyStr.slice(2) : keyStr;\n}\n\n// =============================================================================\n// Tab Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction Tab(_props: CubeTabProps): ReactElement | null {\n  return null;\n}\n\nTab.displayName = 'CubeTab';\n\n// =============================================================================\n// TabPanel Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabPanel(_props: CubeTabPanelProps): ReactElement | null {\n  return null;\n}\n\nTabPanel.displayName = 'CubeTabPanel';\n\n// =============================================================================\n// TabList Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabList(_props: CubeTabListProps): ReactElement | null {\n  return null;\n}\n\nTabList.displayName = 'CubeTabList';\n\n// =============================================================================\n// Main Tabs Component\n// =============================================================================\n\nfunction TabsComponent(\n  props: CubeTabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    label = 'Tabs',\n    defaultActiveKey,\n    activeKey,\n    size,\n    type = 'default',\n    onChange,\n    onDelete,\n    onTitleChange,\n    autoHideActions,\n    isEditable: parentIsEditable,\n    menu: parentMenu,\n    menuTriggerProps: parentMenuTriggerProps,\n    menuProps: parentMenuProps,\n    contextMenu: parentContextMenu,\n    onAction: parentOnAction,\n    children,\n    prefix,\n    suffix,\n    prerender = false,\n    keepMounted = false,\n    qa = 'Tabs',\n    renderPanel,\n    panelCacheKeys,\n    isReorderable = false,\n    keyOrder,\n    onReorder,\n    showTabPicker = false,\n    showScrollArrows = false,\n    tabPickerPosition = 'suffix',\n    scrollArrowsPosition = 'suffix',\n    tabListPadding,\n    tabListStyles,\n    prefixStyles,\n    suffixStyles,\n    ...otherProps\n  } = props;\n\n  // Extract outer styles\n  const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n  // Build TabList padding style (memoized)\n  const tabListPaddingStyles = useMemo(\n    () =>\n      tabListPadding ? { '$tablist-padding': `${tabListPadding}` } : undefined,\n    [tabListPadding],\n  );\n\n  // Merge tabListPaddingStyles with tabListStyles (memoized)\n  const mergedTabListStyles = useMemo(\n    () => mergeStyles(tabListPaddingStyles, tabListStyles),\n    [tabListPaddingStyles, tabListStyles],\n  );\n\n  // Merge all sub-element styles into baseStyles\n  const combinedStyles = useMergeStyles(baseStyles, {\n    TabList: mergedTabListStyles,\n    Prefix: prefixStyles,\n    Suffix: suffixStyles,\n  });\n\n  // DOM element refs\n  const listRef = useRef<HTMLDivElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  // Track visited tabs for keepMounted functionality\n  const visitedKeysRef = useRef<Set<string>>(new Set());\n\n  // =========================================================================\n  // Tab Title Editing Hook\n  // =========================================================================\n  const {\n    editingKey,\n    editValue,\n    setEditValue,\n    startEditing,\n    cancelEditing,\n    submitEditing,\n  } = useTabEditing({ onChange, onTitleChange });\n\n  // =========================================================================\n  // Parse children to extract tabs and explicit panels\n  // =========================================================================\n  const { parsedTabs, explicitPanels, hasAnyContent } = useMemo(() => {\n    const childArray = Children.toArray(children);\n    const tabs: ParsedTab[] = [];\n    const panels = new Map<string, ParsedPanel>();\n    let hasExplicitList = false;\n    let tabChildren: ReactNode[] = [];\n\n    // Check for explicit Tabs.List / Tabs.Panel structure\n    for (const child of childArray) {\n      if (isTabListElement(child)) {\n        hasExplicitList = true;\n        tabChildren = Children.toArray(child.props.children);\n      } else if (isTabPanelElement(child)) {\n        const key = getRawKey(child as ReactElement);\n\n        if (key != null) {\n          panels.set(key, {\n            key,\n            content: child.props.children,\n            prerender: child.props.prerender,\n            keepMounted: child.props.keepMounted,\n            styles: child.props.styles,\n            qa: child.props.qa,\n            qaVal: child.props.qaVal,\n          });\n        }\n      }\n    }\n\n    // If no explicit list, use direct Tab children\n    if (!hasExplicitList) {\n      tabChildren = childArray;\n    }\n\n    // Parse Tab elements\n    let hasContent = panels.size > 0;\n\n    for (const child of tabChildren) {\n      if (isTabElement(child)) {\n        const key = getRawKey(child) ?? child.props.id;\n\n        if (key != null) {\n          const { id: _id, children: tabContent, ...tabProps } = child.props;\n\n          tabs.push({\n            ...tabProps,\n            key,\n            content: tabContent,\n          });\n\n          if (tabContent != null) {\n            hasContent = true;\n          }\n        }\n      }\n    }\n\n    return {\n      parsedTabs: tabs,\n      explicitPanels: panels,\n      hasAnyContent: hasContent,\n    };\n  }, [children]);\n\n  // Clean up visitedKeys when tabs are removed\n  const currentTabKeysSet = useMemo(\n    () => new Set(parsedTabs.map((t) => t.key)),\n    [parsedTabs],\n  );\n\n  useEffect(() => {\n    for (const key of visitedKeysRef.current) {\n      if (!currentTabKeysSet.has(key)) {\n        visitedKeysRef.current.delete(key);\n      }\n    }\n  }, [currentTabKeysSet]);\n\n  // =========================================================================\n  // Order tabs according to keyOrder\n  // =========================================================================\n  const orderedParsedTabs = useMemo(() => {\n    if (!keyOrder || keyOrder.length === 0) {\n      return parsedTabs;\n    }\n\n    const tabMap = new Map<string, ParsedTab>();\n    for (const tab of parsedTabs) {\n      tabMap.set(tab.key, tab);\n    }\n\n    const ordered: ParsedTab[] = [];\n    for (const key of keyOrder) {\n      const tab = tabMap.get(String(key));\n      if (tab) {\n        ordered.push(tab);\n        tabMap.delete(String(key));\n      }\n    }\n\n    // Append any tabs not in keyOrder\n    for (const tab of parsedTabs) {\n      if (tabMap.has(tab.key)) {\n        ordered.push(tab);\n      }\n    }\n\n    return ordered;\n  }, [parsedTabs, keyOrder]);\n\n  // Create collection items for React Stately\n  const collectionItems = useMemo(() => {\n    return orderedParsedTabs.map((tab) => (\n      <CollectionItem\n        key={tab.key}\n        textValue={typeof tab.title === 'string' ? tab.title : String(tab.key)}\n      >\n        {tab.title}\n      </CollectionItem>\n    ));\n  }, [orderedParsedTabs]);\n\n  // Determine disabled keys\n  const disabledKeys = useMemo(() => {\n    return new Set(\n      parsedTabs.filter((tab) => tab.isDisabled).map((tab) => tab.key),\n    );\n  }, [parsedTabs]);\n\n  // Handle selection change (converts React Aria's Key to string for our API)\n  const handleSelectionChange = useEvent((key: Key) => {\n    const keyStr = String(key);\n    visitedKeysRef.current.add(keyStr);\n    onChange?.(keyStr);\n  });\n\n  // Convert keys to strings for React Aria compatibility\n  const selectedKey = activeKey != null ? String(activeKey) : undefined;\n  const defaultSelectedKey =\n    defaultActiveKey != null ? String(defaultActiveKey) : undefined;\n\n  // Create aria props for useTabListState\n  const ariaProps: AriaTabListProps<object> = useMemo(\n    () => ({\n      selectedKey,\n      defaultSelectedKey,\n      onSelectionChange: handleSelectionChange,\n      disabledKeys,\n      children: collectionItems,\n      'aria-label': label,\n    }),\n    [\n      selectedKey,\n      defaultSelectedKey,\n      handleSelectionChange,\n      disabledKeys,\n      collectionItems,\n      label,\n    ],\n  );\n\n  // Create state using useTabListState\n  const state = useTabListState(ariaProps);\n\n  // Track initial selected key for visited tabs\n  useEffect(() => {\n    if (state.selectedKey != null) {\n      visitedKeysRef.current.add(String(state.selectedKey));\n    }\n  }, [state.selectedKey]);\n\n  // Get tablist props from react-aria\n  const { tabListProps } = useTabList(ariaProps, state, listRef);\n\n  // Handle selection from TabPicker (needs to update internal state in uncontrolled mode)\n  const handleTabPickerSelect = useEvent((key: string) => {\n    // Update internal state (for uncontrolled mode)\n    state.setSelectedKey(key);\n    // Also call the external onChange handler\n    handleSelectionChange(key);\n  });\n\n  // =========================================================================\n  // Tab Indicator (for default type)\n  // =========================================================================\n  // Create order token that changes when tab order changes (for indicator recalculation)\n  const orderToken = useMemo(\n    () => orderedParsedTabs.map((t) => t.key).join(','),\n    [orderedParsedTabs],\n  );\n\n  const indicatorStyle = useTabIndicator(\n    listRef,\n    state.selectedKey,\n    type === 'default' || type === 'narrow',\n    orderToken,\n  );\n\n  // =========================================================================\n  // Tiny Scrollbar (not for radio type)\n  // =========================================================================\n  const isTinyScrollbar = type !== 'radio';\n  const { handleHStyle, hasOverflowX, isScrolling, isAtStartX, isAtEndX } =\n    useTinyScrollbar(scrollRef, isTinyScrollbar);\n\n  const hasPanels = hasAnyContent || !!renderPanel;\n\n  // =========================================================================\n  // Tab Picker visibility\n  // =========================================================================\n  useWarn(showTabPicker && type === 'radio', {\n    key: ['tabs-tabpicker-radio-unsupported'],\n    args: [\n      'Tabs:',\n      '`showTabPicker` is not supported when `type=\"radio\"`. The TabPicker will not be rendered.',\n    ],\n  });\n\n  const shouldShowTabPicker =\n    type !== 'radio' &&\n    (showTabPicker === true || (showTabPicker === 'auto' && hasOverflowX));\n\n  // =========================================================================\n  // Scroll Arrows visibility and handlers\n  // =========================================================================\n  useWarn(showScrollArrows && type === 'radio', {\n    key: ['tabs-scrollarrows-radio-unsupported'],\n    args: [\n      'Tabs:',\n      '`showScrollArrows` is not supported when `type=\"radio\"`. The scroll arrows will not be rendered.',\n    ],\n  });\n\n  const shouldShowScrollArrows =\n    type !== 'radio' &&\n    (showScrollArrows === true ||\n      (showScrollArrows === 'auto' && hasOverflowX));\n\n  const handleScrollLeft = useEvent(() => {\n    const el = scrollRef.current;\n    if (el) {\n      el.scrollTo({\n        left: el.scrollLeft - el.clientWidth,\n        behavior: 'smooth',\n      });\n    }\n  });\n\n  const handleScrollRight = useEvent(() => {\n    const el = scrollRef.current;\n    if (el) {\n      el.scrollTo({\n        left: el.scrollLeft + el.clientWidth,\n        behavior: 'smooth',\n      });\n    }\n  });\n\n  // =========================================================================\n  // Base Context Value (without drag/drop states)\n  // =========================================================================\n  const baseContextValue = useMemo(\n    () => ({\n      state,\n      type,\n      size,\n      autoHideActions,\n      isEditable: parentIsEditable,\n      menu: parentMenu,\n      menuTriggerProps: parentMenuTriggerProps,\n      menuProps: parentMenuProps,\n      contextMenu: parentContextMenu,\n      onDelete,\n      onAction: parentOnAction,\n      editingKey,\n      editValue,\n      setEditValue,\n      startEditing,\n      submitEditing,\n      cancelEditing,\n    }),\n    [\n      state,\n      type,\n      size,\n      autoHideActions,\n      parentIsEditable,\n      parentMenu,\n      parentMenuTriggerProps,\n      parentMenuProps,\n      parentContextMenu,\n      onDelete,\n      parentOnAction,\n      editingKey,\n      editValue,\n      setEditValue,\n      startEditing,\n      submitEditing,\n      cancelEditing,\n    ],\n  );\n\n  // Helper to create full context value with optional drag/drop states\n  const createContextValue = (\n    dragState?: DraggableCollectionState,\n    dropState?: DroppableCollectionState,\n  ): TabsContextValue => ({\n    ...baseContextValue,\n    dragState,\n    dropState,\n  });\n\n  // =========================================================================\n  // Tab List Content Renderer\n  // =========================================================================\n  const renderTabListContent = (\n    contextValue: TabsContextValue,\n    collectionProps: Record<string, unknown> = {},\n  ) => (\n    <div\n      {...mergeProps(tabListProps, collectionProps)}\n      ref={listRef}\n      data-element=\"TabList\"\n    >\n      <TabsProvider value={contextValue}>\n        {orderedParsedTabs.map((tab, index) => {\n          const item = state.collection.getItem(tab.key);\n          if (!item) return null;\n\n          return (\n            <TabButton\n              key={item.key}\n              item={item}\n              tabData={tab}\n              isLastTab={index === orderedParsedTabs.length - 1}\n            />\n          );\n        })}\n      </TabsProvider>\n      {indicatorStyle && (\n        <TabIndicatorElement\n          style={{\n            left: indicatorStyle.left,\n            width: indicatorStyle.width,\n          }}\n        />\n      )}\n    </div>\n  );\n\n  // =========================================================================\n  // Mods for styling\n  // =========================================================================\n  const mods = useMemo(\n    () => ({\n      type,\n      size,\n      deletable: !!onDelete,\n      scrolling: isScrolling,\n      'fade-left': !isAtStartX,\n      'fade-right': !isAtEndX,\n      'has-panels': hasPanels,\n    }),\n    [type, size, onDelete, isScrolling, isAtStartX, isAtEndX, hasPanels],\n  );\n\n  // =========================================================================\n  // Action Elements (TabPicker and Scroll Arrows)\n  // =========================================================================\n  const scrollArrowsElement = shouldShowScrollArrows ? (\n    <>\n      <TabsAction\n        icon={<DirectionIcon to=\"left\" />}\n        aria-label=\"Scroll tabs left\"\n        isDisabled={isAtStartX}\n        onPress={handleScrollLeft}\n      />\n      <TabsAction\n        icon={<DirectionIcon to=\"right\" />}\n        aria-label=\"Scroll tabs right\"\n        isDisabled={isAtEndX}\n        onPress={handleScrollRight}\n      />\n    </>\n  ) : null;\n\n  const tabPickerElement = shouldShowTabPicker ? (\n    <TabPicker\n      tabs={orderedParsedTabs}\n      selectedKey={state.selectedKey}\n      size={size}\n      type={type}\n      onSelect={handleTabPickerSelect}\n      onDelete={onDelete}\n    />\n  ) : null;\n\n  // Determine which actions go in prefix/suffix\n  // In prefix: TabPicker first (left), then scroll arrows (right)\n  // In suffix: scroll arrows first (left), then TabPicker (right)\n  const prefixHasActions =\n    (shouldShowTabPicker && tabPickerPosition === 'prefix') ||\n    (shouldShowScrollArrows && scrollArrowsPosition === 'prefix');\n\n  const suffixHasActions =\n    (shouldShowTabPicker && tabPickerPosition === 'suffix') ||\n    (shouldShowScrollArrows && scrollArrowsPosition === 'suffix');\n\n  // Wrap with TabsProvider so prefix/suffix can access context (size, type)\n  // The inner TabsProvider in renderTabListContent will override for tab buttons\n  return (\n    <TabsProvider value={baseContextValue}>\n      <TabsElement\n        ref={ref}\n        qa={qa}\n        mods={mods}\n        styles={combinedStyles}\n        style={handleHStyle}\n        data-size={size}\n      >\n        {prefix || prefixHasActions ? (\n          <div data-element=\"Prefix\">\n            {tabPickerPosition === 'prefix' && tabPickerElement}\n            {scrollArrowsPosition === 'prefix' && scrollArrowsElement}\n            {prefix}\n          </div>\n        ) : null}\n        <div data-element=\"ScrollWrapper\">\n          <div ref={scrollRef} data-element=\"Scroll\">\n            {isReorderable ? (\n              <DraggableTabList\n                state={state}\n                listRef={listRef}\n                orderedKeys={orderedParsedTabs.map((t) => t.key)}\n                onReorder={onReorder}\n              >\n                {(dragState, dropState, collectionProps) =>\n                  renderTabListContent(\n                    createContextValue(dragState, dropState),\n                    collectionProps,\n                  )\n                }\n              </DraggableTabList>\n            ) : (\n              renderTabListContent(createContextValue())\n            )}\n          </div>\n          {isTinyScrollbar && hasOverflowX && <div data-element=\"ScrollbarH\" />}\n        </div>\n        {suffix || suffixHasActions ? (\n          <div data-element=\"Suffix\">\n            {scrollArrowsPosition === 'suffix' && scrollArrowsElement}\n            {tabPickerPosition === 'suffix' && tabPickerElement}\n            {suffix}\n          </div>\n        ) : null}\n      </TabsElement>\n\n      {/* Functional panel rendering with content caching */}\n      {renderPanel && (\n        <CachedPanelRenderer\n          parsedTabs={parsedTabs}\n          explicitPanels={explicitPanels}\n          state={state}\n          renderPanel={renderPanel}\n          panelCacheKeys={panelCacheKeys}\n          prerender={prerender}\n          keepMounted={keepMounted}\n          visitedKeys={visitedKeysRef.current}\n        />\n      )}\n\n      {/* Static panel rendering (traditional children-based approach) */}\n      {!renderPanel &&\n        hasAnyContent &&\n        parsedTabs.map((tab) => {\n          const explicitPanel = explicitPanels.get(tab.key);\n          const content = explicitPanel?.content ?? tab.content;\n\n          if (content == null) return null;\n\n          return (\n            <TabPanelRenderer\n              key={tab.key}\n              tabKey={tab.key}\n              state={state}\n              content={content}\n              prerender={prerender}\n              keepMounted={keepMounted}\n              tabPrerender={explicitPanel?.prerender ?? tab.prerender}\n              tabKeepMounted={explicitPanel?.keepMounted ?? tab.keepMounted}\n              visitedKeys={visitedKeysRef.current}\n              panelStyles={explicitPanel?.styles}\n              qa={explicitPanel?.qa}\n              qaVal={explicitPanel?.qaVal}\n            />\n          );\n        })}\n    </TabsProvider>\n  );\n}\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nconst _Tabs = forwardRef(TabsComponent);\n\n/**\n * Tabs component for organizing content into multiple panels.\n * Built with React Aria for full accessibility support.\n *\n * **Note:** Tab keys are internally converted to strings for React Aria compatibility.\n *\n * @example\n * // Simple usage\n * <Tabs defaultActiveKey=\"tab1\">\n *   <Tab key=\"tab1\" title=\"Tab 1\">Content 1</Tab>\n *   <Tab key=\"tab2\" title=\"Tab 2\">Content 2</Tab>\n * </Tabs>\n *\n * @example\n * // Tabs-only (no panels)\n * <Tabs activeKey={activeTab} onChange={setActiveTab}>\n *   <Tab key=\"overview\" title=\"Overview\" />\n *   <Tab key=\"settings\" title=\"Settings\" />\n * </Tabs>\n *\n * @example\n * // Explicit panels\n * <Tabs defaultActiveKey=\"tab1\">\n *   <Tabs.List>\n *     <Tab key=\"tab1\" title=\"Tab 1\" />\n *     <Tab key=\"tab2\" title=\"Tab 2\" />\n *   </Tabs.List>\n *   <Tabs.Panel key=\"tab1\">Content 1</Tabs.Panel>\n *   <Tabs.Panel key=\"tab2\">Content 2</Tabs.Panel>\n * </Tabs>\n */\nexport const Tabs = Object.assign(_Tabs, {\n  Tab,\n  List: TabList,\n  Panel: TabPanel,\n  Action: TabsAction,\n});\n\nexport { Tab, TabList, TabPanel, TabsAction };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { useOptionalTabsContext } from "./TabsContext.js";
@@ -6,14 +6,13 @@ import { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/navigation/Tabs/TabsAction.tsx
-const TabsActionElement = tasty(_ItemButton, {
-	shape: "sharp",
-	type: "neutral",
-	styles: { border: {
-		"": 0,
-		"tabs-type-file & !:first-child": "left"
-	} }
-});
+const TabsActionElement = tasty(_ItemButton, { styles: {
+	border: {
+		"type=neutral": 0,
+		"type=neutral & tabs-type-file & !:first-child": "left"
+	},
+	radius: { "type=neutral": 0 }
+} });
 /**
 * Action button designed for the Tabs prefix/suffix slots.
 *
@@ -43,17 +42,19 @@ const TabsActionElement = tasty(_ItemButton, {
 * </Tabs>
 */
 const TabsAction = forwardRef(function TabsAction(props, ref) {
-	const { size, mods, ...rest } = props;
+	const { size, mods, type, ...rest } = props;
 	const tabsContext = useOptionalTabsContext();
 	const effectiveSize = size ?? tabsContext?.size ?? "medium";
 	const tabsType = tabsContext?.type ?? "default";
+	const combinedMods = useMemo(() => ({
+		"tabs-type-file": tabsType === "file",
+		...mods
+	}), [tabsType, mods]);
 	return /* @__PURE__ */ jsx(TabsActionElement, {
 		ref,
+		type: type ?? (tabsType === "default" ? "outline" : "neutral"),
 		size: effectiveSize,
-		mods: useMemo(() => ({
-			"tabs-type-file": tabsType === "file",
-			...mods
-		}), [tabsType, mods]),
+		mods: combinedMods,
 		...rest
 	});
 });

package/dist/components/navigation/Tabs/TabsAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsAction.js","names":["ItemButton"],"sources":["../../../../src/components/navigation/Tabs/TabsAction.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef, useMemo } from 'react';\n\nimport { tasty } from '../../../tasty';\nimport {\n  CubeItemButtonProps,\n  ItemButton,\n} from '../../actions/ItemButton/ItemButton';\n\nimport { useOptionalTabsContext } from './TabsContext';\n\nimport type { TabSize } from './types';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface CubeTabsActionProps\n  extends Omit<CubeItemButtonProps, 'size' | 'shape'> {\n  /**\n   * Size of the action button.\n   * When used inside Tabs prefix/suffix, inherits from Tabs size by default.\n   */\n  size?: TabSize;\n}\n\n// =============================================================================\n// Styled Component\n// =============================================================================\n\nconst TabsActionElement = tasty(ItemButton, {\n  shape: 'sharp',\n  type: 'neutral',\n  styles: {\n    border: {\n      '': 0,\n      'tabs-type-file & !:first-child': 'left',\n    },\n  },\n});\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Action button designed for the Tabs prefix/suffix slots.\n *\n * Styled with sharp edges and no border to match the TabPicker trigger.\n * When multiple TabsAction components are placed together, they automatically\n * display dividers between them using CSS :not(:first-child) border styling\n * (only for file tab type).\n *\n * Inherits size from the parent Tabs component when used inside prefix/suffix slots.\n *\n * @example\n * <Tabs suffix={<Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />}>\n *   <Tab key=\"tab1\" title=\"Tab 1\">Content</Tab>\n * </Tabs>\n *\n * @example\n * // Multiple actions with automatic dividers\n * <Tabs\n *   suffix={\n *     <>\n *       <Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />\n *       <Tabs.Action icon={<SettingsIcon />} onPress={handleSettings} />\n *     </>\n *   }\n * >\n *   <Tab key=\"tab1\" title=\"Tab 1\">Content</Tab>\n * </Tabs>\n */\nexport const TabsAction = forwardRef(function TabsAction(\n  props: CubeTabsActionProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { size, mods, ...rest } = props;\n\n  // Get size and type from context if available (when used inside Tabs)\n  const tabsContext = useOptionalTabsContext();\n  const effectiveSize = size ?? tabsContext?.size ?? 'medium';\n  const tabsType = tabsContext?.type ?? 'default';\n\n  const combinedMods = useMemo(\n    () => ({\n      'tabs-type-file': tabsType === 'file',\n      ...mods,\n    }),\n    [tabsType, mods],\n  );\n\n  return (\n    <TabsActionElement\n      ref={ref}\n      size={effectiveSize}\n      mods={combinedMods}\n      {...rest}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AA8BA,MAAM,oBAAoB,MAAMA,aAAY;CAC1C,OAAO;CACP,MAAM;CACN,QAAQ,EACN,QAAQ;EACN,IAAI;EACJ,kCAAkC;EACnC,EACF;CACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAa,aAAa,WAAW,SAAS,WAC5C,OACA,KACA;CACA,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS;CAGhC,MAAM,cAAc,wBAAwB;CAC5C,MAAM,gBAAgB,QAAQ,aAAa,QAAQ;CACnD,MAAM,WAAW,aAAa,QAAQ;AAUtC,QACE,oBAAC;EACM;EACL,MAAM;EACN,MAZiB,eACZ;GACL,kBAAkB,aAAa;GAC/B,GAAG;GACJ,GACD,CAAC,UAAU,KAAK,CACjB;EAOG,GAAI;GACJ;EAEJ"}
+{"version":3,"file":"TabsAction.js","names":["ItemButton"],"sources":["../../../../src/components/navigation/Tabs/TabsAction.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef, useMemo } from 'react';\n\nimport { tasty } from '../../../tasty';\nimport {\n  CubeItemButtonProps,\n  ItemButton,\n} from '../../actions/ItemButton/ItemButton';\n\nimport { useOptionalTabsContext } from './TabsContext';\n\nimport type { TabSize } from './types';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface CubeTabsActionProps\n  extends Omit<CubeItemButtonProps, 'size' | 'shape'> {\n  /**\n   * Size of the action button.\n   * When used inside Tabs prefix/suffix, inherits from Tabs size by default.\n   */\n  size?: TabSize;\n}\n\n// =============================================================================\n// Styled Component\n// =============================================================================\n\nconst TabsActionElement = tasty(ItemButton, {\n  styles: {\n    border: {\n      'type=neutral': 0,\n      'type=neutral & tabs-type-file & !:first-child': 'left',\n    },\n    radius: {\n      'type=neutral': 0,\n    },\n  },\n});\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Action button designed for the Tabs prefix/suffix slots.\n *\n * Styled with sharp edges and no border to match the TabPicker trigger.\n * When multiple TabsAction components are placed together, they automatically\n * display dividers between them using CSS :not(:first-child) border styling\n * (only for file tab type).\n *\n * Inherits size from the parent Tabs component when used inside prefix/suffix slots.\n *\n * @example\n * <Tabs suffix={<Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />}>\n *   <Tab key=\"tab1\" title=\"Tab 1\">Content</Tab>\n * </Tabs>\n *\n * @example\n * // Multiple actions with automatic dividers\n * <Tabs\n *   suffix={\n *     <>\n *       <Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />\n *       <Tabs.Action icon={<SettingsIcon />} onPress={handleSettings} />\n *     </>\n *   }\n * >\n *   <Tab key=\"tab1\" title=\"Tab 1\">Content</Tab>\n * </Tabs>\n */\nexport const TabsAction = forwardRef(function TabsAction(\n  props: CubeTabsActionProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { size, mods, type, ...rest } = props;\n\n  // Get size and type from context if available (when used inside Tabs)\n  const tabsContext = useOptionalTabsContext();\n  const effectiveSize = size ?? tabsContext?.size ?? 'medium';\n  const tabsType = tabsContext?.type ?? 'default';\n\n  const combinedMods = useMemo(\n    () => ({\n      'tabs-type-file': tabsType === 'file',\n      ...mods,\n    }),\n    [tabsType, mods],\n  );\n\n  return (\n    <TabsActionElement\n      ref={ref}\n      type={type ?? (tabsType === 'default' ? 'outline' : 'neutral')}\n      size={effectiveSize}\n      mods={combinedMods}\n      {...rest}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AA8BA,MAAM,oBAAoB,MAAMA,aAAY,EAC1C,QAAQ;CACN,QAAQ;EACN,gBAAgB;EAChB,iDAAiD;EAClD;CACD,QAAQ,EACN,gBAAgB,GACjB;CACF,EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAa,aAAa,WAAW,SAAS,WAC5C,OACA,KACA;CACA,MAAM,EAAE,MAAM,MAAM,MAAM,GAAG,SAAS;CAGtC,MAAM,cAAc,wBAAwB;CAC5C,MAAM,gBAAgB,QAAQ,aAAa,QAAQ;CACnD,MAAM,WAAW,aAAa,QAAQ;CAEtC,MAAM,eAAe,eACZ;EACL,kBAAkB,aAAa;EAC/B,GAAG;EACJ,GACD,CAAC,UAAU,KAAK,CACjB;AAED,QACE,oBAAC;EACM;EACL,MAAM,SAAS,aAAa,YAAY,YAAY;EACpD,MAAM;EACN,MAAM;EACN,GAAI;GACJ;EAEJ"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { _Item } from "../../content/Item/Item.js";
 
@@ -45,6 +45,14 @@ const TabsElement = tasty({ styles: {
 		placeContent: "center",
 		flexShrink: 0,
 		placeSelf: "stretch",
+		padding: {
+			"": 0,
+			"type=default": ".5x 0 .5x 1x"
+		},
+		gap: {
+			"": 0,
+			"type=default": ".5x"
+		},
 		border: {
 			"": 0,
 			"type=file": "right"
@@ -57,6 +65,14 @@ const TabsElement = tasty({ styles: {
 		placeContent: "center",
 		flexShrink: 0,
 		placeSelf: "stretch",
+		padding: {
+			"": 0,
+			"type=default": ".5x 1x .5x 0"
+		},
+		gap: {
+			"": 0,
+			"type=default": ".5x"
+		},
 		border: {
 			"": 0,
 			"type=file": "left"
@@ -115,6 +131,7 @@ const TabsElement = tasty({ styles: {
 		},
 		gap: {
 			"": 0,
+			"type=default": "1x",
 			"type=narrow": "2x",
 			"type=radio": ".5x"
 		},
@@ -123,6 +140,11 @@ const TabsElement = tasty({ styles: {
 		width: {
 			"": "max-content",
 			"type=radio": "100%"
+		},
+		padding: "0 $tablist-padding",
+		"$tablist-padding": {
+			"": "0",
+			"type=default | type=narrow": "1x"
 		}
 	},
 	$size: {
@@ -155,17 +177,18 @@ const TabElement = tasty(_Item, {
 	styles: {
 		radius: {
 			"": false,
-			"type=radio": true,
-			"type=default | type=narrow": "top"
+			"type=radio | type=default": true,
+			"type=narrow": "top"
 		},
 		color: {
 			"": "#dark-02",
-			"(type=default | type=narrow) & (hovered & !selected)": "#primary-text",
+			"type=narrow & (hovered & !selected)": "#primary-text",
 			"(type=default | type=narrow) & selected": "#primary-text",
 			disabled: "#dark-04"
 		},
 		fill: {
 			"": "#clear",
+			"hovered & !type=narrow": "#dark.03",
 			"type=file": "#light",
 			"type=file & hovered": "#light.5",
 			"type=radio & hovered": "#white.5",
@@ -212,6 +235,10 @@ const TabElement = tasty(_Item, {
 const TabContainer = tasty({ styles: {
 	position: "relative",
 	display: "grid",
+	margin: {
+		"": 0,
+		"type=default": ".5x 0"
+	},
 	border: {
 		"": 0,
 		"type=file": "right"

package/dist/components/navigation/Tabs/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '../../../tasty';\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container\n// =============================================================================\n\nexport const TabsElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    placeItems: {\n      '': 'end stretch',\n      'type=radio | type=file': 'stretch',\n    },\n    overflow: 'visible',\n    border: {\n      '': 0,\n      '(type=default | type=file | type=narrow) & has-panels': 'bottom',\n    },\n    width: {\n      '': '100%',\n      'type=radio': 'max-content',\n    },\n    padding: {\n      '': 0,\n      'type=radio': '.5x',\n    },\n    radius: {\n      '': 0,\n      'type=radio': '1cr',\n    },\n    fill: {\n      '': '#clear',\n      'type=radio': '#dark.06',\n    },\n    flexShrink: 0,\n    flexGrow: 0,\n\n    $transition: '$tab-transition',\n    '$tab-indicator-size': {\n      '': '2bw',\n      'size=large': '1ow',\n    },\n\n    Prefix: {\n      $: '>',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      border: {\n        '': 0,\n        'type=file': 'right',\n      },\n    },\n\n    Suffix: {\n      $: '>',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      border: {\n        '': 0,\n        'type=file': 'left',\n      },\n    },\n\n    // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n    ScrollWrapper: {\n      $: '>',\n      position: 'relative',\n      display: 'flex',\n      flexGrow: 1,\n      flexShrink: 1,\n      width: 'min 0',\n      overflow: {\n        '': 'hidden',\n        'type=radio': 'visible',\n      },\n    },\n\n    Scroll: {\n      $: '> ScrollWrapper >',\n      position: 'relative',\n      display: 'block',\n      overflow: {\n        '': 'auto hidden',\n        'type=radio': 'visible',\n      },\n      scrollbar: 'none',\n      flexGrow: 1,\n      width: '100%',\n      // Add padding/margin for radio type to allow shadow to render outside\n      padding: {\n        '': 0,\n        'type=radio': '.5x',\n      },\n      margin: {\n        '': 0,\n        'type=radio': '-.5x',\n      },\n      // Use multi-group fade with color tokens for smooth transitions\n      fade: '2x left #tabs-fade-left #black, 2x right #tabs-fade-right #black',\n      // ##name outputs --name-color (literal CSS property name)\n      transition:\n        '##tabs-fade-left $tab-transition ease-in, ##tabs-fade-right $tab-transition ease-in',\n\n      // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n      '#tabs-fade-left': {\n        '': 'rgb(0 0 0 / 1)',\n        'fade-left': 'rgb(0 0 0 / 0)',\n      },\n      '#tabs-fade-right': {\n        '': 'rgb(0 0 0 / 1)',\n        'fade-right': 'rgb(0 0 0 / 0)',\n      },\n    },\n\n    TabList: {\n      $: '> ScrollWrapper > Scroll >',\n      position: 'relative',\n      display: 'grid',\n      gridAutoFlow: 'column',\n      gridAutoColumns: {\n        '': 'auto',\n        'type=radio': '1fr',\n      },\n      gap: {\n        '': 0,\n        'type=narrow': '2x',\n        'type=radio': '.5x',\n      },\n      placeContent: 'start',\n      overflow: 'visible',\n      width: {\n        '': 'max-content',\n        'type=radio': '100%',\n      },\n    },\n\n    // Size variable for actions (if ItemAction is used instead of TabsAction)\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    // Custom horizontal scrollbar (tiny) - positioned relative to ScrollWrapper\n    ScrollbarH: {\n      $: '> ScrollWrapper >',\n      position: 'absolute',\n      bottom: '1px',\n      left: '$scrollbar-h-left',\n      height: '1ow',\n      width: '$scrollbar-h-width',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        'focused | scrolling': 1,\n      },\n      transition: 'opacity 0.15s',\n      pointerEvents: 'none',\n    },\n  },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\nexport const TabElement = tasty(Item, {\n  as: 'button',\n  styles: {\n    radius: {\n      '': false,\n      'type=radio': true,\n      'type=default | type=narrow': 'top',\n    },\n    color: {\n      '': '#dark-02',\n      '(type=default | type=narrow) & (hovered & !selected)': '#primary-text',\n      '(type=default | type=narrow) & selected': '#primary-text',\n      disabled: '#dark-04',\n    },\n    fill: {\n      '': '#clear',\n      'type=file': '#light',\n      'type=file & hovered': '#light.5',\n      'type=radio & hovered': '#white.5',\n      '(type=file | type=radio) & selected': '#white',\n    },\n    border: {\n      '': '#clear',\n      'type=file': '0 #clear',\n    },\n    preset: {\n      '': 't3m',\n      'size=xsmall': 't4',\n    },\n    shadow: {\n      '': '$selection-shadow',\n      'focused & focus-visible':\n        'inset 0 0 0 1bw #primary-text, $selection-shadow',\n      editing: 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n      'type=radio & selected': '$item-shadow',\n      'type=radio & selected & focused & focus-visible':\n        '$item-shadow, inset 0 0 0 1bw #primary-text',\n    },\n    '$selection-shadow': {\n      '': 'inset 0 0 0 0 #primary',\n      'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #primary',\n      '!type=file': 'inset 0 0 0 0 #primary.0',\n    },\n    // Collapse horizontal padding for narrow type\n    '$label-padding-left': {\n      '': '$inline-padding',\n      'has-start-content': 0,\n      'type=narrow': 0,\n    },\n    '$label-padding-right': {\n      '': '$inline-padding',\n      'has-end-content': 0,\n      'type=narrow': 0,\n    },\n    Label: {\n      placeSelf: {\n        '': 'center start',\n        'type=radio': 'center start',\n        'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon':\n          'center',\n      },\n    },\n    Actions: {\n      transition: false,\n    },\n  },\n});\n\n// =============================================================================\n// Tab Container (wrapper for tab + actions)\n// =============================================================================\n\nexport const TabContainer = tasty({\n  styles: {\n    position: 'relative',\n    display: 'grid',\n    border: {\n      '': 0,\n      'type=file': 'right',\n    },\n    cursor: {\n      '': 'default',\n      draggable: 'grab',\n      dragging: 'grabbing',\n    },\n\n    // Size variable for actions (same as ItemButton's ActionsWrapper)\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    // Actions rendered outside the button for accessibility\n    Actions: {\n      $: '>',\n      position: 'absolute',\n      inset: '1bw 1bw auto auto',\n      display: 'flex',\n      gap: '1bw',\n      placeItems: 'center',\n      placeContent: 'center end',\n      pointerEvents: 'auto',\n      height: 'min ($size - 2bw)',\n      padding: '0 $side-padding',\n      // Simple CSS opacity for show-on-hover\n      opacity: {\n        '': 1,\n        'auto-hide-actions': 0,\n        'auto-hide-actions & (active | :hover | :focus-within | :has([data-pressed]))': 1,\n      },\n      transition: 'opacity $transition',\n      // Size variables (same as Item)\n      '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n      '$side-padding': '(($size - $action-size - 2bw) / 2)',\n    },\n  },\n});\n\n// =============================================================================\n// Drop Indicator for Drag-and-Drop\n// =============================================================================\n\nexport const DropIndicatorElement = tasty({\n  styles: {\n    zIndex: 10,\n    position: 'absolute',\n    pointerEvents: 'none',\n    opacity: {\n      '': 0,\n      'drop-target': 1,\n    },\n    fill: '#primary',\n    width: '.5x',\n    top: 0,\n    bottom: 0,\n    left: {\n      '': 'auto',\n      before: '-2px',\n    },\n    right: {\n      '': 'auto',\n      after: '-2px',\n    },\n  },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default type)\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n  styles: {\n    position: 'absolute',\n    bottom: '0',\n    left: 0,\n    height: '$tab-indicator-size',\n    fill: '#primary',\n    transition:\n      'left $tab-transition ease-in-out, width $tab-transition ease-in-out',\n    pointerEvents: 'none',\n  },\n});\n\n// =============================================================================\n// Tab Panel\n// =============================================================================\n\nexport const TabPanelElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'contents',\n    hide: {\n      '': true,\n      active: false,\n    },\n  },\n});\n\n// =============================================================================\n// Editable Title Input\n// =============================================================================\n\nexport const EditableTitleInputElement = tasty({\n  as: 'input',\n  styles: {\n    border: 0,\n    padding: 0,\n    margin: 0,\n    fill: 'transparent',\n    outline: 0,\n    preset: 'inherit',\n    color: 'inherit',\n    width: 'initial $input-width 100%',\n  },\n});\n\nexport const HiddenMeasure = tasty({\n  styles: {\n    position: 'absolute',\n    visibility: 'hidden',\n    whiteSpace: 'pre',\n    font: 'inherit',\n    pointerEvents: 'none',\n    height: 0,\n    overflow: 'hidden',\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '../../../tasty';\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container\n// =============================================================================\n\nexport const TabsElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    placeItems: {\n      '': 'end stretch',\n      'type=radio | type=file': 'stretch',\n    },\n    overflow: 'visible',\n    border: {\n      '': 0,\n      '(type=default | type=file | type=narrow) & has-panels': 'bottom',\n    },\n    width: {\n      '': '100%',\n      'type=radio': 'max-content',\n    },\n    padding: {\n      '': 0,\n      'type=radio': '.5x',\n    },\n    radius: {\n      '': 0,\n      'type=radio': '1cr',\n    },\n    fill: {\n      '': '#clear',\n      'type=radio': '#dark.06',\n    },\n    flexShrink: 0,\n    flexGrow: 0,\n\n    $transition: '$tab-transition',\n    '$tab-indicator-size': {\n      '': '2bw',\n      'size=large': '1ow',\n    },\n\n    Prefix: {\n      $: '>',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      padding: {\n        '': 0,\n        'type=default': '.5x 0 .5x 1x',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'right',\n      },\n    },\n\n    Suffix: {\n      $: '>',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      padding: {\n        '': 0,\n        'type=default': '.5x 1x .5x 0',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'left',\n      },\n    },\n\n    // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n    ScrollWrapper: {\n      $: '>',\n      position: 'relative',\n      display: 'flex',\n      flexGrow: 1,\n      flexShrink: 1,\n      width: 'min 0',\n      overflow: {\n        '': 'hidden',\n        'type=radio': 'visible',\n      },\n    },\n\n    Scroll: {\n      $: '> ScrollWrapper >',\n      position: 'relative',\n      display: 'block',\n      overflow: {\n        '': 'auto hidden',\n        'type=radio': 'visible',\n      },\n      scrollbar: 'none',\n      flexGrow: 1,\n      width: '100%',\n      // Add padding/margin for radio type to allow shadow to render outside\n      padding: {\n        '': 0,\n        'type=radio': '.5x',\n      },\n      margin: {\n        '': 0,\n        'type=radio': '-.5x',\n      },\n      // Use multi-group fade with color tokens for smooth transitions\n      fade: '2x left #tabs-fade-left #black, 2x right #tabs-fade-right #black',\n      // ##name outputs --name-color (literal CSS property name)\n      transition:\n        '##tabs-fade-left $tab-transition ease-in, ##tabs-fade-right $tab-transition ease-in',\n\n      // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n      '#tabs-fade-left': {\n        '': 'rgb(0 0 0 / 1)',\n        'fade-left': 'rgb(0 0 0 / 0)',\n      },\n      '#tabs-fade-right': {\n        '': 'rgb(0 0 0 / 1)',\n        'fade-right': 'rgb(0 0 0 / 0)',\n      },\n    },\n\n    TabList: {\n      $: '> ScrollWrapper > Scroll >',\n      position: 'relative',\n      display: 'grid',\n      gridAutoFlow: 'column',\n      gridAutoColumns: {\n        '': 'auto',\n        'type=radio': '1fr',\n      },\n      gap: {\n        '': 0,\n        'type=default': '1x',\n        'type=narrow': '2x',\n        'type=radio': '.5x',\n      },\n      placeContent: 'start',\n      overflow: 'visible',\n      width: {\n        '': 'max-content',\n        'type=radio': '100%',\n      },\n      padding: '0 $tablist-padding',\n\n      '$tablist-padding': {\n        '': '0',\n        'type=default | type=narrow': '1x',\n      },\n    },\n\n    // Size variable for actions (if ItemAction is used instead of TabsAction)\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    // Custom horizontal scrollbar (tiny) - positioned relative to ScrollWrapper\n    ScrollbarH: {\n      $: '> ScrollWrapper >',\n      position: 'absolute',\n      bottom: '1px',\n      left: '$scrollbar-h-left',\n      height: '1ow',\n      width: '$scrollbar-h-width',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        'focused | scrolling': 1,\n      },\n      transition: 'opacity 0.15s',\n      pointerEvents: 'none',\n    },\n  },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\nexport const TabElement = tasty(Item, {\n  as: 'button',\n  styles: {\n    radius: {\n      '': false,\n      'type=radio | type=default': true,\n      'type=narrow': 'top',\n    },\n    color: {\n      '': '#dark-02',\n      'type=narrow & (hovered & !selected)': '#primary-text',\n      '(type=default | type=narrow) & selected': '#primary-text',\n      disabled: '#dark-04',\n    },\n    fill: {\n      '': '#clear',\n      'hovered & !type=narrow': '#dark.03',\n      'type=file': '#light',\n      'type=file & hovered': '#light.5',\n      'type=radio & hovered': '#white.5',\n      '(type=file | type=radio) & selected': '#white',\n    },\n    border: {\n      '': '#clear',\n      'type=file': '0 #clear',\n    },\n    preset: {\n      '': 't3m',\n      'size=xsmall': 't4',\n    },\n    shadow: {\n      '': '$selection-shadow',\n      'focused & focus-visible':\n        'inset 0 0 0 1bw #primary-text, $selection-shadow',\n      editing: 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n      'type=radio & selected': '$item-shadow',\n      'type=radio & selected & focused & focus-visible':\n        '$item-shadow, inset 0 0 0 1bw #primary-text',\n    },\n    '$selection-shadow': {\n      '': 'inset 0 0 0 0 #primary',\n      'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #primary',\n      '!type=file': 'inset 0 0 0 0 #primary.0',\n    },\n    // Collapse horizontal padding for narrow type\n    '$label-padding-left': {\n      '': '$inline-padding',\n      'has-start-content': 0,\n      'type=narrow': 0,\n    },\n    '$label-padding-right': {\n      '': '$inline-padding',\n      'has-end-content': 0,\n      'type=narrow': 0,\n    },\n    Label: {\n      placeSelf: {\n        '': 'center start',\n        'type=radio': 'center start',\n        'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon':\n          'center',\n      },\n    },\n    Actions: {\n      transition: false,\n    },\n  },\n});\n\n// =============================================================================\n// Tab Container (wrapper for tab + actions)\n// =============================================================================\n\nexport const TabContainer = tasty({\n  styles: {\n    position: 'relative',\n    display: 'grid',\n    margin: {\n      '': 0,\n      'type=default': '.5x 0',\n    },\n    border: {\n      '': 0,\n      'type=file': 'right',\n    },\n    cursor: {\n      '': 'default',\n      draggable: 'grab',\n      dragging: 'grabbing',\n    },\n\n    // Size variable for actions (same as ItemButton's ActionsWrapper)\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    // Actions rendered outside the button for accessibility\n    Actions: {\n      $: '>',\n      position: 'absolute',\n      inset: '1bw 1bw auto auto',\n      display: 'flex',\n      gap: '1bw',\n      placeItems: 'center',\n      placeContent: 'center end',\n      pointerEvents: 'auto',\n      height: 'min ($size - 2bw)',\n      padding: '0 $side-padding',\n      // Simple CSS opacity for show-on-hover\n      opacity: {\n        '': 1,\n        'auto-hide-actions': 0,\n        'auto-hide-actions & (active | :hover | :focus-within | :has([data-pressed]))': 1,\n      },\n      transition: 'opacity $transition',\n      // Size variables (same as Item)\n      '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n      '$side-padding': '(($size - $action-size - 2bw) / 2)',\n    },\n  },\n});\n\n// =============================================================================\n// Drop Indicator for Drag-and-Drop\n// =============================================================================\n\nexport const DropIndicatorElement = tasty({\n  styles: {\n    zIndex: 10,\n    position: 'absolute',\n    pointerEvents: 'none',\n    opacity: {\n      '': 0,\n      'drop-target': 1,\n    },\n    fill: '#primary',\n    width: '.5x',\n    top: 0,\n    bottom: 0,\n    left: {\n      '': 'auto',\n      before: '-2px',\n    },\n    right: {\n      '': 'auto',\n      after: '-2px',\n    },\n  },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default type)\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n  styles: {\n    position: 'absolute',\n    bottom: '0',\n    left: 0,\n    height: '$tab-indicator-size',\n    fill: '#primary',\n    transition:\n      'left $tab-transition ease-in-out, width $tab-transition ease-in-out',\n    pointerEvents: 'none',\n  },\n});\n\n// =============================================================================\n// Tab Panel\n// =============================================================================\n\nexport const TabPanelElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'contents',\n    hide: {\n      '': true,\n      active: false,\n    },\n  },\n});\n\n// =============================================================================\n// Editable Title Input\n// =============================================================================\n\nexport const EditableTitleInputElement = tasty({\n  as: 'input',\n  styles: {\n    border: 0,\n    padding: 0,\n    margin: 0,\n    fill: 'transparent',\n    outline: 0,\n    preset: 'inherit',\n    color: 'inherit',\n    width: 'initial $input-width 100%',\n  },\n});\n\nexport const HiddenMeasure = tasty({\n  styles: {\n    position: 'absolute',\n    visibility: 'hidden',\n    whiteSpace: 'pre',\n    font: 'inherit',\n    pointerEvents: 'none',\n    height: 0,\n    overflow: 'hidden',\n  },\n});\n"],"mappings":"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"}