@cube-dev/ui-kit 0.204.0 → 0.206.0

package/dist/components/navigation/Tabs/segmented-styles.js

@@ -0,0 +1,53 @@
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+//#region src/components/navigation/Tabs/segmented-styles.ts
+/**
+* The track: the pill the segments sit on. Applied to `Tabs`' Bar and to the
+* `RadioGroup` element. The segments read `$transition` from it, so hover and
+* selection move at the tab speed in both.
+*/
+const SEGMENTED_TRACK_STYLES = {
+	padding: { segmented: ".5x" },
+	radius: { segmented: "1cr" },
+	fill: { segmented: "#surface-4" },
+	$transition: { segmented: "$tab-transition" }
+};
+/**
+* The space between segments, on the element that lays them out: `Tabs`'
+* TabList, and the `RadioGroup` element itself.
+*/
+const SEGMENTED_LIST_STYLES = { gap: { segmented: ".5x" } };
+/**
+* One segment: a tab, or a radio button. Both are an `Item` of type `clear`,
+* sized by `RADIO_SIZE_MAP`, so `size=xsmall` is the medium control.
+*
+* The keyboard focus ring sits inside the segment, so it reads on the white
+* chip as well as on the track. A segment shows it only with both `focused`
+* and `focus-visible`.
+*/
+const SEGMENTED_SEGMENT_STYLES = {
+	radius: { segmented: true },
+	preset: {
+		segmented: "t3m",
+		"segmented & size=xsmall": "t4"
+	},
+	color: {
+		segmented: "#surface-text-soft",
+		"segmented & disabled": "#disabled-surface-text"
+	},
+	fill: {
+		segmented: "#clear",
+		"segmented & hovered": "#surface.5",
+		"segmented & selected": "#surface"
+	},
+	shadow: {
+		"segmented & focused & focus-visible": "inset 0 0 0 $ring-width #primary-accent-text",
+		"segmented & selected": "$item-shadow",
+		"segmented & selected & focused & focus-visible": "$item-shadow, inset 0 0 0 $ring-width #primary-accent-text"
+	},
+	outline: { segmented: "none" },
+	placeContent: { segmented: "center" }
+};
+//#endregion
+export { SEGMENTED_LIST_STYLES, SEGMENTED_SEGMENT_STYLES, SEGMENTED_TRACK_STYLES };
+
+//# sourceMappingURL=segmented-styles.js.map

