@cube-dev/ui-kit 0.138.6 → 0.140.0

package/dist/components/navigation/Tabs/popover-placement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-placement.js","names":[],"sources":["../../../../src/components/navigation/Tabs/popover-placement.ts"],"sourcesContent":["import type { Placement } from 'react-aria';\nimport type { TabPlacement } from './types';\n\n/**\n * Maps the parent Tabs `placement` to the popover placement for menus and\n * pickers anchored to the strip (tab overflow menu, context menu, TabPicker).\n *\n * The popover always opens **toward the panel area** so it never covers the\n * bar itself and stays inside the visible Tabs region. Tooltips are the only\n * surface that opens on the outer-edge side; menus and pickers must flow into\n * the content side instead.\n */\nexport const POPOVER_PLACEMENT_BY_TABS_PLACEMENT: Record<\n  TabPlacement,\n  Placement\n> = {\n  top: 'bottom start',\n  bottom: 'top start',\n  left: 'right top',\n  right: 'left top',\n};\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,sCAGT;CACF,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACR"}

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

@@ -1,45 +1,75 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { _Item } from "../../content/Item/Item.js";
 import { tasty } from "@tenphi/tasty";
 
 //#region src/components/navigation/Tabs/styled.ts
 const TabsElement = tasty({ styles: {
 	display: "flex",
-	flow: "row",
-	placeItems: {
-		"": "end stretch",
-		"type=radio | type=file": "stretch"
+	flow: {
+		"": "column",
+		"placement=bottom": "column-reverse",
+		"placement=left": "row",
+		"placement=right": "row-reverse"
 	},
+	flexShrink: 1,
+	flexGrow: 1,
+	width: "min 0",
+	height: "min 0",
 	overflow: "visible",
-	border: {
-		"": 0,
-		"(type=default | type=file | type=narrow) & has-panels": "bottom"
-	},
-	width: {
-		"": "100%",
-		"type=radio": "max-content"
-	},
-	padding: {
-		"": 0,
-		"type=radio": ".5x"
-	},
-	radius: {
-		"": 0,
-		"type=radio": "1cr"
-	},
-	fill: {
-		"": "#clear",
-		"type=radio": "#surface-4"
-	},
-	flexShrink: 0,
-	flexGrow: 0,
-	$transition: "$tab-transition",
-	"$tab-indicator-size": {
-		"": "2bw",
-		"size=large": "1ow"
+	Bar: {
+		$: ">",
+		display: "flex",
+		flow: {
+			"": "row",
+			"placement=left | placement=right": "column"
+		},
+		placeItems: {
+			"": "end stretch",
+			"placement=bottom": "start stretch",
+			"placement=left": "stretch end",
+			"placement=right": "stretch start",
+			"type=radio | type=file": "stretch"
+		},
+		overflow: "visible",
+		border: {
+			"": 0,
+			"(type=default | type=file | type=narrow) & has-panels": "bottom",
+			"(type=default | type=file | type=narrow) & has-panels & placement=bottom": "top",
+			"(type=default | type=file | type=narrow) & has-panels & placement=left": "right",
+			"(type=default | type=file | type=narrow) & has-panels & placement=right": "left"
+		},
+		width: {
+			"": "100%",
+			"placement=left | placement=right": "auto",
+			"type=radio & (placement=left | placement=right)": "max-content"
+		},
+		height: {
+			"": "auto",
+			"placement=left | placement=right": "100%",
+			"type=radio & (placement=left | placement=right)": "max-content"
+		},
+		padding: {
+			"": 0,
+			"type=radio": ".5x"
+		},
+		radius: {
+			"": 0,
+			"type=radio": "1cr"
+		},
+		fill: {
+			"": "#clear",
+			"type=radio": "#surface-4"
+		},
+		flexShrink: 0,
+		flexGrow: 0,
+		$transition: "$tab-transition",
+		"$tab-indicator-size": {
+			"": "2bw",
+			"size=large": "1ow"
+		}
 	},
 	Prefix: {
-		$: ">",
+		$: "> Bar >",
 		display: "flex",
 		placeItems: "center",
 		placeContent: "center",
@@ -47,7 +77,8 @@ const TabsElement = tasty({ styles: {
 		placeSelf: "stretch",
 		padding: {
 			"": 0,
-			"type=default": ".5x 0 .5x 1x"
+			"type=default": ".5x 0 .5x 1x",
+			"type=default & (placement=left | placement=right)": "1x .5x 0 .5x"
 		},
 		gap: {
 			"": 0,
@@ -55,11 +86,12 @@ const TabsElement = tasty({ styles: {
 		},
 		border: {
 			"": 0,
-			"type=file": "right"
+			"type=file": "right",
+			"type=file & (placement=left | placement=right)": "bottom"
 		}
 	},
 	Suffix: {
-		$: ">",
+		$: "> Bar >",
 		display: "flex",
 		placeItems: "center",
 		placeContent: "center",
@@ -67,7 +99,8 @@ const TabsElement = tasty({ styles: {
 		placeSelf: "stretch",
 		padding: {
 			"": 0,
-			"type=default": ".5x 1x .5x 0"
+			"type=default": ".5x 1x .5x 0",
+			"type=default & (placement=left | placement=right)": "0 .5x 1x .5x"
 		},
 		gap: {
 			"": 0,
@@ -75,27 +108,36 @@ const TabsElement = tasty({ styles: {
 		},
 		border: {
 			"": 0,
-			"type=file": "left"
+			"type=file": "left",
+			"type=file & (placement=left | placement=right)": "top"
 		}
 	},
 	ScrollWrapper: {
-		$: ">",
+		$: "> Bar >",
 		position: "relative",
 		display: "flex",
 		flexGrow: 1,
 		flexShrink: 1,
-		width: "min 0",
+		width: {
+			"": "min 0",
+			"placement=left | placement=right": "auto"
+		},
+		height: {
+			"": "auto",
+			"placement=left | placement=right": "min 0"
+		},
 		overflow: {
 			"": "hidden",
 			"type=radio": "visible"
 		}
 	},
 	Scroll: {
-		$: "> ScrollWrapper >",
+		$: "> Bar > ScrollWrapper >",
 		position: "relative",
 		display: "block",
 		overflow: {
 			"": "auto hidden",
+			"placement=left | placement=right": "hidden auto",
 			"type=radio": "visible"
 		},
 		scrollbar: "none",
@@ -109,42 +151,64 @@ const TabsElement = tasty({ styles: {
 			"": 0,
 			"type=radio": "-.5x"
 		},
-		fade: "2x left #tabs-fade-left #black, 2x right #tabs-fade-right #black",
-		transition: "##tabs-fade-left $tab-transition ease-in, ##tabs-fade-right $tab-transition ease-in",
-		"#tabs-fade-left": {
+		fade: {
+			"": "2x left #tabs-fade-start #black, 2x right #tabs-fade-end #black",
+			"placement=left | placement=right": "2x top #tabs-fade-start #black, 2x bottom #tabs-fade-end #black"
+		},
+		transition: "##tabs-fade-start $tab-transition ease-in, ##tabs-fade-end $tab-transition ease-in",
+		"#tabs-fade-start": {
 			"": "rgb(0 0 0 / 1)",
-			"fade-left": "rgb(0 0 0 / 0)"
+			"fade-start": "rgb(0 0 0 / 0)"
 		},
-		"#tabs-fade-right": {
+		"#tabs-fade-end": {
 			"": "rgb(0 0 0 / 1)",
-			"fade-right": "rgb(0 0 0 / 0)"
+			"fade-end": "rgb(0 0 0 / 0)"
 		}
 	},
 	TabList: {
-		$: "> ScrollWrapper > Scroll >",
+		$: "> Bar > ScrollWrapper > Scroll >",
 		position: "relative",
 		display: "grid",
-		gridAutoFlow: "column",
+		boxSizing: "border-box",
+		gridAutoFlow: {
+			"": "column",
+			"placement=left | placement=right": "row"
+		},
 		gridAutoColumns: {
 			"": "auto",
 			"type=radio": "1fr"
 		},
+		gridAutoRows: {
+			"": "auto",
+			"type=radio & (placement=left | placement=right)": "1fr"
+		},
 		gap: {
 			"": 0,
 			"type=default": "1x",
 			"type=narrow": "2x",
-			"type=radio": ".5x"
+			"type=radio": ".5x",
+			"(type=default | type=narrow) & (placement=left | placement=right)": "1bw"
 		},
 		placeContent: "start",
 		overflow: "visible",
 		width: {
 			"": "max-content",
-			"type=radio": "100%"
+			"type=radio": "100%",
+			"placement=left | placement=right": "100%"
+		},
+		height: {
+			"": "auto",
+			"placement=left | placement=right": "max-content"
+		},
+		padding: {
+			"": "0 $tablist-padding",
+			"placement=left | placement=right": "$tablist-padding 0",
+			"(type=default | type=narrow) & (placement=left | placement=right)": "$tablist-padding"
 		},
-		padding: "0 $tablist-padding",
 		"$tablist-padding": {
 			"": "0",
-			"type=default | type=narrow": "1x"
+			"type=default | type=narrow": "1x",
+			"(type=default | type=narrow) & (placement=left | placement=right)": ".5x"
 		}
 	},
 	$size: {
@@ -155,13 +219,33 @@ const TabsElement = tasty({ styles: {
 		"size=large": "$size-lg",
 		"size=xlarge": "$size-xl"
 	},
-	ScrollbarH: {
-		$: "> ScrollWrapper >",
+	Scrollbar: {
+		$: "> Bar > ScrollWrapper >",
 		position: "absolute",
-		bottom: "1px",
-		left: "$scrollbar-h-left",
-		height: "1ow",
-		width: "$scrollbar-h-width",
+		bottom: {
+			"": "1px",
+			"placement=left | placement=right": "auto"
+		},
+		top: {
+			"": "auto",
+			"placement=left | placement=right": "$scrollbar-v-top"
+		},
+		left: {
+			"": "$scrollbar-h-left",
+			"placement=left | placement=right": "auto"
+		},
+		right: {
+			"": "auto",
+			"placement=left | placement=right": "1px"
+		},
+		height: {
+			"": "1ow",
+			"placement=left | placement=right": "$scrollbar-v-height"
+		},
+		width: {
+			"": "$scrollbar-h-width",
+			"placement=left | placement=right": "1ow"
+		},
 		radius: "round",
 		fill: "#dark.35",
 		opacity: {
@@ -178,7 +262,10 @@ const TabElement = tasty(_Item, {
 		radius: {
 			"": false,
 			"type=radio | type=default": true,
-			"type=narrow": "top"
+			"type=narrow": "top",
+			"type=narrow & placement=bottom": "bottom",
+			"type=narrow & placement=left": "left",
+			"type=narrow & placement=right": "right"
 		},
 		color: {
 			"": "#dark-02",
@@ -209,11 +296,15 @@ const TabElement = tasty(_Item, {
 			"type=radio & selected": "$item-shadow",
 			"type=radio & selected & focused & focus-visible": "$item-shadow, inset 0 0 0 1bw #primary-text"
 		},
+		outline: "none",
 		placeContent: { "type=radio": "center" },
 		gridTemplate: { "type=radio": "\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content" },
 		"$selection-shadow": {
 			"": "inset 0 0 0 0 #primary",
 			"type=file & selected": "inset 0 (-1 * $tab-indicator-size) 0 0 #primary",
+			"type=file & selected & placement=bottom": "inset 0 $tab-indicator-size 0 0 #primary",
+			"type=file & selected & placement=left": "inset (-1 * $tab-indicator-size) 0 0 0 #primary",
+			"type=file & selected & placement=right": "inset $tab-indicator-size 0 0 0 #primary",
 			"!type=file": "inset 0 0 0 0 #primary.0"
 		},
 		"$label-padding-left": {
@@ -239,11 +330,13 @@ const TabContainer = tasty({ styles: {
 	display: "grid",
 	margin: {
 		"": 0,
-		"type=default": ".5x 0"
+		"type=default": ".5x 0",
+		"type=default & (placement=left | placement=right)": 0
 	},
 	border: {
 		"": 0,
-		"type=file": "right"
+		"type=file": "right",
+		"type=file & (placement=left | placement=right)": "bottom"
 	},
 	cursor: {
 		"": "default",
@@ -288,25 +381,63 @@ const DropIndicatorElement = tasty({ styles: {
 		"drop-target": 1
 	},
 	fill: "#primary",
-	width: ".5x",
-	top: 0,
-	bottom: 0,
+	width: {
+		"": ".5x",
+		"placement=left | placement=right": "auto"
+	},
+	height: {
+		"": "auto",
+		"placement=left | placement=right": ".5x"
+	},
+	top: {
+		"": 0,
+		"placement=left | placement=right": "auto",
+		"(placement=left | placement=right) & before": "-2px"
+	},
+	bottom: {
+		"": 0,
+		"placement=left | placement=right": "auto",
+		"(placement=left | placement=right) & after": "-2px"
+	},
 	left: {
 		"": "auto",
-		before: "-2px"
+		"before & !(placement=left | placement=right)": "-2px",
+		"placement=left | placement=right": 0
 	},
 	right: {
 		"": "auto",
-		after: "-2px"
+		"after & !(placement=left | placement=right)": "-2px",
+		"placement=left | placement=right": 0
 	}
 } });
 const TabIndicatorElement = tasty({ styles: {
 	position: "absolute",
-	bottom: "0",
-	left: 0,
-	height: "$tab-indicator-size",
+	bottom: {
+		"": "0",
+		"placement=bottom | placement=left | placement=right": "auto"
+	},
+	top: {
+		"": "auto",
+		"placement=bottom": "0"
+	},
+	left: {
+		"": "auto",
+		"placement=right": "0"
+	},
+	right: {
+		"": "auto",
+		"placement=left": "0"
+	},
+	height: {
+		"": "$tab-indicator-size",
+		"placement=left | placement=right": "auto"
+	},
+	width: {
+		"": "auto",
+		"placement=left | placement=right": "$tab-indicator-size"
+	},
 	fill: "#primary",
-	transition: "left $tab-transition ease-in-out, width $tab-transition ease-in-out",
+	transition: "left $tab-transition ease-in-out, width $tab-transition ease-in-out, top $tab-transition ease-in-out, height $tab-transition ease-in-out",
 	pointerEvents: "none"
 } });
 const TabPanelElement = tasty({

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 '@tenphi/tasty';\n\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': '#surface-4',\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: '#disabled-surface-text',\n    },\n    fill: {\n      '': '#clear',\n      'hovered & !type=narrow': '#dark.03',\n      'type=file': '#surface-3',\n      'type=file & hovered': '#surface-3.5',\n      'type=radio & hovered': '#surface.5',\n      '(type=file | type=radio) & selected': '#surface',\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    placeContent: {\n      // extend\n      'type=radio': 'center',\n    },\n    gridTemplate: {\n      // extend\n      'type=radio':\n        '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\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"],"mappings":"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"}
+{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container — flex wrapper holding the tab Bar and the panels.\n// `placement` mod drives `flex-direction` so DOM order stays \"bar then panels\"\n// and visual order is controlled with `column / column-reverse / row / row-reverse`.\n// =============================================================================\n\nexport const TabsElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: {\n      '': 'column',\n      'placement=bottom': 'column-reverse',\n      'placement=left': 'row',\n      'placement=right': 'row-reverse',\n    },\n    // Participate in parent flex layouts; allow shrinking on both axes so we\n    // never force the parent into overflow. The Bar keeps `flex-shrink: 0`,\n    // which makes the practical minimum of the wrapper along the main axis\n    // equal to the tablist's intrinsic size.\n    flexShrink: 1,\n    flexGrow: 1,\n    width: 'min 0',\n    height: 'min 0',\n    overflow: 'visible',\n\n    // ============================================\n    // Bar — the tab strip (Prefix + ScrollWrapper + Suffix).\n    // ============================================\n    Bar: {\n      $: '>',\n      display: 'flex',\n      flow: {\n        '': 'row',\n        'placement=left | placement=right': 'column',\n      },\n      placeItems: {\n        '': 'end stretch',\n        'placement=bottom': 'start stretch',\n        'placement=left': 'stretch end',\n        'placement=right': 'stretch start',\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        '(type=default | type=file | type=narrow) & has-panels & placement=bottom':\n          'top',\n        '(type=default | type=file | type=narrow) & has-panels & placement=left':\n          'right',\n        '(type=default | type=file | type=narrow) & has-panels & placement=right':\n          'left',\n      },\n      // Bar sizing — always follow the outer wrapper along the main axis so\n      // `width` / `height` props on `<Tabs>` apply to the strip as they did\n      // before the wrapper was introduced.\n      // - horizontal placements: main-axis = wrapper width  (100%), cross-axis intrinsic (auto)\n      // - vertical   placements: main-axis = wrapper height (100%), cross-axis intrinsic (auto / max-content for radio)\n      width: {\n        '': '100%',\n        'placement=left | placement=right': 'auto',\n        'type=radio & (placement=left | placement=right)': 'max-content',\n      },\n      height: {\n        '': 'auto',\n        'placement=left | placement=right': '100%',\n        'type=radio & (placement=left | placement=right)': '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': '#surface-4',\n      },\n      // Never let the Bar shrink/grow within the outer wrapper — this is what\n      // gives the wrapper its effective \"tablist-size minimum\" on the main axis.\n      flexShrink: 0,\n      flexGrow: 0,\n\n      $transition: '$tab-transition',\n      '$tab-indicator-size': {\n        '': '2bw',\n        'size=large': '1ow',\n      },\n    },\n\n    // ============================================\n    // Prefix — slot before the scroll area.\n    // ============================================\n    Prefix: {\n      $: '> Bar >',\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        'type=default & (placement=left | placement=right)': '1x .5x 0 .5x',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'right',\n        'type=file & (placement=left | placement=right)': 'bottom',\n      },\n    },\n\n    // ============================================\n    // Suffix — slot after the scroll area.\n    // ============================================\n    Suffix: {\n      $: '> Bar >',\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        'type=default & (placement=left | placement=right)': '0 .5x 1x .5x',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'left',\n        'type=file & (placement=left | placement=right)': 'top',\n      },\n    },\n\n    // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n    ScrollWrapper: {\n      $: '> Bar >',\n      position: 'relative',\n      display: 'flex',\n      flexGrow: 1,\n      flexShrink: 1,\n      width: {\n        '': 'min 0',\n        'placement=left | placement=right': 'auto',\n      },\n      height: {\n        '': 'auto',\n        'placement=left | placement=right': 'min 0',\n      },\n      overflow: {\n        '': 'hidden',\n        'type=radio': 'visible',\n      },\n    },\n\n    Scroll: {\n      $: '> Bar > ScrollWrapper >',\n      position: 'relative',\n      display: 'block',\n      overflow: {\n        '': 'auto hidden',\n        'placement=left | placement=right': 'hidden auto',\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      // Multi-group fade with axis-neutral color tokens for smooth transitions.\n      // Direction flips based on placement.\n      fade: {\n        '': '2x left #tabs-fade-start #black, 2x right #tabs-fade-end #black',\n        'placement=left | placement=right':\n          '2x top #tabs-fade-start #black, 2x bottom #tabs-fade-end #black',\n      },\n      // ##name outputs --name-color (literal CSS property name)\n      transition:\n        '##tabs-fade-start $tab-transition ease-in, ##tabs-fade-end $tab-transition ease-in',\n\n      // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n      '#tabs-fade-start': {\n        '': 'rgb(0 0 0 / 1)',\n        'fade-start': 'rgb(0 0 0 / 0)',\n      },\n      '#tabs-fade-end': {\n        '': 'rgb(0 0 0 / 1)',\n        'fade-end': 'rgb(0 0 0 / 0)',\n      },\n    },\n\n    TabList: {\n      $: '> Bar > ScrollWrapper > Scroll >',\n      position: 'relative',\n      display: 'grid',\n      // `border-box` is required because we set `width: 100%` for vertical\n      // placements AND apply padding. With the default `content-box`, the\n      // TabList's outer box would be `100% + padding × 2` and overflow Scroll\n      // horizontally — and the side selection indicator (positioned at\n      // `right: 0` / `left: 0` of TabList) would land in that overflow region\n      // and get clipped by Scroll's `overflow-x: hidden`.\n      boxSizing: 'border-box',\n      gridAutoFlow: {\n        '': 'column',\n        'placement=left | placement=right': 'row',\n      },\n      gridAutoColumns: {\n        '': 'auto',\n        'type=radio': '1fr',\n      },\n      gridAutoRows: {\n        '': 'auto',\n        'type=radio & (placement=left | placement=right)': '1fr',\n      },\n      gap: {\n        '': 0,\n        'type=default': '1x',\n        'type=narrow': '2x',\n        'type=radio': '.5x',\n        // Tabs stack vertically — collapse the gap so the strip reads as a\n        // single column. `narrow` is coerced to `default` in vertical, but we\n        // keep the rule defensive in case the styled element is consumed\n        // directly with a `type=narrow` mod set.\n        '(type=default | type=narrow) & (placement=left | placement=right)':\n          '1bw',\n      },\n      placeContent: 'start',\n      overflow: 'visible',\n      width: {\n        '': 'max-content',\n        'type=radio': '100%',\n        'placement=left | placement=right': '100%',\n      },\n      height: {\n        '': 'auto',\n        'placement=left | placement=right': 'max-content',\n      },\n      // For vertical default/narrow we apply `$tablist-padding` on ALL sides\n      // (instead of only the parallel axis) so the breathing room around the\n      // tabs and the selection indicator can be tuned via the `tabListPadding`\n      // prop — the same prop that controls horizontal start/end padding.\n      padding: {\n        '': '0 $tablist-padding',\n        'placement=left | placement=right': '$tablist-padding 0',\n        '(type=default | type=narrow) & (placement=left | placement=right)':\n          '$tablist-padding',\n      },\n\n      // Default `$tablist-padding` per type. Vertical default/narrow gets the\n      // smaller `.5x` default since it applies to all four sides; the\n      // `tabListPadding` prop overrides this via inline CSS variable.\n      '$tablist-padding': {\n        '': '0',\n        'type=default | type=narrow': '1x',\n        '(type=default | type=narrow) & (placement=left | placement=right)':\n          '.5x',\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 tiny scrollbar — positioned relative to ScrollWrapper. Switches\n    // edges and dimensions based on placement; the driving CSS custom\n    // properties come from `useTinyScrollbar.handleHStyle` / `handleVStyle`.\n    Scrollbar: {\n      $: '> Bar > ScrollWrapper >',\n      position: 'absolute',\n      bottom: {\n        '': '1px',\n        'placement=left | placement=right': 'auto',\n      },\n      top: {\n        '': 'auto',\n        'placement=left | placement=right': '$scrollbar-v-top',\n      },\n      left: {\n        '': '$scrollbar-h-left',\n        'placement=left | placement=right': 'auto',\n      },\n      right: {\n        '': 'auto',\n        'placement=left | placement=right': '1px',\n      },\n      height: {\n        '': '1ow',\n        'placement=left | placement=right': '$scrollbar-v-height',\n      },\n      width: {\n        '': '$scrollbar-h-width',\n        'placement=left | placement=right': '1ow',\n      },\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      'type=narrow & placement=bottom': 'bottom',\n      'type=narrow & placement=left': 'left',\n      'type=narrow & placement=right': 'right',\n    },\n    color: {\n      '': '#dark-02',\n      'type=narrow & (hovered & !selected)': '#primary-text',\n      '(type=default | type=narrow) & selected': '#primary-text',\n      disabled: '#disabled-surface-text',\n    },\n    fill: {\n      '': '#clear',\n      'hovered & !type=narrow': '#dark.03',\n      'type=file': '#surface-3',\n      'type=file & hovered': '#surface-3.5',\n      'type=radio & hovered': '#surface.5',\n      '(type=file | type=radio) & selected': '#surface',\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    outline: 'none',\n    placeContent: {\n      // extend\n      'type=radio': 'center',\n    },\n    gridTemplate: {\n      // extend\n      'type=radio':\n        '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n    },\n    // File-type selection indicator: an inset shadow on the edge that faces\n    // the panel area. Flips with placement so the highlight always sits on\n    // the edge adjacent to the content.\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 & selected & placement=bottom':\n        'inset 0 $tab-indicator-size 0 0 #primary',\n      'type=file & selected & placement=left':\n        'inset (-1 * $tab-indicator-size) 0 0 0 #primary',\n      'type=file & selected & placement=right':\n        'inset $tab-indicator-size 0 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      // Horizontal strip: .5x top/bottom creates space between the tab and the\n      // bottom-edge indicator (which sits at `bottom: 0` of TabList).\n      'type=default': '.5x 0',\n      // Vertical strip: the breathing room around the tabs and the gap from\n      // the side indicator is provided by the TabList's own `.5x` padding —\n      // don't add per-tab horizontal margin on top of it.\n      'type=default & (placement=left | placement=right)': 0,\n    },\n    border: {\n      '': 0,\n      'type=file': 'right',\n      'type=file & (placement=left | placement=right)': 'bottom',\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// Geometry flips based on placement: a vertical bar between horizontal tabs,\n// a horizontal bar between vertical tabs. `before`/`after` mods come from\n// `TabDropIndicator` and decide which edge inset is applied.\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: {\n      '': '.5x',\n      'placement=left | placement=right': 'auto',\n    },\n    height: {\n      '': 'auto',\n      'placement=left | placement=right': '.5x',\n    },\n    top: {\n      '': 0,\n      'placement=left | placement=right': 'auto',\n      '(placement=left | placement=right) & before': '-2px',\n    },\n    bottom: {\n      '': 0,\n      'placement=left | placement=right': 'auto',\n      '(placement=left | placement=right) & after': '-2px',\n    },\n    left: {\n      '': 'auto',\n      'before & !(placement=left | placement=right)': '-2px',\n      'placement=left | placement=right': 0,\n    },\n    right: {\n      '': 'auto',\n      'after & !(placement=left | placement=right)': '-2px',\n      'placement=left | placement=right': 0,\n    },\n  },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default/narrow type)\n// Position flips with placement; the dynamic axis dimensions (left/width for\n// horizontal, top/height for vertical) are populated via inline `style` from\n// `useTabIndicator` in `Tabs.tsx`.\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n  styles: {\n    position: 'absolute',\n    bottom: {\n      '': '0',\n      'placement=bottom | placement=left | placement=right': 'auto',\n    },\n    top: {\n      '': 'auto',\n      'placement=bottom': '0',\n    },\n    left: {\n      '': 'auto',\n      'placement=right': '0',\n    },\n    right: {\n      '': 'auto',\n      'placement=left': '0',\n    },\n    height: {\n      '': '$tab-indicator-size',\n      'placement=left | placement=right': 'auto',\n    },\n    width: {\n      '': 'auto',\n      'placement=left | placement=right': '$tab-indicator-size',\n    },\n    fill: '#primary',\n    // Transition all four properties unconditionally — only the two relevant\n    // ones change per render, the others stay constant.\n    transition:\n      'left $tab-transition ease-in-out, width $tab-transition ease-in-out, top $tab-transition ease-in-out, height $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"],"mappings":"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"}

package/dist/components/navigation/Tabs/types.d.ts

@@ -11,6 +11,12 @@ import { ReactNode } from "react";
 //#region src/components/navigation/Tabs/types.d.ts
 /** Visual appearance type for tabs */
 type TabType = 'default' | 'narrow' | 'file' | 'radio';
+/**
+ * Where the tab bar sits relative to its panels.
+ * - `'top'` / `'bottom'` keep the bar horizontal.
+ * - `'left'` / `'right'` switch it to a vertical strip.
+ */
+type TabPlacement = 'top' | 'bottom' | 'left' | 'right';
 /** Position for TabPicker and scroll arrows */
 type TabsActionPosition = 'prefix' | 'suffix';
 /**
@@ -44,8 +50,6 @@ interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {
    * mapped to Item button sizes medium (32px) and xsmall (24px).
    */
   size?: TabSize;
-  /** Visual appearance type. */
-  type?: TabType;
   /** Whether to show actions only on hover. */
   autoHideActions?: boolean;
 }
@@ -65,6 +69,14 @@ interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehaviorProps {
    * @default 'default'
    */
   type?: TabType;
+  /**
+   * Where the tab bar sits relative to its panels.
+   * `'top'` / `'bottom'` keep the bar horizontal; `'left'` / `'right'`
+   * switch it to a vertical strip. The selection indicator, scroll behavior,
+   * fades, and per-type visuals all adapt automatically.
+   * @default 'top'
+   */
+  placement?: TabPlacement;
   /**
    * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.
    * Radio type supports 'large' (default, 40px) and 'medium' (32px),
@@ -199,6 +211,8 @@ interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehaviorProps {
    * Sets horizontal padding only (e.g., "2x" → padding: "0 2x").
    */
   tabListPadding?: string;
+  /** Custom tasty styles for the tab bar (Bar sub-element). */
+  barStyles?: Styles;
   /** Custom tasty styles for the TabList sub-element. */
   tabListStyles?: Styles;
   /** Custom tasty styles for the Prefix sub-element. */

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 //#region src/components/navigation/Tabs/types.ts
 /**
 * Size mapping for radio type tabs.