package/dist/components/navigation/Tabs/segmented-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-styles.js","names":["Styles","SEGMENTED_TRACK_STYLES","padding","segmented","radius","fill","$transition","SEGMENTED_LIST_STYLES","gap","SEGMENTED_SEGMENT_STYLES","preset","color","shadow","outline","placeContent"],"sources":["../../../../src/components/navigation/Tabs/segmented-styles.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\n\n// =============================================================================\n// Segmented control look, shared by `Tabs type=\"radio\"` and `Radio.Tabs`\n// (`RadioGroup type=\"tabs\"`). They keep their own semantics (tablist / tab vs\n// radiogroup / radio) and keyboard behaviour, but render one control: a track\n// with segments on it. Tabs is the reference.\n//\n// Every state here is keyed on the `segmented` mod. Tabs sets it on its root\n// and each tab for `type=\"radio\"`; RadioGroup and Radio set it for\n// `type=\"tabs\"`.\n//\n// The maps have no `''` key, so `mergeStyles(styles, FRAGMENT)` appends them\n// to the component's own maps and they win for a segmented control only. A\n// state the component must keep above them (Tabs' `drop-pending`) is moved\n// after them with `'@inherit'`.\n//\n// `segmented.browser.test.tsx` renders both controls and fails when their\n// computed styles part.\n// =============================================================================\n\n/**\n * The track: the pill the segments sit on. Applied to `Tabs`' Bar and to the\n * `RadioGroup` element. The segments read `$transition` from it, so hover and\n * selection move at the tab speed in both.\n */\nexport const SEGMENTED_TRACK_STYLES: Styles = {\n  // oxlint-disable-next-line tasty/require-default-state -- extends the track's own map (see the header)\n  padding: { segmented: '.5x' },\n  // oxlint-disable-next-line tasty/require-default-state -- extends the track's own map (see the header)\n  radius: { segmented: '1cr' },\n  // oxlint-disable-next-line tasty/require-default-state -- extends the track's own map (see the header)\n  fill: { segmented: '#surface-4' },\n  $transition: { segmented: '$tab-transition' },\n};\n\n/**\n * The space between segments, on the element that lays them out: `Tabs`'\n * TabList, and the `RadioGroup` element itself.\n */\nexport const SEGMENTED_LIST_STYLES: Styles = {\n  // oxlint-disable-next-line tasty/require-default-state -- extends the list's own map (see the header)\n  gap: { segmented: '.5x' },\n};\n\n/**\n * One segment: a tab, or a radio button. Both are an `Item` of type `clear`,\n * sized by `RADIO_SIZE_MAP`, so `size=xsmall` is the medium control.\n *\n * The keyboard focus ring sits inside the segment, so it reads on the white\n * chip as well as on the track. A segment shows it only with both `focused`\n * and `focus-visible`.\n */\nexport const SEGMENTED_SEGMENT_STYLES: Styles = {\n  // oxlint-disable-next-line tasty/require-default-state -- extends the segment's own map (see the header)\n  radius: { segmented: true },\n  // oxlint-disable-next-line tasty/require-default-state -- extends the segment's own map (see the header)\n  preset: {\n    segmented: 't3m',\n    'segmented & size=xsmall': 't4',\n  },\n  // The selected label stays soft: the chip marks the selection, not the text.\n  // oxlint-disable-next-line tasty/require-default-state -- extends the segment's own map (see the header)\n  color: {\n    segmented: '#surface-text-soft',\n    'segmented & disabled': '#disabled-surface-text',\n  },\n  // A disabled control keeps its selected chip, so it still says which option\n  // is chosen; only the label fades (CUB-3912).\n  // oxlint-disable-next-line tasty/require-default-state -- extends the segment's own map (see the header)\n  fill: {\n    segmented: '#clear',\n    'segmented & hovered': '#surface.5',\n    'segmented & selected': '#surface',\n  },\n  // oxlint-disable-next-line tasty/require-default-state -- extends the segment's own map (see the header)\n  shadow: {\n    'segmented & focused & focus-visible':\n      'inset 0 0 0 $ring-width #primary-accent-text',\n    'segmented & selected': '$item-shadow',\n    'segmented & selected & focused & focus-visible':\n      '$item-shadow, inset 0 0 0 $ring-width #primary-accent-text',\n  },\n  // The ring is the inset shadow above, not the `clear` item's outline.\n  // oxlint-disable-next-line tasty/require-default-state -- extends the segment's own map (see the header)\n  outline: { segmented: 'none' },\n  // oxlint-disable-next-line tasty/require-default-state -- extends the segment's own map (see the header)\n  placeContent: { segmented: 'center' },\n};\n"],"mappings":";;;;;;;AA0BA,MAAaC,yBAAiC;CAE5CC,SAAS,EAAEC,WAAW,MAAM;CAE5BC,QAAQ,EAAED,WAAW,MAAM;CAE3BE,MAAM,EAAEF,WAAW,aAAa;CAChCG,aAAa,EAAEH,WAAW,kBAAkB;AAC9C;;;;;AAMA,MAAaI,wBAAgC,EAE3CC,KAAK,EAAEL,WAAW,MAAM,EAC1B;;;;;;;;;AAUA,MAAaM,2BAAmC;CAE9CL,QAAQ,EAAED,WAAW,KAAK;CAE1BO,QAAQ;EACNP,WAAW;EACX,2BAA2B;CAC7B;CAGAQ,OAAO;EACLR,WAAW;EACX,wBAAwB;CAC1B;CAIAE,MAAM;EACJF,WAAW;EACX,uBAAuB;EACvB,wBAAwB;CAC1B;CAEAS,QAAQ;EACN,uCACE;EACF,wBAAwB;EACxB,kDACE;CACJ;CAGAC,SAAS,EAAEV,WAAW,OAAO;CAE7BW,cAAc,EAAEX,WAAW,SAAS;AACtC"}

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

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { Item as _Item } from "../../content/Item/Item.js";
-import { tasty } from "@tenphi/tasty";
+import { SEGMENTED_LIST_STYLES, SEGMENTED_SEGMENT_STYLES, SEGMENTED_TRACK_STYLES } from "./segmented-styles.js";
+import { mergeStyles, tasty } from "@tenphi/tasty";
 //#region src/components/navigation/Tabs/styled.ts
 const TabsElement = tasty({ styles: {
 	display: "flex",
@@ -21,7 +22,7 @@ const TabsElement = tasty({ styles: {
 	width: "min 0",
 	height: "min 0",
 	overflow: "visible",
-	Bar: {
+	Bar: mergeStyles({
 		$: ">",
 		display: "flex",
 		flow: {
@@ -54,18 +55,9 @@ const TabsElement = tasty({ styles: {
 			"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"
-		},
+		padding: 0,
+		radius: 0,
+		fill: "#clear",
 		flexShrink: 0,
 		flexGrow: 0,
 		$transition: "$tab-transition",
@@ -73,7 +65,7 @@ const TabsElement = tasty({ styles: {
 			"": "2px",
 			"size=large": "1ow"
 		}
-	},
+	}, SEGMENTED_TRACK_STYLES),
 	Prefix: {
 		$: "> Bar >",
 		display: "flex",
@@ -171,7 +163,7 @@ const TabsElement = tasty({ styles: {
 			"fade-end": "#black.0"
 		}
 	},
-	TabList: {
+	TabList: mergeStyles({
 		$: "> Bar > ScrollWrapper > Scroll >",
 		position: "relative",
 		display: "grid",
@@ -192,7 +184,6 @@ const TabsElement = tasty({ styles: {
 			"": 0,
 			"type=default": "1x",
 			"type=narrow": "2x",
-			"type=radio": ".5x",
 			"(type=default | type=narrow) & (placement=left | placement=right)": "$item-gap"
 		},
 		placeContent: "start",
@@ -216,7 +207,7 @@ const TabsElement = tasty({ styles: {
 			"type=default | type=narrow": "1x",
 			"(type=default | type=narrow) & (placement=left | placement=right)": ".5x"
 		}
-	},
+	}, SEGMENTED_LIST_STYLES),
 	$size: {
 		"": "$size-md",
 		"size=xsmall": "$size-xs",
@@ -265,10 +256,10 @@ const TabsElement = tasty({ styles: {
 } });
 const TabElement = tasty(_Item, {
 	as: "button",
-	styles: {
+	styles: mergeStyles({
 		radius: {
 			"": false,
-			"type=radio | type=default": true,
+			"type=default": true,
 			"type=narrow": "top",
 			"type=narrow & placement=bottom": "bottom",
 			"type=narrow & placement=left": "left",
@@ -285,8 +276,7 @@ const TabElement = tasty(_Item, {
 			"hovered & !type=narrow": "#surface-text.03",
 			"type=file": "#surface-3",
 			"type=file & hovered": "#surface-3.5",
-			"type=radio & hovered": "#surface.5",
-			"(type=file | type=radio) & selected": "#surface",
+			"type=file & selected": "#surface",
 			"drop-pending": "#primary-accent-surface.10"
 		},
 		border: {
@@ -300,12 +290,9 @@ const TabElement = tasty(_Item, {
 		shadow: {
 			"": "$selection-shadow",
 			"focused & focus-visible": "inset 0 0 0 $ring-width #primary-accent-text, $selection-shadow",
-			editing: "inset 0 0 0 $ring-width #primary-accent-text, $selection-shadow",
-			"type=radio & selected": "$item-shadow",
-			"type=radio & selected & focused & focus-visible": "$item-shadow, inset 0 0 0 $ring-width #primary-accent-text"
+			editing: "inset 0 0 0 $ring-width #primary-accent-text, $selection-shadow"
 		},
 		outline: "none",
-		placeContent: { "type=radio": "center" },
 		gridTemplate: { "type=radio": "\"icon prefix label suffix rightIcon actions\" auto / max-content max-content minmax(0, max-content) max-content max-content max-content" },
 		"$selection-shadow": {
 			"": "inset 0 0 0 0 #primary-accent-surface",
@@ -331,7 +318,7 @@ const TabElement = tasty(_Item, {
 			"type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon": "center"
 		} },
 		Actions: { transition: false }
-	}
+	}, SEGMENTED_SEGMENT_STYLES, { fill: { "drop-pending": "@inherit" } })
 });
 const TabContainer = tasty({ styles: {
 	position: "relative",

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["tasty","Item","TabsElement","styles","display","flow","flexShrink","flexGrow","width","height","overflow","Bar","$","placeItems","border","boxSizing","padding","radius","fill","$transition","Prefix","placeContent","placeSelf","gap","Suffix","ScrollWrapper","position","Scroll","scrollbar","margin","fade","transition","TabList","gridAutoColumns","gridAutoRows","$size","Scrollbar","bottom","top","left","right","opacity","pointerEvents","TabElement","as","color","disabled","preset","shadow","editing","outline","gridTemplate","Label","Actions","TabContainer","cursor","draggable","dragging","DropIndicatorElement","zIndex","TabIndicatorElement","TabPanelElement","hide","active","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. When there are no panels the\n    // wrapper has only the Bar inside it, so we lock its sizing to the Bar's\n    // intrinsic size — matching the pre-wrapper behavior of a panel-less Tabs.\n    flexShrink: { '': 0, 'has-panels': 1 },\n    flexGrow: { '': 0, 'has-panels': 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      // `border-box` keeps the radio padding inside that 100%. Without a global\n      // border-box reset in the app, the pill would otherwise paint `1x` past\n      // the wrapper and into the gap before its sibling.\n      boxSizing: 'border-box',\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      // The indicator line's thickness, in device pixels.\n      '$tab-indicator-size': {\n        '': '2px',\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        '': '#black',\n        'fade-start': '#black.0',\n      },\n      '#tabs-fade-end': {\n        '': '#black',\n        'fade-end': '#black.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      flow: {\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          '$item-gap',\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.handleHTokens` / `handleVTokens`.\n    Scrollbar: {\n      $: '> Bar > ScrollWrapper >',\n      // It sits a device pixel in from the edge.\n      '$scrollbar-inset': '1px',\n      position: 'absolute',\n      bottom: {\n        '': '$scrollbar-inset',\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': '$scrollbar-inset',\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: '#surface-text.35',\n      opacity: {\n        '': 0,\n        'focused | scrolling': 1,\n      },\n      transition: 'opacity $scrollbar-transition',\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    // Tab colors read current tokens, not the legacy aliases that point at them\n    // (`#dark-02`, `#primary-text`, `#primary`). Root resolves an alias once, on\n    // the page root, so a caller re-declaring the current token on `Tabs` would\n    // never reach it. The contract is under \"Theming\" in `Tabs.docs.mdx`.\n    color: {\n      '': '#surface-text-soft',\n      'type=narrow & (hovered & !selected)': '#primary-accent-text',\n      '(type=default | type=narrow) & selected': '#primary-accent-text',\n      disabled: '#disabled-surface-text',\n    },\n    fill: {\n      '': '#clear',\n      'hovered & !type=narrow': '#surface-text.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      // Spring-load hint: a widget is hovering this tab and it is about to open.\n      'drop-pending': '#primary-accent-surface.10',\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 $ring-width #primary-accent-text, $selection-shadow',\n      editing:\n        'inset 0 0 0 $ring-width #primary-accent-text, $selection-shadow',\n      'type=radio & selected': '$item-shadow',\n      'type=radio & selected & focused & focus-visible':\n        '$item-shadow, inset 0 0 0 $ring-width #primary-accent-text',\n    },\n    outline: 'none',\n    placeContent: {\n      // extend\n      'type=radio': 'center',\n    },\n    gridTemplate: {\n      // extend\n      // Sized by content like a radio button, but the label column keeps a\n      // zero minimum (as `Item`'s `1sf` does), so a tab given less room than\n      // its title truncates it — and gets the auto tooltip — instead of\n      // spilling the title out of the tab.\n      'type=radio':\n        '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content minmax(0, 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-accent-surface',\n      'type=file & selected':\n        'inset 0 (-1 * $tab-indicator-size) 0 0 #primary-accent-surface',\n      'type=file & selected & placement=bottom':\n        'inset 0 $tab-indicator-size 0 0 #primary-accent-surface',\n      'type=file & selected & placement=left':\n        'inset (-1 * $tab-indicator-size) 0 0 0 #primary-accent-surface',\n      'type=file & selected & placement=right':\n        'inset $tab-indicator-size 0 0 0 #primary-accent-surface',\n      '!type=file': 'inset 0 0 0 0 #primary-accent-surface.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});\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-accent-surface',\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': '-.25x',\n    },\n    bottom: {\n      '': 0,\n      'placement=left | placement=right': 'auto',\n      '(placement=left | placement=right) & after': '-.25x',\n    },\n    left: {\n      '': 'auto',\n      'before & !(placement=left | placement=right)': '-.25x',\n      'placement=left | placement=right': 0,\n    },\n    right: {\n      '': 'auto',\n      'after & !(placement=left | placement=right)': '-.25x',\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 measured offset and length along the tab\n// axis arrive as `$indicator-start` / `$indicator-size` tokens from\n// `useTabIndicator` in `Tabs.tsx` (left/width for horizontal, top/height for\n// vertical).\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      'placement=left | placement=right': '$indicator-start',\n    },\n    left: {\n      '': '$indicator-start',\n      'placement=left': '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': '$indicator-size',\n    },\n    width: {\n      '': '$indicator-size',\n      'placement=left | placement=right': '$tab-indicator-size',\n    },\n    fill: '#primary-accent-surface',\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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"}
+{"version":3,"file":"styled.js","names":["mergeStyles","tasty","Item","SEGMENTED_LIST_STYLES","SEGMENTED_SEGMENT_STYLES","SEGMENTED_TRACK_STYLES","TabsElement","styles","display","flow","flexShrink","flexGrow","width","height","overflow","Bar","$","placeItems","border","boxSizing","padding","radius","fill","$transition","Prefix","placeContent","placeSelf","gap","Suffix","ScrollWrapper","position","Scroll","scrollbar","margin","fade","transition","TabList","gridAutoColumns","gridAutoRows","$size","Scrollbar","bottom","top","left","right","opacity","pointerEvents","TabElement","as","color","disabled","preset","shadow","editing","outline","gridTemplate","Label","Actions","TabContainer","cursor","draggable","dragging","DropIndicatorElement","zIndex","TabIndicatorElement","TabPanelElement","hide","active","Item"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { mergeStyles, tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\nimport {\n  SEGMENTED_LIST_STYLES,\n  SEGMENTED_SEGMENT_STYLES,\n  SEGMENTED_TRACK_STYLES,\n} from './segmented-styles';\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. When there are no panels the\n    // wrapper has only the Bar inside it, so we lock its sizing to the Bar's\n    // intrinsic size — matching the pre-wrapper behavior of a panel-less Tabs.\n    flexShrink: { '': 0, 'has-panels': 1 },\n    flexGrow: { '': 0, 'has-panels': 1 },\n    width: 'min 0',\n    height: 'min 0',\n    overflow: 'visible',\n\n    // ============================================\n    // Bar — the tab strip (Prefix + ScrollWrapper + Suffix). For the radio\n    // type it is the segmented control's track (`segmented-styles.ts`).\n    // ============================================\n    Bar: mergeStyles(\n      {\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        // `border-box` keeps the radio padding inside that 100%. Without a global\n        // border-box reset in the app, the pill would otherwise paint `1x` past\n        // the wrapper and into the gap before its sibling.\n        boxSizing: 'border-box',\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: 0,\n        radius: 0,\n        fill: '#clear',\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        // The indicator line's thickness, in device pixels.\n        '$tab-indicator-size': {\n          '': '2px',\n          'size=large': '1ow',\n        },\n      },\n      SEGMENTED_TRACK_STYLES,\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        '': '#black',\n        'fade-start': '#black.0',\n      },\n      '#tabs-fade-end': {\n        '': '#black',\n        'fade-end': '#black.0',\n      },\n    },\n\n    TabList: mergeStyles(\n      {\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        flow: {\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          // 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            '$item-gap',\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      SEGMENTED_LIST_STYLES,\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.handleHTokens` / `handleVTokens`.\n    Scrollbar: {\n      $: '> Bar > ScrollWrapper >',\n      // It sits a device pixel in from the edge.\n      '$scrollbar-inset': '1px',\n      position: 'absolute',\n      bottom: {\n        '': '$scrollbar-inset',\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': '$scrollbar-inset',\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: '#surface-text.35',\n      opacity: {\n        '': 0,\n        'focused | scrolling': 1,\n      },\n      transition: 'opacity $scrollbar-transition',\n      pointerEvents: 'none',\n    },\n  },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\n// A radio tab is a segment of the control `Radio.Tabs` shares: its look comes\n// from `segmented-styles.ts`, merged in after the tab's own styles.\nexport const TabElement = tasty(Item, {\n  as: 'button',\n  styles: mergeStyles(\n    {\n      radius: {\n        '': false,\n        '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      // Tab colors read current tokens, not the legacy aliases that point at them\n      // (`#dark-02`, `#primary-text`, `#primary`). Root resolves an alias once, on\n      // the page root, so a caller re-declaring the current token on `Tabs` would\n      // never reach it. The contract is under \"Theming\" in `Tabs.docs.mdx`.\n      color: {\n        '': '#surface-text-soft',\n        'type=narrow & (hovered & !selected)': '#primary-accent-text',\n        '(type=default | type=narrow) & selected': '#primary-accent-text',\n        disabled: '#disabled-surface-text',\n      },\n      fill: {\n        '': '#clear',\n        'hovered & !type=narrow': '#surface-text.03',\n        'type=file': '#surface-3',\n        'type=file & hovered': '#surface-3.5',\n        'type=file & selected': '#surface',\n        // Spring-load hint: a widget is hovering this tab and it is about to open.\n        'drop-pending': '#primary-accent-surface.10',\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 $ring-width #primary-accent-text, $selection-shadow',\n        editing:\n          'inset 0 0 0 $ring-width #primary-accent-text, $selection-shadow',\n      },\n      outline: 'none',\n      // oxlint-disable-next-line tasty/require-default-state -- extends Item's own gridTemplate map\n      gridTemplate: {\n        // Sized by content like a radio button, but the label column keeps a\n        // zero minimum (as `Item`'s `1sf` does), so a tab given less room than\n        // its title truncates it — and gets the auto tooltip — instead of\n        // spilling the title out of the tab.\n        'type=radio':\n          '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content minmax(0, 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-accent-surface',\n        'type=file & selected':\n          'inset 0 (-1 * $tab-indicator-size) 0 0 #primary-accent-surface',\n        'type=file & selected & placement=bottom':\n          'inset 0 $tab-indicator-size 0 0 #primary-accent-surface',\n        'type=file & selected & placement=left':\n          'inset (-1 * $tab-indicator-size) 0 0 0 #primary-accent-surface',\n        'type=file & selected & placement=right':\n          'inset $tab-indicator-size 0 0 0 #primary-accent-surface',\n        '!type=file': 'inset 0 0 0 0 #primary-accent-surface.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    SEGMENTED_SEGMENT_STYLES,\n    // The spring-load hint stays above the segment's own fill.\n    { fill: { 'drop-pending': '@inherit' } },\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});\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-accent-surface',\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': '-.25x',\n    },\n    bottom: {\n      '': 0,\n      'placement=left | placement=right': 'auto',\n      '(placement=left | placement=right) & after': '-.25x',\n    },\n    left: {\n      '': 'auto',\n      'before & !(placement=left | placement=right)': '-.25x',\n      'placement=left | placement=right': 0,\n    },\n    right: {\n      '': 'auto',\n      'after & !(placement=left | placement=right)': '-.25x',\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 measured offset and length along the tab\n// axis arrive as `$indicator-start` / `$indicator-size` tokens from\n// `useTabIndicator` in `Tabs.tsx` (left/width for horizontal, top/height for\n// vertical).\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      'placement=left | placement=right': '$indicator-start',\n    },\n    left: {\n      '': '$indicator-start',\n      'placement=left': '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': '$indicator-size',\n    },\n    width: {\n      '': '$indicator-size',\n      'placement=left | placement=right': '$tab-indicator-size',\n    },\n    fill: '#primary-accent-surface',\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

@@ -45,8 +45,8 @@ type OmittedItemProps = 'id' | 'type' | 'size' | 'theme' | 'shape' | 'descriptio
 export interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {
   /**
    * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.
-   * Radio type supports 'large' (default, 40px) and 'medium' (32px),
-   * mapped to Item button sizes medium (32px) and xsmall (24px).
+   * Radio type supports 'medium' (default, 32px) and 'large' (40px),
+   * mapped to Item button sizes xsmall (24px) and medium (32px).
    */
   size?: TabSize;
   /** Whether to show actions only on hover. */
@@ -78,8 +78,8 @@ export interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehavior
   placement?: TabPlacement;
   /**
    * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.
-   * Radio type supports 'large' (default, 40px) and 'medium' (32px),
-   * mapped to Item button sizes medium (32px) and xsmall (24px).
+   * Radio type supports 'medium' (default, 32px) and 'large' (40px),
+   * mapped to Item button sizes xsmall (24px) and medium (32px).
    * @default 'medium'
    */
   size?: TabSize;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["BaseProps","OuterStyleProps","Styles","ReactNode","CubeItemActionProps","CubeMenuProps","CubeItemProps","TabType","TabPlacement","TabsActionPosition","TabSize","RADIO_SIZE_MAP","Record","medium","large","TabContextMenu","PanelBehaviorProps","prerender","keepMounted","QAProps","qa","qaVal","OmittedItemProps","TabStyleProps","Omit","size","autoHideActions","CacheKeyValue","CubeTabsProps","activeKey","defaultActiveKey","type","placement","label","prefix","suffix","onChange","key","onDelete","onTitleChange","newTitle","isEditable","menu","menuTriggerProps","Partial","menuProps","contextMenu","onAction","action","tabKey","styles","children","renderPanel","panelCacheKeys","isReorderable","keyOrder","onReorder","newOrder","showTabPicker","showScrollArrows","tabPickerPosition","scrollArrowsPosition","hideTabListScroll","tabListPadding","barStyles","tabListStyles","prefixStyles","suffixStyles","CubeTabProps","id","title","isDisabled","actions","CubeTabPanelProps","CubeTabListProps","ParsedTab","content","ParsedPanel"],"sources":["../../../../src/components/navigation/Tabs/types.ts"],"sourcesContent":["import type { BaseProps, OuterStyleProps, Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { CubeItemProps } from '../../content/Item';\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/** Visual appearance type for tabs */\nexport type TabType = 'default' | 'narrow' | 'file' | 'radio';\n\n/**\n * Where the tab bar sits relative to its panels.\n * - `'top'` / `'bottom'` keep the bar horizontal.\n * - `'left'` / `'right'` switch it to a vertical strip.\n */\nexport type TabPlacement = 'top' | 'bottom' | 'left' | 'right';\n\n/** Position for TabPicker and scroll arrows */\nexport type TabsActionPosition = 'prefix' | 'suffix';\n\n/**\n * Tab size options.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\nexport type TabSize = 'xsmall' | 'small' | 'medium' | 'large';\n\n/**\n * Size mapping for radio type tabs.\n * API sizes mapped to Item button sizes:\n * medium (default) -> xsmall (32px total), large -> medium (40px total).\n */\nexport const RADIO_SIZE_MAP: Record<'medium' | 'large', TabSize> = {\n  medium: 'xsmall',\n  large: 'medium',\n};\n\n/** How the tab `menu` is exposed alongside or instead of the overflow trigger. */\nexport type TabContextMenu = boolean | 'context-only';\n\n// =============================================================================\n// Shared Props Interfaces\n// =============================================================================\n\n/** Common props for panel rendering behavior */\nexport interface PanelBehaviorProps {\n  /** If true, panel is rendered but hidden when not active. */\n  prerender?: boolean;\n  /** If true, once visited the panel stays in DOM. */\n  keepMounted?: boolean;\n}\n\n/** Common props for QA attributes */\nexport interface QAProps {\n  /** QA selector attribute. */\n  qa?: string;\n  /** Additional QA value attribute. */\n  qaVal?: string;\n}\n\n// =============================================================================\n// Tab Style Props\n// =============================================================================\n\n/** Props from CubeItemProps that don't apply to Tab */\ntype OmittedItemProps =\n  | 'id' // Tab has its own id as Key type\n  | 'type' // Type is decided at the Tabs level, never per-tab\n  | 'size' // Tab has its own TabSize\n  | 'theme' // Tabs have internal theming\n  | 'shape' // Tabs have internal shape logic\n  | 'description' // Tabs don't have descriptions\n  | 'descriptionPlacement'\n  | 'descriptionProps'\n  | 'hotkeys' // Tabs have their own keyboard navigation\n  | 'keyboardShortcutProps'\n  | 'labelProps' // Tabs use title prop instead\n  | 'labelRef'\n  | 'level' // Tabs don't use heading levels\n  | 'highlight' // Tabs don't use highlighting\n  | 'highlightCaseSensitive'\n  | 'highlightStyles'\n  | 'variant' // Tabs have internal variant logic\n  | 'htmlType' // Tab is always a button\n  | 'isSelected' // Handled internally by state\n  | 'preserveActionsSpace' // Set internally in TabButton\n  | 'disableActionsFocus' // Not used in Tab\n  | 'actions' // Tab has its own actions definition\n  | 'autoHideActions' // Tab has its own autoHideActions\n  | 'insideWrapper' // Internal Item wrapper prop\n  | 'showActions' // Internal Item wrapper prop\n  | 'skipActionsWidthTransition'; // Internal Item wrapper prop\n\n/** Common styling props for tabs - inherits style props from CubeItemProps */\nexport interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   */\n  size?: TabSize;\n  /** Whether to show actions only on hover. */\n  autoHideActions?: boolean;\n}\n\n// =============================================================================\n// Component Props\n// =============================================================================\n\n/** Cache key type - primitives only for reliable comparison */\nexport type CacheKeyValue = string | number | boolean | null | undefined;\n\nexport interface CubeTabsProps\n  extends BaseProps, OuterStyleProps, PanelBehaviorProps {\n  /** Controlled active tab key. When provided, component is controlled. */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. */\n  defaultActiveKey?: string;\n  /**\n   * Visual appearance type for tabs.\n   * - `default` - Standard tabs with selection indicator below (default)\n   * - `narrow` - Same as default but with collapsed vertical padding on labels\n   * - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs\n   * - `radio` - Radio button style for tab selection\n   * @default 'default'\n   */\n  type?: TabType;\n  /**\n   * Where the tab bar sits relative to its panels.\n   * `'top'` / `'bottom'` keep the bar horizontal; `'left'` / `'right'`\n   * switch it to a vertical strip. The selection indicator, scroll behavior,\n   * fades, and per-type visuals all adapt automatically.\n   * @default 'top'\n   */\n  placement?: TabPlacement;\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   * @default 'medium'\n   */\n  size?: TabSize;\n  /** Accessible label for the tab list. */\n  label?: string;\n  /** Content rendered before the tab list. */\n  prefix?: ReactNode;\n  /** Content rendered after the tab list. */\n  suffix?: ReactNode;\n  /** Callback when active tab changes. */\n  onChange?: (key: string) => void;\n  /** Callback when tab delete button is clicked. Presence enables delete buttons. */\n  onDelete?: (key: string) => void;\n  /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */\n  onTitleChange?: (key: string, newTitle: string) => void;\n  /** Whether to show tab actions only on hover. Can be overridden per-tab. */\n  autoHideActions?: boolean;\n  /**\n   * Whether tabs are editable by default.\n   * Can be overridden per-tab via Tab's isEditable prop.\n   * @default false\n   */\n  isEditable?: boolean;\n  /**\n   * Default menu items for all tabs.\n   * Can be overridden per-tab via Tab's menu prop.\n   * Set to `null` on individual Tab to disable menu for that tab.\n   */\n  menu?: ReactNode;\n  /**\n   * Default props for the menu trigger button.\n   * Can be overridden per-tab via Tab's menuTriggerProps prop.\n   * @default { icon: <MoreIcon /> }\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Default props passed to the Menu component.\n   * Can be overridden per-tab via Tab's menuProps prop.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior for tab `menu` items.\n   * - `false` (default) — overflow trigger only; no right-click menu\n   * - `true` — overflow trigger and right-click menu\n   * - `'context-only'` — right-click menu only; no overflow trigger. Inline close\n   *   (`onDelete`) shows even when `menu` is non-empty, like tabs without a menu.\n   * Can be overridden per-tab via Tab's contextMenu prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered on any tab.\n   * Called with the action key and the tab key.\n   * Tab-level onAction is called first, then this.\n   */\n  onAction?: (action: string, tabKey: string) => void;\n  /** Custom tasty styles for the tab bar container. */\n  styles?: Styles;\n  /** QA selector attribute. */\n  qa?: string;\n  /** Tab components or Tabs.List with Tabs.Panel. */\n  children?: ReactNode;\n  /**\n   * Functional content renderer for optimized lazy evaluation.\n   * When provided, panel content is only evaluated for the active tab,\n   * while inactive tabs use cached content.\n   */\n  renderPanel?: (key: string) => ReactNode;\n  /**\n   * Cache keys for individual panels. Enables caching for specified panels.\n   */\n  panelCacheKeys?: Record<string | number, CacheKeyValue>;\n  /**\n   * Enable drag-and-drop tab reordering.\n   * When a tab picker is shown (`showTabPicker`), reordering is automatically\n   * enabled in the picker dropdown as well.\n   * @default false\n   */\n  isReorderable?: boolean;\n  /**\n   * Controlled order of tab keys.\n   * When provided, tabs are displayed in this order.\n   */\n  keyOrder?: string[];\n  /**\n   * Callback when tabs are reordered via drag-and-drop.\n   */\n  onReorder?: (newOrder: string[]) => void;\n  /**\n   * Whether to show a tab picker dropdown in the suffix area.\n   * - `true` - always show the tab picker\n   * - `false` - never show the tab picker (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showTabPicker?: boolean | 'auto';\n  /**\n   * Whether to show scroll arrow buttons in the suffix area.\n   * - `true` - always show scroll arrows\n   * - `false` - never show scroll arrows (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showScrollArrows?: boolean | 'auto';\n  /**\n   * Position of the tab picker dropdown.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  tabPickerPosition?: TabsActionPosition;\n  /**\n   * Position of the scroll arrow buttons.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  scrollArrowsPosition?: TabsActionPosition;\n  /**\n   * Visually hide the custom horizontal scrollbar in the tab list\n   * and skip its tracking logic. Does not affect tab picker, scroll arrows,\n   * or fade indicators — only the tiny scrollbar visual.\n   * @default false\n   */\n  hideTabListScroll?: boolean;\n  /**\n   * Inline padding for the tab list container.\n   * Sets horizontal padding only (e.g., \"2x\" → padding: \"0 2x\").\n   */\n  tabListPadding?: string;\n  /** Custom tasty styles for the tab bar (Bar sub-element). */\n  barStyles?: Styles;\n  /** Custom tasty styles for the TabList sub-element. */\n  tabListStyles?: Styles;\n  /** Custom tasty styles for the Prefix sub-element. */\n  prefixStyles?: Styles;\n  /** Custom tasty styles for the Suffix sub-element. */\n  suffixStyles?: Styles;\n}\n\nexport interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {\n  /**\n   * Unique identifier for the tab.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /**\n   * Content displayed in the tab button. Optional for icon-only tabs\n   * (`icon` / `rightIcon`). When omitted, provide an `aria-label` (and\n   * typically a `tooltip`) so the tab has an accessible name.\n   */\n  title?: ReactNode;\n  /** Panel content rendered when tab is active. */\n  children?: ReactNode;\n  /** Disables the tab (cannot be selected). */\n  isDisabled?: boolean;\n  /** Actions to render in the tab. Rendered before menu trigger if tab has menu. */\n  actions?: ReactNode;\n  /** Whether the tab title can be edited. Overrides the Tabs-level isEditable default. */\n  isEditable?: boolean;\n  /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */\n  onTitleChange?: (newTitle: string) => void;\n  /**\n   * Menu items to display in a dropdown menu on the tab.\n   * Pass Menu.Item elements directly - they will be wrapped in a Menu internally.\n   * Overrides the Tabs-level menu default. Set to `null` to disable menu.\n   */\n  menu?: ReactNode | null;\n  /**\n   * Props to customize the menu trigger button.\n   * Overrides the Tabs-level menuTriggerProps default.\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Props passed to the Menu component.\n   * Overrides the Tabs-level menuProps default.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior. Same values as Tabs `contextMenu`.\n   * Uses the same menu items as `menu` prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered.\n   * Called with the action key from Menu.Item.\n   */\n  onAction?: (action: string) => void;\n}\n\nexport interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {\n  /**\n   * Panel identifier. Must match a Tab's id.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Panel content. */\n  children?: ReactNode;\n  /** Custom tasty styles for the panel container. */\n  styles?: Styles;\n}\n\nexport interface CubeTabListProps extends QAProps {\n  /** Tab components. */\n  children?: ReactNode;\n}\n\n// =============================================================================\n// Internal Types\n// =============================================================================\n\n/**\n * Internal representation of a parsed Tab.\n * Uses `content` instead of `children` to distinguish panel content.\n */\nexport interface ParsedTab extends Omit<CubeTabProps, 'id' | 'children'> {\n  /** Tab key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from Tab's children prop */\n  content: ReactNode;\n}\n\n/**\n * Internal representation of a parsed TabPanel.\n */\nexport interface ParsedPanel extends Omit<\n  CubeTabPanelProps,\n  'id' | 'children'\n> {\n  /** Panel key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from TabPanel's children prop */\n  content: ReactNode;\n}\n"],"mappings":";;;;;;;AAkCA,MAAaW,iBAAsD;CACjEE,QAAQ;CACRC,OAAO;AACT"}
+{"version":3,"file":"types.js","names":["BaseProps","OuterStyleProps","Styles","ReactNode","CubeItemActionProps","CubeMenuProps","CubeItemProps","TabType","TabPlacement","TabsActionPosition","TabSize","RADIO_SIZE_MAP","Record","medium","large","TabContextMenu","PanelBehaviorProps","prerender","keepMounted","QAProps","qa","qaVal","OmittedItemProps","TabStyleProps","Omit","size","autoHideActions","CacheKeyValue","CubeTabsProps","activeKey","defaultActiveKey","type","placement","label","prefix","suffix","onChange","key","onDelete","onTitleChange","newTitle","isEditable","menu","menuTriggerProps","Partial","menuProps","contextMenu","onAction","action","tabKey","styles","children","renderPanel","panelCacheKeys","isReorderable","keyOrder","onReorder","newOrder","showTabPicker","showScrollArrows","tabPickerPosition","scrollArrowsPosition","hideTabListScroll","tabListPadding","barStyles","tabListStyles","prefixStyles","suffixStyles","CubeTabProps","id","title","isDisabled","actions","CubeTabPanelProps","CubeTabListProps","ParsedTab","content","ParsedPanel"],"sources":["../../../../src/components/navigation/Tabs/types.ts"],"sourcesContent":["import type { BaseProps, OuterStyleProps, Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { CubeItemProps } from '../../content/Item';\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/** Visual appearance type for tabs */\nexport type TabType = 'default' | 'narrow' | 'file' | 'radio';\n\n/**\n * Where the tab bar sits relative to its panels.\n * - `'top'` / `'bottom'` keep the bar horizontal.\n * - `'left'` / `'right'` switch it to a vertical strip.\n */\nexport type TabPlacement = 'top' | 'bottom' | 'left' | 'right';\n\n/** Position for TabPicker and scroll arrows */\nexport type TabsActionPosition = 'prefix' | 'suffix';\n\n/**\n * Tab size options.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\nexport type TabSize = 'xsmall' | 'small' | 'medium' | 'large';\n\n/**\n * Size mapping for radio type tabs.\n * API sizes mapped to Item button sizes:\n * medium (default) -> xsmall (32px total), large -> medium (40px total).\n */\nexport const RADIO_SIZE_MAP: Record<'medium' | 'large', TabSize> = {\n  medium: 'xsmall',\n  large: 'medium',\n};\n\n/** How the tab `menu` is exposed alongside or instead of the overflow trigger. */\nexport type TabContextMenu = boolean | 'context-only';\n\n// =============================================================================\n// Shared Props Interfaces\n// =============================================================================\n\n/** Common props for panel rendering behavior */\nexport interface PanelBehaviorProps {\n  /** If true, panel is rendered but hidden when not active. */\n  prerender?: boolean;\n  /** If true, once visited the panel stays in DOM. */\n  keepMounted?: boolean;\n}\n\n/** Common props for QA attributes */\nexport interface QAProps {\n  /** QA selector attribute. */\n  qa?: string;\n  /** Additional QA value attribute. */\n  qaVal?: string;\n}\n\n// =============================================================================\n// Tab Style Props\n// =============================================================================\n\n/** Props from CubeItemProps that don't apply to Tab */\ntype OmittedItemProps =\n  | 'id' // Tab has its own id as Key type\n  | 'type' // Type is decided at the Tabs level, never per-tab\n  | 'size' // Tab has its own TabSize\n  | 'theme' // Tabs have internal theming\n  | 'shape' // Tabs have internal shape logic\n  | 'description' // Tabs don't have descriptions\n  | 'descriptionPlacement'\n  | 'descriptionProps'\n  | 'hotkeys' // Tabs have their own keyboard navigation\n  | 'keyboardShortcutProps'\n  | 'labelProps' // Tabs use title prop instead\n  | 'labelRef'\n  | 'level' // Tabs don't use heading levels\n  | 'highlight' // Tabs don't use highlighting\n  | 'highlightCaseSensitive'\n  | 'highlightStyles'\n  | 'variant' // Tabs have internal variant logic\n  | 'htmlType' // Tab is always a button\n  | 'isSelected' // Handled internally by state\n  | 'preserveActionsSpace' // Set internally in TabButton\n  | 'disableActionsFocus' // Not used in Tab\n  | 'actions' // Tab has its own actions definition\n  | 'autoHideActions' // Tab has its own autoHideActions\n  | 'insideWrapper' // Internal Item wrapper prop\n  | 'showActions' // Internal Item wrapper prop\n  | 'skipActionsWidthTransition'; // Internal Item wrapper prop\n\n/** Common styling props for tabs - inherits style props from CubeItemProps */\nexport interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'medium' (default, 32px) and 'large' (40px),\n   * mapped to Item button sizes xsmall (24px) and medium (32px).\n   */\n  size?: TabSize;\n  /** Whether to show actions only on hover. */\n  autoHideActions?: boolean;\n}\n\n// =============================================================================\n// Component Props\n// =============================================================================\n\n/** Cache key type - primitives only for reliable comparison */\nexport type CacheKeyValue = string | number | boolean | null | undefined;\n\nexport interface CubeTabsProps\n  extends BaseProps, OuterStyleProps, PanelBehaviorProps {\n  /** Controlled active tab key. When provided, component is controlled. */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. */\n  defaultActiveKey?: string;\n  /**\n   * Visual appearance type for tabs.\n   * - `default` - Standard tabs with selection indicator below (default)\n   * - `narrow` - Same as default but with collapsed vertical padding on labels\n   * - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs\n   * - `radio` - Radio button style for tab selection\n   * @default 'default'\n   */\n  type?: TabType;\n  /**\n   * Where the tab bar sits relative to its panels.\n   * `'top'` / `'bottom'` keep the bar horizontal; `'left'` / `'right'`\n   * switch it to a vertical strip. The selection indicator, scroll behavior,\n   * fades, and per-type visuals all adapt automatically.\n   * @default 'top'\n   */\n  placement?: TabPlacement;\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'medium' (default, 32px) and 'large' (40px),\n   * mapped to Item button sizes xsmall (24px) and medium (32px).\n   * @default 'medium'\n   */\n  size?: TabSize;\n  /** Accessible label for the tab list. */\n  label?: string;\n  /** Content rendered before the tab list. */\n  prefix?: ReactNode;\n  /** Content rendered after the tab list. */\n  suffix?: ReactNode;\n  /** Callback when active tab changes. */\n  onChange?: (key: string) => void;\n  /** Callback when tab delete button is clicked. Presence enables delete buttons. */\n  onDelete?: (key: string) => void;\n  /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */\n  onTitleChange?: (key: string, newTitle: string) => void;\n  /** Whether to show tab actions only on hover. Can be overridden per-tab. */\n  autoHideActions?: boolean;\n  /**\n   * Whether tabs are editable by default.\n   * Can be overridden per-tab via Tab's isEditable prop.\n   * @default false\n   */\n  isEditable?: boolean;\n  /**\n   * Default menu items for all tabs.\n   * Can be overridden per-tab via Tab's menu prop.\n   * Set to `null` on individual Tab to disable menu for that tab.\n   */\n  menu?: ReactNode;\n  /**\n   * Default props for the menu trigger button.\n   * Can be overridden per-tab via Tab's menuTriggerProps prop.\n   * @default { icon: <MoreIcon /> }\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Default props passed to the Menu component.\n   * Can be overridden per-tab via Tab's menuProps prop.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior for tab `menu` items.\n   * - `false` (default) — overflow trigger only; no right-click menu\n   * - `true` — overflow trigger and right-click menu\n   * - `'context-only'` — right-click menu only; no overflow trigger. Inline close\n   *   (`onDelete`) shows even when `menu` is non-empty, like tabs without a menu.\n   * Can be overridden per-tab via Tab's contextMenu prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered on any tab.\n   * Called with the action key and the tab key.\n   * Tab-level onAction is called first, then this.\n   */\n  onAction?: (action: string, tabKey: string) => void;\n  /** Custom tasty styles for the tab bar container. */\n  styles?: Styles;\n  /** QA selector attribute. */\n  qa?: string;\n  /** Tab components or Tabs.List with Tabs.Panel. */\n  children?: ReactNode;\n  /**\n   * Functional content renderer for optimized lazy evaluation.\n   * When provided, panel content is only evaluated for the active tab,\n   * while inactive tabs use cached content.\n   */\n  renderPanel?: (key: string) => ReactNode;\n  /**\n   * Cache keys for individual panels. Enables caching for specified panels.\n   */\n  panelCacheKeys?: Record<string | number, CacheKeyValue>;\n  /**\n   * Enable drag-and-drop tab reordering.\n   * When a tab picker is shown (`showTabPicker`), reordering is automatically\n   * enabled in the picker dropdown as well.\n   * @default false\n   */\n  isReorderable?: boolean;\n  /**\n   * Controlled order of tab keys.\n   * When provided, tabs are displayed in this order.\n   */\n  keyOrder?: string[];\n  /**\n   * Callback when tabs are reordered via drag-and-drop.\n   */\n  onReorder?: (newOrder: string[]) => void;\n  /**\n   * Whether to show a tab picker dropdown in the suffix area.\n   * - `true` - always show the tab picker\n   * - `false` - never show the tab picker (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showTabPicker?: boolean | 'auto';\n  /**\n   * Whether to show scroll arrow buttons in the suffix area.\n   * - `true` - always show scroll arrows\n   * - `false` - never show scroll arrows (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showScrollArrows?: boolean | 'auto';\n  /**\n   * Position of the tab picker dropdown.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  tabPickerPosition?: TabsActionPosition;\n  /**\n   * Position of the scroll arrow buttons.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  scrollArrowsPosition?: TabsActionPosition;\n  /**\n   * Visually hide the custom horizontal scrollbar in the tab list\n   * and skip its tracking logic. Does not affect tab picker, scroll arrows,\n   * or fade indicators — only the tiny scrollbar visual.\n   * @default false\n   */\n  hideTabListScroll?: boolean;\n  /**\n   * Inline padding for the tab list container.\n   * Sets horizontal padding only (e.g., \"2x\" → padding: \"0 2x\").\n   */\n  tabListPadding?: string;\n  /** Custom tasty styles for the tab bar (Bar sub-element). */\n  barStyles?: Styles;\n  /** Custom tasty styles for the TabList sub-element. */\n  tabListStyles?: Styles;\n  /** Custom tasty styles for the Prefix sub-element. */\n  prefixStyles?: Styles;\n  /** Custom tasty styles for the Suffix sub-element. */\n  suffixStyles?: Styles;\n}\n\nexport interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {\n  /**\n   * Unique identifier for the tab.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /**\n   * Content displayed in the tab button. Optional for icon-only tabs\n   * (`icon` / `rightIcon`). When omitted, provide an `aria-label` (and\n   * typically a `tooltip`) so the tab has an accessible name.\n   */\n  title?: ReactNode;\n  /** Panel content rendered when tab is active. */\n  children?: ReactNode;\n  /** Disables the tab (cannot be selected). */\n  isDisabled?: boolean;\n  /** Actions to render in the tab. Rendered before menu trigger if tab has menu. */\n  actions?: ReactNode;\n  /** Whether the tab title can be edited. Overrides the Tabs-level isEditable default. */\n  isEditable?: boolean;\n  /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */\n  onTitleChange?: (newTitle: string) => void;\n  /**\n   * Menu items to display in a dropdown menu on the tab.\n   * Pass Menu.Item elements directly - they will be wrapped in a Menu internally.\n   * Overrides the Tabs-level menu default. Set to `null` to disable menu.\n   */\n  menu?: ReactNode | null;\n  /**\n   * Props to customize the menu trigger button.\n   * Overrides the Tabs-level menuTriggerProps default.\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Props passed to the Menu component.\n   * Overrides the Tabs-level menuProps default.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior. Same values as Tabs `contextMenu`.\n   * Uses the same menu items as `menu` prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered.\n   * Called with the action key from Menu.Item.\n   */\n  onAction?: (action: string) => void;\n}\n\nexport interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {\n  /**\n   * Panel identifier. Must match a Tab's id.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Panel content. */\n  children?: ReactNode;\n  /** Custom tasty styles for the panel container. */\n  styles?: Styles;\n}\n\nexport interface CubeTabListProps extends QAProps {\n  /** Tab components. */\n  children?: ReactNode;\n}\n\n// =============================================================================\n// Internal Types\n// =============================================================================\n\n/**\n * Internal representation of a parsed Tab.\n * Uses `content` instead of `children` to distinguish panel content.\n */\nexport interface ParsedTab extends Omit<CubeTabProps, 'id' | 'children'> {\n  /** Tab key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from Tab's children prop */\n  content: ReactNode;\n}\n\n/**\n * Internal representation of a parsed TabPanel.\n */\nexport interface ParsedPanel extends Omit<\n  CubeTabPanelProps,\n  'id' | 'children'\n> {\n  /** Panel key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from TabPanel's children prop */\n  content: ReactNode;\n}\n"],"mappings":";;;;;;;AAkCA,MAAaW,iBAAsD;CACjEE,QAAQ;CACRC,OAAO;AACT"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useState } from "react";
 //#region src/components/navigation/Tabs/use-tab-editing.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { chainRaf } from "../../../utils/raf.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";

package/dist/components/organisms/StatsCard/StatsCard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { Text as _Text } from "../../content/Text.js";
 import { Title as _Title } from "../../content/Title.js";
 import { Card } from "../../content/Card/Card.js";

package/dist/components/other/Calendar/Calendar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { CalendarPanel } from "./CalendarPanel.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { CALENDAR_CELL_STYLES } from "./styled.js";
 import { c } from "react/compiler-runtime";
 import { mergeStyles, tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { getWeekNumber } from "../../fields/DatePicker/period.js";
 import { CalendarCell } from "./CalendarCell.js";
 import { c } from "react/compiler-runtime";

package/dist/components/other/Calendar/CalendarHeader.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { Title as _Title } from "../../content/Title.js";
 import { Space } from "../../layout/Space.js";
 import { RightIcon } from "../../../icons/RightIcon.js";

package/dist/components/other/Calendar/CalendarPanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { CalendarElement } from "./styled.js";

package/dist/components/other/Calendar/PeriodCalendar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { getQuarter } from "../../fields/DatePicker/period.js";

package/dist/components/other/Calendar/PeriodGrid.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { CALENDAR_CELL_STYLES } from "./styled.js";
 import { mergeStyles, tasty } from "@tenphi/tasty";
 import { useLayoutEffect, useRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { CalendarPanel } from "./CalendarPanel.js";
 import { c } from "react/compiler-runtime";

package/dist/components/other/Calendar/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 //#region src/components/other/Calendar/styled.tsx
 /**

package/dist/components/other/CubeLogo/CubeLogo.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { Icon } from "../../../icons/Icon.js";
 import { c } from "react/compiler-runtime";
 import { mergeStyles, tasty } from "@tenphi/tasty";

package/dist/components/other/NoDataIcon/NoDataIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { wrapIcon } from "../../../icons/wrap-icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/other/NoDataIcon/NoDataIcon.tsx

package/dist/components/overlays/AlertDialog/AlertDialog.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { Paragraph } from "../../content/Paragraph.js";
 import { Title as _Title } from "../../content/Title.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { AlertDialogZone } from "./AlertDialogZone.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext, useLayoutEffect, useRef, useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { Portal } from "../../portal/Portal.js";
 import { AlertDialog as _AlertDialog } from "./AlertDialog.js";
 import { DialogContainer } from "../Dialog/DialogContainer.js";

package/dist/components/overlays/Dialog/Dialog.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { SlotProvider } from "../../../utils/react/Slots.js";

package/dist/components/overlays/Dialog/DialogContainer.d.ts

@@ -25,9 +25,9 @@ export interface CubeDialogContainerProps extends WithCloseBehavior {
   isKeyboardDismissDisabled?: boolean;
   /**
    * Whether Escape, an outside click and the close button ask "Discard
-   * changes?" before they close the dialog. Unset, they ask while a
-   * `DialogForm` inside has unsaved edits. Explicit actions (submit, Cancel,
-   * closing it from code) never ask.
+   * changes?" before they close the dialog. Unset, they ask while a form
+   * inside (a `DialogForm`, or a modern `Form`) has unsaved edits. Explicit
+   * actions (submit, Cancel, closing it from code) never ask.
    */
   confirmDismiss?: boolean;
 }

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { Modal as _Modal } from "../Modal/Modal.js";
 import { Tray as _Tray } from "../Modal/Tray.js";
 import { DialogContext } from "./context.js";